/* ============================================================
   TenderAI work-ui v3 — оболочка платформы и компоненты ui-*.
   Scoped: только .work-ui и .ui-*. Не трогает содержимое документов
   и встроенную разметку rich-content. Значения берутся из tokens.css:
   «бумага», один синий акцент, радиусы 8/12, тёмное боковое меню.
   ============================================================ */

.work-ui {
  /* 2.1 Базовые цвета (tokens.css) */
  --ui-bg: var(--t-bg);
  --ui-surface: var(--t-surface);
  --ui-surface-subtle: var(--t-surface-2);
  --ui-text: var(--t-ink);
  --ui-text-secondary: var(--t-gray);
  --ui-accent: var(--t-primary);
  --ui-accent-hover: var(--t-primary-hover);
  --ui-border: var(--t-border-strong);
  --ui-border-muted: var(--t-line);
  --ui-focus: var(--t-focus-ring);

  /* 2.2 Семантические цвета */
  --ui-success: var(--t-success);
  --ui-success-bg: var(--t-success-soft);
  --ui-error: var(--t-red);
  --ui-error-bg: var(--t-red-soft);
  --ui-warning: var(--t-warning);
  --ui-warning-bg: var(--t-warning-soft);
  --ui-info: var(--t-primary);
  --ui-info-bg: var(--t-primary-soft);

  /* 3.1 Шрифты */
  --ui-font-sans: var(--t-font-sans);
  --ui-font-mono: var(--t-font-mono);

  /* 4.1 Размеры shell */
  --ui-sidebar: 248px;
  --ui-rail: 72px;
  --ui-topbar: 56px;
  --ui-content-gap: 16px;
  --ui-inner-gap: 12px;
  --ui-compact-gap: 8px;
  --ui-micro-gap: 4px;
  --ui-detail: 420px;
  --ui-control-h: 44px;
  --ui-control-compact-h: 36px;
  --ui-touch: 44px;
  --ui-row-compact: 48px;
  --ui-row-comfortable: 56px;

  font-family: var(--ui-font-sans);
  background: var(--ui-bg);
  color: var(--ui-text);
  font-size: 15px;
  line-height: 1.5;
}

/* 4.4 Радиусы: поля и кнопки 8 px, карточки 12 px, статус-чип — капсула, точка 50% */
.work-ui .ui-button,
.work-ui .ui-input,
.work-ui .ui-select {
  border-radius: var(--t-r-md);
}

.work-ui .ui-table,
.work-ui .ui-card,
.work-ui .ui-panel,
.work-ui .ui-modal {
  border-radius: var(--t-r-lg);
}

.work-ui .ui-badge {
  border-radius: var(--t-r-pill);
}

.work-ui .ui-status-dot {
  border-radius: 50%;
}

/* 4.5 Границы */
.work-ui .ui-panel,
.work-ui .ui-card,
.work-ui .ui-table,
.work-ui .ui-input,
.work-ui .ui-select,
.work-ui .ui-button {
  border: 1px solid var(--ui-border);
}

.work-ui .ui-divider {
  border-top: 1px solid var(--ui-border-muted);
}

/* Focus-visible: 2px outline, 2px offset */
.work-ui .ui-button:focus-visible,
.work-ui .ui-input:focus-visible,
.work-ui .ui-select:focus-visible,
.work-ui a:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

/* ============================================================
   5.1 Shell
   ============================================================ */
.work-ui .ui-shell {
  display: grid;
  grid-template-columns: var(--ui-rail) var(--ui-sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

.work-ui .ui-shell--detail {
  grid-template-columns: var(--ui-rail) var(--ui-sidebar) minmax(0, 1fr) var(--ui-detail);
}

.work-ui .ui-rail {
  width: var(--ui-rail);
  background: var(--ui-surface);
  border-right: 1px solid var(--ui-border-muted);
}

.work-ui .ui-sidebar {
  width: var(--ui-sidebar);
  background: var(--ui-surface);
  border-right: 1px solid var(--ui-border-muted);
  padding: var(--ui-content-gap) 0;
}

.work-ui .ui-sidebar-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--ui-text);
  text-decoration: none;
  border-left: 3px solid transparent;
}

.work-ui .ui-sidebar-item:hover {
  background: var(--t-primary-soft);
}

.work-ui .ui-sidebar-item[aria-current="page"] {
  color: var(--ui-accent);
  background: var(--ui-bg);
  border-left: 3px solid var(--ui-accent);
}

.work-ui .ui-sidebar-item[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.work-ui .ui-topbar {
  height: var(--ui-topbar);
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-border-muted);
  display: flex;
  align-items: center;
  padding: 0 var(--ui-content-gap);
  gap: var(--ui-inner-gap);
}

.work-ui .ui-content {
  padding: var(--ui-content-gap);
  min-width: 0;
}

/* 5.2 Page header */
.work-ui .ui-page-header {
  display: flex;
  align-items: center;
  gap: var(--ui-inner-gap);
  margin-bottom: var(--ui-content-gap);
  flex-wrap: wrap;
}

.work-ui .ui-page-title {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}

.work-ui .ui-page-counters {
  font-size: 13px;
  color: var(--ui-text-secondary);
}

.work-ui .ui-page-actions {
  margin-left: auto;
  display: flex;
  gap: var(--ui-compact-gap);
}

/* ============================================================
   5.3 Button
   ============================================================ */
.work-ui .ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  font-family: var(--ui-font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease-out, color 120ms ease-out;
}

.work-ui .ui-button--compact {
  min-height: 36px;
  padding: 6px 10px;
}

.work-ui .ui-button--primary {
  background: var(--ui-accent);
  color: #FFFFFF;
  border-color: var(--ui-accent);
}

.work-ui .ui-button--primary:hover:not(:disabled) {
  background: var(--ui-accent-hover);
  border-color: var(--ui-accent-hover);
}

.work-ui .ui-button--primary:active:not(:disabled) {
  background: var(--ui-accent-hover);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.work-ui .ui-button--secondary {
  background: var(--ui-surface);
  color: var(--ui-text);
  border: 1px solid var(--ui-border);
}

.work-ui .ui-button--secondary:hover:not(:disabled) {
  background: var(--ui-bg);
}

.work-ui .ui-button--secondary:active:not(:disabled) {
  background: var(--ui-surface-subtle);
}

.work-ui .ui-button--destructive {
  background: transparent;
  color: var(--ui-error);
  border-color: var(--ui-error);
}

.work-ui .ui-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ============================================================
   5.4 FormField
   ============================================================ */
.work-ui .ui-field {
  display: flex;
  flex-direction: column;
  gap: var(--ui-micro-gap);
}

.work-ui .ui-label {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.work-ui .ui-input,
.work-ui .ui-select {
  min-height: 44px;
  padding: 8px 12px;
  font-family: var(--ui-font-sans);
  font-size: 14px;
  background: var(--ui-surface);
  color: var(--ui-text);
}

.work-ui .ui-input:hover,
.work-ui .ui-select:hover {
  border-color: var(--t-text-secondary);
}

.work-ui .ui-input:focus,
.work-ui .ui-select:focus {
  border-color: var(--ui-accent);
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}

.work-ui .ui-input[aria-invalid="true"],
.work-ui .ui-select[aria-invalid="true"] {
  border-color: var(--ui-error);
}

.work-ui .ui-input:disabled,
.work-ui .ui-select:disabled {
  background: var(--ui-bg);
  color: var(--ui-text-secondary);
  cursor: not-allowed;
}

.work-ui .ui-input[readonly],
.work-ui .ui-select[readonly] {
  background: var(--ui-surface);
  cursor: default;
}

.work-ui .ui-help {
  font-size: 12.5px;
  line-height: 16px;
  color: var(--ui-text-secondary);
}

.work-ui .ui-error {
  font-size: 12.5px;
  line-height: 16px;
  color: var(--ui-error);
  display: flex;
  align-items: center;
  gap: var(--ui-micro-gap);
}

/* ============================================================
   5.5 Search
   ============================================================ */
.work-ui .ui-search {
  display: flex;
  gap: var(--ui-compact-gap);
  align-items: stretch;
}

.work-ui .ui-search .ui-input {
  min-width: 240px;
  flex: 1;
}

/* ============================================================
   5.6 FilterBar
   ============================================================ */
.work-ui .ui-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-inner-gap);
  align-items: flex-end;
  padding: var(--ui-inner-gap);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
}

.work-ui .ui-filterbar-actions {
  display: flex;
  gap: var(--ui-compact-gap);
  margin-left: auto;
}

.work-ui .ui-filter-state {
  display: flex;
  gap: var(--ui-compact-gap);
  align-items: center;
  padding: var(--ui-compact-gap) 0;
  font-size: 12.5px;
  line-height: 16px;
}

.work-ui .ui-filter-draft {
  color: var(--ui-warning);
  background: var(--ui-warning-bg);
  padding: 2px 6px;
}

.work-ui .ui-filter-applied {
  color: var(--ui-success);
  background: var(--ui-success-bg);
  padding: 2px 6px;
}

/* ============================================================
   5.7 Table
   ============================================================ */
.work-ui .ui-table-wrap {
  overflow: auto;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
}

.work-ui .ui-table {
  width: 100%;
  border-collapse: collapse;
}

.work-ui .ui-table thead th {
  position: sticky;
  top: 0;
  background: var(--ui-surface-subtle);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ui-text-secondary);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ui-border);
}

.work-ui .ui-table tbody td {
  padding: 12px 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--ui-border-muted);
  vertical-align: top;
}

.work-ui .ui-table tbody tr {
  min-height: 48px;
}

.work-ui .ui-table tbody tr.ui-row-selected {
  background: var(--t-primary-soft);
  border-left: 3px solid var(--ui-accent);
}

.work-ui .ui-table tbody tr.ui-row-selected td:first-child {
  border-left: 3px solid var(--ui-accent);
}

/* ============================================================
   5.8 Pagination
   ============================================================ */
.work-ui .ui-pagination {
  display: flex;
  align-items: center;
  gap: var(--ui-inner-gap);
  padding: var(--ui-inner-gap) 0;
  flex-wrap: wrap;
}

.work-ui .ui-pagination-range {
  color: var(--ui-text-secondary);
}

.work-ui .ui-pagination .ui-limit-note {
  color: var(--ui-warning);
  background: var(--ui-warning-bg);
  padding: 2px 6px;
  font-size: 12.5px;
}

/* ============================================================
   Badge / статусы
   ============================================================ */
.work-ui .ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-micro-gap);
  padding: 2px 10px;
  font-size: 12.5px;
  line-height: 16px;
  font-weight: 600;
  border: 1px solid var(--ui-border-muted);
  background: var(--ui-surface);
  color: var(--ui-text-secondary);
}

.work-ui .ui-badge--success {
  color: var(--ui-success);
  background: var(--ui-success-bg);
  border-color: transparent;
}

.work-ui .ui-badge--error {
  color: var(--ui-error);
  background: var(--ui-error-bg);
  border-color: transparent;
}

.work-ui .ui-badge--warning {
  color: var(--ui-warning);
  background: var(--ui-warning-bg);
  border-color: transparent;
}

.work-ui .ui-badge--info {
  color: var(--ui-info);
  background: var(--ui-info-bg);
  border-color: transparent;
}

/* ============================================================
   Status states (null / 0 / пусто / ошибка / успех / частично)
   ============================================================ */
.work-ui .ui-state {
  display: flex;
  align-items: center;
  gap: var(--ui-compact-gap);
  padding: var(--ui-compact-gap) var(--ui-inner-gap);
  border-left: 3px solid var(--ui-border);
  border-radius: var(--t-r-md);
  background: var(--ui-surface-subtle);
}

.work-ui .ui-state--success { border-left-color: var(--ui-success); background: var(--ui-success-bg); color: var(--ui-success); }
.work-ui .ui-state--error   { border-left-color: var(--ui-error);   background: var(--ui-error-bg);   color: var(--ui-error); }
.work-ui .ui-state--warning { border-left-color: var(--ui-warning); background: var(--ui-warning-bg); color: var(--ui-warning); }
.work-ui .ui-state--info    { border-left-color: var(--ui-info);    background: var(--ui-info-bg);    color: var(--ui-info); }

.work-ui .ui-state-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.work-ui .ui-state--success .ui-state-dot { background: var(--ui-success); }
.work-ui .ui-state--error .ui-state-dot   { background: var(--ui-error); }
.work-ui .ui-state--warning .ui-state-dot { background: var(--ui-warning); }
.work-ui .ui-state--info .ui-state-dot    { background: var(--ui-info); }

/* ============================================================
   Card / detail pane
   ============================================================ */
.work-ui .ui-card {
  background: var(--ui-surface);
  padding: var(--ui-inner-gap);
  margin-bottom: var(--ui-inner-gap);
}

.work-ui .ui-card-title {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 var(--ui-compact-gap);
}

.work-ui .ui-detail-pane {
  width: var(--ui-detail);
  background: var(--ui-surface);
  border-left: 1px solid var(--ui-border);
  overflow-y: auto;
}

.work-ui .ui-detail-header {
  display: flex;
  align-items: center;
  gap: var(--ui-compact-gap);
  padding: var(--ui-inner-gap);
  border-bottom: 1px solid var(--ui-border-muted);
  position: sticky;
  top: 0;
  background: var(--ui-surface);
  z-index: 1;
}

.work-ui .ui-detail-body {
  padding: var(--ui-inner-gap);
}

.work-ui .ui-kv {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: var(--ui-micro-gap) var(--ui-inner-gap);
  font-size: 14px;
  line-height: 1.4;
}

.work-ui .ui-kv .k {
  color: var(--ui-text-secondary);
  font-weight: 500;
}

/* Моно ID */
.work-ui .ui-mono {
  font-family: var(--ui-font-mono);
  font-size: 13px;
  line-height: 18px;
}

/* ============================================================
   Modal
   ============================================================ */
.work-ui .ui-modal {
  background: var(--ui-surface);
  box-shadow: none;
}

/* ============================================================
   8.2 prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .work-ui *,
  .work-ui *::before,
  .work-ui *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width: 1200px) {
  .work-ui .ui-shell--detail {
    grid-template-columns: var(--ui-rail) var(--ui-sidebar) minmax(0, 1fr);
  }
  .work-ui .ui-detail-pane {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    z-index: 40;
  }
}

@media (max-width: 768px) {
  .work-ui .ui-shell,
  .work-ui .ui-shell--detail {
    grid-template-columns: minmax(0, 1fr);
  }
  .work-ui .ui-rail {
    width: 48px;
  }
  .work-ui .ui-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
    transform: translateX(-100%);
  }
  .work-ui .ui-sidebar--open {
    transform: translateX(0);
  }
  .work-ui .ui-content {
    padding: 12px;
  }
}

@media (max-width: 360px) {
  .work-ui .ui-content {
    padding: 8px;
  }
  .work-ui .ui-search,
  .work-ui .ui-search .ui-input,
  .work-ui .ui-button {
    width: 100%;
  }
}

/* ============================================================
   Оболочка платформы v3 (макет «Дизайн-система»): тёмное боковое меню 248 px,
   светлая «бумага», один синий акцент, радиусы 8/12, текст не мельче 12,5 px.
   Все значения — из tokens.css; здесь только раскладка и оформление каркаса.
   ============================================================ */
body.platform-body.work-ui {
  --bg: var(--t-bg); --surface: var(--t-surface); --ink: var(--t-ink); --text: var(--t-text);
  --gray: var(--t-gray); --faint: var(--t-text-muted);
  --line: var(--t-line); --border: var(--t-line-strong); --line-soft: var(--t-line-soft); --border-soft: var(--t-line-soft);
  --primary: var(--profile-accent, var(--t-primary)); --accent: var(--primary);
  --primary-soft: var(--profile-accent-soft, var(--t-primary-soft)); --accent-hover: var(--profile-accent-hover, var(--t-primary-hover));
  --accent-soft: var(--primary-soft);
  --radius-card: var(--t-r-lg); --radius-ctl: var(--t-r-md); --radius-pill: var(--t-r-pill); --radius-lg: var(--t-r-lg); --radius-l: var(--t-r-lg);
  --font-heading: var(--t-font-sans); --font-body: var(--t-font-sans); --font-sans: var(--t-font-sans);
  --sidebar-w: 248px; --sidebar-width: 248px; --topbar-h: 56px; --topbar-height: 56px;
  padding: 0; margin: 0; background: var(--t-bg); color: var(--t-ink); font: 400 15px/1.5 var(--t-font-sans);
}

/* ---------- боковое меню ---------- */
.work-ui .sidebar {
  width: 248px; padding: 0 12px; background: var(--t-side-bg); color: var(--t-side-text);
  border-right: 0; box-shadow: none;
}
.work-ui .sidebar__brand {
  height: auto; padding: 20px 12px 18px; gap: 10px; color: var(--t-on-accent);
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
}
.work-ui .logo-icon {
  width: 32px; height: 32px; border-radius: var(--t-r-md); background: var(--t-side-mark);
  color: var(--t-on-accent); font-size: 16px; font-weight: 600;
}
.work-ui .sidebar__brand .logo-ya { color: var(--t-on-accent); }
.work-ui .sidebar__brand .logo-ai { color: var(--t-side-muted); font-weight: 400; }
.work-ui .sidebar__search {
  margin: 0 0 8px; min-height: 44px; padding: 0 12px; gap: 8px; border: 1px solid var(--t-side-line);
  border-radius: var(--t-r-md); background: var(--t-side-field); color: var(--t-side-muted); font: 400 14px/1.2 var(--t-font-sans);
  width: 100%; cursor: pointer; text-align: left;
}
.work-ui .sidebar__search:hover { border-color: var(--t-side-muted); }
.work-ui .sidebar__search:focus-visible { outline: 2px solid var(--t-side-mark); outline-offset: 1px; background: var(--t-side-field); border-color: var(--t-side-muted); }
.work-ui .sidebar__search-text { flex: 1 1 auto; }
.work-ui .sidebar__search kbd {
  margin-left: auto; padding: 1px 6px; border: 1px solid var(--t-side-line); border-radius: 4px; background: transparent;
  color: var(--t-side-muted); font: 400 12.5px/1.2 var(--t-font-mono);
}
.work-ui .sidebar__nav { padding: 0; }
.work-ui .sidebar__group {
  margin: 14px 0 6px; padding: 0 12px; font-size: 12.5px; font-weight: 600; letter-spacing: var(--t-ls-group);
  text-transform: uppercase; color: var(--t-side-group);
}
.work-ui .sidebar__link {
  min-height: 38px; padding: 7px 12px; gap: 10px; border-radius: var(--t-r-md); border-left: 0;
  font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--t-side-text);
}
.work-ui .sidebar__link .nav-ico { width: 18px; height: 18px; flex: 0 0 18px; }
.work-ui .sidebar__link:hover { background: rgba(255, 255, 255, 0.10); color: var(--t-on-accent); }
.work-ui .sidebar__link:focus-visible { outline: 2px solid var(--t-side-mark); outline-offset: -2px; }
.work-ui .sidebar__nav .sidebar__link.is-active[data-nav],
.work-ui .sidebar__link[aria-current="page"] {
  border-left: 0; background: color-mix(in srgb, var(--t-side-mark) 34%, var(--t-side-bg)); color: var(--t-on-accent); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--t-side-mark);
}
.work-ui .sidebar__nav .sidebar__link.is-active[data-nav]:hover,
.work-ui .sidebar__link[aria-current="page"]:hover { background: color-mix(in srgb, var(--t-side-mark) 44%, var(--t-side-bg)); }
.work-ui .sidebar__link.is-disabled { color: var(--t-side-group); }
.work-ui .nav-group[hidden], .work-ui .sidebar__link[hidden] { display: none; }
.work-ui .sidebar__user {
  margin: 12px 0 0; padding: 12px; gap: 10px; border: 0; border-top: 1px solid var(--t-side-line);
  border-radius: 0; background: transparent; color: var(--t-on-accent);
}
.work-ui .nav-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 50%; background: var(--t-side-line); color: var(--t-side-text);
}
.work-ui .sidebar__user-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.work-ui .sidebar__user-text b { font-size: 14px; font-weight: 500; color: var(--t-on-accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-ui .sidebar__user form { margin: 0 0 0 auto; flex: 0 0 auto; }
.work-ui .sidebar__user-text span { font-size: 12.5px; color: var(--t-side-muted); }
.work-ui .sidebar .btn-ghost {
  min-height: 36px; padding: 4px 10px; background: transparent; border-color: var(--t-side-line);
  color: var(--t-side-text); font-size: 13px; font-weight: 500;
}
.work-ui .sidebar .btn-ghost:hover:not(:disabled) { background: var(--t-side-hover); border-color: var(--t-side-muted); color: var(--t-on-accent); }
.work-ui #platform-nav-close { display: none; }

/* ---------- верхняя полоса ---------- */
.work-ui .topbar {
  left: 248px; height: 56px; min-height: 56px; padding: 0 40px; gap: 16px; flex-wrap: nowrap;
  background: var(--t-bg); border-bottom: 1px solid var(--t-line); box-shadow: none;
}
.work-ui .topbar__crumbs { font-size: 13px; color: var(--t-text-muted); }
.work-ui .topbar__crumbs b { color: var(--t-ink); font-weight: 500; }
.work-ui .topbar__date { font-size: 13px; color: var(--t-text-muted); }
.work-ui .dc-shortcut-preference { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--t-gray); }
.work-ui #platform-nav-toggle { min-width: 44px; min-height: 44px; padding: 0; border-color: transparent; background: transparent; font-size: 18px; }
.work-ui #platform-nav-toggle:hover { background: var(--t-surface-3); border-color: transparent; }

/* ---------- область страницы ---------- */
body.work-ui > .platform-layout { margin: 0 auto 0 248px; padding: 80px 40px 56px; min-width: 0; max-width: 1480px; gap: 20px; }
.work-ui .platform-layout .platform-layout { margin: 0; padding: 0; min-width: 0; max-width: none; }
.work-ui .page-head { margin-bottom: 4px; gap: 16px; }
.work-ui .page-head__title, .work-ui .page-title { margin: 0; font: 600 30px/1.2 var(--t-font-sans); letter-spacing: -0.015em; color: var(--t-ink); }
.work-ui .page-head__meta { margin: 6px 0 0; font: 400 15px/1.5 var(--t-font-sans); color: var(--t-gray); }
.work-ui .crumbs { font-size: 13px; color: var(--t-text-muted); }
.work-ui .card, .work-ui .panel {
  background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-r-lg); box-shadow: none;
}
.work-ui .card-head { padding: 16px 20px; border-bottom: 1px solid var(--t-line-soft); }
.work-ui .card-head h2, .work-ui .section-title { margin: 0; font: 600 18px/1.35 var(--t-font-sans); color: var(--t-ink); }
.work-ui .card-head .meta { font: 400 13px/1.4 var(--t-font-sans); color: var(--t-text-muted); }
.work-ui .card-body { padding: 20px; }

/* ---------- кнопки: основная — синяя, остальные — светлые с рамкой ---------- */
.work-ui :is(.btn, .btn-ghost, .btn-soft, .btn-secondary, .btn-primary, .btn-accent, .btn--primary) {
  min-height: 44px; padding: 8px 18px; gap: 8px; border-radius: var(--t-r-md);
  font: 600 14px/1.2 var(--t-font-sans); box-shadow: none; text-decoration: none;
}
.work-ui :is(.btn, .btn-ghost, .btn-soft, .btn-secondary) {
  background: var(--t-surface); color: var(--t-ink); border: 1px solid var(--t-border-strong);
}
.work-ui :is(.btn, .btn-ghost, .btn-soft, .btn-secondary):hover:not(:disabled) {
  background: var(--t-secondary-hover); border-color: var(--t-text-secondary); color: var(--t-ink);
}
.work-ui :is(.btn-primary, .btn-accent, .btn--primary) {
  background: var(--t-primary); border: 1px solid var(--t-primary); color: var(--t-on-accent);
}
.work-ui :is(.btn-primary, .btn-accent, .btn--primary):hover:not(:disabled) {
  background: var(--t-primary-hover); border-color: var(--t-primary-hover); color: var(--t-on-accent);
}
.work-ui :is(.btn-primary, .btn-accent, .btn--primary):active:not(:disabled) { background: var(--t-primary-active); border-color: var(--t-primary-active); }
.work-ui :is(.btn, .btn-ghost, .btn-soft, .btn-secondary, .btn-primary, .btn-accent):focus-visible {
  outline: 2px solid var(--t-focus-ring); outline-offset: 2px; box-shadow: var(--t-focus-glow);
}
.work-ui :is(.btn, .btn-ghost, .btn-soft, .btn-secondary, .btn-primary, .btn-accent):disabled,
.work-ui :is(.btn, .btn-ghost, .btn-soft, .btn-secondary, .btn-primary, .btn-accent)[aria-disabled="true"] {
  background: var(--t-btn-disabled-bg); border-color: var(--t-btn-disabled-border); color: var(--t-btn-disabled-text); cursor: not-allowed; opacity: 1;
}
.work-ui .btn-sm { min-height: 36px; padding: 4px 12px; font-size: 13px; }

/* ---------- поля ввода: высота 44, радиус 8, рамка 3:1 (значения по умолчанию, компоненты могут уточнять) ---------- */
.work-ui :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="color"]), select, textarea) {
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--t-border-strong); border-radius: var(--t-r-md);
  background: var(--t-surface); color: var(--t-ink); font: 400 14px/1.3 var(--t-font-sans);
}
.work-ui :where(textarea) { min-height: 96px; }
.work-ui :where(input, select, textarea):focus-visible { outline: 3px solid var(--t-primary-line); outline-offset: 1px; border-color: var(--t-primary); }
.work-ui :where(input, select, textarea)::placeholder { color: var(--t-text-muted); opacity: 1; }
.work-ui :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--t-primary); width: 18px; height: 18px; }

/* ---------- свёрнутое меню ---------- */
.work-ui[data-nav-expanded="false"] .sidebar { width: 72px; padding: 0 8px; }
.work-ui[data-nav-expanded="false"] .sidebar__brand { padding: 20px 0 18px; justify-content: center; }
.work-ui[data-nav-expanded="false"] .brand-text,
.work-ui[data-nav-expanded="false"] .sidebar__group,
.work-ui[data-nav-expanded="false"] .sidebar__user-text,
.work-ui[data-nav-expanded="false"] .sidebar__search-text,
.work-ui[data-nav-expanded="false"] .sidebar__search kbd,
.work-ui[data-nav-expanded="false"] .sidebar__user form { display: none; }
.work-ui[data-nav-expanded="false"] .sidebar__search { justify-content: center; padding: 0; }
.work-ui[data-nav-expanded="false"] .sidebar__link { justify-content: center; max-width: none; padding: 8px; overflow: hidden; white-space: nowrap; font-size: 0; }
.work-ui[data-nav-expanded="false"] .sidebar__link .nav-ico { width: 20px; height: 20px; flex-basis: 20px; }
.work-ui[data-nav-expanded="false"] .sidebar__user { justify-content: center; padding: 12px 0; }
.work-ui[data-nav-expanded="false"] .topbar { left: 72px; }
body.work-ui[data-nav-expanded="false"] > .platform-layout { margin-left: 72px; }
.work-ui[data-density="comfortable"] .sidebar__link { min-height: 44px; }
@media (pointer: coarse) { .work-ui .sidebar__link { min-height: 44px; } }

/* ---------- узкий экран: меню поверх страницы ---------- */
@media (max-width: 1023px) {
  .work-ui .topbar { padding: 0 24px; }
  body.work-ui > .platform-layout { padding: 80px 24px 48px; }
}
@media (max-width:599px) {
  .work-ui .topbar, .work-ui[data-nav-expanded="false"] .topbar { left: 0; right: 0; padding: 0 12px; gap: 8px; }
  body.work-ui > .platform-layout, body.work-ui[data-nav-expanded="false"] > .platform-layout { margin-left: 0; padding: 76px 16px 32px; }
  .work-ui .sidebar { position: fixed; top: 0; bottom: 0; width: min(320px, calc(100vw - 56px)); z-index: 110; }
  .work-ui[data-nav-expanded="false"] .sidebar { display: none; }
  .work-ui .topbar__date { display: none; }
  .work-ui .dc-shortcut-preference { max-width: 160px; font-size: 12.5px; }
  .work-ui #platform-nav-close { display: block; min-height: 44px; margin: 8px 0 0; }
  .work-ui .page-head__title, .work-ui .page-title { font-size: 24px; }
}
@media (max-width: 390px) {
  .work-ui .topbar__crumbs { max-width: calc(100vw - 190px); overflow-wrap: anywhere; }
  .work-ui .topbar__brand { white-space: nowrap; overflow-wrap: normal; }
  body.work-ui > .platform-layout { padding-left: 12px; padding-right: 12px; }
}

/* ---------- общие компоненты v3 ---------- */
/* страница лежит на «бумаге»: внешняя секция — не карточка, карточками остаются вложенные блоки */
.work-ui .platform-section, .work-ui .platform-section--flat { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
/* единый заголовок страницы */
.work-ui main h1, .work-ui .page-head__title, .work-ui .page-title { margin: 0; font: 600 30px/1.2 var(--t-font-sans); letter-spacing: -0.015em; color: var(--t-ink); }
.work-ui .page-head__meta, .work-ui .page-subtitle { font: 400 15px/1.5 var(--t-font-sans); color: var(--t-gray); }
.work-ui .section-header { align-items: flex-end; gap: 16px; margin-bottom: 16px; }
/* чипы-ссылки и вкладки модулей */
.work-ui a.chip, .work-ui button.chip, .work-ui span.chip {
  min-height: 40px; padding: 6px 14px; border: 1px solid var(--t-border); border-radius: var(--t-r-pill); background: var(--t-surface);
  font: 500 13px/1.3 var(--t-font-sans); color: var(--t-gray); text-decoration: none;
}
.work-ui a.chip:hover, .work-ui button.chip:hover { border-color: var(--t-primary-line); background: var(--t-primary-soft); color: var(--t-primary); }
.work-ui a.chip--active, .work-ui button.chip--active { background: var(--t-primary-soft); border-color: var(--t-primary-line); color: var(--t-primary); font-weight: 600; }
.work-ui .proposals-tabs { gap: 4px; border-bottom: 1px solid var(--t-line); }
.work-ui .proposals-tabs a.chip { min-height: 44px; padding: 10px 16px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; font: 600 14px/1.3 var(--t-font-sans); color: var(--t-gray); }
.work-ui .proposals-tabs a.chip:hover { background: transparent; color: var(--t-ink); }
.work-ui .proposals-tabs a.chip--active { border-bottom-color: var(--t-primary); color: var(--t-primary); background: transparent; }
@media (max-width:599px) { .work-ui main h1, .work-ui .page-head__title, .work-ui .page-title { font-size: 24px; } }
.work-ui .section-header .section-title { margin: 0; font: 600 30px/1.2 var(--t-font-sans); letter-spacing: -0.015em; color: var(--t-ink); }
.work-ui .section-header .section-subtitle { margin: 6px 0 0; font: 400 15px/1.5 var(--t-font-sans); color: var(--t-gray); }
@media (max-width:599px) { .work-ui .section-header .section-title { font-size: 24px; } }

/* вертикальный ритм страницы: блоки секции идут через единый промежуток */
.work-ui .platform-section:not(.shelf-page) { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.work-ui .platform-section:not(.shelf-page) > p { margin: 0; }
.work-ui .platform-section:not(.shelf-page) > .page-head, .work-ui .platform-section:not(.shelf-page) > .section-header { margin-bottom: 0; }
/* флажки и переключатели с подписью: в одну строку, по центру */
.work-ui label:has(> input[type="checkbox"]), .work-ui label:has(> input[type="radio"]) {
  display: inline-flex; flex-direction: row; align-items: center; gap: 8px; min-height: 44px; font-weight: 400;
}
/* карточка без своих .card-head/.card-body получает внутренние отступы */
.work-ui .card:not(:has(> .card-head, > .card-body, > .card-pad)) { padding: 20px; }
.work-ui .card > .card__title, .work-ui .card > h3:first-child { margin: 0 0 12px; font: 600 18px/1.35 var(--t-font-sans); }
/* подпись с полем внутри: подпись над полем */
.work-ui label:has(> input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]), > select, > textarea) {
  display: flex; flex-direction: column; gap: 6px; font: 500 13px/1.4 var(--t-font-sans); color: var(--t-gray);
}
/* <p><label for=X>Подпись</label><input id=X></p> — подпись над полем, поле не шире 520 px */
.work-ui p:has(> label[for] + :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea)) {
  display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; max-width: 520px;
}
.work-ui p > label[for]:not(:has(> input)) { font: 500 13px/1.4 var(--t-font-sans); color: var(--t-gray); }
.work-ui form > .btn, .work-ui form > button.btn { margin: 4px 8px 0 0; }
/* колонка страницы не растёт от широкого содержимого (таблицы, длинные строки): иначе страница получает горизонтальную прокрутку */
body.work-ui > .platform-layout { grid-template-columns: minmax(0, 1fr); }
.work-ui .platform-layout > * { min-width: 0; }
/* страница отчёта анализа: сетка не растёт от широких блоков */
.work-ui .report-layout { grid-template-columns: minmax(0, 1fr); }
.work-ui .report-layout > * { min-width: 0; }
.work-ui .report-layout { padding: 0; margin: 0; max-width: none; }