.profile-menu-section {
    --pm-radius: 18px;
    --pm-item-radius: 12px;
    --pm-icon-radius: 8px;
    --pm-duration: 0.3s;
    --pm-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --pm-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
    --pm-surface: var(--rz-base-background-color, #ffffff);
    --pm-text: var(--rz-text-color, #212121);
    --pm-accent: var(--rz-primary, #1976d2);
    --pm-bg: color-mix(in srgb, var(--pm-surface), transparent 28%);
    --pm-glow-layer: color-mix(in srgb, var(--pm-accent), transparent 90%);
    --pm-border: color-mix(in srgb, var(--pm-text), transparent 88%);
    --pm-hi: rgba(255, 255, 255, 0.35);
    --pm-ao: rgba(0, 0, 0, 0.25);
    --pm-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.28), 0 4px 12px -4px rgba(15, 23, 42, 0.12);
    --pm-src: var(--rz-primary, #1976d2);
}

    .profile-menu-section [href="profile"] {
        --pm-src: var(--rz-primary, #1976d2);
    }

    .profile-menu-section [href="application-roles"] {
        --pm-src: var(--rz-success, #4caf50);
    }

    .profile-menu-section [href="application-users"] {
        --pm-src: var(--rz-warning, #ff9800);
    }

    .profile-menu-section .logout-menu-item {
        --pm-src: var(--rz-danger, var(--rz-error, #f44336));
    }

.rz-dark .profile-menu-section,
[data-theme="dark"] .profile-menu-section {
    --pm-hi: rgba(255, 255, 255, 0.14);
    --pm-ao: rgba(0, 0, 0, 0.60);
    --pm-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.6), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not(.rz-light) .profile-menu-section {
        --pm-hi: rgba(255, 255, 255, 0.14);
        --pm-ao: rgba(0, 0, 0, 0.60);
        --pm-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.6), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
    }
}

.profile-menu-section .rz-navigation-menu,
.profile-menu-section ul[class*="rz-menu"],
.profile-menu-section [class*="rz-profile-menu"] > ul,
.profile-menu-section .rz-popup {
    border-radius: var(--pm-radius) !important;
    overflow: hidden;
    background: radial-gradient(120% 120% at 30% 0%, var(--pm-glow-layer) 0%, transparent 55%), var(--pm-bg) !important;
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    box-shadow: var(--pm-shadow), inset 0 1px 1px var(--pm-hi) !important;
    outline: 1px solid var(--pm-border);
    outline-offset: -1px;
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    contain: paint;
    transform-origin: top right;
    animation: profileMenuIn 220ms var(--pm-ease-pop) both;
}

@keyframes profileMenuIn {
    from {
        opacity: 0;
        transform: translate3d(0, -8px, 0) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.profile-menu-section .rz-navigation-item-link,
.profile-menu-section .rz-navigation-item-wrapper {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--pm-item-radius) !important;
    transition: background-color var(--pm-duration) var(--pm-ease), box-shadow var(--pm-duration) var(--pm-ease);
    -webkit-tap-highlight-color: transparent;
}

    .profile-menu-section .rz-navigation-item-link::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(75deg, transparent 0%, color-mix(in srgb, var(--pm-src), white 80%) 45%, transparent 60%);
        opacity: 0;
        pointer-events: none;
        z-index: -1;
        transform: translate3d(-140%, 0, 0) rotate(20deg);
        transition: opacity var(--pm-duration) var(--pm-ease), transform 0.6s var(--pm-ease);
    }

@media (hover: hover) {
    .profile-menu-section .rz-navigation-item-link:hover,
    .profile-menu-section .rz-navigation-item-wrapper:hover {
        background-color: color-mix(in srgb, var(--pm-src), transparent 90%) !important;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-src), transparent 78%);
    }

        .profile-menu-section .rz-navigation-item-link:hover::after {
            opacity: 0.35;
            transform: translate3d(140%, 0, 0) rotate(20deg);
        }
}

.profile-menu-section .rz-navigation-item-link:focus-visible {
    outline: 2px solid var(--rz-primary, #1976d2);
    outline-offset: -2px;
}

.profile-menu-section .rz-navigation-item-icon {
    --pm-icon-tint: color-mix(in srgb, var(--pm-src), transparent 86%);
    --pm-icon-ring: color-mix(in srgb, var(--pm-src), transparent 70%);
    --pm-icon-glow: color-mix(in srgb, var(--pm-src), transparent 62%);
    color: var(--pm-src) !important;
    background: var(--pm-icon-tint);
    border-radius: var(--pm-icon-radius);
    box-shadow: 0 0 0 3px var(--pm-icon-tint), 0 0 0 4px var(--pm-icon-ring), 0 3px 6px rgba(0, 0, 0, 0.08), inset 0 1px 1px var(--pm-hi), inset 0 -2px 3px var(--pm-ao);
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    font-variation-settings: 'FILL' 1;
    transition: transform var(--pm-duration) var(--pm-ease-pop), box-shadow var(--pm-duration) var(--pm-ease), background 0.4s ease, color 0.4s ease;
}

@media (hover: hover) {
    .profile-menu-section .rz-navigation-item-link:hover .rz-navigation-item-icon {
        will-change: transform, box-shadow;
        transform: perspective(600px) translate3d(0, -1px, 4px) rotateX(8deg) rotateY(10deg) scale(1.12);
        box-shadow: 0 0 0 3px var(--pm-icon-tint), 0 0 0 4px var(--pm-icon-ring), 0 8px 14px rgba(0, 0, 0, 0.16), 0 0 16px var(--pm-icon-glow), inset 0 1px 1px var(--pm-hi), inset 0 -2px 3px var(--pm-ao);
    }
}

.profile-menu-section .rz-navigation-item-link:not(:hover) .rz-navigation-item-icon {
    will-change: auto;
}

@media (hover: none) {
    .profile-menu-section .rz-navigation-item-link::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-menu-section,
    .profile-menu-section * {
        animation: none !important;
        transition: none !important;
    }
}