/* ── Заголовок страницы ── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-6); }
.page-title { font-size: var(--font-title); font-weight: 600; letter-spacing: -0.3px; }
.page-greeting { font-size: var(--font-body-sm); color: var(--text-secondary); margin-top: var(--space-half); }
.section-spacing { margin-bottom: var(--space-5); }
.field-followup { margin-top: var(--space-3); }
.muted { color: var(--text-tertiary); }
.icon { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; flex-shrink: 0; }

/* ── Тулбар и сегментный переключатель ── */
.toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.toolbar-spacer { flex: 1; }
.seg { display: inline-flex; background: var(--surface-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: var(--space-half); }
.seg button, .seg a { border: none; text-decoration: none; background: transparent; font-size: var(--font-meta); font-weight: 500; color: var(--text-secondary); padding: var(--space-1) var(--space-3); border-radius: var(--radius-xs); cursor: pointer; }
.seg button.active, .seg a.active { background: var(--bg-card); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-color); }

/* ── Капитал-чарт (общий для «Вложений» и /reports) ── */
.overview-section { margin-bottom: var(--space-4); }
.ov-hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.ov-hero-value { font-size: var(--font-hero); font-weight: 600; letter-spacing: -.8px; line-height: 1.1; }
.ov-hero-delta { font-size: var(--font-control); font-weight: 600; margin-top: var(--space-1); }
.ov-chart { height: 220px; margin-top: var(--space-4); position: relative; }
.ov-chart canvas { max-width: 100%; }
.ov-legend { display: flex; gap: var(--space-4); font-size: var(--font-meta); color: var(--text-secondary); margin-top: var(--space-3); flex-wrap: wrap; }
.ov-legend i { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-xs); margin-right: var(--space-1-5); vertical-align: -1px; }
.legend-broker { background: var(--chart-broker); }
.legend-deposits { background: var(--chart-deposits); }

/* ── Кнопка: одна база, модификаторы primary / danger / link ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5);
    min-height: var(--control-height); padding: var(--space-1) var(--space-4);
    font-size: var(--font-control); font-weight: 500; line-height: 1.2;
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    background: var(--bg-card); color: var(--text-primary); cursor: pointer; text-decoration: none;
    transition: background-color .12s, border-color .12s, color .12s;
    white-space: nowrap;
  }
.btn:hover { background: var(--surface-subtle); border-color: var(--text-tertiary); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--action-bg); border-color: var(--action-bg); color: var(--action-ink); }
.btn.primary:hover { background: var(--text-secondary); border-color: var(--text-secondary); }
.btn.danger { color: var(--color-negative-ink); }
.btn.danger:hover { background: var(--color-negative-bg); border-color: var(--color-negative); }
.btn.link { border-color: transparent; background: transparent; color: var(--primary-color); padding: 0; min-height: 0; font-size: var(--font-small); text-decoration: underline; text-underline-offset: 2px; }
.btn.link:hover { color: var(--text-primary); background: transparent; }
.btn.sm { min-height: 26px; padding: var(--space-half) var(--space-3); font-size: var(--font-meta); }
.btn.is-disabled, .btn:disabled { opacity: .45; pointer-events: none; transform: none; cursor: default; }
.btn .count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--space-1); border-radius: var(--radius-xs); font-size: var(--font-caption); font-weight: 600; background: var(--surface-selected); }
.btn.is-active { background: var(--primary-light); border-color: var(--primary-mid); color: var(--primary-color); }
.btn.is-active .count { background: var(--primary-mid); }
.ui-link { color: var(--primary-color); text-decoration: underline; text-underline-offset: 2px; }

/* ── Табы второго уровня ── */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-color); margin-bottom: var(--space-5); max-width: 100%; overflow-x: auto; }
.tab { display: inline-flex; align-items: center; gap: var(--space-1-5); flex-shrink: 0; padding: var(--space-2) var(--space-3); font-size: var(--font-control); font-weight: 500; color: var(--text-secondary); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; cursor: pointer; background: transparent; border-top: 0; border-left: 0; border-right: 0; }
.tab:hover { color: var(--text-primary); }
.tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); font-weight: 600; }
.tab .icon { width: 16px; height: 16px; }

/* ── Бейдж статуса ── */
.chip { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-small); font-weight: 500; border-radius: var(--radius-xs); padding: var(--space-half) var(--space-2); white-space: nowrap; font-variant-numeric: tabular-nums; text-decoration: none; background: var(--neutral-chip-bg); color: var(--neutral-chip-ink); }
.chip.over { background: var(--over-chip-bg); color: var(--over-chip-ink); }
.chip.under { background: var(--under-chip-bg); color: var(--under-chip-ink); }
.chip.neutral { background: var(--neutral-chip-bg); color: var(--neutral-chip-ink); }
.chip.warn { background: var(--warning-bg); color: var(--warning-ink); }
.chip.accent { background: var(--primary-light); color: var(--primary-color); }
.chip.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-color); }

/* ── Переключатель периода ── */
.period-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.period-switch { display: flex; align-items: center; gap: var(--space-half); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: var(--space-half); }
.period-btn { width: 28px; height: 28px; border: none; background: transparent; border-radius: var(--radius-xs); color: var(--text-secondary); font-size: var(--font-section); line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.period-btn:visited { color: var(--text-secondary); }
.period-btn:hover { background: var(--surface-subtle); color: var(--text-primary); }
.period-btn.is-disabled { opacity: .35; pointer-events: none; cursor: default; }
.period-label { font-size: var(--font-body-sm); font-weight: 500; padding: 0 var(--space-3); min-width: 108px; text-align: center; color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-xs); display: inline-block; }
.period-label.filter-active { background: var(--primary-light); color: var(--primary-color); font-weight: 600; padding: var(--space-1) var(--space-3); }

/* ── Применённые фильтры ── */
.filter-context { margin-bottom: var(--space-5); }
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.filter-chips-label { font-size: var(--font-meta); font-weight: 500; color: var(--text-tertiary); }
.filter-chip { display: inline-flex; align-items: center; gap: var(--space-1-5); background: var(--primary-light); color: var(--primary-color); border: 1px solid var(--primary-mid); border-radius: var(--radius-pill); padding: var(--space-half) var(--space-1-5) var(--space-half) var(--space-3); font-size: var(--font-meta); font-weight: 500; }
.filter-chip-x { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-mid); color: inherit; text-decoration: none; font-size: var(--font-control); line-height: 1; }
.filter-chip-x::before { content: ""; position: absolute; inset: calc((var(--touch-target) - 18px) / -2); }
.filter-chip-x:hover { background: var(--primary-color); color: var(--color-on-accent); }
.filter-clear { font-size: var(--font-meta); font-weight: 500; color: var(--text-secondary); text-decoration: none; }
.filter-clear:hover { color: var(--primary-color); }
.filter-scope { font-size: var(--font-meta); color: var(--text-secondary); }

/* ── Поля формы ── */
.tx-category, .rule-field { width: 100%; min-width: 0; max-width: 100%; min-height: var(--control-height); border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); font-size: var(--font-control); padding: var(--space-1) var(--space-2); }
.tx-category:hover, .rule-field:hover { border-color: var(--text-tertiary); }
.rule-form { display: grid; grid-template-columns: 180px minmax(220px, 1fr) minmax(180px, 1fr) auto; gap: var(--space-3); align-items: center; }
.form-two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.form-wide { grid-column: 1 / -1; }
.article-field { display: grid; gap: var(--space-1); font-size: var(--font-small); color: var(--text-secondary); }
.article-field small { color: var(--text-tertiary); font-size: inherit; }
.article-field .ui-field-error { color: var(--color-negative-ink); }
.rule-form-section { grid-column: 1 / -1; margin-top: var(--space-2); font-size: var(--font-meta); font-weight: 600; color: var(--text-secondary); }
.remember-box { display: flex; align-items: center; gap: var(--space-1-5); margin-top: var(--space-2); color: var(--text-secondary); font-size: var(--font-small); white-space: normal; }
.remember-box input { accent-color: var(--primary-color); }
.remember-box[hidden] { display: none; }
.tx-category-display { display: inline-flex; align-items: center; gap: var(--space-2); }
.tx-category-display[hidden] { display: none; }
.tx-category-label { font-weight: 500; }
.tx-category-editor[hidden] { display: none; }
.inv-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; color: var(--text-secondary); font-size: var(--font-meta); }
.rule-form-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rule-form-buttons .btn.primary { flex: 1 1 200px; }
.rule-preview { margin-top: var(--space-4); scroll-margin-top: var(--space-4); }
.rule-preview-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.rule-preview .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.rule-preview .kpi-value { font-size: var(--font-section); }
.rule-preview .kpi-value a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rule-preview-sub { margin: var(--space-4) 0 var(--space-2); font-size: var(--font-meta); font-weight: 600; color: var(--text-secondary); }
.rule-preview th, .rule-preview td { text-align: left; white-space: normal; overflow-wrap: anywhere; }
.rule-preview td.num, .rule-preview th.num { text-align: right; white-space: nowrap; }
.rule-preview-date { white-space: nowrap; }
.rule-preview-why { color: var(--text-tertiary); font-size: var(--font-meta); }
.rule-preview-group { margin-bottom: var(--space-2); scroll-margin-top: var(--space-4); }
.rule-preview-group > summary { cursor: pointer; font-weight: 600; font-size: var(--font-body-sm); padding: var(--space-1) 0; }
.rule-preview-group > summary .rule-preview-why { font-weight: 400; margin-left: var(--space-1); }
.rule-preview-fix { margin: 0 0 var(--space-3); padding-left: var(--space-5); font-size: var(--font-body-sm); color: var(--text-secondary); display: grid; gap: var(--space-1); }
.rule-preview-fix b { color: var(--text-primary); }
.rule-hint { margin-top: var(--space-1); color: var(--text-tertiary); font-size: var(--font-small); white-space: normal; }
.ui-field-error { color: var(--color-negative-ink); font-size: var(--font-meta); }
[aria-invalid="true"] { border-color: var(--color-negative); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
button:disabled, [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* ── Загрузка файла ── */
.file-upload + .file-upload { margin-top: var(--space-3); }
.file-upload-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }
.file-upload-form input[type="file"] { flex: 1 1 240px; width: auto; padding: var(--space-1); color: var(--text-secondary); cursor: pointer; }
.file-upload-form input[type="file"]::file-selector-button { margin-right: var(--space-3); min-height: calc(var(--control-height) - 2 * var(--space-1) - 2px); padding: 0 var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-xs); background: var(--surface-subtle); color: var(--text-primary); font: inherit; font-weight: 500; cursor: pointer; }
.file-upload-form input[type="file"]:hover::file-selector-button { border-color: var(--text-tertiary); }
.file-upload-form input[type="file"]:disabled, .file-upload-form input[type="file"]:disabled::file-selector-button { cursor: not-allowed; }

/* ── Вход и регистрация ── */
.auth-brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.auth-fields { display: grid; gap: var(--space-3); }
.auth-fields .btn { width: 100%; }
.auth-switch { margin-top: var(--space-4); font-size: var(--font-meta); color: var(--text-secondary); }
.auth-switch a { color: var(--primary-color); }

/* ── Шапка публичных страниц (/guide, /roadmap) ── */
.public-body { display: block; }
.public-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-6); background: var(--bg-card); border-bottom: 1px solid var(--border-color); }
.public-brand { display: flex; align-items: center; gap: var(--space-3); }
.public-brand span:last-child { display: grid; line-height: 1.2; }
.public-brand small { font-size: var(--font-small); color: var(--text-tertiary); }

/* ── Точка «новое»: показывает shell.js, пока /roadmap не открыт после релиза ── */
.new-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; margin-left: var(--space-1-5); border-radius: var(--radius-pill); background: var(--primary-color); vertical-align: middle; }
.new-dot[hidden] { display: none; }
.nav-item .new-dot { margin-left: auto; }
.sidebar-collapsed .nav-item .new-dot { align-self: flex-start; margin-left: calc(-1 * var(--space-2)); }

/* ── Подсказка (i) ── */
.info-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: var(--space-1); }
.info-tip-btn { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; min-width: 0; min-height: 0; padding: 0; border: 1px solid var(--text-tertiary); border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); font-size: var(--font-caption); font-weight: 600; line-height: 1; cursor: help; }
.info-tip-btn::before { content: ""; position: absolute; inset: calc((var(--touch-target) - 18px) / -2); }
.info-tip-btn:hover, .info-tip-btn:focus-visible { border-color: var(--primary-color); color: var(--primary-color); }
.info-tip-body { display: none; position: absolute; z-index: 10; top: calc(100% + var(--space-1-5)); right: 0; width: min(320px, calc(100vw - 2 * var(--space-4))); padding: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); font-size: var(--font-caption); font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; box-shadow: var(--shadow-md); }
.info-tip:hover .info-tip-body, .info-tip:focus-within .info-tip-body { display: block; }
.info-tip-line { display: block; }
.info-tip-line + .info-tip-line { margin-top: var(--space-2); }
.info-tip-host { position: relative; }
.info-tip.start { position: static; }
.info-tip.start .info-tip-body { right: auto; left: 0; width: min(420px, 100%); }

/* ── Таблицы ── */
.table-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); overflow: hidden; min-width: 0; }
.table-scroll { overflow-x: auto; max-width: 100%; min-width: 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--table-font); }
th, td { padding: var(--table-cell-y) var(--table-cell-x); border-bottom: 1px solid var(--border-color); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child, .col-text { text-align: left; white-space: normal; }
th { font-size: var(--font-meta); font-weight: 500; color: var(--text-secondary); background: var(--surface-subtle); text-transform: none; letter-spacing: 0; }
thead th { position: sticky; top: 0; z-index: 3; }
tbody tr:hover td { background: var(--row-hover); }
tfoot td { border-bottom: none; font-weight: 600; background: var(--surface-subtle); }
tr.group td { background: var(--surface-subtle); font-size: var(--font-small); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-tertiary); padding: var(--space-1-5) var(--space-3); }
tr.total td { font-weight: 600; background: var(--surface-subtle); }
caption { text-align: left; color: var(--text-secondary); padding-bottom: var(--space-3); }
.ui-table th[scope="row"] { text-align: left; white-space: normal; min-width: 180px; font-size: inherit; font-weight: 400; background: transparent; color: var(--text-primary); }
.ui-table.compact th, .ui-table.compact td { padding: var(--table-compact-y) var(--table-compact-x); }
.table-sort { border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.table-sort:hover, .table-sort:focus-visible { color: var(--primary-color); }
.table-sort:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; border-radius: var(--radius-xs); }
.sort-indicator { display: inline-block; width: 1em; min-width: 12px; flex-shrink: 0; text-align: center; color: var(--primary-color); font-size: var(--font-meta); line-height: 1; }
.tx-party { font-weight: 500; color: var(--text-primary); }
.tx-description { margin-top: var(--space-half); color: var(--text-tertiary); font-size: var(--font-small); white-space: normal; }
.num { font-variant-numeric: tabular-nums; }
.pos, .positive { color: var(--color-positive-ink); }
.neg, .negative { color: var(--color-negative-ink); }
[style*="--bar-width:"] { width: var(--bar-width); }
table.heat .over-dark { background: var(--over-dark); color: var(--heat-ink); }
table.heat .over-light { background: var(--over-light); color: var(--heat-ink); }
table.heat .under-dark { background: var(--under-dark); color: var(--heat-ink); }
table.heat .under-light { background: var(--under-light); color: var(--heat-ink); }
table.heat .planned-cell.no-plan { background: var(--primary-light); color: var(--text-primary); }
.current-month { border-left: 1px solid var(--current-frame); border-right: 1px solid var(--current-frame); }
thead th.current-month { border-top: 1px solid var(--current-frame); color: var(--current-blue); }
tbody tr:last-child .current-month { border-bottom: 1px solid var(--current-frame); }
.future { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--overlay-soft) 5px 10px); color: transparent; }
table.heat .future { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--overlay-soft) 5px 10px); }

/* Шапка скрыта в карточном виде — страница показывает select на своём container query. */
.sort-select { display: none; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin-bottom: var(--space-3); }
.sort-select-field { display: grid; gap: var(--space-1); font-size: var(--font-small); color: var(--text-secondary); }
.sort-select-dir { min-width: var(--touch-target); }

/* ── Карточки, KPI, виджеты ── */
.widget { background: var(--bg-card); border-radius: var(--radius-card); border: 1px solid var(--border-color); padding: var(--space-5) var(--space-6); min-width: 0; }
.widget-title { font-size: var(--font-section); font-weight: 600; }
.widget-hint { font-size: var(--font-meta); color: var(--text-tertiary); margin-bottom: var(--space-4); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.kpi { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); min-width: 0; }
.kpi-link { color: inherit; text-decoration: none; transition: border-color .15s; }
.kpi-link:hover { border-color: var(--text-tertiary); }
.kpi-label { font-size: var(--font-meta); font-weight: 500; color: var(--text-secondary); margin-bottom: var(--space-2); }
.kpi-value { font-size: var(--font-value); font-weight: 600; letter-spacing: -0.5px; line-height: 1.15; }
.kpi-value.positive { color: var(--color-positive-ink); }
.kpi-value.negative { color: var(--color-negative-ink); }
.kpi-sub { font-size: var(--font-meta); color: var(--text-secondary); margin-top: var(--space-2); display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap; }
.ikpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-5) 0 var(--space-2); }
.ikpi-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.ikpi-quad .kpi-sub:first-child { margin-top: 0; }
.ikpi-bar { height: 6px; background: var(--surface-selected); border-radius: var(--radius-xs); overflow: hidden; position: relative; margin-top: var(--space-3); }
.ikpi-bar i { display: block; height: 100%; background: var(--color-positive); border-radius: var(--radius-xs); }
.ikpi-bar i.low { background: var(--color-warning); }
.ikpi-bar:after { content: ""; position: absolute; left: var(--t); top: -3px; bottom: -3px; width: 2px; background: var(--text-tertiary); }
.sgb-range { font-size: var(--font-value); font-weight: 600; letter-spacing: -0.5px; line-height: 1.15; }
.sgb-delta { font-size: var(--font-section); letter-spacing: 0; margin-left: var(--space-2); white-space: nowrap; }
.sgb-rows { display: grid; grid-auto-flow: row dense; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: var(--space-2) var(--space-3); align-items: center; margin-top: var(--space-4); font-size: var(--font-body-sm); }
.sgb-rows small { color: var(--text-tertiary); font-size: var(--font-small); margin-left: var(--space-1-5); }
.sgb-val { text-align: right; font-weight: 600; white-space: nowrap; }
.sgb-bar { display: grid; grid-template-columns: 1fr 1fr; height: 8px; border-radius: var(--radius-xs); background: var(--surface-selected); position: relative; }
.sgb-bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--text-tertiary); }
.sgb-bar i { display: block; height: 100%; width: var(--bar-width); min-width: 2px; }
.sgb-bar .down { justify-self: end; border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.sgb-bar .up { grid-column: 2; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.sgb-bar .price { background: var(--color-warning); }
.sgb-bar .good { background: var(--color-positive); }
.sgb-bar .bad { background: var(--color-negative); }
.sgb-axis { grid-column: 2; display: flex; justify-content: space-between; font-size: var(--font-caption); color: var(--text-tertiary); margin-top: calc(-1 * var(--space-1)); }
.sgb-verdict { font-size: var(--font-size-body); margin: var(--space-4) 0 0; }
.sgb-cell { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.sgb-cell .sgb-bar { width: 72px; height: 6px; flex-shrink: 0; }
.sgb-note { margin: var(--space-3) 0 0; }
.kpi .sgb-rows small { display: block; margin-left: 0; }
.kpi .sgb-axis { display: none; }
.zero { color: var(--text-tertiary); }

/* ── Сообщения и пустые состояния ── */
.plan-banner { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-4); font-size: var(--font-control); font-weight: 500; border: 1px solid transparent; }
.plan-banner-ok { background: var(--color-positive-bg); color: var(--color-positive-ink); border-color: var(--color-positive-strong); }
.plan-banner-error { background: var(--color-negative-bg); color: var(--color-negative-ink); border-color: var(--color-negative-strong); }
.plan-banner-info { background: var(--surface-subtle); border-color: var(--border-color); color: var(--text-secondary); }
.plan-banner a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.alert { display: flex; align-items: flex-start; gap: var(--space-3); background: var(--surface-subtle); border: 1px solid var(--border-color); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.alert-icon { width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--color-warning); color: var(--text-primary); display: flex; align-items: center; justify-content: center; font-size: var(--font-control); font-weight: 600; flex-shrink: 0; }
.alert-icon .icon { width: 15px; height: 15px; }
.alert-title { font-size: var(--font-body-sm); font-weight: 600; margin-bottom: var(--space-half); }
.alert-text { font-size: var(--font-meta); color: var(--text-secondary); }
.alert a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 2px; }
.desktop-update-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.empty, .ui-empty { text-align: center; color: var(--text-tertiary); font-size: var(--font-body-sm); padding: var(--space-7) var(--space-3); }
.foot-note { font-size: var(--font-meta); color: var(--text-tertiary); margin-top: var(--space-3); max-width: 720px; }
.foot-note b { color: var(--text-secondary); }

/* ── Параметры с превью: поле с дефолтом, строка расчёта, живые виджеты ── */
.param-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-5); align-items: start; }
.param-stack { display: grid; gap: var(--space-5); min-width: 0; }
.param-block { display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); min-width: 0; }
.param-block h2 { margin: 0; font-size: var(--font-section); }
.param-note { margin: 0; font-size: var(--font-small); }
.param-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.param-field { display: grid; gap: var(--space-1); align-content: start; font-size: var(--font-small); }
.param-field small { color: var(--text-tertiary); }
.param-field .btn[hidden] { display: none; }
.param-number { max-width: 180px; }
.calc-line { margin: 0; padding: var(--space-2) var(--space-3); background: var(--surface-subtle); border-radius: var(--radius-md); font-size: var(--font-small); color: var(--text-secondary); }
.calc-line b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.live-widgets { position: sticky; top: var(--space-3); display: grid; gap: var(--space-3); min-width: 0; }
.live-title { margin: 0; font-size: var(--font-meta); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-tertiary); }
.calc-line .chip { margin-left: var(--space-1); white-space: normal; }
.calc-line .chip[hidden] { display: none; }
.consumers { margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--border-color); font-size: var(--font-small); color: var(--text-tertiary); }

/* ── Панель массового действия и пагинация ── */
.bulk-bar { position: sticky; bottom: 0; z-index: 5; margin-top: var(--space-4); background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: var(--space-3) var(--space-4); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.bulk-count { font-size: var(--font-body-sm); color: var(--text-secondary); }
.bulk-count b { color: var(--text-primary); }
.bulk-spacer { flex: 1; }
.tx-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); flex-wrap: wrap; }
.tx-pager-meta { color: var(--text-secondary); font-size: var(--font-body-sm); }
.tx-pager-actions { display: inline-flex; gap: var(--space-2); }

/* ── Адаптив ── */
@media (max-width: 1180px) {
.kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
.kpi-grid, .ikpi-grid { grid-template-columns: 1fr; }
.param-layout { grid-template-columns: minmax(0, 1fr); }
.live-widgets { position: static; order: -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.live-title { grid-column: 1 / -1; }
.rule-form { grid-template-columns: 1fr; }
.period-btn { height: var(--touch-target); min-width: var(--touch-target); width: var(--touch-target); }
:is(button, .btn, .btn.sm, .btn.link, .period-btn, .tab, summary, .rule-field, .tx-category) { min-height: var(--touch-target); }
.filter-clear, .table-sort { display: inline-flex; align-items: center; min-height: var(--touch-target); }
.info-tip .info-tip-btn { min-height: 0; }
.period-label { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-target); }
:is(label, .remember-box):has(> input[type="checkbox"], > input[type="radio"]) { min-height: var(--touch-target); }
.rule-field, .tx-category { font-size: var(--font-section); }
.bulk-bar { flex-wrap: wrap; }
.public-header { padding: var(--space-3) var(--space-4); }
}
@media (max-width: 640px) {
  .rule-preview .kpi-grid { grid-template-columns: minmax(0, 1fr); }
  .rule-preview-operations thead { display: none; }
  .rule-preview-operations tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-2); border-bottom: 1px solid var(--border-color); padding: var(--space-2) 0; }
  .rule-preview-operations td { border: 0; padding: 0 var(--table-compact-x); }
  .rule-preview-operations .rule-preview-move { grid-column: 1 / -1; color: var(--text-secondary); font-size: var(--font-meta); }
.param-block { padding: var(--space-4); }
.param-body, .live-widgets { grid-template-columns: minmax(0, 1fr); }
.sgb-rows { grid-template-columns: 1fr max-content; }
.sgb-rows small { display: block; margin-left: 0; }
.sgb-rows > div { grid-column: 1; }
.sgb-rows > .sgb-val { grid-column: 2; }
.sgb-rows > .sgb-bar, .sgb-rows > .sgb-axis { grid-column: 1 / -1; }
.sgb-rows > .sgb-bar { margin-bottom: var(--space-2); }
.sgb-delta { display: block; margin: var(--space-1) 0 0; }
.sgb-cell .sgb-bar { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
.bulk-bar { position: static; }
}
.job-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.job-status .info-tip { margin-left: 0; }
.job-status .widget-hint { margin-bottom: 0; }
.job-status-error { flex-basis: 100%; }