.flat-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px; /* расстояние между строками */
}

/* Ячейки */
.flat-table th,
.flat-table td {
    padding: 10px 14px;
    border: none;
    text-align: left;
    white-space: nowrap;
}

.flat-table th {
    padding: 10px 4px ;
}

/* Header как отдельная "строка-карточка" */
.flat-table thead tr th {
    background: var(--on-background-color);
    color: var(--primary-text-color);
    font-weight: 600;
}

/* Скругляем header */
.flat-table thead tr th:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.flat-table thead tr th:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Тело таблицы — каждая строка отдельная карточка */
.flat-table tbody tr td {
    background: var(--background-color);
}

/* Чередование */
.flat-table tbody tr:nth-child(even) td {
    background: var(--on-background-color);
}

/* Скругляем каждую строку */
.flat-table tbody tr td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.flat-table tbody tr td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}