/* RemotePanel: общие компоненты. Значения только из tokens.css. */
.sr-only { position: absolute; width: var(--sr-size); height: var(--sr-size); padding: 0; margin: calc(-1 * var(--sr-size)); overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: var(--sp-2); left: var(--sp-4); z-index: var(--z-overlay); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-inner); background: var(--accent); color: var(--on-accent); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.icon { display: inline-block; width: var(--icon-base); height: var(--icon-base); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.dot { display: inline-block; width: var(--dot-size); height: var(--dot-size); border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* Настоящий логотип, без обрезки и перекрашивания. */
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--control-height); color: var(--text); text-decoration: none; }
.brand-mark { display: block; width: var(--logo-size); height: var(--logo-size); flex: 0 0 auto; }
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-word { font: var(--fw-medium) var(--fs-13)/var(--lh-snug) var(--font-display); letter-spacing: -.02em; }
.brand-word b { font-weight: var(--fw-bold); }
.rail-item { position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: var(--nav-height); padding: var(--sp-3); border: 1px solid transparent; border-radius: var(--r-inner); background: transparent; color: var(--muted); text-decoration: none; font-size: var(--fs-13); font-weight: var(--fw-medium); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.rail-item .icon { width: var(--icon-nav); height: var(--icon-nav); }
.rail-item:hover { background: var(--surface-2); color: var(--text); }
.rail-item[aria-current="page"] { background: var(--surface-2); border-color: var(--border); color: var(--text); font-weight: var(--fw-semibold); }
.rail-item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: var(--nav-marker); border-radius: var(--r-pill); background: var(--accent); }

.section { min-width: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-section); }
.section-titles, .client-heading { min-width: 0; }
.section-title { color: var(--text); font: var(--fw-semibold) var(--fs-22)/var(--lh-tight) var(--font-display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.section-sub { margin-top: var(--sp-2); max-width: var(--copy-width); color: var(--muted); font-size: var(--fs-13); }
.section-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.back-link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--control-height); margin-bottom: var(--sp-2); color: var(--muted); text-decoration: none; font-size: var(--fs-12); }
.back-link::before { content: "‹"; font-size: var(--fs-22); }
.back-link:hover { color: var(--text); }
.subnav { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
.subnav a { position: relative; display: inline-flex; align-items: center; min-height: var(--control-height); padding: var(--sp-2) var(--sp-4); color: var(--muted); text-decoration: none; font-size: var(--fs-13); }
.subnav a:hover { color: var(--text); background: var(--surface-2); border-radius: var(--r-inner) var(--r-inner) 0 0; }
.subnav a[aria-current="page"] { color: var(--text); font-weight: var(--fw-semibold); }
.subnav a[aria-current="page"]::after { position: absolute; content: ""; bottom: 0; left: var(--sp-4); right: var(--sp-4); height: var(--nav-marker); border-radius: var(--r-pill); background: var(--accent); }

/* Слои поверхности, спокойные рамки, слабая тень вместо тяжёлой подложки. */
.panel { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); box-shadow: var(--shadow-1); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; min-height: var(--heading-height); padding: var(--sp-3) var(--sp-5); background: var(--surface-3); border-bottom: 1px solid var(--border); border-radius: var(--r-panel) var(--r-panel) 0 0; }
.panel-heading h2, .panel-title { font-size: var(--fs-15); line-height: var(--lh-snug); font-weight: var(--fw-bold); }

/* Раскрывающиеся блоки: шапка панели работает как summary. */
details.panel > summary.panel-heading { cursor: pointer; list-style: none; user-select: none; }
details.panel > summary.panel-heading::-webkit-details-marker { display: none; }
details.panel > summary.panel-heading::marker { content: ""; }
details.panel > summary.panel-heading::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform var(--dur-base) var(--ease-out); }
details.panel[open] > summary.panel-heading::after { transform: rotate(225deg); }
details.panel:not([open]) > summary.panel-heading { border-bottom: 0; border-radius: var(--r-panel); }
details.panel > summary.panel-heading:focus-visible { outline: 2px solid var(--border); outline-offset: -2px; }

/* Подсказка к настройке: появляется при наведении на название. */
.setting-label[data-tip] { position: relative; cursor: help; border-bottom: 1px dotted color-mix(in srgb, var(--muted) 55%, transparent); }
.setting-row.is-disabled { opacity: .45; }
.heading-group { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; flex-wrap: wrap; }
.heading-group > .icon { color: var(--muted); }
.panel-body { min-width: 0; }
.panel-foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-11); }
.caption { color: var(--muted); font-size: var(--fs-11); font-variant-numeric: tabular-nums; }
.caption[data-kind="error"] { color: var(--error); }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: var(--count-size); min-height: var(--count-size); padding: 0 var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-kbd); background: var(--surface-2); color: var(--muted); font: var(--fw-semibold) var(--fs-11)/var(--lh-snug) var(--font-ui); font-variant-numeric: tabular-nums; }

/* Цифра с контекстом, без числа ради украшения. */
.stat-strip { display: flex; align-items: stretch; gap: var(--sp-panel); min-width: 0; }
.stat { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.stat-label { color: var(--muted); font-size: var(--fs-12); }
.stat-value { font: var(--fw-semibold) var(--fs-28)/var(--lh-tight) var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat-context { color: var(--muted); font-size: var(--fs-11); }
.stat[data-tone="ok"] .stat-value { color: var(--success); }
.stat[data-tone="quiet"] .stat-value { color: var(--muted); }
.stat[data-tone="error"] .stat-value { color: var(--error); }
.stat-divider { width: 1px; flex: 0 0 auto; background: var(--border); }

.button, .icon-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--control-height); padding: 0 var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-inner); color: var(--text); background: var(--surface-2); font: var(--fw-semibold) var(--fs-12)/var(--lh-snug) var(--font-ui); text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.icon-button { width: var(--control-height); padding: 0; flex: 0 0 auto; }
.button:not(:disabled):hover, .icon-button:not(:disabled):hover { background: var(--surface-hover); border-color: var(--border-hover); }
.button:not(:disabled):active, .icon-button:not(:disabled):active { transform: scale(var(--press)); }
.button-accent, .button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.button-accent:not(:disabled):hover, .button[aria-pressed="true"]:not(:disabled):hover { background: var(--accent); color: var(--on-accent); border-color: var(--control-border); }
.button-quiet { background: transparent; border-color: transparent; color: var(--muted); }
.button-danger { color: var(--error); }
.button-danger:not(:disabled):hover { background: var(--error-soft); border-color: var(--error); }
.pill { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); color: var(--muted); background: var(--surface-2); font-size: var(--fs-11); font-weight: var(--fw-medium); white-space: nowrap; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.pill .icon { width: var(--icon-sm); height: var(--icon-sm); }
.pill[data-state="ok"] { color: var(--success); background: var(--success-soft); }
.pill[data-state="warn"] { color: var(--warning); background: var(--warning-soft); }
.pill[data-state="error"] { color: var(--error); background: var(--error-soft); }
.pill-text { overflow: hidden; text-overflow: ellipsis; }
.freshness { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-11); font-variant-numeric: tabular-nums; color: var(--muted); }
.freshness[data-fresh="fresh"] { color: var(--success); }
.freshness[data-fresh="stale"] { color: var(--warning); }

.empty, .builder-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); min-height: var(--empty-height); padding: var(--sp-panel); text-align: center; color: var(--muted); }
.empty > .icon, .builder-empty > .icon { width: var(--icon-lg); height: var(--icon-lg); margin-bottom: var(--sp-2); }
.empty h2, .empty h3, .builder-empty h2 { color: var(--text); font-size: var(--fs-15); }
.empty p, .builder-empty p { max-width: var(--copy-width); font-size: var(--fs-13); }
.empty-note { color: var(--muted); font-size: var(--fs-11); }
.loading-list { padding: var(--sp-5); }
.loading-label { color: var(--muted); font-size: var(--fs-12); }
.skeleton { height: var(--skeleton-h); margin-top: var(--sp-3); border-radius: var(--r-inner); background: var(--surface-2); overflow: hidden; }
.skeleton::before, .skeleton::after { content: ""; display: block; position: relative; top: var(--sp-3); left: var(--sp-3); width: 55%; height: var(--skeleton-bar); margin-bottom: var(--sp-2); border-radius: var(--r-kbd); background: var(--border); }
.skeleton::after { width: 78%; }

.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.field-label { color: var(--text); font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.field-hint { color: var(--muted); font-size: var(--fs-12); }
.field-error { color: var(--error); font-size: var(--fs-12); }
.input, .select { width: 100%; min-width: 0; min-height: var(--control-height); padding: var(--sp-2) 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-13); }
.input::placeholder { color: var(--muted); opacity: 1; }
.input:hover, .select:hover { border-color: var(--border-hover); }
.input[aria-invalid="true"] { border-color: var(--error); }
.search-field { position: relative; display: flex; align-items: center; }
.search-field > .icon { position: absolute; left: var(--sp-3); color: var(--muted); pointer-events: none; }
.search-field .input { padding-left: calc(var(--icon-base) + var(--sp-5)); padding-right: calc(var(--control-height) + var(--sp-3)); }
.search-field .icon-button { position: absolute; right: 0; border: 0; background: transparent; color: var(--muted); }
.form-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.form-status { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-12); color: var(--muted); }
.form-status[data-state="ok"] { color: var(--success); }
.form-status[data-state="error"] { color: var(--error); }
.setting-note, .auth-note { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--border); border-radius: 0 0 var(--r-panel) var(--r-panel); background: var(--surface-2); color: var(--muted); font-size: var(--fs-12); }
.setting-note > .icon, .auth-note > .icon { width: var(--icon-sm); height: var(--icon-sm); margin-top: var(--sp-1); }

/* Тумблер: контраст cute-трека остаётся #E0427F. */
.switch { position: relative; appearance: none; width: var(--switch-w); height: var(--control-height); margin: 0; padding: 0; border: 0; flex: 0 0 auto; background: transparent; cursor: pointer; border-radius: var(--r-inner); }
.switch::before { content: ""; position: absolute; left: var(--switch-left); top: calc((100% - var(--switch-track-h)) / 2); width: var(--switch-track-w); height: var(--switch-track-h); border: 1px solid var(--control-border); border-radius: var(--r-pill); background: var(--surface-2); }
.switch::after { content: ""; position: absolute; left: var(--switch-knob-left); top: calc((100% - var(--switch-knob)) / 2); width: var(--switch-knob); height: var(--switch-knob); border-radius: 50%; background: var(--muted); transition: transform var(--dur-base) var(--ease-out); }
.switch:checked::before { background: var(--switch-on, var(--accent)); border-color: var(--switch-on, var(--accent)); }
.switch:checked::after { transform: translateX(var(--switch-travel)); background: var(--on-accent); }

.themes, .theme-choices { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.themes { flex-direction: column; }
.themes button, .theme-choices button, .choice-card { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--heading-height); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--surface-1); color: var(--text); text-align: left; font-size: var(--fs-12); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.themes button { width: 100%; }
.themes button:hover, .theme-choices button:hover { border-color: var(--border-hover); background: var(--surface-hover); }
.themes button.active, .theme-choices button.active, .choice-card[aria-pressed="true"] { border-color: var(--focus); background: var(--surface-2); }
.choice-card strong { display: block; font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.choice-note { display: block; margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-11); }
.theme-swatch { display: grid; place-items: center; flex: 0 0 auto; width: var(--icon-lg); height: var(--icon-lg); border: 1px solid; border-radius: var(--r-inner); }
.swatch-dark { background: var(--demo-dark-bg); color: var(--demo-dark-fg); border-color: var(--demo-dark-border); }
.swatch-light { background: var(--demo-light-bg); color: var(--demo-light-fg); border-color: var(--demo-light-border); }
.swatch-cute { background: var(--demo-cute-bg); color: var(--demo-cute-fg); border-color: var(--demo-cute-border); }
.theme-name { font-weight: var(--fw-semibold); }
.theme-check { margin-left: auto; opacity: 0; }
.themes button.active .theme-check, .theme-choices button.active .theme-check { opacity: 1; }

/* Подтемы: компактные чипы с цветным кружком. Значение кружка берётся из
   палитры акцента для текущей темы, поэтому один и тот же чип выглядит
   по-разному в тёмной и светлой. */
.accent-choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.accent-choice { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-1); color: var(--text); font-size: var(--fs-12); font-family: inherit; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.accent-choice:hover { border-color: var(--border-hover); background: var(--surface-hover); }
.accent-choice:active { transform: scale(var(--press)); }
.accent-choice[aria-pressed="true"] { border-color: var(--focus); background: var(--surface-2); }
.accent-choice[aria-pressed="true"] .theme-check { opacity: 1; }
.accent-choice .theme-check { margin-left: 0; }
.accent-chip { flex: 0 0 auto; width: .875rem; height: .875rem; border-radius: 50%; background: var(--chip); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 20%, transparent); }

html[data-theme="dark"] .accent-choice[data-a="graphite"] { --chip: #F5F5F5; }
html[data-theme="dark"] .accent-choice[data-a="violet"] { --chip: #B49BFF; }
html[data-theme="dark"] .accent-choice[data-a="mint"] { --chip: #6FE0B6; }
html[data-theme="dark"] .accent-choice[data-a="amber"] { --chip: #F3C271; }
html[data-theme="dark"] .accent-choice[data-a="rose"] { --chip: #FFA2BE; }
html[data-theme="light"] .accent-choice[data-a="graphite"] { --chip: #171717; }
html[data-theme="light"] .accent-choice[data-a="violet"] { --chip: #5A3CD6; }
html[data-theme="light"] .accent-choice[data-a="mint"] { --chip: #0E7355; }
html[data-theme="light"] .accent-choice[data-a="amber"] { --chip: #96610F; }
html[data-theme="light"] .accent-choice[data-a="rose"] { --chip: #AC2346; }
html[data-theme="cute"] .accent-choice[data-a] { --chip: #FF70AD; }

.table-wrap { position: relative; overflow: auto; scrollbar-width: thin; }
.table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--fs-13); }
.table th { position: sticky; top: 0; z-index: var(--z-sticky); padding: 0; background: var(--surface-3); color: var(--muted); border-bottom: 1px solid var(--border); text-align: left; font-size: var(--fs-11); font-weight: var(--fw-semibold); }
.table td { height: var(--row-height); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-soft); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover { background: var(--surface-hover); }
.table tbody tr[data-selected="true"] { background: var(--surface-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .num .sort-button { justify-content: flex-end; }
.sort-button { display: flex; align-items: center; gap: var(--sp-1); width: 100%; min-height: var(--control-height); padding: var(--sp-2) var(--sp-3); border: 0; background: transparent; color: inherit; font: inherit; text-align: inherit; }
.sort-button:hover { color: var(--text); }
.sort-button .icon { width: var(--icon-sm); height: var(--icon-sm); opacity: 0; }
th[aria-sort] .sort-button .icon { opacity: 1; color: var(--text); }
.cell-name { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.cell-name > div { min-width: 0; }
.device-icon { display: grid; place-items: center; width: var(--icon-lg); height: var(--icon-lg); flex: 0 0 auto; border-radius: var(--r-inner); background: var(--surface-2); color: var(--muted); }
.client-link { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; color: var(--text); font-weight: var(--fw-semibold); }
.client-link:hover { text-decoration: underline; text-underline-offset: var(--sp-1); }
.cell-meta { display: block; margin-top: var(--sp-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: var(--fs-11); }
.cell-tag { display: inline-block; margin-left: var(--sp-2); padding: 0 .375rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--r-pill); color: var(--accent); font-size: var(--fs-11); font-weight: var(--fw-semibold); vertical-align: middle; }
.cell-meta-extra { display: none; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; }
.row-check { width: var(--check-size); height: var(--check-size); margin: 0; accent-color: var(--accent); cursor: pointer; }
.check-target { display: inline-flex; align-items: center; justify-content: center; width: var(--control-height); height: var(--control-height); cursor: pointer; }
.bulk-bar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-3) var(--sp-5); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.bulk-info { font-size: var(--fs-12); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.bulk-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-left: auto; }
.pagination { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }

/* Выпадающий список (dropdown.js): триггер + попап вместо нативного select.
   Нативный список рисует ОС мимо темы и не умеет двухстрочные пункты. */
.dd { position: relative; min-width: 0; }
.dd-grow { flex: 1 1 14rem; }
.dd-trigger { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: var(--control-height); padding: var(--sp-2) 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-13); text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.dd-trigger:hover { border-color: var(--border-hover); }
.dd-trigger:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.dd[data-open="true"] .dd-trigger { border-color: var(--focus); }
.dd[data-disabled="true"] .dd-trigger { opacity: .55; cursor: default; }
.dd-lead { display: inline-flex; flex: 0 0 auto; color: var(--muted); }
.dd-lead[hidden] { display: none; }
.dd-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-text[data-empty="true"] { color: var(--muted); }
.dd-chevron { flex: 0 0 auto; color: var(--muted); transition: transform var(--dur-fast) var(--ease-out); }
.dd[data-open="true"] .dd-chevron { transform: rotate(180deg); }
.dd-pop { position: absolute; z-index: calc(var(--z-overlay) + 1); top: calc(100% + var(--sp-1)); left: 0; right: 0; min-width: 16rem; display: flex; flex-direction: column; max-height: 22rem; border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); box-shadow: var(--shadow-float); overflow: hidden; }
.dd[data-align="right"] .dd-pop { left: auto; right: 0; }
.dd-pop[hidden] { display: none; }
.dd-search-wrap { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-soft); color: var(--muted); }
.dd-search-wrap[hidden] { display: none; }
.dd-search { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font-size: var(--fs-13); outline: none; }
.dd-search::placeholder { color: var(--subtle); }
.dd-list { display: flex; flex-direction: column; gap: 1px; overflow: auto; padding: var(--sp-1); scrollbar-width: thin; }
.dd-list:focus { outline: none; }
.dd-item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-inner); background: transparent; color: var(--text); text-align: left; font-size: var(--fs-13); cursor: pointer; }
.dd-item:hover, .dd-item[data-active="true"] { background: var(--surface-hover); }
.dd-item[aria-selected="true"] { color: var(--accent); }
.dd-item > .icon:last-child { flex: 0 0 auto; color: var(--accent); }
.dd-item-icon { display: inline-flex; flex: 0 0 auto; color: var(--muted); }
.dd-item[aria-selected="true"] .dd-item-icon { color: var(--accent); }
.dd-item-body { flex: 1; min-width: 0; }
.dd-item-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-item-sub { display: block; color: var(--muted); font-size: var(--fs-11); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-empty { padding: var(--sp-3); color: var(--muted); font-size: var(--fs-12); }

/* Переключатель категорий рядом с dropdown: Экран / Камера. */
.seg { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); }
.seg-item { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: calc(var(--control-height) - 6px); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font-size: var(--fs-12); cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.seg-item:hover { color: var(--text); }
.seg-item[aria-pressed="true"] { background: var(--text); color: var(--panel); }
.seg-item .icon { width: var(--icon-sm); height: var(--icon-sm); }
.seg-item[hidden] { display: none; }

/* Всплывающие уведомления: видны на любой вкладке. */
.toasts { position: fixed; z-index: calc(var(--z-overlay) + 4); top: calc(env(safe-area-inset-top) + var(--sp-4)); right: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); width: min(22rem, calc(100vw - 2rem)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-2) var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-panel); background: color-mix(in srgb, var(--surface-1) 92%, transparent); backdrop-filter: blur(12px); box-shadow: var(--shadow-float); animation: toast-in var(--dur-base) var(--ease-out); }
.toast[data-closing="true"] { animation: toast-out 200ms var(--ease-out) forwards; }
.toast[data-kind="fresh"] { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.toast-icon { display: grid; place-items: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: var(--r-inner); background: var(--surface-2); color: var(--accent); }
.toast[data-kind="back"] .toast-icon { color: var(--success); }
.toast-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.toast-body strong { font-size: var(--fs-13); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-body span { color: var(--muted); font-size: var(--fs-12); overflow-wrap: anywhere; }
.toast.is-clickable { cursor: pointer; }
.toast .toast-close { width: 1.75rem; height: 1.75rem; border-color: transparent; background: transparent; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
html[data-motion="off"] .toast, html[data-motion="off"] .toast[data-closing="true"] { animation: none; }
@media (max-width: 600px) { .toasts { left: var(--sp-3); right: var(--sp-3); width: auto; } }

.log { display: flex; flex-direction: column; overflow: auto; padding: var(--sp-2) var(--sp-5); scrollbar-width: thin; }
.log .line { display: grid; grid-template-columns: var(--log-time-w) var(--log-level-w) minmax(0, 1fr); align-items: baseline; gap: var(--sp-3); flex: 0 0 auto; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-12); }
.log .line:last-child { border-bottom: 0; }
.log-time { color: var(--subtle); font-variant-numeric: tabular-nums; }
.log-level { color: var(--muted); }
.log-message { color: var(--muted); overflow-wrap: anywhere; white-space: pre-wrap; }
.log .warn .log-level, .log .warn .log-message { color: var(--warning); }
.log .error .log-level, .log .error .log-message { color: var(--error); }
.log-empty { display: grid; place-items: center; flex: 1 0 auto; min-height: var(--log-min-h); padding: var(--sp-5); text-align: center; font-size: var(--fs-12); color: var(--muted); }
.journal-actions { display: flex; align-items: center; gap: var(--sp-2); }
.journal-link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--control-height); padding: var(--sp-2); color: var(--muted); text-decoration: none; font-size: var(--fs-12); }
.journal-link:hover { color: var(--text); }

.streams { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--stream-min-w)), 1fr)); gap: var(--sp-4); padding: var(--sp-4); align-content: start; }
.stream { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--surface-2); overflow: hidden; transition: border-color var(--dur-fast) var(--ease-out); }
.stream:hover { border-color: var(--border-hover); }
.stream-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); background: var(--surface-3); }
.stream-title { flex: 1; min-width: 0; }
.stream-tag { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-11); }
.stream-tag .icon { width: var(--icon-sm); height: var(--icon-sm); }
.stream-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.stream-close { border-color: transparent; background: transparent; color: var(--muted); }
.frame { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; max-height: var(--viewer-max-h); background: var(--surface-0); overflow: hidden; }
.frame img, .frame canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.frame-placeholder { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-5); color: var(--muted); text-align: center; font-size: var(--fs-12); }
.stream-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3); font-size: var(--fs-11); font-variant-numeric: tabular-nums; color: var(--muted); }
.stream-state { display: inline-flex; align-items: center; gap: var(--sp-2); }
.stream[data-state="live"] .stream-state { color: var(--success); }
.stream[data-state="offline"] .stream-state { color: var(--error); }
.stream[data-state="error"] .stream-state { color: var(--warning); }

.setting-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-panel); padding: var(--sp-5); }
/* Разделитель по ширине контента, а не во всю панель: линии не «съезжают»
   относительно текста и вложенных блоков. */
.setting-row::after { content: ""; position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: 0; height: 1px; background: var(--border-soft); pointer-events: none; }
.setting-row:last-child::after { display: none; }
/* Блок, который не работает без установки на диск: гасим и подсказываем курсором. */
[data-install-only].is-disabled { opacity: .45; }
[data-install-only].is-disabled .switch,
[data-install-only].is-disabled .select,
[data-install-only].is-disabled .input { cursor: not-allowed; }
.setting-text { min-width: 0; max-width: var(--copy-width); }
.setting-label { font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.setting-hint { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-12); }
.setting-control { flex: 0 1 auto; min-width: 0; }
.setting-control .select { width: var(--form-width); max-width: 100%; }
.save-status { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-11); }
.save-status[data-state="saved"] { color: var(--success); }
.save-status[data-state="error"] { color: var(--error); }
.session-grid { display: grid; grid-template-columns: minmax(0, var(--meta-width)) minmax(0, 1fr); }
.kv-key, .kv-value { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-soft); font-size: var(--fs-13); }
.kv-key { color: var(--muted); }
.kv-value { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.client-facts { margin: 0; padding: var(--sp-5); }
.client-facts dt { margin-bottom: var(--sp-1); font-size: var(--fs-11); color: var(--muted); }
.client-facts dd { margin: 0 0 var(--sp-5); font-size: var(--fs-13); overflow-wrap: anywhere; }
.client-facts dd:last-child { margin-bottom: 0; }

/* Входы только для контейнеров; обновления строк не запускают stagger. */
@keyframes section-enter { from { opacity: 0; transform: translateY(var(--motion-rise)); } to { opacity: 1; transform: none; } }
@keyframes shimmer { from { opacity: .45; } to { opacity: 1; } }
html[data-motion="on"] .section.is-active > .section-head,
html[data-motion="on"] .section.is-active > .section-body > * { animation: section-enter var(--dur-enter) var(--ease-out) both; }
html[data-motion="on"] .section.is-active > .section-body > :nth-child(2) { animation-delay: var(--stagger); }
html[data-motion="on"] .skeleton::before { animation: shimmer var(--dur-slow) var(--ease-out) infinite alternate; }
html[data-motion="on"] #appearance-dialog[open] { animation: section-enter var(--dur-base) var(--ease-out) both; }