/* ============================================================================
 * Грид · Граждане и отделы — Стили модального окна досье гражданина (Modal CSS)
 * Модуль v3.2 · Соответствует Закону Модульности (Статья XIX: < 800 строк)
 * ============================================================================ */

html { scrollbar-gutter: stable; }
body.modal-open { overflow: hidden !important; touch-action: none; }

/* ---------- 1. Подложка (Backdrop) и Карточка окна ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--canvas-alpha-80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-smooth) var(--ease-spring);
  overscroll-behavior: contain;
  overflow: hidden;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }

.modal-card,
.modal-dossier {
  background: #080c16;
  background: var(--bg-card, #080c16);
  border: 1px solid var(--violet-alpha-40);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 900px;
  height: 86vh;
  min-height: 640px;
  max-height: 890px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 24px 64px var(--black-alpha-80), 0 0 45px var(--violet-alpha-20);
  transform: scale(0.96) translateY(12px);
  opacity: 0;
  transition: transform var(--dur-smooth) var(--ease-spring), opacity var(--dur-smooth) ease-out;
  will-change: transform, opacity;
}
.modal-backdrop.open .modal-card { transform: scale(1) translateY(0); opacity: 1; }

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--card2);
  border: 1px solid var(--line);
  color: var(--tx2);
  display: grid;
  place-items: center;
  font-size: var(--fs-h2);
  cursor: pointer;
  z-index: 10;
  transition: background var(--dur-normal), color var(--dur-normal), border-color var(--dur-normal);
}
.modal-close:hover { background: var(--card-hover); color: var(--white); border-color: var(--violet-alpha-50); }

.modal-body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-track { background: var(--slate-900-alpha-60); border-radius: var(--r-md); }
.modal-body::-webkit-scrollbar-thumb { background: var(--violet-alpha-40); border-radius: var(--r-md); }
.modal-body::-webkit-scrollbar-thumb:hover { background: var(--violet-alpha-70); }

/* ---------- 2. Шапка модального окна (Top Grid & Info) ---------- */
.modal-top-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-5);
  align-items: start;
  flex-shrink: 0;
}
.modal-face-box {
  width: 220px;
  height: 220px;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-deep-canvas);
  border: 2px solid var(--line);
  position: relative;
  box-shadow: 0 8px 24px var(--black-alpha-50);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  transition: transform var(--dur-normal) var(--ease-spring), border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease;
}
.modal-face-box:hover {
  border-color: var(--violet);
  box-shadow: 0 12px 32px var(--black-alpha-60), 0 0 20px var(--violet-alpha-30);
}
.modal-face-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-smooth) var(--ease-spring); }
.modal-face-box:hover .modal-face-img { transform: scale(1.04); }
.face-zoom-badge {
  position: absolute;
  bottom: var(--sp-2);
  right: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-0-5) var(--sp-1-5);
  border-radius: var(--r-sm);
  background: var(--slate-900-alpha-90);
  border: 1px solid var(--white-alpha-15);
  color: var(--tx2);
  font-size: var(--fs-xs);
  font-weight: 600;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity var(--dur-fast) ease, color var(--dur-fast) ease, background var(--dur-fast) ease;
  z-index: 4;
}
.modal-face-box:hover .face-zoom-badge {
  opacity: 1;
  color: var(--white);
  background: var(--violet-alpha-40);
  border-color: var(--violet);
}
.modal-face-box .avatar-initials-circle { width: 90px; height: 90px; font-size: var(--fs-4xl); border-width: 3px; }
.modal-face-box .face-fallback-id { font-size: var(--fs-body); }

.modal-header-info { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.modal-title-row { display: flex; align-items: baseline; gap: var(--sp-2-5); flex-wrap: wrap; }
.modal-name { font-size: var(--fs-3xl); font-weight: 800; color: var(--tx-warm-title); line-height: 1.2; }
.modal-id { font-size: var(--fs-sub); color: var(--tx3); font-family: var(--mono); }
.modal-quick-actions { display: inline-flex; align-items: center; gap: var(--sp-1-5); margin-left: auto; flex-wrap: wrap; }
.modal-tags-row {
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.modal-tags-row .badge-role,
.modal-tags-row .badge-status,
.modal-tags-row .badge-dept,
.modal-tags-row .badge-score,
.modal-tags-row .rank-badge,
.modal-tags-row .status-pill {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  white-space: nowrap !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.modal-tags-row .badge-role { padding: var(--sp-1) var(--sp-2-5); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)); background: var(--card2, rgba(255, 255, 255, 0.04)); color: var(--tx); gap: var(--sp-1-5); }
.modal-tags-row .badge-dept { padding: var(--sp-1) var(--sp-2-5); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12)); background: var(--card2, rgba(255, 255, 255, 0.04)); color: var(--tx2); gap: var(--sp-1-5); }
.modal-tags-row .badge-status { padding: var(--sp-1) var(--sp-2-5); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 700; gap: var(--sp-1-5); }
.modal-tags-row .badge-score { padding: var(--sp-1) var(--sp-2-5); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 700; font-family: var(--mono); background: var(--violet-alpha-15, rgba(124, 92, 255, 0.15)); border: 1px solid var(--violet-alpha-30, rgba(124, 92, 255, 0.3)); color: var(--violet-light, #c4b5fd); gap: var(--sp-1); }

/* Бейджи рангов */
.modal-tags-row .rank-badge, .lineage-mentor-card .rank-badge, .rank-badge {
  display: inline-flex;
  position: static !important;
  top: auto !important;
  left: auto !important;
  max-width: none !important;
  align-items: center;
  gap: var(--sp-1-5);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: 0.4px;
}
.modal-tags-row .rank-badge.celestial, .rank-badge.celestial {
  background: linear-gradient(135deg, var(--gold-alpha-20) 0%, var(--amber-alpha-30) 100%);
  color: var(--rank-celestial-border); border: 1px solid var(--rank-celestial);
  box-shadow: 0 0 16px var(--gold-alpha-50), 0 0 4px var(--rank-celestial) !important;
  text-shadow: 0 0 8px var(--gold-alpha-60);
}
.modal-tags-row .rank-badge.senior, .rank-badge.senior {
  background: linear-gradient(135deg, var(--violet-alpha-20) 0%, var(--indigo-alpha-30) 100%);
  color: var(--violet-light); border: 1px solid var(--violet);
  box-shadow: 0 0 16px var(--violet-alpha-50), 0 0 4px var(--violet) !important;
  text-shadow: 0 0 8px var(--violet-alpha-60);
}
.modal-tags-row .rank-badge.middle, .rank-badge.middle {
  background: linear-gradient(135deg, var(--blue-alpha-20) 0%, var(--blue-alpha-30) 100%);
  color: var(--rank-middle-border); border: 1px solid var(--blue);
  box-shadow: 0 0 14px var(--blue-alpha-40), 0 0 4px var(--blue) !important;
}
.modal-tags-row .rank-badge.junior, .rank-badge.junior {
  background: linear-gradient(135deg, var(--green-alpha-20) 0%, var(--emerald-alpha-30) 100%);
  color: var(--tx-pastel-green); border: 1px solid var(--green);
  box-shadow: 0 0 12px var(--green-alpha-40), 0 0 3px var(--green) !important;
}
.modal-tags-row .rank-badge.recruit, .rank-badge.recruit {
  background: linear-gradient(135deg, var(--slate-400-alpha-20) 0%, var(--slate-400-alpha-30) 100%);
  color: var(--tx2); border: 1px solid var(--text-muted);
  box-shadow: 0 0 8px var(--slate-400-alpha-30) !important;
}

/* Прогресс квалификации */
.modal-rank-section { gap: var(--sp-1-5); }
.modal-rank-head { display: flex; justify-content: space-between; align-items: center; }
.modal-rank-bar { height: 6px; background: var(--white-alpha-08); border-radius: var(--r-xs); overflow: hidden; }
.modal-rank-sub { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--tx3); margin-top: var(--sp-0-5); }

/* Модели */
.modal-models-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin-top: var(--sp-1); }
.modal-model-box { padding: var(--sp-2) var(--sp-3); gap: var(--sp-1); }
.modal-model-val { font-size: var(--fs-sub); color: var(--violet-light); font-weight: 600; }
.modal-model-fallback { font-size: var(--fs-sub); color: var(--tx3); }
.modal-strike-badge { font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-2-5); margin-top: var(--sp-1); }

/* ---------- 3. Секции контента (Detail Section) ---------- */
.detail-section {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-3-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.detail-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx2);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.backstory-text { font-size: var(--fs-body); line-height: 1.625; color: var(--tx); }
.doc-markdown { font-size: var(--fs-body); line-height: 1.625; color: var(--tx); word-break: break-word; }
.doc-markdown .doc-h1 { font-size: var(--fs-xl); font-weight: 800; color: var(--tx); margin: var(--sp-3-5) 0 var(--sp-2); border-bottom: 1px solid var(--line); padding-bottom: var(--sp-1-5); letter-spacing: -0.2px; }
.doc-markdown .doc-h2 { font-size: var(--fs-lg); font-weight: 700; color: var(--violet-light); margin: var(--sp-3) 0 var(--sp-1-5); border-bottom: 1px dashed var(--white-alpha-08); padding-bottom: var(--sp-1); }
.doc-markdown .doc-h3 { font-size: var(--fs-base); font-weight: 600; color: var(--tx); margin: var(--sp-2-5) 0 var(--sp-1); }
.doc-markdown .doc-h4, .doc-markdown .doc-h5, .doc-markdown .doc-h6 { font-size: var(--fs-sm); font-weight: 600; color: var(--tx2); margin: var(--sp-2) 0 var(--sp-0-5); text-transform: uppercase; letter-spacing: 0.5px; }
.doc-markdown .doc-p { margin: var(--sp-1-5) 0; color: var(--tx); line-height: 1.6; }
.doc-markdown .doc-list { margin: var(--sp-1-5) 0; padding-left: var(--sp-5); color: var(--tx); line-height: 1.6; }
.doc-markdown .doc-list li { margin-bottom: var(--sp-1); }
.doc-markdown .doc-list-num { padding-left: var(--sp-5); }
.doc-markdown .doc-task-item { list-style-type: none; margin-left: calc(-1 * var(--sp-3)); display: flex; align-items: flex-start; gap: var(--sp-2); }
.doc-markdown .doc-checkbox { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: var(--r-xs); border: 1px solid var(--line); background: var(--card2); font-size: var(--fs-2xs); flex-shrink: 0; margin-top: var(--sp-0-5); color: transparent; }
.doc-markdown .doc-checkbox.checked { background: var(--violet-alpha-20); border-color: var(--violet); color: var(--violet-light); font-weight: bold; }
.doc-markdown .doc-quote { border-left: 3px solid var(--violet); background: var(--violet-alpha-08); padding: var(--sp-2) var(--sp-3-5); border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: var(--sp-2-5) 0; color: var(--tx2); font-style: italic; }
.doc-markdown .doc-quote p { margin: var(--sp-0-5) 0; }
.doc-markdown .doc-alert { font-style: normal; border-radius: var(--r-sm); }
.doc-markdown .doc-alert .doc-alert-title { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: var(--sp-1); display: flex; align-items: center; gap: var(--sp-1-5); }
.doc-markdown .doc-alert-note { border-left-color: var(--blue); background: var(--blue-alpha-08); } .doc-markdown .doc-alert-note .doc-alert-title { color: var(--blue-light); }
.doc-markdown .doc-alert-tip { border-left-color: var(--emerald-alpha-80); background: var(--emerald-alpha-08); } .doc-markdown .doc-alert-tip .doc-alert-title { color: var(--green-light); }
.doc-markdown .doc-alert-important { border-left-color: var(--violet); background: var(--violet-alpha-08); } .doc-markdown .doc-alert-important .doc-alert-title { color: var(--violet-light); }
.doc-markdown .doc-alert-warning { border-left-color: var(--amber); background: var(--amber-alpha-08); } .doc-markdown .doc-alert-warning .doc-alert-title { color: var(--amber-light); }
.doc-markdown .doc-alert-caution { border-left-color: var(--red); background: var(--red-alpha-08); } .doc-markdown .doc-alert-caution .doc-alert-title { color: var(--red-light); }
.doc-markdown .doc-rule { border: none; border-top: 1px solid var(--line); margin: var(--sp-3) 0; }
.doc-markdown .doc-inline-code { font-family: var(--mono); font-size: var(--fs-xs); background: var(--slate-900-alpha-80); color: var(--violet-light); padding: var(--sp-0-5) var(--sp-1-5); border-radius: var(--r-xs); border: 1px solid var(--violet-alpha-20); white-space: nowrap; }
.doc-markdown .doc-code-block { background: var(--bg-surface-midnight); border: 1px solid var(--line); border-radius: var(--r-md); margin: var(--sp-2-5) 0; overflow: hidden; box-shadow: 0 4px 16px var(--slate-950-alpha-30); }
.doc-markdown .doc-code-header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-1-5) var(--sp-3); background: var(--card2); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: var(--fs-2xs); color: var(--tx3); text-transform: uppercase; }
.doc-markdown .doc-code-copy { background: transparent; border: 1px solid var(--line); border-radius: var(--r-xs); color: var(--tx2); padding: var(--sp-0-5) var(--sp-2); font-size: var(--fs-2xs); cursor: pointer; transition: all var(--t-fast); display: inline-flex; align-items: center; gap: var(--sp-1); }
.doc-markdown .doc-code-copy:hover { background: var(--white-alpha-08); color: var(--white); border-color: var(--violet-alpha-40); }
.doc-markdown .doc-code { margin: 0; padding: var(--sp-2-5) var(--sp-3-5); font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.55; color: var(--tx-pastel-green); overflow-x: auto; scrollbar-width: thin; }
.doc-markdown .doc-table-wrap { overflow-x: auto; margin: var(--sp-3) 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); box-shadow: 0 2px 8px var(--slate-950-alpha-20); scrollbar-width: thin; }
.doc-markdown .doc-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.doc-markdown .doc-table th { background: var(--bg-surface-midnight); padding: var(--sp-2) var(--sp-3); text-align: left; font-weight: 700; color: var(--violet-light); border-bottom: 1px solid var(--line); font-size: var(--fs-xs); letter-spacing: 0.3px; white-space: nowrap; }
.doc-markdown .doc-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--white-alpha-04); color: var(--tx); vertical-align: top; }
.doc-markdown .doc-table tr:hover td { background: var(--white-alpha-04); }
.doc-markdown .doc-table tr:last-child td { border-bottom: none; }
.doc-markdown .doc-link { color: var(--blue-light); text-decoration: underline; text-underline-offset: 2px; }

/* Режим RAW */
.raw-md-container {
  background: var(--bg-surface-midnight);
  border: 1px solid var(--violet-alpha-30);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: var(--sp-1-5);
  box-shadow: 0 4px 16px var(--slate-950-alpha-40);
}
.raw-md-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-1-5) var(--sp-3);
  background: var(--card2);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--tx3);
}
.raw-md-view {
  padding: var(--sp-3) var(--sp-3-5);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--tx-pastel-green);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
  margin: 0;
}
.btn-raw-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  font-weight: 600;
  transition: all var(--t-fast);
}
.btn-raw-toggle.active {
  background: var(--violet-alpha-30) !important;
  border-color: var(--violet) !important;
  color: var(--white) !important;
  box-shadow: 0 0 10px var(--violet-alpha-30) !important;
}

/* Карточка последнего наряда с поддержкой Markdown */
.last-work-markdown {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: var(--sp-1);
}
.last-work-markdown .doc-h1, .last-work-markdown .doc-h2 {
  font-size: var(--fs-base);
  margin: var(--sp-1-5) 0 var(--sp-1);
}

.weakness-box {
  background: var(--amber-alpha-08);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sub);
  color: var(--rank-celestial-border);
  margin-top: var(--sp-1);
}

.modal-two-col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3-5); }

/* ---------- 4. Вкладки (Tabs Navigation & Panes) ---------- */
.modal-tabs-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-2-5);
  margin-top: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: thin;
  flex-shrink: 0;
  min-height: 42px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.modal-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--tx2);
  cursor: pointer;
  transition: all var(--dur-normal) var(--ease-spring);
  white-space: nowrap;
  user-select: none;
  position: relative;
  flex-shrink: 0;
  height: 36px;
  box-sizing: border-box;
}

.modal-tab-btn:hover {
  background: var(--bg-surface-indigo);
  color: var(--tx);
  border-color: var(--violet-alpha-40);
  transform: translateY(-1px);
}

.modal-tab-btn.active {
  background: linear-gradient(135deg, var(--violet-alpha-30) 0%, var(--indigo-alpha-20) 100%);
  border-color: var(--violet);
  color: var(--white);
  font-weight: 700;
  box-shadow: 0 0 16px var(--violet-alpha-40), inset 0 0 8px var(--violet-alpha-15);
  transform: translateY(0);
}

.modal-tab-btn .tab-badge {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--slate-900-alpha-70);
  border-radius: var(--r-10);
  padding: var(--sp-0-5) var(--sp-1-5);
  color: var(--violet-light);
  border: 1px solid var(--violet-alpha-20);
  transition: all var(--dur-normal) ease;
  line-height: 1;
}

.modal-tab-btn.active .tab-badge {
  background: var(--violet);
  color: var(--white);
  border-color: var(--violet-light);
  box-shadow: 0 0 8px var(--violet-alpha-60);
}

.gold-tab-badge {
  background: var(--amber-alpha-20) !important;
  color: var(--rank-celestial) !important;
  border: 1px solid var(--gold-alpha-40) !important;
}

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

.modal-tab-pane {
  display: none;
  flex-direction: column;
  gap: var(--sp-3-5);
  min-height: 360px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.modal-tab-pane.active {
  display: flex;
  animation: tabPaneFade var(--dur-normal) var(--ease-spring) forwards;
}

/* ---------- 5. Таблицы (Tasks & Telemetry Tables) ---------- */
.modal-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-10);
  background: var(--canvas-alpha-70);
  box-shadow: inset 0 0 0 1px var(--white-alpha-04), inset 0 1px 3px var(--black-alpha-40);
  max-width: 100%;
}

.modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  table-layout: auto;
}

.modal-table th {
  text-align: left;
  padding: var(--sp-2-5) var(--sp-3);
  background: var(--bg-surface-midnight);
  color: var(--line);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 2px solid var(--violet-alpha-30);
  font-family: var(--sans);
  white-space: nowrap;
}

.modal-table td {
  padding: var(--sp-2-5) var(--sp-3);
  border-bottom: 1px solid var(--white-alpha-04);
  color: var(--tx);
  vertical-align: middle;
}

.modal-table tbody tr { transition: background var(--dur-fast) ease; }
.modal-table tbody tr:hover { background: var(--violet-alpha-08); }
.modal-table tbody tr:last-child td { border-bottom: none; }

.modal-table .task-title {
  font-weight: 600;
  color: var(--tx);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 260px;
  word-break: break-word;
}

.modal-table .task-pkg {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--violet);
  background: var(--violet-alpha-12);
  border: 1px solid var(--violet-alpha-20);
  padding: var(--sp-0-5) var(--sp-1-5);
  border-radius: var(--r-xs);
  display: inline-block;
  white-space: nowrap;
}

/* Теги статусов выполнения задач (PASS / FAIL / IN_PROGRESS / IDLE) */
.task-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-family: var(--mono);
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.task-tag .tag-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-circle);
  flex-shrink: 0;
}

.task-tag.tag-pass {
  background: var(--green-alpha-15);
  color: var(--green-light);
  border: 1px solid var(--green-alpha-40);
  box-shadow: 0 0 10px var(--green-alpha-15);
}
.task-tag.tag-pass .tag-dot {
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}

.task-tag.tag-running {
  background: var(--amber-alpha-15);
  color: var(--rank-celestial);
  border: 1px solid var(--amber-alpha-40);
  box-shadow: 0 0 12px var(--amber-alpha-20);
}
.task-tag.tag-running .tag-dot {
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: pulseDot var(--dur-pulse) infinite ease-in-out;
}

.task-tag.tag-fail { background: var(--red-alpha-15); color: var(--red-light); border: 1px solid var(--red-alpha-40); box-shadow: 0 0 10px var(--red-alpha-15); }
.task-tag.tag-fail .tag-dot { background: var(--red); box-shadow: 0 0 6px var(--red); }
.task-tag.tag-idle { background: var(--slate-400-alpha-15); color: var(--tx3); border: 1px solid var(--slate-400-alpha-30); }
.task-tag.tag-idle .tag-dot { background: var(--text-muted); }
@keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } }

/* Кнопки артефактов без переполнения */
.task-artifact-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  background: var(--violet-alpha-08);
  border: 1px solid var(--violet-alpha-30);
  border-radius: var(--r-sm);
  padding: var(--sp-1) var(--sp-2);
  min-height: 32px;
  box-sizing: border-box;
  color: var(--violet-light);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  cursor: pointer;
  max-width: 140px;
  transition: all var(--dur-normal) ease;
  white-space: nowrap;
  user-select: none;
}
.task-artifact-btn:hover {
  background: var(--violet-alpha-20);
  border-color: var(--violet);
  color: var(--white);
  transform: translateY(-1px);
}
.task-artifact-icon { font-size: var(--fs-sm); flex-shrink: 0; }
.task-artifact-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 6. Метрики, График XP и Кнопки ---------- */
.metrics-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2-5); }
.metric-card { background: var(--canvas-alpha-60); border: 1px solid var(--line); border-radius: var(--r-10); padding: var(--sp-2-5) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); box-shadow: inset 0 0 0 1px var(--white-alpha-04); }
.metric-card-head { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); font-weight: 600; color: var(--tx3); text-transform: uppercase; }
.metric-card-val { font-size: var(--fs-xl); font-weight: 800; font-family: var(--mono); color: var(--tx-warm-title); }
.metric-card-sub { font-size: var(--fs-xs); color: var(--tx2); }
.xp-chart-container { background: var(--canvas-alpha-60); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); box-shadow: inset 0 0 0 1px var(--white-alpha-04); }
.xp-chart-header { display: flex; justify-content: space-between; align-items: center; }
.xp-chart-title { font-size: var(--fs-sm); font-weight: 600; color: var(--tx2); text-transform: uppercase; letter-spacing: 0.6px; }
.xp-chart-score { font-size: var(--fs-body); font-weight: 700; color: var(--violet); }
.xp-chart-svg { overflow: visible; }
.chart-dot-group { cursor: pointer; transition: transform var(--dur-normal) ease; }
.chart-dot-group:hover circle { r: 6px; fill: var(--violet-light); stroke-width: 2px; }

.btn-copy-mini {
  background: var(--white-alpha-04);
  border: 1px solid var(--white-alpha-15);
  border-radius: var(--r-sm);
  color: var(--tx2);
  padding: var(--sp-1-5) var(--sp-2-5);
  min-height: 34px;
  box-sizing: border-box;
  font-size: var(--fs-sm);
  font-family: var(--mono);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1-5);
  transition: all var(--dur-normal) ease;
  user-select: none;
}
.btn-copy-mini:hover { background: var(--green-alpha-20); border-color: var(--green-alpha-50); color: var(--green-light); transform: translateY(-1px); }
.btn-live-link { text-decoration: none; background: var(--violet-alpha-15) !important; border-color: var(--violet-alpha-40) !important; color: var(--violet-light) !important; }
.btn-live-link:hover { background: var(--violet-alpha-30) !important; color: var(--white) !important; border-color: var(--violet) !important; }
.copyable-mono { cursor: pointer; border-radius: var(--r-xs); padding: var(--sp-0-5) var(--sp-1); transition: background var(--dur-normal) ease, color var(--dur-normal) ease, box-shadow var(--dur-normal) ease; position: relative; }
.copyable-mono:hover { background: var(--violet-alpha-20); color: var(--white) !important; box-shadow: 0 0 0 1px var(--violet-alpha-40); }

/* ---------- 7. Пустые состояния (Empty States) ---------- */
.modal-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sp-8) var(--sp-5); background: var(--canvas-alpha-50); border: 1px dashed var(--violet-alpha-30); border-radius: var(--r-card); gap: var(--sp-2-5); transition: border-color var(--dur-normal) ease; }
.modal-empty-state:hover { border-color: var(--violet-alpha-50); }
.modal-empty-state.mini { padding: var(--sp-6) var(--sp-4); gap: var(--sp-2); background: var(--slate-900-alpha-40); border-style: solid; border-color: var(--line); }
.empty-state-icon-glow { width: 52px; height: 52px; border-radius: var(--r-circle); display: flex; align-items: center; justify-content: center; background: var(--violet-alpha-12); border: 1px solid var(--violet-alpha-30); box-shadow: 0 0 20px var(--violet-alpha-20); }
.empty-state-icon-glow.green { background: var(--green-alpha-08); border-color: var(--green-alpha-30); box-shadow: 0 0 20px var(--green-alpha-15); }
.empty-state-icon-glow.purple { background: var(--purple-alpha-12); border-color: var(--purple-alpha-30); box-shadow: 0 0 20px var(--purple-alpha-15); }
.modal-empty-state .empty-state-icon { font-size: var(--fs-3xl); }
.modal-empty-state .empty-state-title { font-size: var(--fs-body); font-weight: 700; color: var(--tx); line-height: 1.3; }
.modal-empty-state .empty-state-desc { font-size: var(--fs-sm); color: var(--tx3); max-width: 440px; line-height: 1.5; }
.modal-empty-state .empty-state-actions { display: flex; align-items: center; gap: var(--sp-2-5); margin-top: var(--sp-1-5); flex-wrap: wrap; justify-content: center; }
.empty-status-pill { display: inline-flex; align-items: center; gap: var(--sp-1-5); font-size: var(--fs-sm); font-family: var(--mono); color: var(--green-light); background: var(--green-alpha-08); border: 1px solid var(--green-alpha-20); padding: var(--sp-1) var(--sp-2-5); border-radius: var(--r-sm); }

/* ---------- 8. Обзорные карточки модалки и шаги взросления ---------- */
.modal-overview-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2-5);
}
.strip-card {
  display: flex;
  align-items: center;
  gap: var(--sp-2-5);
  padding: var(--sp-2-5) var(--sp-3);
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--r-10);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--white-alpha-04);
  transition: all var(--dur-normal) var(--ease-spring);
  user-select: none;
}
.strip-card:hover {
  background: var(--violet-alpha-12);
  border-color: var(--violet-alpha-40);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--white-alpha-04), 0 4px 14px var(--black-alpha-30);
}
.strip-icon {
  font-size: var(--fs-2xl);
  flex-shrink: 0;
}
.strip-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0-5);
  min-width: 0;
  flex: 1;
}
.strip-label {
  font-size: var(--fs-xs);
  color: var(--tx3);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.strip-val {
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--tx);
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}
.strip-arrow {
  font-size: var(--fs-base);
  color: var(--tx3);
  transition: transform var(--dur-normal) ease, color var(--dur-normal) ease;
}
.strip-card:hover .strip-arrow {
  transform: translateX(3px);
  color: var(--violet-light);
}

.growth-next-step-box {
  display: flex;
  align-items: center;
  gap: var(--sp-2-5);
  padding: var(--sp-2) var(--sp-3);
  background: var(--violet-alpha-08);
  border: 1px dashed var(--violet-alpha-30);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--tx);
  line-height: 1.4;
}
.growth-next-step-box.reached {
  background: var(--green-alpha-08);
  border-color: var(--green-alpha-30);
  color: var(--tx-pastel-green);
}
.growth-step-icon {
  font-size: var(--fs-lg);
  flex-shrink: 0;
}

/* ---------- 9. Адаптивность модального окна ---------- */
@media (max-width: 768px) {
  .modal-backdrop { padding: var(--sp-3); }
  .modal-card { height: auto; min-height: 0; max-height: 92vh; }
  .modal-overview-strip { grid-template-columns: 1fr; }
  .modal-top-grid { grid-template-columns: 1fr; }
  .modal-face-box { width: 100%; height: 180px; margin: 0 auto; }
  .modal-two-col-grid { grid-template-columns: 1fr; }
  .metrics-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .modal-quick-actions { width: 100%; justify-content: flex-start; margin-top: var(--sp-1); }
}

@media (max-width: 480px) {
  .modal-backdrop { padding: var(--sp-2); }
  .modal-card { height: auto; min-height: 0; max-height: 94vh; border-radius: var(--r-card); }
  .modal-body { padding: var(--sp-3-5); gap: var(--sp-3-5); }
  .modal-top-grid { gap: var(--sp-3-5); flex-shrink: 0; }
  .modal-face-box { height: 160px; }
  .modal-name { font-size: var(--fs-2xl); }
  .modal-tabs-nav { min-height: 42px; padding-bottom: var(--sp-2); flex-shrink: 0; }
  .modal-tab-btn { padding: var(--sp-1-5) var(--sp-3); font-size: var(--fs-sm); height: 34px; flex-shrink: 0; }
  .metrics-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-1-5); }
  .metric-card { padding: var(--sp-2) var(--sp-2-5); }
  .metric-card-val { font-size: var(--fs-lg); }
  .modal-models-grid { grid-template-columns: 1fr; }
  .modal-tab-pane { flex-shrink: 0; }
}