/*
 * Vencord Discord Theme - "Hyper-Sensory Overload 2.0: Absolute Chaos (with Blurry Settings Modal)"
 *
 * This theme takes Azurite and ClearVision's fusion to an extreme,
 * introducing a completely new, vibrant, and highly animated aesthetic.
 * It now explicitly imports ClearVision's main CSS to potentially add
 * another layer of visual complexity and interaction.
 *
 * This version features:
 * - IMPORT of ClearVision's main CSS.
 * - NEW: IMPORT of BlurrySettingsModal.theme.css for a blurry settings modal.
 * - A high-contrast, neon-cyberpunk color palette.
 * - Every possible animation applied: rapid glows, shifting gradients,
 * aggressive transforms, glitch effects, pulsating backgrounds,
 * rainbow borders, and more.
 * - Subtle "bounce" animation applied to various text elements.
 * - Collapsible sidebars and refined border treatments.
 * - Spotify player styling with blur on hover.
 * - External import for "bubbles.css" for additional visual effects.
 * - Intensified visual feedback on hover, active, and focus states.
 * - Optimized for maximum visual impact, but may significantly impact performance.
 *
 * How to use:
 * 1. Open Vencord settings in Discord.
 * 2. Navigate to the "Themes" section.
 * 3. Click "Open Themes Folder" (or similar, depending on Vencord version).
 * 4. Create a new `.css` file (e.g., `absolute-chaos-full.css`) in that folder.
 * 5. Copy and paste this entire code into the new file.
 * 6. Save the file and enable the theme in Vencord settings.
 *
 * WARNING: This theme uses extremely extensive CSS animations and complex styles,
 * which WILL significantly impact performance and responsiveness, especially on
 * older or less powerful systems. The interaction with the imported ClearVision
 * CSS and other external imports may also produce unexpected visual results,
 * contributing to the "chaos." Use at your own risk for a truly chaotic experience.
 * If performance is an issue, consider reverting to a less intense theme.
 */

/* --- IMPORT ClearVision's Main CSS (as requested) --- */
@import url("https://clearvision.github.io/ClearVision-v7/main.css");

/* --- IMPORT Blurry Settings Modal (as requested) --- */
@import url("https://nspc911.github.io/themes/vencord/BlurrySettingsModal.theme.css");
/* Use only if the original snippet doesnt work
@import url("https://nspc911.github.io/themes/vencord/SettingsModal.theme.css"); */

/* --- Import Fonts (Still Azurite's Righteous, but with more flair) --- */
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); /* Adding a pixelated font for text effects */

/* --- Keyframe Animations (Amplified & New) --- */
/* Ultra-rapid pulsing glow for active elements */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 5px var(--accent-color), 0 0 10px var(--secondary-accent); }
    50% { box-shadow: 0 0 25px var(--accent-color), 0 0 40px var(--secondary-accent), 0 0 60px rgba(255,255,255,0.2); }
    100% { box-shadow: 0 0 5px var(--accent-color), 0 0 10px var(--secondary-accent); }
}

/* Hyper-speed background gradient shift for dynamic elements */
@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Faster, more erratic background movement for main app */
@keyframes background-pan {
    0% { background-position: 0% 0%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 0% 100%; }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 0%; }
}

/* Aggressive flicker for text/elements */
@keyframes flicker {
    0%, 19.999%, 22%, 62.999%, 64%, 69.999%, 71%, 79.999%, 81%, 99.999% { opacity: 1; }
    20%, 21.999%, 63%, 63.999%, 70%, 70.999%, 80%, 80.999%, 100% { opacity: 0.8; }
}

/* Glitch effect for text/elements */
@keyframes glitch {
    0% { transform: translate(0); filter: hue-rotate(0deg); }
    20% { transform: translate(-2px, 2px); filter: hue-rotate(90deg); }
    40% { transform: translate(-2px, -2px); filter: hue-rotate(180deg); }
    60% { transform: translate(2px, 2px); filter: hue-rotate(270deg); }
    80% { transform: translate(2px, -2px); filter: hue-rotate(360deg); }
    100% { transform: translate(0); filter: hue-rotate(0deg); }
}

/* Infinite rainbow border animation */
@keyframes rainbow-border {
    0% { border-color: #FF0000; }
    16% { border-color: #FF7F00; }
    33% { border-color: #FFFF00; }
    50% { border-color: #00FF00; }
    66% { border-color: #0000FF; }
    83% { border-color: #4B0082; }
    100% { border-color: #EE82EE; }
}

/* 3D press animation for buttons */
@keyframes press-3d {
    0% { transform: translateZ(0); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
    50% { transform: translateZ(-5px); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
    100% { transform: translateZ(0); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
}

/* Wiggle animation for elements */
@keyframes wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(1deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

/* NEW: Bounce animation for text */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-3px); } /* Slight lift */
    50% { transform: translateY(0); }
    75% { transform: translateY(-1px); } /* Smaller lift */
}

/* --- Color Variables (New Chaotic Neon Palette) --- */
:root {
    /* Core Backgrounds - Deep, Graded Cyberpunk Tones */
    --main-bg: linear-gradient(135deg, #0A001A, #000000);      /* Deepest gradient */
    --secondary-bg: linear-gradient(45deg, #1A0033, #0A001A); /* Slightly lighter gradient for panels */
    --tertiary-bg: linear-gradient(225deg, #2A004D, #1A0033);  /* Third layer gradient */

    /* Primary & Secondary Accents - Blinding Neon */
    --accent-color: #00FFFF; /* Primary Neon Cyan */
    --secondary-accent: #FF00FF; /* Secondary Neon Magenta */
    --hover-color: #00BFFF;  /* Brighter Cyan for hover */
    --active-color: #FF33FF; /* Brighter Magenta for active */

    /* Text & UI Colors */
    --text-color: #E0E0E0;   /* Light gray for main text */
    --muted-text-color: #808080; /* Muted gray for secondary text */
    --success-color: #00FF00; /* Neon Green for success */
    --error-color: #FF3300;  /* Bright Orange-Red for error */
    --border-color: linear-gradient(90deg, #00FFFF, #FF00FF); /* Rainbow border */
    --scrollbar-thumb: linear-gradient(45deg, var(--accent-color), var(--secondary-accent)); /* Gradient scroll thumb */
    --scrollbar-track: var(--secondary-bg); /* Scrollbar track matching secondary bg */

    /* --- Background Image Settings (ClearVision, but amplified) --- */
    --background-image: url('https://clearvision.github.io/images/sapphire.jpg'); /* ClearVision's default */
    --background-position: center;
    --background-size: cover;
    --background-attachment: fixed;
    --background-filter: saturate(calc(var(--saturation-factor, 1) * 2)) brightness(1.2) contrast(1.5) hue-rotate(0deg); /* Much stronger filter */
    --background-shading-opacity: 0.1; /* Minimal shading for maximum image visibility */

    /* --- Rounded Corners (Still Azurite's, but with glitch potential) --- */
    --avatar-radius: 5px;
    --server-radius: 5px;
    --message-radius: 5px;

    /* New variables for collapsible sidebars and borders */
    --app-border-frame: #00FFFF; /* Example, adjust to your theme's primary border color */
    --radius-md: 8px; /* Example medium border radius */

    /* Blurry Settings Modal variables */
    --blrsm-blur-by: 5px;
    --blrsm-dimmness: 25;


    /* --- Status Colors (Neon version) --- */
    --online-status-color: #00FF00; /* Neon Green */
    --idle-status-color: #FFFF00; /* Neon Yellow */
    --dnd-status-color: #FF0000; /* Neon Red */
    --streaming-status-color: #9900FF; /* Neon Purple */
    --offline-status-color: #505050; /* Darker Gray */

    /* --- Accessibility (Blinding Focus) --- */
    --focus-color: #FFFF00; /* Neon Yellow focus */

    /* --- Font (Primary Azurite, Secondary Pixel) --- */
    --font: 'Righteous', cursive;
    --pixel-font: 'Press Start 2P', cursive;
}

/* --- General Body and Root Styles (Extreme Background) --- */
body, #app-mount {
    background: var(--main-bg) !important;
    color: var(--text-color) !important;
    font-family: var(--font) !important;
    overflow: hidden;

    background-image: var(--background-image) !important;
    background-position: var(--background-position) !important;
    background-size: var(--background-size) !important;
    background-attachment: fixed !important;
    animation: background-pan 30s linear infinite alternate, background-hue-rotate 60s linear infinite !important; /* Faster pan, new hue rotate */
    filter: var(--background-filter); /* Apply filter directly here */
}

/* Background hue-rotate animation */
@keyframes background-hue-rotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Background shading overlay (minimal opacity, with noise) */
.app-2rEoJg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main-bg);
    opacity: var(--background-shading-opacity) !important;
    z-index: -1;
    display: var(--background-image, none) == 'none' ? none : block;
    pointer-events: none;
    /* Adding subtle static/noise effect */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAwIiBoZWlnaHQ9IjcwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZmlsdGVyIGlkPSJub2lzZSI+CiAgICA8ZnJUdXJidWlsZW5kIGJhc2VFeXBlbmN5PSIwLjYiIG51bU9jdGF2ZXM9IjIiIHN0aXRjaFRpbGVzPSJub1N0aXRjaCIvPgogIDwvZmlsdGVyPgogIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNub2lzZSkiIG9wYWNpdHk9IjAuMSIvPgo8L3N2Zz4=');
    background-size: 100px 100px; /* Adjust size for finer/coarser noise */
    animation: noise-animation 0.5s steps(2) infinite alternate; /* Fast noise animation */
}

@keyframes noise-animation {
    0% { background-position: 0 0; }
    100% { background-position: 100% 100%; }
}

/* --- Scrollbar Styling (Rainbow & Wiggle) --- */
::-webkit-scrollbar {
    width: 15px; /* Wider for more impact */
    height: 15px;
}

::-webkit-scrollbar-track {
    background: var(--secondary-bg);
    border-radius: 15px;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
    animation: gradient-shift 10s linear infinite; /* Animated track */
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb); /* Gradient thumb */
    border-radius: 15px;
    border: 3px solid var(--main-bg); /* Thick border around thumb */
    transition: all 0.1s ease;
    animation: rainbow-border 5s linear infinite, wiggle 1s infinite alternate; /* Rainbow border + wiggle */
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, var(--active-color), var(--accent-color));
    transform: scale(1.1) rotate(5deg); /* More aggressive transform on hover */
    box-shadow: 0 0 20px var(--accent-color), 0 0 30px var(--secondary-accent); /* Intense glow */
}

/* --- Server List (Extreme Transforms & Border Animations) --- */
.wrapper-1_G9Qc, .guilds-1SWgZJ {
    background: var(--secondary-bg) !important;
    box-shadow: 5px 0 25px rgba(0,0,0,0.8); /* Much stronger shadow */
    transition: all 0.1s ease;
}

.guilds-1SWgZJ .guild-1SWgZJ {
    border-radius: var(--server-radius) !important;
    transition: all 0.1s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: 3px solid transparent; /* Prepare for animated border */
}

.guilds-1SWgZJ .guild-1SWgZJ::before { /* Inner glow and shimmer */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(var(--accent-color),0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
    animation: gradient-shift 5s linear infinite; /* Shimmer effect */
}

.guilds-1SWgZJ .guild-1SWgZJ:hover {
    background-color: var(--hover-color) !important;
    transform: scale(1.2) rotate(10deg) translateX(10px) !important; /* Extreme scale, rotate, translate */
    box-shadow: 0 0 30px var(--accent-color), 0 0 50px var(--secondary-accent) !important; /* Blinding glow */
    border-radius: 50% !important; /* Always round on hover */
    z-index: 100; /* Bring to front */
    border-image: var(--border-color) 1; /* Apply rainbow border */
    animation: rainbow-border 1s linear infinite; /* Rapid rainbow border */
}

.guilds-1SWgZJ .guild-1SWgZJ:hover::before {
    opacity: 1;
}

.guilds-1SWgZJ .guild-1SWgZJ.selected-1_G9Qc {
    background: linear-gradient(45deg, var(--accent-color), var(--active-color)) !important;
    color: var(--main-bg) !important;
    transform: scale(1.15) rotate(-5deg) !important; /* Bigger, rotated */
    box-shadow: 0 0 40px var(--accent-color), 0 0 70px var(--secondary-accent), 0 0 100px rgba(255,255,255,0.4) !important; /* Explosive glow */
    animation: pulse-glow 0.8s infinite alternate, wiggle 0.5s infinite alternate; /* Fast pulse and wiggle */
    border-radius: 50% !important;
    border-image: var(--border-color) 1;
}

/* --- Home Icon Styling (Hyper-Animated) --- */
.homeIcon-2QJ_YF {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300FFFF"><path d="M12 2L0 12h3v10h6v-6h6v6h6V12h3L12 2zm0 14h-4v-4h8v4h-4z"/></svg>') !important; /* Cyber-house SVG */
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: all 0.1s ease;
    animation: flicker 0.5s infinite alternate; /* Constant flicker */
}

.homeIcon-2QJ_YF:hover {
    transform: scale(1.5) rotate(720deg) !important; /* Double spin */
    filter: drop-shadow(0 0 20px var(--accent-color)) hue-rotate(360deg) !important; /* Intense glow, hue rotate */
    animation: none; /* Stop flicker on hover for more control */
}

/* --- Channel List (Sidebar - Glitch & Pulse) --- */
.sidebar-1tnWFu {
    background: var(--secondary-bg) !important;
    border-right: 3px solid var(--border-color) !important; /* Thicker, animated border */
    box-shadow: inset -8px 0 20px rgba(0,0,0,0.6);
    transition: all 0.1s ease;
    animation: rainbow-border 3s linear infinite; /* Constant rainbow border */
}

.channels-Ie2l6A .channel-1S0KVS {
    color: var(--muted-text-color) !important;
    border-radius: 8px !important;
    margin: 4px 10px !important;
    padding: 8px 12px !important;
    transition: all 0.1s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    animation: flicker 0.8s infinite alternate, bounce 1.5s infinite; /* Subtle flicker, now with bounce */
}

.channels-Ie2l6A .channel-1S0KVS::before { /* Animated background on hover */
    content: '';
    position: absolute;
    top: 0;
    left: -200%; /* Start further left */
    width: 200%; /* Wider shimmer */
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--hover-color), transparent);
    transition: left 0.2s ease; /* Faster shimmer */
    z-index: -1;
    animation: gradient-shift 2s linear infinite; /* Constant background shimmer */
}

.channels-Ie2l6A .channel-1S0KVS:hover {
    color: var(--text-color) !important;
    transform: translateX(10px) scale(1.05) rotate(2deg); /* More aggressive slide, scale, rotate */
    box-shadow: 0 0 20px var(--accent-color);
    animation: glitch 0.5s infinite alternate; /* Glitch on hover */
}

.channels-Ie2l6A .channel-1S0KVS:hover::before {
    left: 0;
}

.channels-Ie2l6A .channel-1S0KVS.selected-1_G9Qc {
    background: linear-gradient(90deg, var(--accent-color), var(--active-color)) !important;
    color: var(--main-bg) !important;
    font-weight: bold !important;
    transform: translateX(0) scale(1.08) !important;
    box-shadow: 0 0 30px var(--accent-color), 0 0 50px var(--secondary-accent) !important;
    animation: pulse-glow 0.6s infinite alternate, glitch 0.3s infinite alternate, bounce 1.2s infinite; /* Very fast pulse, glitch, and bounce */
    border-image: var(--border-color) 1;
}

.header-2o-2hj {
    color: var(--text-color) !important;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
    animation: flicker 1s infinite alternate, bounce 1.8s infinite; /* Header flicker, now with bounce */
}

/* --- Chat Area (Main Content - Reactive Messages) --- */
.chat-3NbVjC {
    background: var(--main-bg) !important;
    position: relative;
    overflow: hidden;
    animation: background-pan 60s linear infinite alternate; /* Subtle background movement */
}

/* Message Background (Reactive & Glitchy) */
.message-2qnXI9 {
    background-color: transparent !important;
    padding: 8px 12px !important;
    border-radius: var(--message-radius) !important;
    margin-bottom: 10px !important;
    transition: all 0.1s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    border: 1px solid transparent; /* For hover border */
    animation: wiggle 5s infinite alternate; /* Subtle message wiggle */
}

.message-2qnXI9.cozyMessage-3V1C_D:hover {
    background: linear-gradient(90deg, var(--secondary-bg), transparent) !important;
    transform: translateY(-5px) scale(1.01) rotate(-1deg); /* Lift, scale, slight rotate */
    box-shadow: 0 8px 20px rgba(0,0,0,0.6), 0 0 15px var(--accent-color);
    border-image: var(--border-color) 1; /* Rainbow border on hover */
    animation: glitch 0.2s infinite alternate; /* Rapid glitch on hover */
}

/* Message content (Subtle text flicker, now with bounce) */
.messageContent-2qWWV3 {
    color: var(--text-color) !important;
    animation: flicker 0.6s infinite alternate, bounce 1.7s infinite; /* Now with bounce */
}

/* Timestamp (Intense glow on hover, now with bounce) */
.timestamp-p1C_K_ {
    color: var(--muted-text-color) !important;
    font-size: 0.9em;
    opacity: 0.9;
    transition: opacity 0.1s ease, text-shadow 0.1s ease;
    font-family: var(--pixel-font); /* Pixel font for timestamps */
    animation: bounce 1.9s infinite; /* Now with bounce */
}

.message-2qnXI9:hover .timestamp-p1C_K_ {
    opacity: 1;
    text-shadow: 0 0 15px var(--accent-color), 0 0 25px var(--secondary-accent); /* Blinding timestamp glow */
    animation: flicker 0.1s infinite alternate; /* Rapid flicker on hover */
}

/* Username (Extreme Glow & Transform, now with bounce) */
.headerText-3U0_5D .username-1A8gKq {
    color: var(--accent-color) !important;
    font-weight: bold;
    text-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--secondary-accent); /* Double glow */
    transition: all 0.1s ease;
    animation: pulse-glow 1s infinite alternate, bounce 1.6s infinite; /* Constant pulse, now with bounce */
}

.headerText-3U0_5D .username-1A8gKq:hover {
    text-shadow: 0 0 25px var(--accent-color), 0 0 40px var(--secondary-accent), 0 0 60px rgba(255,255,255,0.5); /* Ultra-intense glow */
    transform: translateX(5px) scale(1.05) rotate(1deg); /* More aggressive transform */
    animation: glitch 0.1s infinite alternate; /* Rapid glitch on hover */
}

/* --- Chat Input Bar (Chaotic Feedback) --- */
.form-2gU3fW, .textArea-2Spzkt {
    background: var(--tertiary-bg) !important;
    border-radius: 12px !important;
    border: 3px solid var(--border-color) !important; /* Rainbow border */
    color: var(--text-color) !important;
    padding: 12px 18px !important;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
    transition: all 0.1s ease;
    animation: rainbow-border 2s linear infinite; /* Constant rainbow border */
}

.form-2gU3fW:focus-within, .textArea-2Spzkt:focus-within {
    border-image: linear-gradient(90deg, var(--accent-color), var(--secondary-accent)) 1 !important; /* Focus rainbow */
    box-shadow: inset 0 0 20px rgba(var(--accent-color), 0.8), 0 0 30px rgba(var(--secondary-accent), 0.6) !important; /* Blinding focus glow */
    transform: scale(1.005) rotate(0.5deg); /* Slight wobble */
    animation: pulse-glow 0.5s infinite alternate, glitch 0.2s infinite alternate; /* Rapid pulse and glitch */
}

.placeholder-36uKxR {
    color: var(--muted-text-color) !important;
    transition: color 0.1s ease;
    font-family: var(--pixel-font);
    animation: flicker 0.5s infinite alternate, bounce 1.4s infinite; /* Now with bounce */
}

.form-2gU3fW:focus-within .placeholder-36uKxR {
    color: var(--accent-color) !important;
    text-shadow: 0 0 10px var(--accent-color);
}

/* --- User List (Right Sidebar - Glitch & Pulse) --- */
.members-1998pB {
    background: var(--secondary-bg) !important;
    border-left: 3px solid var(--border-color) !important;
    box-shadow: inset 8px 0 20px rgba(0,0,0,0.6);
    transition: all 0.1s ease;
    animation: rainbow-border 3s linear infinite reverse; /* Constant rainbow border (reversed) */
}

.members-1998pB .member-3-g9Xe {
    color: var(--muted-text-color) !important;
    border-radius: 8px !important;
    margin: 4px 10px !important;
    padding: 8px 12px !important;
    transition: all 0.1s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    animation: flicker 0.8s infinite alternate, bounce 1.5s infinite; /* Subtle flicker, now with bounce */
}

.members-1998pB .member-3-g9Xe::before { /* Animated background on hover */
    content: '';
    position: absolute;
    top: 0;
    right: -200%;
    width: 200%;
    height: 100%;
    background: linear-gradient(270deg, transparent, var(--hover-color), transparent);
    transition: right 0.2s ease;
    z-index: -1;
    animation: gradient-shift 2s linear infinite reverse; /* Constant shimmer */
}

.members-1998pB .member-3-g9Xe:hover {
    color: var(--text-color) !important;
    transform: translateX(-10px) scale(1.05) rotate(-2deg); /* More aggressive slide, scale, rotate */
    box-shadow: 0 0 20px var(--accent-color);
    animation: glitch 0.5s infinite alternate; /* Glitch on hover */
}

.members-1998pB .member-3-g9Xe:hover::before {
    right: 0;
}

.members-1998pB .member-3-g9Xe.selected-1_G9Qc {
    background: linear-gradient(270deg, var(--accent-color), var(--active-color)) !important;
    color: var(--main-bg) !important;
    font-weight: bold !important;
    transform: translateX(0) scale(1.08) !important;
    box-shadow: 0 0 30px var(--accent-color), 0 0 50px var(--secondary-accent) !important;
    animation: pulse-glow 0.6s infinite alternate, glitch 0.3s infinite alternate, bounce 1.2s infinite; /* Very fast pulse, glitch, and bounce */
    border-image: var(--border-color) 1;
}

/* --- Popups and Modals (Explosive Entry & Constant Distortion) --- */
.modal-1UGD9L, .popout-2sKjmi {
    background: var(--tertiary-bg) !important;
    border-radius: 20px !important; /* More rounded */
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8), 0 0 40px rgba(var(--accent-color), 0.6); /* Extreme shadow & glow */
    border: 3px solid var(--accent-color);
    transform: scale(0.8); /* Start much smaller */
    animation: fadeInScale 0.2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275), pulse-glow 3s infinite alternate, wiggle 0.8s infinite alternate; /* Fast pop-in, constant pulse, constant wiggle */
    overflow: hidden;
    position: relative; /* For glitch overlay */
}

.modal-1UGD9L::before, .popout-2sKjmi::before { /* Inner glow effect and constant glitch */
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(var(--accent-color), 0.2) 0%, transparent 70%);
    animation: gradient-shift 5s linear infinite, glitch 0.1s infinite alternate; /* Fast shimmer, rapid glitch */
    z-index: -1;
    pointer-events: none;
}


/* --- Buttons (Hyper-Interactive & 3D Press) --- */
.button-38aScr {
    border-radius: 10px !important;
    padding: 12px 25px !important;
    transition: all 0.1s ease-out;
    position: relative;
    overflow: hidden;
    z-index: 1;
    font-weight: bold;
    letter-spacing: 1px; /* More spaced out */
    text-transform: uppercase;
    animation: flicker 0.7s infinite alternate; /* Constant flicker */
}

.button-38aScr::before { /* Intense hover shimmer effect */
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: rgba(255,255,255,0.4); /* Brighter shimmer */
    transform: skewX(-45deg); /* More aggressive skew */
    transition: left 0.1s ease; /* Faster shimmer */
    z-index: -1;
}

.button-38aScr:hover::before {
    left: 100%;
}

.button-38aScr:hover {
    animation: press-3d 0.3s infinite alternate, pulse-glow 0.8s infinite alternate; /* Constant 3D press and pulse */
}

.button-38aScr.lookFilled-1G9Z5b.colorBrand-2M3O9g { /* Primary brand buttons */
    background: linear-gradient(45deg, var(--accent-color), var(--active-color)) !important;
    color: var(--main-bg) !important;
    box-shadow: 0 8px 25px rgba(var(--accent-color), 0.6); /* More intense shadow */
    border: 2px solid var(--secondary-accent); /* Additional border */
}

.button-38aScr.lookFilled-1G9Z5b.colorBrand-2M3O9g:hover {
    background: linear-gradient(45deg, var(--active-color), var(--accent-color)) !important;
    transform: translateY(-5px) scale(1.05) rotate(1deg); /* More aggressive */
    box-shadow: 0 12px 30px rgba(var(--accent-color), 0.8), 0 0 40px rgba(var(--secondary-accent), 0.7); /* Blinding glow */
}

/* --- Links (Extreme Glow & Flicker, now with bounce) --- */
a {
    color: var(--accent-color) !important;
    text-decoration: none !important;
    transition: all 0.1s ease;
    text-shadow: 0 0 10px rgba(var(--accent-color), 0.5);
    animation: flicker 0.5s infinite alternate, bounce 1.3s infinite; /* Constant link flicker, now with bounce */
}

a:hover {
    text-decoration: underline !important;
    color: var(--active-color) !important;
    text-shadow: 0 0 20px var(--active-color), 0 0 40px rgba(var(--active-color), 0.8); /* Blinding hover glow */
    transform: translateY(-2px) scale(1.02); /* More lift and scale */
    animation: glitch 0.2s infinite alternate; /* Glitch on hover */
}

/* --- Code Blocks (Hyper-Vibrant & Glitchy, now with bounce) --- */
.markup-2BOw-j code, .markup-2BOw-j pre {
    background-color: #000000 !important; /* Pure black background */
    border: 3px solid var(--success-color) !important; /* Neon green border */
    border-radius: 10px !important;
    padding: 10px 15px !important;
    color: #00FFFF !important; /* Electric cyan code text */
    font-family: 'Consolas', 'Courier New', monospace !important;
    box-shadow: inset 0 0 15px rgba(var(--success-color), 0.8);
    transition: all 0.1s ease;
    animation: pulse-glow 2s infinite alternate, flicker 0.3s infinite alternate, bounce 1.8s infinite; /* Pulse, flicker, now with bounce */
}

.markup-2BOw-j pre:hover {
    box-shadow: inset 0 0 25px rgba(var(--success-color), 1), 0 0 30px rgba(var(--success-color), 0.8);
    transform: scale(1.015) rotate(0.5deg); /* Slight scale and rotate */
    animation: glitch 0.1s infinite alternate; /* Rapid glitch on hover */
}

/* --- Unread Indicators (Rapid Pulsing & Glitch) --- */
.unread-1xRYgK {
    background-color: var(--accent-color) !important;
    box-shadow: 0 0 20px var(--accent-color), 0 0 30px var(--secondary-accent); /* Super intense glow */
    animation: pulse-glow 0.5s infinite alternate, glitch 0.1s infinite alternate; /* Rapid pulse and glitch */
}

/* --- Mentions (Blinding & Animated, now with bounce) --- */
.wrapper-3Nf-pA.mention-3Nf-pA {
    background-color: rgba(0, 255, 255, 0.4) !important; /* More opaque, neon cyan */
    color: var(--text-color) !important;
    border-radius: 8px !important;
    padding: 3px 8px !important;
    border: 2px solid var(--accent-color) !important;
    box-shadow: 0 0 15px rgba(var(--accent-color), 0.7);
    transition: all 0.1s ease;
    animation: flicker 0.4s infinite alternate, bounce 1.6s infinite; /* Now with bounce */
}

.wrapper-3Nf-pA.mention-3Nf-pA:hover {
    background-color: rgba(0, 255, 255, 0.6) !important;
    box-shadow: 0 0 25px var(--accent-color), 0 0 40px var(--secondary-accent); /* Blinding glow */
    transform: translateY(-2px) scale(1.08) rotate(1deg); /* Aggressive transform */
    animation: glitch 0.1s infinite alternate; /* Rapid glitch */
}

/* --- Embeds (Highly Structured & Constantly Shifting, now with bounce) --- */
.embed-IeV_3X {
    background: linear-gradient(180deg, var(--secondary-bg), #202035) !important;
    border-left: 8px solid var(--accent-color) !important; /* Much thicker accent border */
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6), 0 0 20px rgba(var(--accent-color), 0.5);
    transition: all 0.1s ease;
    animation: pulse-glow 3s infinite alternate, bounce 2s infinite; /* Subtle constant pulse, now with bounce */
}

.embed-IeV_3X:hover {
    transform: translateY(-5px) scale(1.01) rotate(1deg); /* Aggressive lift and rotate */
    box-shadow: 0 12px 30px rgba(0,0,0,0.8), 0 0 30px rgba(var(--accent-color), 0.8), 0 0 50px rgba(var(--secondary-accent), 0.7); /* Blinding glow */
    border-image: var(--border-color) 1;
    animation: glitch 0.2s infinite alternate; /* Glitch on hover */
}

.embed-IeV_3X .embedTitle-32Q4-V {
    color: var(--accent-color) !important;
    text-shadow: 0 0 15px rgba(var(--accent-color), 0.8);
    animation: flicker 0.3s infinite alternate, bounce 1.7s infinite; /* Now with bounce */
}

.embed-IeV_3X .embedDescription-1u_kY_ {
    color: var(--text-color) !important;
    animation: flicker 0.4s infinite alternate, bounce 1.9s infinite; /* Now with bounce */
}

/* --- User Popouts (Profile Cards - Ultimate Chaos) --- */
.userPopout-2j1gM6 {
    background: var(--tertiary-bg) !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.9), 0 0 50px rgba(var(--accent-color), 0.8); /* Maximum shadow and glow */
    border: 4px solid var(--accent-color);
    position: relative;
    overflow: hidden;
    animation: pulse-glow 1s infinite alternate, wiggle 0.5s infinite alternate; /* Constant pulse and wiggle */
}

.userPopout-2j1gM6::before { /* Animated background shimmer and aggressive glitch */
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        rgba(var(--accent-color), 0.1),
        rgba(var(--accent-color), 0.1) 15px,
        transparent 15px,
        transparent 30px
    );
    animation: gradient-shift 10s linear infinite, glitch 0.05s infinite alternate; /* Very fast glitch */
    z-index: -1;
    pointer-events: none;
}

.header-2o-2hj.header-2o-2hj.header-2o-2hj {
    background: linear-gradient(90deg, var(--accent-color), var(--active-color)) !important;
    border-top-left-radius: 18px !important; /* Adjusted for larger radius */
    border-top-right-radius: 18px !important;
    color: var(--main-bg) !important;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    animation: flicker 0.2s infinite alternate;
}

/* --- Settings Panels (Glitchy & Pulsating) --- */
.sidebar-1tnWFu.settings-1tnWFu {
    background: var(--secondary-bg) !important;
    border-right: 3px solid var(--border-color) !important;
    box-shadow: inset -8px 0 20px rgba(0,0,0,0.6);
    animation: rainbow-border 4s linear infinite;
}

.content-1SgpWY.settings-1SgpWY {
    background: var(--main-bg) !important;
    animation: background-pan 90s linear infinite alternate;
}

.card-3Qj_iC {
    background: var(--tertiary-bg) !important;
    border-radius: 15px !important;
    border: 2px solid var(--border-color) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    transition: all 0.1s ease;
    animation: pulse-glow 2.5s infinite alternate, flicker 0.6s infinite alternate;
}

.card-3Qj_iC:hover {
    transform: translateY(-3px) scale(1.01) rotate(0.5deg);
    box-shadow: 0 12px 25px rgba(0,0,0,0.6), 0 0 20px rgba(var(--accent-color), 0.4);
    animation: glitch 0.3s infinite alternate;
}

/* --- Input Fields (General - Blinding Focus, now with bounce) --- */
.input-2g-EW5, .input-2g-EW5:focus {
    background-color: #000000 !important; /* Pure black input */
    border: 3px solid var(--border-color) !important;
    border-radius: 10px !important;
    color: var(--accent-color) !important; /* Neon text in input */
    box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
    transition: all 0.1s ease;
    font-family: var(--pixel-font); /* Pixel font for inputs */
    animation: rainbow-border 1.5s linear infinite, bounce 1.1s infinite; /* Constant rainbow border, now with bounce */
}

.input-2g-EW5:focus {
    border-image: linear-gradient(90deg, var(--accent-color), var(--secondary-accent)) 1 !important;
    box-shadow: inset 0 0 20px rgba(var(--accent-color), 0.9), 0 0 30px rgba(var(--secondary-accent), 0.8) !important;
    animation: pulse-glow 0.3s infinite alternate, glitch 0.1s infinite alternate;
}

.input-2g-EW5::placeholder {
    color: var(--muted-text-color) !important;
    animation: flicker 0.3s infinite alternate, bounce 1.4s infinite; /* Now with bounce */
}

/* --- Tooltips (Explosive Appearance, now with bounce) --- */
.tooltip-2Qf-uE {
    background: linear-gradient(45deg, var(--tertiary-bg), var(--secondary-bg)) !important;
    color: var(--text-color) !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(var(--accent-color), 0.5);
    border: 2px solid var(--accent-color);
    animation: fadeInScale 0.1s forwards, pulse-glow 2s infinite alternate, bounce 1.6s infinite; /* Rapid fade in, constant pulse, now with bounce */
    font-family: var(--pixel-font);
}

/* --- DMs List (Animated & Reactive, now with bounce) --- */
.privateChannels-1nO1ee {
    background: var(--secondary-bg) !important;
}

.privateChannels-1nO1ee .channel-1S0KVS {
    color: var(--muted-text-color) !important;
    border-radius: 8px !important;
    margin: 2px 8px !important;
    padding: 6px 8px !important;
    transition: all 0.1s ease;
    animation: flicker 0.7s infinite alternate, bounce 1.5s infinite; /* Now with bounce */
}

.privateChannels-1nO1ee .channel-1S0KVS:hover {
    background-color: var(--hover-color) !important;
    color: var(--text-color) !important;
    transform: translateX(5px) scale(1.02);
    box-shadow: 0 0 10px var(--accent-color);
    animation: glitch 0.3s infinite alternate;
}

.privateChannels-1nO1ee .channel-1S0KVS.selected-1_G9Qc {
    background: linear-gradient(90deg, var(--accent-color), var(--active-color)) !important;
    color: var(--main-bg) !important;
    font-weight: bold !important;
    box-shadow: 0 0 15px var(--accent-color), 0 0 25px var(--secondary-accent);
    animation: pulse-glow 0.8s infinite alternate;
}

/* --- User Panel (Bottom Left - Pulsating & Glitchy) --- */
.panels-3g2psd {
    background: linear-gradient(to top, var(--tertiary-bg), var(--secondary-bg)) !important;
    border-top: 3px solid var(--border-color) !important;
    padding: 12px !important;
    box-shadow: 0 -8px 20px rgba(0,0,0,0.6);
    animation: rainbow-border 2.5s linear infinite reverse;
}

.panels-3g2psd .button-38aScr { /* Voice/Video/Settings buttons */
    background: var(--secondary-bg) !important;
    color: var(--text-color) !important;
    border-radius: 10px !important;
    padding: 10px 15px !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    transition: all 0.1s ease;
    animation: flicker 0.5s infinite alternate;
}

.panels-3g2psd .button-38aScr:hover {
    background-color: var(--hover-color) !important;
    transform: translateY(-3px) scale(1.08) rotate(1deg);
    box-shadow: 0 8px 15px rgba(0,0,0,0.6), 0 0 10px var(--accent-color);
    animation: glitch 0.2s infinite alternate;
}

/* --- Voice/Video Channels (Active & Pulsating, now with bounce) --- */
.container-1_G9Qc.voice-1_G9Qc {
    background: var(--secondary-bg) !important;
    border-radius: 12px !important;
    margin: 6px 10px !important;
    padding: 12px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
    border: 2px solid var(--accent-color);
    animation: pulse-glow 2s infinite alternate, bounce 1.8s infinite; /* Now with bounce */
}

.container-1_G9Qc.voice-1_G9Qc .name-1_G9Qc {
    color: var(--accent-color) !important;
    text-shadow: 0 0 10px rgba(var(--accent-color), 0.8);
    animation: flicker 0.3s infinite alternate, bounce 1.5s infinite; /* Now with bounce */
}

/* --- Mentions Popout (Explosive & Glitchy) --- */
.recentMentionsPopout-1b4l_V {
    background: var(--tertiary-bg) !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8), 0 0 40px rgba(var(--accent-color), 0.6);
    border: 3px solid var(--accent-color);
    animation: fadeInScale 0.2s forwards, pulse-glow 3s infinite alternate, glitch 0.1s infinite alternate;
}

/* --- Search Bar (Interactive & Pulsating, now with bounce) --- */
.searchBar-3Tn07V {
    background-color: #000000 !important; /* Pure black search bar */
    border-radius: 10px !important;
    border: 3px solid var(--border-color) !important;
    color: var(--accent-color) !important;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
    transition: all 0.1s ease;
    animation: rainbow-border 1.8s linear infinite, bounce 1.3s infinite; /* Now with bounce */
}

.searchBar-3Tn07V:focus-within {
    border-image: linear-gradient(90deg, var(--accent-color), var(--secondary-accent)) 1 !important;
    box-shadow: inset 0 0 20px rgba(var(--accent-color), 0.9), 0 0 30px rgba(var(--secondary-accent), 0.8) !important;
    animation: pulse-glow 0.4s infinite alternate, glitch 0.1s infinite alternate;
}

.searchBar-3Tn07V input {
    color: var(--accent-color) !important;
    font-family: var(--pixel-font);
}

.searchBar-3Tn07V .placeholder-36uKxR {
    color: var(--muted-text-color) !important;
    animation: flicker 0.4s infinite alternate, bounce 1.4s infinite; /* Now with bounce */
}

/* --- Custom Status Input (Animated, now with bounce) --- */
.customStatus-18f_oE .input-2g-EW5 {
    background-color: #000000 !important;
    border: 3px solid var(--border-color) !important;
    border-radius: 10px !important;
    color: var(--accent-color) !important;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
    transition: all 0.1s ease;
    font-family: var(--pixel-font);
    animation: rainbow-border 1.5s linear infinite, bounce 1.1s infinite; /* Now with bounce */
}

.customStatus-18f_oE .input-2g-EW5:focus {
    border-image: linear-gradient(90deg, var(--accent-color), var(--secondary-accent)) 1 !important;
    box-shadow: inset 0 0 20px rgba(var(--accent-color), 0.9), 0 0 30px rgba(var(--secondary-color), 0.8) !important;
    animation: pulse-glow 0.3s infinite alternate, glitch 0.1s infinite alternate;
}

/* --- General Text and Headers (Flickering & Glowing, now with bounce) --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-color) !important;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8), 0 0 15px var(--accent-color); /* Stronger shadow and glow */
    animation: flicker 0.8s infinite alternate, bounce 1.8s infinite; /* Now with bounce */
}

/* Ensure all text is readable and animated, now with bounce */
.text-xs, .text-sm, .text-base, .text-lg, .text-xl, .text-2xl {
    color: var(--text-color) !important;
    animation: flicker 0.6s infinite alternate, bounce 1.7s infinite; /* Now with bounce */
}

/* --- Avatar and Status Indicators (Extreme Animation) --- */
/* Apply avatar radius */
.avatar-1BDn8e, .avatar-3Q_c_B {
    border-radius: var(--avatar-radius) !important;
    transition: all 0.1s ease;
    border: 2px solid var(--accent-color); /* Accent border */
    animation: pulse-glow 1.5s infinite alternate; /* Constant pulse */
}

.avatar-1BDn8e:hover, .avatar-3Q_c_B:hover {
    transform: scale(1.2) rotate(15deg) !important; /* More aggressive transform */
    box-shadow: 0 0 20px var(--accent-color), 0 0 30px var(--secondary-accent) !important; /* Blinding glow */
    animation: glitch 0.1s infinite alternate; /* Rapid glitch on hover */
}

/* Status colors (with aggressive pulse and flicker) */
.status-1_G9Qc {
    animation: pulse-glow 0.5s infinite alternate, flicker 0.1s infinite alternate; /* Very fast pulse and flicker */
}

.status-1_G9Qc.statusOnline-2uQ_1D { background-color: var(--online-status-color) !important; }
.status-1_G9Qc.statusIdle-1_G9Qc { background-color: var(--idle-status-color) !important; }
.status-1_G9Qc.statusDnd-1_G9Qc { background-color: var(--dnd-status-color) !important; }
.status-1_G9Qc.statusStreaming-1_G9Qc { background-color: var(--streaming-status-color) !important; }
.status-1_G9Qc.statusOffline-1_G9Qc { background-color: var(--offline-status-color) !important; }

/* --- Focus Outline (Blinding & Glitchy) --- */
*:focus-visible {
    outline: 5px solid var(--focus-color) !important; /* Extremely thick outline */
    outline-offset: 5px !important;
    box-shadow: 0 0 0 8px rgba(var(--focus-color), 0.5), 0 0 20px rgba(var(--focus-color), 0.8) !important; /* Intense outer glow */
    transition: all 0.05s ease; /* Faster transition */
    animation: pulse-glow 0.2s infinite alternate, glitch 0.05s infinite alternate; /* Rapid pulse and glitch */
}

/* ===== Collapsible sidebars - lu9 (1354606015819022416) ===== */
body:not(.side-expanded) {
  [class^="sidebarList_"] {
    position: fixed; /* Remove if you don't want it to float */
    width: 150px; /* Set to 0px if you don't want it to float */
    container-type: unset;
    opacity: 0%;
    height: 95%;
    top: 38px;
    z-index: 998;
    left: -230px;
    border: 1px solid var(--app-border-frame);
    border-radius: var(--radius-md);
    filter: drop-shadow(16px 16px 16px #0005) ;
    transition-property: opacity, left, width;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  [class^="sidebar_"]:hover [class^="sidebarList_"] {
    left: 75px;
    opacity: 100%;
    width: 300px; /* Set your preferred width here (resize handle is disabled) */
  }

  [class*="guilds"] {
    z-index: 999; /* So the sidebar pops from behind the servers */
  }

  [class^="panels_"] {
    position: fixed !important; /* Floating user panel (status, deafen, etc) */
    width: 60px !important;
    z-index: 999 !important;
    transition: width .5s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  [class^="panels_"]:hover {
    width: 300px !important;
    z-index: 9999 !important;
  }


  [class^="panels_"] [class^="container__"] [class^="buttons__"] {
    opacity: 0%;
    scale: 0%; /* Because the buttons can't stay inside the panel on chromium (any help is appreciated) */
    transition-property: opacity, margin-bottom, scale;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .panels_c48ade:hover [class^="container__"] [class^="buttons__"] {

    scale: 100%;
    opacity: 100%;
  }

  [class^="sidebarResizeHandle_"] {
    display: none; /* Set your preferred width in the sidebar settings */
  }

  [class^="container_"] [class^="membersWrap_"] {
    position: fixed; /* Remove if you don't want it to float */
    height: 100%;
    opacity: 0%;
    z-index: 999;
    right: -250px;
    /* top: 80px; Add/change this according to your desktop/client */
    filter: drop_shadow(-16px -16px 16px #0005) ;
    transition-property: right, opacity;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  [class^="container_"] [class^="membersWrap_"]:hover {
    right: 0px;
    opacity: 100%;
  }

  [class*='page_'] {
    border: 1px solid var(--app-border-frame) !important;
    border-radius: var(--radius-md) !important;
  }

}

/* ===== Completed borders - Me :3 (1355432251990741066) ===== */
[class*='base_'] > [class*='content_'] {
    margin: 0 10px 10px 0;

    [class*='page_'] {
        border: 1px solid var(--app-border-frame);
        border-left: none;
        border-radius: 0 var(--radius-md) var(--radius-md) 0;
    }

    [class*='sidebar_'] {
        &::after {
            display: none;
        }

        [class*='sidebarList_'] {
            border-bottom: 1px solid var(--app-border-frame);
            border-bottom-left-radius: var(--radius-md);
        }
    }

    [class*='chat_'] {
        border-top: none !important;
    }
}

/* ===== Spotify Player - Vencord Addon Integration ===== */
#vc-spotify-player {
    --blur-amount: 4px;
    --normal-bg-colour: var(--bg-overlay-floating, var(--background-base-low, var(--background-secondary-alt)));

    position: relative;
    background: linear-gradient(to bottom, transparent 0%, var(--normal-bg-colour) 100%) !important;
    overflow: hidden;
    transition: all 0.4s ease-out;
    > * {
      filter: drop-shadow(0 0 10px var(--normal-bg-colour));
    }
}
#vc-spotify-player:hover {
    --blur-amount: 0px;
}
#vc-spotify-player::before,
#vc-spotify-player::after {
    z-index: -1;
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    transition: all 0.4s ease-out;
}
#vc-spotify-player::before {
    background: var(--vc-spotify-track-image);
    background-position: center top;
    background-size: cover;
    opacity: 0.5;
}
#vc-spotify-player:hover::before {
    opacity: 0.7;
}
#vc-spotify-player::after {
    backdrop-filter: blur(var(--blur-amount));
}
#vc-spotify-progress-bar > [class^="slider_"] > [class^="bar_"] > [class^="barFill_"] {
    background-color: white !important;
    background: var(--vc-spotify-track-image);
    background-size: 1px 100%;
}
#vc-spotify-progress-bar > [class^="slider_"] > [class^="bar_"] > [class^="barFill_"]::before {
    content: "";
    position: fixed;
    height: inherit;
    width: inherit;
    top: inherit;
    left: inherit;
    border-radius: 4px 0 0 4px;
    backdrop-filter: blur(10px) saturate(4) brightness(1.6);
}

/* ===== External Import - Bubbles.css ===== */
@import url(https://blade04208.github.io/ddex4/src/bubbles.css);