.custom-button .tn-atom {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.custom-button .tn-atom::after {
    content: "";
    min-width: 35px;
    min-height: 35px;
    margin-left: 5px;
    background: url("https://static.tildacdn.com/tild6533-3834-4630-a462-336466623761/circle.svg") center no-repeat;
}

.custom-button .tn-atom {
    border: 1px solid #ffffff5c !important;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0px 2px 4px 0px rgba(255, 255, 255, 0.4),
                inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2);
}
.menubutton .tn-atom {
    display: flex;
    flex-flow: row nowrap;     /* обычный порядок: before -> content -> after */
    justify-content: flex-end; /* прижать всё к правому краю */
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px;

    /* визуальный стиль (glass -> заменён цветом) */
    border: border: 1px solid #ffffff5c !important;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0px 2px 4px 0px rgba(255, 255, 255, 0.4),
                inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2);
}

/* Иконка — перед текстом (слева от текста) */
.menubutton .tn-atom::before {
    content: "";
    display: inline-block;
    width: 35px;
    height: 35px;
    margin-right: 12px; /* расстояние между иконкой и текстом */
    flex-shrink: 0;     /* не даём иконке сжиматься */
    background: url("https://static.tildacdn.com/tild3735-3239-4765-b331-643062343030/menu_icon.svg") center no-repeat;
    background-size: contain;
}

/* Гарантируем, что сам текст не растянется и остаётся справа */
.menubutton .tn-atom > * {
    /* Если текст — единственный прямой потомок, он займёт ровно нужное место */
    flex: 0 1 auto;
    text-align: right; /* на всякий случай — текст внутри выравнивается вправо */
}
.custombtnbright .tn-atom {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: #000000 !important; /* чёрный текст */
    border: 1px solid #00000033 !important; /* лёгкая обводка */
    backdrop-filter: blur(10px);
    background: #C1EF57 !important; /* ярко-зелёный фон */
    box-shadow:
        inset 0px 2px 4px 0px rgba(255, 255, 255, 0.4),
        inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2);
    position: relative; /* обязательно, чтобы z-index работал */
    z-index: 1000; /* делает кнопку поверх */
}

.custombtnbright .tn-atom::after {
    content: "";
    min-width: 35px;
    min-height: 35px;
    margin-left: 5px;
    background: url("https://static.tildacdn.com/tild3734-6462-4330-b839-643262333231/whitearrow2.svg") center no-repeat;
    pointer-events: none; /* чтобы стрелка не мешала клику */
}
.menubuttonright .tn-atom {
    display: flex;
    flex-flow: row nowrap;     /* порядок: текст → иконка */
    justify-content: flex-start; /* контент прижат к левому краю */
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 20px;

    /* стиль кнопки */
     border: border: 1px solid #ffffff5c !important;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0px 2px 4px 0px rgba(255, 255, 255, 0.4),
                inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2);
}

/* Иконка справа от текста */
.menubuttonright .tn-atom::after {
    content: "";
    display: inline-block;
    width: 35px;
    height: 35px;
    margin-left: 12px; /* расстояние между текстом и иконкой */
    flex-shrink: 0;
    background: url("https://static.tildacdn.com/tild3735-3239-4765-b331-643062343030/menu_icon.svg") center no-repeat;
    background-size: contain;
}

/* Текст выравнивается по левому краю */
.menubuttonright .tn-atom > * {
    flex: 0 1 auto;
    text-align: left;
}
.tabs-btn .tn-atom,
.tabs-btn1 .tn-atom,
.tabs-btn11 .tn-atom,
.tabs-btn12 .tn-atom,
.tabs-btn13 .tn-atom,
.tabs-btn14 .tn-atom,
.tabs-btn15 .tn-atom {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color: #000000 !important;
    border: 1px solid #00000033 !important;
    backdrop-filter: blur(10px);
    background: #C1EF57 !important;
    box-shadow:
        inset 0px 2px 4px 0px rgba(255, 255, 255, 0.4),
        inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1000;
}

/* отключаем иконку для всех */
.tabs-btn .tn-atom::after,
.tabs-btn1 .tn-atom::after,
.tabs-btn11 .tn-atom::after,
.tabs-btn12 .tn-atom::after,
.tabs-btn13 .tn-atom::after,
.tabs-btn14 .tn-atom::after,
.tabs-btn15 .tn-atom::after {
    content: none !important;
    display: none !important;
}
.tabs-btn2 .tn-atom,
.tabs-btn3 .tn-atom,
.tabs-btn4 .tn-atom,
.tabs-btn5 .tn-atom,
.tabs-btn6 .tn-atom,
.tabs-btn7 .tn-atom {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;

    border: 1px solid #ffffff5c !important;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        inset 0px 2px 4px 0px rgba(255, 255, 255, 0.4),
        inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2);
}

/* убираем иконку полностью */
.tabs-btn2 .tn-atom::after,
.tabs-btn3 .tn-atom::after,
.tabs-btn4 .tn-atom::after,
.tabs-btn5 .tn-atom::after,
.tabs-btn6 .tn-atom::after,
.tabs-btn7 .tn-atom::after {
    content: none !important;
    display: none !important;
}