:root {
          --accent: #a855f7;
          --text-main: #f9fafb;
          --text-muted: #9ca3c9;
        }
        body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text-main); }
        .demo-donate-card {
            background: rgba(255,255,255,0.05); padding: 16px; border-radius: 16px;
            border-left: 4px solid #a855f7; margin-bottom: 16px;
            backdrop-filter: blur(10px);
        }
        .demo-user { font-weight: bold; color: #fff; }
        .demo-amount-wrapper { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
        .demo-icon { width: 16px; height: 16px; }
        .demo-amount { font-weight: 900; color: #22c55e; }
        .demo-body { color: #cbd5e1; font-size: 14px; margin: 8px 0; }
        .bad-word { color: #ff4444; text-decoration: line-through; opacity: 0.7; }
        .demo-music-line { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #a855f7; background: rgba(168,85,247,0.1); padding: 4px 8px; border-radius: 6px; width: fit-content; }
        .demo-footer { font-size: 11px; color: #64748b; margin-top: 8px; }

        .fundraising-container {
            background: rgba(255,255,255,0.03); padding: 20px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1);
        }
        .fund-title-custom { color: #fff; font-weight: bold; margin-bottom: 12px; text-align: center;}
        .fund-bar-custom { height: 24px; background: rgba(0,0,0,0.5); border-radius: 12px; position: relative; overflow: hidden; margin-bottom: 8px;}
        .fund-bar-fill { position: absolute; left: 0; top: 0; height: 100%; width: 71%; background: linear-gradient(90deg, #a855f7, #3b82f6); border-radius: 12px; }
        .fund-bar-val { position: absolute; w-full: 100%; text-align: center; left: 0; right: 0; font-size: 12px; color: #fff; line-height: 24px; font-weight: bold; z-index: 2; text-shadow: 0 1px 2px rgba(0,0,0,0.5);}
        .fund-footer-custom { display: flex; justify-content: space-between; font-size: 12px; color: #94a3b8; }
        .top-donors-header { display: flex; align-items: center; gap: 8px; font-weight: bold; color: #fff; margin-bottom: 12px; }
        .status-pulse-purple { width: 8px; height: 8px; border-radius: 50%; background: #a855f7; box-shadow: 0 0 10px #a855f7; }
        .donor-item { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 14px; }
        .donor-name { color: #cbd5e1; }
        .donor-divider { flex: 1; border-bottom: 1px dashed rgba(255,255,255,0.2); margin: 0 8px; position: relative; top: -6px; }
        .donor-amount { color: #a855f7; font-weight: bold; }

        .ambient-player-container { --theme-accent: #7ef29a; --theme-bg: radial-gradient(circle at top left, #180024, #001824); position: relative; background: transparent; padding: 0; z-index: 5; width: 533px; max-width: 100%; margin: 0 auto; transition: all 0.8s ease; }
        .ambient-player-container::before { content: ''; position: absolute; inset: -80px; background: var(--theme-accent); contain: strict; filter: blur(55px); opacity: 0.2; border-radius: 50%; z-index: -1; pointer-events: none; transition: background 0.8s ease, opacity 0.8s ease; animation: ambient-pulse 5s infinite alternate ease-in-out; }
        @keyframes ambient-pulse { 0% { transform: scale(0.65); opacity: 0.15; filter: blur(50px); } 100% { transform: scale(0.7); opacity: 0.25; filter: blur(60px); } }
        .scene-back-preview { display: flex; flex-direction: column; width: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.8); position: relative; z-index: 2; transition: all 0.8s ease; }
        .queue-popup-custom { background: var(--theme-bg); padding-top: 12px; transition: background 0.5s ease; }
        .queue-popup__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-family: 'Montserrat', sans-serif; padding: 0 12px; }
        .queue-popup__status-wrapper { display: flex; gap: 10px; }
        .queue-item-custom { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: rgba(255,255,255,0.05); position: relative; overflow: hidden; }
        .order-status, .volume-badge { background: rgba(255,255,255, 0.05); border-radius: 999px; padding: 2px 10px; border: rgba(255,255,255, 0.3); }
        .queue-item__left { display: flex; gap: 10px; align-items: center; }
        .active-track::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 40%; background: var(--theme-progress); opacity: 0.3; }
        .player-frame { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; border-radius: 0 0 14px 14px; overflow: hidden; position: relative; }
        .video-placeholder { width: 100%; height: 100%; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
        .ambient-player-container[data-theme="default"] { --theme-accent: #7ef29a; --theme-bg: radial-gradient(circle at top left, #180024, #001824); }
        .ambient-player-container[data-theme="cyber"] { --theme-accent: #f472b6; --theme-bg: linear-gradient(135deg, #2d0036 0%, #0000 100%); }
        .ambient-player-container[data-theme="emerald"] { --theme-accent: #fbbf24; --theme-bg: radial-gradient(circle at center, #064e3b 0%, #020617 100%); }
        .queue-popup__count, .order-status__text, .volume-badge, .queue-item__user, .queue-item__bar { color: var(--theme-accent) !important; }
        .queue-item__bar { background: var(--theme-accent); }
        .order-status__dot { background: var(--theme-accent); box-shadow: 0 0 10px var(--theme-accent); }
        .queue-item__indicator { display: flex; gap: 2px; align-items: flex-end; height: 12px; }
        .queue-item__bar { width: 2px; height: 80%; background: #7ef29a; border-radius: 2px; transform-origin: bottom; animation: queue-bar 1.6s ease-in-out infinite alternate; }
        .queue-item__bar:nth-child(1){ animation-delay: 0s; } .queue-item__bar:nth-child(2){ animation-delay: .33s; } .queue-item__bar:nth-child(3){ animation-delay: .66s; }
        @keyframes queue-bar{ 0% { transform: scaleY(.25); opacity: .75; } 100% { transform: scaleY(1); opacity: 1; } }

        details summary::-webkit-details-marker { display:none; }
        details > summary { list-style: none; }
        details[open] summary svg { transform: rotate(180deg); }