.content-panel {
    --panel-accent: var(--kub-blue);

    position: relative;
    padding: 31px 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.045);
    box-shadow: var(--shadow-xs);
    overflow: hidden;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease;
}

/*
 * Короткий цветной акцент в покое.
 * На hover вытягивается почти по всей высоте.
 * mask убирает квадратные концы и сводит линию в мягкий острый ноль.
 */
.content-panel::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: -1px;
    top: 27px;
    width: 3px;
    height: 40px;

    background: var(--panel-accent);
    opacity: .72;

    -webkit-mask-image: linear-gradient(
        180deg,
        transparent 0%,
        #000 16%,
        #000 84%,
        transparent 100%
    );
    mask-image: linear-gradient(
        180deg,
        transparent 0%,
        #000 16%,
        #000 84%,
        transparent 100%
    );

    box-shadow:
        3px 0 10px color-mix(in srgb, var(--panel-accent) 10%, transparent),
        7px 0 24px transparent;

    transition:
        top .42s cubic-bezier(.22,.61,.36,1),
        height .42s cubic-bezier(.22,.61,.36,1),
        opacity .25s ease,
        box-shadow .42s ease;
}

/*
 * Очень слабая подсветка, исходящая от цветного края.
 * Она нужна только для ощущения глубины и не должна читаться как отдельный градиент.
 */
.content-panel::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 118px;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--panel-accent) 5%, transparent),
        color-mix(in srgb, var(--panel-accent) 1.5%, transparent) 44%,
        transparent 100%
    );

    opacity: 0;
    transform: translateX(-18px);
    transition:
        opacity .35s ease,
        transform .5s cubic-bezier(.22,.61,.36,1);
}

.content-panel > * {
    position: relative;
    z-index: 1;
}

.content-panel[data-variant="highlight"] {
    --panel-accent: var(--kub-violet);

    border-color: rgba(150,120,255,.20);
    background: linear-gradient(135deg,rgba(150,120,255,.09),rgba(84,183,255,.045),rgba(255,255,255,.045) 64%);
    box-shadow: var(--shadow-sm);
}

.content-panel[data-variant="highlight"]::before {
    opacity: .86;
}

.content-panel[data-variant="subtle"] {
    --panel-accent: var(--kub-green);

    border-color: rgba(255,255,255,.065);
    background: rgba(255,255,255,.025);
    box-shadow: none;
}

.content-panel[data-variant="subtle"]::before {
    opacity: .48;
}

.content-panel[data-variant="outline"] {
    --panel-accent: var(--kub-blue);

    background: rgba(255,255,255,.018);
    border-color: rgba(84,183,255,.22);
    box-shadow: none;
}

.content-panel-title {
    margin: 0 0 13px;
    font-weight: 700;
}

.content-panel-text {
    margin: 0;
}

.content-panel > [data-content-block] + [data-content-block] {
    margin-top: 20px;
}

@media (hover:hover) and (pointer:fine) {
    .content-panel:hover {
        border-color: rgba(255,255,255,.12);
        box-shadow:
            0 2px 4px rgba(0,0,0,.18),
            0 18px 44px rgba(0,0,0,.22);
    }
}

@media(max-width:768px) {
    .content-panel {
        padding: 23px 22px 24px;
        border-radius: 15px;
    }

    .content-panel::before {
        top: 21px;
        height: 32px;
    }

    .content-panel::after {
        display: none;
    }
}

/* Sticky neon state: first touch/click opens it and it stays open. */
.content-panel.is-neon-active {
    border-color: color-mix(in srgb, var(--panel-accent) 18%, rgba(255,255,255,.10));
}

.content-panel.is-neon-active::before {
    top: 12px;
    height: calc(100% - 24px);
    opacity: .86;
    box-shadow:
        3px 0 10px color-mix(in srgb, var(--panel-accent) 10%, transparent),
        8px 0 23px color-mix(in srgb, var(--panel-accent) 4%, transparent);
}

.content-panel.is-neon-active::after {
    display: block;
    opacity: .60;
    transform: translateX(0);
}