:root {
   --color-audio: #CCD1D4;
   --color-additional-controls: #CCD1D4;
 }

 .darkmode {
   --color-audio: #CCD1D4;
   --color-additional-controls: #CCD1D4;
 }

 button.cc-btn.active,
 button.repeat-btn.active {
   color: #b02f30 !important;
 }

 .open-audio-box {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   background: linear-gradient(135deg, #1A5B84, #12415d);
   color: #fff;
   border-radius: 999px;
   padding: 6px 16px;
   min-width: 130px;
   cursor: pointer;
   font-size: 16px;
 }

 .open-audio-box.small-play {
   background: #3eb8ab;
   background: #1A5B84;
 }

 .open-audio-box button {
   box-shadow: none;
   background: none;
   border: none;
   color: #fff;
 }

 .audio-title {
   font-size: 14px;
   line-height: 24px;
   font-weight: bold;
   padding-inline-end: 15px;
   cursor: pointer;
   max-width: calc(100% - 144px);
   color: #ebedef;
 }

 .audio-title marquee {
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
   position: relative;
   display: inline-flex;
 }

 .audio-box,
 .audio-box:focus {
   position: fixed;
   bottom: 8px;
   right: 15px;
   width: 510px;
   max-width: calc(100% - 30px);
   min-width: 290px;
   backdrop-filter: blur(10px);
   z-index: 10000;
   padding: 16px;
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
   transition: transform 0.4s ease, opacity 0.4s ease;
   border-radius: 16px;
   overflow: hidden;
   user-select: none;
   transform: scale(1);
   background: rgba(10, 37, 54, 0.95);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: #CCD1D4;
 }

 .audio-box.is-minimize {
   max-width: calc(100% - 70px - 15px);
   padding: 22px 10px;
 }

 .audio-box button:not(.active),
 .audio-box button:not(.active):hover {
   color: var(--color-additional-controls, #2c3e50);
 }

 .cc-btn,
 .repeat-btn {
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .display-none {
   opacity: 0;
   pointer-events: none;
   transform: scale(0.95);
   display: none;
 }

 .audio-box.is-minimize .controls {
   display: none;
 }

 .minimal-player {
   display: flex;
   align-items: center;
   justify-content: space-between;
   direction: ltr;
 }

 .min-controls {
   display: flex;
   gap: 8px;
 }

 .min-controls button,
 .min-controls button:hover {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: none;
   background: #ccd1d429;
   backdrop-filter: blur(5px);
   font-size: 1.2rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 .min-controls .play-pause-btn {
   background: linear-gradient(135deg, #3eb8ab, #2c8178);
 }

 .controls {
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding-top: 30px;
   padding-bottom: 15px;
   font-size: 14px;
   line-height: 14px;
   font-family: sans-serif;
   direction: ltr;
 }

 .controls button:hover {
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
 }

 .progress-container {
   width: 100%;
   height: 8px;
   background: rgba(255, 255, 255, 0.2);
   border-radius: 4px;
   cursor: pointer;
   position: relative;
 }

 .progress {
   height: 100%;
   border-radius: 4px;
   background: linear-gradient(135deg, #8E193E, #c0392b);
   width: 0%;
   transition: width 0.2s linear;
 }

 .time {
   display: flex;
   justify-content: space-between;
   font-size: 0.8em;
   opacity: 0.8;
   margin-top: 0px;
 }

 .main-controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   margin: 4px 0;
 }

 .play-pause-btn,
 .skip-btn {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: none;
   color: #fff !important;
   font-size: 1.5rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 .play-pause-btn {
   width: 40px;
   height: 36px;
   background: linear-gradient(135deg, #8E193E, #c0392b);
 }

 .skip-btn {
   background: linear-gradient(135deg, #2c3e50, #34495e);
 }

 .additional-controls {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   padding-top: 12px;
 }

 .control-group {
   display: flex;
   align-items: center;
   gap: 4px;
 }

 .volume-btn,
 .volume-btn:hover {
   background: none;
   border: none;
   font-size: 1.2rem;
   color: #fff;
   cursor: pointer;
   width: 24px;
   box-shadow: none !important;
 }

 .controls input[type="range"] {
   -webkit-appearance: none;
   width: 60px;
   height: 4px;
   border-radius: 5px;
   background: #CCD1D4;
   outline: none;
 }

 .controls input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: linear-gradient(135deg, #8E193E, #c0392b);
   cursor: pointer;
 }

 .playback-rate {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: nowrap;
 }

 .playback-rate span {
   cursor: pointer;
   font-size: 16px;
   font-family: sans-serif;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 24px;

 }

 .playback-rate .current-speed {
   cursor: auto;
   font-size: 12px;
   font-family: sans-serif;
   min-width: 26px;
 }

 .rotate-180,
 .flip-x {
   transform: rotateX(0deg);
 }

 .flip-y {
   transform: rotateY(180deg);
 }

 .audio-box:not(.is-minimize) .min-controls .play-pause-btn {
   display: none;
 }

 .is-minimize .controls {
   display: none;
 }

 .is-minimize .minMaxBtn {}

 /* Visualizer CSS */
 .visualizer {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   height: 28px;
   margin-top: 1px;
   padding: 0 0px;
   width: 28px;
 }

 .bar {
   width: 1px;
   border-radius: 5px;
   border-right: 2px solid #fbfbfb;
   height: 0;
   background-color: currentColor;
   animation: grow 0.5s infinite alternate;
   animation-play-state: paused;
 }

 @keyframes pulse {
   0% {
     transform: scale(1);
     opacity: 1;
   }

   50% {
     transform: scale(1.1);
     opacity: 0.7;
   }

   100% {
     transform: scale(1);
     opacity: 1;
   }
 }

 @keyframes pulse-active {
   0% {
     transform: scale(1);
     opacity: 1;
   }

   50% {
     transform: scale(1.2);
     opacity: 0.5;
   }

   100% {
     transform: scale(1);
     opacity: 1;
   }
 }

 @keyframes grow {
   from {
     height: 10px;
   }

   to {
     height: 100%;
   }
 }

 .darkmode .audio-box {
   background: linear-gradient(#0a2536, #0b293bcf, #081822);
   color: #CCD1D4;
 }