feat: add cyan-orange color scheme with enhanced visual effects

- Add new CSS animations (hologramGlow, float, shimmer, scanline)
- Introduce cyan and orange color palette variants
- Update scrollbar styling with orange theme colors
- Modify player components with new gradient backgrounds
- Update global theme colors and surface styling
- Adjust default settings for enhanced visual experience

src/renderer/features/player/components/full-screen-player.module.css

@@ -38,3 +38,30 @@
     background: var(--theme-overlay-header);
     backdrop-filter: blur(var(--image-blur));
 }
+
+.scanline-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        0deg,
+        transparent 0%,
+        var(--album-color, rgba(0, 255, 255, 0.15)) 50%,
+        transparent 100%
+    );
+    background-size: 100% 200%;
+    animation: scanline 6s linear infinite;
+    pointer-events: none;
+}
+
+@keyframes scanline {
+    0% {
+        background-position: 0 -100vh;
+    }
+    100% {
+        background-position: 0 100vh;
+    }
+}

src/renderer/features/player/components/full-screen-player.tsx

@@ -428,6 +428,9 @@ export const FullScreenPlayer = () => {
         srcLoaded: true,
     });
 
+    // Convert RGB to RGB with opacity for scanline effect
+    const scanlineColor = background ? background.replace('rgb', 'rgba').replace(')', ', 0.15)') : 'rgba(0, 255, 255, 0.15)';
+
     const imageUrl = currentSong?.imageUrl && currentSong.imageUrl.replace(/size=\d+/g, 'size=500');
     const backgroundImage =
         imageUrl && dynamicIsImage
@@ -457,6 +460,14 @@ export const FullScreenPlayer = () => {
                     }
                 />
             )}
+            <div 
+                className={styles.scanlineOverlay}
+                style={
+                    {
+                        '--album-color': scanlineColor,
+                    } as CSSProperties
+                }
+            />
             <div className={styles.responsiveContainer}>
                 <FullScreenPlayerImage />
                 <FullScreenPlayerQueue />

src/renderer/features/player/components/player-button.module.css

@@ -12,13 +12,20 @@
     width: 100%;
     padding: 0.5rem;
     overflow: visible;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
     button {
         display: flex;
     }
 
     &:focus-visible {
-        outline: 1px var(--theme-colors-primary-filled) solid;
+        outline: 2px var(--theme-orange-base) solid;
+        box-shadow: var(--theme-shadow-orange-glow-soft);
+    }
+
+    &:hover {
+        transform: scale(1.1);
+        filter: drop-shadow(0 0 8px var(--theme-orange-transparent-40));
     }
 
     &:disabled {
@@ -32,13 +39,21 @@
 
 .player-button.active {
     svg {
-        fill: var(--theme-colors-primary-filled);
+        fill: var(--theme-orange-base);
+        filter: drop-shadow(0 0 6px var(--theme-orange-transparent-50));
     }
 }
 
 .main {
-    background: var(--theme-colors-foreground) !important;
+    background: linear-gradient(135deg, var(--theme-orange-base), var(--theme-orange-medium)) !important;
     border-radius: 50%;
+    box-shadow: var(--theme-shadow-orange-glow-soft);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+        box-shadow: var(--theme-shadow-orange-glow-medium);
+        transform: scale(1.15);
+    }
 
     svg {
         display: flex;

src/renderer/features/player/components/playerbar.module.css

@@ -1,7 +1,13 @@
 .container {
     width: 100vw;
     height: 100%;
-    border-top: var(--theme-colors-border);
+    border-top: 2px solid var(--theme-orange-transparent-40);
+    background: linear-gradient(
+        180deg,
+        var(--theme-colors-background) 0%,
+        rgba(2, 26, 26, 0.95) 100%
+    );
+    box-shadow: 0 -4px 12px var(--theme-orange-transparent-15);
 }
 
 .controls-grid {