.fm-fc {
    padding: 16px 16px 64px;
    color: var(--text);
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fm-fc .fm-forecast-top,
.fm-fc .fm-forecast-bar,
.fm-fc .fm-forecast-state,
.fm-fc .fm-forecast-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.fm-fc .fm-forecast-top h1,
.fm-fc .fm-forecast-empty h2 {
    margin: 0;
}

.fm-fc .fm-forecast-top p,
.fm-fc .fm-forecast-empty p {
    margin: 4px 0 0;
    color: var(--muted);
}

.fm-fc .fm-forecast-empty {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 0;
}

.fm-fc .fm-forecast-state {
    justify-content: flex-start;
    padding: 24px 0;
}

.fm-fc .fm-forecast-bar {
    margin: 12px 0 20px;
    max-width: 360px;
}

.fm-fc .fm-forecast-summary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.fm-fc .fm-forecast-summary article {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
}

.fm-fc .fm-forecast-summary span {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.fm-fc .fm-forecast-summary strong {
    display: block;
    margin-top: 6px;
    font-size: 1.15rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.02em;
    color: var(--text);
}

.fm-fc .fm-forecast-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* Вкладки */
.fm-fc .fm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 1rem 0 .75rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.fm-fc .fm-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: .5rem .9rem;
    cursor: pointer;
    color: var(--muted);
    font: inherit;
}

.fm-fc .fm-tab[aria-selected="true"] {
    color: var(--text);
    border-bottom-color: var(--brand, var(--mud-palette-primary));
}

/* Чипы блоков: подсветка, не фильтр расчёта */
.fm-fc .fm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .75rem;
}

.fm-fc .fm-chip {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: none;
    padding: .2rem .7rem;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.fm-fc .fm-chip[aria-pressed="true"] {
    border-color: var(--brand, var(--mud-palette-primary));
    color: var(--brand, var(--mud-palette-primary));
}

.fm-fc .fm-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px 16px;
    margin-bottom: 12px;
}

.fm-fc .fm-block-dim {
    opacity: .45;
}

.fm-fc .fm-block h3 {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text);
}

.fm-fc .fm-block-sub {
    margin: 1.15rem 0 .4rem;
    font-size: .95rem;
    font-weight: 500;
    color: var(--text);
}

.fm-fc .fm-head-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    border: 1px solid color-mix(in srgb, var(--muted) 50%, transparent);
    border-radius: 50%;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
    vertical-align: 1px;
    cursor: help;
}

.fm-fc .fm-head-hint:hover,
.fm-fc .fm-head-hint:focus-visible {
    color: var(--text);
    border-color: color-mix(in srgb, var(--text) 40%, transparent);
    outline: none;
}

.fm-fc .fm-hint {
    color: var(--muted);
    font-size: .85rem;
    margin: .25rem 0 .5rem;
}

/* Причина погашенной кнопки «Сохранить»: правка могла остаться на другой вкладке. */
.fm-fc .fm-invalid {
    color: var(--mud-palette-error);
    align-self: center;
    margin: 0;
    max-width: 32rem;
}

.fm-fc .fm-annotation {
    padding: .35rem 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Матрица месяцев: скролл только внутри контейнера */
.fm-fc .fm-matrix-wrap {
    overflow-x: auto;
    max-width: 100%;
}

.fm-fc .fm-matrix {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

/*
    Safari сжимает sticky-ячейку по тексту своей строки. Короткая «График, USD»
    тогда уезжает влево относительно EUR и заголовков месяцев. Ширину колонок
    задаём colgroup + table-layout: fixed, а внутри sticky — блок на всю ячейку.
*/
.fm-fc .fm-matrix--horizon {
    table-layout: fixed;
    width: max-content;
}

.fm-fc .fm-matrix--horizon .fm-matrix-col-label {
    width: 22rem;
}

.fm-fc .fm-matrix--horizon .fm-matrix-col-month {
    width: 5.25rem;
}

.fm-fc .fm-matrix--horizon .fm-matrix-col-year,
.fm-fc .fm-matrix--horizon .fm-matrix-col-total {
    width: 5.5rem;
}

.fm-fc .fm-matrix--lines .fm-matrix-col-label {
    width: 28rem;
}

.fm-fc .fm-matrix-head,
.fm-fc .fm-matrix-label,
.fm-fc .fm-matrix-cell,
.fm-fc .fm-matrix-year,
.fm-fc .fm-matrix-total {
    box-sizing: border-box;
    vertical-align: middle;
}

.fm-fc .fm-matrix-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    color: color-mix(in srgb, var(--text) 82%, transparent);
    padding: .45rem .55rem;
    text-align: right;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.fm-fc .fm-matrix-sticky {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--surface);
    text-align: left;
    min-width: 15rem;
    box-sizing: border-box;
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
}

.fm-fc .fm-matrix--horizon .fm-matrix-sticky {
    width: 22rem;
    min-width: 22rem;
    max-width: 22rem;
}

.fm-fc .fm-matrix--lines .fm-matrix-sticky {
    width: 28rem;
    min-width: 28rem;
    max-width: 28rem;
}

.fm-fc .fm-matrix-sticky-inner {
    display: block;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fm-fc .fm-matrix--lines .fm-matrix-sticky-inner {
    white-space: normal;
    text-overflow: unset;
    overflow: visible;
}

.fm-fc .fm-matrix-label {
    padding: .35rem .55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    color: var(--text);
}

.fm-fc .fm-matrix-cell,
.fm-fc .fm-matrix-year,
.fm-fc .fm-matrix-total {
    padding: .3rem .55rem;
    text-align: right;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    color: var(--text);
    font-weight: 400;
}

.fm-fc .fm-matrix--horizon .fm-matrix-month,
.fm-fc .fm-matrix--horizon td.fm-matrix-cell {
    width: 5.25rem;
    min-width: 5.25rem;
    max-width: 5.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fm-fc .fm-matrix--horizon .fm-matrix-year,
.fm-fc .fm-matrix--horizon .fm-matrix-total {
    width: 5.5rem;
    min-width: 5.5rem;
    max-width: 5.5rem;
}

.fm-fc .fm-matrix-year,
.fm-fc .fm-matrix-total {
    font-weight: 500;
}

.fm-fc .fm-matrix-row-key {
    font-weight: 600;
}

.fm-fc .fm-matrix-row-dim {
    opacity: .5;
}

/* Текущий фон блока — тёмная строка; соседняя чуть светлее, чтобы вести взгляд по ряду. */
.fm-fc .fm-matrix tbody tr:nth-child(odd) > td {
    background: var(--surface);
}

.fm-fc .fm-matrix tbody tr:nth-child(even) > td {
    background: color-mix(in srgb, var(--text) 7.5%, var(--surface));
}

.fm-fc .fm-matrix tbody tr:nth-child(odd) > td.fm-matrix-year,
.fm-fc .fm-matrix tbody tr:nth-child(odd) > td.fm-matrix-total {
    background: color-mix(in srgb, var(--text) 4%, var(--surface));
}

.fm-fc .fm-matrix tbody tr:nth-child(even) > td.fm-matrix-year,
.fm-fc .fm-matrix tbody tr:nth-child(even) > td.fm-matrix-total {
    background: color-mix(in srgb, var(--text) 11%, var(--surface));
}

.fm-fc .fm-matrix tbody tr.fm-matrix-selectable {
    cursor: pointer;
}

.fm-fc .fm-matrix tbody tr.fm-matrix-selectable:hover > td {
    background: color-mix(in srgb, var(--text) 11%, var(--surface));
}

.fm-fc .fm-matrix tbody tr.fm-matrix-row-selected > td,
.fm-fc .fm-matrix tbody tr.fm-matrix-row-selected:hover > td {
    background: color-mix(in srgb, var(--brand, #38BDF8) 16%, var(--surface));
}

.fm-fc .fm-matrix tbody tr.fm-matrix-row-selected > td.fm-matrix-year,
.fm-fc .fm-matrix tbody tr.fm-matrix-row-selected > td.fm-matrix-total,
.fm-fc .fm-matrix tbody tr.fm-matrix-row-selected:hover > td.fm-matrix-year,
.fm-fc .fm-matrix tbody tr.fm-matrix-row-selected:hover > td.fm-matrix-total {
    background: color-mix(in srgb, var(--brand, #38BDF8) 22%, var(--surface));
}

.fm-fc .fm-matrix tbody tr.fm-matrix-row-selected > td.fm-matrix-sticky {
    box-shadow: inset 3px 0 0 var(--brand, #38BDF8);
}

.fm-fc .fm-matrix-note {
    text-align: left;
    white-space: normal;
    max-width: 22rem;
}

/*
    Панель управления: показатель × проект. Комментарий должен переноситься,
    иначе таблица снова разъезжается по ширине экрана.
*/
.fm-fc .fm-matrix--panel {
    table-layout: fixed;
    width: 100%;
    white-space: normal;
}

.fm-fc .fm-matrix--panel .fm-matrix-col-indicator {
    width: 14rem;
}

.fm-fc .fm-matrix--panel .fm-matrix-col-project {
    width: 8.75rem;
}

.fm-fc .fm-matrix--panel .fm-matrix-col-comment {
    width: auto;
}

.fm-fc .fm-matrix--panel .fm-matrix-sticky {
    width: 14rem;
    min-width: 14rem;
    max-width: 16rem;
    white-space: normal;
}

.fm-fc .fm-matrix--panel .fm-matrix-head {
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}

.fm-fc .fm-matrix--panel .fm-matrix-cell {
    text-align: left;
    white-space: nowrap;
}

.fm-fc .fm-matrix--panel .fm-matrix-comment,
.fm-fc .fm-matrix--panel .fm-matrix-comment-head {
    text-align: left;
    white-space: normal;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    min-width: 16rem;
    color: color-mix(in srgb, var(--text) 72%, transparent);
}

.fm-fc .fm-matrix tbody tr.fm-matrix-section > td {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding-top: .85rem;
    color: color-mix(in srgb, var(--text) 70%, transparent);
}

.fm-fc .fm-negative {
    color: var(--attn, var(--mud-palette-error));
}

/*
    Месяц первого разрыва. Сплошная заливка warning-lighten давала белый текст на ярко-жёлтом:
    цвет фона задан палитрой, а цвет текста — темой, и в тёмной теме они не согласованы.
    Прозрачный оттенок ложится поверх фона строки, поэтому текст остаётся читаемым в любой теме,
    а метку слева видно так же хорошо, как заливку.
*/
.fm-fc .fm-gap {
    box-shadow: inset 3px 0 0 var(--mud-palette-warning);
    font-weight: 600;
}

.fm-fc .fm-matrix tbody tr > td.fm-gap {
    background-image: linear-gradient(
        color-mix(in srgb, var(--mud-palette-warning) 16%, transparent),
        color-mix(in srgb, var(--mud-palette-warning) 16%, transparent));
}

/* Рычаги групп и фильтр деталей */
.fm-fc .fm-levers {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-bottom: .5rem;
    max-width: 60rem;
}

.fm-fc .fm-levers .mud-input-control {
    max-width: 11rem;
}

.fm-fc .fm-lever-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 11rem;
}

.fm-fc .fm-lever-field-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
}

.fm-fc .fm-lever-field .fm-edit,
.fm-fc .fm-lever-field .fm-cell-num {
    justify-content: flex-start;
}

.fm-fc .fm-cell-lever {
    min-width: 6.5rem;
    text-align: left;
}

.fm-fc .fm-group-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: .85rem;
    margin-bottom: .5rem;
}

.fm-fc .fm-lines-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-bottom: .75rem;
}

.fm-fc .fm-lines-filter .mud-input-control {
    max-width: 18rem;
}

.fm-fc .fm-cell-input {
    width: 9.5rem;
    max-width: 14rem;
    text-align: right;
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg) 55%, var(--surface));
    color: var(--text);
    font: inherit;
    font-variant-numeric: tabular-nums lining-nums;
    padding: .15rem .35rem;
    box-sizing: border-box;
}

.fm-fc .fm-matrix--horizon .fm-cell-input {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.fm-fc .fm-cell-input:focus {
    position: relative;
    z-index: 4;
    border-color: var(--brand, var(--mud-palette-primary));
    background: var(--surface);
    outline: none;
}

.fm-fc .fm-cell-input:disabled {
    opacity: .5;
}

.fm-fc .fm-edit {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-height: 28px;
    width: 100%;
}

.fm-fc .fm-cell-display,
.fm-fc .fm-cell-num {
    font-variant-numeric: tabular-nums lining-nums;
    font-weight: 400;
    letter-spacing: -0.2px;
    color: var(--text);
}

.fm-fc .fm-cell-display {
    appearance: none;
    background: color-mix(in srgb, var(--bg) 35%, transparent);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    min-width: 4.8rem;
    min-height: 28px;
    padding: .15rem .4rem;
    text-align: right;
    box-sizing: border-box;
}

.fm-fc .fm-matrix--horizon .fm-cell-display {
    width: 100%;
    min-width: 0;
}

.fm-fc .fm-cell-display:hover,
.fm-fc .fm-cell-display:focus-visible {
    border-color: color-mix(in srgb, var(--border) 80%, transparent);
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    outline: none;
}

.fm-fc .fm-cell-save {
    appearance: none;
    background: color-mix(in srgb, var(--fact, #4ade80) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--fact, #4ade80) 40%, transparent);
    border-radius: 6px;
    color: var(--fact, #4ade80);
    cursor: pointer;
    font: inherit;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .02em;
    padding: .18rem .5rem;
    white-space: nowrap;
}

.fm-fc .fm-cell-save:hover {
    background: color-mix(in srgb, var(--fact, #4ade80) 26%, transparent);
}

.fm-fc .fm-cell-wide {
    width: 18rem;
    text-align: left;
}

.fm-fc .fm-assumptions {
    margin: .25rem 0 .5rem 1.25rem;
    font-size: .9rem;
}

.fm-fc .fm-assumptions li {
    margin-bottom: .2rem;
}

/* Диалог публикации */
.fm-fc .fm-publish {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .fm-fc .fm-publish {
        grid-template-columns: 1fr;
    }
}

.fm-fc .fm-publish h4 {
    margin: .5rem 0 .35rem;
    font-size: .95rem;
}

.fm-fc .fm-diff {
    margin: 0 0 .5rem 1.1rem;
    font-size: .85rem;
}

.fm-fc .fm-warning-ack {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding-bottom: .35rem;
    margin-bottom: .35rem;
}

.fm-fc .fm-history-actions {
    text-align: left;
    white-space: nowrap;
}

/* График остатков */
.fm-fc .fm-chart {
    width: 100%;
    height: 320px;
    display: block;
}

.fm-fc .fm-chart-line {
    fill: none;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.fm-fc .fm-chart-dim {
    opacity: .25;
}

/*
    Цвета серий заданы явно, а не палитрой темы: в ней info и secondary оба синие, а warning
    достаётся и проекту, и порогу ликвидности — на графике получались неразличимые пары.
    Это данные, а не оформление: они должны читаться одинаково в любой теме.
*/
.fm-fc {
    --fm-series-group: #A855F7;
    --fm-series-amani: #38BDF8;
    --fm-series-nusadua: #22C55E;
    --fm-series-maldives: #F59E0B;
    --fm-series-desire: #F472B6;
    --fm-series-cushion: #EF4444;
    --fm-series-bar: #7AA2D8;
}

.fm-fc .fm-chart-group { stroke: var(--fm-series-group); stroke-width: 3; }
.fm-fc .fm-chart-amani { stroke: var(--fm-series-amani); }
.fm-fc .fm-chart-nusadua { stroke: var(--fm-series-nusadua); }
.fm-fc .fm-chart-maldives { stroke: var(--fm-series-maldives); }
.fm-fc .fm-chart-desire { stroke: var(--fm-series-desire); }

.fm-fc .fm-chart-bar {
    fill: var(--fm-series-bar);
    opacity: .9;
}

.fm-fc .fm-chart-zero {
    stroke: var(--mud-palette-text-secondary);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.fm-fc .fm-chart-cushion {
    stroke: var(--fm-series-cushion);
    stroke-dasharray: 6 4;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.fm-fc .fm-chart-grid {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1;
    opacity: .5;
    vector-effect: non-scaling-stroke;
}

.fm-fc .fm-chart-tick {
    fill: var(--mud-palette-text-secondary);
    font-size: 11px;
}

.fm-fc .fm-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    font-size: .8rem;
    margin-top: .35rem;
}

.fm-fc .fm-chart-key::before {
    content: "";
    display: inline-block;
    width: .9rem;
    height: 2px;
    margin-right: .35rem;
    vertical-align: middle;
    background: currentColor;
}

.fm-fc .fm-chart-key.fm-chart-group { color: var(--fm-series-group); }
.fm-fc .fm-chart-key.fm-chart-amani { color: var(--fm-series-amani); }
.fm-fc .fm-chart-key.fm-chart-nusadua { color: var(--fm-series-nusadua); }
.fm-fc .fm-chart-key.fm-chart-maldives { color: var(--fm-series-maldives); }
.fm-fc .fm-chart-key.fm-chart-desire { color: var(--fm-series-desire); }
.fm-fc .fm-chart-key-bar { color: var(--fm-series-bar); }
.fm-fc .fm-chart-key-cushion { color: var(--fm-series-cushion); }

/* Вертикальная шкала графика */
.fm-fc .fm-chart-axis {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1;
}

.fm-fc .fm-chart-tick-value {
    text-anchor: end;
}

/*
    Расшифровка графика. Цветных ярлыков мало: они называют линию, но не говорят, что вообще
    нарисовано — где остаток, где стройка в своём масштабе и что означает пунктир.
*/
.fm-fc .fm-chart-guide {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .2rem .75rem;
    margin: .5rem 0 0;
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
}

.fm-fc .fm-chart-guide dt {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.fm-fc .fm-chart-guide dd {
    margin: 0;
}

@media (max-width: 700px) {
    .fm-fc .fm-chart-guide {
        grid-template-columns: 1fr;
    }

    .fm-fc .fm-chart-guide dd {
        margin-bottom: .35rem;
    }
}

/*
    Правая шкала — для столбиков стройки. Месячная стройка около миллиона против остатка
    в семнадцать: на денежной шкале столбики не видны в принципе, а без своей оси их высота
    выглядела бы величиной по левой оси. Поэтому у них собственные деления справа.
*/
.fm-fc .fm-chart-axis-bar {
    stroke: var(--fm-series-bar);
    opacity: .6;
}

.fm-fc .fm-chart-tick-bar {
    fill: var(--fm-series-bar);
    text-anchor: start;
}