/* «Агенты сайтов» (docs/sites-agents.md). Только токены палитры theme.css: светлая и тёмная темы.
   Порядок: основа раздела → оболочка и навигация → типографика экрана → поверхности → статусы →
   таблицы → формы и кнопки → раскрываемые блоки → компоненты экранов → OAuth → адаптив. */

/* ---- Основа раздела ---- */
body.sites-agents-mode #filterPanel, body.sites-agents-mode #cardsRow, body.sites-agents-mode #products, body.sites-agents-mode .topbar { display: none !important; }
#sitesAgentsDashboard {
  --sa-radius: 12px; --sa-radius-sm: 8px; --sa-gap: 14px; --sa-control: 32px;
  --sa-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--n13); font-size: 14px; line-height: 1.45; min-width: 0;
}
#sitesAgentsDashboard[hidden], #sitesAgentsDashboard [hidden] { display: none !important; }
#sitesAgentsDashboard *, #sitesAgentsDashboard *::before, #sitesAgentsDashboard *::after { box-sizing: border-box; }

/* ---- Оболочка: шапка, меню вкладками сверху, рабочая область на всю ширину ---- */
.sa-shell { display: flex; flex-direction: column; gap: 18px; padding: 16px 24px 48px; max-width: 1560px; margin: 0 auto; }
.sa-header { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.sa-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sa-brand-mark { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--blue-tint); border: 1px solid var(--blue-strong); color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.sa-header h1 { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 650; color: var(--n14); }
.sa-eyebrow { margin: 2px 0 0; font-size: 12px; color: var(--n10); }

.sa-nav { display: flex; flex-direction: column; gap: 0; position: sticky; top: 0; z-index: 5; margin: 0 -24px; padding: 0 24px; background: var(--n1); border-bottom: 1px solid var(--n5); }
.sa-nav-groups { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.sa-nav-groups::-webkit-scrollbar, .sa-nav-items::-webkit-scrollbar { display: none; }
.sa-nav-group { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-bottom: 2px solid transparent; color: var(--n11); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.sa-nav-group:hover { color: var(--n14); }
.sa-nav-group.is-active { color: var(--n14); border-bottom-color: var(--blue); }
.sa-nav-items { display: flex; gap: 6px; padding: 10px 0 12px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--n4); }
.sa-nav-item { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--n5); background: var(--n2); color: var(--n12); text-decoration: none; font-size: 13px; line-height: 1.3; white-space: nowrap; }
.sa-nav-item:hover { border-color: var(--n7); color: var(--n14); }
.sa-nav-item.is-active { background: var(--blue-tint); border-color: var(--blue-strong); color: var(--n14); font-weight: 600; }
.sa-main { min-width: 0; }
.sa-main:focus { outline: none; }

/* Видимый фокус для всего интерактивного в разделе. */
#sitesAgentsDashboard :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
#sitesAgentsDashboard .sa-main:focus-visible { outline: none; }

/* ---- Типографика экрана ---- */
.sa-view { min-width: 0; }
.sa-view > h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.25; font-weight: 650; color: var(--n14); }
.sa-view > h2 + p.sa-muted, .sa-lede { margin: 0 0 14px; max-width: 72ch; font-size: 13px; color: var(--n11); }
.sa-view > h2 + :not(p) { margin-top: 14px; }
.sa-view h3 { margin: 0 0 10px; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--n14); }
.sa-view h4 { margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--n13); }
.sa-view p { margin: 0 0 8px; }
.sa-view-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.sa-view-head > h2 { margin: 0; font-size: 22px; color: var(--n14); }
.sa-view-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sa-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sa-section-head > h3 { margin: 0; }
.sa-muted { color: var(--n10); font-size: 12px; }
p.sa-muted { margin: 0 0 8px; }
.sa-unknown { color: var(--amber); font-style: italic; }
a.sa-link, .sa-view a:not(.sa-btn):not(.sa-nav-item) { color: var(--blue); text-underline-offset: 2px; overflow-wrap: anywhere; }
a.sa-link:hover, .sa-view a:not(.sa-btn):not(.sa-nav-item):hover { color: var(--sky); }
.sa-mono, .sa-id { font-family: var(--sa-mono); font-size: 12px; overflow-wrap: anywhere; }
.sa-view code { font-family: var(--sa-mono); background: var(--n4); padding: 1px 4px; border-radius: 4px; font-size: 12px; overflow-wrap: anywhere; }
.sa-md { overflow-wrap: anywhere; }
.sa-md p, .sa-md ul, .sa-md ol { margin: 0 0 8px; }
.sa-md ul, .sa-md ol { padding-left: 20px; }
.sa-md > :last-child { margin-bottom: 0; }

/* ---- Поверхности: карточки, сетки, показатели ---- */
.sa-stack { display: flex; flex-direction: column; gap: var(--sa-gap); min-width: 0; }
.sa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sa-gap); margin-bottom: var(--sa-gap); }
.sa-grid > .sa-card, .sa-cards > .sa-card { margin-bottom: 0; }
.sa-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: var(--sa-gap); }
.sa-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sa-gap); align-items: start; }
/* Ничего не выбрано — список занимает всю ширину, без пустой колонки карточки справа. */
.sa-split:has(> :last-child:empty), .sa-split:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.sa-split:has(> :last-child:empty) > :last-child:empty { display: none; }
.sa-split > * { min-width: 0; }
.sa-card > h3:first-child { margin-bottom: 12px; }
.sa-card { background: var(--n2); border: 1px solid var(--n5); border-radius: var(--sa-radius); padding: 16px 18px; box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow) 14%, transparent); min-width: 0; margin-bottom: var(--sa-gap); }
.sa-card > :last-child { margin-bottom: 0; }
.sa-card--compact { padding: 10px 12px; }
.sa-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sa-card-head > :is(h3, h4, strong) { margin: 0; }
.sa-card-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--n10); }
.sa-card--interactive, .sa-card[data-sa-open] { cursor: pointer; transition: border-color .12s ease, background-color .12s ease; }
.sa-card--interactive:hover, .sa-card[data-sa-open]:hover { border-color: var(--n7); background: var(--n3); }
.sa-card.is-selected { border-color: var(--blue-strong); box-shadow: inset 3px 0 0 var(--blue); }
.sa-split > div > .sa-card:last-child, .sa-split > .sa-card { margin-bottom: 0; }

/* Списки-карточки (агенты, модели): ul.sa-*-cards > li.sa-*-card. */
:is(.sa-agent-cards, .sa-model-cards) { list-style: none; padding: 0; margin: 0 0 var(--sa-gap); display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
:is(.sa-agent-card, .sa-model-card) { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; background: var(--n2); border: 1px solid var(--n5); border-radius: var(--sa-radius); box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow) 14%, transparent); font-size: 13px; overflow-wrap: anywhere; }
:is(.sa-agent-card, .sa-model-card) .sa-card-head strong { font-size: 15px; color: var(--n14); }
:is(.sa-agent-card, .sa-model-card) .sa-card-head { margin-bottom: 2px; }
:is(.sa-agent-card, .sa-model-card) .sa-actions { margin: auto 0 0; padding-top: 6px; }
.sa-agent-card[data-sa-open] { cursor: pointer; }
.sa-agent-card[data-sa-open]:hover { border-color: var(--n7); background: var(--n3); }
/* Команда без выбранного агента: карточки на всю ширину (2–3 колонки), без пустой панели справа. */
.sa-team-wide .sa-agent-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.sa-team-wide .sa-agent-cards + .sa-muted { margin: 0; }
.sa-agent-card.is-selected { border-color: var(--blue-strong); background: var(--blue-tint); box-shadow: inset 3px 0 0 var(--blue); }
/* В узких карточках метки переносятся внутри своей рамки, а не выходят в соседнюю. */
:is(.sa-agent-card, .sa-model-card) .sa-badge { white-space: normal; text-align: left; }
.sa-model-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sa-model-title strong { color: var(--n14); }
.sa-model-flags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.sa-model-price { font-variant-numeric: tabular-nums; }
.sa-model-price .sa-muted { font-size: 12px; margin-right: 4px; }
.sa-model-card .sa-fold { margin: 2px 0 0; }
/* Стопка «подпись над значением» для узких карточек вместо двухколоночного .sa-kv. */
.sa-rows { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0; font-size: 12px; }
.sa-rows > div { min-width: 0; overflow-wrap: anywhere; color: var(--n13); }
.sa-rows > div > span:first-child { display: block; color: var(--n10); font-size: 11px; }

.sa-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.sa-kpi { display: flex; flex-direction: column; gap: 4px; min-width: 0; background: var(--n2); border: 1px solid var(--n5); border-radius: var(--sa-radius); padding: 14px 16px; box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow) 14%, transparent); }
.sa-kpi span { display: block; font-size: 12px; font-weight: 500; color: var(--n10); }
.sa-kpi strong { display: block; font-size: 26px; line-height: 1.2; font-weight: 650; color: var(--n14); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sa-kpi strong .sa-badge { font-size: 13px; }
.sa-kpi small { display: block; margin-top: auto; padding-top: 4px; font-size: 12px; color: var(--n10); }
.sa-kpi--good { box-shadow: inset 3px 0 0 var(--green); }
.sa-kpi--warn { box-shadow: inset 3px 0 0 var(--amber); }
.sa-kpi--bad { box-shadow: inset 3px 0 0 var(--red); }
.sa-kpi--info { box-shadow: inset 3px 0 0 var(--blue); }

/* ---- Метки и состояния ---- */
.sa-badge { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 8px; border-radius: 999px; font-size: 12px; line-height: 18px; white-space: nowrap; vertical-align: middle; background: var(--n4); color: var(--n13); border: 1px solid var(--n6); }
.sa-tone-good { background: var(--green-tint); color: var(--green); border-color: var(--green-strong); }
.sa-tone-warn { background: var(--amber-tint); color: var(--amber); border-color: var(--amber-strong); }
.sa-tone-bad { background: var(--red-tint); color: var(--red); border-color: var(--red-strong); }
.sa-tone-info { background: var(--blue-tint); color: var(--blue); border-color: var(--blue-strong); }
.sa-synthetic { font-weight: 700; letter-spacing: .03em; }
.sa-state { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--sa-radius); border: 1px solid var(--n6); border-left-width: 3px; background: var(--n2); margin: 6px 0 14px; font-size: 13px; overflow-wrap: anywhere; }
.sa-state strong { color: var(--n14); }
.sa-state--loading { border-style: dashed; border-left-style: solid; }
.sa-state--loading strong::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--n8); border-top-color: var(--sky); animation: sa-spin 1s linear infinite; vertical-align: -1px; }
.sa-state--not_configured, .sa-state--stale, .sa-state--partial { border-color: var(--amber-strong); border-left-color: var(--amber); background: var(--amber-tint); }
.sa-state--unavailable, .sa-state--error { border-color: var(--red-strong); border-left-color: var(--red); background: var(--red-tint); }
.sa-state--permission_denied { border-color: var(--violet-strong); border-left-color: var(--violet); background: var(--violet-tint); }
.sa-state--running { border-color: var(--blue-strong); border-left-color: var(--blue); background: var(--blue-tint); }
.sa-state .sa-btn { align-self: flex-start; margin-top: 6px; }
.sa-result { padding: 8px 12px; border-radius: var(--sa-radius); background: var(--green-tint); color: var(--green); border: 1px solid var(--green-strong); margin: 8px 0; font-size: 13px; overflow-wrap: anywhere; }
.sa-result a { color: inherit; }
@keyframes sa-spin { to { transform: rotate(360deg); } }

/* ---- Таблицы: прокрутка внутри обёртки, длинные ID и URL переносятся ---- */
.sa-table-wrap { max-width: 100%; max-height: min(70vh, 640px); overflow: auto; border: 1px solid var(--n5); border-radius: var(--sa-radius); background: var(--n2); margin-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--n7) transparent; }
.sa-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.sa-table th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: 12px; font-weight: 600; color: var(--n11); background: var(--n3); padding: 9px 12px; white-space: nowrap; border-bottom: 1px solid var(--n5); }
.sa-table td { padding: 9px 12px; border-top: 1px solid var(--n4); vertical-align: top; color: var(--n13); overflow-wrap: break-word; min-width: 0; }
/* Длинные ID и URL без пробелов переносятся, но не сжимают колонку до буквы. */
.sa-table td :is(.sa-mono, .sa-id, code) { overflow-wrap: anywhere; }
.sa-table tbody tr:first-child td { border-top: 0; }
.sa-table td .sa-badge { white-space: normal; }
.sa-table tr.is-selected td { background: var(--blue-tint); }
.sa-table tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
.sa-table tr[data-sa-open] { cursor: pointer; }
.sa-table tbody tr:hover td { background: var(--n3); }
.sa-table .num { text-align: right; white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.sa-kv { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 5px 14px; margin: 0 0 10px; font-size: 13px; }
.sa-kv dt { color: var(--n10); }
.sa-kv dd { margin: 0; color: var(--n13); overflow-wrap: anywhere; min-width: 0; }

/* ---- Кнопки, действия, фильтры и формы ---- */
.sa-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--sa-control); border: 1px solid var(--n6); background: var(--n3); color: var(--n13); border-radius: var(--sa-radius-sm); padding: 5px 12px; font: inherit; font-size: 13px; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; }
.sa-btn:hover:not(:disabled) { background: var(--n4); color: var(--n14); border-color: var(--n7); }
.sa-btn:disabled { opacity: .55; cursor: not-allowed; }
.sa-btn--primary { background: var(--blue-strong); border-color: var(--blue); color: var(--n14); font-weight: 600; }
.sa-btn--primary:hover:not(:disabled) { background: var(--blue-strong); color: var(--n14); border-color: var(--sky); }
.sa-btn--danger { background: var(--red-tint); border-color: var(--red-strong); color: var(--red); }
.sa-btn--danger:hover:not(:disabled) { background: var(--red-tint); color: var(--red); border-color: var(--red); }
.sa-btn--paid::after { content: " · платно"; font-size: 11px; color: var(--amber); }
button.sa-link, .sa-link-btn { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--blue); cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
button.sa-link:hover, .sa-link-btn:hover { color: var(--sky); }
.sa-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.sa-consequence { font-size: 12px; color: var(--n10); margin: 2px 0 8px; }
.sa-pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0 14px; }

.sa-filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--n5); border-radius: var(--sa-radius); background: var(--n2); }
.sa-filters .sa-field { flex: 1 1 160px; max-width: 260px; }
.sa-filters .sa-actions, .sa-filters > .sa-btn { margin: 0; flex: 0 0 auto; }
.sa-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; margin: 8px 0; min-width: 0; }
.sa-form .sa-actions, .sa-form .sa-field--textarea, .sa-form .sa-wide { grid-column: 1 / -1; }
.sa-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sa-field label { font-size: 12px; font-weight: 500; color: var(--n11); }
.sa-field small { line-height: 1.35; }
.sa-field--checkbox { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; min-height: var(--sa-control); }
.sa-field--checkbox label { font-size: 13px; color: var(--n13); }
.sa-field input, .sa-field select, .sa-field textarea { width: 100%; min-height: var(--sa-control); background: var(--n1); color: var(--n14); border: 1px solid var(--n6); border-radius: var(--sa-radius-sm); padding: 5px 8px; font: inherit; font-size: 13px; min-width: 0; color-scheme: var(--color-scheme); }
.sa-field input:hover:not(:disabled), .sa-field select:hover:not(:disabled), .sa-field textarea:hover:not(:disabled) { border-color: var(--n7); }
.sa-field :is(input, select, textarea):disabled { opacity: .65; cursor: not-allowed; }
.sa-field input[type="checkbox"], .sa-field input[type="radio"] { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--blue); }
.sa-field textarea { font-family: var(--sa-mono); font-size: 12.5px; min-height: 90px; resize: vertical; }
.sa-field input:invalid { border-color: var(--red-strong); }
.sa-fieldset { border: 1px solid var(--n5); border-radius: var(--sa-radius); padding: 8px 12px 6px; margin: 0 0 12px; min-width: 0; background: var(--n2); }
.sa-fieldset legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--n13); }
.sa-fieldset[data-editable="false"] { background: var(--n1); }
.sa-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; border: 0; padding: 0; margin: 0; min-width: 0; }
.sa-checks legend { font-size: 12px; color: var(--n11); padding: 0 0 4px; }
.sa-checks label { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; }
.sa-checks input { accent-color: var(--blue); }

/* ---- Раскрываемые блоки: подробности по клику ---- */
.sa-view details { min-width: 0; margin: 8px 0; border: 1px solid var(--n5); border-radius: var(--sa-radius); background: var(--n2); }
.sa-view details > summary { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--n12); border-radius: var(--sa-radius); }
.sa-view details > summary::-webkit-details-marker { display: none; }
.sa-view details > summary::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-right: 2px solid var(--n9); border-bottom: 2px solid var(--n9); transform: rotate(-45deg); transition: transform .12s ease; }
.sa-view details[open] > summary::before { transform: rotate(45deg); }
.sa-view details > summary:hover { color: var(--n14); background: var(--n3); }
.sa-view details[open] > summary { border-bottom: 1px solid var(--n5); border-radius: var(--sa-radius) var(--sa-radius) 0 0; }
.sa-view details > :not(summary) { margin-left: 12px; margin-right: 12px; }
.sa-view details > summary + * { margin-top: 10px; }
.sa-view details > :last-child:not(summary) { margin-bottom: 12px; }
.sa-view details > summary > :is(h3, h4) { display: inline; margin: 0; }
/* «Показать все» под коротким списком — без рамки, как продолжение списка. */
.sa-view details.sa-more { border: 0; background: transparent; margin: 4px 0 10px; }
.sa-view details.sa-more > summary { min-height: 32px; padding: 4px 0; font-weight: 500; color: var(--blue); background: transparent; }
.sa-view details.sa-more > summary:hover { color: var(--sky); background: transparent; }
.sa-view details.sa-more[open] > summary { border-bottom: 0; }
.sa-view details.sa-more > :not(summary) { margin-left: 0; margin-right: 0; }
/* Технические данные — тихий вторичный блок. */
.sa-view details.sa-diagnostic { background: var(--n1); border-style: dashed; font-size: 12px; }
.sa-view details.sa-diagnostic > summary { min-height: 30px; font-weight: 500; font-size: 12px; color: var(--n10); }
.sa-diagnostic pre { margin-top: 0; max-height: 320px; overflow: auto; background: var(--n1); border: 1px solid var(--n5); border-radius: var(--sa-radius-sm); padding: 8px; color: var(--n12); font-family: var(--sa-mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Справка: каждый раздел — карточка с заголовком-переключателем. */
.sa-view details.sa-help-section { padding: 0; margin: 0 0 8px; }
.sa-view details.sa-help-section > summary { min-height: 44px; padding: 8px 14px; }
.sa-view details.sa-help-section > .sa-md { margin: 12px 16px 14px; }
.sa-help-section h3 { font-size: 14px; }

/* ---- Работа департамента: обходы, сигналы, рекомендации, разбор ---- */
.sa-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 18px; align-items: start; }
.sa-overview:not(:has(> .sa-overview-side)) { grid-template-columns: minmax(0, 1fr); }
.sa-overview-main, .sa-overview-side { min-width: 0; }
.sa-overview-side { position: sticky; top: 112px; }
.sa-overview-side .sa-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sa-overview-side .sa-form .sa-field:has(select[name="role"]), .sa-overview-side .sa-form .sa-field:has(select[name="visibility"]), .sa-overview-side .sa-form .sa-field:has(select[name="kind"]) { grid-column: 1 / -1; }
.sa-overview .sa-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sa-overview .sa-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sa-overview .sa-list > li { padding: 8px 0; border-top: 1px solid var(--n4); }
.sa-overview .sa-list > li:first-child { border-top: 0; padding-top: 0; }
.sa-indent { display: inline-block; width: calc(var(--sa-depth, 0) * 14px); }
.sa-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; overflow-wrap: anywhere; }
.sa-memory { border-top: 1px solid var(--n4); padding-top: 6px; }
.sa-chain { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sa-chain > span + span::before { content: "→"; margin-right: 6px; color: var(--n9); }
.sa-chain-step { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; background: var(--n1); border: 1px solid var(--n5); border-radius: var(--sa-radius-sm); padding: 3px 8px; font-size: 12px; }
.sa-evidence { border-left: 3px solid var(--teal); padding: 6px 0 2px 10px; margin: 6px 0 4px; overflow-wrap: anywhere; }
.sa-spark { margin: 6px 0; color: var(--teal); }
.sa-spark svg { display: block; max-width: 100%; height: auto; background: var(--n1); border: 1px solid var(--n5); border-radius: var(--sa-radius-sm); }
.sa-thread { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 8px; }
.sa-msg { padding: 8px 10px; border-radius: var(--sa-radius); border: 1px solid var(--n5); background: var(--n1); font-size: 13px; overflow-wrap: anywhere; }
.sa-msg--agent { background: var(--blue-tint); border-color: var(--blue-strong); }
.sa-refs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sa-modes { border: 1px solid var(--n5); border-radius: var(--sa-radius); padding: 8px 10px; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); min-width: 0; }
.sa-modes legend { font-size: 12px; color: var(--n11); padding: 0 4px; }
.sa-mode { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--sa-radius-sm); border: 1px solid var(--n5); background: var(--n2); cursor: pointer; }
.sa-mode:hover { border-color: var(--n7); }
.sa-mode:has(input:checked) { border-color: var(--blue); box-shadow: inset 3px 0 0 var(--blue); }
.sa-mode input { margin-top: 3px; accent-color: var(--blue); }
.sa-mode span { display: flex; flex-direction: column; gap: 2px; }
.sa-mode--paid { border-color: var(--amber-strong); background: var(--amber-tint); }
.sa-mode .sa-consequence { margin: 0; }
.sa-timeline { list-style: none; padding: 0; margin: 0 0 0 5px; border-left: 2px solid var(--n5); }
.sa-timeline li { padding: 3px 0 9px 14px; position: relative; font-size: 13px; overflow-wrap: anywhere; }
.sa-timeline li::before { content: ""; position: absolute; left: -6px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--n7); border: 2px solid var(--n2); }

/* ---- Задачи и запуски, отладка ---- */
.sa-status-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.sa-status-pair > div { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--n5); border-radius: var(--sa-radius); background: var(--n1); min-width: 0; }
.sa-status-pair .sa-badge { align-self: flex-start; }
.sa-progress { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.sa-stages { margin: 0 0 10px; padding-left: 20px; font-size: 13px; }
.sa-stages li { margin: 3px 0; }
.sa-run-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 8px 0; }
.sa-run-action { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--n5); border-radius: var(--sa-radius); background: var(--n2); min-width: 0; }
.sa-run-action .sa-btn { align-self: flex-start; }
.sa-tree { list-style: none; padding-left: 16px; margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.sa-tree li { margin: 4px 0; }
.sa-tree .sa-tree { border-left: 1px dashed var(--n6); margin-left: 4px; }
.sa-span { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; color: var(--n12); }
.sa-span strong { color: var(--n14); }
.sa-span-error { color: var(--red); font-size: 12px; margin: 2px 0; }

/* ---- Шкалы, различия, бюджеты ---- */
.sa-bar { height: 8px; border-radius: 4px; background: var(--n4); overflow: hidden; }
.sa-bar > span { display: block; height: 100%; background: var(--teal); }
.sa-bar > span.is-held { background: var(--amber); }
.sa-bar--stack { display: flex; margin-top: 4px; }
.sa-bar--stack > span { flex: 0 0 auto; }
.sa-diff { font-family: var(--sa-mono); font-size: 12px; background: var(--n1); border: 1px solid var(--n5); border-radius: var(--sa-radius-sm); padding: 8px; overflow: auto; max-height: 360px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sa-diff .add { background: var(--green-tint); color: var(--green); display: block; }
.sa-diff .del { background: var(--red-tint); color: var(--red); display: block; }
.sa-diff .eq { display: block; color: var(--n12); }
.sa-diff-field { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.sa-vars { margin: 0 0 8px; padding-left: 18px; font-size: 13px; }
.sa-mcp-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; padding-left: 18px; margin: 0 0 8px; font-size: 13px; overflow-wrap: anywhere; }
.sa-budget-tree { padding-left: 0; }
.sa-budget-tree .sa-tree { padding-left: 22px; margin-top: 8px; border-left: 1px dashed var(--n6); }
.sa-budget-tree li { margin: 8px 0; }
.sa-budget-node { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 14px; border-radius: var(--sa-radius-sm); border: 1px solid var(--n4); background: var(--n1); }
.sa-budget-node > :is(span:not(.sa-badge), .sa-bar) { flex: 1 1 100%; }
.sa-budget-node .sa-bar { margin: 4px 0; }
.sa-tree li.is-selected > .sa-budget-node { border-color: var(--blue-strong); background: var(--blue-tint); }

/* Сохранённый публичный контент — экранированный текст; длинные URL не расширяют страницу. */
.sa-insights { min-width: 0; }
.sa-insights td { overflow-wrap: anywhere; }
.sa-insight-preview { white-space: pre-wrap; min-width: 160px; max-width: 34rem; max-height: 16rem; overflow: auto; }

/* ---- Страница OAuth-согласия ---- */
.sa-oauth-page { font-family: system-ui, sans-serif; background: var(--n1); color: var(--n13); }
.sa-oauth-box { max-width: 520px; margin: 15vh auto; padding: 24px; border: 1px solid var(--n5); border-radius: 12px; background: var(--n2); }

/* ---- Адаптив ---- */
@media (max-width: 1180px) {
  .sa-split, .sa-overview { grid-template-columns: minmax(0, 1fr); }
  .sa-overview-side { position: static; }
}
@media (max-width: 900px) {
  .sa-shell { gap: 14px; padding: 12px 16px 32px; }
  .sa-nav { margin: 0 -16px; padding: 0 16px; }
  .sa-nav-group { padding: 8px 10px; }
  .sa-view > h2 { font-size: 18px; }
  .sa-filters .sa-field { max-width: none; }
  /* Таблицы превращаются в карточки строк с подписями колонок. */
  .sa-table-wrap { max-height: none; overflow: visible; background: transparent; border: 0; }
  .sa-table thead { display: none; }
  .sa-table, .sa-table tbody, .sa-table tr, .sa-table td { display: block; width: 100%; }
  .sa-table tr { margin-bottom: 8px; padding: 6px 0; border: 1px solid var(--n5); border-radius: var(--sa-radius); background: var(--n2); }
  .sa-table td { border: 0; padding: 3px 12px; }
  .sa-table td::before { content: attr(data-label); display: block; font-size: 11px; color: var(--n10); }
  .sa-table td[data-label=""]::before { display: none; }
  .sa-table .num { text-align: left; white-space: normal; }
  .sa-table tr.is-selected { border-color: var(--blue-strong); }
  .sa-table tr.is-selected td:first-child { box-shadow: none; }
  .sa-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sa-kv dd { margin-bottom: 6px; }
}
@media (max-width: 720px) {
  .sa-overview .sa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sa-card { padding: 12px; }
  .sa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-kpi strong { font-size: 18px; }
  .sa-form { grid-template-columns: minmax(0, 1fr); }
  .sa-filters { padding: 10px; }
  .sa-filters .sa-field { flex-basis: 100%; }
  .sa-actions > .sa-btn { flex: 1 1 auto; }
}
/* Сенсорный ввод: цели не меньше 40px. */
@media (pointer: coarse) {
  #sitesAgentsDashboard { --sa-control: 40px; }
  .sa-nav-item, .sa-nav-group { min-height: 40px; }
  .sa-view details > summary { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-state--loading strong::before { animation: none; }
  #sitesAgentsDashboard *, #sitesAgentsDashboard *::before, #sitesAgentsDashboard *::after { transition: none !important; }
}