/* RemotePanel: responsive composition. All sizes come from design/tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: var(--ui-size); color: var(--text); background: var(--bg); scrollbar-gutter: stable; scroll-padding-block: var(--sp-section) calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-4)); }
body { margin: 0; min-width: 0; font: var(--fw-regular) var(--fs-13)/var(--lh-body) var(--font-ui); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input, select { font-family: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: default; opacity: .5; }
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
:focus:not(:focus-visible) { outline: none; }
/* Заголовки-якоря (tabindex="-1") не должны ловить рамку выделения. */
h1:focus, h2:focus, h3:focus, .section-title:focus { outline: none; }
h1, h2, h3, p { margin: 0; }
h1 { font-family: var(--font-display); font-size: var(--fs-22); }
h2 { font-size: var(--fs-15); }
h3 { font-size: var(--fs-13); }
#theme-character:not([src]) { display: none; }
.ui { position: relative; z-index: var(--z-content); min-height: 100svh; padding-inline-start: var(--rail-w); }
.shell { display: flex; flex-direction: column; gap: var(--sp-section); width: calc(100% - var(--gutter) * 2); max-width: var(--shell); min-height: calc(100svh - var(--viewport-chrome)); margin-inline: auto; padding-block: var(--page-top) var(--sp-section); }
.topbar { display: none; }
.rail { position: fixed; inset: 0 auto 0 0; z-index: var(--z-banner); width: var(--rail-w); display: flex; flex-direction: column; gap: var(--sp-section); padding: var(--sp-5) var(--sp-3); background: var(--surface-1); border-right: 1px solid var(--border); overflow-y: auto; }
.rail > .brand { flex-direction: column; gap: var(--sp-2); text-align: center; padding-block: var(--sp-3); }
.rail .brand-word { font-size: var(--fs-13); }
.rail-nav { display: flex; flex: 1; flex-direction: column; gap: var(--sp-2); }
.rail-action { flex-shrink: 0; }
.page-foot { display: none; }

/* Дэшборд: один блок сводки + короткий журнал, никаких трансляций и списков. */
.dashboard-stack { display: flex; flex-direction: column; gap: var(--sp-section); }
.dashboard-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-panel); min-height: var(--summary-height); padding: var(--sp-panel); }
.dashboard-summary .stat-strip { flex: 1; }
.dashboard-summary .stat { flex: 1; }
.dashboard-summary > .button { flex: 0 0 auto; }
.journal-panel { overflow: hidden; }
#log { min-height: var(--log-min-h); max-height: var(--log-max-h); }
.journal-foot { justify-content: space-between; }
html[data-route="journal"] .journal-panel { flex: 1 1 auto; min-height: 0; max-height: calc(100svh - var(--page-top) - var(--sp-section) - var(--viewport-chrome)); }
html[data-route="journal"] .journal-panel #log { max-height: none; }

/* Одна вместительная таблица; высота зависит от данных, а не от пустого экрана. */
.clients-panel { overflow: hidden; }
.clients-toolbar { margin: var(--sp-4) var(--sp-5); }
#agents { max-height: max(var(--table-min-h), calc(100svh - var(--table-chrome-h))); min-height: 0; scroll-padding-block-start: var(--control-height); }
/* Ширины колонок в сумме всегда меньше 100%: остаток забирает имя клиента.
   Иначе при table-layout: fixed таблица шире панели и кнопка действий
   уезжает за правый край — появляется горизонтальный скролл. */
.clients-table th:nth-child(1) { width: 2.75rem; }
.clients-table td:first-child { overflow: visible; padding-inline-start: var(--sp-4); }
.clients-table .cell-name { gap: var(--sp-3); }
.flag { display: block; width: 20px; height: 15px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px var(--border-soft); }
.cell-country-code, .cell-country-empty { color: var(--muted); font-size: var(--fs-12); letter-spacing: .04em; }
.clients-table .col-os { width: 16%; }
.clients-table .col-version { width: 7.5%; }
.clients-table th:nth-child(5) { width: 10%; }
.clients-table th:nth-child(6) { width: 13%; }
.clients-table th:nth-child(7) { width: 6.5%; }
.clients-table th:nth-child(8) { width: 3.75rem; }
.clients-table th:nth-child(8) { padding-inline: 0 var(--sp-3); }
.clients-table .cell-actions { overflow: visible; padding-inline: 0 var(--sp-3); text-align: right; }
.clients-table .cell-actions .icon-button { width: var(--control-height); height: var(--control-height); vertical-align: middle; }
.cell-version { color: var(--muted); font-variant-numeric: tabular-nums; }
.cell-views { font-variant-numeric: tabular-nums; }
.clients-footer { font-variant-numeric: tabular-nums; }
.clients-footer #devices-fresh { margin-left: auto; }
.clients-empty { border-top: 1px solid var(--border); }

/* Отдельный клиент: метаданные слева, рабочая область просмотра справа.
   Третьей колонки нет — сцена должна получать всё свободное место. */
.client-detail-layout { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.client-side-stack { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.viewer-head-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.audio-source-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); }
.audio-source-switch .button { border: 0; background: transparent; padding: .25rem .75rem; border-radius: var(--r-pill); font-size: var(--fs-12); color: var(--muted); }
.audio-source-switch .button:hover { color: var(--text); }
.audio-source-switch .button[aria-pressed="true"] { background: var(--text); color: var(--panel); }
.client-source-status { padding: 0 var(--sp-4); }
.client-source-status:empty { display: none; }

/* Рабочее пространство клиента: тулбар, сцена, футер. */
.workspace { display: flex; flex-direction: column; min-width: 0; }
.client-viewer .workspace { border-bottom: 1px solid var(--border); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-soft); }
.toolbar-spacer { flex: 1 1 auto; }
.tool-group { display: flex; align-items: center; gap: 2px; min-width: 0; }
.toolbar-separator { width: 1px; height: 1.6rem; margin-inline: var(--sp-2); background: var(--border-soft); }
.source-trigger { display: flex; align-items: center; gap: var(--sp-3); width: min(100%, 23rem); min-width: 0; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); border: 1px solid transparent; border-radius: var(--r-inner); background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.source-trigger:hover { background: var(--surface-2); border-color: var(--border-soft); }
.source-trigger:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.source-icon { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; color: var(--accent); border: 1px solid var(--border-soft); border-radius: var(--r-inner); background: var(--surface-2); }
.source-copy { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
.source-name { font-size: var(--fs-13); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-meta { color: var(--muted); font-size: var(--fs-11); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-trigger > .icon { flex: 0 0 auto; color: var(--muted); }
.tool-btn { background: transparent; border-color: transparent; color: var(--muted); }
.tool-btn.on, .tool-btn[aria-pressed="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-1)); border-color: color-mix(in srgb, var(--accent) 18%, var(--border)); }
.stage { position: relative; display: grid; place-items: center; min-height: var(--viewer-empty-h); padding: var(--sp-5); overflow: hidden; background: linear-gradient(150deg, color-mix(in srgb, var(--surface-2) 96%, var(--accent)), var(--bg) 78%); }
.stage-note { position: absolute; top: var(--sp-3); left: var(--sp-4); color: var(--muted); font-size: var(--fs-11); }
.stage-note:empty { display: none; }
.stage > .streams { width: 100%; padding: 0; }
.preview-foot { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-soft); color: var(--muted); font-size: var(--fs-11); }
.preview-foot .foot-icon { display: inline-flex; color: var(--muted); }
.preview-foot #stream-count { margin-left: auto; font-variant-numeric: tabular-nums; }
#client-workspace:fullscreen { display: flex; flex-direction: column; background: var(--panel); }
#client-workspace:fullscreen .stage { flex: 1 1 auto; min-height: 0; }

/* Диалог выбора источника. */
#source-dialog { width: min(36rem, calc(100% - 2rem)); max-height: calc(100dvh - 3rem); margin: auto; padding: 0; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); color: var(--text); box-shadow: var(--shadow-float); overflow: hidden; }
#source-dialog:not([open]) { display: none; }
#source-dialog[open] { display: flex; flex-direction: column; }
#source-dialog::backdrop { background: var(--overlay); }
.source-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: var(--sp-4) var(--sp-5) 0; padding: 2px; border: 1px solid var(--border-soft); border-radius: var(--r-inner); background: var(--surface-2); }
.source-tab { min-width: 0; min-height: 2.5rem; padding: var(--sp-2); border: 0; border-radius: calc(var(--r-inner) - 2px); background: transparent; color: var(--muted); font-size: var(--fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.source-tab[aria-selected="true"] { background: var(--text); color: var(--panel); }
.source-tab small { margin-left: 2px; opacity: .7; font-size: var(--fs-11); }
.source-search { margin: var(--sp-3) var(--sp-5); }
.source-results { display: grid; gap: var(--sp-2); min-height: 0; padding: 0 var(--sp-5) var(--sp-4); overflow: auto; scrollbar-width: thin; }
.source-choice { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-width: 0; padding: var(--sp-3); border: 1px solid var(--border-soft); border-radius: var(--r-inner); background: transparent; color: var(--text); text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.source-choice:hover { background: var(--surface-2); }
.source-choice[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, var(--surface-1)); }
.source-choice .source-icon { width: 2.1rem; height: 2.1rem; }
.choice-copy { flex: 1; min-width: 0; }
.choice-copy strong { display: block; font-size: var(--fs-13); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice-copy span { display: block; color: var(--muted); font-size: var(--fs-11); font-variant-numeric: tabular-nums; }
.choice-tick { display: inline-flex; color: var(--accent); opacity: 0; }
.source-choice[aria-pressed="true"] .choice-tick { opacity: 1; }
.client-meta-panel { min-width: 0; }
.streams-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); min-height: var(--viewer-empty-h); padding: var(--sp-panel); text-align: center; }
.streams-empty > .icon { width: var(--icon-lg); height: var(--icon-lg); color: var(--muted); }
.streams-empty p { max-width: var(--copy-width); color: var(--muted); font-size: var(--fs-13); }
.client-viewer { min-width: 0; }
#client-missing { border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); }

/* История активности: группировка ввода по окнам и браузерная история. */
.client-activity { margin-top: var(--sp-5); min-width: 0; }
.activity-filters { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-4); border-bottom: 1px solid var(--border); }
.activity-filters .input { flex: 1 1 16rem; min-width: 0; }
.activity-filters .select { flex: 0 1 13rem; min-width: 0; }
.activity-list { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); max-height: 32rem; overflow: auto; }
.activity-empty { color: var(--muted); font-size: var(--fs-13); }
.activity-story { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border-soft); border-radius: var(--r-panel); background: var(--surface-2); }
.story-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-12); color: var(--muted); }
.story-time { font-variant-numeric: tabular-nums; }
.story-app { color: var(--text); font-weight: var(--fw-medium); }
.story-window, .story-field, .story-layout { padding: 1px var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-kbd); background: var(--surface-1); }
.story-text { font-family: Consolas, "Cascadia Mono", monospace; font-size: var(--fs-13); line-height: var(--lh-snug); white-space: pre-wrap; overflow-wrap: anywhere; }
.story-keys { font-size: var(--fs-11); color: var(--muted); overflow-wrap: anywhere; }
.activity-table-wrap { overflow: auto; }
.activity-table { width: 100%; border-collapse: collapse; font-size: var(--fs-12); }
.activity-table th, .activity-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: top; }
.activity-table th { position: sticky; top: 0; background: var(--surface-3); color: var(--muted); font-weight: var(--fw-medium); white-space: nowrap; }
.activity-table td { overflow-wrap: anywhere; }
.activity-table .mono { font-family: Consolas, "Cascadia Mono", monospace; white-space: nowrap; }
.activity-link { color: var(--accent, var(--text)); text-decoration: none; }
.activity-link:hover { text-decoration: underline; }

/* Настройки и билдер не превращаются в поля ввода шириной в монитор. */
html:is([data-route="settings"], [data-route="security"]) .shell { max-width: var(--settings-width); }
.settings-stack, .security-stack { display: flex; flex-direction: column; gap: var(--sp-5); }
.security-form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); padding: var(--sp-panel); }
.security-form .field { width: min(100%, var(--form-width)); }
.session-foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); }
.session-foot .caption { flex: 1; }
html[data-route="builder"] .shell { max-width: var(--builder-width); }
.builder-empty { min-height: var(--builder-height); }

html[data-route="login"] .shell { padding-block: var(--sp-5); }
.login-wrap { display: flex; }
.login-card { width: min(100%, var(--dialog-width)); }
.login-head { padding: var(--sp-panel); border-bottom: 1px solid var(--border); border-radius: var(--r-panel) var(--r-panel) 0 0; background: var(--surface-3); text-align: center; }
.login-head .brand { flex-direction: column; margin-bottom: var(--sp-5); }
.login-head .brand-mark { width: var(--logo-login); height: var(--logo-login); }
.login-head .brand-word { display: none; }
.login-head h1 { font-size: var(--fs-22); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.login-head p { margin-top: var(--sp-3); color: var(--muted); font-size: var(--fs-12); }
.login-form { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-panel); }
.login-form .form-actions { flex-direction: column; align-items: stretch; }

#appearance-dialog { width: min(var(--dialog-width), calc(100% - var(--sp-5))); max-height: calc(100svh - var(--sp-5)); margin: auto; padding: 0; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-dialog); background: var(--surface-1); color: var(--text); box-shadow: var(--shadow); }
#appearance-dialog::backdrop { background: var(--overlay); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5); }
.dialog-heading h2 { font-family: var(--font-display); font-size: var(--fs-17); }
.dialog-heading p { margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-12); }
.dialog-heading .icon-button { border-color: transparent; background: transparent; }
.theme-fieldset { margin: 0; min-width: 0; padding: 0 var(--sp-5) var(--sp-5); border: 0; }
.theme-fieldset legend { margin-bottom: var(--sp-3); padding: 0; color: var(--muted); font-size: var(--fs-12); }
.motion-setting { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5); border-top: 1px solid var(--border); }
.motion-setting label { cursor: pointer; font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.motion-setting p { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-12); }
.reduced-motion-note { margin: 0 var(--sp-5) var(--sp-4); padding: var(--sp-3); border-radius: var(--r-inner); background: var(--surface-2); color: var(--muted); font-size: var(--fs-12); }
.dialog-foot { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: var(--fs-11); }
.connection-notice { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--error); border-radius: var(--r-inner); color: var(--error); background: var(--error-soft); }
.connection-notice > div { flex: 1; min-width: 0; }
.connection-notice strong { font-size: var(--fs-13); }
.connection-notice p { margin-top: var(--sp-1); font-size: var(--fs-12); }

/* --- Заполнение высоких экранов (QHD/4K) --------------------------------------
   Замеры до правки: на 2560x1440 под содержимым пустовало 552 px, на 3840x2160
   до 1521 px. У каждого раздела теперь один «поглотитель» свободной высоты, и
   пустота уходит внутрь рамочной панели, а не висит фоном под страницей. */
#overview, #clients, #client-detail, #settings, #security, #builder, #login { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#overview > .section-body, #clients > .section-body, #client-detail > .section-body,
#settings > .section-body, #security > .section-body,
#builder > .section-body, #login > .section-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.journal-panel { display: flex; flex-direction: column; }
.journal-panel > .panel-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.journal-panel #log { flex: 1 1 auto; min-height: var(--log-min-h); }
html[data-route="overview"] .journal-panel { flex: 1 1 auto; min-height: var(--journal-min-h); }
/* Панель клиентов по высоте содержимого: при одном-двух клиентах не
   растягиваем её на весь экран пустотой. Скролл появляется только тогда,
   когда строк реально больше, чем влезает. */
html[data-route="clients"] .clients-panel { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
html[data-route="clients"] #agents { flex: 0 1 auto; max-height: calc(100svh - var(--table-chrome-h)); }
html[data-route="client"] .client-detail-layout { flex: 1 1 auto; min-height: 0; align-items: stretch; }
html[data-route="client"] .client-meta-panel { align-self: start; }
html[data-route="client"] .client-viewer { display: flex; flex-direction: column; min-height: 0; }
html[data-route="client"] #streams-empty, html[data-route="client"] #streams { flex: 1 1 auto; min-height: 0; }
html[data-route="builder"] .builder-panel { flex: 1 1 auto; display: flex; flex-direction: column; }
html:is([data-route="settings"], [data-route="security"]) .settings-stack { flex: 1 1 auto; min-height: 0; }
html:is([data-route="settings"], [data-route="security"]) .settings-stack > .panel:last-of-type { flex: 1 1 auto; min-height: 0; }
.login-wrap { flex: 1 1 auto; align-items: center; justify-content: center; min-height: var(--login-min-h); }

/* Сводка установки в карточке клиента: строка «метод — результат». */
.client-install-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.client-install-line:last-child { margin-bottom: 0; }
.client-install-name { color: var(--muted); font-size: var(--fs-12); }

@media (max-width: 1599px) and (min-width: 1100px) {
  .client-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .client-facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); }
  .client-facts dt { grid-row: 1; }
  .client-facts dd { grid-row: 2; margin: 0; }
  .dashboard-summary { flex-wrap: wrap; }
  .dashboard-summary > .button { margin-left: auto; }
}
@media (max-width: 1099px) {
  .ui { padding-inline-start: 0; padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }
  .topbar { display: flex; align-items: center; min-height: var(--topbar-h); padding-inline: var(--gutter); }
  .topbar .brand-mark { width: var(--logo-mobile); height: var(--logo-mobile); }
  .rail { inset: auto 0 0 0; width: auto; height: calc(var(--tabbar-h) + var(--safe-bottom)); padding: var(--sp-1) var(--sp-2) calc(var(--sp-1) + var(--safe-bottom)); gap: var(--sp-1); flex-direction: row; border-top: 1px solid var(--border); border-right: 0; overflow: visible; }
  .rail > .brand { display: none; }
  .rail-nav { flex: 4; flex-direction: row; gap: var(--sp-1); min-width: 0; }
  .rail-item { flex: 1 1 0; min-width: 0; padding: var(--sp-1); flex-direction: column; justify-content: center; gap: var(--sp-1); font-size: var(--fs-11); }
  .rail-action { flex: 1 1 0; }
  .rail-item[aria-current="page"]::before { top: 0; bottom: auto; left: 25%; right: 25%; width: auto; height: var(--nav-marker); }
  .dashboard-summary { flex-direction: column; align-items: stretch; }
  .dashboard-summary > .button { align-self: flex-start; }
  .client-detail-layout { grid-template-columns: minmax(0, 1fr); }
  .client-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-3); }
  .client-facts dd { margin: 0; }
  .clients-table .col-os, .clients-table .cell-os,
  .clients-table .col-version, .clients-table .cell-version,
  .clients-table th:nth-child(7), .clients-table .cell-views { display: none; }
  .clients-table th:nth-child(5) { width: 22%; }
  .clients-table th:nth-child(6) { width: 28%; }
  .cell-meta-extra { display: inline; }
  .setting-row { align-items: flex-start; flex-direction: column; gap: var(--sp-3); }
  .setting-control { width: 100%; }
  .setting-control:has(> .switch) { width: auto; }
}
@media (max-width: 700px) {
  html { scrollbar-gutter: auto; }
  .section-head { gap: var(--sp-3); }
  .dashboard-summary .stat-strip { flex-wrap: wrap; gap: var(--sp-5); }
  .dashboard-summary .stat-divider { display: none; }
  .dashboard-summary .stat { flex: 1 1 40%; }
  .clients-table { min-width: var(--table-mobile-min); }
  .clients-footer { gap: var(--sp-2) var(--sp-4); }
  .clients-footer #devices-fresh { margin-left: 0; }
  .pagination { width: 100%; justify-content: space-between; }
  .bulk-actions { margin-left: 0; }
  .log .line { grid-template-columns: var(--log-time-w) minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); }
  .log-message { grid-column: 2; grid-row: 1 / span 2; }
  .log-level { grid-column: 1; grid-row: 2; }
  .session-grid { grid-template-columns: minmax(0, 1fr); }
  .kv-key { padding-bottom: 0; border-bottom: 0; }
  .theme-choices { width: 100%; }
  .theme-choices button { flex: 1 1 45%; }
  .connection-notice { flex-wrap: wrap; }
  .connection-notice > .button { width: 100%; }
  .journal-actions { gap: 0; }
  .journal-link .icon { display: none; }
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Авторизация: до входа виден только экран входа, без каркаса панели. */
html[data-auth="pending"] .rail,
html[data-auth="guest"] .rail,
html[data-auth="pending"] .topbar,
html[data-auth="guest"] .topbar,
html[data-auth="pending"] .page-foot,
html[data-auth="guest"] .page-foot,
html[data-auth="pending"] .connection-notice,
html[data-auth="guest"] .connection-notice { display: none !important; }
/* Любой раздел панели скрыт, пока сессия не подтверждена. */
html[data-auth="pending"] .section:not(#login),
html[data-auth="guest"] .section:not(#login) { display: none !important; }
body.auth-locked .rail,
body.auth-locked .topbar,
body.auth-locked .page-foot,
body.auth-locked .connection-notice,
body.auth-locked .section:not(#login) { display: none !important; }
html[data-auth="pending"] .ui,
html[data-auth="guest"] .ui { padding-inline-start: 0; }
@media (max-width: 767px) {
  html[data-auth="pending"] .ui,
  html[data-auth="guest"] .ui { padding-bottom: 0; }
}


/* --- «Разное»: звук, троллинг, сообщение, Windows, прокси, Drop & Execute --- */
.client-other { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.client-other-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--sp-5); align-items: start; }
.client-other-grid > .panel { min-width: 0; }
.audio-tools, .msg-tools, .sysext-tools, .proxy-tools, .dropx-tools { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); }
.audio-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.audio-row .select, .audio-row .input { flex: 1 1 12rem; min-width: 0; }
.audio-row .setting-label { flex: 0 0 10rem; }
.audio-actions { justify-content: space-between; }
/* Библиотека звуков: ровно три строки в окне, дальше скролл. */
.sound-block { display: flex; flex-direction: column; gap: var(--sp-2); }
.sound-block .caption { margin: 0; }
.sound-list { display: flex; flex-direction: column; flex: none; max-height: calc(2.6rem * 3); overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--surface-1); }
.sound-list:empty { display: none; }
.sound-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 2rem 2rem 2rem; align-items: center; gap: var(--sp-2); flex: none; height: 2.6rem; padding: 0 var(--sp-2) 0 var(--sp-3); border-bottom: 1px solid var(--border); }
.sound-row:last-child { border-bottom: 0; }
.sound-row:hover { background: var(--surface-2); }
.sound-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-13); }
.sound-size { color: var(--muted); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.sound-row .icon-button { width: 1.85rem; height: 1.85rem; }
.sound-row .icon-button .icon { width: 14px; height: 14px; }
.volume-line { display: flex; flex: 1 1 12rem; align-items: center; gap: var(--sp-3); min-width: 0; }
.volume-range { flex: 1; min-width: 0; accent-color: var(--accent); }
.volume-value { min-width: 3.5rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.audio-wave { margin: 0; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--surface-inline); }
.audio-wave canvas { display: block; width: 100%; height: 4rem; }
.audio-wave figcaption { margin-top: var(--sp-2); }
/* Полная настройка аудио: выход и микрофон с каналами. */
.audio-eq { display: grid; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--surface-2); }
.audio-eq[hidden] { display: none; }
.audio-eq-group { display: grid; gap: var(--sp-2); min-width: 0; }
.audio-eq-group + .audio-eq-group { padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.audio-eq-head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.audio-eq-head .caption { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.audio-eq-row { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.audio-eq-row[hidden] { display: none; }
.audio-eq-label { flex: 0 0 6rem; color: var(--muted); font-size: var(--fs-12); }
.audio-eq-row .volume-range { flex: 1 1 auto; min-width: 0; }
.audio-eq-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.audio-eq-actions .caption { flex: 1 1 auto; min-width: 0; }
.troll-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-2); }
.troll-row { display: flex; gap: var(--sp-2); }
.troll-row .input { flex: 1; min-width: 0; }

/* Системное сообщение: поля слева, живое превью окна справа. */
.msg-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); }
/* Блокнот: превью не нужен, поля на всю ширину. */
.np-tools { grid-template-columns: minmax(0, 1fr); }
.msg-fields { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.msg-row { display: flex; align-items: center; gap: var(--sp-3); }
.msg-row .setting-label { flex: 0 0 5rem; }
.msg-row .select { flex: 1; min-width: 0; }
.msg-text { resize: vertical; min-height: 4.5rem; }
.msg-actions { margin-top: var(--sp-2); }
.msg-preview { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.msg-window { display: flex; flex-direction: column; min-height: 12rem; border: 1px solid var(--control-border); border-radius: var(--r-inner); background: var(--surface-1); box-shadow: var(--shadow); overflow: hidden; }
.msg-window-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--surface-3); border-bottom: 1px solid var(--border); }
.msg-window-title { font-weight: var(--fw-semibold); font-size: var(--fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-window-x { color: var(--muted); }
.msg-window-body { display: flex; flex: 1; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4); }
.msg-window-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; font-weight: var(--fw-bold); font-size: var(--fs-17); background: var(--surface-3); color: var(--text); }
.msg-icon[data-icon="warning"] { background: var(--warning-soft); color: var(--warning); }
.msg-icon[data-icon="error"] { background: var(--error-soft); color: var(--error); }
.msg-icon[data-icon="question"] { background: var(--surface-3); color: var(--text); }
.msg-window-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
.msg-window-buttons > * { min-width: 5.5rem; height: 2rem; padding-inline: var(--sp-3); border: 1px solid var(--control-border); border-radius: var(--r-inner); background: var(--surface-2); color: var(--text); font-size: var(--fs-12); display: inline-flex; align-items: center; justify-content: center; }
.msg-window-buttons > [data-default="1"] { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus) inset; }

/* Windows: сетка действий, поворот, устройства. */
.sysext-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-2); }
.sysext-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sysext-row .select { flex: 0 1 8rem; }
.sysext-devices { display: flex; flex-direction: column; gap: 1px; max-height: 20rem; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-inner); }
.sysext-device { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); background: var(--surface-inline); }
.sysext-device-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sysext-device-class { color: var(--muted); font-size: var(--fs-11); }

/* Реверс-прокси. */
.proxy-row { display: flex; gap: var(--sp-2); }
.proxy-row .input { flex: 1; min-width: 0; }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: var(--fs-11); overflow-wrap: anywhere; }

/* Живые графики производительности. */
.perf-card { margin: var(--sp-4) var(--sp-5) var(--sp-5); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--surface-inline); }
.perf-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.perf-card canvas { display: block; width: 100%; height: 11rem; }
.perf-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-11); color: var(--muted); }
.perf-legend span { display: inline-flex; align-items: center; gap: var(--sp-2); font-variant-numeric: tabular-nums; }
.perf-legend i { width: .625rem; height: .125rem; border-radius: var(--r-pill); background: currentColor; }
.perf-legend [data-series="cpu"] { color: #7FB6FF; }
.perf-legend [data-series="ram"] { color: #6DD3AC; }
.perf-legend [data-series="net"] { color: #E2B581; }
.perf-legend [data-series="disk"] { color: #C7A3FF; }

/* Управление мышью и клавиатурой из просмотра. */
.viewer-input-bar { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border-soft); background: var(--surface-inline); }
.viewer-input-bar[data-active="true"] { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus) inset; }
.viewer-input-bar .caption { flex: 0 0 auto; }
.stream.is-captured .frame { outline: 2px solid var(--focus); outline-offset: -2px; cursor: crosshair; touch-action: none; user-select: none; }
/* Кадр — интерактивная поверхность, а не картинка для перетаскивания в ОС. */
.frame-img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; pointer-events: none; }
.frame { touch-action: none; }
.frame:active { cursor: crosshair; }

/* Drop & Execute. */
.dropx-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.dropx-row .input { flex: 1 1 10rem; min-width: 0; }
.dropx-file { color: var(--muted); font-size: var(--fs-12); overflow-wrap: anywhere; }

/* --- Карточка клиента: сегментированный таб-бар ----------------------- */
.client-tabs { position: relative; display: flex; align-items: center; gap: var(--sp-1); margin: 0 var(--sp-5) var(--sp-4); padding: var(--sp-1); border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-inline); overflow-x: auto; scrollbar-width: none; }
.client-tabs::-webkit-scrollbar { display: none; }
.client-tab { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: var(--fw-medium) var(--fs-13)/1 var(--font-ui); white-space: nowrap; }
.client-tab .icon { width: 16px; height: 16px; flex: none; }
.client-tab:not(.client-tab-open):hover { color: var(--text); }
/* Подложка под вкладкой — var(--text), поэтому текст красим в цвет поверхности.
   Ни подложка, ни цвет не анимируются: пока подложка едет, подпись оказывается
   на чужом фоне и пропадает. Переключение — один кадр, зато всегда читаемо. */
.client-tab[aria-selected="true"] { color: var(--panel); font-weight: var(--fw-semibold); }
.client-tab:active { transform: scale(var(--press)); }
.client-tab-open { flex: 0 0 auto; margin-left: auto; width: 2.5rem; padding: 0; color: var(--muted); }
.client-tab-open:hover { color: var(--text); background: var(--surface-hover); }
.client-tab[aria-selected="true"]:focus-visible { outline-color: var(--text); }
/* Подложка активной вкладки: одна на весь бар, едет за выбором. */
.client-tab-marker { position: absolute; top: var(--sp-1); left: 0; z-index: 0; width: 0; height: 2.5rem; border-radius: var(--r-pill); background: var(--text); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); }

/* --- Тумблер «Авто»: маленький переключатель в шапке панели ----------- */
.auto-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--control-height); padding: 0 var(--sp-3) 0 var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted); font-size: var(--fs-11); font-weight: var(--fw-medium); cursor: pointer; user-select: none; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.auto-toggle:active { transform: scale(var(--press)); }
.auto-toggle input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.auto-toggle-dot { position: relative; flex: 0 0 auto; width: 1.5rem; height: .875rem; border: 1px solid var(--control-border); border-radius: var(--r-pill); background: var(--surface-3); transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.auto-toggle-dot::after { content: ""; position: absolute; top: 50%; left: 1px; width: .625rem; height: .625rem; margin-top: -.3125rem; border-radius: 50%; background: var(--muted); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.auto-toggle input:checked + .auto-toggle-dot { border-color: var(--success); background: var(--success-soft); }
.auto-toggle input:checked + .auto-toggle-dot::after { transform: translateX(.625rem); background: var(--success); }
.auto-toggle:has(input:checked) { color: var(--text); border-color: var(--border-hover); }
.auto-toggle:hover { border-color: var(--border-hover); color: var(--text); }
.auto-toggle:has(input:focus-visible) { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.auto-toggle:has(input:disabled) { opacity: .5; cursor: default; }

/* --- Умная подсказка вместо нативного title --------------------------- */
.rp-tip { position: fixed; z-index: calc(var(--z-overlay) + 1); max-width: 22rem; padding: .375rem .5rem; border: 1px solid var(--border); border-radius: var(--r-kbd); background: var(--surface-3); color: var(--text); font-size: var(--fs-11); line-height: var(--lh-snug); box-shadow: var(--shadow-float); pointer-events: none; opacity: 0; transform: scale(.96); transform-origin: 50% 100%; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.rp-tip[data-side="bottom"] { transform-origin: 50% 0; }
.rp-tip[data-visible="true"] { opacity: 1; transform: none; }
html[data-motion="off"] .rp-tip { transition: none; }

/* --- Отдельное окно вкладки (?pane=…): только сама панель -------------- */
html.is-focus .rail,
html.is-focus .topbar,
html.is-focus .page-foot,
html.is-focus .connection-notice,
html.is-focus .section-head,
html.is-focus .client-tabs,
html.is-focus .client-debug,
html.is-focus .section:not(#client-detail) { display: none !important; }
html.is-focus .ui { padding-inline-start: 0; padding-bottom: 0; }
html.is-focus .shell { padding-block: var(--sp-4); }
html.is-focus .section-body { padding-inline: var(--sp-4); }

/* --- Появление вкладки и карточки просмотра --------------------------- */
@keyframes pane-enter { from { opacity: 0; transform: translate3d(0, -10px, 0); } to { opacity: 1; transform: none; } }
@keyframes stream-enter { from { opacity: 0; transform: scale(.98) translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
/* Один сценарий на весь интерфейс: раздел, вкладка карточки и раздел
   билдера появляются сверху вниз, а не мигают готовым содержимым. */
html[data-motion="on"] :is(.section, .client-pane, .builder-pane, [data-client-pane]):not([hidden]) {
  animation: pane-enter 260ms var(--ease-out) both;
}
html[data-motion="on"] .stream { animation: stream-enter var(--dur-base) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  html[data-motion="on"] :is(.section, .client-pane, .builder-pane, [data-client-pane]):not([hidden]),
  html[data-motion="on"] .stream { animation: none; }
}

/* --- Пресеты качества на карточке просмотра --------------------------- */
.stream-head { flex-wrap: wrap; }
.stream-presets { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--surface-2); }
.stream-chip { appearance: none; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-11); padding: 2px 9px; cursor: pointer; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.stream-chip:hover { color: var(--text); background: var(--surface-3); }
.stream-chip[aria-pressed="true"] { background: var(--text); color: var(--panel); font-weight: var(--fw-semibold); }
.stream-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.stream-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.stream-full { border-color: transparent; background: transparent; color: var(--muted); }

/* --- Полный экран кадра: только картинка, без полос и кнопок ---------- */
.stream:fullscreen { display: flex; flex-direction: column; border: 0; border-radius: 0; background: #000; }
.stream:fullscreen::backdrop { background: #000; }
.stream:fullscreen .stream-head,
.stream:fullscreen .stream-foot { display: none; }
.stream:fullscreen .frame { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0; aspect-ratio: auto; max-height: none; background: #000; }
.stream:fullscreen .frame-img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 900px) { .msg-tools { grid-template-columns: minmax(0, 1fr); } }

/* --- Свёрнутое меню: остаются только иконки --------------------------- */
#rail-toggle { margin-top: auto; }
.rail, .ui { transition: width var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out); }
html[data-rail="mini"] .rail { width: var(--rail-mini); padding-inline: var(--sp-2); }
html[data-rail="mini"] .ui { padding-inline-start: var(--rail-mini); }
html[data-rail="mini"] .rail-item { justify-content: center; padding-inline: 0; }
html[data-rail="mini"] .brand { justify-content: center; }
html[data-rail="mini"] .rail-label,
html[data-rail="mini"] .brand-word { display: none; }
html[data-rail="mini"] #rail-toggle .icon { transform: rotate(180deg); }
html[data-motion="off"] .rail,
html[data-motion="off"] .ui { transition: none; }
@media (prefers-reduced-motion: reduce) { .rail, .ui { transition: none; } }

/* --- Чат с клиентом ---------------------------------------------------- */
.chat-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.chat-toolbar .toolbar-spacer { flex: 1 1 auto; }
.chat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.chat-name { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.chat-name-label { color: var(--muted); font-size: var(--fs-11); white-space: nowrap; }
.chat-name-input { width: 12rem; min-width: 0; }
.chat-status { margin-left: auto; color: var(--muted); }
.chat-body { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 16rem; max-height: 52vh; overflow-y: auto; padding: var(--sp-4); background: var(--surface-3); scrollbar-gutter: stable; }
.chat-empty { margin: auto; color: var(--subtle); font-size: var(--fs-13); text-align: center; }
.chat-msg { display: flex; flex-direction: column; gap: 2px; max-width: min(78%, 40rem); }
.chat-msg-own { align-self: flex-end; align-items: flex-end; }
.chat-msg-client { align-self: flex-start; align-items: flex-start; }
.chat-bubble { padding: .5rem .75rem; border-radius: var(--r-inner); font-size: var(--fs-13); line-height: var(--lh-body); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.chat-msg-own .chat-bubble { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; }
.chat-msg-client .chat-bubble { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-meta-line { color: var(--subtle); font-size: var(--fs-11); }
.chat-bubble-media { padding: .35rem; display: flex; flex-direction: column; gap: .35rem; }
.chat-image { display: block; width: 100%; max-width: 22rem; height: auto; border-radius: calc(var(--r-inner) - 3px); }
.chat-caption { font-size: var(--fs-12); opacity: .92; }
.chat-composer { display: flex; align-items: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); }
.chat-input { flex: 1 1 auto; min-width: 0; min-height: calc(var(--control-height) + 2px); max-height: 10rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-13); line-height: var(--lh-body); resize: none; overflow-y: auto; }
.chat-input:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); border-color: var(--border-hover); }
.chat-send { flex: 0 0 auto; width: var(--control-height); padding: 0; justify-content: center; }
.chat-send .icon { width: 1.05rem; height: 1.05rem; }
.chat-attach { position: relative; flex: 0 0 auto; align-self: center; }
.chat-attach[hidden] { display: none; }
.chat-attach-preview { display: block; width: 2.5rem; height: 2.5rem; object-fit: cover; border: 1px solid var(--border); border-radius: var(--r-inner); }
.chat-attach-remove { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; padding: 0; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-1); color: var(--muted); cursor: pointer; }
.chat-attach-remove:hover { color: var(--text); border-color: var(--border-hover); }
.chat-attach-remove .icon { width: .7rem; height: .7rem; }
@media (max-width: 720px) {
  .chat-meta { flex-direction: column; align-items: stretch; }
  .chat-name-input { width: 100%; }
  .chat-status { margin-left: 0; }
  .chat-msg { max-width: 90%; }
}

/* --- Диспетчер процессов: дерево, иконки, меню и свойства -------------- */
.proc-view { gap: var(--sp-3); }
.proc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.proc-mode { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); }
.proc-mode .button { border: 0; background: transparent; padding: .25rem .7rem; font-size: var(--fs-12); color: var(--muted); border-radius: var(--r-pill); }
.proc-mode .button[aria-pressed="true"] { background: var(--text); color: var(--panel); }

.proc-table { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--surface-1); }
.proc-head, .proc-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 4rem 6rem 7.5rem; align-items: center; }
.proc-head { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface-3); border-bottom: 1px solid var(--border); }
.proc-col { min-width: 0; color: var(--muted); font-size: var(--fs-11); font-weight: var(--fw-semibold); }
.proc-col .proc-sort { min-height: 2rem; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-11); }
.proc-col-num .proc-sort { justify-content: flex-end; }
.proc-col-pid .proc-sort { justify-content: flex-end; }
.proc-col-state { padding: var(--sp-2) var(--sp-3); }
.proc-col[aria-sort] .proc-sort { color: var(--text); }
.proc-col[aria-sort] .proc-sort .icon { opacity: 1; color: var(--text); }

.proc-rows { display: flex; flex-direction: column; max-height: 30rem; overflow: auto; scrollbar-width: thin; }
.proc-row { min-height: 2.25rem; border-bottom: 1px solid var(--border-soft); cursor: default; }
.proc-row:last-child { border-bottom: 0; }
.proc-row:hover { background: var(--surface-hover); }
.proc-row[data-selected="true"] { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.proc-row:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: -2px; }
.proc-cell { min-width: 0; }

.proc-main { display: flex; align-items: center; gap: var(--sp-2); padding-inline: calc(var(--sp-2) + var(--proc-depth, 0) * .8rem) var(--sp-2); }
.proc-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; padding: 0; border: 0; background: transparent; color: var(--muted); }
.proc-toggle .icon { width: .8rem; height: .8rem; transform: rotate(-90deg); transition: transform var(--dur-fast) var(--ease-out); }
.proc-toggle[data-open="true"] .icon { transform: none; }
.proc-toggle:disabled { visibility: hidden; }
html[data-motion="off"] .proc-toggle .icon { transition: none; }

.proc-icon-slot { display: inline-grid; place-items: center; flex: 0 0 auto; width: 16px; height: 16px; }
.proc-icon-slot > * { grid-area: 1 / 1; }
.proc-icon { width: 16px; height: 16px; object-fit: contain; }
.proc-icon-fallback { display: inline-flex; color: var(--subtle); }
.proc-icon-fallback .icon { width: 14px; height: 14px; }
.proc-icon-slot:has(img[src]) .proc-icon-fallback { display: none; }

.proc-main-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.proc-name { font-size: var(--fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proc-path { font-size: var(--fs-11); color: var(--subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proc-row[data-frozen="true"] .proc-name { opacity: .75; font-style: italic; }

.proc-num { padding-inline: var(--sp-2); font-size: var(--fs-11); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.proc-cpu[data-hot="true"] { color: var(--warning); }
.proc-state { padding-inline: var(--sp-2); font-size: var(--fs-11); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proc-state[data-frozen="true"] { color: var(--warning); }
.proc-empty { padding: var(--sp-4); }

.proc-menu { position: fixed; z-index: calc(var(--z-overlay) + 2); min-width: 15rem; max-width: 22rem; padding: var(--sp-1); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-1); box-shadow: var(--shadow-float); }
.proc-menu-head { padding: var(--sp-2) var(--sp-3); color: var(--subtle); font-size: var(--fs-11); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proc-menu-item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: .4rem var(--sp-3); border: 0; border-radius: var(--r-kbd); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-12); text-align: left; }
.proc-menu-item:hover:not(:disabled) { background: var(--surface-hover); }
.proc-menu-item:disabled { opacity: .45; }
.proc-menu-item .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--muted); }
.proc-menu-sep { height: 1px; margin: var(--sp-1) var(--sp-2); background: var(--border-soft); }

.proc-props { width: min(38rem, calc(100% - 2rem)); margin: auto; padding: 0; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); color: var(--text); box-shadow: var(--shadow-float); }
.proc-props:not([open]) { display: none; }
.proc-props::backdrop { background: var(--overlay); }
.proc-props .dialog-heading h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proc-props .dialog-heading .icon-button { margin-left: auto; }
.proc-props-list { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); max-height: min(60vh, 32rem); margin: 0; padding: var(--sp-3) var(--sp-5) var(--sp-5); overflow: auto; }
.proc-props-list dt { color: var(--muted); font-size: var(--fs-11); }
.proc-props-list dd { margin: 0; min-width: 0; font-size: var(--fs-12); overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .proc-head, .proc-row { grid-template-columns: minmax(0, 1fr) 4rem 3.5rem 5rem; }
  .proc-col-state, .proc-state { display: none; }
}


/* --- Проводник «Файлы»: две панели, крошки, список, меню ---------------- */
/* Секция собирается заново из files.js, поэтому тело панели живёт без
   отступов: у проводника своя сетка «дерево + список + строка состояния». */
.client-pane-body.fx-body { display: grid; gap: 0; padding: 0; }

.fx-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.fx-nav, .fx-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.fx-actions { margin-left: auto; }

.fx-address { display: flex; align-items: center; gap: var(--sp-2); flex: 1 1 18rem; min-width: 0; min-height: var(--control-height); padding: 0 var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--surface-2); }
.fx-address:hover { border-color: var(--border-hover); }
.fx-address > .icon { flex: 0 0 auto; color: var(--muted); }
.fx-crumbs { display: flex; align-items: center; gap: 1px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.fx-crumb { min-width: 0; max-width: 16rem; padding: .25rem .4rem; border: 0; border-radius: var(--r-kbd); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-crumb:hover { background: var(--surface-hover); }
.fx-crumb-empty { color: var(--muted); }
.fx-sep { flex: 0 0 auto; color: var(--subtle); font-size: var(--fs-12); }
.fx-path-input { display: none; width: 100%; min-height: 2rem; padding: 0; border: 0; background: transparent; }
.fx-address[data-editing="true"] { padding-inline: var(--sp-3); }
.fx-address[data-editing="true"] .fx-crumbs,
.fx-address[data-editing="true"] > .icon { display: none; }
.fx-address[data-editing="true"] .fx-path-input { display: block; }

.fx-main { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); min-height: 24rem; height: clamp(24rem, 58vh, 46rem); border-bottom: 1px solid var(--border); }
.fx-tree-pane { min-width: 0; padding: var(--sp-2) var(--sp-2) var(--sp-3); border-right: 1px solid var(--border); background: var(--surface-1); overflow: auto; scrollbar-width: thin; }
.fx-tree-section { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) var(--sp-2) var(--sp-1); color: var(--muted); font-size: var(--fs-11); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; }
.fx-tree-section .icon { width: var(--icon-sm); height: var(--icon-sm); }
.fx-tree-item { min-width: 0; }
.fx-tree-row { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; padding: .2rem var(--sp-2); border-radius: var(--r-kbd); cursor: default; }
.fx-tree-row:hover { background: var(--surface-hover); }
.fx-tree-row[data-current="true"] { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.fx-tree-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; padding: 0; border: 0; background: transparent; color: var(--muted); }
.fx-tree-toggle .icon { width: .8rem; height: .8rem; transition: transform var(--dur-fast) var(--ease-out); }
.fx-tree-row[data-open="true"] .fx-tree-toggle .icon { transform: rotate(90deg); }
html[data-motion="off"] .fx-tree-toggle .icon { transition: none; }
.fx-tree-icon { display: inline-flex; flex: 0 0 auto; color: var(--muted); }
.fx-tree-icon .icon { width: var(--icon-sm); height: var(--icon-sm); }
.fx-tree-label { min-width: 0; font-size: var(--fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-tree-kids { margin-left: var(--sp-4); }
.fx-tree-note { padding: var(--sp-1) var(--sp-2); color: var(--subtle); font-size: var(--fs-11); }

.fx-list-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface-1); }
.fx-head { display: grid; grid-template-columns: minmax(0, 1fr) 11rem 9rem 6.5rem; align-items: center; border-bottom: 1px solid var(--border); background: var(--surface-3); }
.fx-head-btn { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; min-height: 2rem; padding: var(--sp-2) var(--sp-3); border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-11); font-weight: var(--fw-semibold); text-align: left; }
.fx-head-btn:hover { color: var(--text); }
.fx-head-btn.fx-num { justify-content: flex-end; }
.fx-head-btn[data-active="true"] { color: var(--text); }
.fx-sort { width: .9rem; flex: 0 0 auto; font-size: var(--fs-11); color: var(--accent); }
.fx-head-btn[data-dir="asc"] .fx-sort::before { content: "▲"; }
.fx-head-btn[data-dir="desc"] .fx-sort::before { content: "▼"; }

.fx-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
/* Превью фото и видео поверх списка: миниатюру присылает клиент. */
.client-pane-body.fx-body { position: relative; }
.fx-preview { position: absolute; right: var(--sp-4); bottom: calc(var(--sp-4) + 2.2rem); z-index: 6; display: flex; flex-direction: column; gap: var(--sp-2); width: min(23rem, 44vw); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--surface-2); box-shadow: var(--shadow-float); }
.fx-preview[hidden] { display: none; }
.fx-preview-head { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.fx-preview-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-13); font-weight: var(--fw-medium); }
.fx-preview-media { position: relative; display: flex; align-items: center; justify-content: center; min-height: 5.5rem; overflow: hidden; border-radius: var(--r-inner); background: #05070a; }
.fx-preview-img { display: block; max-width: 100%; max-height: 42vh; }
.fx-preview-img[hidden] { display: none; }
.fx-preview-note { padding: var(--sp-4); color: var(--muted); font-size: var(--fs-12); text-align: center; }
.fx-preview-meta { color: var(--muted); font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-scroll:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: -2px; }
.fx-rows { display: flex; flex-direction: column; }
.fx-row { display: grid; grid-template-columns: minmax(0, 1fr) 11rem 9rem 6.5rem; align-items: center; min-height: 1.85rem; border-bottom: 1px solid var(--border-soft); cursor: default; }
.fx-row:hover { background: var(--surface-hover); }
.fx-row[data-selected="true"] { background: color-mix(in srgb, var(--accent) 12%, var(--surface-1)); box-shadow: inset 2px 0 0 var(--accent); }
.fx-row[data-selected="true"]:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface-1)); }
/* Скрытые файлы видны всегда, но приглушены — так понятно, что они скрытые. */
.fx-row.fx-row-hidden .fx-name,
.fx-row.fx-row-hidden .fx-icon,
.fx-row.fx-row-hidden .fx-cell { opacity: .55; }
.fx-row.fx-row-hidden .fx-name { font-style: italic; }
.fx-cell { min-width: 0; padding: .2rem var(--sp-3); font-size: var(--fs-12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-cell.fx-col-name { display: flex; align-items: center; gap: var(--sp-2); }
.fx-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; color: var(--muted); }
.fx-icon > * { grid-area: 1 / 1; }
.fx-icon .icon { width: 1rem; height: 1rem; }
.fx-icon-img { width: 1rem; height: 1rem; object-fit: contain; }
.fx-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fx-num { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.fx-empty { padding: var(--sp-5); color: var(--muted); font-size: var(--fs-12); text-align: center; }

.fx-drop-hint { display: none; position: absolute; inset: var(--sp-3); align-items: center; justify-content: center; padding: var(--sp-4); border: 2px dashed var(--border-hover); border-radius: var(--r-inner); background: color-mix(in srgb, var(--surface-1) 88%, transparent); color: var(--text); font-size: var(--fs-12); text-align: center; pointer-events: none; }
.fx-scroll[data-drag="true"] .fx-drop-hint { display: flex; }

.fx-statusbar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-2) var(--sp-4); color: var(--muted); font-size: var(--fs-11); font-variant-numeric: tabular-nums; }
.fx-status-size { margin-left: auto; }

.fx-menu { position: fixed; z-index: calc(var(--z-overlay) + 2); min-width: 15rem; max-width: 22rem; padding: var(--sp-1); border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--surface-1); box-shadow: var(--shadow-float); }
.fx-menu-head { padding: var(--sp-2) var(--sp-3); color: var(--subtle); font-size: var(--fs-11); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-menu-item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: .4rem var(--sp-3); border: 0; border-radius: var(--r-kbd); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-12); text-align: left; }
.fx-menu-item:hover:not(:disabled) { background: var(--surface-hover); }
.fx-menu-item:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: -2px; }
.fx-menu-item .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--muted); }
.fx-menu-item:disabled { opacity: .45; }
.fx-menu-danger, .fx-menu-danger .icon { color: var(--error); }
.fx-menu-sep { height: 1px; margin: var(--sp-1) var(--sp-2); background: var(--border-soft); }

.fx-props { width: min(44rem, calc(100% - 2rem)); max-height: calc(100dvh - 3rem); margin: auto; padding: 0; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); color: var(--text); box-shadow: var(--shadow-float); overflow: hidden; }
.fx-props:not([open]) { display: none; }
.fx-props::backdrop { background: var(--overlay); }
.fx-props-tabs { display: flex; gap: var(--sp-1); padding: 0 var(--sp-4); border-bottom: 1px solid var(--border); background: var(--surface-2); overflow-x: auto; }
.fx-props-tab { flex: 0 0 auto; height: 2.25rem; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: var(--fw-medium) var(--fs-12)/1 var(--font-ui); white-space: nowrap; cursor: pointer; }
.fx-props-tab:hover { color: var(--text); }
.fx-props-tab[aria-selected="true"] { background: var(--text); color: var(--panel); font-weight: var(--fw-semibold); }
.fx-props-body { display: flex; flex-direction: column; max-height: min(62vh, 34rem); padding: var(--sp-4) var(--sp-5); overflow: auto; }
.fx-props-pane { display: flex; flex-direction: column; gap: var(--sp-3); }
.fx-props-pane[hidden] { display: none; }
.fx-props-list { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); margin: 0; }
.fx-props-list dt { color: var(--muted); font-size: var(--fs-12); }
.fx-props-list dd { margin: 0; min-width: 0; font-size: var(--fs-12); overflow-wrap: anywhere; }
.fx-props-note { margin: 0; color: var(--muted); font-size: var(--fs-12); }
.fx-props-object { margin: 0; font-size: var(--fs-12); overflow-wrap: anywhere; }
.fx-props-attr-block { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border-soft); }
.fx-props-attrs { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.fx-props-check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-12); }
.fx-props-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border-soft); background: var(--surface-2); }
.fx-acl-people { display: flex; flex-direction: column; gap: 2px; max-height: 11rem; padding: var(--sp-1); border: 1px solid var(--border); border-radius: var(--r-inner); overflow: auto; }
.fx-acl-person { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-1) var(--sp-2); border: 0; border-radius: calc(var(--r-inner) - 3px); background: transparent; color: var(--text); font: var(--fw-medium) var(--fs-12)/1.4 var(--font-ui); text-align: left; cursor: pointer; }
.fx-acl-person[aria-selected="true"] { background: var(--surface-3); }
.fx-acl-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: var(--r-pill); background: var(--surface-3); color: var(--muted); font-size: var(--fs-11); }
.fx-acl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-acl-table { border: 1px solid var(--border); border-radius: var(--r-inner); overflow: hidden; }
.fx-acl-caption { padding: var(--sp-2) var(--sp-3); background: var(--surface-2); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.fx-acl-row { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 6.5rem; align-items: center; padding: var(--sp-1) var(--sp-3); border-top: 1px solid var(--border-soft); font-size: var(--fs-12); }
.fx-acl-head { border-top: 0; color: var(--muted); font-size: var(--fs-11); }
.fx-acl-flag { text-align: center; }

/* Вопрос вместо нативного prompt/confirm: то же окно, но в оформлении панели. */
.rp-ask { width: min(29rem, calc(100% - 2rem)); margin: auto; padding: 0; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); color: var(--text); box-shadow: var(--shadow-float); overflow: hidden; }
.rp-ask:not([open]) { display: none; }
.rp-ask::backdrop { background: var(--overlay); }
.rp-ask-form { margin: 0; }
.rp-ask-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 var(--sp-5) var(--sp-4); }
.rp-ask-text { margin: 0; color: var(--muted); font-size: var(--fs-13); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.rp-ask-input { width: 100%; }
.rp-ask-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5) var(--sp-4); border-top: 1px solid var(--border-soft); background: var(--surface-2); }

@media (max-width: 900px) {
  .fx-main { grid-template-columns: minmax(0, 1fr); height: auto; }
  .fx-tree-pane { max-height: 15rem; border-right: 0; border-bottom: 1px solid var(--border); }
  .fx-list-pane { max-height: 60vh; }
  .fx-head, .fx-row { grid-template-columns: minmax(0, 1fr) 8rem 6rem; }
  .fx-col-type { display: none; }
  .fx-status-size { margin-left: 0; }
  .fx-preview { left: var(--sp-3); right: var(--sp-3); width: auto; }
}

/* --- мониторы: карточка DDC/CI ------------------------------------------ */
.dsp-panel { display: grid; gap: var(--sp-3); padding: 0 var(--sp-5) var(--sp-5); }
.dsp-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.dsp-title { margin: 0; font-size: var(--fs-12); letter-spacing: .04em; text-transform: uppercase; color: var(--subtle); }
.dsp-status { flex: 1 1 auto; min-width: 0; }
.dsp-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--sp-4); }
.dsp-card { display: grid; gap: var(--sp-3); }
.dsp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.dsp-card-title { display: grid; gap: 2px; min-width: 0; }
.dsp-card-title strong { font-size: var(--fs-13); overflow-wrap: anywhere; }
.dsp-badge { flex: 0 0 auto; padding: 0 .5rem; border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--muted); font-size: var(--fs-11); line-height: 1.6; }
.dsp-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 2.2rem; align-items: center; gap: var(--sp-2); font-size: var(--fs-12); }
.dsp-row-empty { grid-template-columns: 5.5rem minmax(0, 1fr); }
.dsp-label { color: var(--muted); }
.dsp-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.dsp-range { width: 100%; accent-color: var(--accent); }
/* Дополнительные VCP-параметры: у каждой модели свой набор. */
.dsp-more { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.dsp-more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); color: var(--muted); font-size: var(--fs-13); cursor: pointer; list-style: none; }
.dsp-more > summary::-webkit-details-marker { display: none; }
.dsp-extra-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); max-height: 340px; overflow: auto; }
.dsp-vcp { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 1.4fr) 4.5rem auto; align-items: center; gap: var(--sp-2); font-size: var(--fs-12); }
.dsp-caps { display: block; white-space: pre-wrap; word-break: break-all; color: var(--muted); font-size: var(--fs-12); max-height: 140px; overflow: auto; }
/* Виртуальная консоль клиента: вывод и строка ввода. */
.client-console { display: flex; flex-direction: column; gap: 0; min-height: 0; }
.console-output { flex: 1 1 auto; min-height: 44vh; max-height: 62vh; overflow: auto; margin: 0 var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-inner); background: #05070a; font: 12px/1.55 ui-monospace, Consolas, "Courier New", monospace; }
.console-line { white-space: pre-wrap; word-break: break-word; }
.console-cmd { color: var(--text); font-weight: 600; }
.console-out { color: #b9c2cf; }
.console-err { color: #ff8b80; }
.console-meta { color: var(--muted); }
.console-note { margin: 0; color: var(--muted); font: 12px/1.5 var(--font-ui); }
.console-form { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4); border-top: 1px solid var(--border); }
.console-prompt { color: var(--accent); font: 600 13px/1 ui-monospace, Consolas, monospace; }
.console-input { flex: 1 1 auto; font-family: ui-monospace, Consolas, "Courier New", monospace; }
.console-shell { flex: 0 0 auto; width: 9rem; }
.dsp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* --- Реверс-прокси: состояние, форма доступа, статистика ---------------- */
.px-state { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--surface-inline); transition: border-color var(--dur-fast) var(--ease-out); }
.px-state[data-state="on"] { border-color: color-mix(in srgb, var(--success) 34%, var(--border)); }
.px-state-main { display: flex; align-items: flex-start; gap: var(--sp-3); min-width: 0; }
.px-dot { flex: 0 0 auto; width: .625rem; height: .625rem; margin-top: .45rem; border-radius: 50%; background: var(--subtle); box-shadow: 0 0 0 4px color-mix(in srgb, var(--subtle) 18%, transparent); }
.px-state[data-state="on"] .px-dot { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 22%, transparent); }
.px-state-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.px-state-title { font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.px-state-sub { color: var(--muted); font-size: var(--fs-11); overflow-wrap: anywhere; }
.px-address { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border-soft); }
.px-label { color: var(--muted); font-size: var(--fs-11); }
.px-address-value { flex: 1 1 10rem; min-width: 0; padding: .3rem .5rem; border: 1px solid var(--border-soft); border-radius: var(--r-kbd); background: var(--surface-2); color: var(--text); font-size: var(--fs-12); overflow-wrap: anywhere; }
.px-copy { flex: 0 0 auto; }
.px-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-3) var(--sp-4); align-items: end; }
.px-field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.px-secret { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.px-secret .input { flex: 1 1 auto; min-width: 0; }
.px-reveal { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-1); }
.px-noauth { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-12); cursor: pointer; }
.px-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.px-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--sp-2); }
.px-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--sp-3); border: 1px solid var(--border-soft); border-radius: var(--r-inner); background: var(--surface-2); }
.px-tile-label { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--muted); font-size: var(--fs-11); }
.px-tile-label .icon { width: .75rem; height: .75rem; }
.px-tile-value { font-size: var(--fs-15); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.px-table-wrap { max-height: 16rem; overflow: auto; border: 1px solid var(--border-soft); border-radius: var(--r-inner); }
.px-table { width: 100%; border-collapse: collapse; font-size: var(--fs-12); }
.px-table th { position: sticky; top: 0; z-index: 1; padding: var(--sp-2) var(--sp-3); background: var(--surface-3); color: var(--muted); font-weight: var(--fw-semibold); text-align: left; white-space: nowrap; }
.px-table td { padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--border-soft); }
.px-target { width: 55%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-num { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.px-empty { padding: var(--sp-3); text-align: center; }

/* --- буфер обмена: превью картинки и подсказки ------------------------- */
.clip-preview { display: grid; gap: var(--sp-1); justify-items: start; padding: var(--sp-2); border: 1px solid var(--border-soft); border-radius: var(--r-inner); background: var(--surface-2); }
.clip-preview[hidden] { display: none; }
.clip-image { display: block; max-width: 100%; max-height: 22rem; border-radius: var(--r-kbd); object-fit: contain; background: repeating-conic-gradient(var(--surface-1) 0% 25%, transparent 0% 50%) 50% / 1rem 1rem; }
.clip-meta { font-size: var(--fs-11); color: var(--subtle); font-variant-numeric: tabular-nums; }
.clip-hint { margin: 0; font-size: var(--fs-12); color: var(--muted); overflow-wrap: anywhere; }
.clip-hint[hidden] { display: none; }
.clip-hint[data-kind="error"] { color: var(--error); }
.clip-hint[data-kind="ok"] { color: var(--success); }
.clip-file { cursor: pointer; }


/* --- обои: режимы как в Windows и галерея миниатюр ---------------------- */
.wp-modes { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--border-soft); border-radius: var(--r-inner); background: var(--surface-2); }
.wp-mode { flex: 1 1 auto; min-width: 6.5rem; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: calc(var(--r-inner) - 2px); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-12); white-space: nowrap; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.wp-mode:hover { color: var(--text); background: var(--surface-3); }
.wp-mode[aria-pressed="true"] { background: var(--accent); color: var(--panel); }
.wp-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wp-status { margin: 0; font-size: var(--fs-12); color: var(--muted); overflow-wrap: anywhere; }
.wp-status[data-kind="error"] { color: var(--error); }
.wp-status[data-kind="ok"] { color: var(--success); }
.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--sp-3); max-height: 32rem; overflow-y: auto; padding: 1px; scrollbar-width: thin; }
.wp-card { display: grid; gap: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.wp-card:hover { border-color: var(--border); background: var(--surface-3); }
.wp-card.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
.wp-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wp-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-kbd); object-fit: cover; background: var(--surface-1); }
.wp-thumb-empty { display: grid; place-items: center; color: var(--subtle); font-size: var(--fs-11); }
.wp-card-text { display: grid; gap: 1px; min-width: 0; }
.wp-card-name { font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-card-sub { font-size: var(--fs-11); color: var(--subtle); font-variant-numeric: tabular-nums; }

/* --- Drop & Execute: главная панель вкладки «Разное» ------------------- */
.dropx-hero { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface-1)), var(--surface-1)); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.dropx-hero[data-drag="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent) inset; }
.dropx-hero .dropx-row { align-items: center; }
.dropx-hero .dropx-file { font-size: var(--fs-13); }

/* --- Общее контекстное меню и значки приложений ------------------------ */
.system-sheet { position: fixed; z-index: calc(var(--z-overlay) + 2); display: flex; flex-direction: column; min-width: 13rem; padding: var(--sp-1); border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--surface-2); box-shadow: var(--shadow-float); animation: toast-in var(--dur-fast) var(--ease-out) both; }
.system-sheet-item { display: flex; align-items: center; width: 100%; padding: .375rem .5rem; border: 0; border-radius: var(--r-kbd); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-12); text-align: left; cursor: pointer; }
.system-sheet-item:hover:not(:disabled) { background: var(--surface-hover, var(--surface-3)); }
.system-sheet-item:disabled { color: var(--subtle); cursor: default; }
.system-sheet-sep { height: 1px; margin: var(--sp-1) 0; background: var(--border); }
.prog-row { align-items: center; }
.prog-row .system-row-main { display: flex; align-items: center; gap: var(--sp-3); }
.prog-text { display: flex; flex-direction: column; min-width: 0; }
.prog-icon { display: grid; place-items: center; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: var(--r-kbd); background: var(--surface-3); color: var(--muted); font-size: var(--fs-11); font-weight: var(--fw-medium); }
.prog-icon.has-img { background: transparent; }
.prog-icon-img { width: 100%; height: 100%; object-fit: contain; }

/* --- Скачивание файлов: прогресс в строке состояния -------------------- */
.dl-transfer { display: flex; align-items: center; gap: var(--sp-2); flex: 1 1 20rem; min-width: 12rem; margin-left: var(--sp-4); }
.dl-transfer[hidden] { display: none; }
.dl-label { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: var(--fs-11); }
.dl-bar { position: relative; flex: 1 1 7rem; min-width: 4rem; height: .375rem; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.dl-fill { width: 0; height: 100%; border-radius: inherit; background: var(--text); transition: width .18s linear; }
.dl-stats { color: var(--muted); font-size: var(--fs-11); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-cancel { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border: 1px solid var(--border); border-radius: var(--r-kbd); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-11); cursor: pointer; }
.dl-cancel:hover { color: var(--error); border-color: var(--error); }
.dl-cancel .icon { width: var(--icon-sm); height: var(--icon-sm); }
.dl-toast .toast-body > span { font-variant-numeric: tabular-nums; }

/* --- Пресеты отправки и отправка в Telegram ---------------------------- */
.tg-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.tg-empty { margin: 0; padding: var(--sp-3); border: 1px dashed var(--border); border-radius: var(--r-inner); color: var(--muted); font-size: var(--fs-12); }
.tg-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-soft); border-radius: var(--r-inner); background: var(--surface-2); }
.tg-item-icon { display: inline-flex; color: var(--muted); }
.tg-item-body { display: flex; flex: 1; flex-direction: column; gap: .1rem; min-width: 0; }
.tg-item-name { font-size: var(--fs-13); overflow-wrap: anywhere; }
.tg-item-meta { color: var(--muted); font-size: var(--fs-11); overflow-wrap: anywhere; }
.tg-item-actions { display: flex; gap: var(--sp-1); }
.tg-form { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-3); }
.tg-form[hidden] { display: none; }
.tg-secret { display: flex; align-items: center; gap: var(--sp-2); }
.tg-secret .input { flex: 1; min-width: 0; }
.tg-status { min-height: 1.1rem; margin: 0; color: var(--muted); font-size: var(--fs-11); overflow-wrap: anywhere; }
.tg-status[data-state="error"] { color: var(--error); }
.tg-dialog { width: min(34rem, calc(100% - 2rem)); max-height: calc(100dvh - 3rem); margin: auto; padding: 0; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); color: var(--text); box-shadow: var(--shadow-float); overflow: hidden; }
.tg-dialog:not([open]) { display: none; }
.tg-dialog::backdrop { background: var(--overlay); }
.tg-dialog-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 var(--sp-5) var(--sp-4); }
.tg-dialog-file { margin: 0; color: var(--muted); font-size: var(--fs-12); overflow-wrap: anywhere; }
.tg-dialog-actions { display: flex; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5) var(--sp-5); }
.tg-choices { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 16rem; overflow: auto; }
.tg-choice { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-soft); border-radius: var(--r-inner); background: var(--surface-2); cursor: pointer; }
.tg-choice:has(input:checked) { border-color: var(--border-hover); background: var(--surface-hover); }
.tg-choice-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.tg-choice-name { font-size: var(--fs-12); }
.tg-choice-meta { color: var(--muted); font-size: var(--fs-11); overflow-wrap: anywhere; }
.tg-caption { display: flex; flex-direction: column; gap: var(--sp-1); }

@media (max-width: 900px) {
  .dl-transfer { margin-left: 0; flex-basis: 100%; }
  .dl-label { max-width: 7rem; }
  .dl-stats { display: none; }
}