.glass-surface {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.26s ease-out;
}

.glass-surface__filter {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: -1;
}

.glass-surface__content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border-radius: inherit;
    position: relative;
    z-index: 1;
}

.glass-surface--svg {
    background: light-dark(hsl(0 0% 100% / var(--glass-frost, 0)), hsl(0 0% 0% / var(--glass-frost, 0)));
    backdrop-filter: var(--filter-id) saturate(var(--glass-saturation, 1));
    box-shadow:
        0 0 2px 1px
            light-dark(
                color-mix(in oklch, rgb(48, 72, 189), transparent 85%),
                color-mix(in oklch, white, transparent 65%)
            )
            inset,
        /* 0 0 10px 4px
            light-dark(color-mix(in oklch, black, transparent 90%), color-mix(in oklch, white, transparent 85%)) inset, */
        0px 4px 16px rgba(17, 17, 26, 0.05),
        0px 8px 24px rgba(17, 17, 26, 0.05),
        0px 16px 56px rgba(17, 17, 26, 0.05),
        0px 4px 16px rgba(17, 17, 26, 0.05) inset,
        0px 8px 24px rgba(17, 17, 26, 0.05) inset,
        0px 16px 56px rgba(17, 17, 26, 0.05) inset;
}

.glass-surface--fallback {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 8px 32px 0 rgba(31, 38, 135, 0.2),
        0 2px 16px 0 rgba(31, 38, 135, 0.1),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
}

@media (prefers-color-scheme: dark) {
    .glass-surface--fallback {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
        -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow:
            inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
            inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);
    }
}

@supports not (backdrop-filter: blur(10px)) {
    .glass-surface--fallback {
        background: rgba(255, 255, 255, 0.4);
        box-shadow:
            inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
            inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
    }

    .glass-surface--fallback::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.15);
        border-radius: inherit;
        z-index: -1;
    }
}

@supports not (backdrop-filter: blur(10px)) {
    @media (prefers-color-scheme: dark) {
        .glass-surface--fallback {
            background: rgba(0, 0, 0, 0.4);
        }

        .glass-surface--fallback::before {
            background: rgba(255, 255, 255, 0.05);
        }
    }
}

.glass-surface:focus-visible {
    outline: 2px solid light-dark(#007aff, #0a84ff);
    outline-offset: 2px;
}
:root {
    --mouse-y: 10px;
    --mouse-x: 10px;
}

@property --color-start-block {
    syntax: "<color>";
    inherits: false;
    initial-value: #fff0;
}

@property --color-end-block {
    syntax: "<color>";
    inherits: false;
    initial-value: #fff0;
}

._Block_xf1ob_18 {
    background: radial-gradient(
        circle at var(--mouse-x) var(--mouse-y),
        var(--color-start-block),
        var(--color-end-block)
    );

    transition:
        --color-start-block 0.5s ease,
        all 0.5s ease;
}
@property --color-start {
    syntax: "<color>";
    inherits: false;
    initial-value: #1415151a;
}

@property --color-end {
    syntax: "<color>";
    inherits: false;
    initial-value: #ffffff;
}

@property --checkbox-gradient-x {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: -10%;
}

@property --checkbox-gradient-y {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: -10%;
}

._Label_1r5yj_25 {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
}

._Root_1r5yj_32 {
    border: 1px solid #fff;
    background-color: rgb(158, 158, 158);
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 2px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: radial-gradient(
        circle at var(--checkbox-gradient-x) var(--checkbox-gradient-y),
        var(--color-start) 30%,
        var(--color-end) 80%,
        var(--color-end)
    );

    &:hover {
        --checkbox-gradient-x: 0%;
        --checkbox-gradient-y: 150%;
        --color-start: #66c194;
        --color-end: #b6e3cd;
    }
    &[data-unchecked] {
        --checkbox-gradient-x: 150%;
        --checkbox-gradient-y: 150%;
        --color-start: #66c194;
        --color-end: #b6e3cd;
    }
    &:focus-visible {
        outline: 4px solid #68bd93;
    }
    box-shadow: 2px 4px 8px 0px #e8e8e86a;
    transition:
        --color-start 0.5s ease,
        --color-end 0.5s ease,
        --checkbox-gradient-x 0.6s ease,
        --checkbox-gradient-y 1s ease;

    flex-shrink: 0;
}

._Indicator_1r5yj_74 {
    display: block;
    overflow: hidden;
    width: 0;
    transition: all 0.3s ease-in;
    &[data-unchecked] {
        width: 100%;
    }
}

._Text_1r5yj_84 {
    user-select: none;
    flex-grow: 1;
    margin-top: 2px;
}
._Button_1i3v3_1 {
    outline: none;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    background-color: #e3e3e3;
    backdrop-filter: blur(35px);
    position: relative;

    &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 16px;
        background: #fff;
        left: 7px;
        top: 3px;
        filter: blur(10px);
    }

    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 16px;
        background: #fff;
        right: 7px;
        bottom: 3px;
        filter: blur(10px);
    }

    &[data-type="Primary"] {
        color: #fff;
        background: rgba(126, 207, 166, 0.61);

        box-shadow:
            1px -32px 19px -24px rgb(206, 255, 232),
            inset 1px 0px 1px 0px rgba(255, 255, 255, 0.68),
            inset -1px 0px 1.1px 0px rgba(255, 255, 255, 0.43),
            inset -0.6px -0.4px 0.5px 1px rgba(255, 255, 255, 0.45),
            inset 0px 0px 1px 3px rgba(0, 0, 0, 0.05),
            21px 22px 17px -10px rgba(220, 255, 225, 0.62),
            2px 4px 26.1px -9px rgba(29, 92, 41, 0.13),
            26px 21px 23.8px 1px rgba(0, 0, 0, 0.1),
            /* bottom */ inset 0px 0px 19.5px -1px rgba(0, 0, 0, 0.15);
    }

    &[data-type="Default"] {
        color: #8e8e8e;
        background: #e3e3e3;

        box-shadow:
            1px -32px 19px -24px rgba(232, 244, 239, 1),
            inset 1px 0px 1px 0px rgba(255, 255, 255, 0.68),
            inset -1px 0px 0.1px 0px rgba(255, 255, 255, 0.43),
            inset -0.6px -0.4px 0.5px 1px rgba(255, 255, 255, 0.49),
            inset 0px 0px 1px 3px rgba(40, 103, 191, 0.05),
            21px 22px 17px -10px rgba(220, 253, 255, 0.25),
            2px 4px 26.1px -9px rgba(36, 104, 117, 0.13),
            26px 21px 23.8px 1px rgba(0, 0, 0, 0.08),
            /* bottom */ inset 0px 0px 19.5px -1px rgba(0, 0, 0, 0.08);
    }

    &[data-variant="Round"] {
        border-radius: 30px;
        padding: 0 30px;
    }

    &[data-variant="Box"] {
        border-radius: 10px;
    }

    &[data-size="Large"] {
        min-width: 56px;
        height: 54px;
        font-size: 20px;

        &[data-variant="Round"] {
            padding: 0 40px;
        }
    }

    &[data-left-split="1"] {
        border-start-start-radius: 8px;
        border-end-start-radius: 8px;
    }

    &[data-size="Normal"] {
        min-width: 48px;
        height: 46px;
        font-size: 18px;

        &[data-variant="Round"] {
            padding: 0 30px;
        }
    }

    &[data-size="Small"] {
        min-width: 42px;
        font-size: 16px;
        height: 40px !important;

        &[data-variant="Round"] {
            padding: 0 20px;
        }
    }

    &[data-ws="1"] {
        box-shadow: none;
    }
}
._Input_16dzj_1 {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 4px;
    padding-left: 22px;

    border-radius: 22px;

    outline: none;
    &:focus-visible {
        outline: none;
        background-color: #28323500;
    }
    &:active {
        outline: none;
    }

    background-color: #2832350b;
    box-shadow:
        2px 2px 3.1px 0px rgba(0, 0, 0, 0.03),
        inset -3px -2px 2.3px 0px rgba(255, 255, 255, 0.7),
        -2px -3px 2.3px 0px rgba(255, 255, 255, 0.3),
        /*  down    */ inset 4px 5px 14.4px -3px rgba(0, 0, 0, 0.15);

    transition:
        outline 0.7s,
        background-color 0.5s;

    & input {
        outline: none;
        flex-grow: 1;
        background: transparent;
        border: none;
        /* padding: 10px 0; */

        &:-webkit-autofill,
        &:-webkit-autofill:hover,
        &:-webkit-autofill:focus,
        &:-webkit-autofill:active {
            transition: background-color 600000s ease-in-out 0s;

            outline: none !important;
        }
    }

    &:has(textarea) {
        padding: 30px 0;
    }
}
@property --color-start-tab {
    syntax: "<color>";
    inherits: false;
    initial-value: #d7e0e7; /* Белый для базового состояния */
}

@property --color-end-tab {
    syntax: "<color>";
    inherits: false;
    initial-value: #e1edf0; /* Белый для базового состояния */
}

@property --tab-gradient-x {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0%;
}

@property --tab-gradient-y {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0%;
}

._TabBlock_1e6cn_25 {
    background: #336eb110;
    padding: 6px;
    border-radius: 100px;
    display: inline-flex;
    gap: 5px;
}

._Tab_1e6cn_25 {
    cursor: pointer;
    border: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: #6e7175;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 50px;

    background: radial-gradient(
        at var(--tab-gradient-x) var(--tab-gradient-y),
        var(--color-start-tab) 0%,
        var(--color-end-tab) 100%
    );

    box-shadow:
        0px 4px 10px rgba(0, 0, 0, 0.03),
        inset 0px 2px 6px 2px #fff,
        inset 1px 1px 2px #fff;

    transition:
        color 0.3s ease,
        transform 0.1s ease-in-out,
        --color-start-tab 0.5s ease,
        --color-end-tab 0.5s ease,
        --tab-gradient-x 0.6s ease,
        --tab-gradient-y 0.5s ease;

    &:hover {
        /* color: #fff; */
        --tab-gradient-x: 50%;
        --tab-gradient-y: 80%;
        --color-start-tab: #93eec1;
        --color-end-tab: #ffffff;
    }

    &._Active_1e6cn_74 {
        color: white;
        --tab-gradient-x: 0%;
        --tab-gradient-y: 50%;
        --color-start-tab: #86deb2;
        --color-end-tab: #6ecead;

        box-shadow:
            0px 2px 8px rgba(67, 241, 151, 0.421),
            inset 0px 2px 6px 2px #fff,
            inset 1px 1px 2px #fff;

        &:hover {
            --tab-gradient-x: 50%;
            --tab-gradient-y: 90%;
            --color-end-tab: #86deb2;
            --color-start-tab: #3daf87;
        }
    }

    &:active {
        /* transform: translateY(2px); */
    }

    &._Small_1e6cn_98 {
        box-shadow:
            0px 4px 10px rgba(0, 0, 0, 0.03),
            inset 0px 1px 4px 1px #fff,
            inset 1px 1px 2px #fff;

        padding: 6px 16px;
        &:active {
            /* transform: translateY(1px); */
        }
    }

    &:focus-visible {
        outline: 3px solid #68bd93;
    }
}
@property --color-start {
    syntax: "<color>";
    inherits: false;
    initial-value: #1415151a;
}

@property --color-end {
    syntax: "<color>";
    inherits: false;
    initial-value: #ffffff;
}

@property --checkbox-gradient-x {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: -10%;
}

@property --checkbox-gradient-y {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: -10%;
}

._Label_180so_25 {
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
}

._Root_180so_32 {
    border: 1px solid #fff;
    background-color: rgb(158, 158, 158);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50px;
    background: radial-gradient(
        circle at var(--checkbox-gradient-x) var(--checkbox-gradient-y),
        var(--color-start) 30%,
        var(--color-end) 80%,
        var(--color-end)
    );

    &:hover {
        --checkbox-gradient-x: 0%;
        --checkbox-gradient-y: 150%;
        --color-start: #66c194;
        --color-end: #b6e3cd;
    }
    &[data-checked] {
        --checkbox-gradient-x: 150%;
        --checkbox-gradient-y: 150%;
        --color-start: #66c194;
        --color-end: #b6e3cd;
    }
    &:focus-visible {
        outline: 4px solid #68bd93;
    }
    box-shadow: 2px 4px 8px 0px #e8e8e86a;
    transition:
        --color-start 0.5s ease,
        --color-end 0.5s ease,
        --checkbox-gradient-x 0.6s ease,
        --checkbox-gradient-y 1s ease;
}

._Indicator_180so_71 {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50px;
    background: #ffffff;
    transition: transform 1s cubic-bezier(0.4, 0.22, 0.13, 1.59);

    &[data-starting-style] {
        transform: scale(0);
    }

    &[data-unchecked] {
        transition-delay: 0s;
        transform: scale(0);
    }
    &[data-checked] {
        animation-delay: 0.2s;
        transform: scale(1);
    }
}

._Text_180so_93 {
    user-select: none;
}
/* Лейбл над селектом */
._Label_42eza_2 {
    display: block;
    margin-bottom: 8px;
    margin-left: 12px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.8;
}

/* Основная кнопка (Триггер) в стиле .Input */
._Select_42eza_12 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;

    padding: 12px 16px 12px 22px;
    border-radius: 22px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: inherit;

    background-color: #2832350b;
    box-shadow:
        2px 2px 3.1px 0px rgba(0, 0, 0, 0.03),
        inset -3px -2px 2.3px 0px rgba(255, 255, 255, 0.7),
        -2px -3px 2.3px 0px rgba(255, 255, 255, 0.3),
        /* down */ inset 4px 5px 14.4px -3px rgba(0, 0, 0, 0.15);

    outline: none;
    transition:
        outline 0.7s,
        background-color 0.5s,
        box-shadow 0.3s;

    &:focus-visible,
    &[data-popup-open] {
        outline: none;
        background-color: #28323500;
    }
}

/* Текст выбранного значения */
._Value_42eza_47 {
    flex-grow: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &[data-placeholder] {
        opacity: 0.6;
    }
}

/* Иконка-стрелочка */
._SelectIcon_42eza_60 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    color: inherit;
    transition: transform 0.2s ease;

    /* Поворот стрелки при открытии */
    [data-popup-open] & {
        transform: rotate(180deg);
    }
}

/* Позиционирование всплывающего окна */
._Positioner_42eza_75 {
    z-index: 9999;
}

/* Контейнер всплывающего окна */
._Popup_42eza_80 {
    min-width: var(--anchor-width);
    max-height: 280px;
    overflow-y: auto;

    background: #ffffff;
    border-radius: 18px;
    padding: 6px;
    box-shadow:
        6px 6px 16px 0px rgba(0, 0, 0, 0.12),
        -4px -4px 12px 0px rgba(255, 255, 255, 0.9);

    /* Анимации появления */
    transform-origin: var(--transform-origin);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;

    &[data-starting-style],
    &[data-ending-style] {
        opacity: 0;
        transform: scale(0.96);
    }
}

/* Список элемента */
._List_42eza_106 {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Опция внутри списка */
._Option_42eza_116 {
    padding: 10px 16px;
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    outline: none;
    font-size: 15px;
    transition:
        background-color 0.2s,
        color 0.2s;

    &:hover,
    &[data-highlighted] {
        background-color: #2832350f;
    }

    &[data-selected] {
        font-weight: 600;
        background-color: #2832351a;
    }
}

/* Стрелочки скролла */
/* .ScrollArrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    cursor: pointer;
    opacity: 0.5;
} */