/* ════════════════════════════════════════════════════════════════
   SKYAGENT PORTAL COMPONENTS
   Version: 1.4 | 2026-03-08

   СТРУКТУРА:
   00. Reset & Base
   01. Layout — Sidebar, Topbar, Main
   02. Navigation — Nav links, Sections, Badges
   03. Page Header, Breadcrumb
   04. Stat Cards
   05. Card
   06. Filters
   07. Table & Pagination
   08. Badges
   09. Buttons
   10. Forms
   11. Progress
   12. Alerts
   13. Chunk Accordion
   14. Rows-per-page (RPP)
   15. Team & Access (3.9.3)
   16. Invite Form (3.9.4)
   17. Responsive Breakpoints
   18. Analytics & Reports (3.9.13–3.9.14)
   19. Case Detail (3.10)
   20. Typography Scale (3.10)
   21. Visual Tokens — Badge colours (3.10)
   22. Semantic Aliases — Badge aliases (3.10)
   23. [reserved]
   24. Case Monitor (3.10)
   25. Web Chat — Dialogue & Thread Interface (3.11)
   26. Markdown Typography (SA.render, Sprint 3.12.A)
   27 Rich CRF Components (Sprint 3.12.B)
   28 Response View + Chat Preview (Sprint 3.12.C)
   29. KB Document Status — superseded/archived (Sprint 3.18)
   30. KB Document Dedup (Sprint 3.18)
   31. Platform Selector in sidebar (Sprint 3.18)
   32. Telegram Link Widget (Sprint 3.18)
   33. Pipeline Error Monitor (Sprint 3.19)
   34. Form Section Dividers (Sprint 3.19)
   35. Public Auth Pages — navbar, register, login (Sprint 3.19b)
   36. Upload Form — Data Classification + Consent (Sprint 3.19c)
   37. Upload Overlay Spinner (KB-INGEST-02, Sprint 3.19c)
   38. Legal documents (01-04)
   39. Password field — eye toggle + strength indicator
   ════════════════════════════════════════════════════════════════ */


/* ── 00. Reset & Base ──────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--sa-font);
  background: #f4f6fa;
  margin: 0;
  color: #212529;
}


/* ── 01. Layout ────────────────────────────────────────────────── */

.sa-topbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--sa-topbar-height);
  background: var(--sa-sidebar-bg);
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  z-index: 200;
}
.sa-topbar-brand { color: #fff; font-weight: 700; font-size: 1rem; }
.sa-burger {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 5px; padding: 4px;
}
.sa-burger span {
  display: block; width: 22px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: all 0.25s;
}
.sa-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 150;
}
.sa-overlay.open { display: block; }
.sa-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sa-sidebar-width);
  background: var(--sa-sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 160;
  overflow-y: auto;
  transition: transform 0.25s ease;
}
.sa-sidebar-brand {
  padding: 1.25rem 1.25rem 0.75rem;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-bottom: 1px solid var(--sa-sidebar-border);
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}
.sa-sidebar-org {
  padding: 0.5rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--sa-sidebar-border);
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}
.sa-sidebar-org .org-name { color: var(--sa-primary); font-weight: 600; font-size: 0.875rem; }
.sa-sidebar-org .org-role { color: var(--sa-sidebar-text); font-size: 0.75rem; }
.sa-sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--sa-sidebar-border);
  flex-shrink: 0;
}
.sa-sidebar-footer a { color: var(--sa-sidebar-text); font-size: 0.8rem; text-decoration: none; }
.sa-sidebar-footer a:hover { color: var(--sa-sidebar-active); }
.sa-main {
  margin-left: var(--sa-sidebar-width);
  padding: var(--sa-content-pad);
  /* App workspace pattern (Linear/Notion/Jira/Figma на 1920+ мониторах):
     contenT capped на 1640px — достаточно для плотных таблиц, не растягивается
     до нечитаемых километров на 4K. Это НЕ marketing-cap (1220 centered).
     На 1440px мониторе всё помещается, на 1920+ остаток справа = app-typical. */
  max-width: 1640px;
  min-width: 0;
  min-height: 100vh;
}


/* ── 02. Navigation ────────────────────────────────────────────── */

.sa-nav { flex: 1; }
.sa-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.25rem;
  color: var(--sa-sidebar-text);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background 0.15s, color 0.15s;
}
.sa-nav-link:hover { background: var(--sa-sidebar-hover); color: var(--sa-sidebar-active); }
.sa-nav-link.active {
  background: var(--sa-sidebar-hover);
  color: var(--sa-sidebar-active);
  border-left: 3px solid var(--sa-primary);
  font-weight: 600;
}
.sa-nav-icon { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; }
.sa-nav-section {
  padding: 1.2rem 1rem 0.3rem 1rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sa-sidebar-text);
  opacity: 0.75;
  user-select: none;
}
.sa-nav-link-disabled { opacity: 0.35; pointer-events: none; cursor: default; }
.sa-nav-badge {
  margin-left: auto;
  font-size: 0.58rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.07);
  color: var(--sa-sidebar-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sa-btn-ghost {
  background: none; border: none;
  color: var(--sa-sidebar-text);
  cursor: pointer; padding: 0;
  font-size: 0.85rem; opacity: 0.7;
  transition: opacity 0.15s;
}
.sa-btn-ghost:hover { opacity: 1; color: var(--sa-sidebar-active); }


/* ── 03. Page Header & Breadcrumb ──────────────────────────────── */

.sa-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.sa-page-title { font-size: 1.4rem; font-weight: 700; color: #1a1d23; margin: 0; }
.sa-breadcrumb { font-size: 0.8rem; color: #6c757d; margin-bottom: 0.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.sa-breadcrumb-sep { color: #c2c8d0; }
.sa-breadcrumb-current { color: #6c757d; }
.sa-breadcrumb a { color: #6c757d; text-decoration: none; }
.sa-breadcrumb a:hover { color: var(--sa-primary); text-decoration: underline; }


/* ── 04. Stat Cards ────────────────────────────────────────────── */

/* 4 равных карточки. В app-workspace cap (.sa-main max 1640px)
   каждая карточка получает ~360px на 1920+ мониторе — оптимально. */
.sa-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.sa-stat-card {
  background: #fff;
  border: 1px solid var(--sa-border-color);
  border-radius: var(--sa-border-radius);
  padding: 1.25rem;
  text-align: center;
  box-shadow: var(--sa-card-shadow);
}
.sa-stat-value { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--sa-primary); }
.sa-stat-value.green    { color: var(--sa-success); }
.sa-stat-value.cyan     { color: var(--sa-accent); }
.sa-stat-value--warning { color: var(--sa-warning); }
.sa-stat-label { color: #6c757d; font-size: 0.8rem; margin-top: 0.25rem; }


/* ── 05. Card ──────────────────────────────────────────────────── */

.sa-card {
  background: #fff;
  border: 1px solid var(--sa-border-color);
  border-radius: var(--sa-border-radius);
  box-shadow: var(--sa-card-shadow);
  overflow: hidden;
}
.sa-card-header {
  padding: 0.75rem 1.25rem;
  background: #f8f9fa;
  border-bottom: 1px solid var(--sa-border-color);
  font-weight: 600;
  font-size: 0.875rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}


/* ── 06. Filters ───────────────────────────────────────────────── */

.sa-filters {
  background: #fff;
  border: 1px solid var(--sa-border-color);
  border-radius: var(--sa-border-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--sa-card-shadow);
}
/* Universal Filter Bar Standard — ADR-FILTER-MVP-01 (§20 HLD).
   align-items: stretch → все controls (input/select/button) одинаковой высоты.
   Высота 38px унифицирована для всех типов filter controls. */
.sa-filters-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; }
.sa-filter-group { display: flex; flex-direction: column; gap: 0.3rem; min-width: 120px; flex: 1; }
.sa-filter-label {
  font-size: 0.7rem;
  font-weight: 500;                       /* было 600 — стало воздушнее, как в Linear/Notion */
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sa-text-muted, #6c757d);
}
.sa-filter-group select,
.sa-filter-group input {
  height: 38px;                           /* unified height для всех filter controls */
  padding: 0 0.75rem;
  border: 1px solid var(--sa-border-color, #dee2e6);
  border-radius: 0.4rem;
  font-size: 0.875rem;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  color: var(--sa-text, #212529);
}
.sa-filter-group select:focus,
.sa-filter-group input:focus {
  outline: none;
  border-color: var(--sa-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);    /* унифицировано с sa-filter-search-input */
}
/* Filter actions — кнопки на одной линии с control'ами (align-items:stretch + flex-end label-gap) */
.sa-filter-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;                  /* кнопки прижаты вниз — на одной линии с input/select */
  flex-wrap: wrap;
}
.sa-filter-actions .sa-btn { height: 38px; }   /* консистентная высота с filter controls */


/* ── 07. Table & Pagination Bar ────────────────────────────────── */

.sa-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sa-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.sa-table th {
  padding: 0.65rem 1rem;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: #6c757d;
  border-bottom: 2px solid var(--sa-border-color);
  background: #f8f9fa;
  text-align: left; white-space: nowrap;
}
.sa-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.875rem;
  vertical-align: middle;
}
.sa-table tbody tr:hover { background: #f8f9ff; }
.sa-table tbody tr:last-child td { border-bottom: none; }
.sa-table .sa-doc-title { font-weight: 600; }
.sa-table .sa-muted { color: #6c757d; font-size: 0.8rem; }
.sa-pagination-bar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: #f8f9fa;
  border-bottom: 1px solid var(--sa-border-color);
  font-size: 0.8rem; color: #6c757d;
}
.sa-rows-select { display: flex; align-items: center; gap: 0.5rem; }
.sa-rows-select select { padding: 0.25rem 0.5rem; border: 1px solid #dee2e6; border-radius: 0.35rem; font-size: 0.8rem; }


/* ── 08. Badges ────────────────────────────────────────────────── */

.sa-badge {
  position: relative;
  display: inline-block;
  padding: 0.2em 0.55em;
  border-radius: 0.35em;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.03em; white-space: nowrap;
}
.sa-badge-type     { background: #e9ecef; color: #495057; }
.sa-badge-manuals  { background: #cff4fc; color: #055160; }
.sa-badge-mods     { background: #fff3cd; color: #664d03; }
.sa-badge-reg      { background: #d1e7dd; color: #0a3622; }
.sa-badge-wiring   { background: #e9d8fd; color: #4a235a; }
.sa-badge-struct   { background: #ffe5d0; color: #6e2f0a; }
.sa-badge-ops      { background: #cfe2ff; color: #084298; }
.sa-badge-train    { background: #ffd6e7; color: #6a1035; }
.sa-badge-rec      { background: #e9ecef; color: #6c757d; }
.sa-badge-org      { background: #fff3cd; color: #664d03; }
.sa-badge-global   { background: #f8f9fa; color: #6c757d; border: 1px solid #dee2e6; }
.sa-badge-done     { background: #d1e7dd; color: #0a3622; }
.sa-badge-pending  { background: #e9ecef; color: #495057; }
.sa-badge-failed   { background: #f8d7da; color: #58151c; }
.sa-badge-parsing  { background: #cff4fc; color: #055160; }


/* ── 09. Buttons ───────────────────────────────────────────────── */

.sa-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: 0.4rem;
  font-size: 0.875rem; font-weight: 500;
  cursor: pointer; text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.15s; white-space: nowrap; line-height: 1.4;
}
.sa-btn-primary { background: var(--sa-primary); color: #fff; border-color: var(--sa-primary); }
.sa-btn-primary:hover { background: var(--sa-primary-hover); color: #fff; text-decoration: none; }
.sa-btn-outline { background: transparent; color: var(--sa-primary); border-color: var(--sa-primary); }
.sa-btn-outline:hover { background: var(--sa-primary); color: #fff; text-decoration: none; }
.sa-btn-sm     { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.sa-btn-danger { background: var(--sa-danger); color: #fff; border-color: var(--sa-danger); }

.sa-btn-icon {
  background: transparent;
  border: 1px solid #dee2e6;
  color: #6c757d;
  padding: 0.25rem 0.5rem;
  border-radius: 0.35rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.sa-btn-success-outline { color: var(--sa-success); border-color: var(--sa-success); }
.sa-btn-success-outline:hover { background: var(--sa-success); color: #fff; }
.sa-btn-icon:hover {
  background: #f0f4ff;
  border-color: var(--sa-primary);
  color: var(--sa-primary);
  text-decoration: none;
}


/* ── 10. Forms ─────────────────────────────────────────────────── */

.sa-form-group { margin-bottom: 1rem; }
.sa-label { display: block; font-size: 0.875rem; font-weight: 600; color: #495057; margin-bottom: 0.35rem; }
.sa-input, .sa-select, .sa-textarea {
  width: 100%; padding: 0.5rem 0.75rem;
  border: 1px solid #dee2e6; border-radius: 0.4rem;
  font-size: 0.875rem; font-family: var(--sa-font);
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #fff;
}
.sa-input:focus, .sa-select:focus, .sa-textarea:focus {
  outline: none;
  border-color: var(--sa-primary);
  box-shadow: 0 0 0 3px rgba(13,110,253,0.15);
}
.sa-required { color: var(--sa-danger); margin-left: 2px; }


/* ── 11. Progress ──────────────────────────────────────────────── */

.sa-progress { height: 8px; background: #e9ecef; border-radius: 99px; overflow: hidden; }
.sa-progress-bar { height: 100%; background: var(--sa-primary); border-radius: 99px; transition: width 0.4s ease; }
.sa-progress-bar.done   { background: var(--sa-success); }
.sa-progress-bar.failed { background: var(--sa-danger); }
.sa-progress-hatch      { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(108,117,125,0.25) 4px, rgba(108,117,125,0.25) 6px); border-radius: 0 99px 99px 0; } /* EQS-V2: неизмеримая зона до Zone 3 */


/* ── 12. Alerts ────────────────────────────────────────────────── */

.sa-alert { padding: 0.875rem 1.25rem; border-radius: var(--sa-border-radius); font-size: 0.875rem; margin-bottom: 1rem; }
.sa-alert-success { background: #d1e7dd; color: #0a3622; border: 1px solid #a3cfbb; }
.sa-alert-danger  { background: #f8d7da; color: #58151c; border: 1px solid #f1aeb5; }
.sa-alert-info    { background: #cff4fc; color: #055160; border: 1px solid #9eeaf9; }
.sa-alert-warning { background: #fff3cd; color: #664d03; border: 1px solid #ffe69c; }
.sa-form-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.sa-form-fieldset:disabled { opacity: 0.55; }


/* ── 13. Chunk Accordion ───────────────────────────────────────── */

.sa-chunk { border: 1px solid var(--sa-border-color); border-radius: var(--sa-border-radius); margin-bottom: 0.5rem; overflow: hidden; }
.sa-chunk-header {
  padding: 0.65rem 1rem; background: #f8f9fa; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 0.5rem; user-select: none; transition: background 0.15s;
}
.sa-chunk-header:hover { background: #f0f4ff; }
.sa-chunk-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.sa-chunk-body { padding: 1rem; display: none; border-top: 1px solid var(--sa-border-color); }
.sa-chunk-body.open { display: block; }
.sa-chunk-text { font-family: var(--sa-font-mono); font-size: 0.8rem; white-space: pre-wrap; line-height: 1.6; color: #2d3748; margin: 0; word-break: break-word; }


/* ── 14. Rows-per-page (RPP) ───────────────────────────────────── */

.sa-rpp-ctrl { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.sa-rpp-label { font-size: .8rem; color: var(--sa-text-muted, #6c757d); white-space: nowrap; }
.sa-rpp-btn {
  padding: .2rem .6rem; font-size: .8rem;
  border: 1px solid var(--sa-border, #dee2e6);
  border-radius: var(--sa-border-radius);
  background: var(--sa-surface, #fff); color: var(--sa-text, #212529);
  cursor: pointer; transition: background .15s, color .15s;
}
.sa-rpp-btn:hover  { background: var(--sa-primary-soft, #e8f0fe); }
.sa-rpp-btn.active { background: var(--sa-primary, #0d6efd); color: #fff; border-color: var(--sa-primary, #0d6efd); }
.sa-rpp-info { margin-left: auto; font-size: .8rem; color: var(--sa-text-muted, #6c757d); }
.sa-rpp-nav { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; justify-content: flex-end; }
.sa-rpp-nav-btn {
  padding: .25rem .75rem; font-size: .8rem;
  border: 1px solid var(--sa-border, #dee2e6);
  border-radius: var(--sa-border-radius);
  background: var(--sa-surface, #fff); color: var(--sa-text, #212529);
  cursor: pointer; transition: background .15s;
}
.sa-rpp-nav-btn:hover:not(.disabled):not(:disabled) { background: var(--sa-primary-soft, #e8f0fe); }
.sa-rpp-nav-btn.disabled,
.sa-rpp-nav-btn:disabled { opacity: .4; cursor: default; }
.sa-rpp-page-info        { font-size: .8rem; color: var(--sa-text-muted, #6c757d); }


/* ── 15. Team & Access (3.9.3) ─────────────────────────────────── */

.sa-role-legend { display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.82rem; }
.sa-role-legend-item { display: flex; align-items: center; gap: 0.5rem; }
.sa-legend-label { font-size: 0.75rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.sa-tg-linked   { color: var(--sa-success); font-size: 0.85rem; }
/* Input group с @-префиксом (Telegram, LK-Team) */
.sa-input-prefix { display: flex; align-items: stretch; border: 1px solid var(--sa-border-color); border-radius: var(--sa-border-radius); overflow: hidden; }
.sa-input-prefix:focus-within { border-color: var(--sa-primary); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); }
.sa-input-prefix__addon { display: flex; align-items: center; padding: 0 0.7rem; color: var(--sa-text-muted); border-right: 1px solid var(--sa-border-color); font-weight: 600; }
.sa-input-prefix .sa-input { border: none; box-shadow: none; border-radius: 0; flex: 1; }
.sa-input-prefix .sa-input:focus { box-shadow: none; }
.sa-input-prefix.is-disabled { opacity: 0.55; }
.sa-input-prefix.is-disabled .sa-input { background: transparent; }
.sa-tg-skip { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.85rem; color: var(--sa-primary); cursor: pointer; }
.sa-tg-skip input { width: 16px; height: 16px; accent-color: var(--sa-primary); }
.sa-project-tag { margin: 1px 2px; }
.sa-empty-state       { padding: 3rem; text-align: center; color: #6c757d; }
.sa-empty-state-icon  { font-size: 2rem; margin-bottom: 0.5rem; }
.sa-empty-state-title { font-weight: 600; margin-bottom: 0.25rem; }
.sa-empty-state-hint  { font-size: 0.85rem; }
.sa-status-dot          { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.sa-status-active       { background: var(--sa-success); }
.sa-status-inactive     { background: var(--sa-danger); }


/* ── 16. Invite Form (3.9.4) ───────────────────────────────────── */

.sa-invite-layout { display: grid; grid-template-columns: 1fr minmax(0, 2fr); gap: 1.5rem; align-items: start; }
/* Role matrix crosstab (LK-Team) — на базе .sa-table, токены только */
.sa-role-matrix { table-layout: fixed; width: 100%; min-width: 0; }
.sa-role-matrix th, .sa-role-matrix td { text-align: center; padding: 0.55rem 0.4rem; vertical-align: middle; }
.sa-role-matrix th:first-child, .sa-role-matrix td:first-child { text-align: left; width: 34%; }
.sa-role-matrix th:not(:first-child), .sa-role-matrix td:not(:first-child) { width: 16.5%; }
.sa-role-matrix-col { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; line-height: 1.1; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.02em; }
.sa-role-matrix-col .sa-btn-ico { width: 16px; height: 16px; color: var(--sa-text-muted); }
.sa-role-matrix-cell .sa-btn-ico { width: 18px; height: 18px; }
.sa-role-matrix-yes .sa-btn-ico { color: var(--sa-success); }
.sa-role-matrix-no .sa-btn-ico  { color: var(--sa-text-muted); opacity: 0.5; }
.sa-invite-form-body { padding: 1.5rem; }
.sa-invite-name-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sa-invite-hint { font-size: 0.8rem; color: #6c757d; margin-bottom: 0.75rem; min-height: 1.2em; }
.sa-invite-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #dee2e6; }

.sa-project-checklist {
  display: flex; flex-direction: column; gap: 0.5rem;
  max-height: 260px; overflow-y: auto;
  border: 1px solid #dee2e6; border-radius: 0.4rem;
  padding: 0.75rem; min-height: 48px;
}
.sa-project-check-item {
  display: flex; align-items: center; gap: 0.6rem;
  cursor: pointer; font-size: 0.875rem; padding: 0.25rem 0;
}
.sa-project-check-item input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0;
  accent-color: var(--sa-primary);
}
.sa-project-check-title     { color: #495057; }
.sa-project-check-all       { font-weight: 600; }
.sa-project-check-all-label { color: var(--sa-primary); }
.sa-project-check-divider   { height: 1px; background: #dee2e6; margin: 0.4rem 0; }

.sa-roles-guide-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sa-role-guide-header { margin-bottom: 0.5rem; }
.sa-role-guide-list {
  list-style: none; padding: 0; margin: 0;
  font-size: 0.8rem; color: #495057;
  display: flex; flex-direction: column; gap: 0.2rem;
}


/* ── 17. Responsive Breakpoints ────────────────────────────────── */

@media (max-width: 1024px) {
  :root { --sa-content-pad: 1.25rem; }
  .sa-table th, .sa-table td { padding: 0.6rem 0.75rem; }
  .sa-page-title { font-size: 1.2rem; }
}

@media (max-width: 768px) {
  :root { --sa-content-pad: 1rem; }

  .sa-topbar  { display: flex; }
  .sa-sidebar { top: 0; transform: translateX(-100%); box-shadow: 4px 0 20px rgba(0,0,0,0.3); }
  .sa-sidebar.open { transform: translateX(0); }
  .sa-main    { margin-left: 0; padding-top: calc(var(--sa-topbar-height) + var(--sa-content-pad)); }

  .sa-filter-group              { min-width: 100%; }
  .sa-filter-actions            { width: 100%; }
  .sa-filter-actions .sa-btn    { flex: 1; justify-content: center; }
  .sa-table-wrap                { border-radius: var(--sa-border-radius); }
  .sa-page-header               { flex-direction: column; align-items: flex-start; }
  .sa-page-header .sa-btn       { align-self: flex-start; }
  .sa-stats-row                 { grid-template-columns: 2fr 1fr; gap: 0.75rem; }
  .sa-chunk-header              { flex-direction: column; align-items: flex-start; }
  .sa-pagination-bar            { flex-direction: column; align-items: flex-start; }
  .sa-rpp-ctrl                  { gap: .35rem; }
  .sa-rpp-info                  { margin-left: 0; width: 100%; }
  .sa-rpp-nav                   { justify-content: flex-start; }
  .sa-invite-layout             { grid-template-columns: 1fr; }
  .sa-invite-name-row           { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .sa-stats-row { grid-template-columns: 1fr; }
  .sa-badge     { font-size: 0.65rem; }
  .sa-table th  { font-size: 0.65rem; }
  .sa-table td  { font-size: 0.8rem; }
}
/* ── 19. Analytics Layout helpers (3.9.14) ─────────────────
   Заменяют inline style="display:grid..." в шаблонах       */

.sa-kpi-row          { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.sa-kpi-row-5        { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1rem; }
.sa-grid-2           { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.sa-grid-2--mt       { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-top: 1rem; }
.sa-section-mt       { margin-top: 1rem; }
.sa-section-mb       { margin-bottom: 1rem; }
.sa-card-body        { padding: 1rem 1.25rem; }
.sa-card-body--lg    { padding: 1.25rem; }
.sa-kpi-scores       { display: flex; gap: 2rem; margin-bottom: 1rem; }
.sa-kpi-score-value  { font-size: 1.75rem; font-weight: 700; }
.sa-kpi-score-value--ok   { color: var(--sa-success); }
.sa-kpi-score-value--bad  { color: var(--sa-danger); }
.sa-kpi-score-value--cyan { color: var(--sa-accent); }
.sa-health-bar       { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.75rem 1.25rem; overflow: visible; }
.sa-stage-actions    { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.sa-filter-inline    { display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--sa-border-color); }
.sa-td-title         { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-td-nowrap        { white-space: nowrap; }
.sa-code-sm          { font-size: 0.78rem; }
.sa-code-xs          { font-size: 0.72rem; }
.sa-text-sm          { font-size: 0.8rem; }
.sa-text-xs          { font-size: 0.75rem; }
.sa-muted-sm         { color: #6c757d; font-size: 0.8rem; }

@media (max-width: 768px) {
  .sa-kpi-row   { grid-template-columns: 2fr 1fr; }
  .sa-kpi-row-5 { grid-template-columns: 2fr 1fr; }
  .sa-grid-2    { grid-template-columns: 1fr; }
  .sa-grid-2--mt { grid-template-columns: 1fr; }
}

/* ── 19b. Analytics Layout helpers — дополнение ────────────── */
.sa-card--mb         { margin-bottom: 1rem; }
.sa-card--mb-lg      { margin-bottom: 1.5rem; }
.sa-card--mt         { margin-top: 1rem; }
.sa-progress--mini   { flex: 1; height: 6px; }
.sa-progress--md     { height: 10px; }
.sa-pct-label        { font-size: 0.8rem; white-space: nowrap; }
.sa-progress-row     { display: flex; align-items: center; gap: 0.5rem; }
.sa-trust-hint       { font-size: 0.75rem; color: #6c757d; margin-top: 0.35rem; }
.sa-segment-legend--mt { margin-top: 0.75rem; }
.sa-card-actions     { display: flex; gap: 0.5rem; }
.sa-filter-bar       { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--sa-border-color); }

/* ── 18. Analytics & Reports (3.9.13–3.9.14) ──────────────────── */

.sa-pipeline-zone { margin-bottom: 1rem; }
.sa-pipeline-zone-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6c757d; margin-bottom: 0.5rem; padding-left: 0.25rem; }
.sa-pipeline-chain { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; }
.sa-pipeline-arrow { display: flex; align-items: center; color: #adb5bd; font-size: 1.1rem; padding: 0 0.1rem; align-self: center; }

.sa-pipeline-stage { border: 1px solid var(--sa-border-color); border-radius: var(--sa-border-radius); padding: 0.75rem 0.875rem; min-width: 155px; max-width: 200px; background: #fff; box-shadow: var(--sa-card-shadow); transition: border-color 0.2s; flex: 1; }
.sa-pipeline-stage--ok    { border-color: #a3cfbb; border-left: 3px solid var(--sa-success); }
.sa-pipeline-stage--warn  { border-color: #ffe69c; border-left: 3px solid var(--sa-warning); }
.sa-pipeline-stage--error { border-color: #f1aeb5; border-left: 3px solid var(--sa-danger); }
.sa-pipeline-stage--idle  { opacity: 0.5; }
.sa-pipeline-stage--stub  { border-style: dashed; opacity: 0.6; }

.sa-stage-header { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.35rem; flex-wrap: wrap; }
.sa-stage-number { font-size: 0.62rem; font-weight: 700; color: #adb5bd; letter-spacing: 0.04em; }
.sa-stage-name   { font-size: 0.8rem; font-weight: 600; color: #212529; flex: 1; }
.sa-stage-metric { margin: 0.2rem 0; }
.sa-stage-metric-value { font-size: 1.15rem; font-weight: 700; color: var(--sa-primary); line-height: 1.1; }
.sa-stage-metric-label { font-size: 0.65rem; color: #6c757d; }
.sa-stage-meta   { font-size: 0.68rem; color: #6c757d; margin-top: 0.2rem; }
.sa-stage-explain { font-size: 0.7rem; color: #6c757d; line-height: 1.4; margin-top: 0.4rem; border-top: 1px solid #f0f0f0; padding-top: 0.4rem; }

.sa-latency-ok   { color: var(--sa-success); font-weight: 600; }
.sa-latency-warn { color: var(--sa-warning); font-weight: 600; }
.sa-latency-crit { color: var(--sa-danger);  font-weight: 600; }
.sa-latency-na   { color: #adb5bd; }

.sa-refresh-bar  { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8rem; color: #6c757d; }
.sa-refresh-dot  { width: 8px; height: 8px; border-radius: 50%; background: var(--sa-success); animation: sa-pulse 2s infinite; }
@keyframes sa-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.sa-latency-stacked { display: flex; height: 26px; border-radius: 4px; overflow: hidden; width: 100%; }
.sa-latency-segment { display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: rgba(255,255,255,0.9); font-weight: 600; overflow: hidden; transition: width 0.4s ease; min-width: 0; }
.sa-segment-nlu      { background: #0d6efd; }
.sa-segment-rag      { background: #0dcaf0; }
.sa-segment-llm      { background: #fd7e14; }
.sa-segment-overhead { background: #adb5bd; }
.sa-segment-legend   { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.72rem; color: #495057; }
.sa-segment-legend-item { display: flex; align-items: center; gap: 0.35rem; }
.sa-segment-dot  { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

.sa-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--sa-border-color); margin-bottom: 1.5rem; overflow-x: auto; flex-wrap: nowrap; }
.sa-tab  { padding: 0.6rem 1.1rem; font-size: 0.8rem; font-weight: 600; color: #6c757d; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: color 0.15s, border-color 0.15s; cursor: pointer; }
.sa-tab:hover  { color: var(--sa-primary); }
.sa-tab.active { color: var(--sa-primary); border-bottom-color: var(--sa-primary); }
.sa-tab-muted { color: #adb5bd; cursor: default; }
.sa-tab-muted:hover { color: #adb5bd; }
.sa-tab-panel        { display: none; }
.sa-tab-panel.active { display: block; }

.sa-kpi-card { background: #fff; border: 1px solid var(--sa-border-color); border-radius: var(--sa-border-radius); padding: 1.1rem 1.25rem; box-shadow: var(--sa-card-shadow); }
.sa-kpi-top  { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }
.sa-kpi-value       { font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--sa-primary); }
.sa-kpi-value--ok   { color: var(--sa-success); }
.sa-kpi-value--warn { color: var(--sa-warning); }
.sa-kpi-value--crit { color: var(--sa-danger); }
.sa-kpi-label  { font-size: 0.78rem; color: #6c757d; margin-top: 0.2rem; }
.sa-kpi-target { font-size: 0.68rem; color: #6c757d; text-align: right; }
.sa-kpi-target strong { color: #495057; }

.sa-progress-target     { position: relative; height: 8px; background: #e9ecef; border-radius: 99px; overflow: visible; margin-top: 0.5rem; }
.sa-progress-target-bar { height: 100%; border-radius: 99px; background: var(--sa-primary); transition: width 0.4s ease; }
.sa-progress-target-bar--ok   { background: var(--sa-success); }
.sa-progress-target-bar--warn { background: var(--sa-warning); }
.sa-progress-target-bar--crit { background: var(--sa-danger); }
.sa-progress-target-line { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #495057; border-radius: 2px; }

.sa-rec-list { display: flex; flex-direction: column; gap: 0.75rem; }
.sa-rec-card { border: 1px solid var(--sa-border-color); border-radius: var(--sa-border-radius); padding: 0.875rem 1rem; background: #fff; border-left: 4px solid var(--sa-border-color); }
.sa-rec-card--critical { border-left-color: var(--sa-danger);  background: #fff8f8; }
.sa-rec-card--warning  { border-left-color: var(--sa-warning); background: #fffdf0; }
.sa-rec-card--info     { border-left-color: var(--sa-success); background: #f8fffa; }
.sa-rec-card--plan  { border-left-color: var(--sa-primary); }
.sa-rec-card--addon { border-style: dashed; border-left-color: var(--sa-border-color); display: flex; align-items: center; justify-content: center; min-height: 200px; color: var(--sa-primary); font-weight: 500; }
.sa-rec-title  { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.2rem; }
.sa-rec-reason { font-size: 0.8rem; color: #6c757d; margin-bottom: 0.25rem; }
.sa-rec-action { font-size: 0.8rem; color: #495057; }

.sa-chart-wrap { position: relative; width: 100%; height: 220px; }

.sa-window-selector { display: flex; gap: 0.35rem; }
.sa-window-btn { padding: 0.3rem 0.75rem; border: 1px solid var(--sa-border-color); border-radius: 0.35rem; font-size: 0.78rem; font-weight: 600; text-decoration: none; color: #6c757d; background: #fff; transition: all 0.15s; }
.sa-window-btn:hover  { border-color: var(--sa-primary); color: var(--sa-primary); }
.sa-window-btn.active { background: var(--sa-primary); color: #fff; border-color: var(--sa-primary); }

.sa-badge-error   { background: #f8d7da; color: #58151c; }
.sa-badge-success { background: #d1e7dd; color: #0a3622; }
.sa-badge-warn    { background: #fff3cd; color: #664d03; }
.sa-badge-mode-a  { background: #cff4fc; color: #055160; }
.sa-badge-mode-b  { background: #d1e7dd; color: #0a3622; }
.sa-badge-mode-c  { background: #e9ecef; color: #495057; }

@media (max-width: 768px) {
  .sa-pipeline-chain  { flex-direction: column; }
  .sa-pipeline-arrow  { transform: rotate(90deg); align-self: center; }
  .sa-pipeline-stage  { max-width: 100%; }
  .sa-tabs            { gap: 0; }
  .sa-tab             { padding: 0.5rem 0.65rem; font-size: 0.72rem; }
}

/* ── 20. Tooltips — реализованы через SA.tooltip JS модуль (utils.js) */
.sa-tooltip { position: relative; overflow: visible !important; }


/* ── Tooltip box (SA.tooltip JS модуль) ────────────────────
   Все стили тултипа — здесь. JS только позиционирует.
   Прозрачность фона: background rgba последний параметр.   */
.sa-tooltip-box {
  position: fixed;
  z-index: 99999;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #6c757d;
  font-size: 0.72rem;
  line-height: 1.5;
  padding: 0.35rem 0.65rem;
  border-radius: 0.35rem;
  border: none;
  box-shadow: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  max-width: 240px;
  white-space: normal;
  word-break: break-word;
}

.sa-stat-sep { color: #dee2e6; font-weight: 300; margin: 0 0.2rem; }

/* ── §19 Case Detail (Sprint 3.10) ─────────────────────────── */
.sa-detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
.sa-detail-grid--case {
  grid-template-columns: minmax(0,1fr) 340px;
}
.sa-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 1.25rem;
  border-bottom: 1px solid var(--sa-border-color);
  gap: .75rem;
}
.sa-detail-row:last-child { border-bottom: none; }
.sa-detail-label {
  font-size: .8rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: .04em;
  min-width: 70px;
}
.sa-detail-value {
  flex: 1;
  text-align: right;
  font-size: 0.875rem;
  color: #212529;
}
.sa-detail-action {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  justify-content: flex-end;
}
.sa-detail-action select { max-width: 160px; }
.sa-history-item {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .5rem 1.25rem;
  border-bottom: 1px solid var(--sa-border-color);
  font-size: .85rem;
}
.sa-history-item:last-child { border-bottom: none; }
.sa-history-time {
  color: #adb5bd;
  white-space: nowrap;
  font-size: .7rem;
}
.sa-history-text { color: #6c757d; }
.sa-history-text strong { color: var(--sa-text, #212529); }
.sa-history-text .sa-history-new { color: var(--sa-primary); }
@media (max-width: 900px) {
  .sa-detail-grid { grid-template-columns: 1fr; }
}

/* ── §20 Typography Scale (Sprint 3.10) ────────────────────── */
.sa-text-display { font-size: var(--sa-size-display); font-weight: var(--sa-weight-bold);   color: var(--sa-text); }
.sa-text-title   { font-size: var(--sa-size-title);   font-weight: var(--sa-weight-semi);   color: var(--sa-text); }
.sa-text-body    { font-size: var(--sa-size-body);    font-weight: var(--sa-weight-normal);  color: var(--sa-text); }
.sa-text-label   { font-size: var(--sa-size-label);   font-weight: var(--sa-weight-semi);   color: var(--sa-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.sa-text-caption { font-size: var(--sa-size-caption); font-weight: var(--sa-weight-normal);  color: var(--sa-text-muted); }
.sa-text-code    { font-size: var(--sa-size-code);    font-family: var(--sa-font-mono);      color: var(--sa-text-muted); }

/* ── §21 Visual Tokens (Sprint 3.10) ───────────────────────────
   9 цветовых вариантов. Основа для §22.
   В шаблонах НИКОГДА не использовать напрямую — только через §22.
   ──────────────────────────────────────────────────────────── */
.sa-badge--neutral  { background: #e9ecef; color: #495057; }
.sa-badge--primary  { background: #cfe2ff; color: #084298; }
.sa-badge--success  { background: #d1e7dd; color: #0a3622; }
.sa-badge--warning  { background: #fff3cd; color: #664d03; }
.sa-badge--danger   { background: #f8d7da; color: #58151c; }
.sa-badge--info     { background: #cff4fc; color: #055160; }
.sa-badge--purple   { background: #e9d8fd; color: #4a235a; }
.sa-badge--orange   { background: #ffe5d0; color: #6e2f0a; }
.sa-badge--pink     { background: #ffd6e7; color: #6a1035; }

/* ── §22 Semantic Aliases (Sprint 3.10) ────────────────────────
   Смысловые имена → цвета из §21.
   ──────────────────────────────────────────────────────────── */

/* Case Status */
.sa-badge-case-open      { background: #fff3cd; color: #664d03; }
.sa-badge-case-progress  { background: #cfe2ff; color: #084298; }
.sa-badge-case-waiting   { background: #ffe5d0; color: #6e2f0a; }
.sa-badge-case-done      { background: #d1e7dd; color: #0a3622; }
.sa-badge-case-closed    { background: #d1e7dd; color: #0a3622; }
.sa-badge-case-cancelled { background: #f8d7da; color: #58151c; }
.sa-badge-case-reopened  { background: #cff4fc; color: #055160; }
.sa-badge-case-archived  { background: #e9ecef; color: #495057; }
.sa-badge-case-deleted   { background: #f8d7da; color: #58151c; opacity: 0.7; }

/* Priority */
.sa-badge-priority-critical { background: #f8d7da; color: #58151c; }
.sa-badge-priority-high     { background: #ffe5d0; color: #6e2f0a; }
.sa-badge-priority-medium   { background: #fff3cd; color: #664d03; }
.sa-badge-priority-low      { background: #d1e7dd; color: #0a3622; }

/* Job Status */
.sa-badge-job-pending  { background: #e9ecef; color: #495057; }
.sa-badge-job-running  { background: #cff4fc; color: #055160; }
.sa-badge-job-done     { background: #d1e7dd; color: #0a3622; }
.sa-badge-job-failed   { background: #f8d7da; color: #58151c; }

/* Document Collection */
.sa-badge-col-manuals { background: #cff4fc; color: #055160; }
.sa-badge-col-mods    { background: #fff3cd; color: #664d03; }
.sa-badge-col-reg     { background: #d1e7dd; color: #0a3622; }
.sa-badge-col-wiring  { background: #e9d8fd; color: #4a235a; }
.sa-badge-col-struct  { background: #ffe5d0; color: #6e2f0a; }
.sa-badge-col-ops     { background: #cfe2ff; color: #084298; }
.sa-badge-col-train   { background: #ffd6e7; color: #6a1035; }
.sa-badge-col-rec     { background: #e9ecef; color: #6c757d; }

/* AI Quality */
.sa-badge-ai-ok             { background: #d1e7dd; color: #0a3622; }
.sa-badge-ai-warn           { background: #fff3cd; color: #664d03; }
.sa-badge-ai-crit           { background: #f8d7da; color: #58151c; }
.sa-badge-ai-mode-council   { background: #cff4fc; color: #055160; }
.sa-badge-ai-mode-standard  { background: #d1e7dd; color: #0a3622; }
.sa-badge-ai-mode-fast      { background: #e9ecef; color: #495057; }

/* Scope */
.sa-badge-scope-org    { background: #fff3cd; color: #664d03; }
.sa-badge-scope-global { background: #f8f9fa; color: #6c757d; border: 1px solid #dee2e6; }

/* @deprecated — будут удалены в Sprint 3.12.
   Используйте §21–§22 классы выше. */
/* sa-badge-failed   → sa-badge--danger   или sa-badge-job-failed  */
/* sa-badge-error    → sa-badge--danger                             */
/* sa-badge-done     → sa-badge--success  или sa-badge-job-done     */
/* sa-badge-success  → sa-badge--success                            */
/* sa-badge-pending  → sa-badge--neutral  или sa-badge-job-pending  */
/* sa-badge-warn     → sa-badge--warning                            */
/* sa-badge-parsing  → sa-badge-job-running                         */
/* sa-badge-mode-a/b/c → sa-badge-ai-mode-council/standard/fast    */

/* §23.1 Form layout helpers */
.sa-card--form       { max-width: 760px; }
.sa-form-row-2       { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sa-gap); }
.sa-form-actions     { display: flex; gap: var(--sa-gap); padding-top: var(--sa-gap); border-top: 1px solid var(--sa-border); margin-top: var(--sa-gap); }
.sa-textarea         { resize: vertical; min-height: 100px; }
.sa-text-danger      { color: var(--sa-danger); }
.sa-text-success     { color: var(--sa-success); }
.sa-text-subtle      { color: var(--sa-text-subtle); }

/* ── LK-11a Биллинг · layout-обёртки (без цветов, только раскладка) ── */
.sa-billing-status-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sa-gap); }
.sa-billing-id { display: flex; align-items: center; gap: 0.75rem; }
.sa-billing-ico { width: 40px; height: 40px; flex-shrink: 0; color: var(--sa-primary); }
.sa-billing-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sa-billing-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sa-billing-balance    { margin-top: var(--sa-gap); }
.sa-billing-note       { margin-top: var(--sa-gap); }
.sa-plan-features      { margin-top: var(--sa-gap); gap: 0.1rem; }
.sa-plan-features .sa-project-check-item { padding: 0.15rem 0; font-size: 0.8rem; white-space: nowrap; }
.sa-plan-grid { display: grid; grid-template-columns: 280px 248px; gap: var(--sa-gap); align-items: start; }


/* ── §24 Case Monitor ────────────────────────────────── */
.sa-monitor-kpi-row   { display: grid; grid-template-columns: repeat(6,1fr); gap: var(--sa-gap); margin-bottom: 1.25rem; }
.sa-monitor-charts    { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sa-gap); margin-bottom: 1.25rem; }
.sa-monitor-bottom    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sa-gap); margin-bottom: 1.25rem; }

/* stat-card border-top variants */
.sa-stat-card--open     { border-top: 3px solid var(--sa-warning); }
.sa-stat-card--progress { border-top: 3px solid var(--sa-primary); }
.sa-stat-card--waiting  { border-top: 3px solid #fd7e14; }
.sa-stat-card--done     { border-top: 3px solid var(--sa-success); }
.sa-stat-card--danger   { border-top: 3px solid var(--sa-danger); }
.sa-stat-card--neutral  { border-top: 3px solid var(--sa-border-color); }

/* stat-value color variants */
.sa-stat-value--orange  { color: #fd7e14; }
.sa-stat-value--danger  { color: var(--sa-danger); }
.sa-stat-value--neutral { color: var(--sa-text); }

/* progress bar load variants */
.sa-progress-bar--ok     { background: var(--sa-success); }
.sa-progress-bar--warn   { background: var(--sa-warning); }
.sa-progress-bar--danger { background: var(--sa-danger); }

/* donut legend row */
.sa-donut-legend-row { display: flex; justify-content: space-between; align-items: center; padding: .3rem 0; border-bottom: 1px solid var(--sa-border-color); font-size: .8rem; }
.sa-donut-legend-row:last-child { border-bottom: none; }

/* activity feed */
.sa-activity-list  { padding: 1rem; }
.sa-activity-item  { display: flex; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--sa-border-color); font-size: .8rem; }
.sa-activity-item:last-child { border-bottom: none; }
.sa-activity-dot   { width: 8px; height: 8px; border-radius: 50%; margin-top: .35rem; flex-shrink: 0; background: var(--sa-primary); }
.sa-activity-dot--warn    { background: var(--sa-warning); }
.sa-activity-dot--success { background: var(--sa-success); }
.sa-activity-dot--danger  { background: var(--sa-danger); }
.sa-activity-dot--neutral { background: var(--sa-text-muted, #6c757d); }
.sa-activity-body  { flex: 1; line-height: 1.4; }
.sa-activity-time  { color: var(--sa-text-muted, #6c757d); font-size: .72rem; white-space: nowrap; }
.sa-activity-actor { font-weight: 600; }

/* project bar */
.sa-project-bar-item  { margin-bottom: .75rem; }
.sa-project-bar-label { display: flex; justify-content: space-between; font-size: .82rem; margin-bottom: .3rem; }

/* chart donut wrap */
.sa-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.sa-donut-canvas { width: 200px !important; height: 200px !important; max-width: 100%; }

@media (max-width: 1100px) {
  .sa-monitor-kpi-row  { grid-template-columns: repeat(3,1fr); }
  .sa-monitor-charts   { grid-template-columns: 1fr; }
  .sa-monitor-bottom   { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sa-monitor-kpi-row  { grid-template-columns: repeat(2,1fr); }
}

/* ── §24.1 Case Monitor grids (responsive) ── */
.sa-monitor-kpi-row   { display: grid; grid-template-columns: repeat(6,1fr); gap: var(--sa-gap); margin-bottom: 1.25rem; }
.sa-monitor-3col      { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sa-gap); margin-bottom: 1.25rem; }
.sa-monitor-2col      { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sa-gap); margin-bottom: 1.25rem; }

@media (max-width: 1200px) {
  .sa-monitor-kpi-row { grid-template-columns: repeat(3,1fr); }
  .sa-monitor-3col    { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .sa-monitor-kpi-row { grid-template-columns: repeat(2,1fr); }
  .sa-monitor-3col    { grid-template-columns: 1fr; }
  .sa-monitor-2col    { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .sa-monitor-kpi-row { grid-template-columns: 1fr 1fr; }
}
.sa-donut-wrap { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.sa-donut-legend { width: 100%; }
.sa-donut-container { position: relative; width: 200px; height: 200px; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════════
   §25  WEB CHAT — Dialogue & Thread Interface
   Sprint 3.11 | HLD.08-PORTAL §14 v6
   ─────────────────────────────────────────────────────────────
   Переиспользует токены: --sa-primary, --sa-primary-hover,
   --sa-border-color, --sa-border-radius, --sa-card-bg,
   --sa-surface, --sa-text, --sa-text-muted, --sa-text-subtle,
   --sa-success, --sa-warning, --sa-danger, --sa-gap,
   --sa-card-shadow, --sa-size-body, --sa-size-label,
   --sa-size-caption, --sa-weight-semi
   Переиспользует компоненты: sa-btn, sa-badge-ai-*, sa-card
   ═══════════════════════════════════════════════════════════════ */

/* ── §25.1 Toolbar: поиск + кнопка "Новый вопрос" ── */
.sa-chat-toolbar        { display: flex; align-items: center; gap: .75rem;
                          flex-wrap: wrap; margin-bottom: var(--sa-gap); }
.sa-chat-search         { flex: 1; min-width: 160px;
                          padding: .4rem .75rem;
                          border: 1px solid var(--sa-border-color);
                          border-radius: var(--sa-border-radius);
                          background: var(--sa-card-bg);
                          color: var(--sa-text);
                          font-size: var(--sa-size-body);
                          outline: none;
                          transition: border-color .15s; }
.sa-chat-search:focus   { border-color: var(--sa-primary); }
.sa-chat-search::placeholder { color: var(--sa-text-subtle); }

/* ── §25.2 Thread — один диалог ── */
.sa-chat-thread         { border: 1px solid var(--sa-border-color);
                          border-radius: var(--sa-border-radius);
                          background: var(--sa-card-bg);
                          box-shadow: var(--sa-card-shadow);
                          overflow: hidden;
                          margin-bottom: .5rem;
                          transition: box-shadow .15s; }
.sa-chat-thread:hover   { box-shadow: 0 2px 8px rgba(0,0,0,.1); }

/* ── §25.3 Thread root row (свёрнутый вид) ── */
.sa-chat-thread-root    { display: flex; align-items: center; gap: .6rem;
                          padding: .65rem 1rem;
                          border-bottom: 1px solid transparent;
                          transition: background .1s; }
.sa-chat-thread--expanded
  .sa-chat-thread-root  { border-bottom-color: var(--sa-border-color);
                          background: var(--sa-surface); }

.sa-chat-thread-q       { flex: 1; font-size: var(--sa-size-body);
                          font-weight: var(--sa-weight-semi);
                          color: var(--sa-text); line-height: 1.4;
                          white-space: nowrap; overflow: hidden;
                          text-overflow: ellipsis; }
.sa-chat-thread-meta    { display: flex; align-items: center;
                          gap: .35rem; flex-shrink: 0; }

/* ── §25.4 Иконка канала ── */
.sa-chat-channel        { font-size: var(--sa-size-label);
                          line-height: 1; opacity: .7;
                          cursor: default; }

/* ── §25.5 Кнопки ➕ и ▶/▼ ── */
.sa-chat-btn-add,
.sa-chat-btn-expand     { display: inline-flex; align-items: center;
                          justify-content: center;
                          width: 22px; height: 22px;
                          border: 1px solid var(--sa-border-color);
                          background: transparent;
                          cursor: pointer; flex-shrink: 0;
                          transition: background .15s, color .15s,
                                      border-color .15s; }

.sa-chat-btn-add        { border-radius: 50%;
                          color: var(--sa-primary);
                          font-size: 1rem; line-height: 1; }
.sa-chat-btn-add:hover  { background: var(--sa-primary); color: #fff;
                          border-color: var(--sa-primary); }

.sa-chat-btn-expand     { border-radius: 4px;
                          color: var(--sa-text-muted);
                          font-size: .65rem; }
.sa-chat-btn-expand:hover { background: var(--sa-surface);
                            color: var(--sa-text); }
.sa-chat-thread--expanded
  .sa-chat-btn-expand   { background: var(--sa-primary); color: #fff;
                          border-color: var(--sa-primary); }

/* ── §25.6 Thread body (развёрнутое содержимое) ── */
.sa-chat-thread-body    { display: none;
                          padding: .75rem 1rem;
                          flex-direction: column; gap: .6rem; }
.sa-chat-thread--expanded
  .sa-chat-thread-body  { display: flex; }

/* ── §25.7 Сообщения ── */
.sa-chat-msg            { display: flex; flex-direction: column;
                          gap: .2rem; }

/* Вопрос пользователя (Q) */
.sa-chat-msg--question,
.sa-chat-msg--followup  { align-self: flex-end; max-width: 85%;
                          background: var(--sa-primary); color: #fff;
                          border-radius: 12px 12px 2px 12px;
                          padding: .45rem .85rem;
                          font-size: var(--sa-size-body);
                          line-height: 1.5; }

.sa-chat-msg--followup  { opacity: .9; font-size: var(--sa-size-label);
                          padding: .35rem .75rem; }

/* Ответ AI (A) */
.sa-chat-msg--answer    { align-self: flex-start; max-width: 92%;
                          background: var(--sa-surface);
                          border: 1px solid var(--sa-border-color);
                          border-radius: 2px 12px 12px 12px;
                          padding: .55rem 1rem;
                          font-size: var(--sa-size-body);
                          line-height: 1.6;
                          position: relative; }

.sa-chat-msg-footer     { display: flex; align-items: center;
                          gap: .5rem; margin-top: .3rem;
                          flex-wrap: wrap; }

/* ── §25.8 Typing indicator ── */
.sa-chat-msg--loading   { align-self: flex-start;
                          padding: .55rem 1rem;
                          background: var(--sa-surface);
                          border: 1px solid var(--sa-border-color);
                          border-radius: 2px 12px 12px 12px; }
.sa-typing-dots         { display: inline-flex; gap: 4px;
                          align-items: center; height: 1rem; }
.sa-typing-dots span    { width: 6px; height: 6px; border-radius: 50%;
                          background: var(--sa-text-muted);
                          animation: sa-bounce 1.2s infinite ease-in-out; }
.sa-typing-dots span:nth-child(2) { animation-delay: .2s; }
.sa-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes sa-bounce {
  0%, 80%, 100% { transform: translateY(0);   opacity: .4; }
  40%           { transform: translateY(-5px); opacity: 1; }
}

/* ── §25.9 Sources block ── */
.sa-chat-sources        { margin-top: .4rem; padding-top: .4rem;
                          border-top: 1px solid var(--sa-border-color);
                          display: flex; flex-direction: column;
                          gap: .2rem; }
.sa-chat-sources-title  { font-size: var(--sa-size-label);
                          color: var(--sa-text-muted);
                          font-weight: var(--sa-weight-semi);
                          text-transform: uppercase;
                          letter-spacing: .04em; }
.sa-chat-source-item    { font-size: var(--sa-size-caption);
                          color: var(--sa-text-muted);
                          display: flex; align-items: baseline;
                          gap: .3rem; line-height: 1.5; }
.sa-chat-source-item::before { content: "•";
                          color: var(--sa-primary); flex-shrink: 0; }
.sa-chat-source-item strong { color: var(--sa-text);
                          font-weight: var(--sa-weight-semi); }

/* ── §25.10 Confidence score — переиспользует sa-badge-ai-* ── */
/* Используем существующие: sa-badge sa-badge-ai-ok/warn/crit    */
/* Дополнительных классов не нужно                               */

/* ── §25.11 Inline input (follow-up под ответом) ── */
.sa-chat-inline-form    { display: flex; gap: .5rem;
                          align-items: flex-end;
                          margin-top: .35rem;
                          padding: .5rem .75rem;
                          border: 1px solid var(--sa-primary);
                          border-radius: var(--sa-border-radius);
                          background: var(--sa-surface); }
.sa-chat-inline-input   { flex: 1; resize: none;
                          min-height: 34px; max-height: 100px;
                          padding: .3rem .6rem;
                          border: 1px solid var(--sa-border-color);
                          border-radius: var(--sa-border-radius);
                          background: var(--sa-card-bg);
                          color: var(--sa-text);
                          font-size: var(--sa-size-body);
                          line-height: 1.5; outline: none;
                          font-family: var(--sa-font);
                          transition: border-color .15s; }
.sa-chat-inline-input:focus { border-color: var(--sa-primary); }

/* ── §25.12 New question form (верхний уровень) ── */
.sa-chat-new-form       { display: none; flex-direction: column;
                          gap: .5rem; margin-bottom: .75rem;
                          padding: .75rem;
                          border: 1px solid var(--sa-primary);
                          border-radius: var(--sa-border-radius);
                          background: var(--sa-surface); }
.sa-chat-new-form.is-open { display: flex; }
.sa-chat-new-textarea   { resize: none; min-height: 60px;
                          max-height: 180px;
                          padding: .45rem .75rem;
                          border: 1px solid var(--sa-border-color);
                          border-radius: var(--sa-border-radius);
                          background: var(--sa-card-bg);
                          color: var(--sa-text);
                          font-size: var(--sa-size-body);
                          line-height: 1.5; outline: none;
                          font-family: var(--sa-font);
                          transition: border-color .15s; }
.sa-chat-new-textarea:focus { border-color: var(--sa-primary); }
.sa-chat-new-actions    { display: flex; gap: .5rem;
                          justify-content: flex-end; }

/* ── §25.13 Empty state — переиспользует sa-empty-state паттерн ── */
.sa-chat-empty          { display: flex; flex-direction: column;
                          align-items: center; gap: .75rem;
                          padding: 3rem 1rem; text-align: center; }
.sa-chat-empty-icon     { font-size: 2.5rem; opacity: .45; }
.sa-chat-empty-title    { font-size: var(--sa-size-title);
                          font-weight: var(--sa-weight-semi);
                          color: var(--sa-text-muted); }
.sa-chat-empty-hint     { font-size: var(--sa-size-caption);
                          color: var(--sa-text-subtle);
                          line-height: 1.6; max-width: 280px; }

/* ── §25.14 Responsive ── */
@media (max-width: 768px) {
  .sa-chat-toolbar      { flex-direction: column; align-items: stretch; }
  .sa-chat-search       { min-width: 0; }
  .sa-chat-msg--question,
  .sa-chat-msg--followup,
  .sa-chat-msg--answer  { max-width: 100%; }
  .sa-chat-thread-q     { font-size: var(--sa-size-label); }
}

/* ── §19.x Case Detail — form helpers (Sprint 3.11) ── */
/* Fix UI-TD-04: inline style removed from desc-edit    */
.sa-desc-edit-panel { display: none; }
.sa-form-actions    { display: flex; gap: .5rem; margin-top: .75rem; }

/* ── §25.15 Chat Feedback (👍/👎) ── */
.sa-chat-feedback            { display: inline-flex; gap: .25rem; align-items: center; }
.sa-chat-fb-btn              { background: none;
                               border: 1px solid var(--sa-border-color);
                               border-radius: 4px; padding: .15rem .4rem;
                               font-size: .8rem; cursor: pointer; line-height: 1;
                               color: var(--sa-text-muted);
                               transition: background .15s, border-color .15s; }
.sa-chat-fb-btn:hover        { border-color: var(--sa-primary); color: var(--sa-primary); }
.sa-chat-fb-btn--up.active   { background: rgba(25,135,84,.12);
                               border-color: var(--sa-success); color: var(--sa-success); }
.sa-chat-fb-btn--down.active { background: rgba(220,53,69,.12);
                               border-color: var(--sa-danger);  color: var(--sa-danger); }
.sa-chat-fb-btn:disabled    { opacity: .45; cursor: default; pointer-events: none; }

/* ── §25.16 Thread turn badge & nested indent (E-3/E-4, Sprint 3.11) ── */
.sa-chat-turn-badge     { display: inline-block;
                          font-size: .65rem; font-weight: var(--sa-weight-bold);
                          color: rgba(255,255,255,.75);
                          margin-right: .3rem;
                          vertical-align: middle; }

.sa-badge-neutral       { background: var(--sa-surface);
                          color: var(--sa-text-muted);
                          border: 1px solid var(--sa-border-color);
                          font-size: .7rem; font-weight: var(--sa-weight-semi);
                          padding: .15rem .4rem;
                          border-radius: .35em; white-space: nowrap;
                          display: inline-block; }

/* §25.16a turn badge — inline с текстом вопроса */
.sa-chat-msg--followup  { display: block; }
.sa-chat-turn-badge     { display: inline;
                          font-size: .7rem; font-weight: 700;
                          color: rgba(255,255,255,.8);
                          margin-right: .35rem; }

/* ── §26 Markdown Typography (SA.render, Sprint 3.12.A) ─────────────────
   Применяется к .sa-chat-body--md — ответы AI в Web Chat.
   Все токены из §21 Visual Tokens. Аддитивно, не ломает sa-chat-body.
   ──────────────────────────────────────────────────────────────────────── */
.sa-chat-body--md     { font-size: var(--sa-size-body); }
.sa-chat-body--md h1,
.sa-chat-body--md h2,
.sa-chat-body--md h3    { font-size: var(--sa-size-title);
                           font-weight: var(--sa-weight-semi);
                           margin: .75rem 0 .25rem;
                           color: var(--sa-text); }
.sa-chat-body--md p     { margin: .4rem 0; line-height: 1.6; }
.sa-chat-body--md ul,
.sa-chat-body--md ol    { padding-left: 1.25rem; margin: .4rem 0; }
.sa-chat-body--md li    { margin: .2rem 0; line-height: 1.5; }
.sa-chat-body--md strong{ font-weight: var(--sa-weight-semi); }
.sa-chat-body--md em    { font-style: italic; }
.sa-chat-body--md code  { background: var(--sa-surface);
                           padding: .1rem .35rem;
                           border-radius: 3px;
                           font-size: .88em;
                           color: var(--sa-text); }
.sa-chat-body--md pre   { background: var(--sa-surface);
                           padding: .75rem 1rem;
                           border-radius: var(--sa-border-radius);
                           overflow-x: auto;
                           font-size: .85em;
                           margin: .5rem 0; }
.sa-chat-body--md table { border-collapse: collapse; width: 100%;
                           font-size: var(--sa-size-caption);
                           margin: .5rem 0; }
.sa-chat-body--md th,
.sa-chat-body--md td    { border: 1px solid var(--sa-border-color);
                           padding: .3rem .5rem; text-align: left; }
.sa-chat-body--md th    { background: var(--sa-surface);
                           font-weight: var(--sa-weight-semi); }
.sa-chat-body--md blockquote { border-left: 3px solid var(--sa-primary);
                           padding-left: .75rem;
                           color: var(--sa-text-muted);
                           margin: .5rem 0; }

/* ── §27 Rich CRF Components (Sprint 3.12.B) ────────────────────────────────
   Warning banners → переиспользует .sa-alert-*
   Source cards    → переиспользует .sa-card, .sa-badge
   Numeric values  → переиспользует .sa-rec-card--*
   Все цвета через токены tokens.css
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Warning banners — расширяем .sa-alert ── */
.sa-chat-warning {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .4rem;
  font-size: var(--sa-size-caption);
  /* layout поверх .sa-alert padding/radius */
  padding: .5rem .75rem;
  border-radius: var(--sa-border-radius);
}
.sa-chat-warning--danger  { background: #f8d7da; border-left: 3px solid var(--sa-danger);  color: #58151c; }
.sa-chat-warning--warn    { background: #fff3cd; border-left: 3px solid var(--sa-warning); color: #664d03; }
.sa-chat-warning--info    { background: #cff4fc; border-left: 3px solid var(--sa-primary); color: #055160; }
.sa-chat-warning-icon     { flex-shrink: 0; }
.sa-chat-warning-text     { flex: 1; line-height: 1.5; }

/* ── Rich source cards — на базе .sa-card ── */
.sa-chat-sources          { margin-top: .6rem; padding-top: .5rem;
                             border-top: 1px solid var(--sa-border-color); }
.sa-chat-sources-title    { font-size: var(--sa-size-label);
                             font-weight: var(--sa-weight-semi);
                             color: var(--sa-text-muted);
                             margin-bottom: .35rem; }
.sa-chat-source-card      { border: 1px solid var(--sa-border-color);
                             border-radius: var(--sa-border-radius);
                             background: var(--sa-surface);
                             box-shadow: var(--sa-card-shadow);
                             padding: .4rem .6rem;
                             margin-bottom: .3rem; }
.sa-chat-source-card-top  { display: flex; align-items: center;
                             gap: .4rem; flex-wrap: wrap; }
.sa-badge--doc-type        { font-size: .7rem; padding: .1rem .4rem;
                             background: var(--sa-primary); color: #fff;
                             border-radius: 3px;
                             font-weight: var(--sa-weight-semi);
                             text-transform: uppercase; letter-spacing: .03em; }
.sa-chat-source-title     { font-size: var(--sa-size-caption);
                             font-weight: var(--sa-weight-semi);
                             color: var(--sa-text); flex: 1; }
.sa-chat-source-verified  { color: var(--sa-success); font-weight: 700; }
.sa-chat-source-score     { font-size: .7rem; padding: .1rem .35rem;
                             border-radius: 3px; font-weight: 600; }
.sa-chat-source-score--ok  { background: #d1e7dd; color: #0a3622; }
.sa-chat-source-score--mid { background: #fff3cd; color: #664d03; }
.sa-chat-source-score--low { background: #f8d7da; color: #58151c; }
.sa-chat-source-meta      { font-size: var(--sa-size-caption);
                             color: var(--sa-text-muted); margin-top: .15rem; }

/* ── Numeric values — на базе .sa-rec-card--* ── */
.sa-chat-numerics         { margin: .5rem 0; }
.sa-chat-numerics-title   { font-size: var(--sa-size-label);
                             font-weight: var(--sa-weight-semi);
                             color: var(--sa-text-muted); margin-bottom: .3rem; }
.sa-chat-numeric          { display: inline-flex; align-items: center; gap: .3rem;
                             padding: .25rem .6rem; border-radius: 4px;
                             font-size: var(--sa-size-caption);
                             font-weight: var(--sa-weight-semi);
                             margin: .15rem .2rem .15rem 0;
                             border-left: 3px solid transparent; }
.sa-chat-numeric--critical { background: #fff8f8; border-left-color: var(--sa-danger);  color: #58151c; }
.sa-chat-numeric--warn     { background: #fffdf0; border-left-color: var(--sa-warning); color: #664d03; }
.sa-chat-numeric--ok       { background: #f8fffa; border-left-color: var(--sa-success); color: #0a3622; }
.sa-chat-numeric-field     { opacity: .75; }
.sa-chat-numeric-value     { font-weight: 700; }
.sa-chat-numeric-unit      { opacity: .8; font-size: .9em; }
.sa-chat-numeric-check     { color: var(--sa-success); font-weight: 700; }
/* OUT-UNITS-SI-DUAL-01: пересчёт платформы, не цитата — визуально вторичен */
.sa-chat-numeric-si        { opacity: .7; font-size: .85em; font-style: italic; }

/* ── §28 Response View + Chat Preview (Sprint 3.12.C) ───────────────────────
   rv-* — страница полного просмотра ответа /chat/view/<req_id>/
   Переиспользует: .sa-card, .sa-page-header, .sa-breadcrumb, .sa-text-label
   ──────────────────────────────────────────────────────────────────────────── */
.rv-wrap     { max-width: 860px; margin: 2rem auto; padding: 0 var(--sa-content-pad); }
.rv-meta     { display: flex; flex-wrap: wrap; gap: .5rem;
               align-items: center; margin-top: .5rem; }
.rv-question { background: var(--sa-primary); color: #fff;
               border-radius: 18px 18px 4px 18px;
               padding: .75rem 1.25rem; margin-bottom: 1.5rem; line-height: 1.5; }
.rv-footer   { display: flex; justify-content: space-between; align-items: center;
               flex-wrap: wrap; gap: .5rem; margin-top: 2rem; padding-top: 1rem;
               border-top: 1px solid var(--sa-border-color); }

.rv-feedback  { display: flex; align-items: center; gap: .75rem;
               padding: 1rem 0; margin: 1rem 0;
               border-top: 1px solid var(--sa-border-color);
               border-bottom: 1px solid var(--sa-border-color); }
.rv-feedback-hint { font-style: italic; color: var(--sa-text-muted); }
/* Preview footer в chat-треде */
.sa-chat-preview-footer { display: flex; align-items: center; gap: .5rem;
                          margin-top: .75rem; padding-top: .5rem;
                          border-top: 1px dashed var(--sa-border-color); }
/* Print */
@media print {
  .rv-no-print, .sa-sidebar, .sa-topbar, .sa-breadcrumb { display: none !important; }
  .rv-wrap { max-width: 100%; margin: 0; padding: 0; }
  .sa-card-body { border: none; box-shadow: none; padding: 0; }
}

/* ── §29 KB Document Status — superseded/archived (Sprint 3.18 / KB-DEDUP-01)
   New-документы маркируются через AI-pulse (.sa-pulse-new) в §48.11, не фоном. */
.sa-doc-title-link              { color: inherit; text-decoration: none; }
.sa-doc-title-link:hover        { color: var(--sa-accent, #3b82f6); text-decoration: underline; }
.sa-badge--new                  { background: #dcfce7; color: #166534; margin-left: 0.4rem; }
.sa-badge--status-active        { background: #EAF3DE; color: #27500A; }
.sa-badge--status-superseded    { background: #FAEEDA; color: #633806; }
.sa-badge--status-archived      { background: #F1EFE8; color: #444441; }
.sa-badge--status-invited       { background: #E6F1FB; color: #0C447C; }
.sa-badge--status-pending       { background: #FAEEDA; color: #633806; }
.sa-badge--doc-type             { font-weight: 600; font-size: 11px; }
.sa-badge--doc-amm              { background: #EAF3DE; color: #27500A; }
.sa-badge--doc-omm              { background: #E6F1FB; color: #0C447C; }
.sa-badge--doc-poh              { background: #EEEDFE; color: #3C3489; }
.sa-badge--doc-afm              { background: #EEEDFE; color: #3C3489; }
.sa-badge--doc-sb               { background: #FAEEDA; color: #633806; }
.sa-badge--doc-ad               { background: #FCEBEB; color: #791F1F; }
.sa-badge--doc-ipc              { background: #E6F1FB; color: #0C447C; }
.sa-badge--doc-cmm              { background: #E1F5EE; color: #085041; }
.sa-badge--doc-ac               { background: #FAEEDA; color: #633806; }
.sa-badge--doc-sil              { background: #FAEEDA; color: #633806; }
.sa-badge--doc-tcds             { background: #FCEBEB; color: #791F1F; }
.sa-badge--doc-other            { background: #F1EFE8; color: #444441; }
/* sa-doc-row--superseded — стили (line-through, opacity) определены в §48.11 */
.sa-alert-warn { background: var(--sa-warn-bg, #fffbeb); border: 1px solid var(--sa-warn-border, #fcd34d); border-radius: var(--sa-radius); padding: 12px 16px; font-size: var(--sa-text-sm); color: var(--sa-text); }

/* ── §30 Chunk highlight from source link (WEB-01, Sprint 3.18) ── */
.sa-chunk--highlight { border: 2px solid var(--sa-primary); border-radius: var(--sa-radius); }
.sa-chunk--highlight .sa-chunk-header { background: var(--sa-primary-bg, #eef2ff); }

/* ── §31 Platform selector в sidebar (ARCH-ANALYTICS-02, Sprint 3.18) ── */
.sa-nav-platform {
    padding: 0.5rem 1rem 0.75rem;
}
.sa-nav-platform-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sa-text-muted);
    margin-bottom: 0.35rem;
}
.sa-nav-platform-select {
    width: 100%;
    font-size: 0.8rem;
    background: var(--sa-sidebar-item-hover, rgba(255,255,255,0.08));
    color: var(--sa-sidebar-text, #e2e8f0);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--sa-radius);
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.sa-nav-platform-select:hover {
    border-color: rgba(255,255,255,0.35);
}
.sa-nav-platform-select:focus {
    outline: none;
    border-color: var(--sa-accent, #3b82f6);
}

/* ── §32 Telegram Link Widget (TG-CORP-01, Sprint 3.18) ── */
.sa-tg-status-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.sa-tg-linked-label {
    color: var(--sa-success, #22c55e);
    font-size: 0.85rem;
}
.sa-tg-unlinked-label {
    color: var(--sa-text-muted);
    font-size: 0.85rem;
}
.sa-tg-username-badge {
    font-size: 0.78rem;
    color: var(--sa-text-muted);
    background: rgba(59,130,246,.08);
    border: 1px solid rgba(59,130,246,.15);
    border-radius: 12px;
    padding: 1px 8px;
}
.sa-tg-otp-panel {
    margin-top: 0.75rem;
    padding: 1rem;
    background: rgba(8,15,41,.95);
    border: 1px solid rgba(59,130,246,.20);
    border-radius: var(--sa-radius, 8px);
}
.sa-tg-otp-panel__title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sa-text-primary, #f1f5fa);
    margin-bottom: 0.6rem;
}
.sa-tg-otp-step {
    font-size: 0.78rem;
    color: var(--sa-text-muted);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
.sa-tg-otp-step b {
    color: var(--sa-text-primary, #f1f5fa);
}
.sa-tg-otp-code {
    font-family: monospace;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.3rem;
    color: var(--sa-text-primary, #f1f5fa);
    margin-left: 0.25rem;
}
.sa-tg-otp-footer {
    margin-top: 0.6rem;
    font-size: 0.72rem;
    color: var(--sa-text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sa-tg-poll-hint {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--sa-text-muted);
}


/* ── §33 Pipeline Error Monitor (OPS-ALERT-01, Sprint 3.19) ────────────────
   Переиспользует: sa-stats-row, sa-stat-card, sa-filters, sa-table,
   sa-window-selector, sa-badge--*, sa-kpi-row, sa-card, sa-detail-row
   ──────────────────────────────────────────────────────────────────────── */

.sa-badge-sev-critical { background: #f8d7da; color: #58151c; }
.sa-badge-sev-high     { background: #ffe5d0; color: #6e2f0a; }
.sa-badge-sev-medium   { background: #fff3cd; color: #664d03; }
.sa-badge-sev-low      { background: #e9ecef; color: #495057; }

.sa-badge--pulse { animation: sa-badge-pulse 1.8s infinite; }
@keyframes sa-badge-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.sa-badge-scope-architectural { background: #f8d7da; color: #58151c; }
.sa-badge-scope-service       { background: #fff3cd; color: #664d03; }
.sa-badge-scope-operational   { background: #e9ecef; color: #495057; }

.sa-badge-err-queued   { background: #fff3cd; color: #664d03; }
.sa-badge-err-open     { background: #f8d7da; color: #58151c; }
.sa-badge-err-assigned { background: #cfe2ff; color: #084298; }
.sa-badge-err-resolved { background: #d1e7dd; color: #0a3622; }

.sa-badge-src-n8n         { background: #e9d8fd; color: #4a235a; }
.sa-badge-src-ingestion   { background: #cff4fc; color: #055160; }
.sa-badge-src-llm-gateway { background: #cfe2ff; color: #084298; }
.sa-badge-src-telegram    { background: #d1e7dd; color: #0a3622; }
.sa-badge-src-django      { background: #fff3cd; color: #664d03; }
.sa-badge-src-ollama      { background: #ffe5d0; color: #6e2f0a; }
.sa-badge-src-manual      { background: #e9ecef; color: #495057; }

.sa-stat-card--critical { border-top: 3px solid var(--sa-danger); }
.sa-stat-card--high     { border-top: 3px solid #fd7e14; }
.sa-stat-card--resolved { border-top: 3px solid var(--sa-success); }
.sa-stat-card--active   { border-top: 3px solid var(--sa-primary); }

.sa-table tbody tr.sa-row--architectural { background: #fff8f8; }
.sa-table tbody tr.sa-row--architectural:hover { background: #ffeaea; }

.sa-stat-breakdown { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; margin-top: 0.35rem; }
.sa-stat-breakdown-item { font-size: 0.68rem; color: #6c757d; white-space: nowrap; }

.sa-err-analytics-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
@media (max-width: 1100px) { .sa-err-analytics-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .sa-err-analytics-row { grid-template-columns: 1fr; } }

.sa-err-timeline { padding: 0.75rem 1.25rem; }
.sa-err-timeline-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.4rem 0; font-size: 0.85rem; border-bottom: 1px solid var(--sa-border-color); }
.sa-err-timeline-item:last-child { border-bottom: none; }
.sa-err-timeline-icon { flex-shrink: 0; width: 20px; text-align: center; }
.sa-err-timeline-time { color: #6c757d; font-size: 0.75rem; white-space: nowrap; min-width: 130px; }
.sa-err-timeline-text { color: #495057; flex: 1; }

.sa-err-payload-toggle { cursor: pointer; font-size: 0.8rem; color: var(--sa-primary); user-select: none; }
.sa-err-payload-body { display: none; margin-top: 0.5rem; }
.sa-err-payload-body.open { display: block; }
.sa-err-payload-pre { font-family: var(--sa-font-mono); font-size: 0.72rem; background: #f8f9fa; border: 1px solid var(--sa-border-color); border-radius: var(--sa-border-radius); padding: 0.75rem; overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 280px; overflow-y: auto; color: #2d3748; }

.sa-err-add-form { display: none; }
.sa-err-add-form.open { display: block; }

/* ── §33.2 AI Analysis block (OPS-AI-01, Sprint 3.19) ── */
/* Переиспользует: sa-rec-card/title/reason/action, sa-card-body,
   sa-badge--*, sa-err-payload-pre, sa-detail-row              */
.sa-ai-section     { display: flex; flex-direction: column; gap: 0.5rem; }
.sa-ai-section-lbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
                     letter-spacing: 0.04em; color: #6c757d; margin-bottom: 0.25rem; }
.sa-ai-rec-step    { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
                     background: var(--sa-primary); color: #fff; font-size: 0.7rem;
                     font-weight: 700; display: flex; align-items: center;
                     justify-content: center; }
.sa-ai-rec-row     { display: flex; gap: 0.75rem; align-items: flex-start; }
/* ── §34 Form Section Dividers ─────────────────────────────────────────── */
.sa-form-section {
  border-top: 2px solid var(--sa-border-color);
  padding-top: 1.25rem;
  margin-bottom: 1.5rem;
}
.sa-form-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sa-primary);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sa-form-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 11px;
  background: var(--sa-primary);
  border-radius: 2px;
  flex-shrink: 0;
}
.sa-label--disabled { color: var(--sa-text-muted); }

/* ── §34.1 Form optional label ── */
.sa-optional { color: #adb5bd; font-size: 0.75rem; font-weight: 400; margin-left: 4px; text-transform: none; letter-spacing: 0; }

/* ── §34.2 Project Form layout helpers ─────────────────────────────────── */
.sa-card--form-lg        { max-width: 900px; }
.sa-card-body--form      { padding: 1.5rem; }
.sa-card--confirm-done   { margin-top: 1.25rem; }
.sa-card--confirm-pending { margin-top: 1.25rem; }
.sa-card--dedup             { margin-top: 1.25rem; }
.sa-card-header--danger     { background: var(--sa-danger-bg, #fff0f0); color: var(--sa-danger, #dc3545); border-bottom-color: var(--sa-danger-border, #f5c2c7); }
.sa-dedup-actions           { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.sa-btn--ml                 { margin-left: 1rem; }
.sa-alert--mb            { margin-bottom: 0.5rem; }
.sa-confirm-actions      { display: flex; gap: 0.75rem; margin-top: 1.25rem; justify-content: flex-end; }
.sa-form-section--first  { border-top: none; padding-top: 0; }
.sa-form-grid-2          { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sa-gap); margin-bottom: 0.5rem; }
.sa-form-grid-2--plain   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sa-gap); }
.sa-form-grid-3          { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sa-gap); }
.sa-form-grid-4          { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sa-gap); }
.sa-form-col-full        { grid-column: 1 / -1; }
.sa-select--stacked      { margin-bottom: 0.35rem; }
.sa-muted-hint           { font-weight: 400; font-size: 0.7rem; }

/* ── §35 Public Auth Pages (Sprint 3.19b) ───────────────────────────────────
   Страницы до входа в портал: LK-00 (Auth Gate), LK-01 (Register),
   LK-13 (Login), /onboarding/ — единый публичный navbar.
   Pixel-perfect с landing navbar (hld_front_style_format.md §16.3)
   ADR-AUTH-NAV-01: единый navbar для auth + onboarding зоны
   Переиспользует: --sa-primary, --sa-border-color, --sa-font,
   sa-btn, sa-input, sa-label, sa-form-group, sa-alert-*
   ─────────────────────────────────────────────────────────────────────────── */

/* ── §35.1 Public zone design tokens (landing-aligned) ── */
/* --sa-pub-* moved to tokens.css (PLATFORM-TOKENS-01 2026-05-20) */

/* ── §35.2 Page base ── */
.sa-pub-page {
  min-height:  100vh;
  background:  #f4f6fa;
  font-family: var(--sa-font);
  color:       var(--sa-text);
}

/* ── §35.3 Navbar ── */
.sa-pub-nav {
  position:                fixed;
  top:                     0;
  left:                    0;
  right:                   0;
  height:                  var(--sa-pub-nav-h);
  background:              rgba(3,7,18,.60);
  backdrop-filter:         blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:           1px solid rgba(255,255,255,.05);
  transition:              background .3s, box-shadow .3s;
  z-index:                 200;
}
.sa-pub-nav.scrolled {
  background: rgba(3,7,18,.95);
  box-shadow: 0 4px 24px rgba(0,0,0,.40);
}
.sa-pub-nav-inner {
  max-width:       var(--sa-pub-inner);
  margin:          0 auto;
  padding:         0 28px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
  gap:             12px;
}

/* ── §35.4 Logo ── */
.sa-pub-logo {
  display:         flex;
  align-items:     center;
  gap:             10px;
  text-decoration: none;
  flex-shrink:     0;
}
.sa-pub-logo-icon {
  width:         28px;
  height:        28px;
  border-radius: 7px;
  overflow:      hidden;
  flex-shrink:   0;
  transition:    var(--sa-pub-t);
}
.sa-pub-logo-icon img {
  width:   28px;
  height:  28px;
  display: block;
}
.sa-pub-logo:hover .sa-pub-logo-icon {
  transform:  translateY(-2px);
  box-shadow: 0 4px 16px rgba(59,130,246,.50);
}
.sa-pub-logo-name {
  font-size:   14px;
  font-weight: 700;
  color:       var(--sa-pub-text);
  white-space: nowrap;
}

/* ── §35.5 Nav right & lang switcher ── */
.sa-pub-nav-right {
  display:     flex;
  align-items: center;
  gap:         12px;
  flex-shrink: 0;
}
.sa-pub-lang {
  display:       flex;
  background:    rgba(255,255,255,.07);
  border-radius: 20px;
  padding:       2px;
  gap:           2px;
}
.sa-pub-lb {
  font-size:     10px;
  font-weight:   700;
  padding:       3px 9px;
  border-radius: 16px;
  border:        none;
  cursor:        pointer;
  transition:    var(--sa-pub-t);
  line-height:   1.4;
}
.sa-pub-lb.on        { background: var(--sa-pub-accent); color: #fff; }
.sa-pub-lb.off       { background: transparent; color: var(--sa-pub-dim); }
.sa-pub-lb.off:hover { color: var(--sa-pub-muted); }

/* ── §35.6 Public CTA buttons ── */
.sa-pub-btn {
  font-size:       13px;
  font-weight:     600;
  padding:         7px 18px;
  border-radius:   var(--sa-pub-r-btn);
  border:          none;
  cursor:          pointer;
  text-decoration: none;
  transition:      var(--sa-pub-t);
  line-height:     1.4;
  display:         inline-flex;
  align-items:     center;
}
.sa-pub-btn--primary {
  background: linear-gradient(90deg, #2eabf2, #2e78f2);
  color:      #fff;
  box-shadow: 0 4px 20px rgba(59,130,246,.40);
}
.sa-pub-btn--primary:hover {
  transform:       translateY(-2px);
  box-shadow:      0 6px 20px rgba(59,130,246,.55);
  color:           #fff;
  text-decoration: none;
}
.sa-pub-btn--ghost {
  background: transparent;
  color:      var(--sa-pub-muted);
  border:     1px solid var(--sa-pub-border);
}
.sa-pub-btn--ghost:hover {
  border-color:    var(--sa-pub-accent);
  color:           var(--sa-pub-text);
  background:      rgba(59,130,246,.08);
  text-decoration: none;
}

/* ── §35.7 Promo bar ── */
.sa-pub-promo {
  position:        fixed;
  top:             var(--sa-pub-nav-h);
  left:            0;
  right:           0;
  height:          var(--sa-pub-promo-h);
  background:      #052e16;
  border-bottom:   1px solid #14532d;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  z-index:         190;
}
.sa-pub-promo-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    #22c55e;
  flex-shrink:   0;
  animation:     sa-pulse 2s infinite;
}
.sa-pub-promo-text {
  font-size:   12px;
  color:       #86efac;
  white-space: nowrap;
}

/* ── §35.8 Page body scroll offset ── */
.sa-pub-body {
  padding-top: calc(var(--sa-pub-nav-h) + var(--sa-pub-promo-h));
  min-height:  100vh;
  background:  #f4f6fa;
}
.sa-pub-body--no-promo { padding-top: var(--sa-pub-nav-h); }

/* ── §35.9 Auth card layout ── */
.sa-pub-scroll {
  padding:         36px 16px 64px;
  display:         flex;
  justify-content: center;
  align-items:     flex-start;
}
.sa-pub-card {
  background:    #fff;
  border:        1px solid var(--sa-border-color);
  border-radius: 12px;
  padding:       36px;
  width:         100%;
  max-width:     540px;
}
.sa-pub-card-title { font-size: 22px; font-weight: 700; color: var(--sa-text); margin: 0 0 4px; }
.sa-pub-card-sub   { font-size: 14px; color: var(--sa-text-muted); margin: 0 0 24px; }
.sa-pub-divider    { border: none; border-top: 1px solid var(--sa-border-color); margin: 20px 0; }

/* ── §35.10 Account type selector (LK-01-A / LK-01-B) ── */
.sa-pub-type-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
  margin-bottom:         20px;
}
.sa-pub-type-card {
  border:        2px solid var(--sa-border-color);
  border-radius: 8px;
  padding:       14px 12px;
  cursor:        pointer;
  transition:    border-color .15s, background .15s;
}
.sa-pub-type-card:hover  { border-color: #93c5fd; }
.sa-pub-type-card.active { border-color: var(--sa-primary); background: #eff6ff; }
.sa-pub-type-icon        { font-size: 18px; margin-bottom: 4px; }
.sa-pub-type-label       { font-size: 13px; font-weight: 600; color: var(--sa-text); }
.sa-pub-type-price       { font-size: 11px; color: var(--sa-text-muted); margin-top: 2px; }

/* ── §35.11 Consent checkboxes (152-ФЗ) ── */
.sa-pub-consents {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin:         16px 0;
}
.sa-pub-consent-row {
  display:     flex;
  align-items: flex-start;
  gap:         9px;
}
.sa-pub-consent-row input[type=checkbox] {
  margin-top:   2px;
  flex-shrink:  0;
  accent-color: var(--sa-primary);
  width:        14px;
  height:       14px;
  cursor:       pointer;
}
.sa-pub-consent-row label {
  font-size:   12px;
  color:       var(--sa-text-muted);
  line-height: 1.45;
  cursor:      pointer;
}
.sa-pub-consent-row label a       { color: var(--sa-primary); text-decoration: none; }
.sa-pub-consent-row label a:hover { text-decoration: underline; }
.sa-pub-consent-optional          { color: var(--sa-text-subtle); }

/* ── §35.12 Trial badge ── */
.sa-pub-trial-note {
  background:    #f0fdf4;
  border:        1px solid #bbf7d0;
  border-radius: 6px;
  padding:       9px 12px;
  text-align:    center;
  font-size:     12px;
  color:         #166534;
  margin-top:    12px;
}

/* ── §35.13 Card footer & legal ── */
.sa-pub-card-footer {
  text-align: center;
  font-size:  13px;
  color:      var(--sa-text-muted);
  margin-top: 16px;
}
.sa-pub-card-footer a       { color: var(--sa-primary); text-decoration: none; }
.sa-pub-card-footer a:hover { text-decoration: underline; }
.sa-pub-legal {
  text-align:  center;
  font-size:   11px;
  color:       var(--sa-text-subtle);
  margin-top:  10px;
  line-height: 1.5;
}

/* ── §35.14 Auth Gate card (LK-00) ── */
.sa-pub-gate-card {
  background:    #fff;
  border:        1px solid var(--sa-border-color);
  border-radius: 12px;
  padding:       40px;
  width:         100%;
  max-width:     400px;
}
.sa-pub-gate-product {
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--sa-primary);
  margin:         0 0 8px;
}
.sa-pub-gate-title { font-size: 22px; font-weight: 700; color: var(--sa-text); margin: 0 0 6px; }
.sa-pub-gate-sub   { font-size: 14px; color: var(--sa-text-muted); margin: 0 0 24px; }
.sa-pub-gate-or {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin:      14px 0;
}
.sa-pub-gate-or::before,
.sa-pub-gate-or::after { content: ''; flex: 1; border-top: 1px solid var(--sa-border-color); }
.sa-pub-gate-or span   { font-size: 12px; color: var(--sa-text-muted); }
.sa-pub-gate-trial     { font-size: 12px; color: var(--sa-text-muted); text-align: center; margin-top: 8px; }

/* ── §35.15 Honeypot hidden field (SEC-FRAUD-01) ── */
.sa-pub-hp {
  opacity:        0;
  position:       absolute;
  top:            0;
  left:           0;
  height:         0;
  width:          0;
  z-index:        -1;
  pointer-events: none;
  overflow:       hidden;
}

/* ── §35.16 Full-width button helper ── */
.sa-btn--full {
  width:           100%;
  justify-content: center;
}

/* ── §35.17 Responsive ── */
@media (max-width: 768px) {
  .sa-pub-nav-inner  { padding: 0 16px; }
  .sa-pub-card       { padding: 24px 20px; }
  .sa-pub-gate-card  { padding: 28px 20px; }
  .sa-pub-type-grid  { gap: 8px; }
  .sa-pub-promo-text { font-size: 11px; }
}
@media (max-width: 480px) {
  .sa-pub-type-grid { grid-template-columns: 1fr; }
  .sa-pub-promo     { display: none; }
  .sa-pub-body      { padding-top: var(--sa-pub-nav-h); }
}

/* ── §35.18 Card brand header (logo + subtitle на карточке) ── */
.sa-pub-card-brand {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     4px 0 16px;
}
.sa-pub-card-logo-icon {
  width:         36px;
  height:        36px;
  border-radius: 9px;
  overflow:      hidden;
  flex-shrink:   0;
}
.sa-pub-card-logo-icon img {
  width:   36px;
  height:  36px;
  display: block;
}
.sa-pub-card-brand-text  { display: flex; flex-direction: column; gap: 2px; }
.sa-pub-card-brand-name  { font-size: 15px; font-weight: 700; color: var(--sa-text); line-height: 1.2; }
.sa-pub-card-brand-sub   { font-size: 12px; color: var(--sa-text-muted); line-height: 1.2; }

/* ═══════════════════════════════════════════════════════════════
   §36 Upload Form — Data Classification + Consent (Sprint 3.19c)
   ═══════════════════════════════════════════════════════════════ */


/* Radio card для Data Classification */
.sa-dc-card { border: 2px solid var(--sa-border-color, #dee2e6); border-radius: 0.5rem; padding: 0.875rem; text-align: center; background: #fff; transition: border-color 0.15s, background 0.15s; cursor: pointer; }
.sa-dc-card--prop { border-color: var(--sa-danger, #dc3545); background: #fff5f5; }
.sa-dc-card--pub  { border-color: var(--sa-success, #198754); background: #f0fdf4; }
.sa-dc-card__title--success { color: var(--sa-success, #198754); }
.sa-dc-card__icon { font-size: 1.4rem; margin-bottom: 0.25rem; }
/* KB-UPLOAD-ZEROUI-01: SVG-иконка scope-карты (эмодзи→Lucide). Аналога ≥24px в CSS нет (аудит). */
.sa-dc-card__ico { width: 36px; height: 36px; flex-shrink: 0; stroke: currentColor; fill: none; }

.sa-dc-card__title { font-weight: 700; font-size: 0.875rem; color: #495057; }
.sa-dc-card__title--danger { color: var(--sa-danger, #dc3545); }
.sa-dc-card__sub { font-size: 0.75rem; color: var(--sa-text-muted, #6c757d); margin-top: 0.2rem; }

/* Consent amber block */
.sa-consent-block { display: none; margin-top: -0.5rem; margin-bottom: 1rem; background: #fff8e1; border: 1px solid #ffe082; border-radius: 0.5rem; padding: 1rem; }
.sa-consent-label { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; }
.sa-consent-check { margin-top: 0.2rem; width: 16px; height: 16px; flex-shrink: 0; }
.sa-consent-text { font-size: 0.82rem; color: #5d4037; line-height: 1.5; }
.sa-consent-error { display: none; color: var(--sa-danger, #dc3545); font-size: 0.78rem; margin-top: 0.5rem; margin-left: 1.75rem; }

/* ═══════════════════════════════════════════════════════════════
   §37 Upload Overlay Spinner (KB-INGEST-02, Sprint 3.19c)
   ═══════════════════════════════════════════════════════════════ */
.sa-upload-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13, 15, 20, 0.75);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.sa-upload-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.sa-spinner-ring {
  width: 56px;
  height: 56px;
  border: 4px solid rgba(59, 130, 246, 0.2);
  border-top-color: var(--sa-primary, #3b82f6);
  border-radius: 50%;
  animation: sa-spin 0.8s linear infinite;
}
@keyframes sa-spin {
  to { transform: rotate(360deg); }
}
.sa-upload-spinner-text {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}
.sa-upload-spinner-sub {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
}

/* ═══════════════════════════════════════════════════════════════
   §38 Legal documents (01-04) 
   ═══════════════════════════════════════════════════════════════ */

/* ── §LEGAL-02: Legal document pages ─────────────────────────────
   Используется в: templates/legal/*.html
   Автор: SEC-07/LEGAL-02 patch · 2026-05-12
──────────────────────────────────────────────────────────────── */
.sa-legal-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}
.sa-legal-card {
  background: var(--sa-card-bg, #fff);
  border: 1px solid var(--sa-border, #dee2e6);
  border-radius: 12px;
  padding: 40px 48px;
  margin: 32px 0;
}
.sa-legal-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--sa-text, #212529);
  margin: 0 0 4px;
}
.sa-legal-meta {
  font-size: 13px;
  color: var(--sa-text-muted, #6c757d);
  margin: 0 0 32px;
}
.sa-legal-h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--sa-text, #212529);
  margin: 28px 0 8px;
}
.sa-legal-p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--sa-text, #212529);
  margin: 0 0 8px;
}
.sa-legal-p a {
  color: var(--sa-primary, #3b82f6);
  text-decoration: none;
}
.sa-legal-p a:hover {
  text-decoration: underline;
}
.sa-legal-divider {
  border: none;
  border-top: 1px solid var(--sa-border, #dee2e6);
  margin: 32px 0;
}
.sa-legal-footer {
  font-size: 12px;
  color: var(--sa-text-muted, #6c757d);
  line-height: 1.6;
}
.sa-legal-warn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sa-warning-bg, #fff3cd);
  border: 1px solid var(--sa-warning-border, #ffc107);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--sa-warning-text, #664d03);
  margin-top: 8px;
}

/* ── §LEGAL: Tables, lists, requisites ───────────────────────
   Используется в: templates/legal/*.html
   Добавлено: 2026-05-12
──────────────────────────────────────────────────────────────── */
.sa-legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 12px;
  font-size: 13px;
}
.sa-legal-table th {
  background: var(--sa-bg, #f4f6f9);
  color: var(--sa-text, #212529);
  font-weight: 600;
  font-size: 12px;
  padding: 8px 12px;
  text-align: left;
  border: 1px solid var(--sa-border, #dee2e6);
}
.sa-legal-table td {
  padding: 8px 12px;
  border: 1px solid var(--sa-border, #dee2e6);
  color: var(--sa-text, #212529);
  vertical-align: top;
  line-height: 1.5;
}
.sa-legal-table tr:nth-child(even) td {
  background: var(--sa-bg, #f4f6f9);
}
.sa-legal-ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.sa-legal-ul li {
  font-size: 13px;
  color: var(--sa-text, #212529);
  line-height: 1.7;
  margin-bottom: 4px;
}
.sa-legal-req {
  background: var(--sa-card-bg, #fff);
  border: 1px solid var(--sa-border, #dee2e6);
  border-left: 4px solid var(--sa-primary, #3b82f6);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 0 0 16px;
}
.sa-legal-req-line {
  font-size: 13px;
  color: var(--sa-text, #212529);
  line-height: 1.7;
  margin: 0;
}
.sa-legal-note {
  font-size: 13px;
  color: var(--sa-text, #212529);
  background: var(--sa-warning-bg, #fff3cd);
  border: 1px solid var(--sa-warning-border, #ffc107);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 12px;
  line-height: 1.6;
}
.sa-legal-link {
  color: var(--sa-primary, #3b82f6);
  text-decoration: none;
}
.sa-legal-link:hover {
  text-decoration: underline;
}

/* ── §LEGAL: Product blocks ──────────────────────────────────
   Используется в: templates/legal/terms.html
   Добавлено: 2026-05-12
──────────────────────────────────────────────────────────────── */
.sa-legal-product-block {
  border-radius: 8px;
  padding: 14px 16px;
  margin: 0 0 12px;
  border: 1px solid var(--sa-border, #dee2e6);
}
.sa-legal-product-title {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 8px;
}
.sa-legal-product-aerospec {
  background: #f0f7ff;
  border-color: #93c5fd;
}
.sa-legal-product-aerospec .sa-legal-product-title { color: #1d4ed8; }
.sa-legal-product-core {
  background: #f5f3ff;
  border-color: #c4b5fd;
}
.sa-legal-product-core .sa-legal-product-title { color: #6d28d9; }
.sa-legal-product-eco {
  background: #f0fdf4;
  border-color: #86efac;
}
.sa-legal-product-eco .sa-legal-product-title { color: #15803d; }


/* ═══════════════════════════════════════════════════════════════
   §39 Password field — eye toggle + strength indicator
   ═══════════════════════════════════════════════════════════════ */


/* ── §PWD: Password field — eye toggle + strength indicator ──
   Используется в: templates/registration/register.html
   SA.pub.initPassword() в utils.js
   Добавлено: 2026-05-13
──────────────────────────────────────────────────────────────── */
.sa-pwd-wrap {
  position: relative;
}
.sa-pwd-wrap input {
  padding-right: 44px;
}
.sa-pwd-toggle {
  position: absolute;
  right: 10px;
  top: 19px;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--sa-text-muted, #6c757d);
  line-height: 1;
  transition: color .15s;
}
.sa-pwd-toggle:hover { color: var(--sa-primary, #3b82f6); }
.sa-pwd-toggle svg   { display: block; width: 18px; height: 18px; }
.sa-pwd-strength {
  margin-top: 6px;
  height: 4px;
  border-radius: 2px;
  background: var(--sa-border, #dee2e6);
  overflow: hidden;
}
.sa-pwd-strength-bar {
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width .3s ease, background .3s ease;
}
.sa-pwd-strength-bar--weak   { background: #ef4444; }
.sa-pwd-strength-bar--fair   { background: #f59e0b; }
.sa-pwd-strength-bar--good   { background: #3b82f6; }
.sa-pwd-strength-bar--strong { background: #22c55e; }
.sa-pwd-strength-label {
  font-size: 11px;
  margin-top: 4px;
  color: var(--sa-text-muted, #6c757d);
  min-height: 16px;
  transition: color .2s;
}
.sa-pwd-strength-label--weak   { color: #ef4444; }
.sa-pwd-strength-label--fair   { color: #f59e0b; }
.sa-pwd-strength-label--good   { color: #3b82f6; }
.sa-pwd-strength-label--strong { color: #22c55e; }

/* ── §PUB-ICON: центральная иконка на pub-страницах ── */
.sa-pub-card-icon {
  text-align: center;
  font-size: 36px;
  margin: 8px 0 12px;
}

/* ── §BTN-SECONDARY: вторичная кнопка ── */
.sa-btn--secondary {
  background: var(--sa-bg-subtle);
  border: 1px solid var(--sa-border-color);
  color: var(--sa-text-muted);
}
.sa-btn--secondary:hover {
  background: var(--sa-border-color);
}

/* ── §TEXT-CENTER ── */
.sa-text-center { text-align: center; }

/* ── §LOGIN: классы для страницы входа ── */
.sa-pub-card--sm        { max-width: 420px; }
.sa-pub-card-sub--login { margin-bottom: 20px; }
.sa-form-label-row      { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .35rem; }
.sa-form-label-row .sa-label { margin-bottom: 0; }
.sa-form-label-forgot   { font-size: .78rem; color: var(--sa-primary); text-decoration: none; }
.sa-form-label-forgot:hover { text-decoration: underline; }

/* ── §PUB-LEGAL modifier ── */
.sa-pub-legal--mt { margin-top: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   §40  Wizard / Step-by-Step Flow  (v2 — 2026-05-17 full rewrite)
   HLD: hld_design_system.md §4.5.6, hld_onboarding.md §3
   Sprint 3.20
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── §40.1 Page wrapper ────────────────────────────────────────────────── */

.sa-wizard {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--sa-body-bg, #f4f6fa);
}

/* ── §40.1b Inner container — max-width 1280px (как nav-inner) ─────────── */

.sa-wizard-inner {
  max-width: var(--inner, 1280px);
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

/* ── §40.2 Topbar ──────────────────────────────────────────────────────── */

.sa-wizard-topbar {
  height: 52px;
  background: #ffffff;
  border-bottom: 1px solid var(--sa-border-color);
  position: sticky;
  top: 0;
  z-index: 100;
}

.sa-wizard-topbar > .sa-wizard-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sa-wizard-topbar-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sa-text-muted);
  letter-spacing: 0.02em;
}

.sa-wizard-topbar-skip {
  font-size: 0.8125rem;
}

.sa-wizard-skip-link {
  color: var(--sa-text-muted);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8125rem;
  font-family: var(--sa-font);
  padding: 0;
}

.sa-wizard-skip-link:hover {
  color: var(--sa-primary);
  text-decoration: underline;
}

/* ── §40.3 Progress bar ────────────────────────────────────────────────── */

.sa-wizard-progress {
  height: 4px;
  background: var(--sa-border-color);
}

.sa-wizard-progress > .sa-wizard-inner {
  height: 100%;
  padding: 0;
}

.sa-wizard-progress-fill {
  height: 100%;
  width: var(--wizard-progress, 0%);
  background: var(--sa-primary);
  transition: width 0.35s ease;
}

/* ── §40.4 Step indicators ─────────────────────────────────────────────── */

.sa-wizard-steps {
  background: #ffffff;
  padding: 1.5rem 0 2.5rem;
  border-bottom: 1px solid var(--sa-border-color);
}

.sa-wizard-steps > .sa-wizard-inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

/* Кружок 32×32 — лейбл absolute снаружи под кругом, не обрезается */
.sa-wizard-step {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--sa-border-color);
  background: #ffffff;
  color: var(--sa-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sa-wizard-step small {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--sa-text-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1;
}

.sa-wizard-step--active {
  background: var(--sa-primary);
  border-color: var(--sa-primary);
  color: #ffffff;
}

.sa-wizard-step--active small {
  color: var(--sa-primary);
  font-weight: 600;
}

.sa-wizard-step--done {
  background: var(--sa-primary);
  border-color: var(--sa-primary);
  color: transparent;
  position: relative;
}

.sa-wizard-step--done::before {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
}

.sa-wizard-step--done small {
  color: var(--sa-primary);
}

/* Линия между кружками — выровнена по центру круга (height 32, border 2 → top 15) */
.sa-wizard-step-line {
  flex: 1;
  max-width: 96px;
  height: 2px;
  background: var(--sa-border-color);
  margin: 15px 0 0 0;
}

/* ── §40.5 Wizard card ─────────────────────────────────────────────────── */

.sa-wizard-card {
  width: 100%;
  max-width: 600px;
  margin: 2.5rem auto;
  padding: 2.5rem 2.5rem 2rem;
  background: #ffffff;
  border: 1px solid var(--sa-border-color);
  border-radius: 12px;
  box-shadow: var(--sa-card-shadow);
}

.sa-wizard-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sa-text);
  margin: 0 0 0.5rem 0;
  line-height: 1.25;
}

.sa-wizard-card-sub {
  font-size: 0.9375rem;
  color: var(--sa-text-muted);
  margin: 0 0 1.75rem 0;
  line-height: 1.5;
}

.sa-wizard-card-sub strong {
  color: var(--sa-primary);
  font-weight: 600;
}

/* ── §40.6 Hint text ───────────────────────────────────────────────────── */

.sa-wizard-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--sa-text-muted);
  margin-top: 0.375rem;
  line-height: 1.4;
}

.sa-wizard-hint--error {
  color: var(--sa-danger, #dc2626);
}

/* ── §40.7 Actions footer (Назад + Далее) ──────────────────────────────── */

.sa-wizard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sa-border-color);
}

/* ── §40.8 Pills group ─────────────────────────────────────────────────── */

.sa-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.sa-pills-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 36px;
  padding: 0 1rem;
  border-radius: 18px;
  border: 1px solid var(--sa-border-color);
  background: #ffffff;
  color: var(--sa-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--sa-font);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sa-pills-item:hover {
  border-color: var(--sa-primary);
  color: var(--sa-primary);
}

.sa-pills-item--active {
  background: var(--sa-primary);
  border-color: var(--sa-primary);
  color: #ffffff;
}

.sa-pills-item--active:hover {
  background: var(--sa-primary-hover, var(--sa-primary));
  border-color: var(--sa-primary-hover, var(--sa-primary));
  color: #ffffff;
}

/* ── §40.9 Roadmap list (welcome.html intro) ───────────────────────────── */

.sa-wizard-roadmap {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  counter-reset: roadmap;
}

.sa-wizard-roadmap li {
  counter-increment: roadmap;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--sa-text);
}

.sa-wizard-roadmap li::before {
  content: counter(roadmap);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sa-primary);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── §40.10 Input modifier — dropdown look (Figma LK-02) ───────────────── */

.sa-input--dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M3 5l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* ── §40.11 Link-action (под полем «Нет в списке?» и т.п.) ─────────────── */

.sa-wizard-link-action {
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--sa-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  margin-top: 0.5rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sa-font);
}

.sa-wizard-link-action:hover {
  text-decoration: underline;
}

/* ── §40.12 Add-engine toggle (details/summary) ────────────────────────── */

.sa-wizard-add-engine {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.sa-wizard-add-engine > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--sa-primary);
  font-size: 0.875rem;
  font-weight: 500;
  list-style: none;
  padding: 0.5rem 0;
  user-select: none;
}

.sa-wizard-add-engine > summary::-webkit-details-marker { display: none; }
.sa-wizard-add-engine > summary::marker { content: ''; }

.sa-wizard-add-engine > summary::before {
  content: '+';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sa-primary);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}

.sa-wizard-add-engine[open] > summary::before { content: '−'; }
.sa-wizard-add-engine[open] > summary { margin-bottom: 1rem; }

/* ── §40.13 Responsive ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .sa-wizard-inner { padding: 0 1rem; }
  .sa-wizard-topbar-label { display: none; }
  .sa-wizard-step-line { max-width: 32px; }
  .sa-wizard-card { margin: 1rem; padding: 1.5rem 1.25rem; border-radius: 8px; }
  .sa-wizard-card-title { font-size: 1.25rem; }
  .sa-wizard-actions { flex-direction: column-reverse; gap: 0.75rem; }
  .sa-wizard-actions .sa-btn { width: 100%; justify-content: center; }
}

/* ── §40  END Wizard ───────────────────────────────────────────────────── */

/* ── §40.14 Autocomplete (custom dropdown) ─────────────────────────────── */

/* Wrapper — позиционирующий предок для dropdown */
.sa-form-group.sa-autocomplete,
.sa-autocomplete {
  position: relative;
}

/* Сам dropdown — absolute поверх потока */
.sa-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  background: #ffffff;
  border: 1px solid var(--sa-border-color);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
}

.sa-autocomplete-dropdown[hidden] {
  display: none !important;
}

/* Item — двухстрочная карточка как в Figma «Похожие модели» */
.sa-autocomplete-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.625rem 0.875rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}

.sa-autocomplete-item:hover,
.sa-autocomplete-item--active {
  background: #f4f6fa;
}

.sa-autocomplete-item-main {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sa-text);
  line-height: 1.3;
}

.sa-autocomplete-item-meta {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--sa-text-muted);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.sa-autocomplete-empty {
  padding: 1rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--sa-text-muted);
}

/* ── §40  END Wizard ───────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────────────
   §41 Onboarding Step 2 — Module selection grid
   hld_design_system.md §4.2 | hld_onboarding.md §3.2
   Использует базовый .sa-card из §05 + новые модификаторы.
   ───────────────────────────────────────────────────────────────────────────── */

/* Grid — layout-контейнер, структурно уникален */
.sa-module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (max-width: 700px) {
  .sa-module-grid { grid-template-columns: 1fr; }
}

/* Карточка-выбор поверх .sa-card */
.sa-card--selectable {
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.sa-card--selectable:hover {
  border-color: var(--sa-primary);
  box-shadow: 0 0 0 3px var(--sa-primary-soft, rgba(13,110,253,0.12));
}
.sa-card--selected {
  border-color: var(--sa-primary);
  background: var(--sa-primary-soft, #f0f5ff);
}

/* Приглушённая (coming_soon) */
.sa-card--muted {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

/* Скрытый radio внутри карточки-label */
.sa-card--selectable input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   §42 Onboarding Step 2 v3.2 — Progressive Disclosure
   hld_onboarding.md v3.2 §3.2 | Figma node 352:4
   ───────────────────────────────────────────────────────────────────────────── */

/* Метка шага + подсказка */
.sa-step2-section {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin: 1.25rem 0 0.75rem;
}

/* 2-колоночная сетка тем */
.sa-step2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}
@media (max-width: 560px) {
  .sa-step2-grid { grid-template-columns: 1fr; }
}

/* Карточка темы — поверх .sa-card + .sa-card--selectable */
.sa-step2-card {
  padding: 0.75rem 1rem;
  gap: 0.25rem;
  min-height: 72px;
}
.sa-step2-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sa-step2-card-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sa-text, #212529);
  line-height: 1.3;
}
.sa-step2-card-desc {
  font-size: 0.75rem;
  color: var(--sa-text-muted, #6c757d);
  line-height: 1.4;
}

/* Chips */
.sa-step2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.625rem;
}
.sa-step2-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--sa-border-color, #dee2e6);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8125rem;
  color: var(--sa-text, #212529);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.sa-step2-chip:hover {
  border-color: var(--sa-primary, #0d6efd);
}
.sa-step2-chip--active {
  border-color: var(--sa-primary, #0d6efd);
  background: var(--sa-primary-soft, #f0f5ff);
  color: var(--sa-primary, #0d6efd);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   §99 Utility — STEP3-02 (2026-05-21)
   ═══════════════════════════════════════════════════════════════ */
.sa-hidden { display: none !important; }

/* Wizard spinner (переиспользует sa-spinner-ring анимацию из §upload) */
.sa-spinner-wrap  { display:flex; flex-direction:column; align-items:center; gap:1.25rem; padding:3rem 0; }
.sa-spinner-label { font-size:1rem; font-weight:500; color:var(--sa-text-secondary,#6b7280); animation:sa-pulse 1.5s ease-in-out infinite; }
@keyframes sa-pulse { 0%,100%{opacity:.55} 50%{opacity:1} }

/* Wizard answer card */
.sa-answer-blocked { border-left:4px solid var(--sa-danger,#dc3545); background:#fff5f5; border-radius:8px; padding:1rem 1.25rem; margin-bottom:1rem; }
.sa-answer-blocked-title { font-weight:700; color:var(--sa-danger,#dc3545); margin-bottom:.25rem; }

/* ── §43 Portal Navbar v2 + layout shift (Sprint 3.20, Figma 1762:92) ──────────
   ADR-COLOR-02 (единый #0a1228 chrome) · ADR-BALANCE-01 · ADR-SUPPORT-01
   Перекрывает .sa-sidebar{top} и .sa-main{margin-top} из §01 (правило в конце файла).
   .sa-topbar (§01) больше не используется в base.html — оставлен как legacy, безвреден.
   ──────────────────────────────────────────────────────────────────────────── */

.sa-navbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--sa-topbar-height);
  background: var(--sa-sidebar-bg);
  border-bottom: 1px solid var(--sa-sidebar-border);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.25rem;
  z-index: 300;
}

/* Burger — скрыт на desktop, виден на mobile (был внутри .sa-topbar) */
.sa-navbar .sa-burger { display: none; }

/* Brand */
.sa-nav-brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; flex-shrink: 0; }
.sa-nav-logo-mark { font-size: 20px; line-height: 1; }
.sa-nav-logo-name { font-size: 14px; font-weight: 700; color: var(--sa-sidebar-active); white-space: nowrap; }

/* Center search (placeholder, SLOT-01 Sprint 4.x) */
.sa-nav-center { flex: 1; display: flex; justify-content: center; }
.sa-nav-search-pill {
  display: flex; align-items: center; gap: 0.5rem;
  width: 300px; height: 32px; padding: 0 0.75rem;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
}
.sa-nav-search-icon { font-size: 13px; opacity: 0.6; }
.sa-nav-search-text { flex: 1; font-size: 12px; color: var(--sa-sidebar-text); }
.sa-nav-search-input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 12px; color: var(--sa-sidebar-text);
  font-family: inherit; padding: 0;
}
.sa-nav-search-input::placeholder { color: var(--sa-sidebar-text); opacity: 0.55; }
.sa-nav-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sa-nav-search-submit {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; padding: 0; cursor: pointer;
  color: var(--sa-sidebar-text); opacity: 0.6; transition: opacity 0.15s;
}
.sa-nav-search-submit:hover { opacity: 1; }
.sa-nav-search-kbd {
  font-size: 10px; color: var(--sa-sidebar-text);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px; padding: 1px 5px; font-family: var(--sa-font-mono);
}

/* Right zone + slots */
.sa-nav-right { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.sa-nav-slot { position: relative; }
.sa-nav-slot-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  height: 36px; padding: 0 0.625rem;
  border: none; background: transparent; border-radius: 6px; cursor: pointer;
  font-size: 12px; color: var(--sa-sidebar-text); transition: background 0.15s, color 0.15s;
}
.sa-nav-slot-btn:hover { background: rgba(255,255,255,0.08); color: var(--sa-sidebar-active); }
.sa-nav-chevron { font-size: 9px; opacity: 0.6; }

/* Balance / Trial chip (ADR-BALANCE-01) */
.sa-nav-balance {
  display: inline-flex; align-items: center; gap: 0.3rem;
  height: 36px; padding: 0 0.625rem; border-radius: 6px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.sa-nav-balance--ok     { color: var(--sa-success); }
.sa-nav-balance--warn   { color: var(--sa-warning); }
.sa-nav-balance--danger { color: var(--sa-danger);  }
.sa-nav-balance-sep     { opacity: 0.5; font-weight: 400; }

/* Avatar */
.sa-nav-avatar-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--sa-primary); color: #fff;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.sa-nav-org-name { font-size: 12px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dropdown */
.sa-nav-dropdown {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 210px; background: #152138;
  border: 1px solid rgba(255,255,255,0.12); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 301; padding: 4px 0;
}
.sa-nav-dropdown.is-open  { display: block; }
.sa-nav-dropdown--right   { left: auto; right: 0; }
.sa-nav-dd-item {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  padding: 8px 14px; font-size: 13px; color: var(--sa-sidebar-text);
  text-decoration: none; background: none; border: none; text-align: left; cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.sa-nav-dd-item:hover         { background: rgba(255,255,255,0.07); color: var(--sa-sidebar-active); }
.sa-nav-dd-item--danger:hover { color: var(--sa-danger); }
.sa-nav-dd-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0; }
.sa-nav-dd-head { padding: 8px 14px; }
.sa-nav-dd-head-org  { font-size: 13px; font-weight: 600; color: var(--sa-sidebar-active); }
.sa-nav-dd-head-role { font-size: 11px; color: var(--sa-sidebar-text); margin-top: 2px; }
.sa-nav-dd-logout { margin: 0; }

/* ── §43c Платформа-свитчер AeroSpec/CoPilot (NAVBAR-RELAUNCH-01 C, Figma 04/04b) ──
   Сегмент-тумблер у лого. CoPilot locked «скоро» до C4-флага. Не путать с §31
   .sa-nav-platform (staff client-select в sidebar). Значения свер. с Figma 2267:97-102. */
.sa-nav-platsw {
  display: flex; align-items: center; gap: 2px;
  height: 30px; padding: 2px;
  background: #142036; border: 1px solid #2a3a57; border-radius: 8px;
  flex-shrink: 0;
}
.sa-nav-platsw-seg {
  display: flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 12px;
  font-size: 12px; font-weight: 500; line-height: 24px;
  color: var(--sa-sidebar-text); text-decoration: none;
  background: transparent; border: none; border-radius: 6px;
  cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s;
}
.sa-nav-platsw-seg:hover { color: var(--sa-sidebar-active); text-decoration: none; }
.sa-nav-platsw-seg.is-active { background: var(--sa-primary-hover); color: #fff; }
.sa-nav-platsw-seg.is-active:hover { color: #fff; }
.sa-nav-platsw-seg--locked { cursor: default; color: #7c8aa5; }
.sa-nav-platsw-seg--locked:hover { color: #7c8aa5; }
.sa-nav-platsw-soon {
  font-size: 9px; line-height: 1; padding: 3px 6px;
  background: #233047; color: #9fb0c9; border-radius: 9px;
}

/* Layout shift — sidebar + main под navbar (override §01) */
.sa-sidebar { top: var(--sa-topbar-height); }
.sa-main    { margin-top: var(--sa-topbar-height); min-height: calc(100vh - var(--sa-topbar-height)); }

/* Mobile */
@media (max-width: 768px) {
  .sa-navbar .sa-burger  { display: flex; }
  .sa-nav-center         { display: none; }
  .sa-nav-slot-label     { display: none; }   /* Поддержка → только 🎧 */
  .sa-nav-balance-label  { display: none; }   /* "Trial ·" → только число */
  .sa-sidebar            { top: var(--sa-topbar-height); }  /* под navbar (override §24 top:0) */
  .sa-main               { margin-top: var(--sa-topbar-height); padding-top: var(--sa-content-pad); }
}
@media (max-width: 480px) {
  .sa-nav-logo-name      { display: none; }
  .sa-nav-org-name       { display: none; }
  .sa-nav-balance-date,
  .sa-nav-balance-sep    { display: none; }
}

/* ── §44 Documents P1: stat-card subtitle + inline icons (ADR-FRONT-02 v2.0) ── */
.sa-stat-sub { color: #6c757d; font-size: 0.72rem; margin-top: 0.3rem; }
.sa-stat-label .sa-stat-ico {
  width: 14px; height: 14px; flex-shrink: 0;
  stroke: currentColor; fill: none; vertical-align: -2px; margin-right: 2px;
}
/* безусловный размер sa-btn-ico — SVG без width/height = 300x150, распирает строки */
.sa-btn-ico { width: 16px; height: 16px; flex-shrink: 0; }
.sa-btn .sa-btn-ico {
  width: 16px; height: 16px; flex-shrink: 0;
  stroke: currentColor; fill: none; vertical-align: -3px; margin-right: 4px;
}
.sa-btn-icon .sa-btn-ico {
  width: 16px; height: 16px; flex-shrink: 0;
  stroke: currentColor; fill: none; margin: 0; vertical-align: middle;
}
.sa-page-actions { display: flex; gap: 0.5rem; align-items: center; }

/* ── §45 Search Filter Input — Universal Filter Bar §20 ─────────────────
   ADR-FILTER-MVP-01 (F-13): без иконки внутри input — label "Поиск" над
   полем уже сигнализирует назначение, иконка избыточна (no repetition).
   F-11: placeholder и default option в select — одинаковый бледно-серый. */
.sa-filter-search {
  flex: 1.5 1 200px;                                   /* приоритет ширины над dropdown'ами */
  min-width: 0;                                        /* критично для flex + ellipsis */
}
.sa-filter-search-input {
  width: 100%;
  height: 38px;
  padding: 0 0.75rem;                                  /* стандартный padding — иконки нет */
  border: 1px solid var(--sa-border-color, #dee2e6);
  border-radius: 0.4rem;
  font-size: 0.875rem;
  background: #fff;
  box-sizing: border-box;
  color: var(--sa-text, #212529);
}
.sa-filter-search-input::placeholder {
  color: var(--sa-text-subtle, #adb5bd);               /* бледно-серый — F-11 (unified placeholder color) */
}
.sa-filter-search-input:focus {
  outline: none;
  border-color: var(--sa-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* ── §45.2 Filter select — унифицированный бледно-серый цвет значений (F-11) ──
   Все значения в select имеют одинаковый цвет — независимо от того, выбран
   default («Все») или конкретное значение («Актуальные»). 
   Активность фильтра НЕ сигнализируется цветом текста — это работа отдельных
   chip'ов / counter-badge над таблицей (см. §20.7).
   
   Почему не через :has(option:checked[value=""]) — если default фильтра
   НЕ пустая строка (как в status="active"), цвет получался разным —
   визуальный сбой. Sprint 3.20 / ADR-FILTER-MVP-01 v2. */
.sa-filter-group select {
  color: var(--sa-text-subtle, #adb5bd);
}
/* В выпавшем списке (option в открытом dropdown) — обычный читаемый цвет.
   Это критично для UX — иначе пункты dropdown'а не читаются. */
.sa-filter-group select option {
  color: var(--sa-text, #212529);
}

/* ── §46 — Legacy Documents table rules перенесены в §48 (ADR-LIST-MVP-01) ── */
/* Lucide badge icon — общее правило для всех страниц */
.sa-badge-ico {
  width: 13px; height: 13px; flex-shrink: 0;
  stroke: currentColor; fill: none; vertical-align: -2px; margin-right: 3px;
}
.sa-badge { display: inline-flex; align-items: center; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════════════
   §48 — UNIVERSAL LIST PAGE STANDARD  (ADR-LIST-MVP-01)
   ────────────────────────────────────────────────────────────────────────────
   HLD: hld_design_system.md §18  (Sprint 3.20, 2026-05-29)
   Manifesto: ai_project_manifesto.md §Mobile First
   Применяется ко всем list-страницам портала:
     • kb/documents.html   (эталон)
     • kb/jobs.html        (миграция Sprint 3.21)
     • kb/projects.html    (миграция Sprint 3.21)
     • kb/team.html        (миграция Sprint 3.21)
     • lk/cases_list.html  (миграция Sprint 3.21)

   Mobile First (375px база):
     ≤480px      → card-view (CSS-трансформация tr→карточка, data-label на td)
     481-768px   → сжатая таблица, скрыты Manufacturer/Model/Pages (th-hide-tablet)
     769-1023px  → таблица + filter-row в строку
     ≥1024px     → полная таблица с clamp() длинных колонок

   Zero horizontal scroll — нигде, никогда.  P-02 манифеста.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 48.1 Tokens — колонки и AI-DNA accents ─────────────────────────────── */
:root {
  /* Атомарные колонки (фикс px — §15.2a) */
  --sa-col-client:   60px;
  --sa-col-doctype:  96px;
  --sa-col-entity:   116px;
  --sa-col-pages:    60px;
  --sa-col-status:   124px;
  --sa-col-pub:      104px;
  /* Длинные текстовые — clamp(min, vw-grow, max-cap) */
  --sa-col-mfr:      clamp(140px, 14vw, 200px);
  --sa-col-model:    clamp(100px, 10vw, 150px);
  --sa-col-title:    clamp(240px, 26vw, 480px);

  /* AI-DNA accents (§34 sa-ai-reco) — purple-индиго зарезервировано под AI */
  --sa-ai-purple-start:  #7c3aed;
  --sa-ai-purple-end:    #4f46e5;
  --sa-ai-purple-light:  #ede9fe;
  --sa-ai-purple-bg:     #faf5ff;
  --sa-ai-purple-border: #a78bfa;
  --sa-ai-purple-text:   #7c3aed;

  /* Row hover (Linear-pattern: легче следить за строкой) */
  --sa-hover-row:        #f0f7ff;
}

/* ── 48.2 Page header — действия справа, заголовок + breadcrumb слева ──── */
.sa-page-header {
  /* base уже определён в §03; здесь — list-specific overrides не нужны */
}

/* ── 48.3 Stats row — predictive grid (адаптивный 4→2→1) ───────────────── */
.sa-stats-row--list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.sa-stats-row--list .sa-stat-card {
  /* Контейнер карточки уже стилизован §04; здесь — list refinements */
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sa-stat-sub {
  color: var(--sa-text-muted, #6c757d);
  font-size: 0.72rem;
  margin-top: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .sa-stats-row--list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  .sa-stats-row--list .sa-stat-card { min-height: 80px; padding: 0.75rem; }
  .sa-stats-row--list .sa-stat-value { font-size: 1.5rem; }
}
@media (max-width: 380px) {
  .sa-stats-row--list { grid-template-columns: 1fr; }
}

/* ── 48.4 Filters — desktop в строку, mobile в accordion ────────────────── */
.sa-filters-mobile { display: contents; }                 /* desktop: <details> = прозрачен */
.sa-filters-mobile > summary {
  display: none;                                          /* summary скрыт на desktop */
}

@media (max-width: 768px) {
  .sa-filters-mobile {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid var(--sa-border-color, #dee2e6);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
  }
  .sa-filters-mobile > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--sa-text, #212529);
    user-select: none;
    min-height: 44px;                                    /* touch target */
  }
  .sa-filters-mobile > summary::-webkit-details-marker { display: none; }
  .sa-filters-mobile > summary::after {
    content: '▾';
    margin-left: auto;
    color: var(--sa-text-muted, #6c757d);
    transition: transform 0.2s;
  }
  .sa-filters-mobile[open] > summary::after { transform: rotate(180deg); }
  .sa-filters-mobile[open] > summary {
    border-bottom: 1px solid var(--sa-border-color, #dee2e6);
  }
  .sa-filters-mobile .sa-filters { padding: 12px 16px 16px; background: transparent; border: none; }
  .sa-filters-mobile .sa-filters-row { flex-direction: column; gap: 12px; align-items: stretch; }
  .sa-filters-mobile .sa-filter-group { width: 100%; min-width: 0; }
  .sa-filters-mobile .sa-filter-actions { width: 100%; }
  .sa-filters-mobile .sa-filter-actions .sa-btn { flex: 1; justify-content: center; min-height: 44px; }
}

/* Badge с числом активных фильтров (на mobile summary) */
.sa-badge--filter-count {
  background: var(--sa-primary);
  color: #fff;
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-left: 4px;
}

/* sa-filter-search* — определён в §45 (Universal Filter Bar §20) */

/* ── 48.5 AI-insight banner — обязательный AI-DNA элемент list-страницы ── */
.sa-ai-reco--list {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 1rem;
  border-radius: 10px;
  border: 1px solid var(--sa-ai-purple-border);
  background: var(--sa-ai-purple-bg);
  font-size: 0.875rem;
  color: var(--sa-text, #212529);
  position: relative;
}
.sa-ai-reco--list.sa-ai-reco--warning {
  border-color: #f59e0b;
  background: #fffbeb;
}
.sa-ai-reco--list.sa-ai-reco--critical {
  border-color: var(--sa-danger);
  background: #fef2f2;
}
.sa-ai-reco__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sa-ai-purple-start), var(--sa-ai-purple-end));
  color: #fff;
}
.sa-ai-reco--warning .sa-ai-reco__icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.sa-ai-reco--critical .sa-ai-reco__icon {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
}
.sa-ai-reco__text {
  flex: 1;
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sa-ai-reco__text strong {
  color: var(--sa-ai-purple-text);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.sa-ai-reco--warning .sa-ai-reco__text strong { color: #b45309; }
.sa-ai-reco--critical .sa-ai-reco__text strong { color: #991b1b; }

.sa-ai-reco__link {
  flex-shrink: 0;
  color: var(--sa-ai-purple-text);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.8125rem;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}
.sa-ai-reco__link:hover { background: rgba(124, 58, 237, 0.08); text-decoration: none; }
.sa-ai-reco--warning .sa-ai-reco__link { color: #b45309; }
.sa-ai-reco--warning .sa-ai-reco__link:hover { background: rgba(245, 158, 11, 0.1); }
.sa-ai-reco--critical .sa-ai-reco__link { color: #991b1b; }

.sa-ai-reco__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--sa-text-muted, #6c757d);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
}
.sa-ai-reco__close:hover { background: rgba(0,0,0,0.05); color: var(--sa-text); }

@media (max-width: 480px) {
  .sa-ai-reco--list {
    flex-wrap: wrap;
    padding: 10px 12px;
    font-size: 0.8125rem;
  }
  .sa-ai-reco--list .sa-ai-reco__text { white-space: normal; min-width: 0; flex-basis: 100%; }
  .sa-ai-reco--list .sa-ai-reco__link { margin-left: 32px; }
}

/* ── 48.6 List meta — счётчик + active filter chips ─────────────────────── */
.sa-list-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  min-height: 32px;
}
.sa-list-count {
  font-size: 0.8125rem;
  color: var(--sa-text-muted, #6c757d);
}
.sa-list-count strong {
  color: var(--sa-text, #212529);
  font-weight: 600;
}
.sa-list-count-noun { margin-left: 2px; }

.sa-list-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.sa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  background: #eff6ff;
  color: var(--sa-primary);
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-chip a {
  color: var(--sa-primary);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 3px;
  min-width: 16px;
  text-align: center;
  border-radius: 999px;
  transition: background 0.15s;
}
.sa-chip a:hover { background: rgba(59,130,246,0.15); }

/* ── 48.7 Card — обёртка таблицы ────────────────────────────────────────── */
.sa-table-wrap--list,
.sa-table-wrap--docs {
  overflow-x: visible;                                   /* P-02: no horizontal scroll */
  width: 100%;
}

/* ── 48.8 Table — desktop / tablet layout ──────────────────────────────── */
.sa-table--list,
.sa-table--docs {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

/* Колонки через токены — ПРОПОРЦИОНАЛЬНЫЕ ДОЛИ (паттерн Linear/Notion/Airtable)
   ────────────────────────────────────────────────────────────────────────
   table-layout: fixed + width: 100% + col widths в % → таблица всегда
   занимает 100% контейнера, колонки сохраняют пропорции на любой ширине.
   col-client в px (60) — атомарная служебная колонка; остальные в % дают
   сумму 100% (без client) или 100% от (table_width − 60px) (с client). */
.sa-table--list col.col-client,
.sa-table--docs col.col-client       { width: 60px; }
.sa-table--list col.col-title,
.sa-table--docs col.col-title        { width: 37%; }
.sa-table--list col.col-doctype,
.sa-table--docs col.col-doctype      { width: 9%; }
.sa-table--list col.col-entity-type,
.sa-table--docs col.col-entity-type  { width: 11%; }
.sa-table--list col.col-manufacturer,
.sa-table--docs col.col-manufacturer { width: 14%; }
.sa-table--list col.col-model,
.sa-table--docs col.col-model        { width: 10%; }
.sa-table--list col.col-pages,
.sa-table--docs col.col-pages        { width: 6%; }
.sa-table--list col.col-status,
.sa-table--docs col.col-status       { width: 5%; }
.sa-table--list col.col-pub,
.sa-table--docs col.col-pub          { width: 8%; }

#recent-queries-table col.rq-col-q      { width: 30%; }
#recent-queries-table col.rq-col-case   { width: 16%; }
#recent-queries-table col.rq-col-proj   { width: 15%; }
#recent-queries-table col.rq-col-model  { width: 12%; }
#recent-queries-table col.rq-col-conf   { width: 8%; }
#recent-queries-table col.rq-col-upd    { width: 10%; }
#recent-queries-table col.rq-col-status { width: 9%; }
#recent-queries-table td.rq-cell-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#recent-queries-table td.cell-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1023px) {
  #recent-queries-table col.rq-col-q      { width: 56%; }
  #recent-queries-table col.rq-col-conf   { width: 14%; }
  #recent-queries-table col.rq-col-upd    { width: 16%; }
  #recent-queries-table col.rq-col-status { width: 14%; }
}
/* col-num: узкая числовая колонка (id/страниц/чанков/эмбеддинги) — переиспользуемый примитив */
.sa-table--list col.col-num          { width: 7%; }
/* col-error: широкая текстовая, обрезается через sa-td-nowrap на ячейке */
.sa-table--list col.col-error        { width: 16%; }
.sa-due-soon { color: var(--sa-warning); font-weight: 500; }
/* projects (LK-09) #15.3b · client 60px фикс (как documents) · остальное % · sum=100% */
#projects-table col.col-client       { width: 60px; }
#projects-table col.col-title        { width: 16%; }
#projects-table col.col-status       { width: 11%; }
#projects-table col.col-doctype      { width: 24%; }
#projects-table col.col-entity-type  { width: 8%; }
#projects-table col.col-pages        { width: 13%; }
#projects-table col.col-manufacturer { width: 13%; }
#projects-table col.col-pub          { width: 10%; }
#projects-table col.col-job-action   { width: 5%; }
@media (max-width: 1023px) {
  #projects-table col.col-title       { width: 34%; }
  #projects-table col.col-status      { width: 16%; }
  #projects-table col.col-pages       { width: 17%; }
  #projects-table col.col-manufacturer{ width: 17%; }
  #projects-table col.col-pub         { width: 11%; }
  #projects-table col.col-job-action  { width: 5%; }
}

/* Sum: 35+9+11+14+10+6+9+6 = 100% (desktop) */

/* Строка таблицы — фиксированная высота 44px (manifesto §UX) */
.sa-table--list tbody tr,
.sa-table--docs tbody tr {
  height: 44px;
  border-bottom: 1px solid var(--sa-border);
}

.sa-table--list td,
.sa-table--docs td,
.sa-table--list th,
.sa-table--docs th {
  padding: 0 12px;
  vertical-align: middle;
}
.sa-table--list td,
.sa-table--docs td {
  white-space: nowrap;
  font-size: 0.875rem;
}

/* Hover state */
.sa-table--list tbody tr:hover,
.sa-table--docs tbody tr:hover {
  background: var(--sa-hover-row);
}

/* Ellipsis на длинных колонках (атомарные показываются полностью) */
.sa-table--list td.cell-title,
.sa-table--list td.cell-mfr,
.sa-table--list td.cell-model,
.sa-table--docs td.cell-title,
.sa-table--docs td.cell-mfr,
.sa-table--docs td.cell-model {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 48.9 Clickable row — вся строка кликабельна (§15.3 ADR-TABLE-01) ─── */
.sa-table-row--clickable {
  position: relative;
  cursor: pointer;
}
.sa-table-row-link {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.sa-table--list td,
.sa-table--docs td { position: relative; z-index: 1; }
/* Любая интерактивная штука в ячейке должна быть выше row-link */
.sa-table--list td .sa-btn,
.sa-table--list td .sa-btn-icon,
.sa-table--list td a:not(.sa-table-row-link),
.sa-table--docs td .sa-btn,
.sa-table--docs td .sa-btn-icon,
.sa-table--docs td a:not(.sa-table-row-link) {
  position: relative;
  z-index: 2;
}

/* ── 48.10 Title cell — иконка scope + текст + AI-pulse ─────────────────── */
.sa-doc-scope-ico {
  width: 14px;
  height: 14px;
  color: var(--sa-text-muted, #6c757d);
  flex-shrink: 0;
  margin-right: 6px;
  vertical-align: -2px;
  display: inline-block;
  stroke: currentColor;
  fill: none;
}
.sa-doc-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.sa-table--list td.cell-title,
.sa-table--docs td.cell-title {
  font-weight: 500;
}
.sa-table--list td.cell-title a:not(.sa-table-row-link),
.sa-table--docs td.cell-title a:not(.sa-table-row-link) {
  color: var(--sa-text, #212529);
  text-decoration: none;
}

/* ── 48.11 AI-pulse — accent для свежих документов (<24ч) ──────────────── */
.sa-pulse-new {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.875rem;
  color: var(--sa-ai-purple-text);
  animation: sa-pulse-fade 2s ease-in-out infinite;
  vertical-align: middle;
  line-height: 1;
}
@keyframes sa-pulse-fade {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .sa-pulse-new { animation: none; opacity: 1; }
}

/* Mute для "superseded" строк */
.sa-doc-row--superseded { opacity: 0.65; }
.sa-doc-row--superseded:hover { opacity: 0.85; }
.sa-doc-row--superseded td.cell-title .sa-doc-title-text {
  text-decoration: line-through;
  color: var(--sa-text-muted);
}

/* ── 48.12 Tablet-hide columns (768-1023 → hide Manufacturer/Model/Pages) ─
   На tablet скрыты 3 колонки (mfr 14% + model 10% + pages 6% = 30%).
   Оставшиеся 5 колонок (title+doctype+entity+status+pub) должны заполнить
   100% таблицы — пересчёт пропорций ниже. */
@media (max-width: 1023px) {
  .sa-table--list .th-hide-tablet,
  .sa-table--list .td-hide-tablet,
  .sa-table--list col.col-manufacturer,
  .sa-table--list col.col-model,
  .sa-table--list col.col-pages,
  .sa-table--docs .th-hide-tablet,
  .sa-table--docs .td-hide-tablet,
  .sa-table--docs col.col-manufacturer,
  .sa-table--docs col.col-model,
  .sa-table--docs col.col-pages {
    display: none;
  }
  /* Пересчёт долей: 100% разделено между 5 видимыми колонками */
  .sa-table--list col.col-title,
  .sa-table--docs col.col-title        { width: 50%; }
  .sa-table--list col.col-doctype,
  .sa-table--docs col.col-doctype      { width: 12%; }
  .sa-table--list col.col-entity-type,
  .sa-table--docs col.col-entity-type  { width: 16%; }
  .sa-table--list col.col-status,
  .sa-table--docs col.col-status       { width: 13%; }
  .sa-table--list col.col-pub,
  .sa-table--docs col.col-pub          { width: 9%; }
  /* Sum: 50+12+16+13+9 = 100% (tablet) */
}

/* ── 48.13 Sortable headers (Издано ↓) ─────────────────────────────────── */
.sa-th-num, .sa-num { text-align: left; }
.sa-th-sort-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 44px;
}
.sa-th-sort-link:hover { color: var(--sa-primary); }
.sa-th-arrow { color: #adb5bd; font-size: 0.85em; }

/* ── 48.14 MOBILE CARD VIEW (≤480px) — CSS-трансформация tr → карточка ───
   Ключевая инновация: тот же HTML, на мобильном превращается в карточки
   через data-label атрибуты на <td>. Один DOM, два визуальных режима.   */
@media (max-width: 480px) {

  /* Скрываем thead — заголовки переезжают в data-label */
  .sa-table--list thead,
  .sa-table--docs thead {
    display: none;
  }

  /* Скрываем фиксированные ширины колонок — карточная вёрстка */
  .sa-table--list,
  .sa-table--docs {
    table-layout: auto;
    display: block;
    min-width: 0;                                       /* override §07 .sa-table { min-width: 600px } */
    width: 100%;
  }
  .sa-table--list colgroup,
  .sa-table--docs colgroup,
  .sa-table--list col,
  .sa-table--docs col {
    display: none;
  }
  .sa-table--list tbody,
  .sa-table--docs tbody { display: block; }

  /* TR → карточка */
  .sa-table--list tbody tr,
  .sa-table--docs tbody tr {
    display: block;
    height: auto;
    background: #fff;
    border: 1px solid var(--sa-border-color, #dee2e6);
    border-radius: 10px;
    padding: 14px 14px 10px;
    margin-bottom: 10px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .sa-table--list tbody tr:hover,
  .sa-table--docs tbody tr:hover {
    background: #fafbff;
    border-color: var(--sa-primary);
    box-shadow: 0 2px 6px rgba(59,130,246,0.10);
  }

  /* TD → строка карточки с label слева, значением справа */
  .sa-table--list td,
  .sa-table--docs td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: none;
    padding: 5px 0;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    min-height: 24px;
  }
  .sa-table--list td::before,
  .sa-table--docs td::before {
    content: attr(data-label);
    color: var(--sa-text-muted, #6c757d);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }

  /* Значение справа — обрезка ellipsis */
  .sa-table--list td > *:not(.sa-table-row-link),
  .sa-table--docs td > *:not(.sa-table-row-link) {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    max-width: 70%;
  }

  /* Title — особая обработка: крупно, поверх карточки, без label */
  .sa-table--list td.cell-title,
  .sa-table--docs td.cell-title {
    display: block;
    padding: 0 0 10px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--sa-border-color, #dee2e6);
    font-size: 0.95rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sa-table--list td.cell-title::before,
  .sa-table--docs td.cell-title::before {
    display: none;
  }
  .sa-table--list td.cell-title > *:not(.sa-table-row-link),
  .sa-table--docs td.cell-title > *:not(.sa-table-row-link) {
    max-width: none;
    text-align: left;
  }
  .sa-table--list td.cell-title .sa-doc-title-text,
  .sa-table--docs td.cell-title .sa-doc-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 50px);
    display: inline-block;
    vertical-align: middle;
  }

  /* Row-link перекрывает всю карточку */
  .sa-table-row-link {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 10px;
  }
  .sa-table--list td,
  .sa-table--docs td { position: relative; z-index: 1; }

  /* Скрытые на tablet остаются скрытыми на mobile — слишком мелкие детали */
  /* (если нужно — раскомментировать для показа в карточке)
  .sa-table--list .td-hide-tablet,
  .sa-table--docs .td-hide-tablet { display: flex !important; }
  */
}

/* ── 48.15 Empty state — AI-driven ──────────────────────────────────────── */
.sa-table-empty {
  text-align: center;
  padding: 2.5rem 1rem;
}
.sa-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
}
.sa-empty-icon {
  width: 48px;
  height: 48px;
  stroke: var(--sa-text-subtle, #adb5bd);
  fill: none;
}
.sa-empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sa-text, #212529);
  margin: 0;
}
.sa-empty-text {
  font-size: 0.875rem;
  color: var(--sa-text-muted, #6c757d);
  margin: 0;
  line-height: 1.45;
}
.sa-empty-state .sa-ai-reco--compact {
  margin: 4px 0;
  font-size: 0.8125rem;
}
.sa-empty-state .sa-ai-reco--compact .sa-ai-reco__icon {
  width: 18px;
  height: 18px;
  font-size: 0.75rem;
}

/* ── 48.16 Print friendly — таблица остаётся таблицей при печати ─────── */
@media print {
  .sa-filters,
  .sa-filters-mobile,
  .sa-page-actions,
  .sa-ai-reco--list,
  .sa-list-meta,
  .sa-pagination-bar { display: none !important; }
  .sa-table--list, .sa-table--docs { table-layout: auto !important; display: table !important; }
  .sa-table--list thead, .sa-table--docs thead { display: table-header-group !important; }
  .sa-table--list tbody, .sa-table--docs tbody { display: table-row-group !important; }
  .sa-table--list tr, .sa-table--docs tr { display: table-row !important; border: none !important; box-shadow: none !important; }
  .sa-table--list td, .sa-table--docs td { display: table-cell !important; padding: 4px 8px !important; }
  .sa-table--list td::before, .sa-table--docs td::before { display: none !important; }
}

/* ── 48.17 Main width — защита от потенциального наследия max-width ─────
   ────────────────────────────────────────────────────────────────────────
   ВАЖНО: НЕ задавать `width: 100%` — sidebar 220px фиксирован и .sa-main
   имеет margin-left: var(--sa-sidebar-width). Default `width: auto` сам
   корректно вычисляет: viewport − margin-left − padding. Если задать
   width: 100% — .sa-main выезжает за экран на 220px вправо.
   Ограничиваемся только защитой от max-width-наследия. */
.sa-main:has(.sa-stats-row--list),
.sa-main:has(.sa-table--list),
.sa-main:has(#sa-pe-root) {
  max-width: none;
}
/* ── 48.18 Client Initials Avatar (Sprint 3.20) ────────────────────────────
   Используется в колонке "Клиент" на платформенном уровне (is_platform).
   Аналог navbar AD-аватара: круг 28px с инициалами клиента.
   Инициалы вычисляются через template filter sa_initials (kb/templatetags).
   Полное имя — в title= для hover-tooltip.
   Цвет фона деривируется из имени для стабильной визуальной идентификации. */
.sa-client-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(135deg, #475569, #334155);    /* нейтральный slate по умолчанию */
  user-select: none;
  flex-shrink: 0;
  cursor: default;
  text-transform: uppercase;
  /* На карточном виде (mobile) — те же 28px, обрезается из общего right-align */
}
.sa-client-initials:hover {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
/* Mobile card view — инициалы остаются справа в строке data-label */
@media (max-width: 480px) {
  .sa-table--list td[data-label="Клиент"] .sa-client-initials,
  .sa-table--docs td[data-label="Клиент"] .sa-client-initials {
    margin-left: auto;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   END §48 — Universal List Page Standard
   ════════════════════════════════════════════════════════════════════════════ */

/* подсказка под полем формы — мелкая, неброская (как sa-optional) */
.sa-form-hint { color: #adb5bd; font-size: 0.75rem; font-weight: 400; margin-top: 4px; line-height: 1.3; }

/* Статус проекта — выделенная панель вверху формы (всегда на виду, UX-практика) */
.sa-form-status-bar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.875rem 1rem; margin-bottom: 1.25rem;
  background: #f0f6ff; border: 1px solid #cfe2ff; border-radius: 8px;
}
.sa-form-status-bar .sa-label { margin: 0; white-space: nowrap; font-weight: 600; }
.sa-form-status-bar .sa-select { max-width: 280px; }

/* Список кейсов — 8 колонок по референсу (Название/Проект/Сообщ/Приоритет/Назначен/Срок/Статус/Обновлён) */
#cases-table col.col-client   { width: 60px; }
#cases-table col.col-title    { width: 22%; }
#cases-table col.col-project  { width: 16%; }
#cases-table col.col-msg      { width: 7%; }
#cases-table col.col-priority { width: 11%; }
#cases-table col.col-assigned { width: 10%; }
#cases-table col.col-due      { width: 11%; }
#cases-table col.col-status   { width: 12%; }
#cases-table col.col-updated  { width: 11%; }

/* ============================================================================
   §XX · OPS-PIPELINE-EXPLORER-01 — трассировщик пайплайна (ДЕЛЬТА portal.css) v4
   Поток = ФАЗЫ лайфцикла. L1–L7 только в «Сборке промпта». Рельс = цвет риска.
   Источник — авто (без ручного селектора). Добавить в КОНЕЦ portal.css.
   ============================================================================ */
.sa-pe-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .85rem; }
.sa-pe-picklbl { font-size: .72rem; font-weight: 600; color: #6c757d; margin-right: .25rem; }

.sa-pe-flow   { position: relative; }
.sa-pe-stage  { display: flex; align-items: stretch; min-height: 42px; }
.sa-pe-stage--phase { min-height: 26px; }
.sa-pe-rlbl   { flex: 0 0 108px; width: 108px; align-self: center; text-align: right;
                padding-right: .4rem; font-size: .72rem; color: #6c757d; line-height: 1.2; }
.sa-pe-rail   { position: relative; flex: 0 0 22px; width: 22px; }
.sa-pe-rail::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0;
                width: 2px; background: var(--sa-pe-accent, #c9c9c9); opacity: .45; }
.sa-pe-stage--first .sa-pe-rail::before { top: 50%; }
.sa-pe-stage--last  .sa-pe-rail::before { bottom: 50%; }
.sa-pe-dot    { position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
                width: 12px; height: 12px; border-radius: 50%;
                background: var(--sa-pe-accent, #c9c9c9); box-shadow: 0 0 0 3px #fff; }
.sa-pe-dot--phase { width: 10px; height: 10px; background: #fff;
                border: 2px solid var(--sa-pe-accent, #c9c9c9); box-shadow: none; }
.sa-pe-body   { flex: 1; min-width: 0; align-self: center; padding: .3rem 0; }
.sa-pe-phase  { font-size: .66rem; letter-spacing: .07em; text-transform: uppercase;
                font-weight: 600; color: #6c757d; }
.sa-pe-cap    { font-size: .68rem; color: #6c757d; opacity: .85; margin-top: .25rem; line-height: 1.35; }
.sa-pe-flow .sa-pills { margin: 0; }
.sa-pe-flow .sa-pills-item:not(.sa-pills-item--active) { opacity: .42; }

.sa-pe-axis   { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.sa-pe-acard  { border: 1px solid var(--sa-border-color); border-radius: .4rem;
                background: var(--sa-surface); padding: .35rem .5rem; min-width: 0; }
.sa-pe-acard--drv { border-color: var(--sa-pe-accent, var(--sa-primary)); }
.sa-pe-acard .sa-pe-atop { font-size: .7rem; color: #6c757d;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-pe-acard .sa-pe-aval { font-size: .78rem; font-weight: 600;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-pe-acard--drv .sa-pe-aval { color: var(--sa-pe-accent, var(--sa-primary)); }

.sa-pe-node   { border: 1px solid var(--sa-border-color); border-radius: .4rem;
                background: var(--sa-surface); padding: .35rem .65rem; font-size: .78rem; }
.sa-pe-node--strict { border-color: var(--sa-danger); background: var(--sa-danger-bg, #fff0f0); }
.sa-pe-node--info { color: #6c757d; }
.sa-pe-alert  { border: 1px solid #ffe69c; background: #fff3cd; color: #664d03;
                border-radius: .4rem; padding: .5rem .75rem; font-size: .78rem; margin: .5rem 0; }
.sa-pe-alert--review { border-color: #bce0fd; background: #e7f3ff; color: #0a4a7a; }
.sa-pe-warn { color: var(--sa-danger); font-weight: 600; }
.sa-pe-strip  { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
                margin-top: .85rem; padding: .6rem .75rem; border: 1px solid var(--sa-border-color);
                border-radius: .5rem; border-left: 3px solid var(--sa-pe-accent, var(--sa-border-color)); }
.sa-pe-meta   { font-size: .7rem; color: #6c757d; margin-top: .6rem; }

/* LK08-EXPLAIN-LINK-01 scenario drill */
.sa-chat-meta-topo { margin-left:.25rem; }
.sa-chat-scenario-link { margin-left:.25rem; text-decoration:none; cursor:pointer; }
.sa-chat-scenario-link:hover { text-decoration:underline; }

/* ── LK-12 Настройки · Профиль (settings.html) ─────────────────────── */
.sa-profile-head     { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.sa-profile-avatar   { display: flex; align-items: center; justify-content: center; flex: none;
                       width: 56px; height: 56px; border-radius: 50%;
                       background: var(--sa-primary); color: #fff; font-weight: 600; font-size: 1.125rem; }
.sa-profile-org      { color: var(--sa-text-muted); margin: 2px 0 6px; }

.sa-input--ro        { background: var(--sa-surface); color: var(--sa-text-muted); }
.sa-input--ro-row    { display: flex; align-items: center; justify-content: space-between; }

.sa-field--w-sm      { width: 220px; }
.sa-field--w-md      { width: 340px; }

.sa-interface-row    { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* ── §49 Credits · Earn Groups (S2 «Как зарабатывать») ───────────────────
   Архитектура C: данные хранят код группы (documents/uniqueness/demand);
   сопоставление код→цвет живёт ЗДЕСЬ. Карточка наследует .sa-rec-card.
   Новая группа = +1 цветовой блок здесь, конфиг/хелпер/шаблон не трогаются. */
.sa-earn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sa-gap); align-items: start; }
.sa-earn-head { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.8125rem; margin-bottom: 0.5rem; }
.sa-earn-head svg { width: 16px; height: 16px; flex: 0 0 16px; }
.sa-earn-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-top: 0.625rem; }
.sa-earn-amount { font-weight: 600; font-size: 0.8125rem; white-space: nowrap; }

.sa-earn-card--documents  { border-left-color: var(--sa-success); background: #f8fffa; }
.sa-earn-card--documents  .sa-earn-head svg,
.sa-earn-card--documents  .sa-earn-amount { color: var(--sa-success); }
.sa-earn-card--uniqueness { border-left-color: var(--sa-primary); background: #f6f9ff; }
.sa-earn-card--uniqueness .sa-earn-head svg,
.sa-earn-card--uniqueness .sa-earn-amount { color: var(--sa-primary); }
.sa-earn-card--demand     { border-left-color: var(--sa-warning); background: #fffdf0; }
.sa-earn-card--demand     .sa-earn-head svg,
.sa-earn-card--demand     .sa-earn-amount { color: var(--sa-warning); }

/* ── §50 Credits · Spend Cards (S3 «Как тратить») ────────────────────────
   Арх. C: данные хранят code карты (subscription/addon); код→цвет ЗДЕСЬ.
   Переиспользует: sa-badge--primary/--warning (бейдж), sa-alert-info/-warning
   (блок «Пример»), sa-text-title/sa-muted-sm/sa-stat-label/
   sa-project-check-divider (тексты/разделитель). Новых: грид+карта+ико+чек. */
.sa-spend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: var(--sa-gap); align-items: start; }
.sa-spend-card { border: 1px solid var(--sa-border-color); border-radius: var(--sa-border-radius); border-top: 4px solid var(--sa-border-color); background: #fff; padding: 1.25rem; box-shadow: var(--sa-card-shadow); }
.sa-spend-head { display: flex; align-items: flex-start; gap: 0.75rem; }
.sa-spend-ico { width: 40px; height: 40px; border-radius: var(--sa-border-radius); display: flex; align-items: center; justify-content: center; flex: 0 0 40px; }
.sa-spend-ico svg { width: 20px; height: 20px; }
.sa-spend-check { position: relative; padding-left: 1.375rem; font-size: 0.8rem; color: var(--sa-text); margin: 0.375rem 0; line-height: 1.4; }
.sa-spend-check::before { content: '\2713'; position: absolute; left: 0; font-weight: 600; }
.sa-spend-card--subscription { border-top-color: var(--sa-primary); }
.sa-spend-card--subscription .sa-spend-ico { background: #f6f9ff; color: var(--sa-primary); }
.sa-spend-card--subscription .sa-spend-check::before { color: var(--sa-primary); }
.sa-spend-card--addon { border-top-color: var(--sa-warning); }
.sa-spend-card--addon .sa-spend-ico { background: #fffbeb; color: var(--sa-warning); }
.sa-spend-card--addon .sa-spend-check::before { color: var(--sa-warning); }

/* §50 · S3 spacing utilities (вынос из inline, манифест §6) */
.sa-spend-intro { margin-bottom: var(--sa-gap); }
.sa-spend-example { margin-top: 0.875rem; margin-bottom: 0; }
.sa-spend-example-label { margin-top: 0; }

/* ==========================================================================
   §51. Table Column Resizing & Universal Truncation (ADR-TABLE-RESIZE-01)
   Тикет: UI-TABLE-RESIZE-01 · Канон: hld_table_column_resizing.md v1.1 §5
   4 класса апрувлены PO 20.08 (CLASS-FREEZE-01): sa-table--resizable,
   sa-th-resizer, sa-table-cell--atomic, sa-table-resizing-active.
   max-width:0 — scoped-исключение §15.3a (только внутри --resizable, §24).
   ========================================================================== */

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

.sa-table--resizable th {
  position: relative;
  user-select: none;
  overflow: visible;
}

/* Глобальное многоточие для текстовых ячеек (scoped, §24 п.2) */
.sa-table--resizable tbody td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 0;
  vertical-align: middle;
}

/* Атомарные поля (§15.2a): без ellipsis; overflow:hidden (НЕ visible —
   в table-layout:fixed visible наезжает на соседа). Защита от усечения —
   min_widths реестра, клампятся клиентом и сервером. */
.sa-table--resizable tbody td.sa-table-cell--atomic {
  overflow: hidden;
  text-overflow: clip;
  max-width: none;
}

/* Ручка ресайза в th */
.sa-th-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 10;
  touch-action: none;
}

.sa-th-resizer::after {
  content: '';
  position: absolute;
  top: 20%;
  bottom: 20%;
  left: 3px;
  width: 1px;
  background: var(--sa-border-color);
  transition: background 0.15s ease, width 0.15s ease;
}

.sa-th-resizer:hover::after,
.sa-th-resizer--active::after {
  background: var(--sa-primary);
  width: 2px;
}

/* Глобальное состояние во время драга */
body.sa-table-resizing-active {
  cursor: col-resize !important;
  user-select: none !important;
}

body.sa-table-resizing-active * {
  user-select: none !important;
  pointer-events: none !important;
}

body.sa-table-resizing-active .sa-table--resizable th,
body.sa-table-resizing-active .sa-th-resizer {
  pointer-events: auto !important;
}

/* Вне desktop ресайзер скрыт: ≤1023px — скролл/сжатие, ≤480px card-view (§18.6);
   на мобиле живое правило table-layout:auto !important (§48) главнее fixed. */
@media (max-width: 1023px) {
  .sa-th-resizer { display: none; }
}

/* §51.1 (addendum UI-TABLE-RESIZE-01): card-view ≤480px (§18.6) переводит td
   в flex — ellipsis-механика fixed-layout не нужна, max-width:0 ломал бы
   карточки. Новых классов нет (CLASS-FREEZE не затронут). */
@media (max-width: 480px) {
  .sa-table--resizable tbody td { max-width: none; }
}