.glassmorphism-player,
.glassmorphism-player * {
   box-sizing: border-box;
}
.glassmorphism-player {
   --glass-bg: rgba(20,20,25,.42);
   --glass-border: rgba(255,255,255,.1);
   --accent-primary: #00f0ff;
   --accent-secondary: #bd00ff;
   --accent-tertiary: #ff0055;
   --ambient-base: #09090b;
   --ambient-center: #15151a;
   --text-main: #fff;
   --text-muted: #a1a1aa;
   position: relative;
   isolation: isolate;
   display: flex;
   overflow: hidden;
   min-height: 520px;
   width: 100%;
   height: 100%;
   color: var(--text-main);
   font: 400 16px/1.45 Poppins, Arial, sans-serif;
}
.glass-ambient {
   position: absolute;
   inset: 0;
   z-index: -1;
   overflow: hidden;
   background: radial-gradient(circle at center, var(--ambient-center) 0%, var(--ambient-base) 100%);
}
.glass-glow {
   position: absolute;
   border-radius: 50%;
   filter: blur(90px);
   opacity: .35;
   animation: glass-float 15s infinite alternate ease-in-out;
}
.glass-blob-1 { width: 45%; height: 60%; background: var(--accent-secondary); top: -12%; left: -10%; }
.glass-blob-2 { width: 42%; height: 56%; background: var(--accent-primary); right: -12%; bottom: -15%; animation-delay: -5s; }
.glass-blob-3 { width: 36%; height: 48%; background: var(--accent-tertiary); top: 28%; left: 32%; animation-delay: -10s; }
.glass-ambient.beat-active .glass-glow {
   opacity: .72;
   animation: glass-beat 1.2s infinite alternate ease-in-out;
}
.glass-playlist {
   width: 320px;
   min-width: 320px;
   display: flex;
   flex-direction: column;
   background: rgba(255,255,255,.04);
   border-right: 1px solid var(--glass-border);
   transition: margin-left .35s ease, transform .35s ease;
   z-index: 3;
}
.glassmorphism-player.playlist-collapsed .glass-playlist {
   margin-left: -320px;
}
.glass-sidebar-header {
   padding: 25px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid var(--glass-border);
}
.glass-sidebar-title {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 600;
   font-size: 1.2em;
   color: var(--accent-primary);
}
.glass-close-playlist {
   display: inline-flex;
}
.glass-playlist-items {
   flex: 1;
   overflow-y: auto;
   padding: 15px;
}
.glass-track {
   width: 100%;
   padding: 15px;
   margin-bottom: 8px;
   border: 1px solid transparent;
   border-radius: 14px;
   background: transparent;
   color: inherit;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-align: left;
   transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.glass-track:hover {
   background: rgba(255,255,255,.06);
   transform: translateX(5px);
}
.glass-track.active {
   background: rgba(0,240,255,.12);
   border-color: rgba(0,240,255,.35);
   box-shadow: 0 0 15px rgba(0,240,255,.12);
}
.glass-track-info {
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 4px;
}
.glass-track-title {
   color: var(--text-main);
   font-weight: 500;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}
.glass-track-artist,
.glass-track-duration {
   color: var(--text-muted);
   font-size: .78em;
}
.glass-track.active .glass-track-title,
.glass-track.active .glass-track-duration {
   color: var(--accent-primary);
}
.glass-main {
   flex: 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
}
.glass-top-nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 20px 30px;
   z-index: 2;
}
.glass-brand {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 600;
   letter-spacing: 1px;
   text-shadow: 0 0 10px rgba(0,240,255,.5);
}
.glass-icon-button,
.glass-control {
   border: none;
   background: transparent;
   color: var(--text-main);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: transform .25s ease, color .25s ease, opacity .25s ease;
}
.glass-icon-button:hover,
.glass-control:hover {
   transform: scale(1.1);
}
.glass-floating-toggle {
   position: absolute;
   top: 20px;
   left: 20px;
   z-index: 5;
}
.glass-player-core {
   flex: 1;
   min-height: 0;
   padding: 0 24px 38px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
.glass-artwork {
   position: relative;
   width: 280px;
   height: 280px;
   margin-bottom: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.glass-ring {
   position: absolute;
   width: 110%;
   height: 110%;
   border-radius: 50%;
   background: conic-gradient(from 0deg, transparent 0%, var(--accent-secondary) 25%, var(--accent-primary) 50%, var(--accent-tertiary) 75%, transparent 100%);
   opacity: 0;
   filter: blur(15px);
   animation: glass-spin 4s linear infinite;
   transition: opacity .35s ease;
}
.glass-artwork.playing .glass-ring {
   opacity: .8;
}
.glass-thumbnail {
   position: relative;
   z-index: 1;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 50%;
   border: 4px solid rgba(255,255,255,.12);
   box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.glass-cover-img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   animation: glass-rotate 25s linear infinite;
   animation-play-state: paused;
}
.glass-cover-img.playing {
   animation-play-state: running;
}
.glass-info {
   text-align: center;
   margin-bottom: 26px;
}
.glass-title {
   margin: 0 0 5px;
   font-size: 2em;
   font-weight: 700;
   line-height: 1.15;
   text-shadow: 0 0 20px rgba(255,255,255,.2);
}
.glass-artist {
   color: var(--text-muted);
   font-size: 1.1em;
   font-weight: 300;
}
.glass-progress-row,
.glass-volume-row {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 15px;
}
.glass-progress-row {
   max-width: 600px;
   margin-bottom: 30px;
}
.glass-volume-row {
   max-width: 300px;
   opacity: .75;
}
.glass-time {
   min-width: 45px;
   color: var(--text-muted);
   font-size: .85em;
   text-align: center;
   font-variant-numeric: tabular-nums;
}
.glass-progress-wrap {
   flex: 1;
   display: flex;
   align-items: center;
}
.glass-progress,
.glass-volume {
   -webkit-appearance: none;
   width: 100%;
   height: 6px;
   border-radius: 999px;
   background: rgba(255,255,255,.12);
   outline: none;
   cursor: pointer;
}
.glass-progress::-webkit-slider-thumb,
.glass-volume::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: var(--text-main);
   box-shadow: 0 0 10px var(--accent-primary);
}
.glass-controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 25px;
   margin-bottom: 34px;
}
.glass-control {
   color: var(--text-muted);
}
.glass-control.active-mode {
   color: var(--accent-primary);
   text-shadow: 0 0 10px var(--accent-primary);
}
.glass-control.small {
   font-size: 1.5em;
}
.glass-control.medium {
   color: var(--text-main);
   font-size: 2.2em;
}
.glass-play-pause {
   width: 70px;
   height: 70px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
   color: #fff;
   font-size: 2.5em;
   box-shadow: 0 10px 20px rgba(0,240,255,.3);
}
@keyframes glass-float {
   0% { transform: translate(0,0) scale(1); }
   50% { transform: translate(5%,10%) scale(1.1); }
   100% { transform: translate(-5%,5%) scale(.9); }
}
@keyframes glass-beat {
   0% { transform: scale(.9); filter: blur(80px); }
   100% { transform: scale(1.3) translate(2%,2%); filter: blur(100px); }
}
@keyframes glass-spin { to { transform: rotate(360deg); } }
@keyframes glass-rotate { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
   .glassmorphism-player {
      min-height: 680px;
   }
   .glass-playlist {
      position: absolute;
      inset: 0 auto 0 0;
      width: 85%;
      max-width: 320px;
      min-width: 0;
      transform: translateX(-100%);
      margin-left: 0 !important;
      background: rgba(10,10,12,.97);
      backdrop-filter: blur(30px);
      box-shadow: 10px 0 30px rgba(0,0,0,.75);
   }
   .glass-playlist.active {
      transform: translateX(0);
   }
   .glass-close-playlist {
      display: inline-flex;
   }
   .glass-artwork {
      width: 220px;
      height: 220px;
      margin-bottom: 38px;
   }
   .glass-title {
      font-size: 1.6em;
   }
   .glass-controls {
      gap: 15px;
      margin-bottom: 22px;
   }
   .glass-play-pause {
      width: 60px;
      height: 60px;
   }
   .glass-progress-row {
      max-width: 92%;
   }
   .glass-volume-row {
      max-width: 72%;
   }
}