:root {
  --ms-primary: #306f91;
  --ms-primary-dark: #125887;
  --ms-primary-darker: #184772;
  --ms-accent: #5fb2d5;
  --ms-muted: #acc5cd;
  --ms-bg: #f4f7f9;
  --ms-surface: #ffffff;
  --ms-border: #d9e0e6;
  --ms-text: #1f2a33;
  /* Исход вызова в разделе MCP: сломалось (6.9:1 на белом) и отказ по вводу (5.6:1) — оба AA для текста. */
  --ms-fault: #a8261d;
  --ms-slate: #5f6a72;
}

body {
  background:
    radial-gradient(circle at top right, rgba(95, 178, 213, 0.12), transparent 22%),
    linear-gradient(180deg, #eef4f7 0%, #f4f7f9 100%);
  color: var(--ms-text);
}

.ms-shell {
  min-height: 100vh;
  display: flex;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 18rem),
    var(--ms-bg);
  color: var(--ms-text);
}

.ms-shell__sidebar {
  width: 320px;
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0f2633 0%, #143748 55%, #0f2230 100%);
  color: #f0f5f8;
}

.ms-brand {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ms-brand__mark {
  width: 42px;
  height: 42px;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  border: none;
}

.ms-brand__logo {
  width: 26px;
  height: 26px;
}

.ms-brand__logo-link {
  fill: none;
  stroke: rgba(255, 255, 255, 0.86);
  stroke-width: 2.25;
  stroke-linecap: square;
}

.ms-brand__logo-node {
  fill: rgba(255, 255, 255, 0.94);
}

.ms-brand__logo-node--source {
  fill: rgba(255, 255, 255, 0.9);
}

.ms-brand__logo-node--core {
  fill: #ffffff;
}

.ms-brand .header {
  color: #f7f9fb;
  margin: 0;
}

.ms-brand .sub.header {
  color: rgba(255, 255, 255, 0.6);
}

.ms-shell__main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ms-topbar.ui.menu {
  margin: 0;
  border-radius: 0 !important;
  border: none;
  box-shadow: 0 14px 30px rgba(16, 29, 38, 0.08);
  padding: 0.9rem 1.5rem;
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ms-border);
  position: relative;
  z-index: 50;
}

.ms-topbar .right.menu {
  align-items: center;
  gap: 0.5rem;
}

.ms-topbar__title .ui.header {
  margin: 0;
  color: var(--ms-primary-darker);
}

.ms-topbar__project .ui.header {
  font-size: 1.5em;
  margin: 0;
}

.ms-topbar__project-link {
  color: inherit;
  text-decoration: none;
}

.ms-topbar__project-link:hover,
.ms-topbar__project-link:focus {
  color: var(--ms-primary-dark);
  text-decoration: none;
}

.ms-topbar__project .folder.icon {
  font-size: 1.5em;
}

.ms-topbar__project .content {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.ms-topbar__meta-trigger {
  position: relative;
}

.ms-topbar__meta-popup-anchor {
  position: relative;
  display: flex;
  align-items: center;
}

.ms-topbar__meta-button.ui.basic.button {
  min-width: 2.35rem;
  min-height: 2.35rem;
  margin: 0;
  border-radius: 0 !important;
  border-color: rgba(48, 111, 145, 0.14);
  background: rgba(255, 255, 255, 0.75);
  color: var(--ms-primary-dark);
}

.ms-topbar__meta-button.ui.basic.button:hover,
.ms-topbar__meta-button.ui.basic.button:focus-visible {
  border-color: rgba(48, 111, 145, 0.24);
  background: rgba(244, 248, 251, 0.98);
  color: var(--ms-primary-darker);
}

.ms-topbar__meta-popup {
  position: absolute;
  top: calc(100% + 0.8rem);
  right: 0;
  z-index: 80;
  min-width: 19rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(48, 111, 145, 0.14);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 34px rgba(16, 29, 38, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  pointer-events: none;
}

.ms-topbar__meta-popup::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 1rem;
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(48, 111, 145, 0.14);
  border-left: 1px solid rgba(48, 111, 145, 0.14);
  background: rgba(255, 255, 255, 0.98);
  transform: rotate(45deg);
}

.ms-topbar__meta-popup-anchor:hover .ms-topbar__meta-popup,
.ms-topbar__meta-popup-anchor:focus-within .ms-topbar__meta-popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.ms-topbar__meta-popup-title {
  margin-bottom: 0.7rem;
  color: var(--ms-primary-darker);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ms-topbar__meta-line {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  line-height: 1.35;
}

.ms-topbar__meta-line + .ms-topbar__meta-line {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(48, 111, 145, 0.08);
}

.ms-topbar__meta-label {
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ms-topbar__meta-value {
  color: var(--ms-text);
  font-size: 0.88rem;
  white-space: nowrap;
}

.ms-topbar__divider {
  width: 1px;
  height: 2.35rem;
  background: var(--ms-border);
  margin: 0;
  padding: 0 !important;
  align-self: center;
}

.ms-topbar__item {
  display: flex;
  align-items: center;
  padding: 0 !important;
}

.ms-content {
  flex: 1 1 auto;
  padding: 1.25rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ms-content__surface.ui.segment {
  border-radius: 0 !important;
  border: 1px solid var(--ms-border);
  box-shadow: 0 24px 60px rgba(16, 29, 38, 0.08);
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 253, 0.94));
  overflow: hidden;
}

.ms-page-shell {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
  min-height: 0;
  flex: 1 1 auto;
}

.ms-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ms-page__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding: 1.35rem 1.5rem;
  border-radius: 0 !important;
  border: 1px solid rgba(48, 111, 145, 0.1);
  background:
    linear-gradient(135deg, rgba(95, 178, 213, 0.14), rgba(255, 255, 255, 0.96) 44%);
  box-shadow: 0 14px 28px rgba(16, 29, 38, 0.06);
}

.ms-page__header-copy {
  flex: 1 1 420px;
  min-width: 0;
}

.ms-page__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0 !important;
  background: rgba(24, 71, 114, 0.08);
  color: var(--ms-primary-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.ms-page__eyebrow .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 1.1rem;
  min-width: 1.1rem;
  height: 1.1rem;
  font-size: 1rem;
  line-height: 1;
}

.ms-page__title.ui.header {
  margin: 0;
  color: var(--ms-primary-darker);
}

.ms-page__title.ui.header .sub.header {
  margin-top: 0.55rem;
  color: rgba(31, 42, 51, 0.7);
  line-height: 1.5;
}

.ms-page__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.ms-page__actions .ui.button,
.ms-page__actions .ui.buttons {
  margin: 0;
}

.ms-page__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem;
}

.ms-stat-tile {
  padding: 1rem 1.1rem;
  border-radius: 0 !important;
  border: 1px solid rgba(48, 111, 145, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 251, 0.96));
}

.ms-stat-tile__label {
  display: block;
  margin-bottom: 0.45rem;
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ms-stat-tile__value {
  display: block;
  color: var(--ms-primary-darker);
  font-size: 1.55rem;
  font-weight: 700;
}

.ms-stat-tile__meta {
  display: block;
  margin-top: 0.35rem;
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.9rem;
}

.ms-section-card.ui.segment {
  border-radius: 0 !important;
  border: 1px solid rgba(48, 111, 145, 0.1);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 34px rgba(16, 29, 38, 0.05);
}

.ms-section-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.ms-table-surface.ui.segment {
  padding: 1.15rem 1.25rem;
}

.ms-empty-state.ui.placeholder.segment,
.ms-system-state.ui.segment {
  border-radius: 0 !important;
  border: 1px dashed rgba(48, 111, 145, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 252, 0.92));
}

.ms-system-state {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem !important;
}

.ms-system-state__actions {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

/* Отрицательный отступ равен боковому паддингу колонок Semantic (1rem): так левый и правый края карточек
   совпадают с краями ряда KPI-плиток над ними. При -0.65rem карточки были сдвинуты внутрь на ~5px. */
.ms-dashboard__grid.ui.grid {
  margin: 0 -1rem;
}

.ms-dashboard__grid.ui.grid > .column {
  display: flex;
  flex-direction: column;
}

.ms-dashboard-panel.ui.segment {
  height: 100%;
  padding: 1.35rem 1.4rem;
}

.ms-dashboard-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
}

.ms-dashboard-panel__eyebrow {
  margin-bottom: 0.4rem;
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ms-dashboard-legend {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.84rem;
}

.ms-dashboard-legend--footer {
  margin-top: 1.2rem;
}

.ms-dashboard-dot.icon {
  margin: 0 0.35rem 0 0;
  font-size: 0.7rem;
}

.ms-dashboard-dot--projects {
  color: #6f7f8d;
}

.ms-dashboard-dot--specs {
  color: #3d8fc4;
}

.ms-dashboard-dot--entities {
  color: #37a5a6;
}

.ms-dashboard-dot--jobs {
  color: #d4942f;
}

.ms-dashboard-pulse {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ms-dashboard-pulse__item {
  padding: 1rem 1.05rem;
  border-radius: 0 !important;
  border: 1px solid rgba(48, 111, 145, 0.08);
  background: linear-gradient(180deg, rgba(248, 251, 253, 0.98), rgba(255, 255, 255, 0.98));
}

.ms-dashboard-pulse__topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.ms-dashboard-pulse__title {
  color: var(--ms-primary-darker);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.ms-dashboard-pulse__title:hover,
.ms-dashboard-pulse__title:focus {
  color: var(--ms-primary-dark);
  text-decoration: none;
}

.ms-dashboard-pulse__description {
  margin-top: 0.25rem;
  color: rgba(31, 42, 51, 0.7);
  line-height: 1.55;
}

.ms-dashboard-pulse__bar {
  display: flex;
  overflow: hidden;
  height: 12px;
  border-radius: 0 !important;
  background: rgba(217, 224, 230, 0.55);
}

.ms-dashboard-pulse__segment {
  display: block;
  height: 100%;
}

.ms-dashboard-pulse__segment--specs {
  background: linear-gradient(135deg, #3d8fc4, #5fb2d5);
}

.ms-dashboard-pulse__segment--entities {
  background: linear-gradient(135deg, #2d8b8d, #4bc3c4);
}

.ms-dashboard-pulse__segment--jobs {
  background: linear-gradient(135deg, #d4942f, #efbf67);
}

.ms-dashboard-pulse__meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.84rem;
}

.ms-dashboard-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.38rem 0.7rem;
  border-radius: 0 !important;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  /* «3 issues» в узкой строке переносился на две строки и ломал высоту плашки. */
  white-space: nowrap;
}

.ms-dashboard-pill--calm {
  background: rgba(47, 163, 107, 0.12);
  color: #23784f;
}

.ms-dashboard-pill--active {
  background: rgba(61, 143, 196, 0.12);
  color: #205e87;
}

.ms-dashboard-pill--risk {
  background: rgba(194, 85, 74, 0.12);
  color: #9f3a38;
}

.ms-dashboard-ring-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

/* Осознанное исключение из правила квадратных углов (глобальный сброс `body * { border-radius: 0 !important }`):
   кольцевая диаграмма — это визуализация данных, а не элемент интерфейса. Нарисованная квадратом,
   она искажает доли: у conic-gradient в углах квадрата сегменты получают больше площади, чем им
   положено по значению. Поэтому кольцо и его «дырка» — круги, и !important здесь перебивает сброс. */
.ms-dashboard-ring {
  width: 176px;
  height: 176px;
  border-radius: 50% !important;
  display: grid;
  place-items: center;
  position: relative;
}

.ms-dashboard-ring::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50% !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 253, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ms-dashboard-ring--small {
  width: 156px;
  height: 156px;
}

.ms-dashboard-ring--small::after {
  inset: 14px;
}

.ms-dashboard-ring__center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}

.ms-dashboard-ring__center strong {
  color: var(--ms-primary-darker);
  font-size: 2rem;
  line-height: 1;
}

.ms-dashboard-ring__center span {
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ms-dashboard-ring__caption {
  max-width: 240px;
  color: rgba(31, 42, 51, 0.7);
  line-height: 1.55;
  text-align: center;
}

.ms-dashboard-ring-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
}

.ms-dashboard-ring-legend__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  border-radius: 0 !important;
  background: rgba(244, 248, 251, 0.9);
}

.ms-dashboard-ring-legend__item strong {
  display: block;
  color: var(--ms-primary-darker);
  font-size: 1rem;
}

.ms-dashboard-ring-legend__item span {
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.82rem;
}

.ms-dashboard-ring-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 0 !important;
  flex: 0 0 12px;
}

.ms-dashboard-activity {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: end;
  min-height: 220px;
}

.ms-dashboard-activity__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}

.ms-dashboard-activity__item strong {
  color: var(--ms-primary-darker);
  font-size: 0.95rem;
}

.ms-dashboard-activity__item span {
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.8rem;
}

.ms-dashboard-activity__canvas {
  width: 100%;
  height: 168px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0.15rem;
  border-bottom: 1px solid rgba(48, 111, 145, 0.12);
}

.ms-dashboard-activity__stack {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  border-radius: 0 !important;
  min-height: 0;
  background: rgba(217, 224, 230, 0.45);
}

.ms-dashboard-activity__segment {
  width: 100%;
}

.ms-dashboard-activity__segment--projects {
  background: linear-gradient(180deg, #8093a2, #627787);
}

.ms-dashboard-activity__segment--specs {
  background: linear-gradient(180deg, #61b3d6, #3d8fc4);
}

.ms-dashboard-activity__segment--jobs {
  background: linear-gradient(180deg, #efbf67, #d4942f);
}

.ms-dashboard-feed {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ms-dashboard-feed__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.95rem 1rem;
  border-radius: 0 !important;
  border: 1px solid rgba(48, 111, 145, 0.08);
  background: linear-gradient(180deg, rgba(248, 251, 253, 0.98), rgba(255, 255, 255, 0.98));
  color: inherit;
  text-decoration: none;
}

.ms-dashboard-feed__item:hover,
.ms-dashboard-feed__item:focus {
  border-color: rgba(48, 111, 145, 0.16);
  box-shadow: 0 16px 28px rgba(16, 29, 38, 0.08);
  transform: translateY(-1px);
  text-decoration: none;
}

.ms-dashboard-feed__icon {
  width: 40px;
  height: 40px;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.ms-dashboard-feed__icon--project {
  background: linear-gradient(135deg, #627787, #8093a2);
}

.ms-dashboard-feed__icon--spec {
  background: linear-gradient(135deg, #3d8fc4, #61b3d6);
}

.ms-dashboard-feed__icon--active {
  background: linear-gradient(135deg, #2b7bb2, #5aa9d7);
}

.ms-dashboard-feed__icon--success {
  background: linear-gradient(135deg, #2a915f, #49bc86);
}

.ms-dashboard-feed__icon--risk {
  background: linear-gradient(135deg, #9f3a38, #d06e63);
}

.ms-dashboard-feed__content {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.ms-dashboard-feed__content strong {
  color: var(--ms-primary-darker);
}

.ms-dashboard-feed__content span {
  color: rgba(31, 42, 51, 0.7);
  line-height: 1.5;
}

.ms-dashboard-feed__time {
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.82rem;
  white-space: nowrap;
}

.ui.large.vertical.menu {
  width: 100%;
}

.ms-project-config {
  min-height: 0;
}

.ms-project-config__tabs.ms-workbench__tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(48, 111, 145, 0.08);
  border-bottom: 1px solid rgba(48, 111, 145, 0.08);
  border-radius: 0 !important;
  background: #fff;
}

.ms-project-config__tabs .ms-workbench__tab {
  position: relative;
  min-height: 2.85rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.ms-project-config__tabs .ms-workbench__tab.completed:not(.active):not(.has-errors)::after {
  content: "";
  position: absolute;
  right: 0.7rem;
  top: 0.7rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 0 !important;
  background: #4caf50;
}

/* Маркер ошибок на вкладке: значок и текст «N errors», а не только цвет — ошибки неактивной вкладки
   раньше не было видно вовсе. */
.ms-project-config__tab-error {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0.4rem;
  color: #9f3a38;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.ms-project-config__tab-error .icon {
  margin: 0;
}

.ms-project-config__body {
  padding: 1.15rem;
  background:
    radial-gradient(120% 60% at 50% -22%, rgba(78, 145, 184, 0.24), rgba(78, 145, 184, 0) 68%),
    radial-gradient(120% 60% at 50% 122%, rgba(46, 101, 137, 0.2), rgba(46, 101, 137, 0) 68%),
    linear-gradient(180deg, #edf3f8 0%, #f6f9fc 45%, #eef4f8 100%);
}

.ms-project-config__content {
  margin: 0;
}

.ms-project-config__form-card.ui.segment {
  margin-bottom: 0.9rem !important;
  padding: 1rem 1rem 0.95rem;
  border: 1px solid rgba(48, 111, 145, 0.12) !important;
  background: #fff;
}

.ms-project-config__form-card.ui.segment:last-child {
  margin-bottom: 0 !important;
}

.ms-project-config__content .ui.header {
  margin-top: 0;
  color: #20445d;
}

.ms-project-config__footer {
  margin-top: 1rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(48, 111, 145, 0.12);
  border-radius: 0 !important;
  background: #fff;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.ms-project-config__footer .ui.small.message {
  margin: 0;
  flex: 1 1 420px;
}

.ms-project-config__status.ui.message {
  margin-top: 0.85rem;
}

.ms-project-config__danger.ui.segment {
  margin: 0 !important;
  padding: 0;
  border: 1px solid #d9a4a4 !important;
  background: #fff1f1 !important;
}

.ms-project-config__danger-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.65rem;
  border-bottom: 1px solid #d9a4a4;
  font-weight: 700;
  color: #ffffff;
  background: #9f3a38;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ms-project-config__danger-head .icon {
  margin: 0;
  font-size: 1rem;
  line-height: 1;
  color: #ffffff;
}

.ms-project-config__danger-body {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.85rem 1rem 0.9rem;
}

.ms-project-config__danger-copy {
  flex: 1 1 420px;
}

.ms-project-config__danger-title {
  font-weight: 700;
  color: #7d3534;
  margin-bottom: 0.2rem;
}

.ms-project-config__danger-copy p {
  margin: 0;
  color: #7d3534;
}

.ms-project-config-page .ui.segment,
.ms-project-config-page .ui.card {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ms-project-config-page .ui.segment {
  border: 1px solid rgba(48, 111, 145, 0.12) !important;
}

.ms-project-config-page .ui.top.attached.segment,
.ms-project-config-page .ui.bottom.attached.segment {
  border-radius: 0 !important;
}

@media (max-width: 960px) {
  .ms-project-config__tabs.ms-workbench__tabs {
    grid-template-columns: 1fr;
  }

  .ms-project-config__tabs .ms-workbench__tab {
    border-right: 0;
    border-bottom: 1px solid #dce3ea;
    text-transform: none;
  }

  .ms-project-config__tabs .ms-workbench__tab:last-child {
    border-bottom: 0;
  }
}


.ms-project-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.ms-project-link:hover {
  color: var(--ms-primary-dark);
}

.ms-project-link:hover .header {
  color: var(--ms-primary-dark);
}

.ms-account-menu {
  position: relative;
  display: inline-flex;
  z-index: 60;
}

.ms-account-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.ms-account-menu__dropdown {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 180px;
  border-radius: 0 !important;
  box-shadow: 0 10px 24px rgba(16, 29, 38, 0.18);
  z-index: 70;
}

.ms-account-menu__backdrop {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: transparent;
}

.ms-account-menu__dropdown .item {
  display: flex;
  justify-content: stretch;
}

.ms-account-menu__dropdown .ui.basic.button {
  width: 100%;
  text-align: left;
}

.ms-virtual-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: hidden;
  border-radius: 0 !important;
}

.ms-step-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ms-step-title-left {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

.ms-step-meta {
  margin-left: auto;
  white-space: nowrap;
}

.ms-icon-success {
  color: #21ba45;
}

.ms-icon-failed {
  color: #db2828;
}

.ms-icon-running {
  color: #2185d0;
}

.ms-icon-pending {
  color: #f2a922;
}

.ms-timeline-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.75rem 0 0;
  flex: 0 0 20px;
}

.ms-timeline-icon > i.icon {
  margin: 0 !important;
  width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
  font-size: 20px !important;
}

.ms-timeline {
  margin: 0;
}

.ms-timeline-item {
  display: flex !important;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ms-timeline-item:last-child {
  border-bottom: none;
}

.ms-timeline-item .ms-timeline-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 0 !important;
  background: transparent;
  color: #2185d0;
}

.ms-timeline-item .ms-timeline-icon > i.icon {
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
  font-size: 18px !important;
  text-align: center;
}

.ms-timeline-item .content .header {
  font-weight: 600;
  color: #1f2a33;
}

.ms-timeline-item .content .description {
  color: rgba(31, 42, 51, 0.7);
}

.ms-step-content.active {
  max-height: 20rem;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.ms-step-log-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.ms-step-log-time {
  font-weight: 600;
  white-space: nowrap;
}

.ms-step-log-message {
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ms-step-log-line + .ms-step-log-line {
  margin-top: 0;
}

.ui.relaxed.list.ms-step-logs .item {
  padding-top: 0;
  padding-bottom: 0;
}

.ui.relaxed.list.ms-step-logs .item .content {
  padding-top: 0;
  padding-bottom: 0;
}

.ms-virtual-scroll {
  flex: 1;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  padding-top: 0.5rem;
}

.ms-skeleton {
  position: relative;
  overflow: hidden;
  background: #e6edf2;
  border-radius: 0 !important;
}

.ms-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: ms-skeleton-shimmer 1.15s ease-in-out infinite;
}

.ms-skeleton-line {
  height: 12px;
}

.ms-skeleton-line--sm {
  height: 8px;
}

.ms-skeleton-line--md {
  height: 14px;
}

.ms-skeleton-line--lg {
  height: 18px;
}

.ms-fs-warnings {
  display: block !important;
  background: #fff8e6;
  border-color: #f4c76b;
  color: #5f3b00;
}

.ms-fs-warnings.positive {
  background: #f3fff7;
  border-color: #a8e0b9;
  color: #1d5a2d;
}

.ms-dropdown {
  position: relative;
}

.ms-dropdown .menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  background: #ffffff;
  border: 1px solid #d9e0e6;
  border-radius: 0 !important;
  box-shadow: 0 8px 20px rgba(15, 34, 48, 0.12);
  padding: 0.5rem 0;
}

.ms-dropdown.visible .menu,
.ms-dropdown.active .menu {
  display: block;
}

.ms-dropdown .item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}

.ms-dropdown .item:hover {
  background: #f4f7f9;
}

.ms-toast {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  left: auto !important;
  top: auto !important;
  z-index: 60;
  min-width: 260px;
  max-width: 420px;
  box-shadow: 0 12px 24px rgba(15, 34, 48, 0.18);
  margin: 0;
  transform: none !important;
  text-align: left;
}

.ms-toast.ui.message {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Кнопка закрытия сообщения: то же место, что у .close.icon Semantic UI, но это настоящая кнопка
   (фокус, Enter, имя для скринридера), а не иконка с обработчиком клика. */
.ui.message > .ms-message-dismiss {
  position: absolute;
  top: 0.6rem;
  right: 0.5rem;
  padding: 0.25rem;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
}

.ui.message > .ms-message-dismiss:hover,
.ui.message > .ms-message-dismiss:focus-visible {
  opacity: 1;
}

.ui.message > .ms-message-dismiss:focus-visible {
  outline: 2px solid var(--ms-accent);
  outline-offset: 2px;
}

.ms-skeleton-block {
  height: 40px;
}

.ms-skeleton-w-35 {
  width: 35%;
}

.ms-skeleton-w-60 {
  width: 60%;
}

.ms-skeleton-w-80 {
  width: 80%;
}

.ms-skeleton-w-100 {
  width: 100%;
}

.ms-skeleton-table {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.ms-skeleton-row {
  display: grid;
  gap: 0.8rem;
  align-items: center;
}

.ms-skeleton-cell {
  height: 12px;
}

@keyframes ms-skeleton-shimmer {
  to {
    transform: translateX(100%);
  }
}

.ms-grid-header,
.ms-grid-row {
  display: grid;
  gap: 0.8rem;
  align-items: center;
}

.ms-grid-header {
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid rgba(34, 36, 38, 0.12);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.ms-grid-row {
  border-bottom: 1px solid rgba(34, 36, 38, 0.08);
  padding: 0.6rem 0;
}

.ms-jobs-table .ms-jobs-actions-col {
  width: 120px;
  max-width: 120px;
}

.ms-jobs-table th,
.ms-jobs-table td {
  vertical-align: middle;
}

.ms-jobs-table .ms-jobs-date {
  white-space: nowrap;
}

.ms-jobs-table .ms-jobs-actions-col .ui.buttons {
  margin: 0 auto;
  justify-content: center;
}

/* Колонка статуса держит ширину под строку прогресса: сообщение выполняющейся задачи раньше
   переносилось по слову в узком столбце и растягивало строку на пять строк. */
.ms-jobs-table .ms-jobs-status-col {
  width: 240px;
  min-width: 200px;
  text-align: center;
}

.ms-jobs-progress {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  text-align: left;
  font-size: 0.85rem;
}

.ms-jobs-progress__percent {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--ms-primary-darker);
}

.ms-jobs-progress__message {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ms-jobs-table .ms-jobs-status-col .ui.progress {
  margin: 0;
}

.ms-project-cards .column {
  display: flex;
}

.ms-project-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.ms-project-card .extra.content {
  margin-top: auto;
}

.ms-product-line-tools-page .ms-project-cards .column,
.ms-project-tools-page .ms-project-cards .column {
  display: block;
}

.ms-product-line-tools-page .ms-project-card,
.ms-project-tools-page .ms-project-card {
  height: auto;
}

.ms-product-line-tools-page .ms-project-card .extra.content,
.ms-project-tools-page .ms-project-card .extra.content {
  margin-top: 0.9rem;
  border-top: 1px solid #e1e8ef;
}

.ms-product-line-tools-page .ms-warning-card.ui.segment,
.ms-project-tools-page .ms-warning-card.ui.segment {
  margin-top: 0.75rem;
}

/* The result cards list full file paths; a path is one unbroken word and ran past the card's edge. */
.ms-product-line-tools-page .ms-warning-card__body .item,
.ms-project-tools-page .ms-warning-card__body .item,
.ms-project-tools-page .ui.message .list .item {
  overflow-wrap: anywhere;
}

.ms-project-directory {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.ms-project-directory__item {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) auto auto;
  gap: 1rem 1.25rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border-radius: 0 !important;
  border: 1px solid rgba(48, 111, 145, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 252, 0.92));
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.ms-project-directory__item:hover {
  border-color: rgba(48, 111, 145, 0.2);
  box-shadow: 0 12px 26px rgba(16, 29, 38, 0.06);
  transform: translateY(-1px);
}

.ms-project-directory__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ms-project-directory__title {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.ms-project-directory__title:hover,
.ms-project-directory__title:focus {
  color: inherit;
  text-decoration: none;
}

.ms-project-directory__icon {
  width: 44px;
  height: 44px;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--ms-primary-dark);
  background: rgba(95, 178, 213, 0.12);
  margin-top: 0.1rem;
}

.ms-project-directory__icon .icon {
  margin: 0;
}

.ms-project-directory__title-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ms-project-directory__name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ms-primary-darker);
}

.ms-project-directory__hint,
.ms-project-directory__description {
  color: rgba(31, 42, 51, 0.7);
  line-height: 1.45;
}

.ms-project-directory__description {
  padding-left: 3.85rem;
}

.ms-project-directory__meta {
  display: flex;
  align-items: stretch;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.ms-project-directory__meta-block {
  min-width: 150px;
  padding: 0.75rem 0.85rem;
  border-radius: 0 !important;
  background: rgba(244, 248, 250, 0.9);
  border: 1px solid rgba(48, 111, 145, 0.08);
}

.ms-project-directory__meta-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(31, 42, 51, 0.7);
}

.ms-project-directory__meta-value {
  display: block;
  font-weight: 700;
  color: var(--ms-text);
}

.ms-project-directory__meta-user {
  display: block;
  margin-top: 0.25rem;
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.85rem;
  word-break: break-word;
}

.ms-project-directory__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}

.ms-inline-input {
  margin-right: 0.6rem;
}

.ms-grid-entities {
  grid-template-columns: 2fr 2.6fr 5fr 1.4fr;
}

.ms-grid-projects {
  grid-template-columns: 2.4fr 3fr 1.2fr 1.2fr 0.6fr;
}

.ms-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: center;
}

.ms-flat-segment {
  border-radius: 0 !important;
}

.ui.segment:not(.basic):not(.attached),
.ui.segments:not(.horizontal),
.ui.card,
.ui.cards > .card {
  border-radius: 0 !important;
}

.ui.segment:not(.basic),
.ui.segments,
.ui.card,
.ui.cards > .card {
  border-color: rgba(48, 111, 145, 0.1) !important;
  box-shadow: 0 14px 30px rgba(16, 29, 38, 0.05) !important;
}

.ms-content__surface .ui.table {
  border-radius: 0 !important;
  overflow: visible;
  margin-bottom: 0;
}

.ms-content__surface .ui.table thead th {
  background: #f6fafc;
  color: rgba(31, 42, 51, 0.74);
  font-weight: 700;
}

.ms-content__surface .ui.table tbody tr:hover {
  background: rgba(95, 178, 213, 0.05);
}

.ms-content__surface .ui.message {
  border-radius: 0 !important;
  box-shadow: none;
}

.ms-content__surface .ui.basic.button,
.ms-content__surface .ui.button:not(.basic):not(.icon):not(.circular) {
  border-radius: 0 !important;
}

.ms-modal-overlay {
  animation: msFadeIn 0.2s ease;
}

.ms-modal {
  animation: msSlideIn 0.22s ease;
}

.ms-feature-specification-deploy-modal {
  width: 980px !important;
  max-width: calc(100vw - 4rem) !important;
}

.ms-feature-specification-deploy-modal__header {
  padding: 1rem 1.25rem 0.9rem !important;
}

.ms-feature-specification-deploy-modal__title {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.ms-feature-specification-deploy-modal__title > i.icon {
  margin: 0.14rem 0 0;
}

.ms-feature-specification-deploy-modal__subtitle {
  margin-top: 0.15rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(31, 42, 51, 0.7);
}

.ms-feature-specification-deploy-modal > .content {
  padding: 1rem 1.25rem !important;
}

.ms-feature-specification-deploy-modal > .actions {
  padding: 0.85rem 1.25rem !important;
}

.ms-feature-specification-deploy-modal__loader {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.ms-feature-specification-deploy-modal__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ms-feature-specification-deploy-modal__summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.ms-feature-specification-deploy-modal__summary-grid .ms-readonly-field {
  min-height: 4.7rem;
  padding: 0.8rem 0.9rem;
}

.ms-feature-specification-deploy-modal__execution-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: stretch;
}

.ms-feature-specification-deploy-modal__panel.ui.segment {
  margin: 0;
  padding: 0.9rem !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ms-feature-specification-deploy-modal__panel .field:last-child {
  margin-bottom: 0;
}

.ms-feature-specification-deploy-modal__panel-heading {
  margin-bottom: 0.85rem;
}

.ms-feature-specification-deploy-modal__panel-heading .ui.tiny.header {
  margin-bottom: 0.2rem;
}

.ms-feature-specification-deploy-modal__panel-note,
.ms-feature-specification-deploy-modal__field-note {
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(31, 42, 51, 0.7);
}

.ms-feature-specification-deploy-modal__field-note {
  margin-top: -0.2rem;
}

.ms-feature-specification-deploy-modal__branch-status {
  font-size: 0.84rem;
  font-weight: 600;
}

.ms-feature-specification-deploy-modal__branch-status--error {
  color: #9f3a38;
}

.ms-feature-specification-deploy-modal__branch-status--success {
  color: #21683d;
}

.ms-feature-specification-deploy-modal__toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.ms-feature-specification-deploy-modal__toggle-card {
  min-width: 0;
  padding: 0.8rem 0.85rem;
  border: 1px solid rgba(48, 111, 145, 0.12);
  background: linear-gradient(180deg, rgba(251, 253, 254, 0.98), rgba(247, 250, 252, 0.98));
}

.ms-feature-specification-deploy-modal__toggle-label {
  margin-bottom: 0.55rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(31, 42, 51, 0.7);
}

.ms-feature-specification-deploy-modal__checkbox {
  margin-top: 0 !important;
}

.ms-feature-specification-deploy-modal__toggle-note,
.ms-feature-specification-deploy-modal__toggle-warning {
  margin-top: 0.45rem;
  font-size: 0.82rem;
  line-height: 1.4;
}

.ms-feature-specification-deploy-modal__toggle-note {
  color: rgba(31, 42, 51, 0.7);
}

.ms-feature-specification-deploy-modal__toggle-warning {
  color: #9f3a38;
}

.ms-feature-specification-deploy__options.ui.secondary.segment {
  max-height: min(60vh, 34rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0.85rem !important;
}

.ms-feature-specification-deploy-modal__toggle-button.ui.basic.button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  align-self: flex-start;
  margin: 0;
  padding: 0.7rem 0.95rem;
}

.ms-feature-specification-deploy-modal__toggle-button-label {
  font-weight: 600;
}

.ms-feature-specification-deploy-modal__toggle-button-summary {
  padding-left: 0.3rem;
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.85rem;
}

.ms-feature-specification-deploy-modal__suboverlay {
  background: rgba(31, 42, 51, 0.34) !important;
}

.ms-feature-specification-deploy-artifacts-modal {
  width: 1080px !important;
  max-width: calc(100vw - 4rem) !important;
}

.ms-feature-specification-deploy-artifacts-modal > .content {
  padding: 1rem 1.25rem !important;
}

.ms-feature-specification-deploy-artifacts-modal__content {
  max-height: min(78vh, 48rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ms-feature-specification-deploy-modal__options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ms-feature-specification-deploy-artifacts-modal .ms-feature-specification-deploy__options.ui.secondary.segment {
  max-height: none;
  overflow: visible;
}

.ms-feature-specification-deploy-modal__artifact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.ms-feature-specification-deploy-modal__artifact-card.ui.segment {
  margin: 0;
  padding: 0.85rem !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ms-feature-specification-deploy-modal__artifact-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.ms-feature-specification-deploy-modal__artifact-head .ui.tiny.header {
  margin-bottom: 0.2rem;
}

.ms-feature-specification-deploy-modal__artifact-description {
  font-size: 0.84rem;
  line-height: 1.4;
  color: rgba(31, 42, 51, 0.7);
}

.ms-feature-specification-deploy-modal__artifact-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ms-feature-specification-deploy-modal__artifact-section + .ms-feature-specification-deploy-modal__artifact-section {
  margin-top: 0.85rem;
}

.ms-feature-specification-deploy-modal__artifact-section-title {
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(31, 42, 51, 0.7);
}

.ms-feature-specification-deploy-modal__artifact-section .grouped.fields {
  margin-bottom: 0;
}

.ms-feature-specification-deploy-modal__artifact-section .grouped.fields .field {
  margin-bottom: 0.45rem;
}

.ms-feature-specification-deploy-modal__artifact-section .grouped.fields .field:last-child {
  margin-bottom: 0;
}

.ms-feature-specification-deploy-modal__actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
}

/* Причина, по которой Deploy недоступен, — рядом с кнопкой: выключенная кнопка без объяснения
   на демо читается как поломка. */
.ms-feature-specification-deploy-modal__block-reason,
.ms-feature-specification-deploy-modal__confirm-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: 0.9rem;
  color: rgba(31, 42, 51, 0.72);
}

.ms-feature-specification-deploy-modal__actions--confirm {
  background: #fff6f6 !important;
}

.ms-feature-specification-deploy-modal__confirm-text {
  color: #9f3a38;
  font-weight: 700;
}

@media only screen and (max-width: 1100px) {
  .ms-feature-specification-deploy-modal {
    max-width: calc(100vw - 2rem) !important;
  }

  .ms-feature-specification-deploy-artifacts-modal {
    max-width: calc(100vw - 2rem) !important;
  }

  .ms-feature-specification-deploy-modal__summary-grid,
  .ms-feature-specification-deploy-modal__execution-grid,
  .ms-feature-specification-deploy-modal__toggle-grid,
  .ms-feature-specification-deploy-modal__artifact-grid {
    grid-template-columns: 1fr;
  }

  .ms-feature-specification-deploy-modal__artifact-head {
    flex-direction: column;
  }

  .ms-feature-specification-deploy-modal__artifact-actions {
    justify-content: flex-start;
  }
}

.ms-admin-users {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ms-admin-users__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ms-admin-users__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 0.8fr);
  gap: 1rem;
  align-items: stretch;
}

.ms-admin-users__panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ms-admin-users__panel--create {
  position: relative;
  background:
    linear-gradient(135deg, rgba(48, 111, 145, 0.08), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 252, 0.98));
}

.ms-admin-users__panel--create::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.32rem;
  background: linear-gradient(180deg, rgba(48, 111, 145, 0.92), rgba(95, 178, 213, 0.82));
}

.ms-admin-users .ms-panel__header {
  margin-bottom: 1rem;
}

.ms-admin-users .ms-panel__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.55rem;
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ms-admin-users__panel-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(48, 111, 145, 0.14);
  background: rgba(48, 111, 145, 0.06);
  color: var(--ms-primary-darker);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.ms-admin-users__form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.ms-admin-users__form .field {
  margin: 0;
}

.ms-admin-users__form .ui.input,
.ms-admin-users__form .ui.input > input,
.ms-admin-users__form .ui.dropdown {
  width: 100%;
}

.ms-admin-users__form .ui.left.icon.input > input,
.ms-admin-users__form .ui.dropdown,
.ms-admin-users__search.ui.input input,
.ms-admin-users__role-select,
.ms-admin-users__action-group.ui.buttons .button,
.ms-admin-users__lock-button.ui.button,
.ms-admin-users__form-footer > .ui.button {
  min-height: 2.875rem;
  height: 2.875rem;
}

.ms-admin-users__form .ui.left.icon.input > input,
.ms-admin-users__search.ui.input input,
.ms-admin-users__role-select {
  padding-top: 0;
  padding-bottom: 0;
}

.ms-admin-users__form-footer {
  display: flex;
  align-items: end;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.ms-admin-users__form-role {
  flex: 1 1 16rem;
  min-width: 0;
  margin: 0;
}

.ms-admin-users__form-footer > .ui.button {
  margin: 0;
  padding-inline: 1.4rem;
}

.ms-admin-users__role-catalogue {
  display: grid;
  gap: 0.8rem;
  flex: 1 1 auto;
  align-content: start;
}

.ms-grid-admin-users {
  grid-template-columns: 1.6fr 1fr 1.1fr 1.7fr;
}

.ms-admin-users__table-shell {
  overflow-x: auto;
}

.ms-admin-users__table {
  min-width: 100%;
  table-layout: fixed;
}

.ms-admin-users__table th,
.ms-admin-users__table td {
  vertical-align: middle;
}

.ms-admin-users__table tbody td {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.ms-admin-users__table th:nth-child(1) {
  width: 28%;
}

.ms-admin-users__table th:nth-child(2) {
  width: 19%;
}

.ms-admin-users__table th:nth-child(3) {
  width: 18%;
}

.ms-admin-users__table th:nth-child(4) {
  width: 35%;
}

.ms-admin-users__identity {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.ms-admin-users__role-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(48, 111, 145, 0.12);
  background: linear-gradient(180deg, rgba(250, 252, 253, 0.98), rgba(255, 255, 255, 0.98));
}

.ms-admin-users__role-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(48, 111, 145, 0.14);
  background: rgba(48, 111, 145, 0.06);
  color: var(--ms-primary-darker);
  font-size: 1.05rem;
}

.ms-admin-users__role-icon .icon {
  margin: 0;
}

.ms-admin-users__role-copy {
  min-width: 0;
}

.ms-admin-users__role-name {
  color: var(--ms-primary-darker);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.ms-admin-users__role-description {
  margin-top: 0.35rem;
  color: rgba(31, 42, 51, 0.7);
  line-height: 1.5;
}

.ms-admin-users__toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.ms-admin-users__results {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ms-admin-users__results-value {
  color: var(--ms-primary-darker);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

.ms-admin-users__results-label {
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ms-admin-users__search.ui.input {
  min-width: 22rem;
}

.ms-admin-users__search.ui.input input {
  min-width: 22rem;
}

.ms-admin-users__directory-panel {
  min-width: 0;
}

.ms-admin-users__identity-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid rgba(48, 111, 145, 0.12);
  background: linear-gradient(180deg, rgba(48, 111, 145, 0.08), rgba(95, 178, 213, 0.12));
  color: var(--ms-primary-darker);
  font-size: 1.2rem;
  flex: 0 0 auto;
}

.ms-admin-users__identity-mark .icon {
  margin: 0;
}

.ms-admin-users__status-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ms-admin-users__user {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ms-admin-users__user-email {
  font-weight: 600;
  color: var(--ms-text);
}

.ms-admin-users__user-meta {
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.9rem;
}

.ms-admin-users__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ms-admin-users__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ms-admin-users__action-group.ui.buttons {
  display: inline-flex;
}

.ms-admin-users__action-group.ui.buttons .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ms-admin-users__lock-button.ui.button {
  min-width: 6.75rem;
  justify-content: center;
}

.ms-admin-users__role-select {
  width: auto;
  min-width: 12rem;
  flex: 1 1 12rem;
  max-width: 16rem;
}

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

@keyframes msSlideIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 980px) {
  .ms-shell {
    flex-direction: column;
  }

  .ms-shell__sidebar {
    width: 100%;
    flex: 0 0 auto;
  }

  .ms-topbar.ui.menu {
    padding: 0.75rem 1rem;
  }

  .ms-content {
    padding: 0.9rem;
  }

  .ms-topbar__item {
    padding: 0.25rem 0.45rem !important;
  }

  .ms-topbar__item .ui.icon.input input {
    min-width: 160px;
  }

  .ms-admin-users__search.ui.input,
  .ms-admin-users__search.ui.input input {
    min-width: 0;
    width: 100%;
  }

  .ms-admin-users__hero {
    grid-template-columns: 1fr;
  }

  .ms-admin-users__form-footer {
    align-items: stretch;
  }

  .ms-page-shell {
    padding: 1rem;
  }

  .ms-page__header {
    padding: 1.1rem 1.15rem;
  }

  .ms-page__actions {
    justify-content: flex-start;
  }

  .ms-dashboard-activity {
    gap: 0.65rem;
  }

  .ms-dashboard-feed__item {
    grid-template-columns: auto 1fr;
  }

  .ms-dashboard-feed__time {
    grid-column: 2;
  }

  .ms-project-directory__item {
    grid-template-columns: 1fr;
  }

  .ms-project-directory__description {
    padding-left: 0;
  }

  .ms-project-directory__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  /* На телефоне e-mail в кнопке аккаунта выталкивал шапку за край экрана; имя остаётся в aria-label и подсказке. */
  .ms-account-menu__name {
    display: none;
  }

  .ms-content {
    padding: 0.65rem;
  }

  .ms-content__surface.ui.segment {
    border-radius: 0 !important;
  }

  .ms-page-shell {
    padding: 0.85rem;
    gap: 1rem;
  }

  .ms-page__header {
    padding: 1rem;
    border-radius: 0 !important;
  }

  .ms-dashboard-activity {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 320px;
  }

  .ms-dashboard-ring {
    width: 148px;
    height: 148px;
  }

  .ms-dashboard-ring::after {
    inset: 13px;
  }

  .ms-table-surface.ui.segment,
  .ms-section-card.ui.segment,
  .ms-system-state.ui.segment {
    padding: 1rem !important;
  }

  .ms-brand {
    padding: 1.2rem 1rem 0.9rem;
  }

  .ms-nav .item {
    margin: 0.2rem 0.6rem;
  }

  .ms-admin-users__actions {
    align-items: stretch;
  }

  .ms-admin-users__role-select,
  .ms-admin-users__action-group.ui.buttons {
    width: 100%;
    max-width: none;
  }

  .ms-admin-users__action-group.ui.buttons .button {
    justify-content: center;
  }

  .ms-admin-users__lock-button.ui.button {
    width: 100%;
  }
}
.ms-repo-tree {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.ms-repo-tree-modal {
  width: 860px !important;
  max-width: calc(100vw - 4rem) !important;
}

.ms-repo-tree-modal .content {
  position: relative;
}

.ms-repo-tree-modal-overlay {
  backdrop-filter: blur(2px);
}

.ms-repo-tree__item {
  border-radius: 0 !important;
  padding: 0.35rem 0.4rem;
  transition: background 0.12s ease;
}

.ms-repo-tree__item:hover {
  background: rgba(48, 111, 145, 0.08);
}

/* Строка дерева: кнопка раскрытия и кнопка выбора стоят рядом (вложенная кнопка в кнопке недопустима). */
.ms-repo-tree__line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ms-repo-tree__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 0.15rem 0.2rem;
  cursor: pointer;
}

/* Файлы видны для ориентира, но выбрать их нельзя — каталог проекта всегда папка. */
.ms-repo-tree__row:disabled {
  cursor: default;
  opacity: 0.6;
}

.ms-repo-tree__row:hover .header {
  color: var(--ms-primary-dark);
}

.ms-repo-tree__row--selected {
  background: rgba(95, 178, 213, 0.18);
  border-radius: 0 !important;
}

.ms-repo-tree__progress {
  display: inline-block;
  margin-left: 0;
  text-align: left;
  width: 100%;
}

.ms-repo-tree__progress--flash {
  animation: ms-repo-tree-flash 0.9s ease-in-out infinite;
  color: var(--ms-primary-dark);
  font-weight: 600;
}

@keyframes ms-repo-tree-flash {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}


.ms-module-card-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.ms-module-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
  padding: 1.4rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.ms-module-card.is-enabled {
  border-color: rgba(13, 148, 136, 0.3);
  box-shadow: 0 22px 50px rgba(13, 148, 136, 0.12);
}

.ms-module-card__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
}

.ms-module-card__description {
  margin: 0;
  color: #475569;
  line-height: 1.65;
}

.ms-module-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.ms-module-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.ms-module-card__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  background: rgba(226, 232, 240, 0.72);
  color: #334155;
  font-size: 0.82rem;
  font-weight: 600;
}

.ms-module-card__meta {
  color: #0f766e;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-module-card__options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.35rem 0 0.75rem;
  padding: 0.75rem 0 0;
  border-top: 1px solid #e2e8f0;
}

.ms-module-card__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 22rem;
}

.ms-module-card__field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
}

.ms-module-card__field input {
  padding: 0.45rem 0.65rem;
  border: 1px solid #cbd5e1;
  font-size: 0.9rem;
}

.ms-graphql-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.ms-graphql-fields code {
  background: rgba(48, 111, 145, 0.08);
  color: #184772;
  border: 1px solid rgba(48, 111, 145, 0.2);
  padding: 0.15rem 0.5rem;
  font-size: 0.82rem;
}

/* Configure-integration modal sections (ExternalId / endpoint ops / GraphQL ops). */
.ms-integration-config-modal__section {
  padding: 0.85rem 0;
  border-top: 1px solid #eef2f6;
}

.ms-integration-config-modal__section:first-child {
  border-top: none;
  padding-top: 0;
}

.ms-integration-config-modal__title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1f2a33;
}

.ms-integration-config-modal__hint {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  color: rgba(31, 42, 51, 0.7);
}

.ms-integration-config-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 22rem;
  margin-top: 0.6rem;
}

.ms-integration-config-modal__field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
}

.ms-integration-config-modal__field input {
  padding: 0.45rem 0.65rem;
  border: 1px solid #cbd5e1;
  font-size: 0.9rem;
}

.ms-module-config-modal {
  width: min(40rem, calc(100vw - 2rem)) !important;
}

.ms-module-config-modal__intro {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ms-module-config-modal__intro p {
  margin: 0;
  color: #475569;
  line-height: 1.65;
}

.ms-module-config-modal__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  color: #334155;
  font-size: 0.88rem;
  font-weight: 700;
}

.ms-module-config-modal__list {
  max-height: 22rem;
  overflow: auto;
}

.ms-module-config-modal__item {
  padding: 0.25rem 0;
}

.ms-module-config-modal__item-title {
  display: block;
  font-weight: 700;
  color: #0f172a;
}

.ms-module-config-modal__item-hint {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: #64748b;
}

@media (max-width: 767px) {
  .ms-module-card {
    padding: 1.1rem;
  }

  .ms-module-card__actions {
    align-items: stretch;
  }

  .ms-module-card__actions .ui.toggle.checkbox {
    width: 100%;
  }

  .ms-module-card__actions .ui.button {
    width: 100%;
  }
}
.ms-repo-tree__toggle.ui.icon.button {
  margin: 0;
  padding: 0.25rem;
  box-shadow: none;
  background: transparent;
}

.ms-repo-tree__toggle.ui.icon.button:hover,
.ms-repo-tree__toggle.ui.icon.button:focus,
.ms-repo-tree__toggle.ui.icon.button:active {
  background: transparent;
  box-shadow: none;
}

.ms-repo-tree__toggle-placeholder {
  width: 30px;
  height: 24px;
  display: inline-block;
}

.ms-repo-tree__toggle-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ms-repo-tree__loader.ui.loader:before,
.ms-repo-tree__loader.ui.loader:after {
  border-color: rgba(31, 42, 51, 0.25) !important;
  border-top-color: rgba(31, 42, 51, 0.9) !important;
}

.ms-repo-tree__icon {
  color: rgba(31, 42, 51, 0.7);
}

.ms-repo-tree__row:focus-visible {
  outline: 2px solid rgba(48, 111, 145, 0.25);
  outline-offset: 2px;
  border-radius: 0 !important;
}

.ms-repo-tree__header {
  font-weight: 600;
  color: var(--ms-text);
}

.ms-repo-tree__description {
  font-size: 0.85rem;
  color: rgba(31, 42, 51, 0.7);
}

.ms-fs-menu-modal {
  width: 980px !important;
  max-width: calc(100vw - 4rem) !important;
}

.ms-fs-menu-modal__header {
  padding: 1rem 1.25rem 0.9rem !important;
}

.ms-fs-menu-modal__title {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.ms-fs-menu-modal__title > i.icon {
  margin: 0.12rem 0 0;
}

.ms-fs-menu-modal__subtitle {
  margin-top: 0.15rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(31, 42, 51, 0.7);
}

.ms-fs-menu-modal > .content {
  padding: 1rem 1.25rem !important;
}

.ms-fs-menu-modal > .actions {
  padding: 0.85rem 1.25rem !important;
}

.ms-fs-menu-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(48, 111, 145, 0.1);
  background: rgba(247, 249, 252, 0.96);
  color: rgba(31, 42, 51, 0.84);
}

.ms-fs-menu-meta__label {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(31, 42, 51, 0.7);
}

.ms-fs-menu-meta__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.84rem;
}

.ms-fs-menu-status-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.9fr);
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.ms-fs-menu-status-card {
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(48, 111, 145, 0.12);
  background: rgba(249, 251, 253, 0.96);
}

.ms-fs-menu-status-card--summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ms-fs-menu-status-card__label {
  margin-bottom: 0.35rem;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(31, 42, 51, 0.7);
}

.ms-fs-menu-status-card__value,
.ms-fs-menu-status-card__empty {
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(31, 42, 51, 0.78);
}

.ms-fs-menu-layout {
  display: grid;
  grid-template-columns: minmax(240px, 290px) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.ms-fs-menu-new-item,
.ms-fs-menu-tree-panel {
  border-radius: 0 !important;
  border: 1px solid rgba(48, 111, 145, 0.12) !important;
  box-shadow: none !important;
}

.ms-fs-menu-new-item {
  position: sticky;
  top: 0;
  padding: 0.85rem !important;
}

.ms-fs-menu-tree-panel {
  padding: 0.8rem !important;
}

.ms-fs-menu-panel-heading {
  margin-bottom: 0.7rem;
}

.ms-fs-menu-panel-heading .ui.tiny.header {
  margin-bottom: 0.2rem;
}

.ms-fs-menu-panel-heading--tree {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.ms-fs-menu-panel-note {
  font-size: 0.84rem;
  line-height: 1.35;
  color: rgba(31, 42, 51, 0.7);
}

.ms-fs-menu-field {
  margin-bottom: 0.65rem !important;
}

.ms-fs-menu-field label {
  margin-bottom: 0.35rem !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(31, 42, 51, 0.7) !important;
}

.ms-fs-menu-field input {
  min-height: 38px;
}

.ms-fs-menu-preview-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0.6rem 0 0.65rem;
  border: 1px dashed rgba(48, 111, 145, 0.34);
  border-radius: 0 !important;
  background: linear-gradient(135deg, rgba(95, 178, 213, 0.1), rgba(48, 111, 145, 0.03));
  color: var(--ms-primary-dark);
  font-weight: 600;
  cursor: grab;
  user-select: none;
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.ms-fs-menu-preview-card:hover {
  border-color: rgba(48, 111, 145, 0.5);
  box-shadow: 0 10px 24px rgba(48, 111, 145, 0.08);
  transform: translateY(-1px);
}

.ms-fs-menu-preview-card:active {
  cursor: grabbing;
}

.ms-fs-menu-preview-card__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  background: rgba(48, 111, 145, 0.12);
  color: rgba(31, 42, 51, 0.64);
}

.ms-fs-menu-preview-card__body {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem;
}

.ms-fs-menu-preview-card__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.98rem;
}

.ms-fs-menu-preview-card__hint {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(31, 42, 51, 0.7);
}

.ms-fs-menu-tree {
  max-height: 420px;
}

.ms-fs-menu-drop-zone {
  height: 8px;
  margin: 0.08rem 0;
  border-radius: 0 !important;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.ms-fs-menu-drop-zone.dragging {
  background: linear-gradient(
    180deg,
    transparent 35%,
    rgba(48, 111, 145, 0.12) 35%,
    rgba(48, 111, 145, 0.12) 65%,
    transparent 65%);
}

.ms-fs-menu-drop-zone.active,
.ms-fs-menu-drop-zone.hover {
  background: linear-gradient(
    180deg,
    transparent 28%,
    rgba(95, 178, 213, 0.72) 28%,
    rgba(95, 178, 213, 0.72) 72%,
    transparent 72%);
  box-shadow: 0 0 0 1px rgba(48, 111, 145, 0.14);
  transform: scaleY(1.08);
}

.ms-fs-menu-row {
  padding-right: 0.35rem;
  border-radius: 0 !important;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.ms-fs-menu-row--draft {
  background: rgba(95, 178, 213, 0.12);
}

.ms-fs-menu-row--inside-hover {
  background: rgba(48, 111, 145, 0.08);
}

.ms-fs-menu-row__main {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 28px;
}

.ms-fs-menu-row__main--divider {
  opacity: 0.78;
}

.ms-fs-menu-entry-label {
  font-weight: 600;
  color: var(--ms-text);
}

.ms-fs-menu-toggle.ui.icon.basic.button {
  margin: 0;
  padding: 0.25rem;
  box-shadow: none;
  background: transparent;
}

.ms-fs-menu-toggle.ui.icon.basic.button:hover,
.ms-fs-menu-toggle.ui.icon.basic.button:focus,
.ms-fs-menu-toggle.ui.icon.basic.button:active {
  background: transparent;
  box-shadow: none;
}

.ms-fs-menu-compact-hint {
  font-size: 0.84rem;
  line-height: 1.4;
  color: rgba(31, 42, 51, 0.7);
}

.ms-fs-menu-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ms-fs-menu-breadcrumb {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0.25rem 0.5rem;
  border: 1px solid rgba(48, 111, 145, 0.14);
  background: #fff;
  color: var(--ms-text);
  font-size: 0.84rem;
  font-weight: 600;
}

.ms-fs-menu-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.ms-fs-menu-actions__buttons {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ms-auth-shell {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 3rem clamp(1.25rem, 4vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top left, rgba(95, 178, 213, 0.24), transparent 28%),
    radial-gradient(circle at bottom right, rgba(95, 178, 213, 0.16), transparent 32%),
    radial-gradient(circle at bottom left, rgba(48, 111, 145, 0.2), transparent 34%),
    linear-gradient(115deg, #0b2330 0%, #123748 44%, #102b3b 44%, #17394d 100%);
}

.ms-auth-shell::before {
  content: "";
  position: absolute;
  inset: auto auto -18% -12%;
  width: min(44rem, 52vw);
  aspect-ratio: 1;
  border-radius: 0 !important;
  background: radial-gradient(circle, rgba(95, 178, 213, 0.16), rgba(95, 178, 213, 0) 68%);
  pointer-events: none;
}

.ms-auth-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 62%);
  pointer-events: none;
}

.ms-auth-shell__content {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(360px, 560px) minmax(360px, 460px);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
  justify-content: space-between;
}

.ms-auth-shell__showcase {
  color: #f4f8fb;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  width: min(100%, 60rem);
  max-width: 60rem;
  padding-right: 1rem;
}

.ms-auth-shell__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.ms-auth-shell__brand-subtitle {
  color: rgba(244, 248, 251, 0.72);
  line-height: 1.5;
}

.ms-auth-shell__story {
  max-width: 32rem;
}

.ms-auth-shell__story .ui.header {
  margin-bottom: 0.9rem;
  font-size: clamp(2rem, 3vw, 2.8rem);
}

.ms-auth-shell__story p {
  margin: 0;
  color: rgba(244, 248, 251, 0.78);
  font-size: 1.05rem;
  line-height: 1.7;
}

.ms-auth-shell__benefits.ui.list {
  margin: 0;
  width: min(100%, 31rem);
  padding: 1.25rem 1.4rem;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ms-auth-shell__benefits.ui.list > .item {
  padding: 1rem 0;
}

.ms-auth-shell__benefits .icon {
  color: var(--ms-accent);
}

.ms-auth-shell__benefits .header {
  color: #f9fcfe;
}

.ms-auth-shell__benefits .description {
  color: rgba(244, 248, 251, 0.7);
  line-height: 1.6;
}

.ms-auth-shell__form {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

.ms-auth-card {
  width: min(100%, 440px);
  padding: clamp(2rem, 3vw, 2.75rem);
  border-radius: 0 !important;
  border: 1px solid rgba(48, 111, 145, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 253, 0.98));
  box-shadow:
    0 28px 60px rgba(17, 35, 46, 0.14),
    0 8px 18px rgba(17, 35, 46, 0.06);
}

.ms-auth-card--compact {
  width: min(100%, 420px);
}

.ms-auth-card__intro {
  margin-bottom: 1.5rem;
}

.ms-auth-card__intro h1 {
  margin: 0 0 0.75rem;
  color: var(--ms-primary-darker);
  font-size: clamp(2rem, 4vw, 2.6rem);
}

.ms-auth-card__intro p {
  margin: 0;
  color: rgba(31, 42, 51, 0.72);
  line-height: 1.65;
}

.ms-auth-card__eyebrow.ui.header {
  margin: 0 0 0.75rem;
  color: var(--ms-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ms-auth-card__callout.ui.message {
  margin-top: 1.25rem;
}

.ms-auth-card__footer {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.ms-auth-card__footer p {
  margin: 0;
  color: rgba(31, 42, 51, 0.72);
  line-height: 1.55;
}

.ms-auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ms-auth-form .field {
  margin: 0;
}

.ms-auth-form__input {
  width: 100%;
}

.ms-auth-form__input > input {
  width: 100%;
}

.ms-auth-form__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.ms-auth-form__label-row a {
  font-size: 0.9rem;
  color: var(--ms-primary-dark);
}

/* Звёздочка обязательного поля: у Semantic она ставится только прямому потомку-label, а в строке с ссылкой
   label обёрнут — пароль выглядел необязательным рядом с отмеченной почтой. */
.ui.form .required.field > .ms-auth-form__label-row > label::after {
  margin: -0.2em 0 0 0.2em;
  content: "*";
  color: #db2828;
}

.ms-auth-form__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ms-auth-form__validation {
  margin-top: 0.45rem !important;
}

.ms-admin-users__status-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.ms-admin-users__status-note {
  font-size: 0.85rem;
  color: rgba(31, 42, 51, 0.7);
}

.ms-account-shell {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.2rem !important;
}

.ms-account-shell__nav {
  min-width: 0;
}

.ms-account-shell__content {
  min-width: 0;
}

.ms-account-nav.ui.menu {
  width: 100%;
  margin: 0;
  padding: 0.65rem;
  border: none;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(244, 248, 251, 0.9), rgba(250, 252, 253, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.ms-account-nav.ui.menu .item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0 !important;
  color: rgba(31, 42, 51, 0.74);
  margin: 0.1rem 0;
}

.ms-account-nav.ui.menu .item i.icon {
  color: var(--ms-primary);
}

.ms-account-nav.ui.menu .item:hover {
  background: rgba(48, 111, 145, 0.08);
  color: var(--ms-primary-darker);
}

.ms-account-nav.ui.menu .item.active {
  background: linear-gradient(135deg, rgba(48, 111, 145, 0.12), rgba(95, 178, 213, 0.08));
  color: var(--ms-primary-darker);
  font-weight: 700;
}

.ms-account-nav.ui.menu .item.active i.icon {
  color: var(--ms-primary-dark);
}

.ms-account-shell__content > * + * {
  margin-top: 1rem;
}

.ms-account-shell__content h3 {
  margin: 0 0 1rem;
  color: var(--ms-primary-darker);
  font-size: 1.5rem;
}

.ms-account-shell__content h4 {
  color: var(--ms-primary-darker);
}

.ms-account-shell__content p,
.ms-auth-shell__form:not(:has(.ms-auth-card)) p {
  color: rgba(31, 42, 51, 0.72);
  line-height: 1.65;
}

.ms-account-shell__content hr,
.ms-auth-shell__form:not(:has(.ms-auth-card)) hr {
  border: none;
  height: 1px;
  background: rgba(48, 111, 145, 0.12);
  margin: 1rem 0 1.5rem;
}

.ms-account-shell__content .row,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 0;
}

.ms-account-shell__content [class*="col-"],
.ms-auth-shell__form:not(:has(.ms-auth-card)) [class*="col-"] {
  width: 100%;
  max-width: 720px;
  min-width: 0;
}

.ms-account-shell__content form,
.ms-auth-shell__form:not(:has(.ms-auth-card)) form,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .row {
  width: 100%;
}

.ms-account-shell__content .form-floating,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .form-floating {
  margin: 0 0 1rem;
}

.ms-account-shell__content .form-floating > .form-label,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .form-floating > .form-label {
  display: block;
  margin-bottom: 0.45rem;
  color: rgba(31, 42, 51, 0.72);
  font-weight: 600;
}

.ms-account-shell__content .form-control,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .form-control {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 0 !important;
  border: 1px solid rgba(48, 111, 145, 0.16);
  background: #ffffff;
  color: var(--ms-text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ms-account-shell__content .form-control:focus,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .form-control:focus {
  outline: none;
  border-color: rgba(48, 111, 145, 0.38);
  box-shadow: 0 0 0 4px rgba(95, 178, 213, 0.14);
}

.ms-account-shell__content .text-danger,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .text-danger {
  display: block;
  margin-top: 0.45rem;
  color: #9f3a38 !important;
}

.ms-account-shell__content .btn,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .btn,
.ms-account-shell__content .btn-link,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .btn-link,
.ms-account-shell__content passkey-submit::part(button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.8rem 1.15rem;
  border-radius: 0 !important;
  border: 1px solid rgba(48, 111, 145, 0.12);
  background: rgba(255, 255, 255, 0.95);
  color: var(--ms-primary-darker);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.ms-account-shell__content .btn:hover,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .btn:hover,
.ms-account-shell__content .btn-link:hover,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .btn-link:hover {
  transform: translateY(-1px);
  border-color: rgba(48, 111, 145, 0.18);
  box-shadow: 0 10px 24px rgba(16, 29, 38, 0.08);
  text-decoration: none;
}

.ms-account-shell__content .btn-primary,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .btn-primary {
  background: linear-gradient(135deg, var(--ms-primary), #3d8fc4);
  border-color: transparent;
  color: #ffffff;
}

.ms-account-shell__content .btn-danger,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .btn-danger {
  background: linear-gradient(135deg, #9f3a38, #c2554a);
  border-color: transparent;
  color: #ffffff;
}

.ms-account-shell__content .btn-link,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .btn-link {
  min-height: auto;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--ms-primary-dark);
  font-weight: 600;
}

.ms-account-shell__content .w-100,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .w-100 {
  width: 100%;
}

.ms-account-shell__content .checkbox,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .checkbox {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.5rem 0 1rem;
}

.ms-account-shell__content .checkbox input,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .checkbox input {
  margin: 0;
}

.ms-account-shell__content .alert,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .alert {
  padding: 1rem 1.1rem;
  border-radius: 0 !important;
  border: 1px solid rgba(48, 111, 145, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 252, 0.96));
  color: rgba(31, 42, 51, 0.78);
}

.ms-account-shell__content .alert-warning,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .alert-warning {
  border-color: rgba(242, 176, 32, 0.28);
  background: linear-gradient(180deg, rgba(255, 249, 230, 0.94), rgba(255, 253, 244, 0.96));
}

.ms-account-shell__content .alert-danger,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .alert-danger {
  border-color: rgba(159, 58, 56, 0.24);
  background: linear-gradient(180deg, rgba(253, 242, 242, 0.96), rgba(255, 248, 248, 0.96));
}

.ms-account-shell__content .alert-info,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .alert-info {
  border-color: rgba(48, 111, 145, 0.18);
  background: linear-gradient(180deg, rgba(240, 248, 252, 0.96), rgba(248, 252, 254, 0.96));
}

.ms-account-shell__content .input-group,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .input-group {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
}

.ms-account-shell__content .input-group-append,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .input-group-append {
  display: flex;
}

.ms-account-shell__content .input-group-text,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .input-group-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 0.85rem 1rem;
  border-radius: 0 !important;
  border: 1px solid rgba(48, 111, 145, 0.12);
  background: rgba(244, 248, 251, 0.9);
}

.ms-account-shell__content .table,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(48, 111, 145, 0.1);
  border-radius: 0 !important;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
}

.ms-account-shell__content .table th,
.ms-account-shell__content .table td,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .table th,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(48, 111, 145, 0.08);
  text-align: left;
}

.ms-account-shell__content .table th,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .table th {
  background: #f6fafc;
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ms-account-shell__content .table tr:last-child td,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .table tr:last-child td {
  border-bottom: none;
}

.ms-account-shell__content .list,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .list {
  padding-left: 1.1rem;
  color: rgba(31, 42, 51, 0.72);
}

.ms-account-shell__content .recovery-code,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .recovery-code {
  display: inline-flex;
  padding: 0.45rem 0.7rem;
  margin: 0.15rem 0;
  border-radius: 0 !important;
  background: rgba(24, 71, 114, 0.08);
  color: var(--ms-primary-darker);
  font-weight: 700;
}

.ms-auth-shell__form:not(:has(.ms-auth-card)) {
  display: block;
  width: min(100%, 440px);
  padding: clamp(2rem, 3vw, 2.5rem);
  border-radius: 0 !important;
  border: 1px solid rgba(48, 111, 145, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 253, 0.98));
  box-shadow: 0 28px 60px rgba(17, 35, 46, 0.14), 0 8px 18px rgba(17, 35, 46, 0.06);
  justify-self: end;
}

.ms-auth-shell__form:not(:has(.ms-auth-card)) > h1,
.ms-auth-shell__form:not(:has(.ms-auth-card)) > h2,
.ms-auth-shell__form:not(:has(.ms-auth-card)) > h3 {
  color: var(--ms-primary-darker);
  margin: 0 0 0.75rem;
}

.ms-auth-shell__form:not(:has(.ms-auth-card)) > h1 {
  font-size: 2rem;
}

.ms-auth-shell__form:not(:has(.ms-auth-card)) .row + p,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .row + div,
.ms-auth-shell__form:not(:has(.ms-auth-card)) .alert + .row {
  margin-top: 1rem;
}

.ms-detail-tabs .ui.top.attached.tabular.menu {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  border: none;
  background: transparent;
}

.ms-detail-tabs .ui.top.attached.tabular.menu .item {
  margin: 0;
  border: 1px solid rgba(48, 111, 145, 0.1);
  border-radius: 0 !important;
  background: rgba(244, 248, 251, 0.92);
  color: rgba(31, 42, 51, 0.7);
}

.ms-detail-tabs .ui.top.attached.tabular.menu .item.active {
  background: linear-gradient(135deg, rgba(48, 111, 145, 0.12), rgba(95, 178, 213, 0.08));
  color: var(--ms-primary-darker);
  border-color: rgba(48, 111, 145, 0.18);
  font-weight: 700;
}

.ms-detail-tabs .ui.bottom.attached.segment {
  border: none !important;
  box-shadow: none !important;
  background: transparent;
  padding: 0.5rem 0 0;
}

.ms-feature-editor .ui.form > .field,
.ms-feature-editor .ui.form > .fields,
.ms-detail-tabs .ui.form > .field,
.ms-detail-tabs .ui.form > .fields {
  margin-bottom: 1rem;
}

.ms-feature-editor .ui.form .field > label,
.ms-detail-tabs .ui.form .field > label {
  color: rgba(31, 42, 51, 0.72);
  font-weight: 700;
}

.ms-feature-editor .ui.table,
.ms-detail-tabs .ui.table {
  margin-top: 1rem;
}

.ms-job-detail .ui.stackable.grid {
  margin: 0;
}

.ms-job-detail .ui.stackable.grid > .column {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.ms-job-detail .ui.segment {
  border-radius: 0 !important;
  border: 1px solid rgba(48, 111, 145, 0.1) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 252, 0.98)) !important;
  box-shadow: none !important;
}

.ms-job-detail .ui.progress .bar {
  background: linear-gradient(135deg, var(--ms-primary), #3d8fc4);
}

.ms-feature-deploy-task {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ms-feature-deploy-task__panel {
  padding: 1.15rem 1.25rem;
}

.ms-feature-deploy-task__overview {
  background: linear-gradient(180deg, rgba(249, 252, 253, 0.98), rgba(255, 255, 255, 0.98));
}

.ms-feature-deploy-task__overview-copy {
  min-width: 0;
  margin-bottom: 1rem;
}

.ms-feature-deploy-task__title {
  margin-bottom: 0;
  font-size: clamp(1.5rem, 1.9vw, 1.95rem);
}

.ms-feature-deploy-task__status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(48, 111, 145, 0.14);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ms-primary-darker);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ms-feature-deploy-task__status-badge .icon {
  margin: 0;
}

.ms-feature-deploy-task__status-badge--success {
  border-color: rgba(35, 120, 79, 0.18);
  background: rgba(234, 248, 239, 0.96);
  color: #23784f;
}

.ms-feature-deploy-task__status-badge--failed {
  border-color: rgba(159, 58, 56, 0.18);
  background: rgba(253, 239, 239, 0.96);
  color: #9f3a38;
}

.ms-feature-deploy-task__status-badge--running {
  border-color: rgba(32, 94, 135, 0.18);
  background: rgba(236, 245, 251, 0.96);
  color: #205e87;
}

.ms-feature-deploy-task__status-badge--pending,
.ms-feature-deploy-task__status-badge--stopped {
  border-color: rgba(110, 124, 137, 0.16);
  background: rgba(244, 247, 249, 0.96);
  color: #4b5a67;
}

.ms-feature-deploy-task__overview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.85rem;
}

.ms-feature-deploy-task__overview-grid .ms-readonly-field {
  min-height: 0;
  padding: 0.8rem 0.9rem;
}

.ms-feature-deploy-task__content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.9fr);
  gap: 1rem;
  align-items: stretch;
}

.ms-feature-deploy-task__side-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ms-feature-deploy-task__progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.ms-feature-deploy-task__progress-copy {
  min-width: 0;
}

.ms-feature-deploy-task__progress-label {
  color: var(--ms-primary-darker);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.ms-feature-deploy-task__progress-message {
  margin-top: 0.24rem;
  color: rgba(31, 42, 51, 0.7);
  line-height: 1.45;
}

.ms-feature-deploy-task__progress-value {
  flex: 0 0 auto;
  color: var(--ms-primary-darker);
  font-size: 1.22rem;
  font-weight: 700;
  line-height: 1;
}

.ms-feature-deploy-task__progress-rail {
  position: relative;
  height: 0.85rem;
  margin-bottom: 0.95rem;
  overflow: hidden;
  border: 1px solid rgba(48, 111, 145, 0.1);
  background: rgba(232, 238, 243, 0.9);
}

.ms-feature-deploy-task__progress-bar {
  height: 100%;
  background: linear-gradient(135deg, var(--ms-primary), #3d8fc4);
}

.ms-feature-deploy-task__details-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ms-feature-deploy-task__details-grid .ms-readonly-field {
  min-height: 0;
}

.ms-feature-deploy-task__status-panel {
  display: flex;
  flex-direction: column;
}

.ms-feature-deploy-task__step-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 0.9rem;
}

.ms-feature-deploy-task__status-card.ui.segment {
  margin-top: 0;
}

.ms-feature-deploy-task__step-stats .ms-readonly-field {
  min-height: 0;
}

.ms-feature-deploy-task__empty-copy {
  margin: 0.35rem 0 0;
  color: rgba(31, 42, 51, 0.7);
}

.ms-feature-deploy-task__steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ms-feature-deploy-task__step {
  border: 1px solid rgba(48, 111, 145, 0.1);
  background: rgba(255, 255, 255, 0.98);
  overflow: hidden;
}

.ms-feature-deploy-task__step.is-expanded {
  border-color: rgba(48, 111, 145, 0.16);
}

.ms-feature-deploy-task__step-toggle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: none;
  background: transparent;
  text-align: left;
}

.ms-feature-deploy-task__step-main {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  min-width: 0;
  flex: 1 1 auto;
}

.ms-feature-deploy-task__step-chevron,
.ms-feature-deploy-task__step-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  align-self: baseline;
}

.ms-feature-deploy-task__step-chevron .icon,
.ms-feature-deploy-task__step-status .icon {
  margin: 0;
}

.ms-feature-deploy-task__step-status.green {
  color: #23784f;
}

.ms-feature-deploy-task__step-status.red {
  color: #9f3a38;
}

.ms-feature-deploy-task__step-status.blue {
  color: #205e87;
}

.ms-feature-deploy-task__step-status.grey {
  color: #70808c;
}

.ms-feature-deploy-task__step-title {
  min-width: 0;
  color: var(--ms-primary-darker);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ms-feature-deploy-task__step-meta {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.38rem;
  flex: 0 0 auto;
  white-space: nowrap;
}

.ms-feature-deploy-task__step-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.48rem;
  border: 1px solid rgba(48, 111, 145, 0.14);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ms-feature-deploy-task__step-pill--green {
  border-color: rgba(35, 120, 79, 0.16);
  background: rgba(234, 248, 239, 0.96);
  color: #23784f;
}

.ms-feature-deploy-task__step-pill--red {
  border-color: rgba(159, 58, 56, 0.16);
  background: rgba(253, 239, 239, 0.96);
  color: #9f3a38;
}

.ms-feature-deploy-task__step-pill--blue {
  border-color: rgba(32, 94, 135, 0.16);
  background: rgba(236, 245, 251, 0.96);
  color: #205e87;
}

.ms-feature-deploy-task__step-pill--grey {
  border-color: rgba(110, 124, 137, 0.14);
  background: rgba(244, 247, 249, 0.96);
  color: #4b5a67;
}

.ms-feature-deploy-task__step-order {
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ms-feature-deploy-task__step-content {
  padding: 0 1rem 1rem 3.85rem;
  border-top: 1px solid rgba(48, 111, 145, 0.08);
  background: rgba(249, 252, 253, 0.96);
}

.ms-feature-deploy-task__step-message {
  margin-top: 0.85rem;
  color: rgba(31, 42, 51, 0.76);
  line-height: 1.5;
}

.ms-feature-deploy-task__step-log-empty {
  margin-top: 0.85rem;
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.9rem;
}

.ms-feature-deploy-task__step-log-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 18rem;
  margin-top: 0.85rem;
  overflow: auto;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(48, 111, 145, 0.08);
  background: #fff;
  scrollbar-gutter: stable;
}

.ms-feature-deploy-task__step-log-line {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.ms-feature-deploy-task__step-log-time {
  flex: 0 0 auto;
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.77rem;
  font-weight: 700;
  white-space: nowrap;
}

.ms-feature-deploy-task__step-log-message {
  flex: 1 1 auto;
  color: rgba(31, 42, 51, 0.8);
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.83rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ms-feature-deploy-task__lifecycle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.ms-feature-deploy-task__lifecycle-stage {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
  align-items: stretch;
}

.ms-feature-deploy-task__lifecycle-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
}

.ms-feature-deploy-task__lifecycle-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1px solid rgba(48, 111, 145, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 251, 0.98));
  color: var(--ms-primary-dark);
  box-shadow: 0 10px 22px rgba(16, 29, 38, 0.08);
  flex: 0 0 2.9rem;
  position: relative;
  z-index: 1;
}

.ms-feature-deploy-task__lifecycle-node .icon {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  font-size: 1.15rem;
  line-height: 1;
}

.ms-feature-deploy-task__lifecycle-line {
  position: absolute;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(212, 221, 229, 0.96);
}

.ms-feature-deploy-task__lifecycle-line--left {
  left: 0;
  right: calc(50% + 1.9rem);
}

.ms-feature-deploy-task__lifecycle-line--right {
  left: calc(50% + 1.9rem);
  right: 0;
}

.ms-feature-deploy-task__lifecycle-line--complete {
  background: linear-gradient(90deg, rgba(35, 120, 79, 0.92), rgba(126, 188, 153, 0.88));
}

.ms-feature-deploy-task__lifecycle-line--active {
  background: linear-gradient(90deg, rgba(32, 94, 135, 0.92), rgba(114, 173, 212, 0.88));
}

.ms-feature-deploy-task__lifecycle-line--failed {
  background: linear-gradient(90deg, rgba(159, 58, 56, 0.92), rgba(222, 139, 138, 0.88));
}

.ms-feature-deploy-task__lifecycle-line--pending {
  background: rgba(206, 217, 226, 0.96);
}

.ms-feature-deploy-task__lifecycle-surface {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-height: 8.2rem;
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid rgba(48, 111, 145, 0.1);
  background: linear-gradient(180deg, rgba(252, 253, 254, 0.98), rgba(247, 250, 252, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.ms-feature-deploy-task__lifecycle-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.ms-feature-deploy-task__lifecycle-label {
  color: var(--ms-primary-darker);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

.ms-feature-deploy-task__lifecycle-state {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.48rem;
  border: 1px solid rgba(48, 111, 145, 0.12);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.ms-feature-deploy-task__lifecycle-time {
  color: rgba(31, 42, 51, 0.82);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}

.ms-feature-deploy-task__lifecycle-note {
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.86rem;
  line-height: 1.45;
}

.ms-feature-deploy-task__lifecycle-stage--complete .ms-feature-deploy-task__lifecycle-node {
  border-color: rgba(35, 120, 79, 0.16);
  background: rgba(234, 248, 239, 0.96);
  color: #23784f;
}

.ms-feature-deploy-task__lifecycle-stage--complete .ms-feature-deploy-task__lifecycle-surface {
  border-color: rgba(35, 120, 79, 0.12);
  background: linear-gradient(180deg, rgba(248, 253, 250, 0.98), rgba(238, 249, 243, 0.98));
}

.ms-feature-deploy-task__lifecycle-stage--complete .ms-feature-deploy-task__lifecycle-state {
  border-color: rgba(35, 120, 79, 0.16);
  background: rgba(234, 248, 239, 0.96);
  color: #23784f;
}

.ms-feature-deploy-task__lifecycle-stage--active .ms-feature-deploy-task__lifecycle-node {
  border-color: rgba(32, 94, 135, 0.18);
  background: rgba(236, 245, 251, 0.96);
  color: #205e87;
}

.ms-feature-deploy-task__lifecycle-stage--active .ms-feature-deploy-task__lifecycle-surface {
  border-color: rgba(32, 94, 135, 0.14);
  background: linear-gradient(180deg, rgba(249, 252, 255, 0.98), rgba(239, 247, 252, 0.98));
}

.ms-feature-deploy-task__lifecycle-stage--active .ms-feature-deploy-task__lifecycle-state {
  border-color: rgba(32, 94, 135, 0.16);
  background: rgba(236, 245, 251, 0.96);
  color: #205e87;
}

.ms-feature-deploy-task__lifecycle-stage--failed .ms-feature-deploy-task__lifecycle-node {
  border-color: rgba(159, 58, 56, 0.18);
  background: rgba(253, 239, 239, 0.96);
  color: #9f3a38;
}

.ms-feature-deploy-task__lifecycle-stage--failed .ms-feature-deploy-task__lifecycle-surface {
  border-color: rgba(159, 58, 56, 0.14);
  background: linear-gradient(180deg, rgba(255, 250, 250, 0.98), rgba(253, 241, 241, 0.98));
}

.ms-feature-deploy-task__lifecycle-stage--failed .ms-feature-deploy-task__lifecycle-state {
  border-color: rgba(159, 58, 56, 0.16);
  background: rgba(253, 239, 239, 0.96);
  color: #9f3a38;
}

.ms-feature-deploy-task__lifecycle-stage--pending .ms-feature-deploy-task__lifecycle-node {
  border-color: rgba(110, 124, 137, 0.16);
  background: rgba(244, 247, 249, 0.96);
  color: #4b5a67;
}

.ms-feature-deploy-task__lifecycle-stage--pending .ms-feature-deploy-task__lifecycle-surface {
  border-color: rgba(110, 124, 137, 0.1);
  background: linear-gradient(180deg, rgba(251, 252, 253, 0.98), rgba(245, 248, 250, 0.98));
}

.ms-feature-deploy-task__lifecycle-stage--pending .ms-feature-deploy-task__lifecycle-state {
  border-color: rgba(110, 124, 137, 0.14);
  background: rgba(244, 247, 249, 0.96);
  color: #4b5a67;
}

@media (max-width: 1670px) {
  .ms-feature-deploy-task__overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1400px) {
  .ms-feature-deploy-task__content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .ms-feature-deploy-task__overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ms-feature-deploy-task__lifecycle {
    grid-template-columns: 1fr;
  }

  .ms-feature-deploy-task__lifecycle-surface {
    min-height: 0;
  }

  .ms-feature-deploy-task__details-grid,
  .ms-feature-deploy-task__step-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .ms-feature-deploy-task__progress-head,
  .ms-feature-deploy-task__step-toggle {
    flex-direction: column;
  }

  .ms-feature-deploy-task__step-meta {
    align-items: flex-start;
  }

  .ms-feature-deploy-task__overview-grid {
    grid-template-columns: 1fr;
  }

  .ms-feature-deploy-task__step-content {
    padding-left: 1rem;
  }

  .ms-feature-deploy-task__lifecycle-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .ms-feature-deploy-task__step-log-line {
    flex-direction: column;
    gap: 0.2rem;
  }
}

.ms-workbench {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid rgba(48, 111, 145, 0.14);
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 252, 253, 0.98));
  box-shadow: 0 16px 36px rgba(16, 29, 38, 0.05);
  overflow: hidden;
}

.ms-workbench__topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding: 1.35rem 1.5rem 1.15rem;
  border-bottom: 1px solid rgba(48, 111, 145, 0.12);
  background: linear-gradient(180deg, rgba(247, 251, 253, 0.98), rgba(255, 255, 255, 0.95));
}

/* Основа заголовка — 22rem, а не 40rem: при пяти кнопках действий (список спецификаций) панель
   уезжала под заголовок уже на 1440px, хотя места в строке хватало. */
.ms-workbench__topbar-main {
  flex: 1 1 22rem;
  min-width: 0;
}

.ms-workbench__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0 !important;
  border: 1px solid rgba(48, 111, 145, 0.14);
  background: rgba(48, 111, 145, 0.06);
  color: var(--ms-primary-dark);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.ms-workbench__eyebrow .icon {
  margin: 0;
}

.ms-workbench__headline {
  min-width: 0;
}

.ms-workbench__title {
  margin: 0;
  color: var(--ms-primary-darker);
  font-size: clamp(1.7rem, 2vw, 2.15rem);
  line-height: 1.15;
}

.ms-workbench__subtitle {
  margin: 0.5rem 0 0;
  max-width: 62rem;
  color: rgba(31, 42, 51, 0.7);
  line-height: 1.55;
}

.ms-workbench__actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.ms-workbench__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid rgba(48, 111, 145, 0.1);
  background: rgba(251, 253, 254, 0.95);
}

.ms-workbench__summary-item {
  min-width: 0;
  padding: 0.95rem 1.5rem;
  border-right: 1px solid rgba(48, 111, 145, 0.08);
}

.ms-workbench__summary-item:last-child {
  border-right: none;
}

.ms-workbench__summary-label {
  display: block;
  margin-bottom: 0.4rem;
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ms-workbench__summary-value {
  display: block;
  color: var(--ms-primary-darker);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.45;
  word-break: break-word;
}

.ms-workbench__tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  border-bottom: 1px solid rgba(48, 111, 145, 0.1);
  background: #fff;
}

.ms-workbench__tab {
  margin: 0;
  padding: 0.95rem 1.15rem;
  border: none;
  border-right: 1px solid rgba(48, 111, 145, 0.08);
  background: transparent;
  color: rgba(31, 42, 51, 0.72);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.ms-workbench__tab:last-child {
  border-right: none;
}

.ms-workbench__tab:hover,
.ms-workbench__tab:focus-visible {
  background: rgba(48, 111, 145, 0.05);
  color: var(--ms-primary-darker);
  outline: none;
}

.ms-workbench__tab.active {
  background: linear-gradient(180deg, rgba(241, 247, 250, 0.95), rgba(255, 255, 255, 0.98));
  color: var(--ms-primary-darker);
  border-bottom-color: transparent;
  box-shadow: inset 0 -3px 0 var(--ms-primary);
}

.ms-workbench__body {
  flex: 1 1 auto;
  min-height: 30rem;
  padding: 1.5rem;
  background: linear-gradient(180deg, rgba(250, 252, 253, 0.96), rgba(255, 255, 255, 0.98));
}

.ms-workbench__body > * + * {
  margin-top: 1rem;
}

.ms-workbench__body--state {
  display: flex;
  align-items: stretch;
}

.ms-workbench__loading {
  width: 100%;
}

.ms-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid rgba(48, 111, 145, 0.12);
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 24px rgba(16, 29, 38, 0.04);
  padding: 1.35rem;
}

.ms-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.ms-panel__title {
  margin: 0;
  color: var(--ms-primary-darker);
  font-size: 1.12rem;
  line-height: 1.25;
}

.ms-panel__subtitle {
  margin: 0.4rem 0 0;
  max-width: 48rem;
  color: rgba(31, 42, 51, 0.7);
  line-height: 1.55;
}

.ms-panel__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ms-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.ms-readonly-field {
  min-width: 0;
  min-height: 5.5rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(48, 111, 145, 0.12);
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(251, 253, 254, 0.98), rgba(247, 250, 252, 0.98));
}

.ms-readonly-field--wide {
  grid-column: 1 / -1;
}

.ms-readonly-field__label {
  display: block;
  margin-bottom: 0.45rem;
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ms-readonly-field__value {
  color: var(--ms-text);
  font-weight: 600;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}

.ms-data-table {
  border: 1px solid rgba(48, 111, 145, 0.12);
  border-radius: 0 !important;
  background: #fff;
  overflow: hidden;
}

.ms-data-table .ui.table {
  margin: 0;
  border: none;
  border-radius: 0 !important;
  box-shadow: none;
}

.ms-data-table .ui.celled.table tr td,
.ms-data-table .ui.celled.table tr th {
  border-left-color: rgba(48, 111, 145, 0.08);
}

.ms-data-table .ui.table thead th {
  background: rgba(247, 250, 252, 0.95);
  color: rgba(31, 42, 51, 0.72);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ms-table-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}

.ms-table-sort-button:focus-visible {
  outline: 2px solid rgba(33, 133, 208, 0.55);
  outline-offset: 2px;
}

.ms-table-sort-indicator {
  position: relative;
  display: inline-block;
  flex: 0 0 0.7rem;
  width: 0.7rem;
  height: 0.85rem;
  color: rgba(31, 42, 51, 0.7);
}

.ms-table-sort-indicator::before,
.ms-table-sort-indicator::after {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  content: "";
  transform: translateX(-50%);
}

.ms-table-sort-indicator::before {
  top: 0.15rem;
  border-right: 0.2rem solid transparent;
  border-bottom: 0.25rem solid currentColor;
  border-left: 0.2rem solid transparent;
}

.ms-table-sort-indicator::after {
  bottom: 0.15rem;
  border-top: 0.25rem solid currentColor;
  border-right: 0.2rem solid transparent;
  border-left: 0.2rem solid transparent;
}

.ms-table-sort-indicator--asc::after,
.ms-table-sort-indicator--desc::before {
  opacity: 0;
}

.ms-data-table .ui.table tbody td {
  vertical-align: middle;
}

.ms-data-table .ui.mini.basic.buttons .ui.button {
  border-radius: 0 !important;
}

.ms-existing-feature-properties,
.ms-feature-editor-properties {
  padding: 0;
}

.ms-existing-feature-properties__header,
.ms-feature-editor-properties__header {
  margin-bottom: 1rem;
}

.ms-existing-feature-properties__table,
.ms-feature-editor-properties__table {
  table-layout: fixed;
  width: 100%;
  font-family: inherit;
}

/* BaseLine Properties table styled like the Feature Spec editor (toggle columns + horizontal scroll),
   while keeping the baseline-only Enabled column and the State (Synced/Added/Deleted/Changed) chips. */
.ms-baseline-properties__table.ui.table {
  min-width: 56rem;
  font-family: inherit;
}

.ms-baseline-properties__table.ui.table thead th {
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ms-baseline-properties__table.ui.table tbody td {
  vertical-align: middle;
  font-family: inherit;
}

.ms-baseline-properties__table .ms-module-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.ms-baseline-properties__table td input[type="text"] {
  width: 100%;
}

.ms-existing-feature-properties__col--display,
.ms-feature-editor-properties__col--display {
  width: 18%;
}

.ms-existing-feature-properties__col--property,
.ms-feature-editor-properties__col--property {
  width: 18%;
}

.ms-existing-feature-properties__col--type,
.ms-feature-editor-properties__col--type {
  width: 39%;
}

.ms-existing-feature-properties__col--format,
.ms-feature-editor-properties__col--format {
  width: 9%;
}

.ms-existing-feature-properties__col--flag,
.ms-feature-editor-properties__col--flag {
  width: 4.5%;
}

.ms-existing-feature-properties__col--actions,
.ms-feature-editor-properties__col--actions {
  width: 12%;
}

/* BaseLine feature-editor column rebalance (override, same specificity → later rule wins; does NOT
   touch the shared ms-existing-feature-properties widths). The 4th ("display") column carries the
   "Module state" cell (state chips + Mandatory/Unique/ReadOnly toggles + Format) and needs the most
   room; the Type column only holds a text input. */
.ms-feature-editor-properties__col--display {
  width: 49%;
}

.ms-feature-editor-properties__col--property {
  width: 16%;
}

.ms-feature-editor-properties__col--type {
  width: 18%;
}

.ms-feature-editor-properties__col--flag {
  width: 5%;
}

/* Module-state cell: chip row above a horizontal Mandatory/Unique/ReadOnly toggle row. The old narrow
   column forced each checkbox label to wrap into a vertical single-letter stack; keep them on one line. */
.ms-feature-editor-properties__cell .three.fields {
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0.5rem 0 0;
}

.ms-feature-editor-properties__cell .three.fields > .field {
  width: auto !important;
  white-space: nowrap;
}

.ms-feature-editor-properties__cell .ms-module-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.ms-existing-feature-properties__cell,
.ms-feature-editor-properties__cell {
  color: rgba(31, 42, 51, 0.94);
  font-size: 0.97rem;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ms-existing-feature-properties__cell--flag,
.ms-feature-editor-properties__cell--flag {
  color: rgba(31, 42, 51, 0.72);
  white-space: nowrap;
}

.ms-existing-feature-properties__cell--actions,
.ms-feature-editor-properties__cell--actions {
  white-space: nowrap;
}

.ms-existing-feature-properties__table.ui.table thead th,
.ms-feature-editor-properties__table.ui.table thead th {
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ms-existing-feature-properties__table.ui.table tbody td,
.ms-feature-editor-properties__table.ui.table tbody td {
  font-family: inherit;
}

.ms-existing-feature-properties__actions.ui.basic.buttons,
.ms-feature-editor-properties__actions.ui.basic.buttons {
  display: inline-flex;
  gap: 0.35rem;
}

.ms-existing-feature-properties__actions.ui.basic.buttons .button,
.ms-feature-editor-properties__actions.ui.basic.buttons .button {
  margin-left: 0 !important;
}

.ms-existing-feature-properties__action-button.ui.button,
.ms-feature-editor-properties__action-button.ui.button {
  font-family: inherit;
  font-weight: 500;
  color: rgba(31, 42, 51, 0.82);
  padding: 0.45rem 0.6rem;
  font-size: 0.83rem;
  line-height: 1.2;
}

.ms-existing-feature-properties__action-button.ui.button .icon,
.ms-feature-editor-properties__action-button.ui.button .icon {
  margin-right: 0.35rem;
}

.ms-existing-feature-page .ms-form-card input[disabled],
.ms-existing-feature-page .ms-form-card textarea[disabled],
.ms-existing-feature-page .ms-form-card select[disabled],
.ms-baseline-feature-editor-page .ms-form-card input[disabled],
.ms-baseline-feature-editor-page .ms-form-card textarea[disabled],
.ms-baseline-feature-editor-page .ms-form-card select[disabled],
.ms-feature-editor-page .ms-form-card input[disabled],
.ms-feature-editor-page .ms-form-card textarea[disabled],
.ms-feature-editor-page .ms-form-card select[disabled] {
  background: #f4f6f8 !important;
  color: rgba(31, 42, 51, 0.72) !important;
  border-color: rgba(48, 111, 145, 0.16) !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

.ms-feature-editor__muted {
  color: rgba(31, 42, 51, 0.7);
}

.ms-help-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ms-help-label > label {
  margin-bottom: 0 !important;
}

.ms-help-popover {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ms-help-popover__trigger.ui.basic.button {
  min-width: auto;
  margin: 0 !important;
  padding: 0 !important;
  color: #306f91 !important;
  line-height: 1;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.ms-help-popover__trigger.ui.basic.button:hover,
.ms-help-popover__trigger.ui.basic.button:focus-visible {
  color: #1f4258 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.ms-help-popover__panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 35;
  width: min(28rem, calc(100vw - 8rem));
  max-width: calc(100vw - 8rem);
  max-height: min(32rem, calc(100vh - 8rem));
  overflow: auto;
  padding: 0.9rem 1rem 1rem;
  background: #fff;
  border: 1px solid rgba(48, 111, 145, 0.16);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
  border-radius: 0.6rem;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  text-align: left;
}

.ms-help-popover__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.ms-help-popover__title {
  color: rgba(31, 42, 51, 0.96);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
}

.ms-help-popover__close.ui.basic.button {
  min-width: auto;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(31, 42, 51, 0.7) !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.ms-help-popover__content {
  color: rgba(31, 42, 51, 0.82);
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ms-help-popover__content p:last-child,
.ms-help-popover__content ul:last-child {
  margin-bottom: 0;
}

.ms-help-popover__content ul {
  padding-left: 1.2rem;
  white-space: normal;
}

.ms-help-popover__content code {
  white-space: pre-wrap;
  background: rgba(48, 111, 145, 0.08);
  border-radius: 0.25rem;
  padding: 0.08rem 0.3rem;
  font-size: 0.88em;
}

.ms-field-validation-cell {
  position: relative;
}

/* Красной становится только СОБСТВЕННАЯ ячейка-контрол: прямые поля якоря и триггер типа. Раньше правило
   било по всем input внутри ячейки, и поповер типа (он рендерится в ячейке) красил пустые поиск, умолчание,
   длины и образец как ошибки, едва строка свойства становилась невалидной. */
.ms-field-validation-cell.is-invalid > .ms-field-validation-anchor > input,
.ms-field-validation-cell.is-invalid > .ms-field-validation-anchor > select,
.ms-field-validation-cell.is-invalid > .ms-field-validation-anchor > textarea,
.ms-field-validation-cell.is-invalid > .ms-field-validation-anchor > .ed-type > .ed-type__trigger {
  border-color: #db2828 !important;
  background: #fffafa !important;
}

.ms-field-validation-anchor {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.ms-field-validation-anchor > input,
.ms-field-validation-anchor > select,
.ms-field-validation-anchor > textarea {
  min-width: 0;
  flex: 1 1 auto;
}

.ms-validation-popover {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.ms-validation-popover__trigger.ui.basic.button {
  /* SemanticUI делает кнопку inline-block, и глиф внутри садится на базовую линию строки: сама кнопка
     стояла по центру поля, а знак внутри неё — на 2.5px выше. Центрируем содержимое явно. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  min-width: 1.35rem;
  height: 1.35rem;
  margin: 0 !important;
  padding: 0 !important;
  color: #9f3a38 !important;
  line-height: 1;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.ms-validation-popover__trigger.ui.basic.button:hover,
.ms-validation-popover__trigger.ui.basic.button:focus-visible {
  color: #7f1d1c !important;
  background: rgba(159, 58, 56, 0.12) !important;
}

.ms-validation-popover__trigger .icon {
  width: auto;
  margin: 0 !important;
  font-size: 0.75rem;
}

.ms-validation-popover__panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 40;
  width: min(24rem, calc(100vw - 8rem));
  max-width: calc(100vw - 8rem);
  max-height: min(26rem, calc(100vh - 8rem));
  overflow: auto;
  padding: 0.85rem 0.95rem 0.95rem;
  background: #fff;
  border: 1px solid #d9a4a4;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
  border-radius: 0.5rem;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  text-align: left;
}

.ms-validation-popover__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.ms-validation-popover__title {
  color: #7d3534;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
}

.ms-validation-popover__close.ui.basic.button {
  min-width: auto;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(31, 42, 51, 0.7) !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.ms-validation-popover__content {
  color: #7d3534;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ms-validation-popover__content ul {
  margin: 0;
  padding-left: 1.1rem;
}

.ms-table-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ms-inline-field-help.ui.checkbox {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
}

.ms-inline-field-help.ui.checkbox .ms-help-popover {
  margin-left: 0.1rem;
}

@media (max-width: 960px) {
  .ms-help-popover__panel {
    width: min(24rem, calc(100vw - 3rem));
    max-width: calc(100vw - 3rem);
    max-height: min(28rem, calc(100vh - 4rem));
  }
}

.ms-data-table--square {
  border-radius: 0 !important;
  box-shadow: none;
}

.ms-data-table--square .ui.table {
  border-radius: 0 !important;
}

.ms-data-table--square .ui.celled.table {
  border-radius: 0 !important;
}

.ms-data-table--square .ui.celled.table tr:first-child th:first-child,
.ms-data-table--square .ui.celled.table tr:first-child th:last-child,
.ms-data-table--square .ui.celled.table tr:last-child td:first-child,
.ms-data-table--square .ui.celled.table tr:last-child td:last-child {
  border-radius: 0 !important;
}

.ms-empty-state--embedded.ui.segment {
  min-height: 14rem;
  margin: 0;
  border-radius: 0 !important;
}

.ms-content:has(.ms-existing-feature-page),
.ms-content:has(.ms-baseline-feature-editor-page) {
  padding: 0;
}

.ms-content:has(.ms-project-config-page) {
  padding: 0;
}

.ms-content__surface.ui.segment:has(.ms-existing-feature-page),
.ms-content__surface.ui.segment:has(.ms-baseline-feature-editor-page) {
  padding: 0 !important;
  border: none;
  border-radius: 0 !important;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

.ms-content__surface.ui.segment:has(.ms-project-config-page) {
  padding: 0 !important;
  border: none;
  border-radius: 0 !important;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

.ms-content__surface.ui.segment:has(.ms-existing-feature-page) .ms-page-shell,
.ms-content__surface.ui.segment:has(.ms-baseline-feature-editor-page) .ms-page-shell {
  padding: 0;
  gap: 0;
}

.ms-content__surface.ui.segment:has(.ms-project-config-page) .ms-page-shell {
  padding: 0;
  gap: 0;
}

.ms-page.ms-existing-feature-page,
.ms-page.ms-baseline-feature-editor-page {
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
}

.ms-page.ms-project-config-page {
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
}

.ms-existing-feature-page .ms-workbench,
.ms-baseline-feature-editor-page .ms-workbench {
  flex: 1 1 auto;
  min-height: 100%;
}

.ms-project-config-page .ms-workbench {
  flex: 1 1 auto;
  min-height: 100%;
  border: none;
  border-radius: 0 !important;
  box-shadow: none;
  background: transparent;
}

.ms-project-config-page .ms-workbench__topbar {
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(48, 111, 145, 0.08);
}

.ms-content:has(.ms-feature-spec-list-page),
.ms-content:has(.ms-feature-spec-editor-page),
.ms-content:has(.ms-product-line-tools-page),
.ms-content:has(.ms-project-list-page),
.ms-content:has(.ms-project-details-page),
.ms-content:has(.ms-dashboard-page),
.ms-content:has(.ms-admin-users-page),
.ms-content:has(.ms-background-jobs-page),
.ms-content:has(.ms-background-job-detail-page),
.ms-content:has(.ms-baseline-features-page),
.ms-content:has(.ms-feature-detail-page),
.ms-content:has(.ms-page--bleed) {
  padding: 0;
}

.ms-content__surface.ui.segment:has(.ms-feature-spec-list-page),
.ms-content__surface.ui.segment:has(.ms-feature-spec-editor-page),
.ms-content__surface.ui.segment:has(.ms-product-line-tools-page),
.ms-content__surface.ui.segment:has(.ms-project-list-page),
.ms-content__surface.ui.segment:has(.ms-project-details-page),
.ms-content__surface.ui.segment:has(.ms-dashboard-page),
.ms-content__surface.ui.segment:has(.ms-admin-users-page),
.ms-content__surface.ui.segment:has(.ms-background-jobs-page),
.ms-content__surface.ui.segment:has(.ms-background-job-detail-page),
.ms-content__surface.ui.segment:has(.ms-baseline-features-page),
.ms-content__surface.ui.segment:has(.ms-feature-detail-page),
.ms-content__surface.ui.segment:has(.ms-page--bleed) {
  padding: 0 !important;
  border: none;
  border-radius: 0 !important;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

.ms-content__surface.ui.segment:has(.ms-feature-spec-list-page) .ms-page-shell,
.ms-content__surface.ui.segment:has(.ms-feature-spec-editor-page) .ms-page-shell,
.ms-content__surface.ui.segment:has(.ms-product-line-tools-page) .ms-page-shell,
.ms-content__surface.ui.segment:has(.ms-project-list-page) .ms-page-shell,
.ms-content__surface.ui.segment:has(.ms-project-details-page) .ms-page-shell,
.ms-content__surface.ui.segment:has(.ms-dashboard-page) .ms-page-shell,
.ms-content__surface.ui.segment:has(.ms-admin-users-page) .ms-page-shell,
.ms-content__surface.ui.segment:has(.ms-background-jobs-page) .ms-page-shell,
.ms-content__surface.ui.segment:has(.ms-background-job-detail-page) .ms-page-shell,
.ms-content__surface.ui.segment:has(.ms-baseline-features-page) .ms-page-shell,
.ms-content__surface.ui.segment:has(.ms-feature-detail-page) .ms-page-shell,
.ms-content__surface.ui.segment:has(.ms-page--bleed) .ms-page-shell {
  padding: 0;
  gap: 0;
}

.ms-page.ms-feature-spec-list-page,
.ms-page.ms-feature-spec-editor-page,
.ms-page.ms-product-line-tools-page,
.ms-page.ms-project-list-page,
.ms-page.ms-project-details-page,
.ms-page.ms-dashboard-page,
.ms-page.ms-admin-users-page,
.ms-page.ms-background-jobs-page,
.ms-page.ms-background-job-detail-page,
.ms-page.ms-baseline-features-page,
.ms-page.ms-feature-detail-page,
.ms-page.ms-page--bleed {
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
}

.ms-feature-spec-list-page .ms-workbench,
.ms-feature-spec-editor-page .ms-workbench,
.ms-product-line-tools-page .ms-workbench,
.ms-project-list-page .ms-workbench,
.ms-project-details-page .ms-workbench,
.ms-dashboard-page .ms-workbench,
.ms-admin-users-page .ms-workbench,
.ms-background-jobs-page .ms-workbench,
.ms-background-job-detail-page .ms-workbench,
.ms-baseline-features-page .ms-workbench,
.ms-feature-detail-page .ms-workbench,
.ms-page--bleed .ms-workbench {
  flex: 1 1 auto;
  min-height: 100%;
  border: none;
  border-radius: 0 !important;
  box-shadow: none;
  background: transparent;
}

.ms-background-job-detail-page__actions {
  align-items: flex-start;
}

.ms-background-job-detail-page__status-slot {
  display: flex;
  align-items: center;
}

.ms-background-job-detail-page__task-actions {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.ms-background-job-detail-page__actions .ms-feature-deploy-task__status-badge {
  margin: 0 !important;
}

.ms-background-job-detail-page__body {
  padding: 0.9rem 1rem 1rem;
}

@media (max-width: 760px) {
  .ms-background-job-detail-page__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .ms-background-job-detail-page__status-slot,
  .ms-background-job-detail-page__task-actions {
    width: 100%;
  }
}

.ms-existing-features__body {
  padding: 1rem;
}

.ms-existing-features__section-copy {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ms-existing-features__section-header {
  align-items: center;
}

.ms-existing-features__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex: 1 1 24rem;
  flex-wrap: wrap;
}

.ms-existing-features__results {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(48, 111, 145, 0.12);
  background: rgba(247, 250, 252, 0.95);
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ms-existing-features__results-value {
  color: var(--ms-primary-darker);
  font-size: 1rem;
  letter-spacing: 0;
}

.ms-existing-features__search {
  flex: 1 1 20rem;
  min-width: min(100%, 20rem);
}

.ms-existing-features__table {
  table-layout: fixed;
}

.ms-existing-features__col--feature {
  width: 31%;
}

.ms-existing-features__col--code {
  width: 4%;
}

.ms-existing-features__col--namespace {
  width: 30%;
}

.ms-existing-features__col--menu {
  width: 12%;
}

.ms-existing-features__col--properties {
  width: 6.5%;
}

.ms-existing-features__col--synced {
  width: 7%;
}

.ms-existing-features__col--actions {
  width: 9.5%;
}

.ms-existing-features__table.ui.table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.ms-existing-features__table td {
  vertical-align: top;
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
}

.ms-existing-features__table.ui.table tbody tr:hover {
  background: rgba(247, 250, 252, 0.75);
}

.ms-existing-features__feature-cell {
  padding-right: 1rem !important;
}

.ms-existing-features__entity-link {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: inherit;
}

.ms-existing-features__entity-link:hover,
.ms-existing-features__entity-link:focus-visible {
  color: inherit;
}

.ms-existing-features__entity-title {
  color: var(--ms-primary-darker);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
}

.ms-existing-features__entity-link:hover .ms-existing-features__entity-title,
.ms-existing-features__entity-link:focus-visible .ms-existing-features__entity-title {
  color: var(--ms-primary);
}

.ms-existing-features__entity-subtitle,
.ms-existing-features__cell-muted {
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.84rem;
  line-height: 1.45;
  word-break: break-word;
}

.ms-existing-features__truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-existing-features__code-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.15rem;
  padding: 0.28rem 0.42rem;
  border: 1px solid rgba(48, 111, 145, 0.14);
  background: rgba(247, 250, 252, 0.9);
  color: rgba(31, 42, 51, 0.82);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

.ms-existing-features__code-badge--empty {
  color: rgba(31, 42, 51, 0.7);
}

.ms-existing-features__metric {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.24rem 0.42rem;
  background: rgba(24, 71, 114, 0.08);
  color: var(--ms-primary-darker);
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1;
}

.ms-existing-features__date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
}

.ms-existing-features__date-main {
  color: rgba(31, 42, 51, 0.84);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
}

.ms-existing-features__date-sub {
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.77rem;
  line-height: 1.2;
}

.ms-existing-features__actions {
  white-space: nowrap;
}

.ms-existing-features__actions .ui.button {
  min-width: 2.2rem;
}

.ms-baseline-features__body {
  padding: 1rem;
}

/* 6-column layout (no phantom "menu" column); widths sum to 100% so the fixed-layout table fills width. */
.ms-baseline-features__col--feature {
  width: 34%;
}

.ms-baseline-features__col--code {
  width: 6%;
}

.ms-baseline-features__col--modules {
  width: 24%;
}

.ms-baseline-features__col--access {
  width: 12%;
}

.ms-baseline-features__col--properties {
  width: 8%;
}

.ms-baseline-features__col--actions {
  width: 16%;
}

/* Inline sync progress on the list page (visible while a BaseLine sync job runs). */
.ms-baseline-sync-progress.ui.segment {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
}

.ms-baseline-sync-progress__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.ms-baseline-sync-progress__title {
  font-weight: 600;
  color: #1f2a33;
}

.ms-baseline-sync-progress__percent {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #306f91;
}

.ms-baseline-sync-progress__track {
  height: 0.5rem;
  background: rgba(48, 111, 145, 0.12);
  overflow: hidden;
}

.ms-baseline-sync-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, #306f91, #5fb2d5);
  transition: width 0.4s ease;
}

.ms-baseline-sync-progress__message {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: rgba(31, 42, 51, 0.7);
}

/* Feature-name link in the list (looks like the old title text, becomes a link to the details page). */
.ms-baseline-features__feature-link {
  color: #184772;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ms-baseline-features__feature-link:hover {
  color: #306f91;
  text-decoration: underline;
}

.ms-baseline-features__feature-stack {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ms-baseline-features__feature-line {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.ms-baseline-features__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border: 1px solid rgba(48, 111, 145, 0.14);
  background: rgba(247, 250, 252, 0.96);
  color: var(--ms-primary-darker);
}

.ms-baseline-features__feature-icon .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin: 0 !important;
  line-height: 1 !important;
  text-align: center;
}

.ms-baseline-features__feature-icon .icon::before {
  margin: 0;
  line-height: 1;
}

.ms-baseline-features__tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ms-baseline-features__tag,
.ms-baseline-features__access-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.9rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(48, 111, 145, 0.16);
  background: rgba(247, 250, 252, 0.96);
  color: var(--ms-text);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.ms-baseline-features__tag {
  justify-content: flex-start;
}

.ms-baseline-features__access-badge {
  min-width: 5.9rem;
}

.ms-baseline-features__access-badge--public {
  border-color: rgba(41, 122, 85, 0.2);
  background: rgba(226, 244, 235, 0.92);
  color: #226947;
}

.ms-baseline-features__access-badge--private {
  border-color: rgba(138, 80, 29, 0.2);
  background: rgba(251, 237, 220, 0.92);
  color: #9a5c1f;
}

.ms-baseline-features__access-badge--unknown {
  border-color: rgba(31, 42, 51, 0.12);
  background: rgba(247, 250, 252, 0.9);
  color: rgba(31, 42, 51, 0.7);
}

.ms-feature-spec-list__body,
.ms-feature-spec-editor__body {
  padding: 1rem;
}

.ms-feature-spec-editor__body {
  padding-top: 0;
}

.ms-project-list__body {
  padding: 1rem;
}

.ms-admin-users__body {
  padding: 1rem;
}

.ms-project-list__content {
  min-height: 20rem;
}

.ms-project-details__body {
  padding: 1rem;
}

.ms-dashboard__body {
  padding: 1rem;
}

.ms-dashboard__content {
  min-height: 20rem;
}

.ms-project-details__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.ms-project-details__card.ui.form {
  margin: 0;
  padding: 1rem;
  border: 1px solid #d5dce3;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  height: 100%;
  min-height: 13rem;
}

.ms-project-details__card .header {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f3f5a;
}

.ms-project-details__card .meta {
  color: #6a7784;
}

.ms-project-details__description {
  margin: 0;
  color: #334a5c;
  line-height: 1.45;
}

.ms-project-details__actions {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid #e1e8ef;
}

.ms-project-list__cards {
  gap: 1rem;
}

.ms-project-list-page .ms-project-directory__item.ui.form.ms-form-card {
  margin: 0;
  border: 1px solid #d5dce3;
  background: #ffffff;
  box-shadow: none;
}

.ms-project-list-page .ms-project-directory__title {
  gap: 0;
}

.ms-project-list-page .ms-project-directory__description {
  padding-left: 0;
}

.ms-product-line-tools__body {
  padding: 1rem;
}

.ms-product-line-tools__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.ms-product-line-tools__column {
  min-width: 0;
}

.ms-product-line-tool-card.ui.form {
  margin: 0;
  padding: 1rem;
  border: 1px solid #d5dce3;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 16rem;
}

.ms-product-line-tool-card .header {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1f3f5a;
  letter-spacing: 0.01em;
}

.ms-product-line-tool-card .meta {
  color: #6a7784;
}

.ms-product-line-tool-card__labels.ui.labels {
  margin-top: 0.55rem;
}

.ms-product-line-tool-card__actions {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid #e1e8ef;
}

.ms-feature-spec-list__content {
  min-height: 20rem;
}

.ms-feature-spec-list__empty.ui.segment {
  min-height: 11rem;
  margin: 0;
}

.ms-feature-spec-list__empty-text {
  margin-top: 1rem;
  text-align: center;
  color: #6f7780;
  font-size: 1rem;
}

.ms-feature-spec-editor__tabs {
  margin: 0 -1rem;
}

.ms-feature-spec-editor__tab-body {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ms-feature-spec-editor-page .ms-form-card.ui.form {
  margin: 0;
  padding: 1rem;
  border: 1px solid #d5dce3;
  background: #ffffff;
}

.ms-additional-info {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ms-additional-info__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.ms-additional-info__header .ms-help-label {
  margin: 0;
}

.ms-link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ms-primary-dark);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.ms-link-button:hover,
.ms-link-button:focus-visible {
  color: var(--ms-primary-darker);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.ms-additional-info__content {
  min-height: 2.2rem;
  color: #1f2a33;
  line-height: 1.5;
  word-break: break-word;
}

.ms-additional-info__content > :first-child {
  margin-top: 0;
}

.ms-additional-info__content > :last-child {
  margin-bottom: 0;
}

.ms-properties-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.ms-properties-toolbar__advanced-mode.ui.toggle.checkbox {
  min-width: 9.5rem;
}

.ms-properties-toolbar__advanced-mode.ui.toggle.checkbox label {
  color: #26333d;
  font-weight: 700;
}

.ms-additional-info-modal {
  width: min(72rem, calc(100vw - 2rem));
}

.ms-properties-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

.ms-properties-table.ui.table {
  min-width: 108rem;
  table-layout: fixed;
}

.ms-properties-table--compact.ui.table {
  min-width: 91rem;
}

.ms-properties-table--readonly.ui.table {
  min-width: 86rem;
}

.ms-properties-table--compact-readonly.ui.table {
  min-width: 70rem;
}

.ms-properties-table.ui.table thead th {
  white-space: nowrap;
}

.ms-properties-table.ui.table thead th:nth-child(1),
.ms-properties-table.ui.table thead th:nth-child(2),
.ms-properties-table.ui.table thead th:nth-child(3),
.ms-properties-table.ui.table thead th:nth-child(4) {
  width: 17rem;
}

.ms-properties-table.ui.table thead th:nth-child(5),
.ms-properties-table.ui.table thead th:nth-child(6),
.ms-properties-table.ui.table thead th:nth-child(7) {
  width: 9rem;
}

.ms-properties-table.ui.table thead th:nth-child(8) {
  width: 8.5rem;
}

.ms-properties-table--compact.ui.table thead th:nth-child(1),
.ms-properties-table--compact.ui.table thead th:nth-child(2),
.ms-properties-table--compact.ui.table thead th:nth-child(3) {
  width: 17rem;
}

.ms-properties-table--compact.ui.table thead th:nth-child(4),
.ms-properties-table--compact.ui.table thead th:nth-child(5),
.ms-properties-table--compact.ui.table thead th:nth-child(6) {
  width: 9rem;
}

.ms-properties-table--compact.ui.table thead th:nth-child(7) {
  width: 8.5rem;
}

.ms-properties-table--readonly.ui.table thead th:nth-child(1),
.ms-properties-table--readonly.ui.table thead th:nth-child(2),
.ms-properties-table--readonly.ui.table thead th:nth-child(3),
.ms-properties-table--readonly.ui.table thead th:nth-child(4) {
  width: 16rem;
}

.ms-properties-table--readonly.ui.table thead th:nth-child(5),
.ms-properties-table--readonly.ui.table thead th:nth-child(6),
.ms-properties-table--readonly.ui.table thead th:nth-child(7) {
  width: 8rem;
}

.ms-properties-table--compact-readonly.ui.table thead th:nth-child(1),
.ms-properties-table--compact-readonly.ui.table thead th:nth-child(2),
.ms-properties-table--compact-readonly.ui.table thead th:nth-child(3) {
  width: 16rem;
}

.ms-properties-table--compact-readonly.ui.table thead th:nth-child(4),
.ms-properties-table--compact-readonly.ui.table thead th:nth-child(5),
.ms-properties-table--compact-readonly.ui.table thead th:nth-child(6) {
  width: 8rem;
}

.ms-properties-table.ui.table .ms-table-heading {
  white-space: nowrap;
}

.ms-properties-table.ui.table .ui.toggle.checkbox {
  min-width: 4rem;
}

.ms-markdown-editor {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ms-markdown-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ms-markdown-editor__toolbar .ui.icon.button {
  min-width: 2.35rem;
}

.ms-markdown-editor__tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: fit-content;
  padding: 0.2rem;
  border: 1px solid rgba(48, 111, 145, 0.16);
  background: #f7fafc;
}

.ms-markdown-editor__tab {
  min-width: 5.5rem;
  padding: 0.45rem 0.8rem;
  border: 0;
  background: transparent;
  color: rgba(31, 42, 51, 0.72);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.ms-markdown-editor__tab.active {
  background: #ffffff;
  color: var(--ms-primary-darker);
  box-shadow: 0 1px 3px rgba(31, 42, 51, 0.12);
}

.ms-markdown-editor__tab:focus-visible {
  outline: 2px solid rgba(48, 111, 145, 0.35);
  outline-offset: 2px;
}

.ms-markdown-editor__panel {
  min-height: 20rem;
}

.ms-markdown-editor__panel textarea {
  min-height: 20rem;
  resize: vertical;
}

.ms-markdown-editor__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.85fr);
  gap: 0.8rem;
}

.ms-markdown-editor__grid textarea {
  min-height: 13rem;
  resize: vertical;
}

.ms-markdown-editor__preview {
  min-height: 13rem;
  max-height: 24rem;
  overflow: auto;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(48, 111, 145, 0.16);
  background: #f7fafc;
  color: #1f2a33;
  line-height: 1.45;
  word-break: break-word;
}

.ms-markdown-editor__preview > :first-child {
  margin-top: 0;
}

.ms-markdown-editor__preview > :last-child {
  margin-bottom: 0;
}

.ms-property-behavior-button.ui.button {
  color: #b78b13;
  border-color: rgba(183, 139, 19, 0.28) !important;
  background: #fff8d9 !important;
}

.ms-property-behavior-button.ui.button.is-filled {
  color: #1f2a33;
  border-color: #f5c400 !important;
  background: #ffd91a !important;
  box-shadow: inset 0 0 0 1px rgba(122, 91, 0, 0.15);
}

.ms-property-behavior-button.ui.button .icon {
  margin: 0;
}

.ms-property-actions-cell {
  min-width: 6rem;
  white-space: nowrap;
}

.ms-property-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}

.ms-property-actions .ui.icon.button {
  margin: 0;
  flex: 0 0 auto;
}

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

.ms-feature-spec-editor__revision-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid rgba(48, 111, 145, 0.1);
  align-items: start;
}

.ms-feature-spec-editor__revision-summary .ms-workbench__summary-item {
  padding: 0.7rem 1.15rem 0.8rem;
}

.ms-feature-spec-editor__revision-summary .ms-workbench__summary-label {
  margin-bottom: 0.32rem;
}

.ms-feature-spec-editor__revision-summary .ms-workbench__summary-value {
  font-size: 0.9rem;
  line-height: 1.3;
}

.ms-feature-spec-editor__snapshot-link {
  display: inline-block;
  width: fit-content;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ms-primary-dark);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
}

.ms-feature-spec-editor__snapshot-link:hover,
.ms-feature-spec-editor__snapshot-link:focus-visible {
  color: var(--ms-primary-darker);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.ms-feature-spec-editor__snapshot-link:disabled {
  cursor: default;
  opacity: 0.65;
}

.ms-feature-spec-editor__revision-message.ui.message {
  margin: 0;
}

.ms-feature-spec-editor__revision-modal {
  max-width: 44rem;
}

.ms-feature-spec-editor__revision-modal-text {
  margin: 0 0 1rem;
  color: rgba(31, 42, 51, 0.7);
  line-height: 1.45;
}

.ms-feature-spec-editor__revision-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 28rem;
  overflow-y: auto;
}

.ms-feature-spec-editor__revision-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(48, 111, 145, 0.12);
  background: rgba(255, 255, 255, 0.98);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.ms-feature-spec-editor__revision-list-item:hover,
.ms-feature-spec-editor__revision-list-item:focus-visible {
  border-color: rgba(48, 111, 145, 0.28);
  background: rgba(246, 250, 252, 0.98);
  outline: none;
}

.ms-feature-spec-editor__revision-list-item.is-selected {
  border-color: rgba(48, 111, 145, 0.38);
  background: rgba(241, 247, 250, 0.98);
  box-shadow: inset 0 0 0 1px rgba(48, 111, 145, 0.14);
}

.ms-feature-spec-editor__revision-list-item .icon {
  margin: 0.1rem 0 0;
  color: var(--ms-primary);
}

.ms-feature-spec-editor__revision-list-main {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.ms-feature-spec-editor__revision-list-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ms-primary-darker);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.ms-feature-spec-editor__revision-list-meta {
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.84rem;
  line-height: 1.4;
}

.ms-feature-spec-editor__revision-list-comment {
  color: rgba(31, 42, 51, 0.82);
  font-size: 0.9rem;
  line-height: 1.45;
  word-break: break-word;
}

@media (max-width: 1670px) {
  .ms-feature-spec-editor__revision-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .ms-feature-spec-editor__revision-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ms-feature-spec-editor__revision-summary {
    grid-template-columns: 1fr;
  }
}

.ms-warning-card.ui.segment,
.ms-feature-spec-editor-page .ms-fs-warning-card.ui.segment {
  margin-top: 0.9rem;
  padding: 0;
  border: 1px solid #d9bf86 !important;
  background: #fff6e3 !important;
}

.ms-warning-card--error.ui.segment,
.ms-feature-spec-editor-page .ms-fs-warning-card--error.ui.segment {
  border-color: #d9a4a4 !important;
  background: #fff1f1 !important;
}

.ms-warning-card--info.ui.segment {
  border-color: #b9cfe4 !important;
  background: #f2f7fc !important;
}

.ms-warning-card__head,
.ms-feature-spec-editor-page .ms-fs-warning-card__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.65rem;
  border-bottom: 1px solid #d9bf86;
  font-weight: 700;
  color: #ffffff;
  background: #a36714;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ms-warning-card--error .ms-warning-card__head,
.ms-feature-spec-editor-page .ms-fs-warning-card--error .ms-fs-warning-card__head {
  color: #ffffff;
  background: #9f3a38;
}

.ms-warning-card--info .ms-warning-card__head {
  color: #ffffff;
  background: #3f6f9e;
  border-bottom-color: #b9cfe4;
}

.ms-warning-card__head .icon,
.ms-feature-spec-editor-page .ms-fs-warning-card__head .icon {
  margin: 0;
  font-size: 1rem;
  line-height: 1;
  color: #ffffff;
}

.ms-warning-card__body .ui.list,
.ms-feature-spec-editor-page .ms-fs-warning-card__body .ui.list {
  margin: 0;
  padding: 0.7rem 1rem 0.85rem;
}

.ms-warning-card__body .item,
.ms-feature-spec-editor-page .ms-fs-warning-card__body .item {
  color: #6e5b34;
}

.ms-warning-card--error .ms-warning-card__body .item,
.ms-feature-spec-editor-page .ms-fs-warning-card--error .ms-fs-warning-card__body .item {
  color: #7d3534;
}

.ms-warning-card--info .ms-warning-card__body .item {
  color: #2f567a;
}

.ms-warning-card--error .ms-warning-card__head,
.ms-feature-spec-editor-page .ms-fs-warning-card--error .ms-fs-warning-card__head {
  border-bottom-color: #d9a4a4;
}

@media (max-width: 1670px) {
  .ms-project-list-page .ms-project-directory__meta {
    display: none !important;
  }

  .ms-project-list-page .ms-project-directory__item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ms-project-details__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ms-workbench__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ms-workbench__summary-item:nth-child(2n) {
    border-right: none;
  }

  .ms-workbench__summary-item:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(48, 111, 145, 0.08);
  }
}

@media (max-width: 820px) {
  .ms-project-details__grid {
    grid-template-columns: 1fr;
  }

  .ms-product-line-tools__grid {
    grid-template-columns: 1fr;
  }

  .ms-workbench__topbar,
  .ms-workbench__body {
    padding: 1.15rem;
  }

  .ms-existing-features__section-header {
    align-items: stretch;
  }

  .ms-existing-features__toolbar {
    width: 100%;
    justify-content: flex-start;
  }

  .ms-existing-features__search {
    min-width: 100%;
  }

  .ms-detail-grid {
    grid-template-columns: 1fr;
  }

  .ms-readonly-field--wide {
    grid-column: auto;
  }

  .ms-existing-feature-properties__col--display,
  .ms-feature-editor-properties__col--display {
    width: 18%;
  }

  .ms-existing-feature-properties__col--property,
  .ms-feature-editor-properties__col--property {
    width: 17%;
  }

  .ms-existing-feature-properties__col--type,
  .ms-feature-editor-properties__col--type {
    width: 31%;
  }

  .ms-existing-feature-properties__col--format,
  .ms-feature-editor-properties__col--format {
    width: 9%;
  }

  .ms-existing-feature-properties__col--flag,
  .ms-feature-editor-properties__col--flag {
    width: 4%;
  }

  .ms-existing-feature-properties__col--actions,
  .ms-feature-editor-properties__col--actions {
    width: 17%;
  }

  .ms-existing-feature-properties__action-button.ui.button,
  .ms-feature-editor-properties__action-button.ui.button {
    padding: 0.4rem 0.5rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 640px) {
  .ms-workbench__summary {
    grid-template-columns: 1fr;
  }

  .ms-workbench__summary-item {
    border-right: none;
    border-bottom: 1px solid rgba(48, 111, 145, 0.08);
  }

  .ms-workbench__summary-item:last-child {
    border-bottom: none;
  }

  .ms-workbench__tabs {
    grid-template-columns: 1fr;
  }

  .ms-workbench__tab {
    border-right: none;
    border-bottom: 1px solid rgba(48, 111, 145, 0.08);
  }

  .ms-workbench__tab:last-child {
    border-bottom: none;
  }
}

.ms-workspace-create .ui.form {
  max-width: 760px;
}

.ms-workspace-create__status {
  margin-top: 1.25rem !important;
}

@media (max-width: 1100px) {
  .ms-auth-shell {
    padding: 1.5rem;
    background:
      radial-gradient(circle at top left, rgba(95, 178, 213, 0.2), transparent 28%),
      linear-gradient(180deg, #0f2430 0%, #14384a 40%, #102b3b 40%, #17394d 100%);
  }

  .ms-auth-shell__content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    justify-content: stretch;
  }

  .ms-auth-shell__showcase {
    max-width: none;
    width: 100%;
    padding-right: 0;
  }

  .ms-auth-shell__form {
    justify-content: flex-start;
  }

  .ms-account-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ms-auth-shell {
    padding: 1rem;
    background: linear-gradient(180deg, #14384a 0%, #14384a 24%, #102b3b 24%, #17394d 100%);
  }

  .ms-auth-shell::after {
    display: none;
  }

  .ms-auth-shell__content {
    gap: 1rem;
  }

  .ms-auth-shell__showcase {
    gap: 1.5rem;
  }

  .ms-auth-card {
    width: 100%;
    padding: 1.5rem;
    border-radius: 0 !important;
  }

  .ms-auth-shell__form:not(:has(.ms-auth-card)) {
    width: 100%;
    padding: 1.5rem;
    border-radius: 0 !important;
  }

  .ms-auth-shell__benefits.ui.list {
    width: 100%;
    padding: 1rem 1.1rem;
    border-radius: 0 !important;
  }

  .ms-auth-form__grid {
    display: block !important;
  }

  .ms-auth-form__label-row,
  .ms-auth-form__options {
    flex-direction: column;
    align-items: flex-start;
  }

  .ms-admin-users__status-stack {
    min-width: 170px;
  }

  .ms-account-shell {
    padding: 1rem !important;
  }

  .ms-fs-menu-modal {
    max-width: calc(100vw - 2rem) !important;
  }

  .ms-fs-menu-status-strip,
  .ms-fs-menu-layout {
    grid-template-columns: 1fr;
  }

  .ms-fs-menu-panel-heading--tree,
  .ms-fs-menu-actions {
    display: block !important;
  }

  .ms-fs-menu-actions__buttons {
    justify-content: flex-end;
  }

  .ms-fs-menu-new-item {
    position: static;
  }
}

/* Reference page style normalization (sitewide) */
.ms-shell {
  background:
    radial-gradient(140% 52% at 50% -14%, rgba(67, 130, 168, 0.22), rgba(67, 130, 168, 0) 62%),
    radial-gradient(140% 52% at 50% 114%, rgba(44, 95, 130, 0.2), rgba(44, 95, 130, 0) 62%),
    linear-gradient(180deg, #e8eef4 0%, #f2f5f8 42%, #edf2f6 100%);
}

.ms-shell__sidebar {
  width: 300px;
  flex: 0 0 300px;
  background: linear-gradient(180deg, #092437 0%, #10384f 58%, #0b2a3e 100%);
}

.ms-content {
  padding: 0;
  background:
    radial-gradient(120% 56% at 50% -18%, rgba(86, 152, 190, 0.14), rgba(86, 152, 190, 0) 66%),
    radial-gradient(120% 56% at 50% 118%, rgba(49, 103, 137, 0.12), rgba(49, 103, 137, 0) 66%),
    transparent;
}

.ms-content__surface.ui.segment {
  border-radius: 0 !important;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.ms-page-shell {
  padding: 0;
  gap: 0;
}

.ms-page {
  gap: 0;
  min-height: 100%;
  background: transparent;
}

.ms-page > .ms-page__header {
  border-radius: 0 !important;
  border-width: 0 0 1px;
  border-color: #dce3ea;
  box-shadow: none;
  background: #f6f8fa;
  padding: 1rem 1.4rem;
}

.ms-page > .ms-page__summary {
  gap: 0;
  border-top: 1px solid #dce3ea;
  border-bottom: 1px solid #dce3ea;
  background: #f6f8fa;
}

.ms-page > .ms-page__summary .ms-stat-tile {
  border: 0;
  border-right: 1px solid #dce3ea;
  border-radius: 0 !important;
  background: transparent;
  padding: 0.95rem 1rem;
}

.ms-page > .ms-page__summary .ms-stat-tile:last-child {
  border-right: 0;
}

.ms-section-card.ui.segment,
.ms-system-state.ui.segment,
.ms-empty-state.ui.placeholder.segment {
  border-radius: 0 !important;
  border: 1px solid #d9e1e8;
  box-shadow: none;
  background: #ffffff;
}

.ms-page > .ms-section-card.ui.segment,
.ms-page > .ms-project-config,
.ms-page > .ms-virtual-page,
.ms-page > .ui.message,
.ms-page > .ui.grid,
.ms-page > .ui.segment.ms-virtual-page {
  margin: 1rem 1rem 0;
}

.ms-page > .ui.message:last-child,
.ms-page > .ms-section-card.ui.segment:last-child,
.ms-page > .ms-project-config:last-child,
.ms-page > .ms-virtual-page:last-child {
  margin-bottom: 1rem;
}

.ms-page .ui.celled.table,
.ms-page .ui.table {
  border-color: #dce3ea;
  border-radius: 0 !important;
}

.ms-page .ui.celled.table thead th,
.ms-page .ui.table thead th {
  background: #f7fafc;
  color: #3d596a;
  font-size: 0.77rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ms-page .ui.celled.table td,
.ms-page .ui.table td {
  background: #ffffff;
}

.ms-detail-tabs .ui.top.attached.tabular.menu,
.ms-project-config .ui.top.attached.steps {
  background: #f7fafc;
  border-color: #dce3ea;
  box-shadow: none;
}

.ms-detail-tabs .ui.top.attached.tabular.menu .item {
  border-radius: 0 !important;
  border-right: 1px solid #dce3ea;
}

.ms-detail-tabs .ui.top.attached.tabular.menu .item.active {
  background: #ffffff;
  color: #125887;
  box-shadow: inset 0 2px 0 #2b82b2;
}

.ms-project-config .ui.steps .step {
  border-radius: 0 !important;
}

.ms-detail-tabs .ui.bottom.attached.segment,
.ms-project-config .ui.attached.segment,
.ms-project-config .ui.top.attached.segment,
.ms-project-config .ui.bottom.attached.segment {
  border-color: #dce3ea;
  box-shadow: none;
}

.ms-page .ui.form input:not([type="checkbox"]):not([type="radio"]),
.ms-page .ui.form textarea,
.ms-page .ui.form .ui.selection.dropdown {
  border-color: #d5dde4;
  background: #ffffff;
}

.ms-page .ui.message {
  border-radius: 0 !important;
  box-shadow: none;
}

/* Global card reset: square cards, no shadows */
.ui.card,
.ui.cards > .card,
[class^="ms-"][class*="card"],
[class*=" ms-"][class*="card"] {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Global segment reset: square surfaces, no shadows */
.ui.segment,
.ui.segments,
.ui.segments > .segment,
.ui.attached.segment,
.ui.top.attached.segment,
.ui.bottom.attached.segment {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Final global override: force square corners everywhere */
body *,
body *::before,
body *::after {
  border-radius: 0 !important;
}

/* Global background reset: solid light grey only */
body,
.ms-shell,
.ms-content,
.ms-content__surface.ui.segment,
.ms-page,
.ms-page-shell,
.ms-workbench,
.ms-workbench__topbar,
.ms-workbench__body,
.ms-project-config__body {
  background: #eef1f4 !important;
  background-image: none !important;
}

.ms-workbench__topbar {
  background: #e2e7ec !important;
  background-image: none !important;
}

/* Unified warnings/errors design (all pages) */
.ui.info.message,
.ui.message.info {
  padding: 0 !important;
  border: 1px solid #b9cfe4 !important;
  background: #f2f7fc !important;
  color: #29506d !important;
}

.ui.warning.message,
.ui.message.warning {
  padding: 0 !important;
  border: 1px solid #d9bf86 !important;
  background: #fff6e3 !important;
  color: #6e5b34 !important;
}

.ui.negative.message,
.ui.error.message {
  padding: 0 !important;
  border: 1px solid #d9a4a4 !important;
  background: #fff1f1 !important;
  color: #7d3534 !important;
}

.ui.info.message > .header,
.ui.message.info > .header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0.75rem 1rem 0.65rem;
  background: #3f6f9e;
  color: #ffffff !important;
  border-bottom: 1px solid #b9cfe4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ui.warning.message > .header,
.ui.message.warning > .header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0.75rem 1rem 0.65rem;
  background: #b4530f;
  color: #ffffff !important;
  border-bottom: 1px solid #d9bf86;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ui.negative.message > .header,
.ui.error.message > .header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 !important;
  padding: 0.75rem 1rem 0.65rem;
  background: #9f3a38;
  color: #ffffff !important;
  border-bottom: 1px solid #d9a4a4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ui.info.message > .header::before,
.ui.message.info > .header::before {
  content: "\f129";
  font-family: Icons;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

.ui.warning.message > .header::before,
.ui.message.warning > .header::before {
  content: "\f071";
  font-family: Icons;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

.ui.negative.message > .header::before,
.ui.error.message > .header::before {
  content: "\f057";
  font-family: Icons;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}

.ui.warning.message > p,
.ui.warning.message > .ui.list,
.ui.warning.message > .list,
.ui.message.warning > p,
.ui.message.warning > .ui.list,
.ui.message.warning > .list,
.ui.info.message > p,
.ui.info.message > .ui.list,
.ui.info.message > .list,
.ui.message.info > p,
.ui.message.info > .ui.list,
.ui.message.info > .list,
.ui.negative.message > p,
.ui.negative.message > .ui.list,
.ui.negative.message > .list,
.ui.error.message > p,
.ui.error.message > .ui.list,
.ui.error.message > .list {
  margin: 0 !important;
  padding: 0.7rem 1rem 0.85rem;
  /* Semantic приглушает абзацы сообщения (opacity .85), и текст предупреждения падал ниже 4.5:1. */
  opacity: 1;
}

.ui.warning.message:not(:has(> .header)),
.ui.message.warning:not(:has(> .header)),
.ui.info.message:not(:has(> .header)),
.ui.message.info:not(:has(> .header)),
.ui.negative.message:not(:has(> .header)),
.ui.error.message:not(:has(> .header)) {
  padding: 0.75rem 1rem !important;
}

/* Global tabs: light grey background */
.ms-workbench__tabs,
.ms-detail-tabs .ui.top.attached.tabular.menu,
.ui.top.attached.tabular.menu {
  background: #dde3ea !important;
  background-image: none !important;
  border-color: #c7cfd8 !important;
}

.ms-workbench__tab,
.ms-detail-tabs .ui.top.attached.tabular.menu .item,
.ui.top.attached.tabular.menu .item {
  background: #dde3ea !important;
  border-color: #c7cfd8 !important;
}

.ms-workbench__tab.active,
.ms-detail-tabs .ui.top.attached.tabular.menu .item.active,
.ui.top.attached.tabular.menu .item.active {
  background: #d2dae3 !important;
  border-color: #bcc6d1 !important;
}

/* ====================================================================== */
/* Navigation menu: inline preview + visual builder + icon picker         */
/* ====================================================================== */

.ms-menu-inline__toolbar {
  margin-top: 0.6rem;
}

/* Shared icon glyph (rendered SVG from the frontend repo). */
.ms-menu-icon-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.ms-menu-icon-svg svg,
.ms-menu-icon-svg img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Compact icon-name chip used when the SVG is not loaded. */
.ms-menu-chip {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  background: rgba(48, 111, 145, 0.1);
  color: var(--ms-primary-dark);
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  flex: 0 0 auto;
}

/* --- Diagnostics (shared inline + builder) --- */
.ms-menu-inline__diagnostics,
.ms-menu-builder__diagnostics {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ms-menu-inline__diagnostic,
.ms-menu-builder__diagnostic {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.35;
  padding: 0.45rem 0.65rem;
  border-radius: 7px;
  border: 1px solid var(--ms-border);
  background: var(--ms-surface);
}
.ms-menu-inline__diagnostic i,
.ms-menu-builder__diagnostic i {
  margin-top: 0.1rem;
  flex: 0 0 auto;
}
.ms-menu-inline__diagnostic--error,
.ms-menu-builder__diagnostic--error {
  color: #9f3a38;
  background: #fff6f6;
  border-color: #e0b4b4;
}
.ms-menu-inline__diagnostic--warning,
.ms-menu-builder__diagnostic--warning {
  color: #794b02;
  background: #fffaf3;
  border-color: #c9ba9b;
}

/* --- Preview tree (shared inline + builder) --- */
.ms-menu-inline__tree,
.ms-menu-builder__tree {
  margin-top: 0.75rem;
  border: 1px solid var(--ms-border);
  border-radius: 9px;
  background: var(--ms-bg);
  padding: 0.45rem 0.35rem;
}
.ms-menu-inline__node,
.ms-menu-builder__tree-node {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.32rem 0.6rem;
  border-radius: 6px;
  min-height: 1.9rem;
}
.ms-menu-inline__node:hover,
.ms-menu-builder__tree-node:hover {
  background: rgba(48, 111, 145, 0.06);
}
.ms-menu-inline__node .ms-menu-icon-svg,
.ms-menu-builder__tree-node .ms-menu-icon-svg {
  width: 18px;
  height: 18px;
}
.ms-menu-inline__node > i.icon,
.ms-menu-builder__tree-node > i.icon {
  color: var(--ms-primary);
  margin: 0;
  flex: 0 0 auto;
}
.ms-menu-inline__label,
.ms-menu-builder__tree-label {
  font-weight: 600;
  color: var(--ms-text);
}
.ms-menu-inline__route,
.ms-menu-builder__tree-meta {
  color: #7c8b95;
  font-size: 0.78rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.ms-menu-badge {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  color: var(--ms-primary-dark);
  background: rgba(95, 178, 213, 0.18);
  padding: 0.05rem 0.4rem;
  border-radius: 10px;
  flex: 0 0 auto;
}

/* --- Visual builder modal --- */
.ms-menu-builder-modal.ms-modal {
  width: 760px;
  max-width: calc(100vw - 3rem);
}
.ms-menu-builder__content {
  max-height: 72vh;
  overflow-y: auto;
}
.ms-menu-builder__segments {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.ms-menu-builder__segment.ui.segment {
  margin: 0;
  border: 1px solid var(--ms-border);
  border-radius: 10px;
  box-shadow: none;
  padding: 0.85rem 1rem 1rem;
}
.ms-menu-builder__segment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}
.ms-menu-builder__segment-actions {
  display: flex;
  gap: 0.3rem;
}
.ms-menu-builder__segment-form .field > label {
  font-size: 0.78rem;
  color: #5a6b75;
}
.ms-menu-builder__icon-field {
  margin-top: 0.25rem;
}
.ms-menu-builder__icon-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.ms-menu-builder__icon-preview {
  display: inline-flex;
  width: 24px;
  height: 24px;
}
.ms-menu-builder__icon-preview svg,
.ms-menu-builder__icon-preview img {
  width: 100%;
  height: 100%;
}
.ms-menu-builder__flags.inline.fields {
  margin: 0.5rem 0 0;
  gap: 0.25rem 1.25rem;
  flex-wrap: wrap;
}
.ms-menu-builder__add {
  margin-top: 0.85rem !important;
}
.ms-menu-builder__preview {
  margin-top: 0.25rem;
}
.ms-menu-builder__preview > label {
  display: block;
  font-weight: 600;
  font-size: 0.8rem;
  color: #5a6b75;
  margin-bottom: 0.35rem;
}
.ms-menu-builder__directive {
  margin: 0;
  background: #0f2230;
  color: #cfe6f2;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.82rem;
}

/* --- Icon picker modal --- */
.ms-icon-picker-modal.ms-modal {
  width: 660px;
  max-width: calc(100vw - 3rem);
}
.ms-icon-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
  gap: 0.6rem;
  margin-top: 0.85rem;
  max-height: 52vh;
  overflow-y: auto;
  padding: 0.15rem;
}
.ms-icon-picker__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.4rem;
  border: 1px solid var(--ms-border);
  border-radius: 9px;
  background: var(--ms-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.ms-icon-picker__cell:hover {
  border-color: var(--ms-accent);
  background: rgba(95, 178, 213, 0.08);
}
.ms-icon-picker__cell--selected {
  border-color: var(--ms-primary);
  background: rgba(48, 111, 145, 0.08);
  box-shadow: 0 0 0 2px rgba(48, 111, 145, 0.25);
}
.ms-icon-picker__svg {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ms-text);
}
.ms-icon-picker__svg svg,
.ms-icon-picker__svg img {
  width: 100%;
  height: 100%;
}
.ms-icon-picker__name {
  font-size: 0.72rem;
  color: #5a6b75;
  text-align: center;
  word-break: break-word;
  line-height: 1.15;
}



/* ====================================================================== */
/* Sidebar navigation (v2): collapsible rail with icon-only compact mode  */
/* ====================================================================== */

.ms-shell__sidebar {
  width: 264px;
  flex: 0 0 264px;
  overflow: visible;
  background: linear-gradient(180deg, #092437 0%, #10384f 58%, #0b2a3e 100%);
  transition: width 0.18s ease, flex-basis 0.18s ease;
}

.ms-shell__sidebar:has(.ms-sidebar--rail) {
  width: 76px;
  flex: 0 0 76px;
}

.ms-sidebar {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  color: #eaf2f7;
}

/* --- Head: brand + collapse toggle --- */
.ms-sidebar__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 68px;
  padding: 1.1rem 0.9rem 0.95rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ms-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.ms-sidebar__brand:hover {
  color: #ffffff;
}

.ms-sidebar__brand-mark {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(95, 178, 213, 0.16);
  border: 1px solid rgba(95, 178, 213, 0.28);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.ms-sidebar__brand:hover .ms-sidebar__brand-mark {
  background: rgba(95, 178, 213, 0.26);
  border-color: rgba(95, 178, 213, 0.45);
}

.ms-sidebar__brand-logo {
  width: 22px;
  height: 22px;
}

.ms-sidebar__brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.ms-sidebar__brand-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: #f6fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-sidebar__brand-sub {
  font-size: 0.72rem;
  color: rgba(226, 238, 245, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-sidebar__toggle {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: rgba(234, 242, 247, 0.8);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ms-sidebar__toggle:hover {
  background: rgba(95, 178, 213, 0.2);
  border-color: rgba(95, 178, 213, 0.4);
  color: #ffffff;
}

.ms-sidebar__toggle > i.icon {
  margin: 0;
  font-size: 1rem;
  transition: transform 0.18s ease;
}

/* --- Navigation --- */
.ms-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 0.7rem 1.4rem;
  overflow: visible;
}

.ms-sidebar__section {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.ms-sidebar__section + .ms-sidebar__section {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ms-sidebar__section-label {
  padding: 0.15rem 0.75rem 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(226, 238, 245, 0.42);
}

.ms-sidebar__item {
  position: relative;
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  color: rgba(234, 242, 247, 0.82);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.ms-sidebar__item > i.icon {
  margin: 0;
  width: 1.4rem;
  font-size: 1.05rem;
  text-align: center;
  color: rgba(159, 199, 219, 0.9);
  transition: color 0.14s ease;
}

.ms-sidebar__item-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-sidebar__item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.ms-sidebar__item:hover > i.icon {
  color: #cfe6f2;
}

.ms-sidebar__item.active {
  background: rgba(95, 178, 213, 0.16);
  color: #ffffff;
  box-shadow: inset 3px 0 0 var(--ms-accent);
}

.ms-sidebar__item.active > i.icon {
  color: var(--ms-accent);
}

.ms-sidebar__item:focus-visible,
.ms-sidebar__toggle:focus-visible,
.ms-sidebar__brand:focus-visible {
  outline: 2px solid var(--ms-accent);
  outline-offset: -2px;
}

/* --- Rail flyout label (compact mode only) --- */
.ms-sidebar__flyout {
  position: absolute;
  left: calc(100% + 0.6rem);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 0.35rem 0.6rem;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 600;
  color: #eaf2f7;
  background: #0d2230;
  border: 1px solid rgba(95, 178, 213, 0.3);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
  z-index: 60;
}

/* ====================================================================== */
/* Rail (collapsed) mode                                                  */
/* ====================================================================== */
.ms-sidebar--rail .ms-sidebar__head {
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 0.5rem 0.85rem;
}

.ms-sidebar--rail .ms-sidebar__brand {
  flex: 0 0 auto;
  justify-content: center;
}

.ms-sidebar--rail .ms-sidebar__brand-text {
  display: none;
}

.ms-sidebar--rail .ms-sidebar__toggle > i.icon {
  transform: rotate(180deg);
}

.ms-sidebar--rail .ms-sidebar__nav {
  align-items: center;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.ms-sidebar--rail .ms-sidebar__section {
  width: 100%;
  align-items: center;
}

.ms-sidebar--rail .ms-sidebar__section + .ms-sidebar__section {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
}

.ms-sidebar--rail .ms-sidebar__section-label {
  display: none;
}

.ms-sidebar--rail .ms-sidebar__item {
  grid-template-columns: 1fr;
  justify-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
}

.ms-sidebar--rail .ms-sidebar__item-text {
  display: none;
}

.ms-sidebar--rail .ms-sidebar__item > i.icon {
  font-size: 1.2rem;
}

.ms-sidebar--rail .ms-sidebar__item:hover .ms-sidebar__flyout,
.ms-sidebar--rail .ms-sidebar__item:focus-visible .ms-sidebar__flyout {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

/* ====================================================================== */
/* Responsive: stack sidebar on top, expand into a wrapping bar           */
/* ====================================================================== */
@media (max-width: 980px) {
  .ms-shell__sidebar,
  .ms-shell__sidebar:has(.ms-sidebar--rail) {
    width: 100%;
    flex: 0 0 auto;
  }

  .ms-sidebar__toggle {
    display: none;
  }

  .ms-sidebar__flyout {
    display: none;
  }

  .ms-sidebar__nav,
  .ms-sidebar--rail .ms-sidebar__nav {
    flex-flow: row wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.7rem 0.9rem 0.9rem;
  }

  .ms-sidebar__section,
  .ms-sidebar--rail .ms-sidebar__section {
    flex-flow: row wrap;
    align-items: center;
    gap: 0.35rem;
    width: auto;
  }

  .ms-sidebar__section + .ms-sidebar__section,
  .ms-sidebar--rail .ms-sidebar__section + .ms-sidebar__section {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .ms-sidebar__section-label,
  .ms-sidebar--rail .ms-sidebar__section-label {
    display: none;
  }

  .ms-sidebar__item,
  .ms-sidebar--rail .ms-sidebar__item {
    grid-template-columns: 1.3rem auto;
    justify-items: start;
    width: auto;
    height: auto;
    padding: 0.5rem 0.8rem;
  }

  .ms-sidebar--rail .ms-sidebar__item-text {
    display: block;
  }

  .ms-sidebar--rail .ms-sidebar__head {
    flex-direction: row;
    padding: 1.1rem 0.9rem 0.95rem;
  }

  .ms-sidebar--rail .ms-sidebar__brand {
    justify-content: flex-start;
  }

  .ms-sidebar--rail .ms-sidebar__brand-text {
    display: flex;
  }
}
/* Clickable table cells (Code / Name -> detail page) */
.ms-cell-link {
  color: var(--ms-primary-dark);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.14s ease;
}

.ms-cell-link:hover,
.ms-cell-link:focus-visible {
  color: var(--ms-primary);
  text-decoration: underline;
}

.ms-cell-link--name {
  font-size: 0.95rem;
}
/* Rail flyout clears the rail edge cleanly */
.ms-sidebar--rail .ms-sidebar__flyout {
  left: calc(100% + 1.25rem);
}
/* ====================================================================== */
/* Page action toolbar (compact, unified panel) — .ms-workbench__actions  */
/* and .ms-page__actions on every page header                             */
/* ====================================================================== */
.ms-workbench__actions,
.ms-page__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
  padding: 0.28rem;
  border: 1px solid var(--ms-border);
  background: var(--ms-surface);
  box-shadow: 0 1px 2px rgba(16, 29, 38, 0.05);
}

/* Flatten SemanticUI button groups nested inside the toolbar */
.ms-workbench__actions .ui.buttons,
.ms-page__actions .ui.buttons {
  margin: 0;
  gap: 0.2rem;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Toolbar buttons: compact, flat, icon + label */
.ms-workbench__actions .button,
.ms-page__actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  min-height: 2.35rem;
  padding: 0.5rem 0.8rem !important;
  font-size: 0.86rem !important;
  font-weight: 600;
  color: var(--ms-text) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.ms-workbench__actions .button > i.icon,
.ms-page__actions .button > i.icon {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ms-primary);
  opacity: 0.85;
}

.ms-workbench__actions .button:hover,
.ms-page__actions .button:hover,
.ms-workbench__actions .button:focus-visible,
.ms-page__actions .button:focus-visible {
  background: rgba(48, 111, 145, 0.1) !important;
  color: var(--ms-primary-darker) !important;
  outline: none;
}

/* Primary action stands out within the panel */
.ms-workbench__actions .ui.primary.button,
.ms-page__actions .ui.primary.button {
  color: #ffffff !important;
  background: var(--ms-primary) !important;
}

.ms-workbench__actions .ui.primary.button > i.icon,
.ms-page__actions .ui.primary.button > i.icon {
  color: #ffffff;
  opacity: 1;
}

.ms-workbench__actions .ui.primary.button:hover,
.ms-page__actions .ui.primary.button:hover {
  background: var(--ms-primary-dark) !important;
  color: #ffffff !important;
}

/* Destructive action keeps a distinct signal */
.ms-workbench__actions .ui.negative.button,
.ms-page__actions .ui.negative.button {
  color: #9f3a38 !important;
}

.ms-workbench__actions .ui.negative.button > i.icon,
.ms-page__actions .ui.negative.button > i.icon {
  color: #9f3a38;
}

.ms-workbench__actions .ui.negative.button:hover,
.ms-page__actions .ui.negative.button:hover {
  background: rgba(159, 58, 56, 0.1) !important;
  color: #7d2b2a !important;
}

/* Disabled state */
.ms-workbench__actions .button[disabled],
.ms-page__actions .button[disabled],
.ms-workbench__actions .button.disabled,
.ms-page__actions .button.disabled {
  opacity: 0.5;
}
/* ====================================================================== */
/* Action toolbar anchored to the bottom-right of the page header         */
/* (~1em gap below it to the white content, via the header padding)       */
/* ====================================================================== */
.ms-workbench__topbar,
.ms-page__header {
  position: relative;
}

.ms-workbench__actions,
.ms-page__actions {
  align-self: flex-end;
  margin-left: auto;
}
/* ====================================================================== */
/* Optical centering for icon-font glyphs whose ink sits off-center        */
/* (SemanticUI "Icons" font side-bearing; geometry is already centered).   */
/* Values in em so they scale with the rail/expanded icon size.            */
/* ====================================================================== */
.ms-sidebar__item > i.users.icon,
.ms-sidebar__item > i.settings.icon {
  transform: translateX(0.135em);
}

.ms-sidebar__item > i.home.icon {
  transform: translateX(0.07em);
}
/* Vertical optical alignment: lift icons to the text optical center       */
/* (expanded mode only; in rail the icon stays centered in its tile).      */
.ms-sidebar__item > i.icon {
  position: relative;
}

.ms-sidebar:not(.ms-sidebar--rail) .ms-sidebar__item > i.icon {
  top: -0.08em;
}
/* ====================================================================== */
/* Header refinement: drop description, vertically center the action panel */
/* ====================================================================== */
.ms-workbench__subtitle,
.ms-page__title .sub.header {
  display: none !important;
}

.ms-workbench__topbar,
.ms-page__header {
  align-items: center;
}

.ms-workbench__actions,
.ms-page__actions {
  align-self: center;
}
/* Titled form card (e.g. Name fields card inside Properties) */
.ms-form-card__title {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ms-primary-darker);
}

/* ── Layout builder (WYSIWYG canvas) ─────────────────────────────────────── */
/* ПРАВИЛО ДВУХ МИРОВ. Всё в билдере — либо «инструмент» (chrome), либо «бумага» (имитация).
   Критерий ровно один: есть ли у элемента прямой двойник в сгенерированном Angular/Kendo?
     есть  → бумага: живёт внутри .lp-paper, повторяет геометрию и типографику прода
             (radius 8/4px, шрифт --lp-font-paper, контрол 42px, гэп 16px, лейбл 14/500);
     нет   → инструмент: квадратный (radius 0 из глобального сброса app.css:6929),
             токены --ms-*, шрифт Lato, шкала в rem, teal --ms-primary как акцент.
   Оверлеи редактора (тулбар элемента, grip, span-бейдж, флаги, каретка, ghost) физически
   лежат внутри .lp-paper, но это инструмент → они остаются квадратными. Так граница
   «это я редактирую» / «так это будет выглядеть» читается без единой подписи.

   РАДИУСЫ. app.css:6929 `body *, body *::before, body *::after { border-radius: 0 !important }`
   бьёт любое НЕ-!important правило независимо от специфичности. Поэтому весь предыдущий
   .lp-* блок рисовался квадратным вопреки собственным 8px. Слой бумаги отвоёвывает радиусы
   ровно тремя правилами ниже (составной селектор + !important) — список там же служит
   аудитом: что в нём есть, то существует в сгенерированной форме. Инструмент не объявляет
   border-radius вообще — глобальный сброс уже сделал его квадратным.

   ИМЕНА, КОТОРЫЕ ЧИТАЕТ js/layout-builder.js — переименование требует правки JS:
     .lp-grid, .lp-inline__grid            (edge(): closest для классификации оси)
     .lp-section, .lp-canvas__empty        (paint(): closest для подсветки цели)
     .lp-grid                              (showCaret(): querySelector для position:'end')
     .lp-section--dragover, .lp-dropzone-active, .lp-palette--dropactive   (paint(): addClass)
     .lp-insert-caret, .lp-insert-caret--on                                (каретка в body)
     .lp-builder--dragging, .lp-builder--drag-{palette|item|groupField|section}, .lp-dragging
   .lp-builder--drag-section намеренно без правил: секция может целиться только в секцию,
   приглашение «сюда можно» на гридах для неё было бы ложью. Класс JS ставит — стиля нет.
   .lp-caret — это НЕ каретка вставки, а стрелка выпадающего списка в LayoutFieldPreview.
   Индикатор вставки называется .lp-insert-caret и это имя менять нельзя. */

/* ═══ 0. Локальная шкала токенов ═══════════════════════════════════════════ */
/* Ниже по блоку нет ни одного «голого» hex: chrome-цвета — производные от --ms-*,
   paper-цвета (--lp-p-*) — цитата палитры сгенерированного приложения, поэтому литералы
   собраны здесь и подписаны источником. */
.lp-builder {
  /* — инструмент: цвет — */
  --lp-accent: var(--ms-primary, #306f91); --lp-accent-dark: var(--ms-primary-darker, #184772); --lp-accent-soft: rgba(48, 111, 145, 0.12); --lp-accent-wash: rgba(48, 111, 145, 0.06); --lp-accent-line: rgba(48, 111, 145, 0.42);
  --lp-surface: var(--ms-surface, #fff); --lp-surface-2: #fbfcfd; --lp-border: var(--ms-border, #d9e0e6); --lp-line: rgba(48, 111, 145, 0.12); --lp-line-soft: rgba(48, 111, 145, 0.08);
  --lp-ink: var(--ms-text, #1f2a33); --lp-ink-2: rgba(31, 42, 51, 0.8); --lp-ink-3: rgba(31, 42, 51, 0.74); --lp-ink-4: rgba(31, 42, 51, 0.7);
  /* Текстовые оттенки не светлее 0.7 (контраст 4.5:1 на белом); глифы и плейсхолдеры — отдельный, светлее. */
  --lp-glyph: rgba(31, 42, 51, 0.38);
  --lp-warn: #8a5a12; --lp-warn-bg: rgba(183, 121, 31, 0.09); --lp-warn-line: rgba(183, 121, 31, 0.3); --lp-danger: #9f3a38; --lp-danger-bg: rgba(159, 58, 56, 0.08); --lp-danger-line: rgba(159, 58, 56, 0.28); --lp-ok: #2f7d55;
  /* — инструмент: стол, тени, фокус — */
  --lp-desk: #e9eef2; --lp-desk-2: #e3e9ee; --lp-desk-dot: rgba(31, 42, 51, 0.07);
  --lp-e1: 0 1px 2px rgba(16, 29, 38, 0.06); --lp-e2: 0 1px 2px rgba(16, 29, 38, 0.07), 0 18px 40px rgba(16, 29, 38, 0.09); --lp-e3: 0 2px 8px rgba(16, 29, 38, 0.18);
  /* кольцо фокуса: --ms-accent (#5fb2d5) даёт на белом всего ~2.1:1 — ниже 3:1 из WCAG 1.4.11,
     поэтому сама линия рисуется --ms-primary (4.6:1), а --ms-accent уходит в внешний ореол */
  --lp-focus: var(--ms-primary, #306f91); --lp-focus-halo: 0 0 0 4px rgba(95, 178, 213, 0.32);
  --lp-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  /* — инструмент: геометрия — */
  --lp-s1: 0.25rem; --lp-s2: 0.4rem; --lp-s3: 0.6rem; --lp-s4: 0.9rem; --lp-s5: 1.25rem;
  --lp-ctl: 28px; --lp-rail: 232px; --lp-insp: 296px; --lp-t: 0.12s; --lp-rig: clamp(34rem, calc(100dvh - 21rem), 74rem);
  /* — бумага: цитата сгенерированного приложения — */
  --lp-font-paper: "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --lp-page: 940px; --lp-gap: 16px; --lp-pad: 16px; --lp-r-lg: 8px; --lp-r-sm: 4px;
  --lp-p-ink: #424242; --lp-p-title: #3d3d3d; --lp-p-ph: #9aa4ad; --lp-p-line: rgba(0, 0, 0, 0.16); --lp-p-rule: #e0e0e0; --lp-p-head: #ebeff4; --lp-p-req: #f31700;
  --lp-p-ctl-h: 42px; --lp-p-field-h: 65px; --lp-p-label: 14px; --lp-p-value: 15px;
  --lp-p-tag-bg: #d2e2fb; --lp-p-tag-line: #a2c3f7; --lp-p-tag-ink: #002259;
  --lp-p-surf: #fcfdfe; --lp-p-surf-2: #f5f8fa; --lp-p-skel: #eef1f4; --lp-p-skel-2: #dde5ec; --lp-p-zone-bg: #fafafa; --lp-p-zone-line: #bdbdbd; --lp-p-zone-ink: #c2c2c2;
}

/* ═══ 1. Рама: три ряда, три независимых скролла ═══════════════════════════ */
/* position: sticky у палитры/инспектора был мёртв: ближайший скролл-порт — .ms-workbench
   с overflow: hidden, который никогда не скроллится. Лечим не sticky, а моделью скролла:
   у билдера собственная высота, скроллятся палитра / канвас / инспектор по отдельности.
   Высота задана явно (не flex-цепочкой) — тогда .ms-workbench__body { min-height: 30rem }
   и прочие общие .ms-* правила трогать не нужно. 21rem — вычет под topbar + шапку
   workbench + summary + табы; clamp страхует от отрицательной высоты. */
.lp-builder { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: var(--lp-s2); height: var(--lp-rig); font-size: 0.86rem; color: var(--lp-ink); }
/* пустое состояние «сначала свойства» — не рама, а обычный блок: высоту не навязываем */
.lp-builder:has(> .ui.message) { display: block; height: auto; }
.lp-workspace { display: grid; grid-template-columns: var(--lp-rail) minmax(0, 1fr) var(--lp-insp); gap: 10px; min-height: 0; align-items: stretch; }
.lp-palette, .lp-inspector { position: static; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; background: var(--lp-surface); border: 1px solid var(--lp-border); }
.lp-canvas { min-height: 0; overflow: auto; overscroll-behavior: contain; }

/* Фокус-режим: канвасу отдаётся вся ширина окна. z-index 800 — ниже каретки (900),
   иначе индикатор вставки уедет под оверлей. */
.lp-builder[data-lp-focus="on"] { position: fixed; inset: 0; z-index: 800; height: 100dvh; padding: 0.7rem 0.9rem 0.9rem; background: var(--ms-bg, #f4f7f9); }
body.lp-focus-lock { overflow: hidden; }

/* ═══ 1a. Иконка центрирует свой глиф САМА ════════════════════════════════ */
/* align-items: center у полосы равняет БОКСЫ, и для подписи этого достаточно: у Lato
   оптический центр (середина капители) совпадает с центром её строчного бокса — замерено.
   А вот у иконки не совпадает: SemanticUI задаёт i.icon { height: 1em }, тогда как глиф
   рисуется на базовой линии строчного бокса `normal` (1.15em у шрифта Icons) — то есть
   ВНУТРИ своего бокса он сидит не по центру, и вся разница высот уходит в смещение
   базовых линий. Замеры до правки: инспектор 4.5px, заголовок группы палитры 4.3px,
   переключатель Form/Details 2.3px, «+ Field» 0.5px — тем больше, чем сильнее расходятся
   кегль иконки и строка подписи. Отсюда и «иконки съехали» при формально ровных боксах.
   Делаем сам <i> флекс-боксом: ::before становится флекс-элементом и центрируется в боксе
   иконки по обеим осям. Тогда центр глифа = центр бокса = оптический центр подписи, без
   магических сдвигов и при любом кегле. justify-content заодно заменяет text-align: center
   у иконок с фиксированной колонкой (.lp-chip, .lp-popover__item, .lp-insp__members).
   Селектор составной (0,2,1) — иначе display: inline-block от i.icon (0,1,1) победит. */
.lp-builder i.icon, .lp-popover i.icon, .lp-ghost i.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ═══ 2. Тулбар и статус-строка (одна сварная полоса) ══════════════════════ */
/* Раньше состояние было размазано по четырём плашкам (hint тулбара, .lp-orphan,
   .lp-canvas__ribbon, счётчик палитры). Теперь: тулбар = действия, статус-строка = состояние. */
.lp-toolbar { display: flex; align-items: center; gap: var(--lp-s1); margin: 0; padding: 0.28rem 0.32rem; background: var(--lp-surface); border: 1px solid var(--lp-border); box-shadow: var(--lp-e1); }
.lp-toolbar__actions { margin-left: auto; display: flex; align-items: center; gap: 0.1rem; }
.lp-toolbar__sep { align-self: stretch; width: 1px; margin: 0.15rem 0.25rem; background: var(--lp-line); }
.lp-tbtn { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; height: var(--lp-ctl); padding: 0 0.55rem; font-size: 0.82rem; font-weight: 600; color: var(--lp-ink); background: transparent; border: 0; cursor: pointer; transition: background var(--lp-t) ease, color var(--lp-t) ease; }
.lp-tbtn > i.icon { margin: 0; width: auto; font-size: 0.82rem; color: var(--lp-accent); opacity: 0.85; }
.lp-tbtn:hover { background: var(--lp-accent-soft); color: var(--lp-accent-dark); }
.lp-tbtn[disabled] { opacity: 0.42; cursor: default; background: none; }
.lp-tbtn--icon { padding: 0 0.42rem; }
.lp-tbtn[aria-pressed="true"] { background: var(--lp-accent); color: #fff; }
.lp-tbtn[aria-pressed="true"] > i.icon { color: #fff; opacity: 1; }

/* Сегментированный переключатель поверхности — тот же идиом, что .lp-surface раньше,
   но с ролью tablist и общей высотой контрола. */
.lp-seg { display: inline-flex; border: 1px solid var(--lp-border); overflow: hidden; }
.lp-seg__btn { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; height: var(--lp-ctl); padding: 0 0.7rem; font-size: 0.82rem; font-weight: 600; color: var(--lp-ink-2); background: var(--lp-surface); border: 0; cursor: pointer; transition: background var(--lp-t) ease, color var(--lp-t) ease; }
.lp-seg__btn > i.icon { margin: 0; width: auto; font-size: 0.8rem; }
.lp-seg__btn + .lp-seg__btn { border-left: 1px solid var(--lp-border); }
.lp-seg__btn:hover { background: var(--lp-accent-soft); color: var(--lp-accent-dark); }
.lp-seg__btn[aria-selected="true"] { color: #fff; background: var(--lp-accent); }

.lp-statusbar { display: flex; align-items: center; gap: 0.45rem; padding: 0.26rem 0.5rem; font-size: 0.75rem; color: var(--lp-ink-3); background: var(--lp-surface-2); border: 1px solid var(--lp-border); border-top: 0; }
.lp-statusbar b { font-weight: 700; color: var(--lp-ink-2); }
.lp-statusbar__sep { width: 1px; height: 12px; background: var(--lp-line); }
.lp-statusbar__grow { flex: 1 1 auto; }
/* Предупреждение — кликабельный чип с действием («показать неразмещённые»), а не пассивная
   плашка во всю ширину: вес пропорционален тому, что с ним можно сделать. */
.lp-stat-chip { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; white-space: nowrap; padding: 0.1rem 0.42rem; font-size: 0.75rem; font-weight: 700; color: var(--lp-ink-2); background: rgba(31, 42, 51, 0.05); border: 1px solid transparent; cursor: default; }
.lp-stat-chip i.icon { margin: 0; width: auto; font-size: 0.72rem; }
.lp-stat-chip--action { cursor: pointer; }
.lp-stat-chip--warn { color: var(--lp-warn); background: var(--lp-warn-bg); border-color: var(--lp-warn-line); }
.lp-stat-chip--error { color: var(--lp-danger); background: var(--lp-danger-bg); border-color: var(--lp-danger-line); }
.lp-stat-chip--action:hover { filter: brightness(0.965); }
.lp-sr-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lp-touchhint { display: none; align-items: center; gap: 0.35rem; padding: 0.35rem 0.5rem; font-size: 0.75rem; color: var(--lp-warn); background: var(--lp-warn-bg); border: 1px solid var(--lp-warn-line); }
.lp-touchhint i.icon { margin: 0; width: auto; }

/* ═══ 3. Палитра ═══════════════════════════════════════════════════════════ */
.lp-palette { display: flex; flex-direction: column; padding: 0; }
.lp-palette__head { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem 0.5rem 0.45rem; background: var(--lp-surface); border-bottom: 1px solid var(--lp-line); }
.lp-palette__title { display: flex; align-items: baseline; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lp-ink-3); }
.lp-palette__count { margin-left: auto; font-family: var(--lp-mono); font-size: 0.72rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--lp-ink-2); }
.lp-progress { height: 3px; background: var(--lp-line); }
.lp-progress__bar { height: 100%; background: var(--lp-accent); transition: width var(--lp-t) ease; }
.lp-search { position: relative; }
.lp-search input { width: 100%; height: 30px; padding: 0 1.6rem; font-size: 0.82rem; color: var(--lp-ink); background: var(--lp-surface); border: 1px solid var(--lp-border); box-sizing: border-box; }
.lp-search input::placeholder { color: var(--lp-glyph); }
i.lp-search__icon { position: absolute; top: 50%; left: 7px; transform: translateY(-50%); margin: 0; font-size: 0.75rem; color: var(--lp-glyph); }
.lp-search__clear { position: absolute; top: 5px; right: 4px; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: var(--lp-ink-3); cursor: pointer; }
.lp-palette__list { padding: 0.35rem 0 0.5rem; }
/* Заголовок группы — кнопка (.lp-palette__groupbtn, секция 13); модификатор ставится на неё же,
   поэтому селектор составной: одноклассовый проигрывал бы .lp-palette__groupbtn по порядку. */
.lp-palette__groupbtn.lp-palette__group--req { color: var(--lp-danger); }
.lp-palette__group-n { margin-left: auto; font-family: var(--lp-mono); letter-spacing: 0; }
/* чип: [иконка] [имя + тип виджета] [+] — тип нужен, чтобы не искать поле «на глаз» */
.lp-chip { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; margin: 0 0.5rem 0.22rem; padding: 0.35rem 0.42rem; font-size: 0.82rem; color: var(--lp-ink); background: var(--lp-surface); border: 1px solid var(--lp-border); cursor: grab; transition: border-color var(--lp-t) ease, background var(--lp-t) ease; }
.lp-chip:hover { border-color: var(--lp-accent); background: var(--lp-accent-wash); }
.lp-chip:active { cursor: grabbing; }
.lp-chip > i.icon { margin: 0; width: 16px; text-align: center; font-size: 0.78rem; color: var(--lp-glyph); }
.lp-chip__body { min-width: 0; display: flex; flex-direction: column; }
.lp-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.lp-chip__type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lp-ink-4); }
.lp-chip--req { border-left: 2px solid var(--lp-danger-line); }
.lp-chip--req .lp-chip__name::after { content: "*"; margin-left: 2px; color: var(--lp-p-req); }
.lp-chip > i.lp-chip__add { opacity: 0; margin: 0; width: auto; font-size: 0.72rem; color: var(--lp-accent); transition: opacity var(--lp-t) ease; }
.lp-chip:hover > i.lp-chip__add, .lp-chip:focus-visible > i.lp-chip__add { opacity: 1; }
.lp-palette__empty { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1.4rem 0.5rem; text-align: center; font-size: 0.82rem; color: var(--lp-ink-3); }
.lp-palette__empty i.icon { margin: 0; width: auto; font-size: 1.5rem; color: var(--lp-accent); opacity: 0.5; }
/* Зона «вернуть в палитру» вооружается по типу драга (класс на корне ставит JS при dragstart),
   а не по dragenter: цель должна быть видна ДО того, как курсор до неё доедет. */
.lp-palette__drophint { display: none; align-items: center; justify-content: center; gap: 0.4rem; min-height: 5rem; margin: 0.5rem; padding: 0.6rem; font-size: 0.75rem; font-weight: 700; text-align: center; color: var(--lp-accent-dark); background: var(--lp-accent-soft); border: 1px dashed var(--lp-accent); }
.lp-palette__drophint i.icon { margin: 0; width: auto; }
.lp-builder--drag-item .lp-palette__drophint, .lp-builder--drag-groupField .lp-palette__drophint { display: flex; }
.lp-builder--drag-item .lp-palette__list, .lp-builder--drag-groupField .lp-palette__list { opacity: 0.32; }
.lp-palette--dropactive { border-color: var(--lp-accent); box-shadow: inset 0 0 0 1px var(--lp-accent); }
.lp-palette--dropactive .lp-palette__drophint { color: #fff; background: var(--lp-accent); border-style: solid; }

/* ═══ 4. Стол → страница → секция ══════════════════════════════════════════ */
/* Стол — инструмент: утопленный, в точку, квадратный. На нём лежит «страница формы». */
.lp-canvas { position: relative; padding: 18px; background-color: var(--lp-desk); background-image: radial-gradient(var(--lp-desk-dot) 1px, transparent 1px); background-size: 8px 8px; border: 1px solid var(--lp-border); }
.lp-canvas--details { background-color: var(--lp-desk-2); }
/* Бумага — граница миров: всё внутри неё существует в сгенерированном приложении. */
.lp-paper { width: min(var(--lp-page), 100%); margin: 0 auto; display: flex; flex-direction: column; gap: var(--lp-gap); padding: 0 var(--lp-pad) var(--lp-pad); font-family: var(--lp-font-paper); background: #fff; border: 1px solid var(--lp-line-soft); box-shadow: var(--lp-e2); }
/* z 10 — выше оверлеев блока (.lp-tools/.lp-resize 6, .lp-grip/.lp-span-badge 5): ни .lp-section,
   ни .lp-canvas не создают stacking context, поэтому они сравниваются с липкой шапкой напрямую
   и при скролле длинной раскладки протекали поверх «Create / edit form». */
.lp-pagebar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 0.5rem; margin: 0 calc(-1 * var(--lp-pad)) var(--lp-gap); padding: 11px var(--lp-pad); background: #fff; border-bottom: 1px solid var(--lp-p-rule); }
.lp-pagebar__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--lp-p-value); font-weight: 600; color: var(--lp-p-title); }
.lp-pagebar__mode { flex: 0 0 auto; white-space: nowrap; padding: 0.08rem 0.42rem; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--lp-ink-3); background: rgba(31, 42, 51, 0.06); }
/* муляжи Cancel/Save: часть картинки, а не контролы — гасим и не даём кликнуть */
.lp-pagebar__fake { flex: 0 0 auto; margin-left: auto; display: flex; gap: 6px; pointer-events: none; user-select: none; opacity: 0.6; }
.lp-fakebtn { height: 26px; min-width: 62px; padding: 0 12px; font-size: 12px; font-weight: 500; line-height: 24px; text-align: center; color: var(--lp-ink-4); background: #fff; border: 1px solid var(--lp-p-line); }
.lp-fakebtn--primary { color: #fff; background: var(--lp-accent); border-color: var(--lp-accent); }

/* Секция = ТОЛЬКО шапка-полоса, без карточки: в сгенерированной форме .form-section не имеет
   ни рамки, ни фона, ни тени — только .section-header 46px и контент. Прежняя карточка
   с двойной тенью врала про результат. */
.lp-section { position: relative; background: transparent; border: 0; }
.lp-section__bar { display: flex; align-items: center; gap: 0.5rem; height: 46px; padding: 8px var(--lp-pad); background: var(--lp-p-head); border-bottom: 1px solid var(--lp-p-rule); cursor: pointer; }
i.lp-section__chev { margin: 0; width: auto; font-size: 14px; color: var(--lp-ink-3); }
.lp-section__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; color: var(--lp-p-title); }
.lp-section__spacer { flex: 1 1 auto; }
.lp-section__req { flex: 0 0 auto; white-space: nowrap; padding: 0.08rem 0.45rem; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lp-accent-dark); background: var(--lp-accent-soft); }
.lp-section__meta { flex: 0 0 auto; white-space: nowrap; font-family: var(--lp-mono); font-size: 11px; color: var(--lp-ink-4); }
.lp-section__actions { flex: 0 0 auto; display: flex; gap: 0.1rem; opacity: 0.5; transition: opacity var(--lp-t) ease; }
.lp-section:hover .lp-section__actions, .lp-section--selected .lp-section__actions, .lp-section__bar:focus-within .lp-section__actions { opacity: 1; }
/* headerless — не ошибка, а нормальный дефолт: положительная формулировка, тонкая пунктирная
   отбивка сверху вместо рамки-«недонастроено» вокруг всего блока */
.lp-section--headerless { background: transparent; border: 0; box-shadow: none; }
.lp-section--headerless .lp-section__bar { height: 28px; padding: 0 var(--lp-pad); background: transparent; border-bottom: 1px dashed var(--lp-line); }
.lp-section__title--ghost { font-size: 0.7rem; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lp-ink-4); }
.lp-section__title--ghost i.icon { margin-right: 0.3rem; width: auto; }
/* выделение/цель — инструмент: inset-кольцо, оно не двигает геометрию бумаги */
.lp-section--selected { box-shadow: inset 0 0 0 2px var(--lp-accent); }
.lp-section--dragover { box-shadow: inset 0 0 0 2px var(--lp-accent); background: var(--lp-accent-wash); }
.lp-section__foot { display: flex; align-items: center; gap: 0.4rem; padding: 0 var(--lp-pad) 10px; }

/* 12-колоночная сетка — единственное место, где геометрия бумаги и генератора обязаны совпасть */
.lp-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--lp-gap); padding: var(--lp-pad); align-items: start; background-origin: content-box; background-clip: content-box; }
.lp-grid__empty { grid-column: span 12; padding: 0.9rem; font-size: 0.8rem; font-style: normal; text-align: center; color: var(--lp-ink-4); border: 1px dashed var(--lp-border); }
.lp-canvas__empty { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: 2.6rem 1rem; text-align: center; color: var(--lp-ink-3); background: rgba(255, 255, 255, 0.55); border: 2px dashed var(--lp-border); }
.lp-canvas__empty i.icon { margin: 0; width: auto; font-size: 1.9rem; color: var(--lp-glyph); opacity: 0.6; }
.lp-canvas__empty-title { font-weight: 700; color: var(--lp-ink); }
.lp-canvas__empty-text { max-width: 24rem; font-size: 0.82rem; }
/* paint() вешает .lp-canvas__empty--dragover и на пустое состояние, и на сам .lp-canvas.
   Селектор обязан быть составным: голый класс закрашивал бы весь стол и стирал точечный
   background-image канваса (background — шорткат). */
.lp-canvas__empty.lp-canvas__empty--dragover { color: var(--lp-accent-dark); background: var(--lp-accent-soft); border-style: solid; border-color: var(--lp-accent); box-shadow: none; }
/* Стол под последней секцией — тоже цель («бросить в новую секцию»); подсвечиваем рамкой,
   иначе на пустом месте канваса непонятно, примет ли он бросок. */
.lp-canvas.lp-canvas__empty--dragover { box-shadow: inset 0 0 0 2px var(--lp-accent); }

/* Линейка колонок: только по hover секции / выделению / драгу — постоянная была бы шумом */
.lp-ruler { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--lp-gap); height: 13px; margin: 0 var(--lp-pad) -9px; opacity: 0; pointer-events: none; transition: opacity var(--lp-t) ease; }
.lp-ruler__tick { border-top: 1px solid var(--lp-accent-line); font-family: var(--lp-mono); font-size: 9px; line-height: 12px; text-align: center; color: var(--lp-ink-4); }
.lp-section:hover > .lp-ruler, .lp-section--selected > .lp-ruler, .lp-builder--dragging .lp-ruler { opacity: 1; }

/* ═══ 5. Блок: field / inlineGroup / relatedList — один язык ═══════════════ */
/* Раньше три вида элемента были оформлены тремя разными языками, а класс выделения у всех
   был .lp-field--selected. Теперь общая база .lp-block + модификаторы; переходный алиас
   .lp-field--selected снят — разметка (BlockClasses/MemberClasses) выдаёт только .lp-block--sel. */
.lp-block, .lp-field, .lp-inline, .lp-related { position: relative; border: 1px solid transparent; padding: 6px; cursor: pointer; transition: background var(--lp-t) ease, box-shadow var(--lp-t) ease; }
.lp-field { min-height: var(--lp-p-field-h); }
.lp-block:hover, .lp-field:hover, .lp-inline:hover, .lp-related:hover { background: var(--lp-accent-wash); box-shadow: inset 0 0 0 1px var(--lp-line); }
/* :hover перечислен явно — иначе (0,2,0) hover перебивал бы (0,1,0) selected и выделение
   «пропадало» под курсором; так обходимся без !important */
.lp-block--sel, .lp-block--sel:hover { background: var(--lp-accent-wash); box-shadow: inset 0 0 0 2px var(--lp-accent); }
.lp-field--ingroup { min-height: 0; padding: 4px; cursor: grab; }

/* Тулбар элемента уезжает в гэп сетки (16px) над блоком: больше не накрывает лейбл и не спорит
   с флагами. Показ по hover + focus-within + выделению — прежний only-hover был недоступен
   ни с клавиатуры, ни на выбранном элементе. */
.lp-tools { position: absolute; top: -11px; right: 4px; z-index: 6; display: flex; align-items: center; gap: 1px; padding: 1px; background: var(--lp-surface); border: 1px solid var(--lp-accent); box-shadow: var(--lp-e3); opacity: 0; visibility: hidden; transform: translateY(2px); transition: opacity var(--lp-t) ease, transform var(--lp-t) ease, visibility var(--lp-t) ease; }
.lp-block:hover > .lp-tools, .lp-block:focus-within > .lp-tools, .lp-block--sel > .lp-tools, .lp-field:hover > .lp-tools, .lp-field:focus-within > .lp-tools { opacity: 1; visibility: visible; transform: none; }
.lp-tools .lp-iconbtn { min-width: 22px; min-height: 22px; padding: 2px; font-size: 0.72rem; }
/* span-бейдж слева в том же гэпе: ширина перестаёт быть числом только в инспекторе */
.lp-span-badge { position: absolute; top: -11px; left: 4px; z-index: 5; height: 18px; padding: 0 6px; font-family: var(--lp-mono); font-size: 10px; font-weight: 700; line-height: 18px; color: #fff; background: var(--lp-accent); opacity: 0; transition: opacity var(--lp-t) ease; }
.lp-block:hover > .lp-span-badge, .lp-block--sel > .lp-span-badge, .lp-field:hover > .lp-span-badge { opacity: 1; }
/* флаги (условно скрыто / read-only) — вниз, отдельным рядом, чтобы не спорить с тулбаром */
.lp-block__flags { position: absolute; bottom: -9px; left: 4px; z-index: 4; display: flex; gap: 3px; }
.lp-flag { display: inline-flex; align-items: center; gap: 0.2rem; height: 16px; padding: 0 5px; font-size: 9px; font-weight: 700; line-height: 16px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lp-ink-3); background: rgba(31, 42, 51, 0.06); border: 1px solid var(--lp-line); }
.lp-flag i.icon { margin: 0; width: auto; font-size: 9px; }
/* --danger — единственный модификатор, который выдаёт BlockFlags (флаг «never rendered»);
   он же самое разрушительное состояние поля, поэтому обязан отличаться от нейтрального read-only.
   Имя менять нельзя без правки BlockFlags: остальные флаги приходят без модификатора. */
.lp-flag--danger { color: var(--lp-danger); background: var(--lp-danger-bg); border-color: var(--lp-danger-line); }

/* Ручка перетаскивания — левый gutter, всегда в одном месте. draggable остаётся на всём
   блоке (иначе ломается текущая механика), grip задаёт предсказуемый прицел. */
.lp-grip { position: absolute; top: 6px; left: -9px; z-index: 5; display: flex; align-items: center; justify-content: center; width: 10px; height: calc(100% - 12px); background: var(--lp-accent); opacity: 0; cursor: grab; transition: opacity var(--lp-t) ease; }
.lp-grip::before { content: ""; width: 2px; height: 14px; background: rgba(255, 255, 255, 0.78); box-shadow: 3px 0 0 rgba(255, 255, 255, 0.78), -3px 0 0 rgba(255, 255, 255, 0.78); }
.lp-block:hover > .lp-grip, .lp-block--sel > .lp-grip, .lp-field:hover > .lp-grip { opacity: 0.85; }
.lp-grip:active { opacity: 1; cursor: grabbing; }

/* Инлайн-группа — конструкция РЕДАКТОРА: в эмите это обычный row с label, никакого контейнера
   в сгенерированной форме нет. Поэтому пунктир, квадрат, chrome-цвета — не «панель». */
.lp-inline { border-color: var(--lp-border); border-style: dashed; background: var(--lp-accent-wash); }
.lp-inline__label { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.35rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--lp-ink-3); }
.lp-inline__label i.icon { margin: 0; width: auto; }
.lp-inline__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-inline__x { margin-left: auto; }
.lp-inline__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--lp-gap); min-height: 46px; }
.lp-inline__grid.lp-dropzone-active { background: var(--lp-accent-soft); box-shadow: inset 0 0 0 2px var(--lp-accent); }
/* крестик «убрать из группы» — инструмент, значит квадратный, а не круглый */
.lp-mini-x { position: absolute; top: -6px; right: -6px; z-index: 2; width: 16px; height: 16px; padding: 0; font-size: 0.72rem; line-height: 14px; text-align: center; color: var(--lp-ink-3); background: var(--lp-surface); border: 1px solid var(--lp-border); cursor: pointer; }
.lp-mini-x:hover { color: var(--lp-danger); border-color: var(--lp-danger-line); }

/* Related list — двойник сгенерированного грида, значит бумага (скругление сохраняем) */
/* без overflow: hidden — оно бы срезало .lp-tools/.lp-span-badge, висящие над блоком;
   скругление шапки задаётся ей самой (см. блок радиусов бумаги) */
.lp-related { padding: 0; border-color: var(--lp-line-soft); background: var(--lp-p-surf); }
.lp-related__head { display: flex; align-items: center; gap: 0.4rem; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--lp-p-title); background: var(--lp-p-surf-2); border-bottom: 1px solid var(--lp-line-soft); }
.lp-related__head i.icon { margin: 0; width: auto; }
.lp-related__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-related__rows { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; }
.lp-related__row { height: 14px; background: var(--lp-p-skel); }
.lp-related__row--head { height: 18px; background: var(--lp-p-skel-2); }
.lp-badge { flex: 0 0 auto; white-space: nowrap; padding: 0.05rem 0.4rem; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lp-ink-3); background: rgba(31, 42, 51, 0.06); }

/* ═══ 6. Имитация контролов (бумага) ══════════════════════════════════════ */
.lp-preview { font-family: var(--lp-font-paper); }
.lp-preview__label { display: flex; align-items: center; margin-bottom: 4px; font-size: var(--lp-p-label); font-weight: 500; color: var(--lp-p-ink); }
.lp-preview__label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-req { margin-left: 2px; font-size: 12px; color: var(--lp-p-req); }
i.lp-ro-lock { margin: 0 0 0 4px; font-size: 12px; color: var(--lp-glyph); }
.lp-control { display: flex; align-items: center; gap: 6px; min-height: var(--lp-p-ctl-h); padding: 0 12px; font-size: var(--lp-p-value); color: var(--lp-p-ph); background: #fff; border: 1px solid var(--lp-p-line); }
/* LayoutFieldPreview выдаёт .lp-control--<shape> для КАЖДОЙ формы (input/numeric/date/address/
   picklist/textarea/multipicklist). Правила есть только у двух: остальным пяти нужна ровно
   геометрия .lp-control, и это не пробел, а решение — не плодить пустые классы. */
.lp-control--textarea { min-height: 72px; align-items: flex-start; padding-top: 10px; }
.lp-control--multipicklist { flex-wrap: wrap; padding: 6px 10px; }
.lp-ph { color: var(--lp-p-ph); }
i.lp-ctl-icon { margin: 0 0 0 auto; width: auto; color: var(--lp-p-ph); }
i.lp-ctl-icon--btn { color: var(--lp-accent); }
.lp-cur { font-weight: 500; color: var(--lp-p-ink); }
/* .lp-caret — СТРЕЛКА выпадающего списка (LayoutFieldPreview:52,72,78). НЕ каретка вставки. */
.lp-caret { margin-left: auto; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--lp-p-ph); }
.lp-spin { position: relative; align-self: stretch; width: 18px; margin-left: auto; border-left: 1px solid var(--lp-p-rule); }
.lp-spin::before, .lp-spin::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border-left: 3px solid transparent; border-right: 3px solid transparent; }
.lp-spin::before { top: 12px; border-bottom: 4px solid var(--lp-p-ph); }
.lp-spin::after { bottom: 12px; border-top: 4px solid var(--lp-p-ph); }
.lp-tag { padding: 2px 8px; font-size: 13px; color: var(--lp-p-tag-ink); background: var(--lp-p-tag-bg); border: 1px solid var(--lp-p-tag-line); }
.lp-tag--more { color: var(--lp-ink-2); background: var(--lp-p-skel); border-color: var(--lp-border); }
/* у boolean нет верхнего лейбла: смещаем на его высоту, иначе чекбокс висит выше базовой
   линии соседей по строке (прежний хак был padding: 22px 0 4px) */
.lp-bool { display: flex; align-items: center; gap: 6px; min-height: var(--lp-p-ctl-h); margin-top: calc(var(--lp-p-label) + 9px); }
.lp-bool__label { font-size: var(--lp-p-label); font-weight: 500; color: var(--lp-p-ink); }
.lp-check { width: 20px; height: 20px; background: #fff; border: 1px solid var(--lp-p-line); }
.lp-currency { display: flex; gap: 8px; }
.lp-control--amount { flex: 1; min-width: 0; }
.lp-control--curcode { flex: none; width: 92px; }
.lp-ro { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 8px 0; font-size: var(--lp-p-value); color: var(--lp-p-ink); border-bottom: 1px solid var(--lp-p-rule); }
.lp-preview--details .lp-preview__label { color: var(--lp-ink-3); }

/* Радиусы бумаги: три правила, отвоёвывающие геометрию у body * !important (app.css:6929).
   Список = аудит: попал сюда → существует в сгенерированной форме. */
.lp-canvas .lp-paper, .lp-paper .lp-control, .lp-paper .lp-related, .lp-paper .lp-fakebtn { border-radius: var(--lp-r-lg) !important; }
.lp-paper .lp-pagebar, .lp-paper .lp-section__bar, .lp-paper .lp-related__head { border-radius: var(--lp-r-lg) var(--lp-r-lg) 0 0 !important; }
.lp-paper .lp-tag, .lp-paper .lp-check, .lp-paper .lp-related__row { border-radius: var(--lp-r-sm) !important; }
.lp-paper .lp-section--headerless .lp-section__bar { border-radius: 0 !important; }

/* ═══ 7. Drag & drop как визуальный язык ══════════════════════════════════ */
/* Во время драга гасим всё, что «дышит» под курсором: hover-подложки, тулбар, ручки, флаги.
   Наоборот, включаем то, что помогает целиться: span-бейджи, линейку, направляющие колонок. */
.lp-builder--dragging, .lp-builder--dragging * { cursor: grabbing !important; }
.lp-builder--dragging .lp-tools { display: none; }
.lp-builder--dragging .lp-grip { opacity: 0 !important; }
.lp-builder--dragging .lp-block__flags { opacity: 0; }
.lp-builder--dragging .lp-block:hover, .lp-builder--dragging .lp-field:hover, .lp-builder--dragging .lp-inline:hover, .lp-builder--dragging .lp-related:hover { background: none; box-shadow: none; }
.lp-builder--dragging .lp-chip:hover { background: var(--lp-surface); border-color: var(--lp-border); }
.lp-builder--dragging .lp-span-badge { opacity: 1; }
.lp-builder--dragging .lp-grid__empty { color: var(--lp-accent-dark); background: var(--lp-accent-soft); border-color: var(--lp-accent); }
/* тащим из палитры → все гриды слабо приглашают: «сюда можно» без выбора конкретной цели.
   groupField здесь обязателен: вытащить участника инлайн-группы обратно в секцию — обычная
   операция (resolveTarget принимает такой источник), без приглашения она читается как запрет. */
.lp-builder--drag-palette .lp-grid, .lp-builder--drag-item .lp-grid, .lp-builder--drag-groupField .lp-grid { outline: 1px dashed var(--lp-accent-line); outline-offset: -8px; }
/* направляющие 12 колонок: фон грида, поэтому всегда под содержимым и без хака z-index на детях.
   Период = c + gap, где c = (100% - 11*gap)/12; 12-й столбец кончается ровно на 100%.
   .lp-canvas--grid — тумблер «Always show the column grid»: те же направляющие, но постоянно. */
.lp-builder--dragging .lp-grid, .lp-canvas--grid .lp-grid { background-image: repeating-linear-gradient(90deg, var(--lp-accent-wash) 0, var(--lp-accent-wash) calc((100% - 11 * var(--lp-gap)) / 12), transparent calc((100% - 11 * var(--lp-gap)) / 12), transparent calc((100% - 11 * var(--lp-gap)) / 12 + var(--lp-gap))); }

/* Источник остаётся на месте заштрихованным слотом: коробка сохраняется → нет reflow,
   и элемент читается как «перемещается», а не «выключен» (прежнее opacity: .4). */
.lp-dragging { position: relative; background: repeating-linear-gradient(135deg, var(--lp-accent-soft) 0 6px, transparent 6px 12px) !important; box-shadow: inset 0 0 0 1px var(--lp-accent-line) !important; }
.lp-dragging > *:not(.lp-span-badge) { visibility: hidden; }
.lp-chip.lp-dragging > * { visibility: hidden; }

/* Drag image: собственный компактный узел вместо снапшота элемента (span-12 тащил плиту
   в пол-канваса и перекрывал цель). Держим за экраном, JS зовёт setDragImage. */
.lp-ghost { position: fixed; top: -1000px; left: -1000px; z-index: -1; display: flex; align-items: center; gap: 0.45rem; width: 228px; padding: 0.4rem 0.5rem; font-family: inherit; font-size: 0.82rem; font-weight: 500; color: var(--ms-text, #1f2a33); background: #fff; border: 1px solid var(--ms-primary, #306f91); box-shadow: 0 10px 22px rgba(16, 29, 38, 0.22); pointer-events: none; }
i.lp-ghost__icon { margin: 0; width: 16px; text-align: center; font-size: 0.78rem; color: rgba(31, 42, 51, 0.38); }
.lp-ghost__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-ghost__span { font-family: var(--lp-mono); font-size: 10px; font-weight: 700; color: var(--ms-primary, #306f91); }

/* Каретка вставки. Живёт в body (position: fixed) — вне дерева Blazor и вне потока сетки,
   поэтому подсветка цели ничего не сдвигает: именно вставка div-заглушки в грид раньше
   выбивала элемент из-под курсора и давала мерцание. Координаты считает js/layout-builder.js.
   Токены билдера тут недоступны (узел не потомок .lp-builder) → значения литеральные. */
.lp-insert-caret { position: fixed; z-index: 900; opacity: 0; pointer-events: none; background: var(--ms-primary, #306f91); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.92), 0 1px 5px rgba(16, 29, 38, 0.35); transition: left 0.08s linear, top 0.08s linear, width 0.08s linear, height 0.08s linear, opacity 0.08s ease; }
.lp-insert-caret--on { opacity: 1; }
/* засечки на концах: 3px полоса без них читается как «граница», а не как «сюда вставится» */
.lp-insert-caret::before, .lp-insert-caret::after { content: ""; position: absolute; background: inherit; }
.lp-insert-caret--v::before, .lp-insert-caret--v::after { left: -3px; width: 9px; height: 3px; }
.lp-insert-caret--v::before { top: 0; }
.lp-insert-caret--v::after { bottom: 0; }
.lp-insert-caret--h::before, .lp-insert-caret--h::after { top: -3px; width: 3px; height: 9px; }
.lp-insert-caret--h::before { left: 0; }
.lp-insert-caret--h::after { right: 0; }
/* смена оси / первое появление — без интерполяции, иначе полоса «разъезжается» по диагонали */
.lp-insert-caret--jump { transition: opacity 0.08s ease; }

/* ═══ 8. Инспектор ════════════════════════════════════════════════════════ */
.lp-inspector { display: flex; flex-direction: column; padding: 0; }
.lp-insp__head { position: sticky; top: 0; z-index: 2; padding: 0.55rem 0.65rem 0.5rem; background: var(--lp-surface); border-bottom: 1px solid var(--lp-line); }
.lp-insp__eyebrow { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--lp-ink-4); }
.lp-insp__title { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.1rem; font-size: 0.95rem; font-weight: 700; color: var(--ms-primary-darker, #184772); }
.lp-insp__title i.icon { margin: 0; width: auto; font-size: 0.86rem; color: var(--lp-accent); }
.lp-insp__chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
.lp-insp__chip { padding: 0.05rem 0.4rem; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lp-ink-3); background: rgba(31, 42, 51, 0.06); }
.lp-insp__chip--req { color: var(--lp-danger); background: var(--lp-danger-bg); }
.lp-insp__chip--ro { color: var(--lp-warn); background: var(--lp-warn-bg); }
.lp-insp__body { padding: 0 0.65rem 0.9rem; }
.lp-insp__group { margin-top: 0.7rem; padding-top: 0.65rem; border-top: 1px solid var(--lp-line); }
.lp-insp__group:first-child { margin-top: 0.6rem; padding-top: 0; border-top: 0; }
.lp-insp__grouptitle { display: block; margin-bottom: 0.4rem; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ms-primary-darker, #184772); }
.lp-insp__label { display: block; margin: 0.5rem 0 0.22rem; font-size: 0.75rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--lp-ink-2); }
/* read-only значение источника (entity / columns / sort): не контрол — редактируется на другой
   вкладке, поэтому подписан как текст, а не как поле ввода. */
.lp-insp__ro { margin-top: 0.15rem; padding: 0.2rem 0; font-size: 0.8rem; color: var(--lp-ink); overflow-wrap: anywhere; }
/* список участников группы — не контрол, а зеркало формы: строка = иконка + имя + доля ширины */
.lp-insp__members { margin: 0.15rem 0 0.5rem; padding: 0; list-style: none; display: grid; gap: 0.2rem; }
.lp-insp__members li { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--lp-ink-2); }
.lp-insp__members li > i.icon { margin: 0; width: 14px; text-align: center; font-size: 0.75rem; color: var(--lp-glyph); }
.lp-insp__members .lp-insp__chip { margin-left: auto; }
/* кнопка во всю колонку — тот же ритм, что у .lp-insp__remove; иначе действие теряется у края */
.lp-inspector button.lp-insp__wide { width: 100%; margin-top: 0.5rem; }
.lp-insp__hint, .lp-insp__note { margin: 0.3rem 0 0; font-size: 0.75rem; font-style: normal; line-height: 1.45; color: var(--lp-ink-3); }
.lp-insp__note { margin-top: 0.6rem; padding: 0.4rem 0.55rem; background: var(--lp-accent-wash); border-left: 3px solid var(--lp-accent); }
.lp-insp__switch { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; margin-top: 0.5rem; font-size: 0.8rem; color: var(--lp-ink-2); cursor: pointer; }
/* тут именно нативный checkbox, а не .ms-toggle: восемь булевых настроек инспектора живут
   в узкой колонке, где переключатель 36px спорил бы с текстом. Красим accent-color'ом. */
.lp-insp__switch input[type="checkbox"] { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--lp-accent); cursor: pointer; }
/* Поля инспектора — единый контрол 30px, квадратный, --lp-border; фокус втягивается внутрь,
   чтобы кольцо не выпирало за 296px колонку. */
.lp-inspector select, .lp-inspector input[type="text"] { height: 30px; padding: 0 8px; font-size: 0.8rem; color: var(--lp-ink); background: var(--lp-surface); border: 1px solid var(--lp-border); box-sizing: border-box; }
.lp-inspector select:focus, .lp-inspector input[type="text"]:focus { border-color: var(--lp-accent); }
/* кольцо фокуса НЕ отменяем (правило одно на весь билдер, секция 10) — только втягиваем внутрь,
   чтобы 2px не выпирали за 296px колонку с overflow: auto и не обрезались ею. */
.lp-inspector select:focus-visible, .lp-inspector input[type="text"]:focus-visible { outline-offset: -2px; }
.lp-insp__input { width: 100%; margin-top: 0.15rem; }
.lp-inspector button.lp-insp__remove { width: 100%; margin-top: 1rem; }

/* Пресеты ширины: пропорция вместо слова — «Half» ничего не говорит про 6/12 */
.lp-widths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.lp-width { display: grid; gap: 4px; padding: 0.3rem 0.26rem 0.24rem; background: var(--lp-surface); border: 1px solid var(--lp-border); cursor: pointer; }
.lp-width__bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 9px; }
.lp-width__cell { background: rgba(31, 42, 51, 0.13); }
.lp-width__cell--on { background: rgba(31, 42, 51, 0.3); }
.lp-width__label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; color: var(--lp-ink-4); }
.lp-width:hover { border-color: var(--lp-accent-line); }
.lp-width.active { background: var(--lp-accent-soft); border-color: var(--lp-accent); }
.lp-width.active .lp-width__cell { background: rgba(48, 111, 145, 0.3); }
.lp-width.active .lp-width__cell--on { background: var(--lp-accent); }
.lp-width.active .lp-width__label { color: var(--lp-accent-dark); }
/* Точная ширина: 12 сегментов = и индикатор, и контрол. Заменяет select «n / 12»:
   одно свойство — один способ его задать. */
.lp-span { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; margin-top: 0.5rem; padding: 1px; background: var(--lp-border); border: 1px solid var(--lp-border); }
.lp-span__seg { height: 18px; padding: 0; background: var(--lp-surface); border: 0; cursor: pointer; }
.lp-span__seg:hover { background: var(--lp-accent-soft); }
.lp-span__seg--on { background: var(--lp-accent); }
.lp-span__read { display: flex; justify-content: space-between; margin-top: 0.25rem; font-family: var(--lp-mono); font-size: 0.66rem; font-weight: 600; color: var(--lp-ink-4); }

/* Пустое состояние инспектора = обзор раскладки: 296px не должны простаивать в самом
   частом состоянии («ничего не выбрано»). */
.lp-insp__empty { padding: 0.75rem 0.65rem; text-align: left; color: var(--lp-ink-3); }
.lp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--lp-line); border: 1px solid var(--lp-line); }
.lp-stat { padding: 0.45rem 0.55rem; background: var(--lp-surface); }
.lp-stat__n { font-size: 1.1rem; font-weight: 700; line-height: 1.15; color: var(--ms-primary-darker, #184772); }
.lp-stat__n--warn { color: var(--lp-warn); }
.lp-stat__n--error { color: var(--lp-danger); }
.lp-stat__l { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--lp-ink-4); }
/* Список шорткатов ОДИН на два места (обзор инспектора и help-поповер) — значит и правило одно:
   раньше их было два, и поповер молча перекрашивал инспектор. Клавиши — голый <kbd>, класса нет. */
.lp-keys { display: grid; gap: 0.3rem; margin-top: 0.8rem; font-size: 0.75rem; color: var(--lp-ink-2); }
/* baseline, а не center: у клавиши своя моноширинная метрика и 2px нижней границы
   («ход клавиши»), поэтому центрирование боксов сажало её подпись на 1.5px выше текста
   строки. По базовой линии обе подписи стоят на одной линии точно и без подгонок —
   так же, как <kbd> внутри обычного предложения. */
.lp-keys__row { display: flex; align-items: baseline; gap: 0.4rem; }
.lp-keys kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; min-height: 1.15rem; padding: 0 0.25rem; font-family: var(--lp-mono); font-size: 0.64rem; font-weight: 600; line-height: 1; text-align: center; color: var(--lp-ink-2); background: var(--lp-surface); border: 1px solid var(--lp-border); border-bottom-width: 2px; }

/* ═══ 9. Мелкие контролы, общие для chrome ════════════════════════════════ */
.lp-iconbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; min-height: 26px; padding: 4px; color: var(--lp-ink-3); background: transparent; border: 0; cursor: pointer; }
.lp-iconbtn i.icon { margin: 0; width: auto; }
.lp-inline__label .lp-iconbtn, .lp-related__head .lp-iconbtn { min-width: 22px; min-height: 22px; padding: 2px; }
.lp-iconbtn:hover { color: var(--lp-accent-dark); background: var(--lp-accent-soft); }
.lp-iconbtn:disabled { opacity: 0.35; cursor: default; background: none; }
.lp-linkbtn { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; height: 26px; padding: 0 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--lp-accent-dark); background: transparent; border: 1px dashed var(--lp-border); cursor: pointer; }
.lp-linkbtn i.icon { margin: 0; width: auto; }
.lp-linkbtn:hover { background: var(--lp-accent-soft); border-style: solid; border-color: var(--lp-accent); }

/* ═══ 10. Фокус ═══════════════════════════════════════════════════════════ */
/* Один ринг на весь билдер. Линия — --ms-primary (4.6:1 на белом, проходит WCAG 1.4.11),
   ореол — --ms-accent, как у .ms-toggle. Прежнее объединённое правило (только чипы/пресеты/
   кнопки) заменяется этим. */
.lp-builder :focus-visible { outline: 2px solid var(--lp-focus); outline-offset: 2px; }
.lp-chip:focus-visible, .lp-block:focus-visible, .lp-field:focus-visible, .lp-inline:focus-visible, .lp-related:focus-visible, .lp-section__bar:focus-visible { outline-offset: 1px; box-shadow: var(--lp-focus-halo); }
.lp-seg__btn:focus-visible, .lp-span__seg:focus-visible { outline-offset: -3px; }
.lp-insert-caret, .lp-ghost { outline: 0; }

/* ═══ 11. Адаптив ═════════════════════════════════════════════════════════ */
/* Сжимаем рельсы токенами, а не переписыванием сетки. */
@media (max-width: 1420px) { .lp-builder { --lp-rail: 212px; --lp-insp: 272px; } }
@media (max-width: 1280px) { .lp-builder { --lp-rail: 196px; --lp-insp: 256px; --lp-page: 100%; --lp-gap: 14px; --lp-pad: 14px; } .lp-canvas { padding: 12px; } .lp-tbtn span { display: none; } .lp-tbtn { padding: 0 0.42rem; }
  /* Тут бумага уже 100% узкого канваса: пояснению остаётся один эллипсис — прячем его
     целиком, как и подписи кнопок тулбара выше. */
  .lp-pagebar__note { display: none; } }
/* ≤1100px билдер перестаёт быть DnD-инструментом и становится click-инструментом:
   HTML5 DnD не существует на touch, а колонки 200/280 в один столбец дают простыню чипов. */
@media (max-width: 1100px) {
  /* .lp-touchhint здесь становится видимым и превращается в ЧЕТВЁРТОГО прямого ребёнка рамы:
     трёхрядный шаблон отдал бы ему трек 1fr, а .lp-workspace уехал бы в неявный ряд ниже. */
  .lp-builder { height: auto; grid-template-rows: auto auto auto minmax(0, 1fr); }
  /* Фокус-режим остаётся оверлеем 100dvh, но ни одна панель тут не скроллится (ниже overflow:
     visible), а body.lp-focus-lock снимает скролл со страницы — значит скроллим саму раму,
     иначе всё, кроме тулбара и статус-строки, оказывается за экраном без единого скролл-порта. */
  .lp-builder[data-lp-focus="on"] { overflow: auto; overscroll-behavior: contain; }
  .lp-workspace { grid-template-columns: minmax(0, 1fr); }
  .lp-palette, .lp-inspector, .lp-canvas { position: static; max-height: none; overflow: visible; }
  .lp-palette { flex-direction: row; align-items: center; gap: 0.4rem; padding: 0.4rem; overflow-x: auto; }
  .lp-palette__head { position: static; flex: 0 0 auto; flex-direction: row; align-items: center; padding: 0 0.5rem 0 0.2rem; border: 0; }
  .lp-palette__list { display: flex; gap: 0.4rem; padding: 0; }
  .lp-progress, .lp-search { display: none; }
  /* заголовок группы — кнопка внутри <li>; прячем ВЕСЬ пункт, иначе в горизонтальной ленте
     остаётся пустой флекс-элемент со своим gap'ом */
  .lp-palette__list > li:has(> .lp-palette__groupbtn) { display: none; }
  /* флекс-элементы ленты — это <li>, а не чипы: без 0 0 auto они сжимаются, и чем больше
     полей у сущности, тем уже каждый чип — а ниже 1100px палитра единственный способ
     положить поле на форму (grip скрыт, DnD выключен) */
  .lp-palette__list > li { flex: 0 0 auto; max-width: 13rem; }
  .lp-chip { margin: 0; }
  .lp-inspector { order: 3; }
  .lp-touchhint { display: flex; }
  .lp-grip { display: none; }
  /* без hover тулбар недостижим — на touch поле стало бы невозможно убрать */
  .lp-tools { opacity: 1; visibility: visible; transform: none; }
}

/* ═══ 12. Motion / контраст / печать ══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .lp-builder *, .lp-insert-caret, .lp-ghost { transition: none !important; animation: none !important; }
  /* каретка теперь не «перетекает», а перескакивает — усиливаем ореол, чтобы прыжок читался */
  .lp-insert-caret { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95), 0 1px 6px rgba(16, 29, 38, 0.4); }
}
@media (forced-colors: active) {
  .lp-insert-caret { background: Highlight; box-shadow: none; forced-color-adjust: none; }
  .lp-section--dragover, .lp-palette--dropactive, .lp-inline__grid.lp-dropzone-active { outline: 2px solid Highlight; outline-offset: -2px; }
  .lp-block--sel { outline: 2px solid Highlight; outline-offset: -2px; }
  .lp-tools, .lp-span-badge, .lp-flag, .lp-chip { border: 1px solid CanvasText; }
}
/* Печать: инструмент не печатается, печатается только «страница формы» — это и есть
   единственный осмысленный артефакт (согласование раскладки на бумаге). */
@media print {
  .lp-toolbar, .lp-statusbar, .lp-palette, .lp-inspector, .lp-tools, .lp-grip, .lp-span-badge, .lp-block__flags, .lp-ruler, .lp-insert-caret, .lp-ghost, .lp-section__actions, .lp-section__foot, .lp-touchhint, .lp-pagebar__fake { display: none !important; }
  .lp-builder { display: block; height: auto; }
  .lp-workspace { display: block; }
  .lp-canvas { padding: 0; overflow: visible; background: none; border: 0; }
  .lp-paper { width: 100%; box-shadow: none; border: 0; }
  .lp-section, .lp-block, .lp-field, .lp-inline, .lp-related { break-inside: avoid; }
}

/* ═══ 13. Дополнения: ресайз, орфаны, поповеры, «не генерится» ═════════════ */

/* Ручка изменения ширины: 10px по правому краю блока. Ниже 1101px не рендерится вовсе
   (на touch тянуть нечем — ширина задаётся из инспектора). */
.lp-resize { position: absolute; top: 0; right: -5px; z-index: 6; width: 10px; height: 100%; cursor: col-resize; opacity: 0; background: linear-gradient(to right, transparent 3px, var(--lp-accent) 3px, var(--lp-accent) 7px, transparent 7px); transition: opacity var(--lp-t) ease; }
.lp-block:hover > .lp-resize, .lp-block:focus-within > .lp-resize, .lp-block--sel > .lp-resize { opacity: 0.55; }
.lp-resize:hover, .lp-resize:active { opacity: 1; }
.lp-builder--resizing, .lp-builder--resizing * { cursor: col-resize !important; user-select: none; }
.lp-builder--resizing .lp-tools, .lp-builder--resizing .lp-grip { display: none; }
.lp-builder--resizing .lp-ruler { opacity: 1; }
/* Бейдж ширины при ресайзе живёт в body (как каретка): .ms-workbench { overflow: hidden } клипает absolute. */
.lp-size-badge { position: fixed; z-index: 900; padding: 2px 7px; font-family: var(--lp-mono); font-size: 11px; font-weight: 700; color: #fff; background: var(--ms-primary, #306f91); box-shadow: 0 2px 8px rgba(16, 29, 38, 0.3); pointer-events: none; }

/* Орфан: ссылка на поле, которого нет в Properties. Никогда не выглядит как обычное поле —
   иначе пользователь считает, что поле на форме есть, а генератор его молча выбросит. */
.lp-block--orphan { background: var(--lp-danger-bg); box-shadow: inset 0 0 0 1px var(--lp-danger-line); }
.lp-orphan-body { display: flex; align-items: center; gap: 6px; min-height: var(--lp-p-ctl-h); padding: 0 10px; font-size: 13px; color: var(--lp-danger); border: 1px dashed var(--lp-danger-line); }
.lp-orphan-body i.icon { margin: 0; width: auto; }
.lp-orphan-name { font-family: var(--lp-mono); font-size: 12px; }

/* Тип, который генератор не превращает в поле формы: поле стоит в раскладке, но в приложении
   его не будет. Предупреждение, а не ошибка — раскладка остаётся валидной. */
.lp-block--ungenerated { background: var(--lp-warn-bg); box-shadow: inset 0 0 0 1px var(--lp-warn-line); }
.lp-ungenerated-body { display: flex; align-items: center; gap: 6px; min-height: var(--lp-p-ctl-h); padding: 0 10px; font-size: 13px; color: var(--lp-warn); border: 1px dashed var(--lp-warn-line); }
.lp-ungenerated-body i.icon { margin: 0; width: auto; }
.lp-chip--disabled { opacity: 0.55; cursor: default; }
.lp-chip--disabled:hover { border-color: var(--lp-border); background: var(--lp-surface); }
.lp-palette__groupbtn { display: flex; width: 100%; align-items: center; gap: 0.35rem; padding: 0.4rem 0.5rem 0.2rem; font: inherit; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lp-ink-4); text-align: left; background: none; border: 0; cursor: pointer; }
.lp-palette__groupbtn i.icon { margin: 0; width: auto; font-size: 0.7rem; }
.lp-palette__groupbtn .lp-palette__group-n { margin-left: auto; }

/* Поповеры билдера (issues / + Field / + Related list / help) живут в потоке билдера, но
   position: fixed — .ms-workbench { overflow: hidden } обрезал бы любой absolute.
   z 950 — выше каретки (900) и ниже SemanticUI-диммера (1000). */
/* Ширина/высота — не константы: якорь у поповера viewport-relative (right/bottom из C#),
   поэтому жёсткие 380×420 на узком или низком окне вылезали за экран, а прокрутить
   position: fixed нечем. Клампы держат панель внутри вьюпорта в любом окне. */
.lp-popover { position: fixed; z-index: 950; display: flex; flex-direction: column; width: min(380px, calc(100vw - 2rem)); max-height: min(420px, calc(100dvh - 7rem)); font-size: 0.82rem; color: var(--lp-ink); background: var(--lp-surface); border: 1px solid var(--lp-border); box-shadow: 0 12px 34px rgba(16, 29, 38, 0.22); }
.lp-popover__head { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.6rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lp-ink-3); background: var(--lp-surface-2); border-bottom: 1px solid var(--lp-line); }
.lp-popover__head i.icon { margin: 0; width: auto; }
.lp-popover__close { margin-left: auto; padding: 0 0.2rem; font-size: 0.9rem; line-height: 1; color: var(--lp-ink-3); background: none; border: 0; cursor: pointer; }
.lp-popover__body { overflow: auto; overscroll-behavior: contain; }
.lp-popover__search { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--lp-line); }
.lp-popover__search input { width: 100%; height: 28px; padding: 0 0.45rem; font-size: 0.82rem; color: var(--lp-ink); background: var(--lp-surface); border: 1px solid var(--lp-border); box-sizing: border-box; }
.lp-popover__empty { padding: 0.9rem 0.6rem; text-align: center; font-size: 0.78rem; color: var(--lp-ink-3); }
.lp-popover__item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; width: 100%; padding: 0.35rem 0.6rem; font: inherit; font-size: 0.82rem; text-align: left; color: var(--lp-ink); background: none; border: 0; border-bottom: 1px solid var(--lp-line-soft); cursor: pointer; }
.lp-popover__item:hover { background: var(--lp-accent-wash); }
.lp-popover__item i.icon { margin: 0; width: 16px; text-align: center; font-size: 0.78rem; color: var(--lp-glyph); }
.lp-popover__item-type { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lp-ink-4); }
.lp-popover__foot { padding: 0.4rem 0.6rem; font-size: 0.72rem; color: var(--lp-ink-4); border-top: 1px solid var(--lp-line); }
/* Сам список шорткатов описан один раз в секции 8; здесь — только отступы контекста:
   у .lp-popover__body своего padding нет, а margin-top обзора инспектора тут лишний. */
.lp-popover .lp-keys { margin: 0; padding: 0.5rem 0.6rem; }

.lp-issue { display: flex; align-items: flex-start; gap: 0.45rem; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--lp-line-soft); }
i.lp-issue__icon { margin: 0; width: auto; height: auto; font-size: 0.78rem; line-height: 1.35; }
.lp-issue--error .lp-issue__icon { color: var(--lp-danger); }
.lp-issue--warning .lp-issue__icon { color: var(--lp-warn); }
.lp-issue__msg { flex: 1 1 auto; padding: 0; font: inherit; font-size: 0.78rem; line-height: 1.35; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; }
.lp-issue__msg:hover { text-decoration: underline; }
.lp-issue__fix { flex: 0 0 auto; height: 22px; padding: 0 0.45rem; font-size: 0.72rem; font-weight: 600; color: var(--lp-accent-dark); background: var(--lp-accent-soft); border: 1px solid var(--lp-accent-line); cursor: pointer; }
.lp-issue__fix:hover { background: rgba(48, 111, 145, 0.16); }

/* Строка «одна раскладка на две поверхности» — снимает вопрос «а где настроить detail-страницу». */
/* Пояснение — первое, чем платим за место: flex-basis 0 значит «занимаю только остаток». */
.lp-pagebar__note { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--lp-ink-4); }
.lp-canvas__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 0.2rem; }
.lp-canvas__empty-foot { max-width: 30rem; margin-top: 0.5rem; font-size: 0.75rem; color: var(--lp-ink-4); }
.lp-related__foot { padding: 0 10px 8px; font-size: 11px; color: var(--lp-ink-4); }
.lp-section__rename { height: 26px; padding: 0 6px; font-size: 15px; font-weight: 600; color: var(--lp-p-title); background: #fff; border: 1px solid var(--lp-accent); }
.lp-section__chevbtn { padding: 2px; min-width: 20px; min-height: 20px; }

@media (max-width: 1100px) { .lp-resize { display: none; } }
@media print { .lp-popover, .lp-size-badge, .lp-resize { display: none !important; } }


/* ── Feature Manager · module cards ─────────────────────────────────────── */
.ms-module-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

.ms-module-card {
  display: flex;
  flex-direction: column;
  height: 15.5rem;
  padding: 1.15rem 1.2rem 1.1rem;
  border: 1px solid rgba(48, 111, 145, 0.14);
  border-radius: 0 !important;
  background: linear-gradient(180deg, #ffffff, rgba(247, 250, 252, 0.96));
  box-shadow: 0 14px 30px rgba(16, 29, 38, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ms-module-card--on {
  border-color: rgba(48, 111, 145, 0.32);
}

.ms-module-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(16, 29, 38, 0.1);
}

.ms-module-card__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.ms-module-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ms-primary-dark);
}

.ms-module-card__icon .icon {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1;
}

.ms-module-card__heading {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.ms-module-card__name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ms-primary-darker);
}

.ms-module-card__desc {
  margin: 0.5rem 0 0;
  color: rgba(31, 42, 51, 0.7);
  line-height: 1.55;
  font-size: 0.92rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ms-module-card__footer {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(48, 111, 145, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ms-module-card__configure.ui.button {
  margin: 0;
  border-radius: 0 !important;
}

/* toggle switch (shared: card footer + modal switches) */
.ms-toggle,
.ms-config-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}

.ms-toggle--disabled {
  cursor: default;
  opacity: 0.6;
}

.ms-toggle input,
.ms-config-switch input,
.ms-config-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ms-toggle__track {
  position: relative;
  width: 2.6rem;
  height: 1.4rem;
  flex: 0 0 2.6rem;
  background: rgba(31, 42, 51, 0.22);
  transition: background 0.16s ease;
}

.ms-toggle__thumb {
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  width: 1.04rem;
  height: 1.04rem;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(16, 29, 38, 0.35);
  transition: transform 0.16s ease;
}

.ms-toggle input:checked ~ .ms-toggle__track,
.ms-config-switch input:checked ~ .ms-toggle__track {
  background: var(--ms-primary);
}

.ms-toggle input:checked ~ .ms-toggle__track .ms-toggle__thumb,
.ms-config-switch input:checked ~ .ms-toggle__track .ms-toggle__thumb {
  transform: translateX(1.2rem);
}

.ms-toggle input:focus-visible ~ .ms-toggle__track,
.ms-config-switch input:focus-visible ~ .ms-toggle__track {
  outline: 2px solid var(--ms-accent);
  outline-offset: 2px;
}

.ms-toggle__label {
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(31, 42, 51, 0.7);
}

/* ── Feature Manager · module Configure modal ───────────────────────────── */
.ms-module-config-modal.ui.modal {
  width: 560px !important;
  max-width: calc(100vw - 4rem) !important;
  position: relative;
}

.ms-module-config-modal__header.header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 3.25rem 0.95rem 1.25rem !important;
}

.ms-module-config-modal__title {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ms-primary-darker);
}

.ms-module-config-modal__title > i.icon {
  margin: 0.15rem 0 0;
  color: var(--ms-primary-dark);
}

.ms-module-config-modal__subtitle {
  margin-top: 0.2rem;
  font-size: 0.86rem;
  font-weight: 400;
  color: rgba(31, 42, 51, 0.7);
}

.ms-module-config-modal__close.ui.button {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 3;
  margin: 0;
  border-radius: 0 !important;
}

.ms-module-config-modal__content.content {
  padding: 1.15rem 1.25rem !important;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.ms-module-config-modal__actions.actions {
  padding: 0.85rem 1.25rem !important;
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.ms-config-section {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.ms-config-section + .ms-config-section {
  padding-top: 1.1rem;
  border-top: 1px solid rgba(48, 111, 145, 0.1);
}

.ms-config-section__head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ms-config-section__title {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ms-primary-darker);
}

.ms-config-section__hint {
  font-size: 0.85rem;
  color: rgba(31, 42, 51, 0.7);
  line-height: 1.45;
}

.ms-config-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ms-config-option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(48, 111, 145, 0.12);
  background: rgba(248, 251, 253, 0.7);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ms-config-option:hover {
  border-color: rgba(48, 111, 145, 0.24);
  background: rgba(244, 248, 251, 0.95);
}

.ms-config-option input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.18rem;
  accent-color: var(--ms-primary);
  cursor: pointer;
}

.ms-config-option:has(input:checked) {
  border-color: var(--ms-primary);
  background: rgba(48, 111, 145, 0.08);
}

.ms-config-option__body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.ms-config-option__name {
  font-weight: 600;
  color: var(--ms-text);
}

.ms-config-option__hint {
  font-size: 0.82rem;
  color: rgba(31, 42, 51, 0.7);
}

.ms-config-switch__label {
  font-weight: 600;
  color: rgba(31, 42, 51, 0.75);
}

.ms-config-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ms-config-field__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(31, 42, 51, 0.7);
}

.ms-config-field .ui.input input {
  border-radius: 0 !important;
}

.ms-config-note {
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  line-height: 1.35;
  border-left: 3px solid var(--ms-primary);
  background: rgba(48, 111, 145, 0.07);
  color: rgba(31, 42, 51, 0.78);
}

.ms-config-note--warn {
  border-left-color: #b7791f;
  background: rgba(183, 121, 31, 0.09);
  color: #8a5a12;
}

.ms-config-options--chips {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ms-config-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid rgba(48, 111, 145, 0.2);
  background: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(31, 42, 51, 0.7);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ms-config-chip--on {
  border-color: var(--ms-primary);
  background: rgba(48, 111, 145, 0.1);
  color: var(--ms-primary-darker);
}

/* ── Feature Manager · fields roster ────────────────────────────────────────
   The Fields tab is scanned, not read: identity (mono api name over its label)
   on the left, type family encoded as a glyph, parametrisation in its own
   column so picklist values stop crowding the type, and tone reserved for real
   state (required / commented out) rather than for taxonomy. */
.ms-field-roster {
  --ms-field-rule-line: rgba(48, 111, 145, 0.12);
  --ms-field-row-line: rgba(48, 111, 145, 0.08);
  --ms-field-ink-muted: rgba(31, 42, 51, 0.76);
  --ms-field-ink-faint: rgba(31, 42, 51, 0.7);
  --ms-field-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
  border: 1px solid var(--ms-field-rule-line);
  border-radius: 0 !important;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(16, 29, 38, 0.04);
  overflow: hidden;
}

/* toolbar: derived counts (the real shape of the entity) + filter */
.ms-field-roster__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  flex-wrap: wrap;
  padding: 0.8rem 1.15rem;
  border-bottom: 1px solid var(--ms-field-rule-line);
  background: linear-gradient(180deg, rgba(247, 250, 252, 0.96), rgba(255, 255, 255, 0.96));
}

.ms-field-roster__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.ms-field-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.38rem;
  padding: 0.1rem 1.05rem;
  color: var(--ms-field-ink-muted);
  font-size: 0.86rem;
  letter-spacing: 0.015em;
}

.ms-field-stat:first-child {
  padding-left: 0;
}

.ms-field-stat + .ms-field-stat {
  border-left: 1px solid var(--ms-field-rule-line);
}

.ms-field-stat strong {
  color: var(--ms-primary-darker);
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ms-field-stat--required strong {
  color: #8a5300;
}

.ms-field-roster__filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ms-field-roster__filter .ui.input {
  margin: 0;
}

.ms-field-roster__filter .ui.input input {
  min-width: 15rem;
  border-radius: 0 !important;
  border-color: rgba(48, 111, 145, 0.18);
}

.ms-field-roster__clear.ui.button {
  margin: 0;
  border-radius: 0 !important;
}

.ms-field-roster__empty {
  margin: 0;
  padding: 3rem 1.15rem;
  color: var(--ms-field-ink-muted);
  text-align: center;
}

.ms-field-roster__empty strong {
  color: var(--ms-primary-darker);
}

.ms-field-roster__scroll {
  overflow-x: auto;
}

.ms-field-table {
  width: 100%;
  min-width: 56rem;
  border-collapse: collapse;
  table-layout: fixed;
}

.ms-field-table thead th {
  padding: 0.6rem 1.15rem;
  border-bottom: 1px solid var(--ms-field-rule-line);
  background: rgba(250, 252, 253, 0.92);
  color: var(--ms-field-ink-faint);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
}

/* Identity / type / rules are bounded; Configuration absorbs the slack, because it
   is the only column whose content legitimately varies in length. */
.ms-field-table__col--field {
  width: 24rem;
}

.ms-field-table__col--type {
  width: 11rem;
}

.ms-field-table__col--config {
  width: auto;
}

.ms-field-table__col--rules {
  width: 15rem;
}

/* hairlines so columns read as a grid — an empty cell then reads as empty,
   not as a hole in the layout */
.ms-field-table thead th + th,
.ms-field-row > td + td {
  border-left: 1px solid var(--ms-field-row-line);
}

.ms-field-row > td {
  padding: 0.7rem 1.15rem;
  border-bottom: 1px solid var(--ms-field-row-line);
  vertical-align: middle;
  transition: background-color 0.14s ease;
}

.ms-field-row:last-child > td {
  border-bottom: none;
}

.ms-field-row:hover > td {
  background: rgba(48, 111, 145, 0.035);
}

.ms-field-row--muted > td {
  background: rgba(31, 42, 51, 0.022);
}

.ms-field-row--muted .ms-field-ident__api {
  color: var(--ms-field-ink-muted);
  text-decoration: line-through;
}

/* identity: glyph tile + mono api name over its display label */
.ms-field-ident {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 0;
}

.ms-field-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.15rem;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid rgba(48, 111, 145, 0.16);
  background: rgba(48, 111, 145, 0.06);
  color: var(--ms-primary);
}

.ms-field-glyph .icon {
  margin: 0;
  width: auto;
  height: auto;
  font-size: 1rem;
  line-height: 1;
}

/* relations are structurally special — they wire this feature to another one */
.ms-field-glyph--relation {
  border-color: var(--ms-primary-darker);
  background: var(--ms-primary-darker);
  color: #ffffff;
}

.ms-field-glyph--unknown {
  border-color: rgba(183, 121, 31, 0.35);
  background: rgba(183, 121, 31, 0.1);
  color: #8a5a12;
}

/* shrink-to-content so the name-role badge hugs the api name instead of drifting
   to the far edge of the column */
.ms-field-ident__text {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  flex: 0 1 auto;
}

.ms-field-ident__api {
  font-family: var(--ms-field-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ms-primary-darker);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ms-field-ident__display {
  font-size: 0.85rem;
  color: var(--ms-field-ink-muted);
  line-height: 1.3;
}

.ms-field-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0.14rem 0.42rem;
  border: 1px solid rgba(48, 111, 145, 0.28);
  background: rgba(95, 178, 213, 0.11);
  color: var(--ms-primary-dark);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* type — the secondary detail is a human phrase ("3 options"), so it stays in the
   body face; mono is reserved for raw values (format / behavior) */
.ms-field-type {
  display: block;
  color: var(--ms-text);
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.3;
}

.ms-field-type__detail {
  display: block;
  margin-top: 0.1rem;
  color: var(--ms-field-ink-muted);
  font-size: 0.8rem;
  line-height: 1.3;
}

/* configuration: lookup target, picklist values, format / behavior */
.ms-field-config {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.42rem;
  min-width: 0;
}

.ms-field-target {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.22rem 0.55rem;
  border: 1px solid rgba(18, 88, 135, 0.22);
  background: rgba(18, 88, 135, 0.06);
  color: var(--ms-primary-dark);
  font-size: 0.87rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.ms-field-target .icon {
  margin: 0;
  width: auto;
  height: auto;
  font-size: 0.82rem;
  line-height: 1;
  opacity: 0.7;
}

.ms-field-target__cardinality {
  margin-left: 0.1rem;
  padding-left: 0.42rem;
  border-left: 1px solid rgba(18, 88, 135, 0.2);
  color: var(--ms-field-ink-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ms-field-values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.ms-field-value {
  padding: 0.16rem 0.46rem;
  border: 1px solid var(--ms-field-rule-line);
  background: rgba(250, 252, 253, 0.95);
  color: rgba(31, 42, 51, 0.72);
  font-size: 0.81rem;
  line-height: 1.35;
}

.ms-field-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
}

.ms-field-meta__key {
  color: var(--ms-field-ink-faint);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ms-field-meta code {
  padding: 0.06rem 0.34rem;
  background: rgba(48, 111, 145, 0.06);
  color: rgba(31, 42, 51, 0.74);
  font-family: var(--ms-field-mono);
  font-size: 0.81rem;
}

/* rules: tone carries the constraint, the dot carries the emphasis */
.ms-field-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.ms-field-rule {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  padding: 0.19rem 0.5rem;
  border: 1px solid var(--ms-field-rule-line);
  background: #ffffff;
  color: rgba(31, 42, 51, 0.7);
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.ms-field-rule--required {
  border-color: rgba(176, 106, 0, 0.3);
  background: rgba(214, 158, 46, 0.13);
  color: #8a5300;
}

.ms-field-rule--required::before {
  content: "";
  width: 0.34rem;
  height: 0.34rem;
  background: currentColor;
}

.ms-field-rule--unique {
  border-color: rgba(48, 111, 145, 0.3);
  background: rgba(48, 111, 145, 0.09);
  color: var(--ms-primary-dark);
}

.ms-field-rule--off {
  border-color: rgba(31, 42, 51, 0.15);
  background: rgba(31, 42, 51, 0.05);
  color: rgba(31, 42, 51, 0.5);
}

/* matches .ms-field-type metrics so the placeholder sits level with real values */
.ms-field-none {
  display: block;
  color: rgba(31, 42, 51, 0.26);
  font-size: 0.93rem;
  line-height: 1.3;
}

/* laptop widths: give Configuration back the room the fixed columns were holding,
   so picklist chips stop wrapping onto three lines */
@media (max-width: 1500px) {
  .ms-field-table__col--field {
    width: 20rem;
  }

  .ms-field-table__col--type {
    width: 10rem;
  }

  .ms-field-table__col--rules {
    width: 13rem;
  }

  .ms-field-row > td,
  .ms-field-table thead th {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}

@media (max-width: 1100px) {
  .ms-field-roster__toolbar {
    align-items: flex-start;
  }

  .ms-field-roster__filter {
    width: 100%;
  }

  .ms-field-roster__filter .ui.input {
    flex: 1 1 auto;
  }

  .ms-field-roster__filter .ui.input input {
    min-width: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-field-row > td {
    transition: none;
  }
}

/* ── Rebuild-диалог раскладки: список пресетов с пояснением под заголовком ──── */
.ms-radio-row { padding: 0.35rem 0; }
.ms-radio-row + .ms-radio-row { border-top: 1px solid rgba(48, 111, 145, 0.1); }
.ms-radio-row label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 0.5rem; align-items: baseline; cursor: pointer; }
.ms-radio-row input { grid-row: span 2; align-self: center; }
.ms-radio-row__title { font-weight: 600; color: var(--ms-text, #1f2a33); }
.ms-radio-row__hint { grid-column: 2; font-size: 0.78rem; color: rgba(31, 42, 51, 0.7); }

/* ── Бейдж вкладки: число дефектов, которые ждут внимания на этой вкладке ───── */
/* Оптический сдвиг: вкладка — блок с text-align, поэтому бейдж выравнивается по базовой
   линии. Цифра садится на базовую линию подписи точно, но БОКС бейджа при этом висит
   на 1.8px ниже оптического центра подписи (кегль цифры вдвое меньше кегля вкладки).
   Поднимаем сам бокс; величина в rem — она задаётся кеглем ВКЛАДКИ, а не бейджа. */
.ms-tab-badge { position: relative; top: -0.125rem; display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; margin-left: 0.4rem; padding: 0 0.3rem; font-size: 0.68rem; font-weight: 700; line-height: 1; color: #fff; background: #9f3a38; }

/* Ручка перетаскивания в шапке секции / инлайн-группы / related list. Это ИКОНКА В ПОТОКЕ,
   а не gutter-хендл блока (.lp-grip): у шапок перетаскивается вся полоса, а абсолютный бар
   позиционировался бы относительно секции и растянулся бы на всю её высоту — оставаясь при
   этом навсегда невидимым, потому что правило показа .lp-grip адресует только прямых
   потомков .lp-block. */
i.lp-draghint { margin: 0; width: auto; font-size: 12px; color: var(--lp-glyph); cursor: grab; opacity: 0.45; transition: opacity var(--lp-t) ease; }
.lp-section:hover i.lp-draghint, .lp-block:hover > * > i.lp-draghint, .lp-section--selected i.lp-draghint, .lp-block--sel > * > i.lp-draghint { opacity: 0.9; }
i.lp-draghint:active { cursor: grabbing; opacity: 1; }
.lp-builder--dragging i.lp-draghint { opacity: 0; }
@media print { .lp-draghint { display: none !important; } }

/* ── Feature Specification editor · редактор типа свойства (.ed-*) ──────────── */
/* Приписан в КОНЕЦ файла намеренно: правила по иконкам пишутся как i.ed-* (0,1,1), чтобы
   выиграть у SemanticUI `i.icon` — при равной специфичности решает порядок подключения.
   Хром квадратный: глобальный сброс border-radius всё равно снимет любые скругления. */

/* Ячейка типа: ОДИН размер во всех строках. Триггер тянется на всю ширину колонки, высота
   фиксирована, а содержимое разложено по колонкам грида — [иконка][тип][аргумент][статус][шеврон].
   Раньше кнопка обжимала контент, и «Text» рядом с «Picklist[Online, Offline, …]» рвал колонку. */
.ed-type { position: relative; }
/* .ms-field-validation-anchor — flex-контейнер, поэтому триггер как flex-элемент обжимался по
   содержимому и фиксированная ширина колонки ничего не давала. */
.ms-field-validation-anchor > .ed-type { flex: 1 1 auto; min-width: 0; }
.ed-type__trigger { display: grid; grid-template-columns: 16px auto minmax(0, 1fr) auto 14px; align-items: center; gap: 0.45rem; width: 100%; height: 34px; padding: 0 0.5rem; font-size: 0.85rem; text-align: left; color: var(--ms-text, #1f2a33); background: #fff; border: 1px solid var(--ms-border, #d9e0e6); cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.ed-type__trigger:hover { border-color: var(--ms-primary, #306f91); background: rgba(48, 111, 145, 0.04); }
.ed-type__trigger--empty { border-style: dashed; }
.ed-type__trigger--empty .ed-type__name { color: rgba(31, 42, 51, 0.7); }
.ed-type__trigger--warn { border-color: rgba(183, 121, 31, 0.5); }
.ed-type__trigger--error { border-color: rgba(159, 58, 56, 0.5); background: rgba(159, 58, 56, 0.04); }
i.ed-type__icon { margin: 0; width: 16px; text-align: center; font-size: 0.82rem; color: rgba(31, 42, 51, 0.4); }
.ed-type__trigger--error i.ed-type__icon { color: #9f3a38; }
.ed-type__name { font-weight: 600; white-space: nowrap; }
/* Аргумент — вторичен: приглушён, моноширинный и обрезается первым. */
.ed-type__arg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.78rem; color: rgba(31, 42, 51, 0.7); }
.ed-type__chip { padding: 0.05rem 0.35rem; font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.ed-type__chip--warn { color: #8a5a12; background: rgba(183, 121, 31, 0.14); }
.ed-type__chip--error { color: #9f3a38; background: rgba(159, 58, 56, 0.12); }
i.ed-type__caret { grid-column: -2 / -1; justify-self: end; margin: 0; width: auto; font-size: 0.85rem; color: rgba(31, 42, 51, 0.35); }
.ed-type__trigger:hover i.ed-type__caret { color: var(--ms-primary, #306f91); }

/* Панель живёт fixed и позиционируется из js/draggable-panel.js (центр экрана, дальше — куда увели).
   left/top здесь НЕ задаются: их выставляет скрипт, иначе они перебивали бы перетаскивание. */
.ed-pop { position: fixed; z-index: 950; display: flex; flex-direction: column; width: 760px; max-width: calc(100vw - 2rem); max-height: min(640px, calc(100dvh - 4rem)); font-size: 14px; background: #fff; border: 1px solid var(--ms-border, #d9e0e6); box-shadow: 0 18px 48px rgba(16, 29, 38, 0.28); }
.ed-pop.is-dragging { user-select: none; box-shadow: 0 24px 60px rgba(16, 29, 38, 0.34); }
.ed-pop__head { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 0.9rem; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(31, 42, 51, 0.7); background: #f4f8fa; border-bottom: 1px solid var(--ms-border, #d9e0e6); cursor: grab; }
.ed-pop.is-dragging .ed-pop__head { cursor: grabbing; }
.ed-pop__head i.icon { margin: 0; width: auto; font-size: 0.85rem; }
.ed-pop__drag { margin-left: 0.5rem; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; color: rgba(31, 42, 51, 0.3); }
.ed-pop__close { margin-left: auto; padding: 0 0.3rem; font-size: 1.15rem; line-height: 1; color: rgba(31, 42, 51, 0.7); background: none; border: 0; cursor: pointer; }
.ed-pop__close:hover { color: var(--ms-text, #1f2a33); }
.ed-pop__body { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 0; flex: 1 1 auto; }
.ed-pop__kinds { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--ms-border, #d9e0e6); }
.ed-pop__search { padding: 0.5rem; border-bottom: 1px solid var(--ms-border, #d9e0e6); }
.ed-pop__search input { width: 100%; height: 34px; padding: 0 0.5rem; font-size: 14px; border: 1px solid var(--ms-border, #d9e0e6); box-sizing: border-box; }
.ed-pop__list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0.35rem 0; overflow: auto; list-style: none; }
.ed-pop__group { padding: 0.55rem 0.75rem 0.2rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(31, 42, 51, 0.7); }
.ed-pop__kind { display: block; width: 100%; padding: 0.42rem 0.75rem; font-size: 14px; text-align: left; color: var(--ms-text, #1f2a33); background: none; border: 0; cursor: pointer; }
.ed-pop__kind:hover { background: rgba(48, 111, 145, 0.08); }
.ed-pop__kind.is-selected { color: #fff; background: var(--ms-primary, #306f91); }
.ed-pop__args { min-height: 0; padding: 0.8rem 0.9rem; overflow: auto; }
.ed-pop__help { font-size: 13.5px; line-height: 1.55; color: rgba(31, 42, 51, 0.7); }
.ed-pop__label { display: block; margin: 0.9rem 0 0.35rem; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(31, 42, 51, 0.7); }
.ed-pop__input { width: 100%; height: 36px; padding: 0 0.55rem; font-size: 14px; color: var(--ms-text, #1f2a33); background: #fff; border: 1px solid var(--ms-border, #d9e0e6); box-sizing: border-box; }
.ed-pop__hint { margin-top: 0.4rem; font-size: 12.5px; line-height: 1.45; color: rgba(31, 42, 51, 0.7); }
/* Блок настроек валидации отделён от аргументов типа чертой: это РАЗНЫЕ вещи — выше собирается
   строка типа, ниже задаются правила, по которым значение будет проверяться. Без границы читается
   как продолжение аргументов, и «Pattern» принимают за часть типа. */
.ed-pop__rules { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid rgba(31, 42, 51, 0.12); }
.ed-pop__note { margin-top: 0.85rem; padding: 0.55rem 0.65rem; font-size: 13px; color: #8a5a12; background: rgba(183, 121, 31, 0.09); border-left: 3px solid rgba(183, 121, 31, 0.4); }
.ed-pop__link { padding: 0; font: inherit; color: var(--ms-primary-darker, #184772); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.ed-pop__values { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; }
.ed-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.5rem; font-size: 13px; color: #002259; background: #d2e2fb; border: 1px solid #a2c3f7; }
.ed-chip__x { padding: 0; font-size: 0.9rem; line-height: 1; color: inherit; background: none; border: 0; cursor: pointer; }
.ed-pop__valueadd { display: flex; gap: 0.35rem; }
.ed-pop__error { margin-top: 0.45rem; font-size: 13px; color: #9f3a38; }
.ed-pop__foot { display: flex; align-items: flex-end; gap: 0.8rem; padding: 0.65rem 0.8rem; border-top: 1px solid var(--ms-border, #d9e0e6); background: #fbfcfd; }
.ed-pop__outcome { flex: 1 1 auto; min-width: 0; display: grid; gap: 0.2rem; }
.ed-pop__readout { display: flex; align-items: baseline; gap: 0.65rem; font-size: 13px; color: rgba(31, 42, 51, 0.7); }
.ed-pop__readout > span:first-child { flex: 0 0 5.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; color: rgba(31, 42, 51, 0.7); }
.ed-pop__readout code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; color: var(--ms-text, #1f2a33); }
.ed-pop__actions { flex: 0 0 auto; display: flex; gap: 0.4rem; }
.ed-type :focus-visible, .ed-pop :focus-visible { outline: 2px solid var(--ms-primary, #306f91); outline-offset: 1px; }

@media (max-width: 1100px) { .ed-pop { width: calc(100vw - 2rem); } .ed-pop__body { grid-template-columns: minmax(0, 1fr); } .ed-pop__kinds { max-height: 12rem; border-right: 0; border-bottom: 1px solid var(--ms-border, #d9e0e6); } }
@media (prefers-reduced-motion: reduce) { .ed-type__trigger { transition: none !important; } }
@media print { .ed-pop { display: none !important; } }

/* Колонка типа получает фиксированную ширину: иначе ячейка таблицы обжимается по содержимому и
   колонка «пляшет» от строки к строке — ровно то, что делал прежний inline-инпут. */
.ed-col-type { width: 20rem; }
@media (max-width: 1280px) { .ed-col-type { width: 16rem; } }

/* ===========================================================================
   Derived names — карточка «во что превратятся ваши три поля идентичности».
   Только чтение: ни одного интерактивного элемента, поэтому оформление
   намеренно тише полей формы рядом — она объясняет, а не просит ввода.
   =========================================================================== */

/* Отступы намеренно НЕ объявляются: элемент несёт .field, а SemanticUI объявляет margin на
   `.ui.form .field` (0,2,0) шорткатом — любое одноклассовое margin-* здесь молча проиграло бы.
   Рамку и фон SemanticUI на .field не ставит, поэтому эти два свойства безопасны. */
.ms-derived-names { border: 1px solid var(--ms-border, #d9e0e6); background: #fbfcfd; }
/* Иконка внутри шапки: SemanticUI объявляет margin/width/font-size прямо на i.icon (0,1,1),
   поэтому селектор обязан быть контекстным — иначе правило проигрывает молча. */
.ms-derived-names__list { display: grid; gap: 0; }
.ms-derived-names__row { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 0.75rem; padding: 0.4rem 0.75rem; border-top: 1px solid rgba(217, 224, 230, 0.6); }
.ms-derived-names__row:first-child { border-top: 0; }
.ms-derived-names__label { font-size: 13px; color: rgba(31, 42, 51, 0.7); }
.ms-derived-names__value { min-width: 0; display: grid; gap: 0.15rem; }
.ms-derived-names__value code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; color: var(--ms-text, #1f2a33); overflow-wrap: anywhere; }
.ms-derived-names__note { font-size: 12.5px; line-height: 1.45; color: rgba(31, 42, 51, 0.7); }
.ms-derived-names__hint { padding: 0.45rem 0.75rem; font-size: 12.5px; color: rgba(31, 42, 51, 0.7); border-top: 1px solid var(--ms-border, #d9e0e6); }

@media (max-width: 900px) { .ms-derived-names__row { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } }

/* Ширины колонок таблицы свойств: тумблерам и действиям — по размеру содержимого.
   Цифры взяты замером, а не на глаз (1rem = 14px, SemanticUI переопределяет корневой размер):
   заголовок «Mandatory» с иконкой подсказки требует 106px — на 91px он наезжал на соседний,
   а пара кнопок в ячейке действий требует 99px — на 77px она вылезала за таблицу и рождала
   тот самый горизонтальный скролл. min-width не ставим: в table-layout: fixed он не участвует
   в раскладке, зато задирает минимальную ширину таблицы и снова даёт скролл. */
.ed-col-flag { width: 8rem; }
.ed-col-actions { width: 7.25rem; }

/* Ширины колонок таблицы свойств по СМЫСЛУ, а не по позиции. Существующие правила
   `.ms-properties-table thead th:nth-child(N)` (0,3,1) написаны под старый набор колонок и после
   удаления Format поехали: «Readonly» получал ширину, рассчитанную на текстовое поле. Классовые
   правила ниже специфичнее (0,4,1) и переживают любое изменение порядка колонок.
   Позиционные правила оставлены как есть — по ним всё ещё живёт таблица только для чтения. */
.ms-properties-table.ui.table thead th.ed-col-type { width: 20rem; }
.ms-properties-table.ui.table thead th.ed-col-flag { width: 8rem; }
.ms-properties-table.ui.table thead th.ed-col-actions { width: 7.25rem; }
/* На узком экране ужимается только тип: у тумблеров ширину держит текст заголовка, и урезать её
   значит вернуть наезд «Mandatory» на «Unique». Не влезло — таблица прокручивается, это честнее. */
@media (max-width: 1280px) {
  .ms-properties-table.ui.table thead th.ed-col-type { width: 16rem; }
}
/* Колонок стало на одну меньше — таблице больше не нужно распирать контейнер на прежнюю ширину. */
.ms-properties-table.ui.table { min-width: 82rem; }
.ms-properties-table--compact.ui.table { min-width: 66rem; }
/* Колонка имени — «резиновая»: в fixed-раскладке остаток ширины распределяется пропорционально между
   ВСЕМИ колонками с заданной шириной, поэтому тумблеры раздувались вместе с таблицей. Освобождаем
   имя от позиционной ширины, и весь остаток забирает оно одно. */
.ms-properties-table.ui.table thead th.ed-col-name { width: auto; }

/* ===========================================================================
   Lists — пикер колонок и конструктор фильтра.
   Своя приставка (.ed-cols / .ed-filt), потому что вкладка Lists живёт в ЯЧЕЙКАХ
   таблицы, а не в поповере: правила редактора типа писаны под центрированную
   панель и здесь дали бы чужую геометрию.
   Иконок SemanticUI внутри намеренно нет — управляющие элементы текстовые,
   поэтому ни одно правило ниже не рискует проиграть селектору i.icon (0,1,1).
   =========================================================================== */

/* Строка состояния карточки: что генератор делает с этой таблицей на самом деле.
   Контекстный селектор обязателен — SemanticUI объявляет отступы у .ui.form p. */
.ms-form-card.ui.form .ms-lists-hint { margin: 0 0 0.75rem; padding: 0.5rem 0.65rem; font-size: 12.5px; line-height: 1.5; color: rgba(31, 42, 51, 0.7); background: #fbfcfd; border: 1px solid var(--ms-border, #d9e0e6); border-left: 3px solid rgba(48, 111, 145, 0.35); }
.ms-lists-hint__badge { margin-right: 0.45rem; padding: 0.1rem 0.4rem; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #184772; background: rgba(48, 111, 145, 0.12); }

/* --- Пикер колонок ------------------------------------------------------- */

.ed-cols { position: relative; display: grid; gap: 0.35rem; min-width: 16rem; }
.ed-cols__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.ed-cols__empty { font-size: 12.5px; color: rgba(31, 42, 51, 0.7); }

/* Чип = хранимая колонка. Цвет несёт СУДЬБУ колонки в сетке, а не оформление:
   обычная — синяя, «сетка её выбросит» — жёлтая, «такого поля нет» — красная. */
.ed-cols__chip { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; padding: 0.15rem 0.35rem 0.15rem 0.5rem; font-size: 12.5px; color: #002259; background: #d2e2fb; border: 1px solid #a2c3f7; }
.ed-cols__chip:focus-visible { outline: 2px solid var(--ms-primary, #306f91); outline-offset: 1px; }
.ed-cols__chip--warn { color: #8a5a12; background: rgba(183, 121, 31, 0.12); border-color: rgba(183, 121, 31, 0.45); }
.ed-cols__chip--bad { color: #912d2b; background: rgba(159, 58, 56, 0.1); border-color: rgba(159, 58, 56, 0.4); }
.ed-cols__chip--inherited { color: #2f4858; background: #e8edf1; border-color: #cbd6de; }
.ed-cols__chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-cols__tag { padding: 0 0.25rem; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(47, 72, 88, 0.6); border: 1px solid rgba(47, 72, 88, 0.25); }
.ed-cols__chip-fix { padding: 0 0.3rem; font: inherit; font-size: 11.5px; color: inherit; background: rgba(255, 255, 255, 0.55); border: 1px solid currentColor; cursor: pointer; }
.ed-cols__chip-x { padding: 0 0.15rem; font-size: 0.95rem; line-height: 1; color: inherit; background: none; border: 0; cursor: pointer; }

.ed-cols__bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ed-cols__add { padding: 0.2rem 0.5rem; font-size: 12.5px; color: var(--ms-primary-darker, #184772); background: #fff; border: 1px dashed var(--ms-border, #d9e0e6); cursor: pointer; }
.ed-cols__add:hover { border-color: var(--ms-primary, #306f91); }
.ed-cols__hint { font-size: 11.5px; color: rgba(31, 42, 51, 0.7); }

/* Панель ловит клик мимо себя прозрачным слоем на весь экран: без него закрыть
   пикер можно было бы только повторным попаданием в кнопку. */
.ed-cols__scrim { position: fixed; inset: 0; z-index: 940; background: transparent; }
/* fixed, а не absolute: .ms-workbench объявлен overflow: hidden и обрезал панель у нижних строк —
   доскроллить до неё было нельзя. Координаты ставит js/anchored-panel.js, поэтому top/left здесь нет:
   заданные тут, они перебивали бы расчёт до первой отрисовки и панель прыгала бы из угла. */
.ed-cols__panel { position: fixed; z-index: 941; display: flex; flex-direction: column; width: 22rem; max-width: calc(100vw - 1rem); max-height: min(24rem, calc(100dvh - 2rem)); background: #fff; border: 1px solid var(--ms-border, #d9e0e6); box-shadow: 0 6px 18px rgba(31, 42, 51, 0.14); }
.ed-cols__search { padding: 0.4rem; border-bottom: 1px solid var(--ms-border, #d9e0e6); }
.ed-cols__search input { width: 100%; height: 32px; padding: 0 0.5rem; font-size: 13px; color: var(--ms-text, #1f2a33); background: #fff; border: 1px solid var(--ms-border, #d9e0e6); box-sizing: border-box; }
.ed-cols__state { padding: 0.5rem 0.6rem; font-size: 12.5px; line-height: 1.45; color: rgba(31, 42, 51, 0.7); }
.ed-cols__state--bad { color: #912d2b; }
.ed-cols__retry { margin-left: 0.35rem; padding: 0; font: inherit; color: var(--ms-primary-darker, #184772); background: none; border: 0; text-decoration: underline; cursor: pointer; }
/* Список забирает остаток высоты панели: её потолок считает anchored-panel.js по месту на экране,
   поэтому свой max-height здесь только мешал бы — поиск и «вписать вручную» должны оставаться видимыми. */
.ed-cols__list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.ed-cols__search, .ed-cols__free, .ed-cols__state { flex: 0 0 auto; }
.ed-cols__group { padding: 0.4rem 0.6rem 0.2rem; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(31, 42, 51, 0.7); }

/* Непригодное поле показывается неактивным И С ПРИЧИНОЙ. Спрятать его нельзя:
   автор, не нашедший поле, которое минуту назад завёл на вкладке Properties,
   решит, что сломался пикер, — а причина отвечает на вопрос прямо. */
.ed-cols__opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.5rem; width: 100%; padding: 0.3rem 0.6rem; font: inherit; font-size: 13px; text-align: left; color: var(--ms-text, #1f2a33); background: none; border: 0; cursor: pointer; }
.ed-cols__opt:hover:not(.ed-cols__opt--disabled) { background: rgba(48, 111, 145, 0.08); }
.ed-cols__opt--disabled { cursor: default; opacity: 0.62; }
.ed-cols__opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-cols__opt-meta { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11.5px; color: rgba(31, 42, 51, 0.7); }
.ed-cols__opt-why { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.4; color: rgba(31, 42, 51, 0.7); }
.ed-cols__free { display: block; width: 100%; padding: 0.4rem 0.6rem; font: inherit; font-size: 12.5px; text-align: left; color: var(--ms-primary-darker, #184772); background: #fbfcfd; border: 0; border-top: 1px solid var(--ms-border, #d9e0e6); cursor: pointer; }

/* --- Конструктор связанных списков: ячейка Entity ------------------------- */

/* Кнопка вместо текстового поля: значение здесь не печатают, а ВЫБИРАЮТ — из тех сущностей, у которых
   есть ссылка назад. Вписать имя руками по-прежнему можно, но это осознанный запасной путь, а не
   основной, и выглядеть он не должен одинаково с выбором. */
.ed-rlp { display: grid; gap: 0.25rem; min-width: 0; }
.ed-rlp__value { display: flex; align-items: center; gap: 0.4rem; width: 100%; min-height: 30px; padding: 0.2rem 0.45rem; font: inherit; font-size: 13px; text-align: left; color: var(--ms-text, #1f2a33); background: #fff; border: 1px solid var(--ms-border, #d9e0e6); cursor: pointer; }
.ed-rlp__value:hover { border-color: var(--ms-primary, #306f91); }
.ed-rlp__value--empty { color: rgba(31, 42, 51, 0.7); }
.ed-rlp__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Метка ставится, только когда каталог загружен: «ссылки нет» — утверждение о проекте, а не о нашей
   задержке сети, и красить строку по незнанию нельзя. */
.ed-rlp__tag { flex: 0 0 auto; padding: 0.05rem 0.3rem; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(31, 42, 51, 0.7); background: rgba(31, 42, 51, 0.06); }
.ed-rlp__tag--warn { color: #8a5a12; background: rgba(183, 121, 31, 0.12); }

/* Кнопки-подсказки под полем «Linked by». Появляются только при НЕСКОЛЬКИХ ссылках назад: при одной
   выбирать не из чего, и генератор подставит её сам. */
.ed-rlp__links { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.2rem; }
.ed-rlp__link { padding: 0.05rem 0.35rem; font: inherit; font-size: 11.5px; color: var(--ms-primary-darker, #184772); background: #fff; border: 1px solid var(--ms-border, #d9e0e6); cursor: pointer; }
.ed-rlp__link:hover { background: rgba(48, 111, 145, 0.08); }
.ed-rlp :focus-visible { outline: 2px solid var(--ms-primary, #306f91); outline-offset: 1px; }

/* --- Конструктор фильтра ------------------------------------------------- */

.ed-filt { display: grid; gap: 0.35rem; min-width: 20rem; }
.ed-filt__rows { display: grid; gap: 0.25rem; }
.ed-filt__row { display: grid; grid-template-columns: minmax(6rem, 1fr) minmax(7rem, auto) minmax(6rem, 1fr) auto; gap: 0.25rem; align-items: center; }
.ed-filt__field, .ed-filt__val { min-width: 0; height: 30px; padding: 0 0.4rem; font-size: 12.5px; color: var(--ms-text, #1f2a33); background: #fff; border: 1px solid var(--ms-border, #d9e0e6); box-sizing: border-box; }
.ed-filt__op { min-width: 0; height: 30px; padding: 0 0.3rem; font-size: 12.5px; color: var(--ms-text, #1f2a33); background: #fff; border: 1px solid var(--ms-border, #d9e0e6); box-sizing: border-box; }
.ed-filt__na { font-size: 11.5px; color: rgba(31, 42, 51, 0.7); }
.ed-filt__x { padding: 0 0.25rem; font-size: 1rem; line-height: 1; color: rgba(31, 42, 51, 0.7); background: none; border: 0; cursor: pointer; }
.ed-filt__vals { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.ed-filt__chip { padding: 0.05rem 0.35rem; font-size: 11.5px; color: #002259; background: #d2e2fb; border: 1px solid #a2c3f7; }
.ed-filt__err { font-size: 11.5px; line-height: 1.4; color: #912d2b; }

/* Связка одна на всё выражение: смешанные AND/OR грамматика не принимает, поэтому
   и переключатель тут ровно один, сколько бы условий ни было. */
.ed-filt__join { display: inline-flex; }
.ed-filt__join-btn { padding: 0.1rem 0.45rem; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: rgba(31, 42, 51, 0.7); background: #fff; border: 1px solid var(--ms-border, #d9e0e6); cursor: pointer; }
.ed-filt__join-btn.is-on { color: #fff; background: var(--ms-primary, #306f91); border-color: var(--ms-primary, #306f91); }

.ed-filt__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ed-filt__link { padding: 0; font: inherit; font-size: 12.5px; color: var(--ms-primary-darker, #184772); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.ed-filt__link--bad { color: #912d2b; }
.ed-filt__empty { font-size: 12.5px; color: rgba(31, 42, 51, 0.7); }

/* Хранимая строка показана ВСЕГДА: автор обязан видеть, что именно уедет в спеку,
   а не догадываться о ней по расставленным полям. */
.ed-filt__out { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.3rem 0.4rem; background: #fbfcfd; border: 1px solid var(--ms-border, #d9e0e6); }
.ed-filt__out-label { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(31, 42, 51, 0.7); }
.ed-filt__out code { min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; color: var(--ms-text, #1f2a33); }
.ed-filt__raw { padding: 0.3rem 0.4rem; background: #fbfcfd; border: 1px solid var(--ms-border, #d9e0e6); }
.ed-filt__raw code { overflow-wrap: anywhere; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; color: var(--ms-text, #1f2a33); }
.ed-filt__read { margin: 0; padding: 0 0 0 1rem; font-size: 12.5px; color: rgba(31, 42, 51, 0.7); }
.ed-filt__note { font-size: 11.5px; line-height: 1.45; color: rgba(31, 42, 51, 0.7); }
.ed-filt__note--warn { padding: 0.35rem 0.45rem; color: #8a5a12; background: rgba(183, 121, 31, 0.09); border-left: 3px solid rgba(183, 121, 31, 0.4); }

/* Единственное место на вкладке, где сказано, что фильтр не генерируется.
   .ui.form объявляет отступы у p — селектор контекстный, иначе правило умрёт. */
.ms-form-card.ui.form .ed-filt__truth { margin: 0.15rem 0 0; font-size: 11.5px; line-height: 1.45; color: rgba(31, 42, 51, 0.7); }

.ed-cols :focus-visible, .ed-filt :focus-visible { outline: 2px solid var(--ms-primary, #306f91); outline-offset: 1px; }

@media (max-width: 1280px) {
  .ed-filt__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ed-cols__panel { width: 18rem; }
}

/* ===========================================================================
   Lists — фильтр: свёрнутая ячейка + якорная панель.
   ВНИМАНИЕ: комментарий секции выше («Иконок SemanticUI внутри намеренно нет»)
   с этого момента НЕВЕРЕН — у триггера есть каретка. Поэтому её правило
   написано i.ed-filt__caret (0,1,1): одноклассовое проиграло бы i.icon молча.
   Блок дописан в конец файла намеренно: правила выше ведёт другая сессия,
   поэтому всё, что надо перебить, здесь переобъявлено целиком.
   =========================================================================== */

/* Ячейка больше не держит форму — только одну строку. display и min-width
   переобъявлены: старое .ed-filt (grid, min-width: 20rem) действует до сюда. */
.ed-filt { display: block; min-width: 12rem; max-width: 28rem; }

/* font: inherit — не косметика: <button> НЕ наследует шрифт страницы, и «No filter»
   (у него font-family: inherit) уехал бы в системный шрифт кнопок, то есть ровно в тот
   вид, которым отличается «подпись», а не «хранимое значение». Размер выровнен с
   ячейкой, которую этот триггер заменил (.ed-filt__empty, 12.5px). */
/* У текста есть пол (7rem), у значка — нет: когда колонка узкая, ужиматься должен значок. Он
   дублирует то, что уже несут цвет рамки, подсказка и aria-label, а хранимая строка не дублируется ничем. */
.ed-filt__trigger { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(0, auto) 14px; align-items: center; gap: 0.45rem; width: 100%; height: 34px; padding: 0 0.5rem; font: inherit; font-size: 12.5px; text-align: left; color: var(--ms-text, #1f2a33); background: #fff; border: 1px solid var(--ms-border, #d9e0e6); cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.ed-filt__trigger:hover { border-color: var(--ms-primary, #306f91); background: rgba(48, 111, 145, 0.04); }
.ed-filt__trigger--empty { border-style: dashed; }
.ed-filt__trigger--other { border-color: rgba(31, 42, 51, 0.22); }
.ed-filt__trigger--raw { border-color: rgba(183, 121, 31, 0.5); background: rgba(183, 121, 31, 0.05); }
@media (prefers-reduced-motion: reduce) { .ed-filt__trigger { transition: none !important; } }

/* white-space: pre, а НЕ nowrap: nowrap схлопывает подряд идущие пробелы, и ячейка
   врала бы о хранимых байтах. Переносов строки в тексте уже нет — их заменил
   видимый знак (ListFilterDisplay.OneLine), поэтому pre не переносит ничего. */
.ed-filt__text { overflow: hidden; text-overflow: ellipsis; white-space: pre; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; color: var(--ms-text, #1f2a33); }
.ed-filt__text--none { font-family: inherit; color: rgba(31, 42, 51, 0.7); }

/* Значок распознавания. Красного здесь нет: у фильтра нет ни одного потребителя,
   и красный обещал бы последствие, которого не существует. */
/* Без капслока и разрядки: они чисто декоративные, а стоили 21px ширины из 245px ячейки — и платил за
   них ХРАНИМЫЙ ТЕКСТ, то есть единственное, что вкладка может показать про нераспознанный фильтр.
   overflow здесь на случай узкой колонки: сжиматься первым обязан значок, а не значение. */
.ed-filt__state { min-width: 0; padding: 0.05rem 0.35rem; overflow: hidden; text-overflow: ellipsis; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.ed-filt__state--muted { color: rgba(31, 42, 51, 0.7); background: rgba(31, 42, 51, 0.07); }
.ed-filt__state--warn { color: #8a5a12; background: rgba(183, 121, 31, 0.14); }

/* grid-column обязателен: значок распознавания рисуется НЕ всегда, и без явной привязки шеврон
   занимал вторую колонку (auto, по своему размеру), а третья — те самые 14px — оставалась пустой.
   Стрелка не доезжала до правого края и «плясала» от строки к строке. Та же правка, что у
   i.ed-type__caret; здесь её просто забыли перенести. */
i.ed-filt__caret { grid-column: -2 / -1; justify-self: end; margin: 0; width: auto; font-size: 0.85rem; color: rgba(31, 42, 51, 0.35); }
.ed-filt__trigger:hover i.ed-filt__caret { color: var(--ms-primary, #306f91); }

.ed-filt__scrim { position: fixed; inset: 0; z-index: 940; background: transparent; }
/* fixed и без top/left — ровно по тем же двум причинам, что у .ed-cols__panel:
   .ms-workbench { overflow: hidden } обрезает absolute у нижних строк, а заданные
   здесь координаты перебивали бы расчёт до первой отрисовки. */
.ed-filt__panel { position: fixed; z-index: 941; display: flex; flex-direction: column; width: 26rem; max-width: calc(100vw - 1rem); max-height: min(24rem, calc(100dvh - 2rem)); background: #fff; border: 1px solid var(--ms-border, #d9e0e6); box-shadow: 0 6px 18px rgba(31, 42, 51, 0.14); }
.ed-filt__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.5rem; font-size: 12.5px; font-weight: 600; color: var(--ms-text, #1f2a33); background: #fbfcfd; border-bottom: 1px solid var(--ms-border, #d9e0e6); }
.ed-filt__close { padding: 0 0.2rem; font-size: 1rem; line-height: 1; color: rgba(31, 42, 51, 0.7); background: none; border: 0; cursor: pointer; }
/* Скроллер — именно тело: anchored-panel.js ставит max-height ИНЛАЙНОМ один раз,
   и «Add condition» иначе растит панель мимо зарезервированной высоты. */
.ed-filt__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: 0.5rem; padding: 0.6rem; }
.ed-filt__foot { flex: 0 0 auto; display: grid; gap: 0.35rem; padding: 0.45rem 0.5rem; background: #fbfcfd; border-top: 1px solid var(--ms-border, #d9e0e6); }
.ed-filt__foot .ed-filt__actions { justify-content: flex-end; align-items: center; }
.ed-filt__foot .ed-filt__link--bad { margin-right: auto; }
/* Главная кнопка помечена aria-disabled, а не disabled (иначе она выпала бы из порядка обхода
   и читающий с экрана не нашёл бы ни её, ни причину отказа), поэтому и сереет она по атрибуту.
   Селектор заперт панелью: кнопки SemanticUI живут по всему приложению. */
.ed-filt__panel .ui.button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

/* «Add condition» лежит прямым ребёнком грид-тела, а не внутри .ed-filt__actions, как раньше:
   растянутая на всю колонку кнопка центрировала бы текст и подчёркивала пустоту справа от него. */
.ed-filt__body > .ed-filt__link { justify-self: start; }

.ed-filt__banner { display: grid; gap: 0.3rem; }
.ed-filt__banner--warn { padding: 0.35rem 0.45rem; background: rgba(183, 121, 31, 0.09); border-left: 3px solid rgba(183, 121, 31, 0.4); }
.ed-filt__joinbar { display: flex; align-items: center; gap: 0.5rem; font-size: 11.5px; color: rgba(31, 42, 51, 0.7); }
.ed-filt__sep { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: rgba(31, 42, 51, 0.7); }
/* Многострочное значение в панели показывает свои переносы — там для них есть место. */
.ed-filt__raw code { white-space: pre-wrap; }

/* Оператор мерился бы по самой длинной подписи («is less than or equal to») и выдавливал
   бы поля: max у трека ограничен, а min-width: 0 у самого select уже стоит. */
.ed-filt__panel .ed-filt__row { grid-template-columns: minmax(5.5rem, 1fr) minmax(7rem, 11rem) minmax(5.5rem, 1fr) auto; }

@media (max-width: 1280px) {
  .ed-filt__panel { width: 24rem; }
  /* Двухколоночный запасной вариант существовал только пока конструктор жил в ЯЧЕЙКЕ.
     У панели ширина своя, от вьюпорта не зависит, — четыре колонки остаются. */
  .ed-filt__panel .ed-filt__row { grid-template-columns: minmax(5rem, 1fr) minmax(6.5rem, 10rem) minmax(5rem, 1fr) auto; }
}

/* ══ Модель проекта: UML class-диаграмма ═══════════════════════════════════ */
/* Тот же идиом инструмента, что у layout-builder: тулбар = действия, полоса   */
/* статистики = состояние кадра, рельс = навигация, канва скроллится сама.     */
.ms-diagram { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 6px; min-height: 0; }
.ms-diagram__toolbar { display: flex; align-items: center; gap: 4px; padding: 4px 5px; background: var(--ms-surface); border: 1px solid var(--ms-border); box-shadow: 0 1px 2px rgba(16, 29, 38, 0.06); flex-wrap: wrap; }
.ms-diagram__label { padding: 0 2px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(31, 42, 51, 0.7); }
.ms-diagram__pill { display: inline-flex; align-items: center; height: 28px; padding: 0 9px; border: 1px solid var(--ms-border); background: #fbfcfd; font-size: 0.82rem; font-weight: 700; color: var(--ms-primary-darker); }
.ms-diagram__seg { display: inline-flex; border: 1px solid var(--ms-border); overflow: hidden; }
.ms-diagram__seg-btn { height: 28px; padding: 0 10px; font-family: inherit; font-size: 0.82rem; font-weight: 600; color: rgba(31, 42, 51, 0.72); background: var(--ms-surface); border: 0; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; }
.ms-diagram__seg-btn + .ms-diagram__seg-btn { border-left: 1px solid var(--ms-border); }
.ms-diagram__seg-btn:hover:not(:disabled) { background: rgba(48, 111, 145, 0.1); color: var(--ms-primary-darker); }
.ms-diagram__seg-btn--on { color: #fff; background: var(--ms-primary); font-weight: 700; }
.ms-diagram__seg-btn--on:hover:not(:disabled) { background: var(--ms-primary-dark); color: #fff; }
.ms-diagram__seg-btn:disabled { opacity: 0.5; cursor: default; }
.ms-diagram__tbtn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; font-family: inherit; font-size: 0.82rem; font-weight: 600; color: var(--ms-text); background: transparent; border: 0; cursor: pointer; }
.ms-diagram__tbtn > i.icon { margin: 0; width: auto; font-size: 0.82rem; color: var(--ms-primary); opacity: 0.85; }
.ms-diagram__tbtn:hover:not(:disabled) { background: rgba(48, 111, 145, 0.12); color: var(--ms-primary-darker); }
.ms-diagram__tbtn[aria-pressed="true"] { background: var(--ms-primary); color: #fff; }
.ms-diagram__tbtn[aria-pressed="true"] > i.icon { color: #fff; opacity: 1; }
.ms-diagram__tbtn:disabled { opacity: 0.5; cursor: default; }
.ms-diagram__sep { align-self: stretch; width: 1px; margin: 3px 5px; background: rgba(48, 111, 145, 0.12); }
.ms-diagram__grow { flex: 1 1 auto; }
.ms-diagram__hint { font-size: 0.78rem; color: rgba(31, 42, 51, 0.7); }

.ms-diagram__stats { display: flex; align-items: center; gap: 7px; padding: 5px 8px; background: #fbfcfd; border: 1px solid var(--ms-border); flex-wrap: wrap; }
.ms-diagram__chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font-size: 0.75rem; font-weight: 700; color: var(--ms-primary-darker); background: rgba(48, 111, 145, 0.1); }
.ms-diagram__chip > span { font-weight: 400; opacity: 0.78; }
.ms-diagram__chip--quiet { color: rgba(31, 42, 51, 0.76); background: rgba(31, 42, 51, 0.05); }
/* Серый чип уже приглушён цветом; ещё и прозрачность у счётчика уводила его ниже 4.5:1. */
.ms-diagram__chip--quiet > span { opacity: 1; }

.ms-diagram__workspace { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 10px; min-height: 0; }
.ms-diagram__rail { min-height: 0; overflow: auto; overscroll-behavior: contain; background: var(--ms-surface); border: 1px solid var(--ms-border); }
.ms-diagram__rail-search { display: flex; align-items: center; gap: 6px; margin: 8px 9px 6px; padding: 0 8px; height: 28px; border: 1px solid var(--ms-border); background: #fbfcfd; }
.ms-diagram__rail-search > i.icon { margin: 0; width: auto; font-size: 0.78rem; color: rgba(31, 42, 51, 0.42); }
.ms-diagram__rail-search > input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 0.82rem; color: var(--ms-text); }
.ms-diagram__rail-title { padding: 11px 9px 4px; font-size: 0.67rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(31, 42, 51, 0.7); }
.ms-diagram__rail-row { display: flex; align-items: center; gap: 7px; width: calc(100% - 12px); margin: 0 6px; padding: 4px 7px; font-family: inherit; text-align: left; background: transparent; border: 0; cursor: pointer; }
.ms-diagram__rail-row:hover:not(:disabled) { background: rgba(48, 111, 145, 0.06); }
.ms-diagram__rail-row--on { background: rgba(48, 111, 145, 0.1); }
.ms-diagram__rail-row:disabled { opacity: 0.6; cursor: default; }
.ms-diagram__rail-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.81rem; font-weight: 600; color: var(--ms-primary-darker); }
.ms-diagram__rail-name--quiet { font-weight: 400; color: rgba(31, 42, 51, 0.78); }
.ms-diagram__rail-code, .ms-diagram__rail-via { font-family: Consolas, "Courier New", monospace; font-size: 0.69rem; color: rgba(31, 42, 51, 0.7); }
.ms-diagram__dot { width: 8px; height: 8px; flex: 0 0 8px; background: var(--ms-primary); }
.ms-diagram__dot--platform, .ms-diagram__dot--enumeration { background: rgba(31, 42, 51, 0.28); }
.ms-diagram__dot--unresolved { background: #9f3a38; }
.ms-diagram__plus { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; flex: 0 0 13px; border: 1px solid rgba(48, 111, 145, 0.4); color: var(--ms-primary); font-size: 0.62rem; font-weight: 900; line-height: 1; }

/* Канва скроллится в обе стороны: диаграмма шире экрана — это норма, а не дефект. */
.ms-diagram__empty { padding: 2rem; font-size: 0.88rem; color: rgba(31, 42, 51, 0.7); }
.ms-diagram__status { display: flex; align-items: center; gap: 7px; padding: 4px 8px; background: #fbfcfd; border: 1px solid var(--ms-border); font-size: 0.76rem; color: rgba(31, 42, 51, 0.7); }
.ms-diagram__status b { font-weight: 700; color: rgba(31, 42, 51, 0.72); }
.ms-diagram__chip--bad { color: #8a5a12; background: rgba(183, 121, 31, 0.16); }

/* Состояния диаграммы. Подсветка целиком клиентская: это чтение, сервер про неё не знает. */
.ms-diagram__canvas:focus-visible { outline: 2px solid rgba(95, 178, 213, 0.55); outline-offset: -2px; }
.ms-diagram__canvas svg .dg-class { cursor: pointer; }
.ms-diagram__canvas svg .dg-dim { opacity: 0.22; }
.ms-diagram__canvas svg .dg-sel > rect:first-of-type { stroke: var(--ms-accent); stroke-width: 3; }
.ms-diagram__canvas svg .dg-moving { opacity: 0.75; }

/* ══ Порядок деплоя ═══════════════════════════════════════════════════════ */
.ms-order { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.ms-order__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ms-order__tile { padding: 11px 13px; background: var(--ms-surface); border: 1px solid var(--ms-border); }
.ms-order__tile--warn { background: rgba(183, 121, 31, 0.09); border-color: rgba(183, 121, 31, 0.3); }
.ms-order__tile--ok { background: rgba(47, 125, 85, 0.08); border-color: rgba(47, 125, 85, 0.32); }
.ms-order__tile--accent { background: rgba(48, 111, 145, 0.07); border-color: rgba(48, 111, 145, 0.24); }
.ms-order__tile-head { font-size: 0.86rem; font-weight: 700; color: var(--ms-primary-darker); }
.ms-order__tile-head b { margin-right: 0.35rem; font-size: 1.7rem; font-weight: 900; line-height: 1; }
.ms-order__tile-note { margin-top: 5px; font-size: 0.79rem; line-height: 1.4; color: rgba(31, 42, 51, 0.7); }

.ms-order__columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 340px; gap: 10px; min-height: 0; flex: 1 1 auto; }
.ms-order__panel { display: flex; flex-direction: column; min-height: 0; background: var(--ms-surface); border: 1px solid var(--ms-border); }
.ms-order__panel-head { padding: 8px 10px 7px; border-bottom: 1px solid rgba(48, 111, 145, 0.12); }
.ms-order__eyebrow { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(31, 42, 51, 0.7); }
.ms-order__title { margin-top: 2px; font-size: 0.96rem; font-weight: 700; color: var(--ms-primary-darker); }
.ms-order__scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.ms-order__notes { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 9px 10px 14px; }

.ms-order__row { display: flex; align-items: center; gap: 8px; padding: 3.5px 10px; border-bottom: 1px solid rgba(48, 111, 145, 0.06); }
.ms-order__row--late { background: rgba(183, 121, 31, 0.09); }
.ms-order__row--mutual { background: rgba(48, 111, 145, 0.07); }
.ms-order__index { min-width: 20px; font-size: 0.72rem; font-weight: 700; color: rgba(31, 42, 51, 0.7); }
.ms-order__code { min-width: 30px; font-family: Consolas, "Courier New", monospace; font-size: 0.74rem; color: rgba(31, 42, 51, 0.7); }
.ms-order__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; font-weight: 600; color: var(--ms-text); }
.ms-order__badge { padding: 1px 5px; font-size: 0.72rem; font-weight: 700; color: #8a5a12; background: rgba(183, 121, 31, 0.16); }
.ms-order__row--mutual .ms-order__badge { color: var(--ms-primary-darker); background: rgba(48, 111, 145, 0.12); }

.ms-order__wave { padding: 6px 10px 4px; border-bottom: 1px solid rgba(48, 111, 145, 0.08); }
.ms-order__wave:nth-child(odd) { background: rgba(48, 111, 145, 0.03); }
.ms-order__wave-head { font-size: 0.69rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ms-primary-darker); }
.ms-order__wave-head span { margin-left: 0.4rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: rgba(31, 42, 51, 0.7); }
.ms-order__chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 4px; }
.ms-order__chip { padding: 2px 7px; font-size: 0.78rem; font-weight: 600; color: rgba(31, 42, 51, 0.72); background: #fbfcfd; border: 1px solid #e5eaee; }
.ms-order__chip--moves { color: #8a5a12; background: rgba(183, 121, 31, 0.1); border-color: rgba(183, 121, 31, 0.32); }
.ms-order__chip--mutual { color: var(--ms-primary-darker); background: rgba(48, 111, 145, 0.1); border-color: rgba(48, 111, 145, 0.32); }

.ms-order__note { margin-bottom: 9px; padding: 9px 10px; border-left: 2px solid rgba(48, 111, 145, 0.2); background: rgba(48, 111, 145, 0.04); }
.ms-order__note--warn { border-left-color: #b7791f; background: rgba(183, 121, 31, 0.08); }
.ms-order__note--info { border-left-color: var(--ms-primary); background: rgba(48, 111, 145, 0.07); }
.ms-order__note b { display: block; font-size: 0.86rem; color: var(--ms-primary-darker); }
.ms-order__note--warn b { color: #8a5a12; }
.ms-order__note p { margin: 4px 0 0; font-size: 0.79rem; line-height: 1.45; color: rgba(31, 42, 51, 0.72); }
.ms-order__pair { margin-top: 3px; font-family: Consolas, "Courier New", monospace; font-size: 0.76rem; color: var(--ms-primary-darker); }
.ms-order__apply { width: 100%; margin-top: 4px; }
.ms-order__confirm { margin-top: 4px; padding: 10px; background: rgba(183, 121, 31, 0.09); border: 1px solid rgba(183, 121, 31, 0.3); }
.ms-order__confirm p { margin: 0 0 8px; font-size: 0.82rem; font-weight: 600; color: #8a5a12; }
.ms-order__confirm-actions { display: flex; gap: 6px; }
.ms-order__fineprint { margin-top: 6px; font-size: 0.74rem; line-height: 1.4; color: rgba(31, 42, 51, 0.7); }

/* Линза «спека vs задеплоенный код» */
.ms-diagram__chip--sync { color: #2f7d55; background: rgba(47, 125, 85, 0.12); }
.ms-diagram__chip--plan { color: var(--ms-primary-darker); background: rgba(48, 111, 145, 0.12); }
.ms-diagram__state { padding: 0 4px; font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.ms-diagram__state--insync { color: #2f7d55; background: rgba(47, 125, 85, 0.13); }
.ms-diagram__state--drifted { color: #8a5a12; background: rgba(183, 121, 31, 0.16); }
.ms-diagram__state--notdeployed { color: rgba(31, 42, 51, 0.7); background: rgba(31, 42, 51, 0.07); }
.ms-diagram__state--partial { color: var(--ms-primary-darker); background: rgba(48, 111, 145, 0.12); }

/* Состояния сравнения сторон. Цвета те же, что у линзы отпечатка, — оба ряда отвечают на вопрос
   «сходится или нет», и второй набор красок только мешал бы их читать вместе. */
.ms-diagram__state--same { color: #2f7d55; background: rgba(47, 125, 85, 0.13); }
.ms-diagram__state--divergent { color: #8a5a12; background: rgba(183, 121, 31, 0.16); }
.ms-diagram__state--speconly { color: var(--ms-primary-darker); background: rgba(48, 111, 145, 0.12); }
.ms-diagram__state--deployedonly { color: rgba(31, 42, 51, 0.7); background: rgba(31, 42, 51, 0.07); }

/* Список расхождений в рельсе: строка под именем сущности, с цветной кромкой по виду расхождения.
   Поле, которого на показанной стороне нет, видно ТОЛЬКО здесь — на карточке ему неоткуда взяться. */
.ms-diagram__rail-row--head { font-weight: 700; }
.ms-diagram__diff {
  margin: 0 6px 0 20px;
  padding: 2px 7px;
  font-family: var(--ms-mono, Consolas, 'Courier New', monospace);
  font-size: 0.71rem;
  line-height: 1.45;
  color: rgba(31, 42, 51, 0.78);
  border-left: 3px solid rgba(31, 42, 51, 0.2);
  overflow-wrap: anywhere;
}
.ms-diagram__diff--onlyinspec { border-left-color: #2f7d55; }
.ms-diagram__diff--onlyindeployed { border-left-color: #9f3a38; }
.ms-diagram__diff--changed { border-left-color: #b7791f; }
.ms-diagram__diff--note { border-left-color: rgba(48, 111, 145, 0.55); font-family: inherit; }

/* ══ Диаграмма на всю страницу ═════════════════════════════════════════════ */
/* Канва должна занимать окно, а не жить в карточке с отступами: диаграмма — это         */
/* рабочая поверхность. Цепочка обёрток растягивается только под страницей .ms-page--fill, */
/* поэтому остальные страницы Studio не задеты.                                          */
/* Оболочка получает ПОТОЛОК по высоте, а не только пол: min-height: 100vh задаёт минимум, и страница с
   высоким содержимым всё равно уезжала за окно вместе с канвой. */
.ms-shell:has(.ms-page--fill) { height: 100dvh; overflow: hidden; }
.ms-content:has(.ms-page--fill) { padding: 0; min-height: 0; }
.ms-content__surface.ui.segment:has(.ms-page--fill) { padding: 0; border: 0; box-shadow: none; min-height: 0; }
.ms-page-shell:has(.ms-page--fill) { display: flex; flex: 1 1 auto; min-height: 0; }
.ms-page--fill { flex: 1 1 auto; min-height: 0; width: 100%; }
.ms-page--fill > .ms-workbench { flex: 1 1 auto; min-height: 0; border: 0; box-shadow: none; }
.ms-page--fill .ms-workbench__body { min-height: 0; padding: 10px; }

/* Канва: подложку двигает и масштабирует JS, поэтому прокрутки у контейнера нет — иначе
   тяга мышью и полосы прокрутки спорили бы за один и тот же жест. */
.ms-diagram__canvas { position: relative; min-height: 0; overflow: hidden; cursor: grab; background: var(--ms-surface); border: 1px solid var(--ms-border); }
.ms-diagram__canvas.dg-panning { cursor: grabbing; }
.ms-diagram__stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.ms-diagram__stage.dg-grid {
  background-color: var(--ms-surface);
  background-image:
    linear-gradient(rgba(31, 42, 51, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 42, 51, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
}
.ms-diagram__canvas svg { display: block; user-select: none; -webkit-user-drag: none; }

/* ══ Подсветка выбора ══════════════════════════════════════════════════════ */
/* Выбранная связь горит ярко и толсто, остальное притухает; строки на её концах       */
/* заливаются — без этого по яркой линии всё равно ищешь глазами, откуда она вышла.     */
.ms-diagram__canvas svg .dg-hit { pointer-events: stroke; cursor: pointer; }

/* Переключатель стороны на карточке: единственный элемент внутри SVG, который ведёт себя как кнопка. */
.ms-diagram__canvas svg .dg-side { cursor: pointer; }
.ms-diagram__canvas svg .dg-side[data-active="0"]:hover rect { fill: rgba(183, 121, 31, 0.18); }
.ms-diagram__canvas svg .dg-class.dg-dim .dg-side { pointer-events: none; }
.ms-diagram__canvas svg .dg-link.dg-sel .dg-line { stroke: #d94f2b; stroke-width: 3; stroke-dasharray: none; }
.ms-diagram__canvas svg .dg-link.dg-sel polygon { fill: #d94f2b; }
.ms-diagram__canvas svg .dg-link.dg-sel text { fill: #d94f2b; font-weight: 700; }
.ms-diagram__canvas svg .dg-link.dg-hot .dg-line { stroke: var(--ms-primary); stroke-width: 2.4; }
.ms-diagram__canvas svg .dg-link.dg-hot polygon { fill: var(--ms-primary); }
.ms-diagram__canvas svg .dg-row.dg-hot .dg-row-bg { fill: rgba(217, 79, 43, 0.16); }
.ms-diagram__canvas svg .dg-row.dg-hot text { fill: #a63417; font-weight: 700; }
.ms-diagram__canvas svg .dg-class.dg-hot > rect:first-of-type { stroke: #d94f2b; stroke-width: 2; }
/* Ссылки в тулбаре диаграммы выглядят и ведут себя как его кнопки. */
a.ms-diagram__tbtn { text-decoration: none; }
a.ms-diagram__tbtn:hover { text-decoration: none; }

/* Предпросмотр по наведению: тише выбора, чтобы «посмотрел» и «зафиксировал» не путались. */
.ms-diagram__canvas svg .dg-link.dg-warm .dg-line { stroke: var(--ms-primary); stroke-width: 2.2; }
.ms-diagram__canvas svg .dg-link.dg-warm polygon { fill: var(--ms-primary); }
.ms-diagram__canvas svg .dg-link.dg-warm .dg-field rect { stroke: var(--ms-primary); stroke-opacity: 0.8; }
.ms-diagram__canvas svg .dg-link.dg-warm .dg-field text { fill: var(--ms-primary-darker); }
.ms-diagram__canvas svg .dg-row.dg-warm .dg-row-bg { fill: rgba(95, 178, 213, 0.2); }
.ms-diagram__canvas svg .dg-class.dg-warm > rect:first-of-type { stroke: var(--ms-primary); stroke-width: 2; }

/* Подпись поля на линии: в выбранном состоянии горит вместе с ней. */
.ms-diagram__canvas svg .dg-link.dg-sel .dg-field rect { stroke: #d94f2b; stroke-opacity: 1; }
.ms-diagram__canvas svg .dg-link.dg-sel .dg-field text { fill: #d94f2b; font-weight: 700; }
.ms-diagram__canvas svg .dg-link.dg-dim .dg-field { opacity: 0.5; }

/* ===== Сбой circuit и переподключение =====
   #blazor-error-ui показывает сам Blazor (display:block), когда circuit упал вне границ ошибок.
   Диалог переподключения — разметка шаблона .NET 10 (ReconnectModal.razor): Blazor вешает на него
   классы состояния, а видимость абзацев и кнопок задают правила ниже. Без них диалог при любом
   обрыве связи показывал все пять сообщений и обе кнопки одновременно. */
#blazor-error-ui {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  padding: 0.75rem 3.5rem 0.75rem 1.5rem;
  background: #fff6f6;
  color: #9f3a38;
  border-top: 2px solid #9f3a38;
  box-shadow: 0 -14px 30px rgba(16, 29, 38, 0.12);
  font-weight: 600;
}

#blazor-error-ui .reload {
  margin-left: 0.75rem;
  color: var(--ms-primary-darker);
  text-decoration: underline;
}

#blazor-error-ui .dismiss {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #9f3a38;
  cursor: pointer;
  padding: 0.25rem;
}

.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
  display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
  display: block;
}

/* Класс первого показа Blazor не снимает при повторных попытках — без этих правил под
   «Rejoining the server...» висела ещё и «Rejoin failed... trying again», замерено 2026-09-30. */
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-first-attempt-visible,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal.components-reconnect-failed .components-rejoining-animation {
  display: none;
}

#components-reconnect-modal {
  width: 22rem;
  margin: 20vh auto;
  padding: 1.5rem;
  border: 1px solid var(--ms-border);
  border-radius: 0;
  background: var(--ms-surface);
  color: var(--ms-text);
  box-shadow: 0 24px 60px rgba(16, 29, 38, 0.18);
}

#components-reconnect-modal::backdrop {
  background: rgba(16, 29, 38, 0.45);
}

.components-reconnect-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

#components-reconnect-modal p {
  margin: 0;
}

#components-reconnect-modal button {
  border: 0;
  border-radius: 0;
  padding: 0.6rem 1.5rem;
  background: var(--ms-primary);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

#components-reconnect-modal button:hover {
  background: var(--ms-primary-dark);
}

#components-reconnect-modal button:focus-visible {
  outline: 2px solid var(--ms-accent);
  outline-offset: 2px;
}

.components-rejoining-animation {
  position: relative;
  width: 48px;
  height: 48px;
}

.components-rejoining-animation div {
  position: absolute;
  border: 3px solid var(--ms-primary);
  opacity: 1;
  animation: ms-rejoining 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.components-rejoining-animation div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes ms-rejoining {
  0% { top: 24px; left: 24px; width: 0; height: 0; opacity: 1; }
  100% { top: 0; left: 0; width: 48px; height: 48px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .components-rejoining-animation div {
    animation: none;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
  }
}

/* Граница ошибок страницы (AppErrorBoundary → ErrorView): стоит на месте содержимого страницы. */
.ms-error-view.ui.negative.message {
  margin: 1.5rem;
}

/* Текст только для вспомогательных технологий: заголовок страницы, у которой визуально заголовка нет
   (диаграмма модели отдаёт весь экран холсту, но документ без h1 теряет своё оглавление). */
.ms-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Контраст AA (4.5:1). Цвета Semantic по умолчанию его не дают: белый текст на #2185d0, #21ba45, #00b5ad,
   жёлтый текст на белом у basic-меток. Оттенки те же, только темнее; основная кнопка берёт цвет студии. */
.ui.primary.button,
.ui.primary.buttons .button {
  background-color: var(--ms-primary);
  color: #ffffff;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover,
.ui.primary.button:focus,
.ui.primary.buttons .button:focus {
  background-color: var(--ms-primary-dark);
  color: #ffffff;
}

.ui.primary.button:active,
.ui.primary.buttons .button:active,
.ui.primary.active.button {
  background-color: var(--ms-primary-darker);
  color: #ffffff;
}

.ui.green.label,
.ui.green.labels .label {
  background-color: #1e7b34 !important;
  border-color: #1e7b34 !important;
}

.ui.blue.label,
.ui.blue.labels .label {
  background-color: #1a69a8 !important;
  border-color: #1a69a8 !important;
}

.ui.teal.label,
.ui.teal.labels .label {
  background-color: #007c76 !important;
  border-color: #007c76 !important;
}

.ui.orange.label,
.ui.orange.labels .label {
  background-color: #b4530f !important;
  border-color: #b4530f !important;
}

/* На жёлтом фоне читается только тёмный текст: белый давал 1.7:1. */
.ui.yellow.label,
.ui.yellow.labels .label {
  color: var(--ms-text) !important;
}

.ui.basic.green.label { color: #1e7b34 !important; border-color: #1e7b34 !important; }
.ui.basic.blue.label { color: #1a69a8 !important; border-color: #1a69a8 !important; }
.ui.basic.teal.label { color: #007c76 !important; border-color: #007c76 !important; }
.ui.basic.orange.label { color: #b4530f !important; border-color: #b4530f !important; }
.ui.basic.yellow.label { color: #8a6100 !important; border-color: #d9a406 !important; }

/* Подписи и «extra» карточек Semantic — rgba(0, 0, 0, 0.4), это 2.8:1. */
.ui.card .meta,
.ui.cards > .card .meta,
.ui.card > .content > .meta,
.ui.cards > .card > .content > .meta,
.ui.card > .extra,
.ui.cards > .card > .extra {
  color: rgba(31, 42, 51, 0.7);
}

/* Видимый фокус клавиатуры (WCAG 2.4.7). Прежние :focus-visible повторяли hover — фон в 5–10 % и outline: none:
   с клавиатуры нельзя было понять, где фокус, особенно рядом с курсором. Контур внутрь, чтобы не наезжать на
   соседей в группах кнопок; щелчок мышью :focus-visible не включает. */
.ms-content :is(.ui.button, button, a, [role="tab"], summary):focus-visible,
.ms-topbar :is(.ui.button, button, a):focus-visible {
  outline: 2px solid var(--ms-primary) !important;
  outline-offset: -2px;
}

/* На залитых кнопках контур цвета студии сливается с фоном — там он белый. */
.ms-content :is(.ui.primary.button, .ui.negative.button, .ui.positive.button, .ui.red.button, .ui.green.button):focus-visible {
  outline-color: #ffffff !important;
  outline-offset: -4px;
}

.ms-content .ui.checkbox input:focus-visible ~ label::before {
  outline: 2px solid var(--ms-primary);
  outline-offset: 1px;
}

/* Кнопка, которой сейчас нечего делать, но клик она не теряет (Save редактора без правок): вид disabled без
   pointer-events: none — клик после ввода в поле приходит вслед за его change и должен сработать. */
.ui.primary.button.ms-button--inert,
.ms-workbench__actions .ui.primary.button.ms-button--inert:hover {
  opacity: 0.45;
  cursor: default;
  background: var(--ms-primary) !important;
}

/* ===== Раздел MCP: использование удалённого генератора и журнал его проблем =====
   Направление — от frontend-design внутри системы Studio (RFC mcp-usage-analytics §4.5). Цвет несёт только исход:
   harbour (--ms-primary) сработало, --ms-fault сломалось, --ms-slate отказ по вводу, и никогда один — у вида проблемы
   есть фигура и слово. Моноширинный шрифт — только у строк, которые копируют дословно (инструмент, SHA, JSON, вывод).
   Шаг — 4px (0.25rem). */
.ms-mcp-figure,
.ms-mcp-num,
.ms-mcp-ledger__count,
.ms-mcp-waterline__axis {
  font-variant-numeric: tabular-nums;
}

.ms-mcp-machine {
  font-family: var(--ms-field-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
  font-size: 0.875em;
  color: var(--ms-text);
  background: none;
  padding: 0;
  word-break: break-all;
}

.ms-mcp-fault-text {
  color: var(--ms-fault) !important;
}

.ms-mcp-link {
  color: var(--ms-primary-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ms-mcp-link:hover {
  color: var(--ms-primary-darker);
}

.ms-mcp-hint,
.ms-mcp-more {
  margin: 0;
  color: rgba(31, 42, 51, 0.76);
  font-size: 0.875rem;
}

.ms-mcp-calm {
  margin: 0;
  max-width: 70ch;
  color: var(--ms-text);
  font-size: 1rem;
  line-height: 1.5;
}

.ms-mcp-card__title.ui.header {
  margin: 0;
  color: var(--ms-primary-darker);
}

/* Сводка: шесть коротких значений в ряд. Общий стиль сводки сводит её к двум колонкам уже при 1670px (для четырёх
   длинных значений); здесь ряд помещается до 1100px, ниже — три колонки, на телефоне — две. */
.ms-workbench__summary.ms-mcp-summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1670px) {
  .ms-workbench__summary.ms-mcp-summary .ms-workbench__summary-item {
    border-right: 1px solid rgba(48, 111, 145, 0.08);
    border-bottom: none;
  }

  .ms-workbench__summary.ms-mcp-summary .ms-workbench__summary-item:last-child {
    border-right: none;
  }
}

@media (max-width: 1100px) {
  .ms-workbench__summary.ms-mcp-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ms-workbench__summary.ms-mcp-summary .ms-workbench__summary-item {
    border-right: 1px solid rgba(48, 111, 145, 0.08);
    border-bottom: 1px solid rgba(48, 111, 145, 0.08);
  }

  .ms-workbench__summary.ms-mcp-summary .ms-workbench__summary-item:nth-child(3n) {
    border-right: none;
  }
}

@media (max-width: 640px) {
  .ms-workbench__summary.ms-mcp-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ms-workbench__summary.ms-mcp-summary .ms-workbench__summary-item:nth-child(3n) {
    border-right: 1px solid rgba(48, 111, 145, 0.08);
  }

  .ms-workbench__summary.ms-mcp-summary .ms-workbench__summary-item:nth-child(2n) {
    border-right: none;
  }
}

/* Переключатель окна: группа кнопок, выбранная — залита harbour. */
.ms-mcp-period.ui.buttons .ui.button.active {
  background: var(--ms-primary) !important;
  color: #ffffff !important;
}

/* Вид проблемы: квадрат в системе квадратных углов, заполненность — степень вины генератора. */
.ms-mcp-kind {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--ms-text);
}

.ms-mcp-kind__shape {
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  box-sizing: border-box;
}

.ms-mcp-kind--defect .ms-mcp-kind__shape {
  background: var(--ms-fault);
}

.ms-mcp-kind--build .ms-mcp-kind__shape {
  border: 2px solid var(--ms-fault);
  background: linear-gradient(90deg, var(--ms-fault) 50%, transparent 50%);
}

.ms-mcp-kind--local .ms-mcp-kind__shape {
  border: 2px solid var(--ms-fault);
}

.ms-mcp-kind--infrastructure .ms-mcp-kind__shape {
  border: 2px solid var(--ms-slate);
  background: linear-gradient(135deg, var(--ms-slate) 50%, transparent 50%);
}

.ms-mcp-kind--rejected .ms-mcp-kind__shape {
  height: 2px;
  background: var(--ms-slate);
}

.ms-mcp-status {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border: 1px solid currentColor;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

.ms-mcp-status--open {
  color: var(--ms-fault);
}

.ms-mcp-status--fixed {
  color: var(--ms-primary-dark);
}

.ms-mcp-status--not-a-defect {
  color: var(--ms-slate);
}

/* Открытые проблемы — журнал строк, а не карточек: глаз бежит по столбцам. */
.ms-mcp-ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(48, 111, 145, 0.12);
}

.ms-mcp-ledger__row {
  border-bottom: 1px solid rgba(48, 111, 145, 0.12);
}

.ms-mcp-ledger__row--skeleton {
  padding: 1rem 0;
}

.ms-mcp-ledger__link {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr) 4rem 6.5rem 6.5rem;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 0.5rem;
  color: var(--ms-text);
}

.ms-mcp-ledger__link:hover {
  background: rgba(48, 111, 145, 0.05);
  color: var(--ms-text);
}

.ms-mcp-ledger__what {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.ms-mcp-ledger__title,
.ms-mcp-problems__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.ms-mcp-ledger__count {
  text-align: right;
  font-weight: 700;
}

.ms-mcp-ledger__callers,
.ms-mcp-ledger__when {
  color: rgba(31, 42, 51, 0.76);
  font-size: 0.875rem;
  text-align: right;
}

/* Ватерлиния. */
.ms-mcp-waterline {
  margin: 0;
}

.ms-mcp-waterline__plot {
  display: block;
  width: 100%;
  height: 13.75rem;
}

.ms-mcp-waterline__succeeded {
  fill: var(--ms-primary);
}

.ms-mcp-waterline__failed {
  fill: var(--ms-fault);
}

.ms-mcp-waterline__rejected {
  fill: var(--ms-slate);
}

.ms-mcp-waterline__line {
  stroke: var(--ms-text);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ms-mcp-waterline g:hover rect {
  opacity: 0.8;
}

.ms-mcp-waterline__axis {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.5rem;
  color: rgba(31, 42, 51, 0.76);
  font-size: 0.8125rem;
}

.ms-mcp-waterline__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.ms-mcp-waterline__key {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: -0.5rem;
  vertical-align: -0.0625rem; /* оптически: квадрат на линию строки */
}

.ms-mcp-waterline__key--succeeded {
  background: var(--ms-primary);
}

.ms-mcp-waterline__key--failed {
  background: var(--ms-fault);
}

.ms-mcp-waterline__key--rejected {
  background: var(--ms-slate);
}

.ms-mcp-waterline__peak {
  color: var(--ms-text);
}

.ms-mcp-skeleton-block {
  height: 13.75rem;
}

/* Разрезы: таблицы, текст слева, числа справа. */
.ms-mcp-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.ms-workbench__body > .ms-mcp-split > * + * {
  margin-top: 0;
}

/* Поля Semantic у первого и последнего сегмента разные — в сетке нижние края карточек разъезжались. */
.ms-mcp-split > .ms-section-card.ui.segment {
  margin: 0;
}

.ms-mcp-nowrap {
  white-space: nowrap;
}

.ms-mcp-table.ui.table {
  margin: 0;
}

.ms-mcp-table.ui.table th,
.ms-mcp-table.ui.table td {
  vertical-align: baseline;
}

.ms-mcp-table.ui.table tbody th {
  font-weight: 400;
}

.ms-mcp-table .ms-mcp-num {
  text-align: right;
}

/* Фильтры журнала. */
.ms-mcp-filters {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 14rem) repeat(2, minmax(0, 12rem)) minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.75rem 1rem;
}

.ms-mcp-filters__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.ms-mcp-filters__field > label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ms-text);
}

.ms-mcp-filters__actions {
  display: flex;
  gap: 0.5rem;
}

/* Поле и список одной высоты: подписи и рамки в ряду фильтров — на одной линии. */
.ms-mcp-input,
.ms-mcp-filters select.ui.dropdown,
.ms-mcp-triage select.ui.dropdown {
  box-sizing: border-box;
  width: 100%;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(31, 42, 51, 0.42);
  background: #ffffff;
  color: var(--ms-text);
  font: inherit;
}

.ms-mcp-input:focus-visible,
.ms-mcp-filters select.ui.dropdown:focus-visible,
.ms-mcp-triage select.ui.dropdown:focus-visible,
.ms-mcp-evidence__text:focus-visible {
  outline: 2px solid var(--ms-primary);
  outline-offset: 1px;
}

.ms-mcp-textarea.ms-mcp-input {
  height: auto;
  min-height: 6rem;
  resize: vertical;
  line-height: 1.5;
}

.ms-mcp-problems__what a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
}

.ms-mcp-problems__what a .ms-mcp-problems__title {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ms-mcp-problems__reference {
  display: block;
  margin-top: 0.25rem;
  color: rgba(31, 42, 51, 0.76);
  font-size: 0.8125rem;
}

/* Проблема: разбор слева фиксированной колонкой, случаи справа. */
.ms-mcp-back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  color: var(--ms-primary-dark);
  font-size: 0.875rem;
}

/* Заголовок проблемы — текст ошибки, бывает длинным: ступенью меньше заголовка раздела и не длиннее трёх строк
   (целиком — в подсказке). */
.ms-mcp-problem__title.ms-workbench__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 1.5rem;
  line-height: 1.3;
}

.ms-mcp-problem__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0.5rem 0 0;
}

.ms-mcp-problem {
  display: grid;
  grid-template-columns: 22rem minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

.ms-workbench__body > .ms-mcp-problem > * + *,
.ms-mcp-problem .ms-mcp-occurrences > * + * {
  margin-top: 0;
}

.ms-mcp-triage__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0;
}

.ms-mcp-triage__feedback {
  min-height: 1.5rem;
  margin: 0;
  font-size: 0.875rem;
}

.ms-mcp-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.5rem 1rem;
  margin: 0;
  font-size: 0.875rem;
}

.ms-mcp-facts dt {
  color: rgba(31, 42, 51, 0.76);
}

.ms-mcp-facts dd {
  margin: 0;
  min-width: 0;
}

.ms-mcp-facts__build {
  display: block;
}

.ms-mcp-occurrences {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.ms-mcp-occurrence.ui.segment {
  margin: 0;
  padding: 0;
}

.ms-mcp-occurrence__summary {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 10rem) minmax(0, 1fr) minmax(0, 11rem) 5rem;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  list-style-position: inside;
}

.ms-mcp-occurrence__duration {
  text-align: right;
}

.ms-mcp-occurrence__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 1rem 1rem;
}

.ms-mcp-evidence {
  min-width: 0;
}

.ms-mcp-evidence__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.ms-mcp-evidence__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ms-primary-darker);
}

.ms-mcp-evidence__text {
  margin: 0;
  max-height: 20rem;
  overflow: auto;
  padding: 0.75rem;
  border: 1px solid rgba(48, 111, 145, 0.16);
  background: #f7fafb;
  font-family: var(--ms-field-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Подпись кнопки меняется («Copied») — ширина зарезервирована, ничего не прыгает. */
.ms-mcp-copy.ui.button {
  min-width: 9rem;
  margin: 0;
}

@media (max-width: 1100px) {
  .ms-mcp-problem {
    grid-template-columns: minmax(0, 1fr);
  }

  .ms-mcp-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .ms-mcp-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ms-mcp-filters__field--wide,
  .ms-mcp-filters__actions {
    grid-column: 1 / -1;
  }

  .ms-mcp-occurrence__summary {
    grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, 1fr) 5rem;
  }

  .ms-mcp-occurrence__build {
    display: none;
  }
}

/* Узкий экран: строки таблиц — стопки «подпись: значение», журнал — две строки. */
@media (max-width: 640px) {
  .ms-mcp-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .ms-mcp-ledger__link {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 0.75rem;
  }

  .ms-mcp-ledger__what {
    grid-column: 1 / -1;
    order: -1;
  }

  .ms-mcp-ledger__callers {
    display: none;
  }

  .ms-mcp-table.ui.table thead {
    display: none;
  }

  .ms-mcp-table.ui.table,
  .ms-mcp-table.ui.table tbody,
  .ms-mcp-table.ui.table tr,
  .ms-mcp-table.ui.table th,
  .ms-mcp-table.ui.table td {
    display: block;
    width: 100%;
  }

  .ms-mcp-table.ui.table tr {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(48, 111, 145, 0.12);
  }

  .ms-mcp-table.ui.table tbody th,
  .ms-mcp-table.ui.table td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0 !important;
    border: none !important;
    text-align: right;
  }

  .ms-mcp-table.ui.table tbody th::before,
  .ms-mcp-table.ui.table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: rgba(31, 42, 51, 0.76);
    font-weight: 400;
    text-align: left;
  }

  .ms-mcp-table.ui.table .ms-mcp-problems__what {
    flex-direction: column;
    text-align: left;
  }

  .ms-mcp-occurrence__summary {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 0.75rem;
  }

  .ms-mcp-occurrence__poc {
    grid-column: 1 / -1;
  }

  .ms-mcp-waterline__axis {
    flex-wrap: wrap;
  }

  .ms-mcp-waterline__legend {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }

  .ms-mcp-copy.ui.button {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-mcp-waterline g:hover rect {
    opacity: 1;
  }
}

/* ===== Раздел MCP: генератор и ручная работа (RFC mcp-generator-vs-hand-work §4.6) =====
   Сплошной Harbour — сделал генератор; штриховка Ink с пунктирным контуром — дописано руками: чертёжное «ещё строить»,
   следующая территория генератора. Нового цвета нет: ручная работа — не поломка. Fault — только «генератор сделал
   неправильно» и правка вне дозволенного. Метки происхождения — прямоугольники 2:1, квадрат занят видом проблемы. */
.ms-mcp-origin {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--ms-text);
}

.ms-mcp-origin__shape {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 0.625rem;
  box-sizing: border-box;
}

.ms-mcp-origin--generated .ms-mcp-origin__shape,
.ms-mcp-frontier__generated {
  background: var(--ms-primary);
}

.ms-mcp-origin--hand .ms-mcp-origin__shape,
.ms-mcp-frontier__hand {
  border: 1px dashed var(--ms-text);
  background: repeating-linear-gradient(135deg, rgba(31, 42, 51, 0.6) 0 1px, transparent 1px 5px);
}

.ms-mcp-origin--setup .ms-mcp-origin__shape {
  border: 2px solid var(--ms-primary);
}

.ms-mcp-origin--undo .ms-mcp-origin__shape {
  border: 2px solid var(--ms-slate);
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ms-slate) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}

.ms-mcp-origin--setup,
.ms-mcp-origin--undo {
  color: var(--ms-slate);
}

/* Граница генератора: две полосы — изменения и строки, цифры текстом рядом. */
.ms-mcp-frontier {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.ms-mcp-frontier__row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 15rem);
  align-items: center;
  gap: 1rem;
}

.ms-mcp-frontier__label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ms-text);
}

.ms-mcp-frontier__bar {
  display: flex;
  height: 0.875rem;
  background: rgba(48, 111, 145, 0.06);
}

.ms-mcp-frontier__generated,
.ms-mcp-frontier__hand {
  box-sizing: border-box;
  height: 100%;
}

.ms-mcp-frontier__figure {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--ms-text);
}

.ms-mcp-frontier__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
}

/* Карточка обзора: граница слева, причины справа; ниже — последние ручные изменения. */
.ms-mcp-work {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr);
  align-items: start;
  gap: 1.5rem 2.5rem;
  margin-bottom: 1.25rem;
}

.ms-mcp-work__subtitle {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ms-primary-darker);
}

.ms-mcp-causes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(48, 111, 145, 0.12);
}

.ms-mcp-causes__item {
  border-bottom: 1px solid rgba(48, 111, 145, 0.12);
}

.ms-mcp-causes__link,
.ms-mcp-causes__none {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem;
  font-size: 0.875rem;
  color: var(--ms-text);
}

.ms-mcp-causes__link > .ms-mcp-cause {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.ms-mcp-causes__link:hover {
  background: rgba(48, 111, 145, 0.05);
  color: var(--ms-text);
}

.ms-mcp-causes__none {
  color: var(--ms-slate);
}

.ms-mcp-causes__count {
  font-weight: 700;
}

.ms-mcp-cause {
  font-size: 0.875rem;
  color: var(--ms-text);
}

.ms-mcp-cause--wrong {
  color: var(--ms-fault);
  font-weight: 700;
}

.ms-mcp-cause--silent {
  color: var(--ms-slate);
}

.ms-mcp-ledger__link.ms-mcp-handrow {
  grid-template-columns: minmax(0, 1fr) minmax(0, 10rem) minmax(0, 11rem) 6.5rem;
}

.ms-mcp-handrow__what {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.ms-mcp-handrow__place {
  font-size: 0.875rem;
}

/* Ручная работа: строка — раскрытие; заголовок — фраза агента о том, чего генератор не смог. */
.ms-mcp-filters.ms-mcp-filters--handwork {
  grid-template-columns: repeat(3, minmax(0, 13rem)) minmax(0, 1fr) auto;
}

.ms-mcp-handwork {
  border-top: 1px solid rgba(48, 111, 145, 0.12);
}

.ms-mcp-handwork__item {
  border-bottom: 1px solid rgba(48, 111, 145, 0.12);
}

/* Раскрытие узнаётся по родному треугольнику: summary остаётся list-item, сетка — внутри. */
.ms-mcp-handwork__summary,
.ms-mcp-change__row {
  display: list-item;
  list-style-position: outside;
  margin-left: 1.25rem;
  padding: 0.75rem 0.5rem 0.75rem 0;
  cursor: pointer;
}

div.ms-mcp-change__row {
  cursor: default;
}

.ms-mcp-handwork__summary:hover,
.ms-mcp-change__disclosure > .ms-mcp-change__row:hover {
  background: rgba(48, 111, 145, 0.05);
}

.ms-mcp-handwork__summary:focus-visible,
.ms-mcp-change__disclosure > .ms-mcp-change__row:focus-visible {
  outline: 2px solid var(--ms-primary);
  outline-offset: 1px;
}

.ms-mcp-handwork__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 14rem) 7.5rem;
  align-items: baseline;
  gap: 1rem;
}

.ms-mcp-handwork__what,
.ms-mcp-handwork__where,
.ms-mcp-handwork__when,
.ms-mcp-change__what,
.ms-mcp-change__size {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.ms-mcp-handwork__headline {
  font-weight: 700;
  line-height: 1.4;
  color: var(--ms-text);
  overflow-wrap: anywhere;
}

.ms-mcp-handwork__request,
.ms-mcp-change__reason {
  line-height: 1.4;
  color: var(--ms-text);
  overflow-wrap: anywhere;
}

.ms-mcp-handwork__where,
.ms-mcp-handwork__when,
.ms-mcp-change__when {
  font-size: 0.875rem;
  color: rgba(31, 42, 51, 0.76);
}

.ms-mcp-handwork__when,
.ms-mcp-change__size {
  align-items: flex-end;
  text-align: right;
}

.ms-mcp-handwork__body,
.ms-mcp-change__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0 0.5rem 1rem 1.25rem;
}

.ms-mcp-handwork__details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.ms-mcp-handwork__files th {
  overflow-wrap: anywhere;
}

/* История POC: блоки по просьбам аналитика, внутри — изменения по порядку. */
.ms-mcp-story {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ms-mcp-story__title {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ms-primary-darker);
}

.ms-mcp-request.ui.segment {
  margin: 0;
}

.ms-mcp-request__title {
  margin: 0 0 0.5rem;
  max-width: 80ch;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ms-primary-darker);
}

.ms-mcp-request__title--none {
  font-weight: 400;
  color: var(--ms-slate);
}

.ms-mcp-story__changes {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(48, 111, 145, 0.12);
}

.ms-mcp-change {
  border-bottom: 1px solid rgba(48, 111, 145, 0.12);
}

.ms-mcp-change__grid {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr) 7.5rem 8.5rem;
  align-items: baseline;
  gap: 1rem;
}

.ms-mcp-change__summary {
  line-height: 1.4;
  color: var(--ms-text);
  overflow-wrap: anywhere;
}

.ms-mcp-change__cause {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

.ms-mcp-change__gap {
  color: var(--ms-text);
}

.ms-mcp-change__undone {
  font-size: 0.875rem;
  color: var(--ms-slate);
}

.ms-mcp-change--undone .ms-mcp-change__summary,
.ms-mcp-change--undone .ms-mcp-change__reason {
  text-decoration: line-through;
  text-decoration-color: var(--ms-slate);
  color: var(--ms-slate);
}

.ms-mcp-change__size {
  font-size: 0.875rem;
}

.ms-mcp-change__when {
  text-align: right;
}

@media (max-width: 1100px) {
  .ms-mcp-work {
    grid-template-columns: minmax(0, 1fr);
  }

  .ms-mcp-filters.ms-mcp-filters--handwork {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ms-mcp-ledger__link.ms-mcp-handrow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 9rem) 6.5rem;
  }

  .ms-mcp-handrow__place {
    display: none;
  }

  .ms-mcp-handwork__grid {
    grid-template-columns: minmax(0, 1fr) 7.5rem;
  }

  .ms-mcp-handwork__where {
    grid-column: 1;
    grid-row: 2;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }

  .ms-mcp-change__grid {
    grid-template-columns: 9rem minmax(0, 1fr) 7rem;
  }

  .ms-mcp-change__when {
    grid-column: 2 / -1;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .ms-mcp-frontier__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 0.75rem;
  }

  .ms-mcp-frontier__bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .ms-mcp-frontier__figure {
    text-align: right;
  }

  .ms-mcp-filters.ms-mcp-filters--handwork {
    grid-template-columns: minmax(0, 1fr);
  }

  .ms-mcp-ledger__link.ms-mcp-handrow {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ms-mcp-handrow__what {
    grid-column: 1 / -1;
  }

  .ms-mcp-handwork__grid,
  .ms-mcp-change__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
  }

  .ms-mcp-handwork__where {
    grid-row: auto;
  }

  .ms-mcp-handwork__when,
  .ms-mcp-change__size {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    text-align: left;
  }

  .ms-mcp-change__when {
    grid-column: auto;
  }
}