/* =========================================================
   SOULULAB — LOGO PICKER CLEAN
   Карточка логотипа + змейка + переход темы:
   экранный blur → молния/частицы поверх blur → белая вспышка
   ========================================================= */

/* =========================================================
   1. CARD / LOGO
   ========================================================= */

.soul-logo-picker {
    position: relative;

    width: min(100%, 520px);
    aspect-ratio: 1.08 / 1;

    overflow: visible;
    isolation: isolate;

    --logo-rgb: var(--theme-rgb, 132, 75, 210);
    --magic-rgb: var(--logo-rgb);

    --lp-card-glow-alpha-1: 0.30;
    --lp-card-glow-alpha-2: 0.18;

    --lp-glass-opacity: 0.82;
    --lp-glass-white: 0.88;
    --lp-glass-top-light: 0.72;
    --lp-glass-bottom-depth: 0.065;
    --lp-glass-glare-opacity: 0.34;
    --lp-glass-blur: 8px;
    --lp-glass-edge-white: 0.78;

--lp-inner-frame-inset: 12px;
--lp-inner-frame-radius: 25px;
--lp-inner-frame-color: 0.00;
    --lp-inner-frame-light: 0.58;
    --lp-inner-frame-dark: 0.06;


    /* короткое плотное свечение из-под карточки */
    --lp-outer-neon-alpha-1: 0.28;
    --lp-outer-neon-alpha-2: 0.16;
    --lp-outer-neon-alpha-3: 0.10;
    --lp-outer-neon-size: 12px;
}

/* короткая цветная подсветка сразу за рамкой */
.soul-logo-picker::before {
    content: "";

    position: absolute;
    inset: -10px;

    z-index: 0;

    border-radius: 40px;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(var(--logo-rgb), var(--lp-outer-neon-alpha-1)) 0%,
            rgba(255, 255, 255, 0.18) 28%,
            rgba(var(--logo-rgb), var(--lp-outer-neon-alpha-2)) 52%,
            rgba(255, 255, 255, 0.10) 72%,
            rgba(var(--logo-rgb), var(--lp-outer-neon-alpha-3)) 100%
        );

    filter: blur(var(--lp-outer-neon-size));
    opacity: 0.78;

    transform: translateZ(0);
}

/* короткая нижняя тень под карточкой */
.soul-logo-picker::after {
    content: "";

    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -8px;

    z-index: 0;

    height: 24px;

    border-radius: 999px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(31, 34, 41, 0.12) 0%,
            rgba(31, 34, 41, 0.055) 42%,
            transparent 72%
        );

    filter: blur(6px);
    opacity: 0.38;

    pointer-events: none;
}

.soul-logo-card {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    overflow: hidden;
    isolation: isolate;

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, var(--lp-glass-white)) 0%,
            rgba(250, 253, 255, var(--lp-glass-opacity)) 42%,
            rgba(235, 248, 253, 0.72) 100%
        );

    border: 1px solid rgba(var(--logo-rgb), 0.24);

    backdrop-filter: blur(var(--lp-glass-blur)) saturate(1.08);
    -webkit-backdrop-filter: blur(var(--lp-glass-blur)) saturate(1.08);

    box-shadow:
        0 18px 30px rgba(36, 43, 54, 0.105),
        0 7px 14px rgba(36, 43, 54, 0.065),

        0 0 6px rgba(var(--logo-rgb), 0.18),
        0 0 12px rgba(var(--logo-rgb), 0.10),
        0 8px 14px rgba(var(--logo-rgb), 0.075),

        inset 0 1px 0 rgba(255, 255, 255, var(--lp-glass-edge-white)),
        inset 0 8px 20px rgba(255, 255, 255, var(--lp-glass-top-light)),
        inset 0 -22px 36px rgba(28, 36, 46, var(--lp-glass-bottom-depth));
}

.soul-logo-card::before {
    content: "";

    position: absolute;
    inset: var(--lp-inner-frame-inset);
    z-index: 3;

    border-radius: var(--lp-inner-frame-radius);

    pointer-events: none;

    background: none;
    border: 0;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset 1px 0 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(24, 34, 44, 0.035),
        inset -1px 0 0 rgba(24, 34, 44, 0.025);
}

.soul-logo-card::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 2;

    pointer-events: none;
    opacity: 1;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, var(--lp-glass-glare-opacity)) 0%,
            rgba(255, 255, 255, 0.14) 18%,
            transparent 38%,
            transparent 100%
        );
}

.soul-logo-card__img {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;

    width: 68%;
    height: auto;

    display: block;

    transform: translate3d(-50%, -50%, 0) scale(1);
    transform-origin: center center;

    opacity: 1;

    filter:
        drop-shadow(0 14px 22px rgba(31, 34, 41, 0.10))
        drop-shadow(0 4px 8px rgba(31, 34, 41, 0.05))
        drop-shadow(0 0 2px rgba(var(--logo-rgb), 0.34))
        drop-shadow(0 0 5px rgba(var(--logo-rgb), 0.22))
        drop-shadow(0 0 10px rgba(var(--logo-rgb), 0.13));

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    will-change: transform, opacity, filter;
    transition: filter 0.34s ease, transform 0.34s ease;
}

.soul-logo-picker.is-logo-ready[data-logo-state="preview"] .soul-logo-card__img {
    filter:
        drop-shadow(0 14px 22px rgba(31, 34, 41, 0.10))
        drop-shadow(0 4px 8px rgba(31, 34, 41, 0.05))
        drop-shadow(0 0 2px rgba(var(--logo-rgb), 0.40))
        drop-shadow(0 0 6px rgba(var(--logo-rgb), 0.26))
        drop-shadow(0 0 12px rgba(var(--logo-rgb), 0.15));
}

.soul-logo-card__fallback {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;

    display: none;

    transform: translate3d(-50%, -50%, 0);

    color: rgba(33, 26, 43, 0.78);

    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.soul-logo-card.is-logo-missing .soul-logo-card__fallback {
    display: block;
}

.soul-logo-picker.is-logo-ready[data-logo-state="preview"] .soul-logo-card__img,
.soul-logo-picker.is-logo-ready[data-logo-state="preview"] .soul-logo-card__fallback {
    animation: soulLogoPulse 3.4s ease-in-out infinite;
}

.soul-logo-picker[data-logo-state="locked"] .soul-logo-card__img,
.soul-logo-picker[data-logo-state="locked"] .soul-logo-card__fallback {
    animation: none;
    transform: translate3d(-50%, -50%, 0) scale(1);
}
/* В locked оставляем логотип статичным, но зоны активными */
.soul-logo-picker[data-logo-state="locked"] .soul-logo-zone {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.soul-logo-picker[data-logo-state="locked"] .soul-logo-zone:hover {
    opacity: 1 !important;
    filter:
        brightness(1.12)
        saturate(1.15)
        drop-shadow(0 0 18px rgba(255, 255, 255, 0.35)) !important;
}
/* =========================================================
   2. PILLS / HINT / ZONES
   ========================================================= */

.soul-logo-pills {
    position: absolute;
    inset: 0;
    z-index: 12;

    pointer-events: none;
}

.soul-logo-pill {
    position: absolute;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;
    max-width: calc(100% - 58px);
    padding: 0 17px;

    border-radius: 999px;

    color: rgba(33, 26, 43, 0.68);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.84),
            rgba(255, 255, 255, 0.52)
        );

    border: 1px solid rgba(var(--logo-rgb), 0.22);

    box-shadow:
        0 10px 20px rgba(31, 34, 41, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);

    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;

    opacity: 0;
    transform: translateY(8px);

    transition:
        opacity 140ms ease,
        transform 1400ms ease;
}

.soul-logo-pill--nko {
    left: 32px;
    top: 30px;
}

.soul-logo-pill--business {
    right: 32px;
    top: 30px;
}

.soul-logo-pill--experts {
    right: 32px;
    bottom: 62px;
}

.soul-logo-pill--future {
    left: 32px;
    bottom: 62px;
}

.soul-logo-pill.is-active {
    opacity: 1;
    transform: translateY(0);
}
.soul-logo-pill.is-active,
.soul-logo-pill.is-preview,
.soul-logo-pill.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.soul-logo-pill.is-preview {
    z-index: 5;
    border-color: rgba(var(--logo-rgb), 0.34);
    box-shadow:
        0 14px 30px rgba(var(--logo-rgb), 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
.soul-logo-hint {
    position: absolute;
    left: 50%;
    bottom: 28px;
    z-index: 12;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 0 20px;

    transform: translateX(-50%);

    border-radius: 999px;

    color: rgb(var(--logo-rgb));
    background: rgba(255, 255, 255, 0.80);

    box-shadow:
        0 12px 24px rgba(31, 34, 41, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.94);

    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;

    pointer-events: none;
}

.soul-logo-zone {
    position: absolute;
    z-index: 11;

    border: 0;
    padding: 0;

    background: transparent;
    outline: none;
}

.soul-logo-zone::before {
    display: none;
    content: none;
}

.soul-logo-zone--nko {
    left: 0;
    top: 0;
    width: 50%;
    height: 50%;
}

.soul-logo-zone--business {
    right: 0;
    top: 0;
    width: 50%;
    height: 50%;
}

.soul-logo-zone--experts {
    right: 0;
    bottom: 0;
    width: 50%;
    height: 50%;
}

.soul-logo-zone--future {
    left: 0;
    bottom: 0;
    width: 50%;
    height: 50%;
}

/* =========================================================
   3. SVG SNAKE
   ========================================================= */

.soul-logo-snake {
    position: absolute;
    inset: 4px;
    z-index: 4;

    width: calc(100% - 8px);
    height: calc(100% - 8px);

    overflow: visible;

    pointer-events: none;

    opacity: 1;

    filter: none;
    mix-blend-mode: normal;
}

.soul-logo-snake__part {
    fill: none;

    stroke-width: 0.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    vector-effect: non-scaling-stroke;

    opacity: 0.42;

    filter: drop-shadow(0 0 4px rgba(var(--logo-rgb), 0.18));
    mix-blend-mode: normal;

    transition:
        stroke 180ms ease,
        opacity 180ms ease,
        filter 180ms ease;
}

/* =========================================================
   4. THEME TRANSITION: SCREEN BLUR / MAGIC / FLASH
   ========================================================= */

html {
    --soul-screen-blur-size: 8px;
    --soul-screen-blur-opacity: 0.22;
}

.soul-screen-blur {
    position: fixed;
    inset: -40px;
    z-index: 8000;

    pointer-events: none;
    background: rgba(10, 12, 18, 0.22) !important;

    backdrop-filter: blur(var(--soul-screen-blur-size)) saturate(0.9) brightness(0.88) !important;
    -webkit-backdrop-filter: blur(var(--soul-screen-blur-size)) saturate(0.9) brightness(0.88) !important;
    opacity: 0;
    visibility: hidden;

    transition:
        opacity 180ms ease,
        visibility 0s linear 180ms;
}

.soul-screen-blur.is-active {
    opacity: 1;
    visibility: visible;

    transition:
        opacity 180ms ease,
        visibility 0s linear 0s;
}

#soul-theme-magic-layer {
    position: fixed;
    left: 0;
    top: 0;

    width: 0;
    height: 0;

    z-index: 9500;

    overflow: visible;
    border-radius: 36px;

    pointer-events: none;

    opacity: 0;
    visibility: hidden;

    --magic-rgb: var(--theme-rgb, 132, 75, 210);
}

#soul-theme-magic-layer.is-theme-bolt,
#soul-theme-magic-layer.is-theme-particles {
    opacity: 1;
    visibility: visible;
}

#soul-theme-magic-layer .soul-theme-magic__bolt {
    position: absolute;
    left: 50%;
    top: 50%;

    width: 220px;
    height: 360px;

    opacity: 0;

    transform: translate(-50%, -50%) scale(0.86);
    transform-origin: center center;

    clip-path: polygon(
        58% 0%,
        24% 50%,
        47% 50%,
        29% 100%,
        78% 39%,
        54% 39%
    );

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0.98) 16%,
            rgba(245, 235, 255, 0.92) 34%,
            rgba(var(--magic-rgb), 0.46) 62%,
            rgba(var(--magic-rgb), 1) 100%
        );

    filter:
        drop-shadow(0 0 14px rgba(var(--magic-rgb), 0.34))
        drop-shadow(0 0 38px rgba(var(--magic-rgb), 0.24));

    will-change: transform, opacity, filter;
}

#soul-theme-magic-layer.is-theme-bolt .soul-theme-magic__bolt {
    animation: soulMagicBoltBig 2700ms cubic-bezier(.18, .9, .22, 1) both;
}

#soul-theme-magic-layer.is-theme-particles .soul-theme-magic__bolt {
    opacity: 0;
}

#soul-theme-magic-layer .soul-theme-magic__particles {
    position: absolute;
    inset: 0;

    opacity: 0;
    pointer-events: none;
}

#soul-theme-magic-layer.is-theme-particles .soul-theme-magic__particles {
    opacity: 1;
}

#soul-theme-magic-layer .soul-theme-magic__particle {
    position: absolute;

    left: var(--p-x);
    top: var(--p-y);

    width: var(--p-size);
    height: var(--p-size);

    border-radius: 999px;

    background:
    radial-gradient(
        circle at 34% 28%,
        rgba(255, 255, 255, 0.62) 0%,
        rgba(var(--magic-rgb), 0.95) 22%,
        rgba(var(--magic-rgb), 0.68) 48%,
        rgba(var(--magic-rgb), 0.24) 74%,
        rgba(var(--magic-rgb), 0.06) 100%
    );

    border: 1px solid rgba(var(--magic-rgb), 0.28);

    box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.46),
    inset 0 -1px 2px rgba(var(--magic-rgb), 0.38),
    0 0 7px rgba(var(--magic-rgb), 0.52),
    0 0 18px rgba(var(--magic-rgb), 0.34);

    opacity: 0;

    transform: translate3d(0, 0, 0) scale(0.6);

    animation:
        soulMagicParticle var(--p-duration) ease-in-out var(--p-delay) infinite alternate;

    will-change: transform, opacity;
}

.soul-logo-picker.is-theme-bolt .soul-logo-card__img,
.soul-logo-picker.is-theme-particles .soul-logo-card__img {
    filter:
        drop-shadow(0 14px 22px rgba(31, 34, 41, 0.10))
        drop-shadow(0 4px 8px rgba(31, 34, 41, 0.05))
        drop-shadow(0 0 3px rgba(var(--logo-rgb), 0.34))
        drop-shadow(0 0 10px rgba(var(--logo-rgb), 0.20));
}

/* =========================================================
   5. KEYFRAMES
   ========================================================= */

@keyframes soulLogoPulse {
    0%,
    100% {
        transform: translate3d(-50%, -50%, 0) scale(1);
        opacity: 0.965;
    }

    50% {
        transform: translate3d(-50%, -50%, 0) scale(1.026);
        opacity: 1;
    }
}

@keyframes soulMagicBoltBig {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.74);
        filter:
            drop-shadow(0 0 6px rgba(var(--magic-rgb), 0.18))
            drop-shadow(0 0 16px rgba(var(--magic-rgb), 0.12));
    }

    16% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.18);
    }

    44% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.24);
        filter:
            drop-shadow(0 0 16px rgba(var(--magic-rgb), 0.42))
            drop-shadow(0 0 42px rgba(var(--magic-rgb), 0.28));
    }

    76% {
        opacity: 0.96;
        transform: translate(-50%, -50%) scale(1.14);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.02);
    }
}

@keyframes soulMagicParticle {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.45);
    }

    5% {
        opacity: 0.95;
    }

    100% {
        opacity: 0.25;
        transform:
            translate3d(
                var(--p-move-x),
                var(--p-move-y),
                0
            )
            scale(1);
    }
}

/* =========================================================
   6. RESPONSIVE
   ========================================================= */

@media (max-width: 1040px) {
    .soul-logo-picker {
        width: min(100%, 460px);
    }
}

@media (max-width: 560px) {
    .soul-logo-picker {
        width: min(100%, 340px);
        aspect-ratio: 1 / 1;
    }

    .soul-logo-card {
        border-radius: 28px;
    }

    .soul-logo-card::before {
        border-radius: 24px;
    }

    .soul-logo-pill {
        padding: 0 13px;
        font-size: 0.66rem;
    }

    .soul-logo-pill--nko,
    .soul-logo-pill--business {
        top: 22px;
    }

    .soul-logo-pill--nko,
    .soul-logo-pill--future {
        left: 22px;
    }

    .soul-logo-pill--business,
    .soul-logo-pill--experts {
        right: 22px;
    }

    .soul-logo-pill--experts,
    .soul-logo-pill--future {
        bottom: 54px;
    }

    .soul-logo-hint {
        bottom: 22px;
        min-height: 31px;
        font-size: 0.70rem;
    }

    #soul-theme-magic-layer .soul-theme-magic__bolt {
        width: 170px;
        height: 280px;
    }
}
/* Logo zones stay hover-active even when theme is selected */

.soul-logo-picker .soul-logo-zone {
    pointer-events: auto !important;
    cursor: pointer !important;
    transition:
        opacity 0.22s ease,
        filter 0.22s ease,
        transform 0.22s ease !important;
}

.soul-logo-picker .soul-logo-zone:hover {
    opacity: 1 !important;
    filter:
        brightness(1.12)
        saturate(1.12)
        drop-shadow(0 0 18px rgba(255, 255, 255, 0.35)) !important;
    transform: translateY(-2px) scale(1.015) !important;
}

/* Не гасим остальные зоны полностью */
.soul-logo-picker:hover .soul-logo-zone {
    opacity: 0.72;
}

.soul-logo-picker:hover .soul-logo-zone:hover {
    opacity: 1 !important;
}
/* Logo pills - premium glass */

.soul-logo-pill {
    min-height: 34px;
    padding: 0 18px;

    border-radius: 999px;

    color: rgba(24, 22, 32, 0.78);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(var(--logo-rgb), 0.10) 42%,
            rgba(255, 255, 255, 0.72) 100%
        );

    border: 1px solid rgba(var(--logo-rgb), 0.28);

    box-shadow:
        0 14px 34px rgba(var(--logo-rgb), 0.13),
        0 8px 20px rgba(26, 28, 36, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -10px 18px rgba(var(--logo-rgb), 0.06);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: -0.01em;

    overflow: hidden;
}

.soul-logo-pill::before {
    content: "";

    position: absolute;
    inset: 1px;

    border-radius: inherit;

    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(255, 255, 255, 0.18) 36%,
            rgba(var(--logo-rgb), 0.08) 100%
        );

    opacity: 0.75;
    pointer-events: none;
}

.soul-logo-pill::after {
    content: "";

    position: absolute;
    left: 14px;
    right: 14px;
    top: 5px;

    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.92),
        transparent
    );

    opacity: 0.9;
    pointer-events: none;
}

.soul-logo-pill.is-active,
.soul-logo-pill.is-preview,
.soul-logo-pill.is-visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

.soul-logo-pill.is-preview {
    color: rgba(20, 18, 28, 0.9);

    border-color: rgba(var(--logo-rgb), 0.42);

    box-shadow:
        0 18px 44px rgba(var(--logo-rgb), 0.22),
        0 10px 24px rgba(26, 28, 36, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -12px 24px rgba(var(--logo-rgb), 0.10);
}

/* когда наведена новая плашка - старая мягко уходит */
.soul-logo-pills:has(.soul-logo-pill.is-preview) .soul-logo-pill.is-active:not(.is-preview) {
    opacity: 0 !important;
    transform: translateY(8px) scale(0.98) !important;
}
.soul-logo-pill {
    opacity: 0 !important;
    transform: translateY(8px) scale(0.98) !important;
    pointer-events: none !important;
}

.soul-logo-pill.is-active,
.soul-logo-pill.is-preview {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

.soul-logo-pill.is-preview {
    z-index: 10;
}
/* Logo animation speed */

.soul-logo-picker {
    --logo-anim-fast: 140ms;
    --logo-anim-ease: cubic-bezier(.2, .8, .2, 1);
}

.soul-logo-pill {
    transition:
        opacity var(--logo-anim-fast) var(--logo-anim-ease),
        transform var(--logo-anim-fast) var(--logo-anim-ease),
        box-shadow var(--logo-anim-fast) var(--logo-anim-ease),
        border-color var(--logo-anim-fast) var(--logo-anim-ease) !important;
}

.soul-logo-zone,
.soul-logo-card__img,
.soul-logo-card__fallback {
    transition:
        opacity var(--logo-anim-fast) var(--logo-anim-ease),
        transform var(--logo-anim-fast) var(--logo-anim-ease),
        filter var(--logo-anim-fast) var(--logo-anim-ease) !important;
}
/* Logo pills - cleaner premium style */

.soul-logo-pill {
    min-height: 32px !important;
    padding: 0 18px !important;

    color: rgba(34, 30, 43, 0.74) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(var(--logo-rgb), 0.055) 100%
        ) !important;

    border: 1px solid rgba(var(--logo-rgb), 0.18) !important;

    box-shadow:
        0 10px 24px rgba(25, 28, 36, 0.10),
        0 6px 18px rgba(var(--logo-rgb), 0.08) !important;

    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    font-size: 0.76rem !important;
    font-weight: 650 !important;
    letter-spacing: -0.01em !important;

    overflow: hidden !important;
}

/* Убираем пузырь и полоску */
.soul-logo-pill::before,
.soul-logo-pill::after {
    content: none !important;
    display: none !important;
}

/* Активная / наведенная плашка */
.soul-logo-pill.is-active,
.soul-logo-pill.is-preview {
    color: rgba(28, 24, 36, 0.88) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.94) 0%,
            rgba(var(--logo-rgb), 0.09) 100%
        ) !important;

    border-color: rgba(var(--logo-rgb), 0.28) !important;

    box-shadow:
        0 14px 32px rgba(var(--logo-rgb), 0.14),
        0 8px 22px rgba(25, 28, 36, 0.10) !important;
}
[data-logo-tab="future"] {
    cursor: default !important;
}
.soul-logo-pill--experts {
    right: 32px;
    bottom: 62px;
}

.soul-logo-pill--future {
    left: 32px;
    bottom: 62px;
}