/* Детали студии. Значения только через var(--…) из tokens.css (DESIGN.md, «Детали»).
   Состояния .is-hover, .is-pressed, .is-focus повторяют :hover, :active, :focus-visible:
   страница /design-system показывает их без мыши. Сырые значения ловит tests/test_design_system.py. */

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  margin: 0;
  min-height: 100%;
  background: linear-gradient(160deg, var(--semantic-color-bg-backdrop-from), var(--semantic-color-bg-backdrop-to)) fixed;
  color: var(--semantic-color-text-primary);
  font-family: var(--semantic-type-body-family);
  font-size: var(--semantic-type-body-size);
  font-weight: var(--semantic-type-body-weight);
  line-height: var(--semantic-type-body-line-height);
  letter-spacing: var(--semantic-type-body-tracking);
  caret-color: var(--component-text-selection-caret);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--component-text-selection-bg); color: var(--component-text-selection-text); }

* { scrollbar-color: var(--component-scrollbar-thumb) var(--component-scrollbar-track); }
::-webkit-scrollbar { width: var(--base-space-8); height: var(--base-space-8); }
::-webkit-scrollbar-track { background: var(--component-scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--component-scrollbar-thumb); border-radius: var(--base-radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--component-scrollbar-thumb-hover); }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Ступени шрифта (DESIGN.md, «Шрифт»: где какая ступень) */
.t-display { font-family: var(--semantic-type-display-family); font-size: var(--semantic-type-display-size); font-weight: var(--semantic-type-display-weight); line-height: var(--semantic-type-display-line-height); letter-spacing: var(--semantic-type-display-tracking); }
.t-title { font-family: var(--semantic-type-title-family); font-size: var(--semantic-type-title-size); font-weight: var(--semantic-type-title-weight); line-height: var(--semantic-type-title-line-height); letter-spacing: var(--semantic-type-title-tracking); }
.t-heading { font-family: var(--semantic-type-heading-family); font-size: var(--semantic-type-heading-size); font-weight: var(--semantic-type-heading-weight); line-height: var(--semantic-type-heading-line-height); letter-spacing: var(--semantic-type-heading-tracking); }
.t-body { font-family: var(--semantic-type-body-family); font-size: var(--semantic-type-body-size); font-weight: var(--semantic-type-body-weight); line-height: var(--semantic-type-body-line-height); letter-spacing: var(--semantic-type-body-tracking); }
.t-input { font-family: var(--semantic-type-input-family); font-size: var(--semantic-type-input-size); font-weight: var(--semantic-type-input-weight); line-height: var(--semantic-type-input-line-height); letter-spacing: var(--semantic-type-input-tracking); }
.t-table { font-family: var(--semantic-type-table-family); font-size: var(--semantic-type-table-size); font-weight: var(--semantic-type-table-weight); line-height: var(--semantic-type-table-line-height); letter-spacing: var(--semantic-type-table-tracking); }
.t-label { font-family: var(--semantic-type-label-family); font-size: var(--semantic-type-label-size); font-weight: var(--semantic-type-label-weight); line-height: var(--semantic-type-label-line-height); letter-spacing: var(--semantic-type-label-tracking); }
.t-control { font-family: var(--semantic-type-control-family); font-size: var(--semantic-type-control-size); font-weight: var(--semantic-type-control-weight); line-height: var(--semantic-type-control-line-height); letter-spacing: var(--semantic-type-control-tracking); }
.t-caption { font-family: var(--semantic-type-caption-family); font-size: var(--semantic-type-caption-size); font-weight: var(--semantic-type-caption-weight); line-height: var(--semantic-type-caption-line-height); letter-spacing: var(--semantic-type-caption-tracking); }
.t-metric { font-family: var(--semantic-type-metric-family); font-size: var(--semantic-type-metric-size); font-weight: var(--semantic-type-metric-weight); line-height: var(--semantic-type-metric-line-height); letter-spacing: var(--semantic-type-metric-tracking); }
.num { font-variant-numeric: tabular-nums; }
.secondary { color: var(--semantic-color-text-secondary); }
.tertiary { color: var(--semantic-color-text-tertiary); }
.visually-hidden { position: absolute; width: var(--base-size-1); height: var(--base-size-1); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Значки Lucide: размер и толщина из токенов, цвет — цвет текста */
.icon { width: var(--component-icon-size); height: var(--component-icon-size); flex: none; stroke-width: var(--component-icon-stroke); color: var(--component-icon-color); }
.icon--sm { width: var(--component-icon-size-sm); height: var(--component-icon-size-sm); }
.icon--lg { width: var(--component-icon-size-lg); height: var(--component-icon-size-lg); }
.icon--inherit { color: inherit; }

/* Фокус: двойное кольцо (DESIGN.md, «Доступность») */
:focus-visible, .is-focus {
  outline: var(--semantic-focus-width) solid var(--component-button-focus-ring);
  outline-offset: var(--semantic-focus-offset);
  box-shadow: 0 0 0 var(--semantic-focus-offset) var(--component-button-focus-ring-inner);
}
:focus:not(:focus-visible) { outline: none; }

/* Стекло (DESIGN.md, «Стекло», условия 1–6) */
.glass {
  background: var(--component-panel-data-fill);
  -webkit-backdrop-filter: blur(var(--base-blur-glass));
  backdrop-filter: blur(var(--base-blur-glass));
  border-top: var(--base-size-1) solid var(--component-panel-data-edge);
  box-shadow: inset 0 var(--base-size-1) 0 var(--component-panel-data-highlight);
}
.solid { background: var(--semantic-color-bg-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }
@supports not ((backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))) {
  .glass { background: var(--semantic-color-bg-overlay); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--semantic-color-bg-overlay); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .glass { background: var(--semantic-color-glass-fill-dense); }
}

/* Раскладка: плавающее меню + рабочая область */
.shell { display: grid; grid-template-columns: var(--component-sidebar-size-width) minmax(0, 1fr); gap: var(--component-sidebar-size-gutter); padding: var(--component-sidebar-size-gutter); min-height: 100vh; align-items: start; }
.sidebar { position: sticky; top: var(--component-sidebar-size-gutter); display: flex; flex-direction: column; gap: var(--component-sidebar-size-item-gap); padding: var(--semantic-space-stack) var(--semantic-space-inline); border-radius: var(--component-sidebar-size-radius); background: var(--component-sidebar-fill); border-top-color: var(--component-sidebar-edge); z-index: var(--component-layer-sticky); }
.sidebar__brand { padding: var(--semantic-space-inline) var(--semantic-space-control-x) var(--semantic-space-stack); }
.nav-item { display: flex; align-items: center; gap: var(--semantic-space-inline); min-height: var(--component-sidebar-size-item-height); padding: 0 var(--semantic-space-control-x); border-radius: var(--semantic-radius-control); color: var(--component-sidebar-item-text); text-decoration: none; transition: background-color var(--semantic-motion-fast) var(--semantic-motion-ease); }
.nav-item:hover, .nav-item.is-hover { background: var(--component-sidebar-item-hover); }
.nav-item:active, .nav-item.is-pressed { background: var(--component-sidebar-item-pressed); color: var(--component-sidebar-item-text-pressed); }
.nav-item[aria-current="page"] { background: var(--component-sidebar-item-selected); color: var(--component-sidebar-item-text-selected); }
.nav-item .icon { color: inherit; }
.sidebar__spacer { flex: 1; }
.main { min-width: 0; padding: var(--semantic-space-page); display: flex; flex-direction: column; container: workspace / inline-size; }
.main > * + * { margin-top: var(--semantic-space-section); }
.screen-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--semantic-space-stack); flex-wrap: wrap; }
.updated { display: flex; align-items: center; gap: var(--semantic-space-stack); }
.row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--semantic-space-inline); }

/* Кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--semantic-space-inline); height: var(--component-button-height); padding: 0 var(--component-button-padding-x); border: 0; border-radius: var(--component-button-radius); font: inherit; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color var(--semantic-motion-fast) var(--semantic-motion-ease), color var(--semantic-motion-fast) var(--semantic-motion-ease); }
.btn:disabled, .btn.is-disabled { cursor: not-allowed; }
.btn--primary { background: var(--component-button-primary-bg); color: var(--component-button-primary-text); }
.btn--primary:hover:not(:disabled), .btn--primary.is-hover { background: var(--component-button-primary-bg-hover); }
.btn--primary:active:not(:disabled), .btn--primary.is-pressed { background: var(--component-button-primary-bg-pressed); }
.btn--primary:disabled, .btn--primary.is-disabled { background: var(--component-button-primary-bg-disabled); color: var(--component-button-primary-text-disabled); }
.btn--secondary { background: var(--component-button-secondary-bg); color: var(--component-button-secondary-text); }
.btn--secondary:hover:not(:disabled), .btn--secondary.is-hover { background: var(--component-button-secondary-bg-hover); }
.btn--secondary:active:not(:disabled), .btn--secondary.is-pressed { background: var(--component-button-secondary-bg-pressed); }
.btn--secondary:disabled, .btn--secondary.is-disabled { background: var(--component-button-secondary-bg-disabled); color: var(--component-button-secondary-text-disabled); }
.btn--ghost { background: transparent; color: var(--component-button-ghost-text); padding: 0 var(--semantic-space-control-x); }
.btn--ghost:hover:not(:disabled), .btn--ghost.is-hover { background: var(--component-button-ghost-bg-hover); color: var(--component-button-ghost-text-hover); }
.btn--ghost:active:not(:disabled), .btn--ghost.is-pressed { background: var(--component-button-ghost-bg-pressed); color: var(--component-button-ghost-text-pressed); }
.btn--ghost:disabled, .btn--ghost.is-disabled { color: var(--component-button-ghost-text-disabled); }
.btn--icon { flex: none; width: var(--component-button-icon-size); height: var(--component-button-icon-size); padding: 0; background: transparent; color: var(--component-button-icon-fg); }
.btn--icon .icon { color: inherit; }
.btn--icon:hover:not(:disabled), .btn--icon.is-hover { background: var(--component-button-icon-bg-hover); color: var(--component-button-icon-fg-hover); }
.btn--icon:active:not(:disabled), .btn--icon.is-pressed { background: var(--component-button-icon-bg-pressed); }
.btn--icon:disabled, .btn--icon.is-disabled { color: var(--component-button-icon-fg-disabled); }
.btn.is-loading .icon { animation: spin calc(var(--semantic-motion-slow) * 3) linear infinite; }
.reason { color: var(--semantic-color-text-secondary); }

/* Ссылка: подчёркивание всегда (решение Эдварда 30.10.2026) */
.link { color: var(--component-link-text); text-decoration: underline; text-decoration-color: var(--component-link-underline); text-decoration-thickness: var(--component-link-size-underline); text-underline-offset: var(--semantic-space-chip-y); transition: text-decoration-color var(--semantic-motion-fast) var(--semantic-motion-ease); }
.link:hover, .link:focus-visible, .link.is-hover, .link.is-focus { color: var(--component-link-text-hover); text-decoration-color: var(--component-link-underline-hover); }
.link:active, .link.is-pressed { color: var(--component-link-text-pressed); }
.link--external { display: inline-flex; align-items: center; gap: var(--semantic-space-chip-y); }
.link--external .icon { color: inherit; }

/* Фильтр-переключатель и метка выброса */
.chip { display: inline-flex; align-items: center; gap: var(--semantic-space-chip-y); min-height: var(--component-chip-height); padding: var(--component-chip-padding-y) var(--component-chip-padding-x); border: 0; border-radius: var(--component-chip-radius); font: inherit; white-space: nowrap; }
.chip--filter { background: var(--component-chip-filter-bg); color: var(--component-chip-filter-text); cursor: pointer; transition: background-color var(--semantic-motion-fast) var(--semantic-motion-ease); }
.chip--filter .icon { color: inherit; }
.chip--filter:hover:not(:disabled), .chip--filter.is-hover { background: var(--component-chip-filter-bg-hover); }
.chip--filter:active:not(:disabled), .chip--filter.is-pressed { background: var(--component-chip-filter-bg-pressed); color: var(--component-chip-filter-text-pressed); }
.chip--filter[aria-pressed="true"], .chip--filter[aria-checked="true"] { background: var(--component-chip-filter-bg-selected); color: var(--component-chip-filter-text-selected); }
.chip--filter[aria-pressed="true"]:hover, .chip--filter[aria-checked="true"]:hover, .chip--filter[aria-pressed="true"].is-hover { background: var(--component-chip-filter-bg-selected-hover); }
.chip--filter:disabled, .chip--filter.is-disabled { background: var(--component-chip-filter-bg-disabled); color: var(--component-chip-filter-text-disabled); cursor: not-allowed; }
.chip--outlier { background: var(--component-chip-outlier-bg); color: var(--component-chip-outlier-text); font-variant-numeric: tabular-nums; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--component-chip-gap); }

/* Поле ввода, поле кода */
.field { display: flex; flex-direction: column; gap: var(--component-input-size-label-gap); }
.field__label { color: var(--semantic-color-text-secondary); }
.input-wrap { position: relative; display: flex; align-items: center; }
.input { width: 100%; height: var(--component-input-size-height); padding: var(--component-input-size-padding-y) var(--component-input-size-padding-x); border: var(--base-size-1) solid var(--component-input-border); border-radius: var(--component-input-size-radius); background: var(--component-input-bg); color: var(--component-input-text); transition: border-color var(--semantic-motion-fast) var(--semantic-motion-ease); }
.input::placeholder { color: var(--component-input-placeholder); }
.input:hover:not(:disabled), .input.is-hover { border-color: var(--component-input-border-hover); }
.input:focus-visible, .input.is-focus { border-color: var(--component-input-border-focus); }
.input:disabled, .input.is-disabled { background: var(--component-input-bg-disabled); color: var(--component-input-text-disabled); cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--component-input-border-error); }
.input-wrap .icon { position: absolute; right: var(--component-input-size-padding-x); }
.field__error { display: flex; align-items: center; gap: var(--semantic-space-chip-y); color: var(--component-input-error); }
.field__error .icon { color: inherit; }
.field--short { max-width: var(--semantic-size-tooltip); }
.field--narrow { max-width: var(--semantic-size-frozen-column); }
.input--otp { font-variant-numeric: tabular-nums; max-width: var(--semantic-size-frozen-column); }

/* Выпадающий список «Автор» */
.combo { position: relative; max-width: var(--semantic-size-tooltip); }
.menu { position: absolute; left: 0; right: 0; top: calc(100% + var(--semantic-space-chip-y)); z-index: var(--component-layer-menu); padding: var(--semantic-space-chip-y); border-radius: var(--component-menu-size-radius); background: var(--component-menu-fill); border-top: var(--base-size-1) solid var(--component-menu-edge); box-shadow: var(--semantic-shadow-floating); -webkit-backdrop-filter: blur(var(--base-blur-glass)); backdrop-filter: blur(var(--base-blur-glass)); opacity: 1; transform: none; transition: opacity var(--semantic-motion-base) var(--semantic-motion-ease), transform var(--semantic-motion-base) var(--semantic-motion-ease); }
.menu[hidden] { display: block; opacity: 0; transform: translateY(calc(var(--semantic-motion-shift) * -1)); pointer-events: none; visibility: hidden; transition-duration: var(--semantic-motion-fast); transition-timing-function: var(--semantic-motion-ease-exit); }
.menu--static { position: static; }
.menu-item { display: flex; align-items: center; justify-content: space-between; gap: var(--semantic-space-inline); min-height: var(--component-menu-size-item-height); padding: 0 var(--semantic-space-control-x); border-radius: var(--semantic-radius-control); color: var(--component-menu-item-text); cursor: pointer; }
.menu-item:hover, .menu-item.is-hover, .menu-item[data-active="true"] { background: var(--component-menu-item-hover); }
.menu-item.is-pressed, .menu-item:active { background: var(--component-menu-item-pressed); }
.menu-item .icon { color: var(--component-menu-check); visibility: hidden; }
.menu-item[aria-selected="true"] .icon { visibility: visible; }
.menu__note { padding: var(--semantic-space-control-y) var(--semantic-space-control-x); color: var(--semantic-color-text-tertiary); }

/* Панель с данными, показатели */
.panel { border-radius: var(--component-panel-radius); padding: var(--component-panel-padding); min-width: 0; }
.panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--semantic-space-stack); margin-bottom: var(--semantic-space-stack); }
.metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--component-metrics-gap); }
.metric { display: flex; flex-direction: column; gap: var(--semantic-space-chip-y); }
.metric__value { font-variant-numeric: tabular-nums; }
.metric__value--best { color: var(--component-metrics-best-value); }
.metrics--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Панели с формой: «Настройки», «Пароль и 2FA» (макеты Settings, Password) */
.panel--form { display: flex; flex-direction: column; gap: var(--semantic-space-stack); max-width: var(--semantic-size-form); }
.panel--tight { gap: var(--semantic-space-form-gap); }
.form-row { align-items: flex-end; gap: var(--semantic-space-form-gap); }
.form-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--semantic-space-stack); }
.form-stack > .field { align-self: stretch; }
.settings-link, .link--back { align-self: flex-start; }
.link--back { display: inline-flex; align-items: center; gap: var(--semantic-space-chip-y); }
.link--back .icon { color: inherit; }
.main > .link--back + .screen-head { margin-top: var(--semantic-space-stack); }
/* Главный показатель шире остальных и с обложкой (DESIGN.md, «Против ИИ-слопа») */
.metric--best { grid-column: span 2; flex-direction: row; align-items: flex-start; gap: var(--semantic-space-inline); }
.metric__body { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--semantic-space-chip-y); min-width: 0; }
.metric__caption { color: var(--semantic-color-text-primary); }
.metric--best .metric__text > .t-label:first-child { white-space: normal; }
.metric .progress { margin-top: var(--semantic-space-inline); }
.metric__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--semantic-space-inline); color: var(--semantic-color-text-secondary); }
/* Текст занимает строку целиком, действие уходит под него, если рядом не помещается; у главного действие всегда справа */
.metric__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.metric--best .metric__text { flex-basis: 0; }
.metric__text > .t-label:first-child { white-space: nowrap; }

/* График */
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart-scroll { overflow-x: auto; }
.chart__axis { fill: var(--component-chart-axis-text); }
.chart__label { fill: var(--component-chart-bar-label); }
.chart__grid { stroke: var(--component-chart-grid); stroke-width: var(--base-size-1); }
.chart__threshold { stroke: var(--component-chart-threshold-line); stroke-width: var(--base-size-1); stroke-dasharray: var(--base-space-4) var(--base-space-4); }
.bar rect { fill: var(--component-chart-bar); transition: fill var(--semantic-motion-fast) var(--semantic-motion-ease); }
.bar { cursor: pointer; outline: none; }
/* Столбец стоит по центру своего дня (x в разметке — центр) и не шире component-chart-size-bar-max */
.chart--7 { --chart-slot: calc(100% / 7); }
.chart--14 { --chart-slot: calc(100% / 14); }
.chart--28 { --chart-slot: calc(100% / 28); }
.chart--29 { --chart-slot: calc(100% / 29); }
.chart--30 { --chart-slot: calc(100% / 30); }
.chart--31 { --chart-slot: calc(100% / 31); }
.chart--90 { --chart-slot: calc(100% / 90); }
.chart--slots .bar rect { --bar-w: min(var(--component-chart-size-bar-max), calc(var(--chart-slot) * 0.7)); width: var(--bar-w); transform: translateX(calc(var(--bar-w) / -2)); }
.bar:hover rect, .bar.is-hover rect { fill: var(--component-chart-bar-hover); }
.bar:active rect, .bar.is-pressed rect { fill: var(--component-chart-bar-pressed); }
.bar--highlight rect, .bar--highlight:hover rect, .bar--highlight.is-hover rect { fill: var(--component-chart-bar-highlight); }
.bar[aria-pressed="true"] rect { fill: var(--component-chart-bar-selected); }
.bar:focus-visible rect, .bar.is-focus rect { stroke: var(--component-button-focus-ring); stroke-width: var(--semantic-focus-width); }
.bar.is-focus { box-shadow: none; outline: none; }

/* Таблица: строки сплошные внутри стеклянной панели, первые две колонки закреплены */
.table-wrap { position: relative; overflow: auto; border-radius: var(--semantic-radius-nested); }
.table-wrap--tall { max-height: calc(var(--component-table-size-row) * 10); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.table th, .table td { height: var(--component-table-size-row); padding: var(--component-table-size-cell-y) var(--component-table-size-cell-x); text-align: left; white-space: nowrap; }
.table thead th { position: sticky; top: 0; z-index: var(--component-layer-sticky); height: var(--component-table-size-header); background: var(--semantic-color-bg-overlay); color: var(--component-table-header-text); font-weight: inherit; }
.table td { background: var(--component-table-row-fill); color: var(--semantic-color-text-secondary); border-bottom: var(--base-size-1) solid var(--component-table-divider); }
.table tbody tr:hover td, .table tbody tr.is-hover td { background: var(--component-table-row-hover); }
.table .cell-tertiary { color: var(--component-table-row-text-tertiary); }
.table tbody tr:hover .cell-tertiary, .table tbody tr.is-hover .cell-tertiary { color: var(--component-table-row-text-tertiary-active); }
.table .cell-num { text-align: right; }
.table abbr { text-decoration: none; }
.table .cell-primary { color: var(--semantic-color-text-primary); }
.table .cell-caption { max-width: var(--semantic-size-frozen-column); overflow: hidden; text-overflow: ellipsis; color: var(--component-table-caption-text); }
.table .frozen-1, .table .frozen-2 { position: sticky; z-index: var(--component-layer-sticky); }
.table .frozen-1 { left: 0; width: var(--component-table-size-frozen-column); min-width: var(--component-table-size-frozen-column); max-width: var(--component-table-size-frozen-column); overflow: hidden; text-overflow: ellipsis; }
.table .frozen-2 { left: var(--component-table-size-frozen-column); border-right: var(--base-size-1) solid var(--component-table-frozen-edge); }
.table thead .frozen-1, .table thead .frozen-2 { z-index: calc(var(--component-layer-sticky) + 1); }
.sort { display: inline-flex; align-items: center; gap: var(--semantic-space-chip-y); padding: 0; border: 0; border-radius: var(--semantic-radius-control); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.sort:hover, .sort.is-hover { background: var(--component-table-header-hover); color: var(--component-table-header-text-hover); }
.sort:active, .sort.is-pressed { background: var(--component-table-header-pressed); color: var(--component-table-header-text-pressed); }
.sort .icon { color: var(--component-table-sort-icon); }
.expand { display: inline-flex; align-items: center; gap: var(--semantic-space-inline); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; border-radius: var(--semantic-radius-control); }
.expand .icon { color: inherit; }
a.expand { text-decoration: none; }
.collect-form { display: contents; }
.banner__form { display: contents; }
.expand-body td { background: var(--semantic-color-bg-raised); }
.expand-body ul { display: flex; flex-direction: column; gap: var(--semantic-space-chip-y); padding: var(--semantic-space-control-y) 0; }
.expand-body li { display: flex; gap: var(--semantic-space-stack); }

/* Индикатор статуса */
.status { display: inline-flex; align-items: center; gap: var(--semantic-space-chip-y); color: var(--semantic-color-text-secondary); }
.status .icon { width: var(--component-icon-size-sm); height: var(--component-icon-size-sm); }
.status--ok .icon { color: var(--component-status-ok); }
.status--off .icon { color: var(--component-status-off); }
.status--error .icon { color: var(--component-status-error); }
.status--attention .icon { color: var(--component-status-attention); }
.status--running .icon { color: var(--component-status-running); animation: spin calc(var(--semantic-motion-slow) * 3) linear infinite; }

/* Полоса остатка лимита */
.progress { display: block; width: 100%; height: var(--semantic-space-chip-y); border: 0; border-radius: var(--base-radius-full); background: var(--component-progress-track); overflow: hidden; -webkit-appearance: none; appearance: none; }
.progress::-webkit-progress-bar { background: var(--component-progress-track); }
.progress::-webkit-progress-value { background: var(--component-progress-fill); border-radius: var(--base-radius-full); }
.progress::-moz-progress-bar { background: var(--component-progress-fill); border-radius: var(--base-radius-full); }
.progress--warning::-webkit-progress-value { background: var(--component-progress-fill-warning); }
.progress--warning::-moz-progress-bar { background: var(--component-progress-fill-warning); }
.progress-note { display: inline-flex; align-items: center; gap: var(--semantic-space-chip-y); color: var(--semantic-color-status-warning-text); }
.progress-note .icon { color: inherit; }

/* Баннер */
.banners { display: flex; flex-direction: column; gap: var(--component-banner-size-gap); }
.banner { display: flex; flex-wrap: wrap; align-items: center; max-width: 100%; gap: var(--semantic-space-inline); padding: var(--component-banner-size-padding-y) var(--component-banner-size-padding-x); border-radius: var(--component-banner-radius); }
.banner__text { display: block; flex: 1; min-width: 0; }
.banner__second { display: block; }
.banner .icon { color: inherit; }
.banner--danger { background: var(--component-banner-danger-bg); color: var(--component-banner-danger-text); }
.banner--danger .banner__second { color: var(--component-banner-danger-text-secondary); }
.banner--danger .banner__link { text-decoration-color: var(--component-banner-danger-link-underline); }
.banner--danger .banner__action:hover, .banner--danger .banner__action.is-hover { background: var(--component-banner-danger-action-bg-hover); color: var(--component-banner-danger-action-text-hover); }
.banner--warning { background: var(--component-banner-warning-bg); color: var(--component-banner-warning-text); }
.banner--warning .banner__second { color: var(--component-banner-warning-text-secondary); }
.banner--warning .banner__link { text-decoration-color: var(--component-banner-warning-link-underline); }
.banner--warning .banner__action:hover, .banner--warning .banner__action.is-hover { background: var(--component-banner-warning-action-bg-hover); color: var(--component-banner-warning-action-text-hover); }
.banner__link { color: inherit; text-decoration: underline; text-decoration-thickness: var(--component-link-size-underline); text-underline-offset: var(--semantic-space-chip-y); }
.banner__action { color: inherit; background: transparent; }

/* Подсказка */
.tip { position: relative; display: inline-flex; }
.tooltip { position: absolute; left: 0; bottom: calc(100% + var(--semantic-space-inline)); z-index: var(--component-layer-tooltip); width: max-content; max-width: var(--component-tooltip-size-max-width); padding: var(--component-tooltip-size-padding-y) var(--component-tooltip-size-padding-x); border-radius: var(--component-tooltip-size-radius); background: var(--component-tooltip-fill); color: var(--component-tooltip-text); box-shadow: var(--semantic-shadow-floating); white-space: normal; pointer-events: none; opacity: 0; transition: opacity var(--semantic-motion-fast) var(--semantic-motion-ease-exit); }
.tip:hover .tooltip, .tip:focus-within .tooltip, .tooltip.is-open { opacity: 1; transition-timing-function: var(--semantic-motion-ease); }
.tip.is-dismissed .tooltip { opacity: 0; }
.tooltip--static { position: static; opacity: 1; }

/* Окно */
.dialog { width: min(var(--component-dialog-size-width), calc(100% - var(--semantic-space-page) * 2)); max-width: none; padding: var(--component-dialog-size-padding); border: 0; border-radius: var(--component-dialog-size-radius); background: var(--component-dialog-fill); border-top: var(--base-size-1) solid var(--component-dialog-edge); color: var(--semantic-color-text-primary); box-shadow: var(--semantic-shadow-floating); }
.dialog[open] { animation: dialog-in var(--semantic-motion-slow) var(--semantic-motion-ease); }
.dialog::backdrop { background: var(--component-dialog-scrim); }
/* Окно — по центру экрана: отступ между блоками экрана (.main > * + *) на него не действует */
.main > .dialog { margin: auto; }
.dialog__body { display: flex; flex-direction: column; gap: var(--semantic-space-stack); }
.dialog__actions { display: flex; justify-content: space-between; gap: var(--semantic-space-inline); margin-top: var(--semantic-space-stack); }

/* Уведомление: внизу справа, до трёх, новые снизу */
.toasts { position: fixed; right: var(--semantic-space-page); bottom: var(--semantic-space-page); z-index: var(--component-layer-toast); display: flex; flex-direction: column; gap: var(--semantic-space-inline); width: min(var(--component-toast-size-width), calc(100% - var(--semantic-space-page) * 2)); }
.toast { display: flex; align-items: center; gap: var(--semantic-space-inline); padding: var(--component-toast-size-padding); padding-right: var(--semantic-space-inline); border-radius: var(--component-toast-size-radius); background: var(--component-toast-fill); color: var(--component-toast-text); box-shadow: var(--semantic-shadow-floating); -webkit-backdrop-filter: blur(var(--base-blur-glass)); backdrop-filter: blur(var(--base-blur-glass)); animation: toast-in var(--semantic-motion-base) var(--semantic-motion-ease); }
.toast__text { flex: 1; }
.toast.is-leaving { opacity: 0; transition: opacity var(--semantic-motion-fast) var(--semantic-motion-ease-exit); }
.toast--static { animation: none; }

/* Заглушка загрузки: на сплошной подложке, блик едет трансформом */
.skeleton { position: relative; display: block; height: var(--semantic-space-stack); border-radius: var(--semantic-radius-chip); background: var(--component-skeleton-fill); overflow: hidden; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--component-skeleton-highlight), transparent); transform: translateX(-100%); animation: shimmer calc(var(--semantic-motion-slow) * 4) var(--semantic-motion-ease) infinite; }
.skeleton--metric { height: var(--semantic-type-metric-line-height); width: 50%; }
.skeleton--short { width: 40%; }
.skeleton--wide { width: 80%; }
.skeleton-base { width: 100%; min-width: var(--semantic-size-frozen-column); background: var(--semantic-color-bg-raised); border-radius: var(--semantic-radius-nested); padding: var(--semantic-space-stack); display: flex; flex-direction: column; gap: var(--semantic-space-inline); }

/* Пустое состояние */
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--semantic-space-stack); color: var(--semantic-color-text-secondary); }

@keyframes spin { to { transform: rotate(360deg); } }
/* блик пробегает за motion.slow, потом пауза в три таких же отрезка */
@keyframes shimmer { 25%, 100% { transform: translateX(100%); } }
@keyframes dialog-in { from { opacity: 0; transform: scale(var(--semantic-motion-dialog-scale)); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--semantic-motion-shift)); } }

/* Уменьшить движение: сдвиги, масштаб и блик убираются, остаётся прозрачность */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { display: none; }
  .menu[hidden] { transform: none; }
  .status--running .icon, .btn.is-loading .icon { animation: none; }
  @keyframes dialog-in { from { opacity: 0; } }
  @keyframes toast-in { from { opacity: 0; } }
}

/* Точки перелома (DESIGN.md, «Отступы и раскладка») */
/* Показатели по ширине рабочей области, а не окна: главный на две колонки из пяти → по два, главный и расход во всю строку → по одному */
@container workspace (width < 1008px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric--best ~ .metric:has(.progress) { grid-column: span 2; }
}
@container workspace (width < 496px) {
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .metric--best, .metric--best ~ .metric:has(.progress) { grid-column: auto; }
  /* Узко: текст баннера во всю ширину рядом со значком, действие — строкой ниже. */
  .banner { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .banner__action { grid-column: 2; justify-self: start; }
}
@media (width < 1024px) {
  .shell { grid-template-columns: var(--component-sidebar-size-width-collapsed) minmax(0, 1fr); }
  .sidebar .nav-item__text, .sidebar__brand { position: absolute; width: var(--base-size-1); height: var(--base-size-1); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sidebar .nav-item { justify-content: center; padding: 0; }
}
@media (width < 640px) {
  .shell { grid-template-columns: minmax(0, 1fr); padding: var(--semantic-space-inline); }
  .sidebar { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; padding: var(--semantic-space-chip-y); }
  .sidebar__spacer { display: none; }
  .main { padding: var(--semantic-space-inline); }
  .ds-states { padding: var(--semantic-space-inline); }
  .ds-state { max-width: 100%; }
  .chart-scroll .chart { min-width: var(--semantic-size-dialog); }
  .tooltip { position: fixed; left: var(--semantic-space-inline); right: var(--semantic-space-inline); bottom: var(--semantic-space-inline); width: auto; max-width: none; }
  .tooltip--static { position: static; }
}

/* Только страница /design-system: сетка состояний вокруг деталей */
.ds-section { display: flex; flex-direction: column; gap: var(--semantic-space-inline); }
.ds-section > .panel + .panel { margin-top: var(--semantic-space-stack); }
.ds-states { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--semantic-space-stack); margin-top: var(--semantic-space-inline); padding: var(--semantic-space-panel); border-radius: var(--semantic-radius-panel); background: var(--semantic-color-bg-base); }
.ds-state { display: flex; flex-direction: column; gap: var(--semantic-space-inline); margin: 0; min-width: 0; }
.ds-sample { display: flex; align-items: center; min-height: var(--semantic-size-control); }
.ds-wide, .ds-state:has(.ds-wide), .ds-state:has(.metrics), .ds-state:has(.table) { width: 100%; }
.ds-state:has(.metrics) .ds-sample, .ds-state:has(.ds-wide) .ds-sample, .ds-state:has(.table) .ds-sample { display: block; }
.ds-wide-sm, .ds-chart-skeleton, .ds-progress { width: var(--semantic-size-tooltip); max-width: 100%; }
.ds-progress { display: flex; flex-direction: column; gap: var(--semantic-space-chip-y); }
.ds-inline-skeleton { width: var(--semantic-size-frozen-column); }
.ds-growth { width: var(--component-sheet-size-width); max-width: 100%; }
.ds-pairs, .ds-weights { display: flex; flex-direction: column; gap: var(--semantic-space-stack); margin-top: var(--semantic-space-stack); }
.ds-no-tracking { letter-spacing: 0; color: var(--semantic-color-text-secondary); }
.ds-w-regular { font-weight: var(--base-font-weight-regular); }
.ds-w-medium { font-weight: var(--base-font-weight-medium); }
.ds-w-semibold { font-weight: var(--base-font-weight-semibold); }
.ds-w-bold { font-weight: var(--base-font-weight-bold); }
.ds-bar-sample { width: var(--base-size-44); }
.ds-measure { position: absolute; visibility: hidden; white-space: nowrap; letter-spacing: 0; font-family: var(--base-font-family-system); }
.panel { position: relative; }
.expand[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* Таблица с карточкой: строка открывает карточку, подпись — кнопка для клавиатуры */
.table--open tbody tr { cursor: pointer; }
.table tbody tr.is-selected td { background: var(--component-table-row-selected); }
.table tbody tr.is-selected .cell-tertiary { color: var(--component-table-row-text-tertiary-active); }
.row-open { position: relative; display: block; max-width: 100%; padding: 0; border: 0; border-radius: var(--semantic-radius-control); background: transparent; color: inherit; font: inherit; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }

/* Карточка рилса: панель справа, плотное стекло, слой окна */
.sheet { position: fixed; inset: var(--component-sheet-size-gap) var(--component-sheet-size-gap) var(--component-sheet-size-gap) auto; z-index: var(--component-layer-dialog); width: min(var(--component-sheet-size-width), calc(100% - var(--component-sheet-size-gap) * 2)); height: auto; max-width: none; max-height: none; margin: 0; padding: var(--component-sheet-size-padding); border: 0; border-top: var(--base-size-1) solid var(--component-sheet-edge); border-radius: var(--component-sheet-size-radius); background: var(--component-sheet-fill); color: var(--semantic-color-text-primary); box-shadow: var(--semantic-shadow-floating); overflow-y: auto; }
.sheet[open] { display: flex; flex-direction: column; gap: var(--semantic-space-panel); animation: sheet-in var(--semantic-motion-base) var(--semantic-motion-ease); }
.sheet::backdrop { background: var(--component-sheet-scrim); }
.sheet--static { position: static; display: flex; flex-direction: column; gap: var(--semantic-space-panel); width: 100%; max-width: var(--component-sheet-size-width); }
.sheet__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--semantic-space-stack); }
.sheet__who { display: flex; align-items: center; gap: var(--semantic-space-inline); min-width: 0; }
.sheet__meta { display: flex; flex-wrap: wrap; gap: var(--semantic-space-stack); color: var(--semantic-color-text-secondary); }
.sheet__actions { display: flex; align-items: center; gap: var(--semantic-space-inline); }
.sheet__block { display: flex; flex-direction: column; gap: var(--semantic-space-inline); }
.sheet__compare { display: flex; flex-wrap: wrap; align-items: center; gap: var(--semantic-space-inline); color: var(--semantic-color-text-secondary); }
.sheet__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--semantic-space-stack); margin: 0; }
.sheet__stats dt { color: var(--semantic-color-text-secondary); }
.sheet__stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.sheet__stats dd.secondary { color: var(--semantic-color-text-secondary); }
.sheet__top { display: flex; gap: var(--semantic-space-stack); }
.sheet__top-info { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: var(--semantic-space-inline); }
.sheet__author { display: flex; align-items: flex-start; gap: var(--semantic-space-stack); }
.sheet__author .sheet__stats { flex: 1; }

/* Обложка и аватар: картинка у себя или заглушка */
.media-cover { display: grid; flex: none; place-items: center; width: var(--component-media-size-cover-w); height: var(--component-media-size-cover-h); border-radius: var(--component-media-size-cover-radius); background: var(--component-media-placeholder); color: var(--component-media-placeholder-icon); overflow: hidden; }
.media-cover .icon { color: inherit; }
.media-cover img { width: 100%; height: 100%; object-fit: cover; }
.media-cover--sm { width: var(--component-media-size-cover-sm-w); height: var(--component-media-size-cover-sm-h); }
.avatar { display: inline-block; flex: none; width: var(--component-media-size-avatar); height: var(--component-media-size-avatar); border-radius: 50%; background: var(--component-media-placeholder); object-fit: cover; }
.avatar--sm { width: var(--component-media-size-avatar-sm); height: var(--component-media-size-avatar-sm); }
.author-cell { display: inline-flex; align-items: center; gap: var(--semantic-space-inline); max-width: 100%; }
.sheet__caption { white-space: pre-line; color: var(--semantic-color-text-primary); }
.sheet__tags { color: var(--semantic-color-text-secondary); }
.sheet__heading { color: var(--semantic-color-text-secondary); }

/* График роста просмотров по снимкам */
.growth { display: block; width: 100%; height: auto; overflow: visible; }
.growth__line { fill: none; stroke: var(--component-chart-line); stroke-width: var(--component-chart-size-line); stroke-linejoin: round; stroke-linecap: round; }
.growth__point { fill: var(--component-chart-point); }
.growth__point--last { fill: var(--component-chart-point-last); }
.growth__axis { fill: var(--component-chart-axis-text); }
.growth__value { fill: var(--semantic-color-text-primary); }

@keyframes sheet-in { from { opacity: 0; transform: translateX(var(--semantic-motion-shift)); } }
@media (prefers-reduced-motion: reduce) {
  @keyframes sheet-in { from { opacity: 0; } }
}

/* Страницы без меню: вход, подключение 2FA, резервные коды */
.auth-page { display: grid; place-items: center; min-height: 100vh; padding: var(--semantic-space-page); }
.auth-panel { display: flex; flex-direction: column; gap: var(--semantic-space-panel); width: min(var(--component-dialog-size-width), 100%); border-radius: var(--component-dialog-size-radius); }
.auth-form { display: flex; flex-direction: column; gap: var(--semantic-space-stack); }
.auth-qr { width: calc(var(--component-media-size-cover-w) + var(--semantic-space-section) * 2); height: auto; padding: var(--semantic-space-inline); border-radius: var(--semantic-radius-control); background: var(--semantic-color-text-primary); }
.auth-secret { color: var(--semantic-color-text-primary); letter-spacing: 0; word-break: break-all; }
.auth-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--semantic-space-inline); margin: 0; padding: 0; list-style: none; }
.nav-item--button { width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: left; }

/* Фильтр-ссылка (состояние в адресе) выглядит как выбранный фильтр */
.chip--filter[aria-current="page"] { background: var(--component-chip-filter-bg-selected); color: var(--component-chip-filter-text-selected); }
a.chip--filter { text-decoration: none; }
.add-author { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--semantic-space-inline) var(--semantic-space-control-x); }
.add-author .field__error { flex-basis: 100%; }
.table .cell-action { text-align: right; }

/* Детали-ссылки экрана «Рилсы»: состояние в адресе, работают без скрипта */
.bar[aria-current="true"] rect { fill: var(--component-chart-bar-selected); }
a.row-open, a.sort { text-decoration: none; }
.updated .reason { margin-left: calc(var(--semantic-space-inline) * -1); }