/* =============================================================================
   Страница «Себестоимость» — дизайн-система прототипа Claude Design
   (costing/calculator/index.dc.html): тёплый почти-белый фон, карточки с
   тонкой рамкой, моно-цифры, липкая шапка, uppercase-микрозаголовки.
   ============================================================================= */

.costing-page {
    --cst-bg: oklch(0.982 0.006 85);
    --cst-surface: #fff;
    --cst-header-bg: oklch(0.997 0.003 85);
    --cst-border: oklch(0.9 0.008 80);
    --cst-border-soft: oklch(0.94 0.006 80);
    --cst-border-strong: oklch(0.87 0.008 80);
    --cst-text: oklch(0.24 0.012 60);
    --cst-text-dim: oklch(0.55 0.01 70);
    --cst-text-soft: oklch(0.42 0.01 70);
    --cst-accent: oklch(0.3 0.09 245);
    --cst-accent-dim: oklch(0.42 0.09 245);
    --cst-accent-soft: oklch(0.45 0.04 245);
    --cst-accent-bg: oklch(0.975 0.012 245);
    --cst-warn-bg: oklch(0.975 0.025 85);
    --cst-warn-border: oklch(0.87 0.05 85);
    --cst-warn-accent: oklch(0.7 0.11 75);
    --cst-warn-text: oklch(0.35 0.03 60);
    --cst-err-bg: oklch(0.975 0.02 25);
    --cst-err-border: oklch(0.8 0.09 25);
    --cst-err-title: oklch(0.47 0.16 25);
    --cst-seg-material: oklch(0.72 0.05 70);
    --cst-seg-varka: oklch(0.65 0.12 40);
    --cst-seg-fasovka: oklch(0.62 0.1 245);
    --cst-seg-upak: oklch(0.65 0.1 150);
    --cst-mono: ui-monospace, Menlo, Consolas, monospace;

    background: var(--cst-bg);
    color: var(--cst-text);
    font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* --- липкая шапка --- */
.cst-header {
    position: sticky; top: 0; z-index: 30;
    background: var(--cst-header-bg);
    border-bottom: 1px solid var(--cst-border-strong);
    padding: 13px 26px 13px 62px; /* слева — место под глобальный бургер */
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.cst-title { font-size: 16px; font-weight: 660; letter-spacing: -0.01em; }
.cst-subtitle { font-size: 11.5px; color: var(--cst-text-dim); }

/* --- вкладки --- */
.cst-tabs { display: flex; gap: 3px; flex-basis: 100%; margin-top: 4px; }
.cst-tab {
    font-size: 12.5px; padding: 6px 14px; cursor: pointer; color: var(--cst-text-dim);
    background: none; border: none; border-bottom: 2px solid transparent;
    font-family: inherit;
}
.cst-tab:hover { color: var(--cst-text); }
.cst-tab.active {
    color: var(--cst-accent); font-weight: 600;
    border-bottom-color: var(--cst-accent-dim);
}

/* --- вкладка «Ставки» --- */
.cst-rates-layout { flex-direction: column; max-width: 1400px; padding: 20px 24px 70px; }
.cst-rates-intro {
    font-size: 12px; line-height: 1.7; color: var(--cst-text-soft);
    max-width: 900px;
}
.cst-rate-group { padding: 0; overflow: hidden; width: 100%; }
.cst-rate-head {
    padding: 11px 14px; background: oklch(0.968 0.006 85);
    border-bottom: 1px solid var(--cst-border); font-size: 12.5px; font-weight: 620;
}
.cst-rate-note {
    font-size: 11px; font-weight: 400; color: var(--cst-text-dim);
    margin-top: 3px; line-height: 1.45;
}
.cst-rate-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 84px;
    gap: 12px; align-items: baseline; padding: 8px 14px;
    border-top: 1px solid var(--cst-border-soft);
}
.cst-rate-row:first-of-type { border-top: none; }
.cst-rate-label { font-size: 12.5px; }
.cst-rate-formula {
    font-size: 11px; color: var(--cst-text-dim); margin-top: 2px;
    line-height: 1.45; font-family: var(--cst-mono);
}
.cst-rate-val { font-family: var(--cst-mono); font-size: 13.5px; font-weight: 620; white-space: nowrap; }
.cst-rate-unit { font-size: 11px; font-weight: 400; color: var(--cst-text-dim); margin-left: 3px; }

/* --- компоненты ставки (из чего складывается) --- */
.cst-rate-item { border-top: 1px solid var(--cst-border); }
.cst-rate-item:first-of-type { border-top: none; }
.cst-rate-item .cst-rate-row { border-top: none; padding-bottom: 4px; }
.cst-rate-item .cst-rate-label { font-weight: 600; }
.cst-comps { padding: 0 14px 12px 26px; display: flex; flex-direction: column; gap: 6px; }
.cst-comp {
    display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-start;
    justify-content: space-between;
    background: oklch(0.975 0.006 85); border: 1px solid var(--cst-border-soft);
    border-radius: 4px; padding: 8px 11px;
}
.cst-comp-main { flex: 1 1 320px; min-width: 0; }
.cst-comp-label { font-size: 12.5px; }
.cst-comp-note {
    font-size: 10.5px; color: var(--cst-text-dim); margin-top: 2px; line-height: 1.45;
}
.cst-comp-details { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.cst-detail-chip {
    font-size: 10.5px; color: var(--cst-text-soft); background: var(--cst-surface);
    border: 1px solid var(--cst-border-soft); border-radius: 3px; padding: 2px 6px;
}
.cst-detail-chip b { font-family: var(--cst-mono); font-weight: 600; margin-left: 4px; }
.cst-chip-rate { background: var(--cst-accent-bg); border-color: oklch(0.88 0.03 245); }
.cst-chip-total { background: oklch(0.955 0.006 80); font-weight: 600; }
.cst-comp-math {
    display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
    font-family: var(--cst-mono); font-size: 12px; white-space: nowrap;
}
.cst-comp-amount { color: var(--cst-text); font-weight: 600; }
.cst-comp-ref { color: var(--cst-text-dim); font-weight: 400; font-style: italic; }
.cst-comp-div { color: var(--cst-text-soft); }
.cst-comp-op { color: var(--cst-text-dim); }
.cst-comp-per { font-weight: 650; font-size: 13px; min-width: 96px; text-align: right; }

/* --- каркас: липкая левая панель + результат --- */
.cst-layout {
    padding: 20px 18px 70px;
    display: flex; flex-wrap: wrap; gap: 20px;
    align-items: flex-start;
}
.cst-side {
    flex: 1 1 360px; max-width: 430px; min-width: 0;
    display: flex; flex-direction: column; gap: 14px;
    position: sticky; top: 78px;
}
.cst-main { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

.cst-card {
    background: var(--cst-surface);
    border: 1px solid var(--cst-border);
    border-radius: 5px; padding: 13px;
}
.cst-label {
    font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--cst-text-dim); margin-bottom: 7px;
}
.cst-input {
    width: 100%; padding: 7px 9px; font-size: 13px;
    border: 1px solid oklch(0.88 0.008 80); border-radius: 4px;
    background: oklch(0.99 0.003 85); color: inherit; font-family: inherit;
}
.cst-input:focus { outline: 1px solid var(--cst-accent-dim); }
.cst-qty-input { font-size: 16px; font-family: var(--cst-mono); padding: 8px 9px; }

/* --- список SKU --- */
.cst-sku-list {
    max-height: min(340px, calc(100vh - 420px));
    overflow: auto; margin-top: 8px;
    display: flex; flex-direction: column; gap: 3px;
}
.cst-sku-item {
    text-align: left; width: 100%; cursor: pointer;
    border: 1px solid transparent; background: none;
    border-radius: 4px; padding: 6px 8px; color: inherit;
}
.cst-sku-item:hover { background: oklch(0.968 0.006 85); }
.cst-sku-item.active { background: var(--cst-accent-bg); border-color: oklch(0.85 0.04 245); }
.cst-sku-name { display: block; font-size: 12.5px; line-height: 1.35; font-weight: 500; }
.cst-sku-meta {
    display: block; font-size: 10.5px; color: var(--cst-text-dim);
    font-family: var(--cst-mono); margin-top: 3px;
}
.cst-sku-meta .cst-tag { font-family: system-ui, sans-serif; }

/* --- кнопки-чипы (тираж, упаковка) --- */
.cst-chip {
    font-size: 11.5px; padding: 5px 10px; cursor: pointer;
    border: 1px solid oklch(0.88 0.008 80); border-radius: 4px;
    background: oklch(0.99 0.003 85); color: var(--cst-text-soft);
    font-family: var(--cst-mono);
}
.cst-chip:hover { border-color: var(--cst-text-dim); }
.cst-chip.active {
    background: var(--cst-accent-bg); border-color: oklch(0.75 0.07 245);
    color: var(--cst-accent); font-weight: 600;
}
.cst-chip-text { font-family: system-ui, sans-serif; }
.cst-check { display: flex; gap: 8px; align-items: flex-start; cursor: pointer;
    padding-top: 10px; border-top: 1px solid var(--cst-border-soft); }
.cst-check span { font-size: 11.5px; line-height: 1.4; color: var(--cst-text-soft); }

/* --- бейджи источника цены --- */
.cst-tag {
    display: inline-block; font-size: 9.5px; font-weight: 650;
    letter-spacing: 0.05em; text-transform: uppercase;
    padding: 1px 6px; border-radius: 3px;
}
.cst-tag-spec { background: oklch(0.94 0.05 150); color: oklch(0.4 0.09 150); }
.cst-tag-est { background: var(--cst-warn-bg); color: oklch(0.48 0.1 65); border: 1px solid var(--cst-warn-border); }
.cst-tag-none { background: oklch(0.95 0.006 80); color: var(--cst-text-dim); }
.cst-tag-set { background: var(--cst-accent-bg); color: var(--cst-accent-dim); }

/* --- KPI-карточка --- */
.cst-kpi-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; padding: 12px 16px; flex-wrap: wrap;
    border-bottom: 1px solid var(--cst-border-soft);
}
.cst-kpi-name { font-size: 13.5px; font-weight: 600; }
.cst-kpi-order { font-family: var(--cst-mono); font-size: 11.5px; color: var(--cst-text-dim); }
.cst-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cst-kpi-cell { padding: 16px; border-right: 1px solid var(--cst-border-soft); }
.cst-kpi-cell:last-child { border-right: none; }
.cst-kpi-cell .cst-label { margin-bottom: 0; }
.cst-kpi-val {
    font-family: var(--cst-mono); font-size: 29px; font-weight: 600;
    letter-spacing: -0.02em; margin-top: 5px;
}
.cst-kpi-note { font-size: 11px; color: var(--cst-text-dim); margin-top: 3px; line-height: 1.4; }
.cst-kpi-cell.main { background: var(--cst-accent-bg); }
.cst-kpi-cell.main .cst-label { color: var(--cst-accent-dim); }
.cst-kpi-cell.main .cst-kpi-val { font-size: 34px; font-weight: 670; letter-spacing: -0.025em; margin-top: 3px; color: var(--cst-accent); }
.cst-kpi-cell.main .cst-kpi-note { color: var(--cst-accent-soft); }
.cst-kpi-vat {
    font-family: var(--cst-mono); font-size: 11.5px; color: var(--cst-text-soft);
    margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--cst-border-soft);
}
.cst-kpi-vat b { font-weight: 650; }

/* --- полоса структуры себестоимости --- */
.cst-struct { padding: 13px 16px; border-top: 1px solid var(--cst-border-soft); }
.cst-bar { display: flex; height: 10px; border-radius: 2px; overflow: hidden; background: var(--cst-border-soft); }
.cst-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); gap: 10px; margin-top: 10px; }
.cst-legend-name { display: flex; align-items: center; gap: 5px;
    font-size: 10.5px; color: var(--cst-text-dim); letter-spacing: 0.03em; text-transform: uppercase; }
.cst-dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; }
.cst-legend-val { font-family: var(--cst-mono); font-size: 14px; font-weight: 600; margin-top: 3px; }
.cst-legend-pct { font-size: 10.5px; color: oklch(0.58 0.01 70); font-family: var(--cst-mono); }

/* --- предупреждения --- */
.cst-warns { display: flex; flex-direction: column; gap: 6px; }
.cst-warn {
    display: flex; gap: 9px; align-items: flex-start;
    background: var(--cst-warn-bg); border: 1px solid var(--cst-warn-border);
    border-left: 3px solid var(--cst-warn-accent);
    border-radius: 4px; padding: 9px 12px;
}
.cst-warn-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    color: oklch(0.48 0.1 65); padding-top: 1px; white-space: nowrap; }
.cst-warn-text { font-size: 12px; line-height: 1.45; color: var(--cst-warn-text); }

/* --- ошибка расчёта (fail loudly) --- */
.cst-error {
    background: var(--cst-err-bg); border: 1px solid var(--cst-err-border);
    border-radius: 5px; padding: 16px 18px;
}
.cst-error-title { font-size: 13px; font-weight: 650; color: var(--cst-err-title); letter-spacing: 0.01em; }
.cst-error-sub { font-size: 12px; color: oklch(0.45 0.03 40); margin-top: 5px; line-height: 1.5; }
.cst-error-item {
    background: var(--cst-surface); border: 1px solid oklch(0.88 0.04 25);
    border-radius: 4px; padding: 10px 12px; margin-top: 13px;
    font-size: 12.5px; line-height: 1.5; color: oklch(0.36 0.012 60);
}

/* --- стадии (раскрывающиеся карточки) --- */
.cst-section-label { margin: 4px 0 8px 2px; }
.cst-stages { display: flex; flex-direction: column; gap: 7px; }
.cst-stage { background: var(--cst-surface); border: 1px solid var(--cst-border); border-radius: 5px; overflow: hidden; }
.cst-stage-head {
    width: 100%; display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 8px 12px; padding: 12px 15px; background: none; border: none;
    cursor: pointer; text-align: left; color: inherit; font-family: inherit;
}
.cst-stage-sign { font-family: var(--cst-mono); font-size: 12px; color: oklch(0.6 0.01 70); width: 11px; }
.cst-stage-title { font-size: 13px; font-weight: 600; }
.cst-stage-total { margin-left: auto; font-family: var(--cst-mono); font-size: 12px; color: var(--cst-text-dim); }
.cst-stage-per { font-family: var(--cst-mono); font-size: 15px; font-weight: 620; min-width: 82px; text-align: right; }
.cst-stage-body { padding: 0 15px 13px 38px; }
.cst-stage-detail {
    font-family: var(--cst-mono); font-size: 12px; line-height: 1.6;
    color: oklch(0.38 0.012 60); overflow-wrap: anywhere;
    background: oklch(0.972 0.006 85); border-radius: 4px; padding: 9px 11px;
}

/* --- шаги расчёта стадии --- */
.cst-steps { border: 1px solid oklch(0.92 0.006 80); border-radius: 4px; overflow: hidden; }
.cst-step {
    display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
    padding: 8px 12px; border-top: 1px solid var(--cst-border-soft);
}
.cst-step:first-child { border-top: none; }
.cst-step-label {
    flex: 0 0 104px; font-size: 10px; letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--cst-text-dim);
}
.cst-step-expr {
    flex: 1 1 220px; min-width: 0; font-family: var(--cst-mono); font-size: 12px;
    line-height: 1.55; color: oklch(0.38 0.012 60); overflow-wrap: anywhere;
}
.cst-step-res {
    margin-left: auto; font-family: var(--cst-mono); font-size: 13px;
    font-weight: 620; white-space: nowrap;
}
.cst-step-total { background: var(--cst-accent-bg); }
.cst-step-total .cst-step-label { color: var(--cst-accent-dim); }
.cst-step-total .cst-step-res { color: var(--cst-accent); font-size: 14px; }

/* --- входы и их происхождение --- */
.cst-inputs-title { margin: 12px 0 2px; }
.cst-input-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 84px;
    gap: 10px; align-items: baseline; padding: 6px 0;
    border-top: 1px solid var(--cst-border-soft);
}
.cst-input-label { font-size: 12.5px; }
.cst-input-val { font-family: var(--cst-mono); font-size: 12.5px; font-weight: 550; }
.cst-status {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
    text-align: center; padding: 2px 6px; border-radius: 3px;
}
.cst-status-fact { background: oklch(0.94 0.05 150); color: oklch(0.4 0.09 150); }
.cst-status-passport { background: oklch(0.94 0.04 245); color: oklch(0.42 0.09 245); }
.cst-status-estimate { background: oklch(0.95 0.05 80); color: oklch(0.45 0.1 65); }
.cst-status-decision { background: oklch(0.95 0.02 300); color: oklch(0.45 0.08 300); }
.cst-status-calc { background: oklch(0.95 0.006 80); color: var(--cst-text-dim); }

/* --- дерево сырьевого разбора --- */
.cst-tree-wrap { overflow-x: auto; border: 1px solid oklch(0.92 0.006 80); border-radius: 4px; }
.cst-tree { width: 100%; border-collapse: collapse; font-size: 12px; }
.cst-tree th {
    font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--cst-text-dim); font-weight: 600; text-align: right;
    padding: 8px 10px; background: oklch(0.968 0.006 85);
    border-bottom: 1px solid var(--cst-border);
}
.cst-tree th:first-child { text-align: left; }
.cst-tree td {
    padding: 6px 10px; border-top: 1px solid var(--cst-border-soft);
    font-family: var(--cst-mono); text-align: right; white-space: nowrap;
}
.cst-tree td:first-child {
    font-family: system-ui, sans-serif; text-align: left; white-space: normal;
    min-width: 220px;
}
.cst-tree-root td { font-weight: 600; background: oklch(0.975 0.006 85); }
/* узел с вложенным составом — подытог своей ветки */
.cst-tree-node td { font-weight: 620; color: var(--cst-text); }
.cst-tree-child td { color: var(--cst-text-soft); }
.cst-tree-child td:first-child { font-size: 11.5px; }
.cst-tree-toggle {
    border: none; background: none; cursor: pointer; padding: 0;
    width: 16px; margin-right: 4px; color: var(--cst-text-dim);
    font-size: 11px; font-family: var(--cst-mono); line-height: 1;
}
.cst-tree-toggle:hover { color: var(--cst-accent-dim); }
.cst-tree-toggle-pad { display: inline-block; width: 16px; margin-right: 4px; }
.cst-tree-src {
    display: inline-block; margin-left: 7px; font-family: var(--cst-mono);
    font-size: 10px; color: var(--cst-text-dim); letter-spacing: 0.02em;
}
.cst-tree tfoot td { border-top: 1px solid var(--cst-border); }
.cst-tree-total td { font-weight: 650; background: oklch(0.975 0.006 85); }
.cst-tree-extra td { color: var(--cst-text-soft); }
.cst-tree-note { font-size: 11px; line-height: 1.5; color: var(--cst-text-dim); margin-top: 8px; }

/* --- правка цены компонента (сценарий «что если») --- */
.cst-price-edit {
    cursor: pointer; border-bottom: 1px dashed var(--cst-text-dim);
    padding-bottom: 1px;
}
.cst-price-edit:hover { color: var(--cst-accent); border-bottom-color: var(--cst-accent-dim); }
.cst-price-edit.changed {
    color: var(--cst-accent); font-weight: 700;
    border-bottom: 1px solid var(--cst-accent-dim);
}
.cst-price-input {
    width: 92px; text-align: right; font-family: var(--cst-mono); font-size: 12px;
    border: 1px solid var(--cst-accent-dim); border-radius: 3px; padding: 1px 4px;
}
.cst-scenario {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--cst-accent-bg); border: 1px solid oklch(0.85 0.04 245);
    border-radius: 4px; padding: 8px 11px; margin-bottom: 8px;
    font-size: 12px; color: var(--cst-text-soft);
}
.cst-scenario-tag {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
    color: var(--cst-accent-dim);
}

/* --- тиражная лестница --- */
.cst-ladder { padding: 0; overflow: hidden; }
.cst-ladder-title { padding: 11px 15px; border-bottom: 1px solid var(--cst-border-soft);
    font-size: 12px; font-weight: 620; }
.cst-ladder-title small { font-weight: 400; color: var(--cst-text-dim); margin-left: 8px; }
.cst-ladder-grid { display: grid; }
.cst-ladder-cell { padding: 12px 16px; border-right: 1px solid var(--cst-border-soft); }
.cst-ladder-cell:last-child { border-right: none; }
.cst-ladder-q { font-family: var(--cst-mono); font-size: 11px; color: var(--cst-text-dim); }
.cst-ladder-cost { font-family: var(--cst-mono); font-size: 19px; font-weight: 620; margin-top: 4px; }
.cst-ladder-target { font-family: var(--cst-mono); font-size: 11px; color: var(--cst-text-dim); margin-top: 2px; }
.cst-footnote { font-size: 11px; line-height: 1.5; color: oklch(0.56 0.01 70); padding: 0 3px; }
.cst-placeholder { color: var(--cst-text-dim); font-size: 13px; line-height: 1.6; padding: 24px; }

@media (max-width: 860px) {
    .cst-side { max-width: none; position: static; }
    .cst-header { padding-left: 62px; }
}

/* --- черновики нового товара -------------------------------------------- */
.cst-draft-list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px;
    max-height: 168px; overflow-y: auto; }
.cst-draft {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    width: 100%; text-align: left; padding: 6px 8px; cursor: pointer;
    border: 1px solid transparent; border-radius: 4px; background: none;
    font-size: 12px; color: var(--cst-text);
}
.cst-draft:hover { background: oklch(0.97 0.005 85); border-color: var(--cst-border-soft); }
.cst-draft.active { background: var(--cst-accent-bg); border-color: oklch(0.88 0.03 245); }
.cst-draft-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-draft-date { font-family: var(--cst-mono); font-size: 10.5px;
    color: var(--cst-text-dim); flex: 0 0 auto; }
.cst-draft-empty { font-size: 11.5px; color: var(--cst-text-dim); padding: 6px 2px; }
.cst-draft-changes {
    margin-top: 8px; font-family: var(--cst-mono); font-size: 11px;
    color: var(--cst-text-soft);
}
.cst-draft-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.cst-draft-actions .cst-chip[disabled] { opacity: .45; cursor: default; }
.cst-draft-badge {
    font-family: var(--cst-mono); font-size: 10px; text-transform: uppercase;
    letter-spacing: .08em; padding: 2px 6px; border-radius: 3px;
    background: var(--cst-accent-bg); color: var(--cst-text-soft);
    vertical-align: middle; margin-left: 6px;
}

/* --- шапка результата с кнопкой выгрузки --- */
.cst-kpi-headline {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; width: 100%;
}
.cst-kpi-headline .cst-chip { flex: 0 0 auto; }

/* --- правка состава прямо в дереве --- */
.cst-tree-act {
    /* видны всегда, но приглушённо: спрятанные до наведения кнопки правки
       состава просто не находят */
    opacity: .32; margin-left: 5px; display: inline-block; width: 17px; height: 17px; line-height: 1;
    padding: 0; cursor: pointer; border-radius: 3px; font-size: 12px;
    border: 1px solid var(--cst-border-soft); background: oklch(0.99 0.003 85);
    color: var(--cst-text-dim); vertical-align: middle;
}
.cst-tree tr:hover .cst-tree-act { opacity: 1; }
.cst-tree-act:hover { opacity: 1; color: var(--cst-text); border-color: oklch(0.82 0.01 80); }
.cst-tree-del:hover { color: oklch(0.52 0.16 25); border-color: oklch(0.72 0.12 25); }

/* --- встроенные формы вместо системных диалогов --- */
.cst-input-inline {
    display: inline-block; width: auto; min-width: 150px; padding: 3px 6px;
    font-size: 11.5px; margin-right: 5px; vertical-align: middle;
}
.cst-input-num { min-width: 66px; width: 66px; text-align: right; }
.cst-tree-form > td { background: oklch(0.975 0.006 85); padding: 6px 8px !important; }
.cst-tree-form-label { font-family: var(--cst-mono); font-size: 11px;
    color: var(--cst-text-dim); margin-right: 7px; }
.cst-draft-prompt { margin-top: 6px; }
.cst-draft-prompt-title { font-size: 11.5px; color: var(--cst-text-soft);
    margin-bottom: 6px; }

/* Стоимость часа участка — внизу левой панели. Цифры выровнены по правому
   краю и моноширинно: их сравнивают между собой, а не читают подряд. */
.cst-hour-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid var(--cst-hair-soft, rgba(0, 0, 0, .06));
}
.cst-hour-row:last-of-type { border-bottom: none; }
.cst-hour-name { font-size: 13px; }
.cst-hour-crew { font-size: 11px; color: var(--cst-text-dim); white-space: nowrap; }
.cst-hour-val {
    font-family: var(--cst-mono, ui-monospace, "SF Mono", Menlo, monospace);
    font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums;
    white-space: nowrap; text-align: right;
}
.cst-hour-val small { font-size: 10.5px; font-weight: 400; color: var(--cst-text-dim); }

/* Источник цены компонента. Цвет несёт смысл надёжности, а не украшает:
   зелёный — подтверждено приходом, синий — только заказ (ожидание),
   жёлтый — HS-отчёт, где труд 1С уже внутри и передел двоится,
   серый — расчёт снизу вверх, красный — цены нет вовсе. */
.cst-src {
    display: inline-block; margin-left: 7px; padding: 1px 6px;
    border-radius: 3px; font-size: 10.5px; font-weight: 500;
    letter-spacing: .02em; white-space: nowrap; vertical-align: 1px;
}
.cst-src-ok   { background: oklch(0.94 0.05 150); color: oklch(0.40 0.09 150); }
.cst-src-wait { background: oklch(0.93 0.05 240); color: oklch(0.42 0.11 245); }
.cst-src-warn { background: oklch(0.95 0.06 85);  color: oklch(0.45 0.10 65);
                border: 1px solid oklch(0.87 0.08 80); }
.cst-src-calc { background: oklch(0.95 0.005 80); color: var(--cst-text-dim); }
.cst-src-none { background: oklch(0.94 0.05 25);  color: oklch(0.45 0.14 25); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cst-src-ok   { background: oklch(0.28 0.05 150); color: oklch(0.82 0.10 150); }
    :root:not([data-theme="light"]) .cst-src-wait { background: oklch(0.28 0.05 245); color: oklch(0.82 0.10 245); }
    :root:not([data-theme="light"]) .cst-src-warn { background: oklch(0.30 0.05 70);  color: oklch(0.85 0.10 80); border-color: oklch(0.38 0.06 70); }
    :root:not([data-theme="light"]) .cst-src-calc { background: oklch(0.26 0.004 80); color: var(--cst-text-dim); }
    :root:not([data-theme="light"]) .cst-src-none { background: oklch(0.30 0.06 25);  color: oklch(0.84 0.12 25); }
}