* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --white: #ffffff;
    --black: #000000;
    --purple: #9900ff;
    --ice: #3d8cff;
    --lavender: #b66dff;
    --gold: #ffc83d;
    --mint: #3cb186;
    --teal: #48d4c4;
    --coral: #ff6f91;
    --periwinkle: #8f9bff;
    --tangerine: #ff9048;
    --red: #ff5d7d;
    --pink: #9356f5;
    --pink-rgb: 147, 86, 245;
    --split-top: 63%;
    --split-bottom: 66%;
    --white-top: 37%;
    --white-bottom: 34%;
    --white-avg: 35.5%;
    --split-avg: 64.5%;
    --text-offset-x: 11px;
    --text-offset-y: 3px;
    --text-pad-split: 0.5em;
    --glow-zal: drop-shadow(0 0 8px rgba(var(--pink-rgb), 0.4))
                drop-shadow(0 0 22px rgba(var(--pink-rgb), 0.22))
                drop-shadow(0 0 36px rgba(var(--pink-rgb), 0.1));
    --glow-zal-hover: drop-shadow(0 0 12px rgba(var(--pink-rgb), 0.55))
                      drop-shadow(0 0 30px rgba(var(--pink-rgb), 0.32))
                      drop-shadow(0 0 48px rgba(var(--pink-rgb), 0.16));
    --glow-days: drop-shadow(0 0 8px rgba(255, 255, 255, 0.22))
                 drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
    --glow-days-hover: drop-shadow(0 0 12px rgba(255, 255, 255, 0.32))
                       drop-shadow(0 0 28px rgba(255, 255, 255, 0.14));
    --glow-vra: drop-shadow(0 0 8px rgba(61, 140, 255, 0.38))
                drop-shadow(0 0 22px rgba(61, 140, 255, 0.18));
    --glow-vra-hover: drop-shadow(0 0 12px rgba(61, 140, 255, 0.52))
                      drop-shadow(0 0 30px rgba(61, 140, 255, 0.26));
    --glow-zra: drop-shadow(0 0 8px rgba(255, 93, 125, 0.38))
                drop-shadow(0 0 22px rgba(255, 93, 125, 0.18));
    --glow-zra-hover: drop-shadow(0 0 12px rgba(255, 93, 125, 0.52))
                      drop-shadow(0 0 30px rgba(255, 93, 125, 0.26));
    --glow-zamery: drop-shadow(0 0 8px rgba(255, 111, 145, 0.32))
                   drop-shadow(0 0 22px rgba(255, 111, 145, 0.14));
    --glow-zamery-hover: drop-shadow(0 0 12px rgba(255, 111, 145, 0.46))
                         drop-shadow(0 0 30px rgba(255, 111, 145, 0.2));
    --glow-wishes: drop-shadow(0 0 8px rgba(255, 200, 61, 0.34))
                   drop-shadow(0 0 24px rgba(255, 200, 61, 0.16));
    --glow-wishes-hover: drop-shadow(0 0 12px rgba(255, 200, 61, 0.48))
                         drop-shadow(0 0 32px rgba(255, 200, 61, 0.24));
    --glow-cards: drop-shadow(0 0 8px rgba(61, 255, 184, 0.32))
                  drop-shadow(0 0 22px rgba(61, 255, 184, 0.14));
    --glow-cards-hover: drop-shadow(0 0 12px rgba(61, 255, 184, 0.46))
                        drop-shadow(0 0 30px rgba(61, 255, 184, 0.2));
    --glow-dev: drop-shadow(0 0 8px rgba(143, 155, 255, 0.32))
                drop-shadow(0 0 22px rgba(143, 155, 255, 0.14));
    --glow-dev-hover: drop-shadow(0 0 12px rgba(143, 155, 255, 0.46))
                      drop-shadow(0 0 30px rgba(143, 155, 255, 0.2));
    --glow-dev2: drop-shadow(0 0 8px rgba(255, 144, 72, 0.32))
                 drop-shadow(0 0 22px rgba(255, 144, 72, 0.14));
    --glow-dev2-hover: drop-shadow(0 0 12px rgba(255, 144, 72, 0.46))
                       drop-shadow(0 0 30px rgba(255, 144, 72, 0.2));
    --font: 'Bebas Neue', 'Anton', Impact, 'Arial Black', sans-serif;
}

body {
    background-color: var(--black);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font);
}

/* ── Logo (верх страницы) ── */

.site-header {
    width: 100%;
    padding: 40px 24px 0;
    text-align: center;
    flex-shrink: 0;
}

.logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    user-select: none;
}

.logo__top {
    font-size: clamp(2.85rem, 10.5vw, 4.25rem);
    color: var(--white);
    letter-spacing: 0.18em;
    line-height: 1;
    font-weight: 400;
}

.logo__line {
    display: block;
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.35);
}

.logo__bottom {
    font-size: clamp(1.75rem, 5.8vw, 2.65rem);
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.42em;
    padding-left: 0.42em;
    line-height: 1;
    font-weight: 400;
}

/* ── Main content ── */

.page {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 24px 48px;
}

/* ── Navigation buttons ── */

.buttons {
    display: flex;
    flex-direction: column;
    gap: 38px;
    align-items: center;
    margin-top: 10px;
}

.buttons .pill-btn {
    width: min(310px, 86vw);
    height: 68px;
}

.buttons .pill-btn__text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.7rem, 6vw, 2.2rem);
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    translate: 0 var(--text-offset-y);
}

.buttons .pill-btn__text-inner {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    white-space: nowrap;
    line-height: 1;
    text-align: center;
}

.buttons .pill-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.buttons .pill-btn__icon img {
    display: block;
    width: 155px;
    height: 155px;
    flex-shrink: 0;
    object-fit: contain;
    object-position: center;
    margin: 0;
    pointer-events: none;
}

.buttons__more {
    margin-top: 0px;
    background: none;
    border: none;
    font: inherit;
    font-size: clamp(0.95rem, 3.2vw, 1.15rem);
    letter-spacing: 0.38em;
    padding-left: 0.38em;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: color 0.25s ease, letter-spacing 0.25s ease;
}

.buttons__more:hover,
.buttons__more[aria-expanded="true"] {
    color: var(--white);
    letter-spacing: 0.42em;
}

.pill-btn {
    position: relative;
    display: block;
    width: min(280px, 82vw);
    height: 62px;
    border: none;
    border-radius: 999px;
    overflow: hidden;
    text-decoration: none;
    font: inherit;
    transition: transform 0.2s ease, filter 0.2s ease;
    cursor: pointer;
}

.pill-btn--zal {
    filter: var(--glow-zal);
    background: var(--pink);
    isolation: isolate;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.2s ease;
}

.pill-btn--vra {
    filter: var(--glow-vra);
}

.pill-btn--zra {
    filter: var(--glow-zra);
    background: var(--red);
    isolation: isolate;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.2s ease;
}

.pill-btn--zal:hover {
    transform: scale(1.02) translateZ(0);
    filter: var(--glow-zal-hover);
}

.pill-btn--vra:hover {
    transform: scale(1.02);
    filter: var(--glow-vra-hover);
}

.pill-btn--zra:hover {
    transform: scale(1.02) translateZ(0);
    filter: var(--glow-zra-hover);
}

.pill-btn:active {
    transform: scale(0.98);
}

.pill-btn__text {
    position: absolute;
    z-index: 2;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.65rem, 6vw, 2.1rem);
    letter-spacing: 0.08em;
    color: var(--black);
    line-height: 1;
    box-sizing: border-box;
    translate: var(--text-offset-x) var(--text-offset-y);
}

.pill-btn__icon {
    position: absolute;
    z-index: 2;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pill-btn__icon img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    pointer-events: none;
}

/* ── ЗАЛ: pink icon left · white text right ── */

.pill-btn--zal::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--pink);
    clip-path: polygon(0 0, var(--split-top) 0, var(--split-bottom) 100%, 0 100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.pill-btn--zal::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--white);
    clip-path: polygon(var(--split-top) 0, 100% 0, 100% 100%, var(--split-bottom) 100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.pill-btn--zal .pill-btn__icon {
    left: 0;
    width: var(--split-avg);
}

.pill-btn--zal .pill-btn__icon img {
    translate: 30px 0;
}

.pill-btn--zal .pill-btn__text {
    right: 0;
    width: var(--white-avg);
    padding-left: var(--text-pad-split);
    translate: -10px var(--text-offset-y);
}

/* ── БЕГ: white text left · sapphire icon right ── */

.pill-btn--vra::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--white);
    clip-path: polygon(0 0, var(--white-top) 0, var(--white-bottom) 100%, 0 100%);
}

.pill-btn--vra::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ice);
    clip-path: polygon(var(--white-top) 0, 100% 0, 100% 100%, var(--white-bottom) 100%);
}

.pill-btn--vra .pill-btn__text {
    left: 0;
    width: var(--white-avg);
    padding-right: var(--text-pad-split);
}

.pill-btn--vra .pill-btn__icon {
    left: var(--white-avg);
    right: 0;
}

.pill-btn--vra .pill-btn__icon img {
    translate: -10px 0;
}

/* ── КБЖУ: white text left · red icon right ── */

.pill-btn--zra::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--white);
    clip-path: polygon(0 0, var(--white-top) 0, var(--white-bottom) 100%, 0 100%);
}

.pill-btn--zra::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--red);
    clip-path: polygon(var(--white-top) 0, 100% 0, 100% 100%, var(--white-bottom) 100%);
}

.pill-btn--zra .pill-btn__text {
    left: 0;
    width: var(--white-avg);
    padding-right: var(--text-pad-split);
}

.pill-btn--zra .pill-btn__icon {
    left: var(--white-avg);
    right: 0;
}

/* ── Дополнительное меню (БОЛЬШЕ) ── */

.prochee-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.82);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.26s ease, visibility 0.26s ease;
}

.prochee-overlay--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.prochee-menu {
    position: relative;
    width: min(420px, 94vw);
    max-height: min(88vh, 760px);
    overflow: hidden auto;
    contain: content;
    padding: 36px 24px 24px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--black);
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease;
    will-change: transform, opacity;
}

.prochee-overlay--open .prochee-menu {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

.prochee-menu__close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    font: inherit;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.prochee-menu__close:hover {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
}

.prochee-menu__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 36px 0 8px;
    text-align: center;
}

.prochee-menu__title {
    font-size: clamp(1.85rem, 6vw, 2.35rem);
    font-weight: 400;
    letter-spacing: 0.16em;
    padding-left: 0.16em;
    color: var(--white);
    line-height: 1;
}

.prochee-menu__nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.prochee-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 72px;
    padding: 14px 16px 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    text-align: left;
    text-decoration: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.prochee-overlay--open .prochee-card {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.prochee-overlay--open .prochee-card:nth-child(1) { transition-delay: 0.04s; }
.prochee-overlay--open .prochee-card:nth-child(2) { transition-delay: 0.07s; }
.prochee-overlay--open .prochee-card:nth-child(3) { transition-delay: 0.1s; }
.prochee-overlay--open .prochee-card:nth-child(4) { transition-delay: 0.13s; }
.prochee-overlay--open .prochee-card:nth-child(5) { transition-delay: 0.16s; }

.prochee-card__glow {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 18px 0 0 18px;
    opacity: 0.85;
    transition: width 0.2s ease;
}

.prochee-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.prochee-card__title {
    font-size: clamp(1.35rem, 4.8vw, 1.65rem);
    letter-spacing: 0.1em;
    color: var(--white);
    line-height: 1;
}

.prochee-card__desc {
    font-family: var(--font);
    font-size: clamp(0.72rem, 2.4vw, 0.82rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.46);
    line-height: 1.35;
}

.prochee-card__arrow {
    flex-shrink: 0;
    font-size: 1.35rem;
    color: rgba(255, 255, 255, 0.28);
    transition: color 0.2s ease, transform 0.2s ease;
}

.prochee-card--zamery .prochee-card__glow { background: var(--coral); box-shadow: 0 0 18px rgba(255, 111, 145, 0.5); }
.prochee-card--tables .prochee-card__glow { background: var(--gold); box-shadow: 0 0 18px rgba(255, 200, 61, 0.5); }
.prochee-card--cards .prochee-card__glow { background: var(--mint); box-shadow: 0 0 18px rgba(61, 255, 184, 0.45); }
.prochee-card--calendar .prochee-card__glow { background: var(--periwinkle); box-shadow: 0 0 18px rgba(143, 155, 255, 0.45); }
.prochee-card--tasks .prochee-card__glow { background: var(--tangerine); box-shadow: 0 0 18px rgba(255, 144, 72, 0.45); }

.prochee-card--zamery:hover { border-color: rgba(255, 111, 145, 0.45); background: rgba(255, 111, 145, 0.08); box-shadow: var(--glow-zamery-hover); }
.prochee-card--tables:hover { border-color: rgba(255, 200, 61, 0.45); background: rgba(255, 200, 61, 0.07); box-shadow: var(--glow-wishes-hover); }
.prochee-card--cards:hover { border-color: rgba(61, 255, 184, 0.4); background: rgba(61, 255, 184, 0.07); box-shadow: var(--glow-cards-hover); }
.prochee-card--calendar:hover { border-color: rgba(143, 155, 255, 0.42); background: rgba(143, 155, 255, 0.07); box-shadow: var(--glow-dev-hover); }
.prochee-card--tasks:hover { border-color: rgba(255, 144, 72, 0.42); background: rgba(255, 144, 72, 0.07); box-shadow: var(--glow-dev2-hover); }

.prochee-card:hover .prochee-card__glow {
    width: 6px;
}

.prochee-card:hover .prochee-card__desc {
    color: rgba(255, 255, 255, 0.62);
}

.prochee-card--zamery:hover .prochee-card__arrow { color: var(--coral); }
.prochee-card--tables:hover .prochee-card__arrow { color: var(--gold); }
.prochee-card--cards:hover .prochee-card__arrow { color: var(--mint); }
.prochee-card--calendar:hover .prochee-card__arrow { color: var(--periwinkle); }
.prochee-card--tasks:hover .prochee-card__arrow { color: var(--tangerine); }

.prochee-card:hover .prochee-card__arrow {
    transform: translate3d(3px, 0, 0);
}

@media (hover: hover) and (pointer: fine) {
    .prochee-card:active {
        transform: translate3d(0, 1px, 0);
    }
}

@media (max-width: 480px) {
    .date-wheel {
        width: min(420px, 88vw);
    }

    .date-wheel-overlay {
        --date-wheel-close-top: 120px;
    }

    .date-wheel-overlay__close {
        width: 52px;
        height: 52px;
        font-size: 2rem;
        background: rgba(255, 255, 255, 0.18);
    }

    .prochee-menu {
        padding: 32px 16px 18px;
        border-radius: 20px;
    }

    .prochee-menu__head {
        margin-bottom: 16px;
        padding: 0 32px 0 4px;
    }

    .prochee-card {
        min-height: 68px;
        padding: 12px 14px 12px 16px;
        border-radius: 16px;
    }

    .prochee-card__title {
        letter-spacing: 0.08em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .prochee-overlay,
    .prochee-menu,
    .prochee-card,
    .prochee-card__arrow,
    .prochee-card__glow {
        transition: none;
    }

    .prochee-overlay--open .prochee-menu,
    .prochee-overlay--open .prochee-card {
        opacity: 1;
        transform: none;
    }

    .prochee-overlay--open .prochee-card:nth-child(n) {
        transition-delay: 0s;
    }
}

/* ── Date wheel (ЗАЛ) ── */

.date-wheel-overlay--zal {
    --date-wheel-desktop-x: clamp(312px, 33vw, 480px);
}

.date-wheel-overlay--eda {
    --date-wheel-desktop-x: calc(-1 * clamp(312px, 33vw, 480px));
}

.date-wheel-overlay {
    --date-wheel-close-top: 100px;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.date-wheel-overlay--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.date-wheel-overlay__close {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + var(--date-wheel-close-top));
    left: max(16px, env(safe-area-inset-left, 16px));
    z-index: 111;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    font-family: var(--font);
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: opacity 0.3s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.date-wheel-overlay--open .date-wheel-overlay__close {
    opacity: 1;
    pointer-events: auto;
}

.date-wheel-overlay__close:hover {
    background: rgba(255, 255, 255, 0.22);
    color: var(--white);
}

.date-wheel-overlay__close:active {
    transform: scale(0.92);
}

.date-wheel-overlay__close-icon {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    line-height: 1;
    transform: translateY(-2px);
}

.date-wheel {
    position: absolute;
    top: 50%;
    z-index: 101;
    width: min(420px, 94vw);
    height: min(680px, 82vh);
    transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.date-wheel-overlay--zal .date-wheel {
    right: 0;
    transform: translate(105%, -50%);
}

.date-wheel-overlay--zal.date-wheel-overlay--open .date-wheel {
    transform: translate(0, -50%);
}

.date-wheel-overlay--eda .date-wheel {
    left: 0;
    right: auto;
    transform: translate(-105%, -50%);
}

.date-wheel-overlay--eda.date-wheel-overlay--open .date-wheel {
    transform: translate(0, -50%);
}

@media (min-width: 1280px) {
    .date-wheel-overlay--zal .date-wheel,
    .date-wheel-overlay--eda .date-wheel {
        left: 50%;
        right: auto;
    }

    .date-wheel-overlay--zal .date-wheel {
        transform: translate(calc(-50% + var(--date-wheel-desktop-x) + 105%), -50%);
    }

    .date-wheel-overlay--zal.date-wheel-overlay--open .date-wheel {
        transform: translate(calc(-50% + var(--date-wheel-desktop-x)), -50%);
    }

    .date-wheel-overlay--eda .date-wheel {
        transform: translate(calc(-50% + var(--date-wheel-desktop-x) - 105%), -50%);
    }

    .date-wheel-overlay--eda.date-wheel-overlay--open .date-wheel {
        transform: translate(calc(-50% + var(--date-wheel-desktop-x)), -50%);
    }
}

.date-wheel-overlay--swiping .date-wheel {
    transition: none;
}

.date-wheel__viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
}

.date-wheel__viewport:active {
    cursor: grabbing;
}

.date-wheel__track {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    contain: layout style;
}

.date-pill {
    --date-pill-white: 43%;
    --date-pill-split: 255deg;
    --date-pill-accent: var(--red);
    --date-pill-accent-rgb: 255, 93, 125;
    --date-pill-icon-shift: -30px;
    --date-pill-body-shift: 14px;
    --pill-scale: 1;
    --pill-opacity: 1;
    --pill-rotate: 0deg;
    --pill-x: 0px;
    --pill-y: 0px;

    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    width: min(380px, 88vw);
    height: 96px;
    margin: 0 auto 28px;
    padding: 0;
    border: none;
    border-radius: 999px;
    overflow: hidden;
    background: #c8c8c8;
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font);
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
    transform:
        translateX(var(--pill-x))
        translateY(var(--pill-y))
        scale(var(--pill-scale))
        rotate(var(--pill-rotate));
    opacity: var(--pill-opacity);
    transform-origin: center center;
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}

.date-wheel__viewport--dragging .date-pill,
.date-wheel__viewport--moving .date-pill {
    transition:
        background 0.3s ease,
        box-shadow 0.3s ease,
        filter 0.3s ease;
}

.date-pill__icon {
    flex: 0 0 35%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

.date-pill__icon-img {
    width: 132px;
    height: 132px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    translate: var(--date-pill-icon-shift) 0;
}

.date-pill__body {
    flex: 0 0 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 3px;
    padding: 0 0 0 34px;
    min-width: 0;
    translate: var(--date-pill-body-shift) 0;
}

.date-pill__date {
    font-size: clamp(1.65rem, 5.6vw, 2.15rem);
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--black);
    width: 100%;
    text-align: left;
}

.date-pill__day {
    font-size: clamp(1.15rem, 3.9vw, 1.4rem);
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--black);
    width: 100%;
    text-align: left;
}

.date-pill--active {
    background: linear-gradient(var(--date-pill-split), var(--white) var(--date-pill-white), var(--date-pill-accent) var(--date-pill-white));
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.35))
            drop-shadow(0 0 24px rgba(var(--date-pill-accent-rgb), 0.28));
    z-index: 2;
}

.date-pill--active .date-pill__date,
.date-pill--active .date-pill__day {
    color: var(--white);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* ── Date wheel (ЕДА) ── */

.date-wheel-overlay--eda .date-wheel-overlay__close {
    left: auto;
    right: max(16px, env(safe-area-inset-right, 16px));
}

/* ── Date wheel (ЗАЛ) — зеркало ЕДА ── */

.date-wheel-overlay--zal .date-pill {
    --date-pill-split: 105deg;
    --date-pill-accent: var(--pink);
    --date-pill-accent-rgb: var(--pink-rgb);
    --date-pill-icon-shift: 30px;
    --date-pill-body-shift: -14px;
    flex-direction: row;
    text-align: right;
}

.date-wheel-overlay--zal .date-pill__icon {
    justify-content: flex-end;
}

.date-wheel-overlay--zal .date-pill__body {
    align-items: flex-end;
    padding: 0 34px 0 0;
}

.date-wheel-overlay--zal .date-pill__date,
.date-wheel-overlay--zal .date-pill__day {
    text-align: right;
}

/* ── Настройка дней (нижняя панель) ── */

.days-settings {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
    display: flex;
    justify-content: center;
    padding: 0 24px max(28px, env(safe-area-inset-bottom, 28px));
    transform: translateY(calc(100% + 32px));
    transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: auto;
}

.date-wheel-overlay--open .days-settings {
    transform: translateY(0);
}

.days-settings .pill-btn {
    position: relative;
    z-index: 1;
    width: min(340px, 86vw);
    height: 58px;
    background: var(--white);
    pointer-events: auto;
}

.pill-btn--days {
    filter: var(--glow-days);
}

.pill-btn--days:hover {
    transform: scale(1.02);
    filter: var(--glow-days-hover);
}

.pill-btn--days::before,
.pill-btn--days::after {
    content: none;
}

.pill-btn--days .pill-btn__text {
    position: static;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    translate: 0 0;
    font-size: clamp(1.35rem, 4.8vw, 1.7rem);
    letter-spacing: 0.06em;
    color: var(--black);
    text-align: center;
}

/* ── Auth footer (низ страницы) ── */

.auth-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 0 24px max(32px, env(safe-area-inset-bottom, 32px));
    flex-shrink: 0;
}

.auth-footer__link {
    background: none;
    border: none;
    font: inherit;
    font-size: clamp(0.95rem, 3.2vw, 1.15rem);
    letter-spacing: 0.38em;
    padding-left: 0.38em;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: color 0.25s ease, letter-spacing 0.25s ease;
}

.auth-footer__link:hover {
    color: var(--white);
    letter-spacing: 0.42em;
}

.auth-footer__sep {
    display: block;
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.25);
}

.auth-footer__user {
    font-size: clamp(0.95rem, 3.2vw, 1.15rem);
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.72);
}

.auth-footer__link--admin {
    text-decoration: none;
    color: var(--purple);
}

.auth-footer__link--admin:hover {
    color: var(--white);
}

.auth-form__error {
    margin-bottom: 14px;
    font-size: clamp(0.85rem, 2.6vw, 0.95rem);
    letter-spacing: 0.08em;
    color: #ff4466;
    text-align: center;
}

/* ── Auth modal ── */

.auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.38s ease, visibility 0.38s ease;
}

.auth-overlay--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.auth-modal {
    position: relative;
    width: min(380px, 92vw);
    padding: 36px 32px 28px;
    background: var(--black);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transform: translateY(24px) scale(0.97);
    opacity: 0;
    transition:
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.38s ease;
}

.auth-overlay--open .auth-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.auth-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font: inherit;
    font-size: 1.6rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: color 0.2s ease;
}

.auth-modal__close:hover {
    color: var(--white);
}

.auth-modal__title {
    font-size: clamp(1.85rem, 6vw, 2.35rem);
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--white);
    text-align: center;
    line-height: 1;
}

.auth-modal__line {
    display: block;
    width: 40px;
    height: 1px;
    margin: 14px auto 28px;
    background: rgba(255, 255, 255, 0.35);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-field__label {
    font-size: clamp(0.75rem, 2.4vw, 0.85rem);
    letter-spacing: 0.28em;
    padding-left: 0.28em;
    color: rgba(255, 255, 255, 0.45);
}

.auth-field__input {
    width: 100%;
    padding: 12px 0 10px;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    font-family: var(--font);
    font-size: clamp(1.05rem, 3.6vw, 1.2rem);
    letter-spacing: 0.06em;
    color: var(--white);
    outline: none;
    transition: border-color 0.25s ease;
}

.auth-field__input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.auth-field__input:focus {
    border-bottom-color: rgba(255, 255, 255, 0.55);
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.auth-remember__input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--white);
    cursor: pointer;
}

.auth-remember__text {
    font-size: clamp(0.75rem, 2.4vw, 0.85rem);
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.55);
}

.auth-submit {
    margin-top: 8px;
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 999px;
    background: var(--white);
    font: inherit;
    font-size: clamp(1.15rem, 4vw, 1.35rem);
    letter-spacing: 0.1em;
    color: var(--black);
    cursor: pointer;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
    transition: transform 0.2s ease, filter 0.2s ease;
}

.auth-submit:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.28));
}

.auth-submit:active {
    transform: scale(0.98);
}

/* ── Кнопка «Больше» + шестерёнка ── */

.buttons__more-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.buttons__settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    line-height: 0;
    font-size: 0;
    flex-shrink: 0;
    transform-origin: center center;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, transform 0.4s ease;
}

.buttons__settings:hover {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    transform: rotate(40deg);
}

.buttons__settings-icon {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
}

/* ── Адаптивные пилюли (главный экран): цвет + сторона иконки ── */

.pill-btn--c-red      { --pill-color: var(--red);      --pill-rgb: 255, 93, 125; }
.pill-btn--c-pink     { --pill-color: var(--pink);     --pill-rgb: var(--pink-rgb); }
.pill-btn--c-ice      { --pill-color: var(--ice);      --pill-rgb: 61, 140, 255; }
.pill-btn--c-lavender { --pill-color: var(--lavender); --pill-rgb: 182, 109, 255; }
.pill-btn--c-white    { --pill-color: var(--white);    --pill-rgb: 255, 255, 255; }
.pill-btn--c-gold     { --pill-color: var(--gold);     --pill-rgb: 255, 200, 61; }
.pill-btn--c-mint     { --pill-color: var(--mint);     --pill-rgb: 61, 255, 184; }
.pill-btn--c-purple   { --pill-color: var(--purple);   --pill-rgb: 153, 0, 255; }
.pill-btn--c-teal      { --pill-color: var(--teal);      --pill-rgb: 72, 212, 196; }
.pill-btn--c-coral     { --pill-color: var(--coral);     --pill-rgb: 255, 111, 145; }
.pill-btn--c-periwinkle { --pill-color: var(--periwinkle); --pill-rgb: 143, 155, 255; }
.pill-btn--c-tangerine { --pill-color: var(--tangerine); --pill-rgb: 255, 144, 72; }

.buttons .pill-btn[class*="pill-btn--c-"] {
    isolation: isolate;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    filter:
        drop-shadow(0 0 8px rgba(var(--pill-rgb), 0.4))
        drop-shadow(0 0 22px rgba(var(--pill-rgb), 0.2))
        drop-shadow(0 0 36px rgba(var(--pill-rgb), 0.1));
}

.buttons .pill-btn[class*="pill-btn--c-"]:hover {
    transform: scale(1.02) translateZ(0);
    filter:
        drop-shadow(0 0 12px rgba(var(--pill-rgb), 0.55))
        drop-shadow(0 0 30px rgba(var(--pill-rgb), 0.32))
        drop-shadow(0 0 48px rgba(var(--pill-rgb), 0.16));
}

/* «право»: текст слева (белая часть), иконка/цвет справа */
.pill-btn--side-right::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--white);
    clip-path: polygon(0 0, var(--white-top) 0, var(--white-bottom) 100%, 0 100%);
}

.pill-btn--side-right::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--pill-color);
    clip-path: polygon(var(--white-top) 0, 100% 0, 100% 100%, var(--white-bottom) 100%);
}

.pill-btn--side-right .pill-btn__text {
    left: 0;
    width: var(--white-avg);
}

.pill-btn--side-right .pill-btn__icon {
    left: var(--white-avg);
    right: 0;
}

/* «лево»: иконка/цвет слева, текст справа (белая часть) */
.pill-btn--side-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--pill-color);
    clip-path: polygon(0 0, var(--split-top) 0, var(--split-bottom) 100%, 0 100%);
}

.pill-btn--side-left::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--white);
    clip-path: polygon(var(--split-top) 0, 100% 0, 100% 100%, var(--split-bottom) 100%);
}

.pill-btn--side-left .pill-btn__icon {
    left: 0;
    width: var(--split-avg);
}

.pill-btn--side-left .pill-btn__text {
    right: 0;
    width: var(--white-avg);
}

/* ЗАМЕРЫ, ТАБЛИЦЫ, КАРТЫ, КАЛЕНДАРЬ, ЗАДАЧИ — белая зона больше цветной */
.buttons .pill-btn--wide-white {
    --white-top: 58%;
    --white-bottom: 55%;
    --white-avg: 58%;
    --split-top: 42%;
    --split-bottom: 45%;
    --split-avg: 42%;
}

.buttons .pill-btn--wide-white .pill-btn__text {
    font-size: clamp(1.55rem, 5.4vw, 2rem);
}

/* ── Адаптивные карточки (меню «Больше»): цвет по типу кнопки ── */

.prochee-card--c-red      { --card-color: var(--red);      --card-rgb: 255, 93, 125; }
.prochee-card--c-pink     { --card-color: var(--pink);     --card-rgb: 147, 86, 245; }
.prochee-card--c-ice      { --card-color: var(--ice);      --card-rgb: 61, 140, 255; }
.prochee-card--c-lavender { --card-color: var(--lavender); --card-rgb: 182, 109, 255; }
.prochee-card--c-white    { --card-color: var(--white);    --card-rgb: 255, 255, 255; }
.prochee-card--c-gold     { --card-color: var(--gold);     --card-rgb: 255, 200, 61; }
.prochee-card--c-mint     { --card-color: var(--mint);     --card-rgb: 61, 255, 184; }
.prochee-card--c-purple   { --card-color: var(--purple);   --card-rgb: 153, 0, 255; }
.prochee-card--c-teal      { --card-color: var(--teal);      --card-rgb: 72, 212, 196; }
.prochee-card--c-coral     { --card-color: var(--coral);     --card-rgb: 255, 111, 145; }
.prochee-card--c-periwinkle { --card-color: var(--periwinkle); --card-rgb: 143, 155, 255; }
.prochee-card--c-tangerine { --card-color: var(--tangerine); --card-rgb: 255, 144, 72; }

.prochee-card[class*="prochee-card--c-"] .prochee-card__glow {
    background: var(--card-color);
    box-shadow: 0 0 18px rgba(var(--card-rgb), 0.5);
}

.prochee-card[class*="prochee-card--c-"]:hover {
    border-color: rgba(var(--card-rgb), 0.45);
    background: rgba(var(--card-rgb), 0.08);
    box-shadow: 0 0 12px rgba(var(--card-rgb), 0.2), 0 0 30px rgba(var(--card-rgb), 0.12);
}

.prochee-card[class*="prochee-card--c-"]:hover .prochee-card__arrow {
    color: var(--card-color);
}

/* ── Модалка настройки раскладки ── */

.layout-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.82);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.layout-overlay--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.layout-modal {
    position: relative;
    width: min(560px, 96vw);
    max-height: min(90vh, 760px);
    overflow: hidden auto;
    padding: 36px 24px 24px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--black);
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translate3d(0, 14px, 0);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.layout-overlay--open .layout-modal {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

.layout-modal__close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    font: inherit;
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.layout-modal__close:hover {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
}

.layout-modal__title {
    font-size: clamp(1.6rem, 5.4vw, 2.1rem);
    font-weight: 400;
    letter-spacing: 0.14em;
    padding-left: 0.14em;
    color: var(--white);
    text-align: center;
    line-height: 1;
}

.layout-modal__line {
    display: block;
    width: 40px;
    height: 1px;
    margin: 14px auto 16px;
    background: rgba(255, 255, 255, 0.35);
}

.layout-modal__hint {
    font-family: var(--font);
    font-size: clamp(0.78rem, 2.6vw, 0.9rem);
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    line-height: 1.4;
    margin-bottom: 22px;
}

.layout-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 560px) {
    .layout-fields {
        grid-template-columns: 1fr;
    }
}

.layout-field {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.layout-field__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: clamp(0.95rem, 3vw, 1.15rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1;
}

.layout-field__count {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.4);
}

.layout-field__count--full {
    color: var(--red);
}

.layout-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 96px;
    padding: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.layout-list--drop-active {
    border-color: rgba(var(--pink-rgb), 0.6);
    background: rgba(var(--pink-rgb), 0.08);
}

.layout-list--drop-blocked {
    border-color: rgba(255, 93, 125, 0.6);
    background: rgba(255, 93, 125, 0.08);
}

.layout-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--white);
    font-size: clamp(1rem, 3.4vw, 1.2rem);
    letter-spacing: 0.06em;
    line-height: 1;
    cursor: grab;
    touch-action: none;
    user-select: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.layout-chip:hover {
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.09);
}

.layout-chip__grip {
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.32);
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: -2px;
}

.layout-chip__dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}

.layout-chip__dot--eda { background: var(--red); }
.layout-chip__dot--zal { background: var(--pink); }
.layout-chip__dot--beg { background: var(--ice); }
.layout-chip__dot--analitika { background: var(--lavender); }
.layout-chip__dot--zamery { background: var(--coral); }
.layout-chip__dot--tables { background: var(--gold); }
.layout-chip__dot--cards { background: var(--mint); }
.layout-chip__dot--calendar { background: var(--periwinkle); }
.layout-chip__dot--tasks { background: var(--tangerine); }

.layout-chip__label {
    flex: 1;
    min-width: 0;
}

.layout-chip--dragging {
    cursor: grabbing;
    opacity: 0.4;
    border-style: dashed;
}

.layout-chip--ghost {
    position: fixed;
    z-index: 260;
    margin: 0;
    pointer-events: none !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    background: rgba(30, 30, 30, 0.96);
    border-color: rgba(255, 255, 255, 0.3);
    opacity: 0.95;
}

.layout-modal__actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.layout-reset,
.layout-save {
    flex: 1;
    height: 50px;
    border: none;
    border-radius: 999px;
    font: inherit;
    font-size: clamp(1.05rem, 3.6vw, 1.25rem);
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.layout-reset {
    flex: 0 0 auto;
    padding: 0 22px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
}

.layout-reset:hover {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.4);
}

.layout-save {
    background: var(--white);
    color: var(--black);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
}

.layout-save:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.28));
}

.layout-save:active {
    transform: scale(0.98);
}

/* ── Главная: текст и иконка строго по центру своей зоны ── */
.buttons .pill-btn--side-right .pill-btn__text,
.buttons .pill-btn--side-left .pill-btn__text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 16px;
    padding-right: 16px;
    translate: 0 var(--text-offset-y);
}

.buttons .pill-btn--side-right .pill-btn__icon,
.buttons .pill-btn--side-left .pill-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.buttons .pill-btn--side-right .pill-btn__icon {
    left: var(--white-avg);
    right: 0;
    width: auto;
}

.buttons .pill-btn--side-left .pill-btn__icon {
    left: 0;
    width: var(--split-avg);
}

.buttons .pill-btn--side-right .pill-btn__icon img,
.buttons .pill-btn--side-left .pill-btn__icon img {
    display: block;
    width: 155px;
    height: 155px;
    flex-shrink: 0;
    object-fit: contain;
    object-position: center;
    margin: 0;
    pointer-events: none;
}

/* Цвет справа — иконка чуть левее; цвет слева — иконка чуть правее */
.buttons .pill-btn--side-right .pill-btn__icon img {
    translate: -6px 0;
}

.buttons .pill-btn--side-left .pill-btn__icon img {
    translate: 6px 0;
}

@media (prefers-reduced-motion: reduce) {
    .layout-overlay,
    .layout-modal,
    .buttons__settings {
        transition: none;
    }
}