.content-box {
    width: 100%;
    height: 120px;
    background: linear-gradient(90deg, #1A1F2B 0%, #2E3440 100%);
    backdrop-filter: blur(5px) !important;
    margin-bottom: 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); /* softer base shadow */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding: 15px;
    box-sizing: border-box;
    transition: all 0.3s ease;

    /* Neon animated border */
    border: 2px solid transparent; 
    border-image: conic-gradient(
        from var(--angle),
        #00eaff 0%,
        #ff007f 15%,
        #ffea00 30%,
        #39ff14 45%,
        #ff4500 60%,
        #8a2be2 75%,
        #00eaff 100%
    ) 1;
    --angle: 0deg;
    animation: rotate 20s linear infinite;

    box-shadow: 
        0 0 3px rgba(0, 234, 255, 0.15),   /* Softer cyan inner glow */
        0 0 6px rgba(255, 0, 127, 0.1),    /* Gentler magenta mid-glow */
        0 0 9px rgba(255, 234, 0, 0.1),    /* Dimmer yellow outer glow */
        0 0 12px rgba(57, 255, 20, 0.1),   /* Subtle lime further out */
        0 0 16px rgba(138, 43, 226, 0.1);  /* Faint violet edge */
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}





.profile-view-top-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Align items vertically */
    gap: 20px; /* Space between identity and stats */
    border-left: 5px solid var(--profile-color, var(--user-color, #A0A6B1)); /* Use CSS variable for color */
    padding: 15px; /* Add some padding */
    background: linear-gradient(90deg, #1A1F2B 0%, #2E3440 100%); /* Gradient background */
    border-radius: 12px; /* Match other elements */
    margin-bottom: 0px; /* Space below this section */
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-sizing: border-box;
    cursor: pointer; /* Match header interactivity */
    margin-top: 10px;
}
.profile-view-section {
    background: linear-gradient(90deg, #1A1F2B 0%, #2E3440 100%);
    border: 1px solid #2E3440; /* Softer border than accent */
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-sizing: border-box;
    cursor: pointer;
}
/* Shared rotate keyframe (consolidated—no duplicates) */
@keyframes rotate {
    to { --angle: 360deg; }
}
/* Smooth angle (consolidated) */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
/* Header styling for holographic effect */
.new-members-title,
.lobby-switcher-title,
.trending-header {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-sizing: border-box;
    padding: 12px 0;
    background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--user-color) 50%, black), transparent);

    color: #FFFFFF;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer; /* Added for hand cursor */
}
/* Specific styles for .new-members-title */
.new-members-title {
  background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--user-color) 50%, black), transparent);

    /* text-align: center; */
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid var(--user-color);
    padding-left: 20px;
    border-top: 1px solid var(--user-color, #00D4FF);
}
/* Specific styles for .trending-header */
.trending-header {
display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 30px;
    background: linear-gradient(270deg, transparent,
 color-mix(in srgb, var(--user-color)
#1E90FF
 50%, black), transparent);
    backdrop-filter: blur(5px);
    border-bottom: 1px solid var(--user-color, );
    height: 55px;
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    border-top: 1px solid var(--user-color, #00D4FF);
}
/* Holographic effect for nav profile */
.nav-profile .holo-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: 100px; /* Align with 12px parent */
    clip-path: inset(2px);
    --barwidth: 2.5%;
    --space: 120px;
    --hue: 45;
    background-image:
        radial-gradient(
            farthest-corner ellipse at calc(var(--mx, 50%) * 0.5 + 25%) calc(var(--my, 50%) * 0.5 + 25%),
            hsl(0, 0%, 95%, 0.5) 20%,
            transparent 90%
        ),
        repeating-linear-gradient(
            45deg,
            hsl(0, 0%, 10%) 0%,
            hsl(0, 0%, 20%) var(--barwidth),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 2),
            hsl(0, 0%, 50%) calc(var(--barwidth) * 3),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 4),
            hsl(0, 0%, 20%) calc(var(--barwidth) * 5),
            hsl(0, 0%, 10%) calc(var(--barwidth) * 6)
        );
    background-size: cover, 150% 150%;
    background-position:
        center,
        calc(((var(--mx, 50%) - 50%) * 0.6) + 50%) calc(((var(--my, 50%) - 50%) * 0.6) + 50%);
    background-blend-mode: exclusion;
    filter: brightness(0.75) contrast(1.8) saturate(1.5);
    mix-blend-mode: color-dodge;
    opacity: 0.42;
    transition: background-position 0.05s ease-out, opacity 0.2s ease, filter 0.2s ease;
}
.nav-profile .holo-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url('/foils/voxzly.png'),
        repeating-linear-gradient(
            55deg,
            hsl(3, 95%, 85%) calc(var(--space) * 1),
            hsl(207, 100%, 84%) calc(var(--space) * 2),
            hsl(160, 100%, 86%) calc(var(--space) * 3),
            hsl(3, 95%, 85%) calc(var(--space) * 4)
        );
    background-size: 300px 150px, 500% 100%;
    background-position:
        calc(((var(--mx, 50%) - 50%) * 0.1) + 50%) calc(((var(--my, 50%) - 50%) * 0.1) + 50%),
        calc(((var(--mx, 50%) - 50%) * -0.8) + 50%) calc(((var(--my, 50%) - 50%) * -0.8) + 50%);
    background-blend-mode: hard-light;
    filter: brightness(0.9) contrast(1.5) saturate(1.5);
    mix-blend-mode: screen;
    opacity: 0.38;
    transition: background-position 0.05s ease-out, opacity 0.2s ease;
    clip-path: inset(2px);
    border-radius: 100px;
}
.nav-profile .holo-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(
            farthest-corner circle at var(--mx, 50%) var(--my, 50%),
            hsla(0, 0%, 100%, 0.4) 0%,
            transparent 85%
        );
    filter: brightness(1.1) contrast(1.3);
    mix-blend-mode: hard-light;
    opacity: 0.48;
    transition: background-position 0.05s ease-out, opacity 0.2s ease, filter 0.2s ease;
    clip-path: inset(2px);
    border-radius: 100px;
}
.nav-profile:not(:hover):not(:active):not(:focus) .holo-layer {
    animation: shimmerIdle 6s ease-in-out infinite;
}
/* Holographic effect for explore */
.explore {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
    box-sizing: border-box;
    z-index: 0;
    background: linear-gradient(135deg, #2E3440 0%, #0A0E17 100%);
    padding: 10px 20px;
    border-radius: 100px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}
/* Holographic effect for dropdown button */
.feed-selector .dropdown-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-sizing: border-box;
}
/* Holographic shimmer layer for headers, explore, dropdown, content-box, and profile sections */
.new-members-title .holo-layer,
.lobby-switcher-title .holo-layer,
.trending-header .holo-layer,
.profile-view-top-section .holo-layer,
.profile-view-section .holo-layer,
.notification-header .holo-layer, /* Added for notifications popup */
.notification-content .holo-layer,
.notification-header2 .holo-layer,
.explore .holo-layer,
.feed-selector .dropdown-btn .holo-layer,
.content-box .holo-layer,
.comment-popup-header .holo-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    --barwidth: 2.5%;
    --space: 120px;
    --hue: 45;
    background-image:
        radial-gradient(
            farthest-corner ellipse at calc(var(--mx, 50%) * 0.5 + 25%) calc(var(--my, 50%) * 0.5 + 25%),
            hsl(0, 0%, 95%, 0.5) 20%,
            transparent 90%
        ),
        repeating-linear-gradient(
            45deg,
            hsl(0, 0%, 10%) 0%,
            hsl(0, 0%, 20%) var(--barwidth),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 2),
            hsl(0, 0%, 50%) calc(var(--barwidth) * 3),
            hsl(0, 0%, 35%) calc(var(--barwidth) * 4),
            hsl(0, 0%, 20%) calc(var(--barwidth) * 5),
            hsl(0, 0%, 10%) calc(var(--barwidth) * 6)
        );
    background-size: cover, 150% 150%;
    background-position:
        center,
        calc(((var(--mx, 50%) - 50%) * 0.6) + 50%) calc(((var(--my, 50%) - 50%) * 0.6) + 50%);
    background-blend-mode: exclusion;
    filter: brightness(0.75) contrast(1.8) saturate(1.5);
    mix-blend-mode: color-dodge;
    opacity: 0.42;
    transition: background-position 0.05s ease-out, opacity 0.2s ease, filter 0.2s ease;
    clip-path: inset(2px);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}
/* Add border-radius to explore, content-box, profile-view-top-section, and profile-view-section holo-layer */
.explore .holo-layer,
.profile-view-top-section .holo-layer,
.profile-view-section .holo-layer,
.comment-popup-header .holo-layer {
    border-radius: 16px;
    overflow: hidden;
}
/* Colorful foil effect for headers, explore, dropdown, content-box, and profile sections */
.new-members-title .holo-layer::before,
.lobby-switcher-title .holo-layer::before,
.trending-header .holo-layer::before,
.profile-view-top-section .holo-layer::before,
.profile-view-section .holo-layer::before,
.notification-header .holo-layer::before, /* Added for notifications popup */
.notification-content .holo-layer::before,
.notification-header2 .holo-layer::before,
.explore .holo-layer::before,
.feed-selector .dropdown-btn .holo-layer::before,
.content-box .holo-layer::before,
.comment-popup-header .holo-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url('/foils/voxzly.png'),
        repeating-linear-gradient(
            55deg,
            hsl(3, 95%, 85%) calc(var(--space) * 1),
            hsl(207, 100%, 84%) calc(var(--space) * 2),
            hsl(160, 100%, 86%) calc(var(--space) * 3),
            hsl(3, 95%, 85%) calc(var(--space) * 4)
        );
    background-size: 300px 150px, 500% 100%;
    background-position:
        calc(((var(--mx, 50%) - 50%) * 0.1) + 50%) calc(((var(--my, 50%) - 50%) * 0.1) + 50%),
        calc(((var(--mx, 50%) - 50%) * -0.8) + 50%) calc(((var(--my, 50%) - 50%) * -0.8) + 50%);
    background-blend-mode: hard-light;
    filter: brightness(0.9) contrast(1.5) saturate(1.5);
    mix-blend-mode: screen;
    opacity: 0.38;
    transition: background-position 0.05s ease-out, opacity 0.2s ease;
    clip-path: inset(2px);
}
/* Add border-radius to explore, content-box, profile-view-top-section, and profile-view-section holo-layer::before */
.explore .holo-layer::before,
.profile-view-top-section .holo-layer::before,
.profile-view-section .holo-layer::before,
.comment-popup-header .holo-layer::before {
    border-radius: 10px;
}
/* Glare layer for headers, explore, dropdown, content-box, and profile sections */
.new-members-title .holo-layer::after,
.lobby-switcher-title .holo-layer::after,
.trending-header .holo-layer::after,
.profile-view-top-section .holo-layer::after,
.profile-view-section .holo-layer::after,
.notification-header .holo-layer::after, /* Added for notifications popup */
.notification-content .holo-layer::after,
.notification-header2 .holo-layer::after,
.explore .holo-layer::after,
.feed-selector .dropdown-btn .holo-layer::after,
.content-box .holo-layer::after,
.comment-popup-header .holo-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(
            farthest-corner circle at var(--mx, 50%) var(--my, 50%),
            hsla(0, 0%, 100%, 0.4) 0%,
            transparent 85%
        );
    filter: brightness(1.1) contrast(1.3);
    mix-blend-mode: hard-light;
    opacity: 0.48;
    transition: background-position 0.05s ease-out, opacity 0.2s ease, filter 0.2s ease;
    clip-path: inset(2px);
}
/* Add border-radius to explore, content-box, profile-view-top-section, and profile-view-section holo-layer::after */
.explore .holo-layer::after,
.profile-view-top-section .holo-layer::after,
.profile-view-section .holo-layer::after,
.comment-popup-header .holo-layer::after {
    border-radius: 10px;
}
/* Hover intensification for content-box */
.content-box:hover .holo-layer {
    opacity: 0.45;
    filter: brightness(0.72) contrast(1.8) saturate(1.5);
}
.content-box:hover .holo-layer::before {
    opacity: 0.4;
}
.content-box:hover .holo-layer::after {
    opacity: 0.52;
    filter: brightness(1.12) contrast(1.35);
}
/* Hover intensification for notification-header2 */
.notification-header2:hover .holo-layer {
    opacity: 0.45;
    filter: brightness(0.72) contrast(1.8) saturate(1.5);
}
.notification-header2:hover .holo-layer::before {
    opacity: 0.4;
}
.notification-header2:hover .holo-layer::after {
    opacity: 0.52;
    filter: brightness(1.12) contrast(1.35);
}
/* Hover intensification for notification-header */ /* Added for notifications popup */
.notification-header:hover .holo-layer {
    opacity: 0.45;
    filter: brightness(0.72) contrast(1.8) saturate(1.5);
}
.notification-header:hover .holo-layer::before {
    opacity: 0.4;
}
.notification-header:hover .holo-layer::after {
    opacity: 0.52;
    filter: brightness(1.12) contrast(1.35);
}
/* Hover intensification for profile-view-top-section */
.profile-view-top-section:hover .holo-layer {
    opacity: 0.45;
    filter: brightness(0.72) contrast(1.8) saturate(1.5);
}
.profile-view-top-section:hover .holo-layer::before {
    opacity: 0.4;
}
.profile-view-top-section:hover .holo-layer::after {
    opacity: 0.52;
    filter: brightness(1.12) contrast(1.35);
}
/* Hover intensification for profile-view-section */
.profile-view-section:hover .holo-layer {
    opacity: 0.45;
    filter: brightness(0.72) contrast(1.8) saturate(1.5);
}
.profile-view-section:hover .holo-layer::before {
    opacity: 0.4;
}
.profile-view-section:hover .holo-layer::after {
    opacity: 0.52;
    filter: brightness(1.12) contrast(1.35);
}
/* Hover intensification for comment popup header */
.comment-popup-header:hover .holo-layer {
    opacity: 0.45;
    filter: brightness(0.72) contrast(1.8) saturate(1.5);
}
.comment-popup-header:hover .holo-layer::before {
    opacity: 0.4;
}
.comment-popup-header:hover .holo-layer::after {
    opacity: 0.52;
    filter: brightness(1.12) contrast(1.35);
}
/* Size change on hover for explore */
.explore:hover {
    transform: scale(1.02);
}
/* Idle animation for gentle shimmer */
@keyframes shimmerIdle {
    0% { background-position: center, 30% 40%, 30% 40%, 30% 40%; }
    50% { background-position: center, 35% 40%, 35% 40%, 35% 40%; }
    100% { background-position: center, 30% 40%, 30% 40%, 30% 40%; }
}
.new-members-title:not(:hover):not(:active):not(:focus) .holo-layer,
.lobby-switcher-title:not(:hover):not(:active):not(:focus) .holo-layer,
.trending-header:not(:hover):not(:active):not(:focus) .holo-layer,
.profile-view-top-section:not(:hover):not(:active):not(:focus) .holo-layer,
.profile-view-section:not(:hover):not(:active):not(:focus) .holo-layer,
.notification-header:not(:hover):not(:active):not(:focus) .holo-layer, /* Added for notifications popup */
.notification-content:not(:hover):not(:active):not(:focus) .holo-layer,
.notification-header2:not(:hover):not(:active):not(:focus) .holo-layer,
.explore:not(:hover):not(:active):not(:focus) .holo-layer,
.feed-selector .dropdown-btn:not(:hover):not(:active):not(:focus) .holo-layer,
.content-box:not(:hover):not(:active):not(:focus) .holo-layer,
.comment-popup-header:not(:hover):not(:active):not(:focus) .holo-layer {
    animation: shimmerIdle 6s ease-in-out infinite;
}
/* Scrollbar thumbs for all relevant elements */
.new-members-list::-webkit-scrollbar-thumb,
.whos-here-list::-webkit-scrollbar-thumb,
.invite-members-list::-webkit-scrollbar-thumb,
.lobby-list::-webkit-scrollbar-thumb,
.profile-view-body::-webkit-scrollbar-thumb,
.settings-form .options::-webkit-scrollbar-thumb {
    background: var(--user-color, #a0a6b1) !important;
    border-radius: 4px !important;
}
/* Scrollbar thumbs on hover */
.new-members-list::-webkit-scrollbar-thumb:hover,
.whos-here-list::-webkit-scrollbar-thumb:hover,
.invite-members-list::-webkit-scrollbar-thumb:hover,
.lobby-list::-webkit-scrollbar-thumb:hover,
.profile-view-body::-webkit-scrollbar-thumb:hover,
.settings-form .options::-webkit-scrollbar-thumb:hover {
    background: var(--user-color, #a0a6b1) !important;
}

/* ==== FINAL FIX: Stop the content-box holo foil from ever blocking the new-members blur ==== */
.content-box .holo-layer,
.content-box .holo-layer::before,
.content-box .holo-layer::after {
    background: transparent !important;
    background-image: none !important;   /* kill the foil textures completely on this element */
    opacity: 0 !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    display: none !important;            /* nuclear option – just hide the whole holo layer on content-box */
}