/* ============================================
   🎵 LISTEN MUSIC PLAYER - GLASSMORPHISM DESIGN
   ============================================ */

/* Audio Player Container - Glassmorphism */
.audio-player-container {
   position: relative;
   width: 100%;
   border-radius: 20px;
   overflow: hidden;
   margin-bottom: 20px;
   box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.audio-player-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   filter: blur(80px) brightness(0.4);
   transform: scale(1.1);
   z-index: 1;
}

.audio-player-content {
   position: relative;
   z-index: 2;
   backdrop-filter: blur(10px) saturate(180%);
   -webkit-backdrop-filter: blur(10px) saturate(180%);
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 30px;
   min-height: 600px;
}

/* Album Cover - Vinyl Container */
.audio-cover {
   width: 100%;
   max-width: 300px;
   margin: 0 auto 30px;
   position: relative;
   border-radius: 50%;
   overflow: visible;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
   aspect-ratio: 1 / 1;
}

/* ============================================
   VINYL RECORD EFFECT - Realistic vinyl disk
   ============================================ */

.vinyl-record {
   width: 100%;
   height: 100%;
   position: relative;
   border-radius: 50%;
   background: radial-gradient(
      circle at 30% 30%,
      #1a1a1a 0%,
      #0a0a0a 50%,
      #000000 100%
   );
   box-shadow:
      inset 0 0 50px rgba(0, 0, 0, 0.9),
      inset 0 0 20px rgba(255, 255, 255, 0.05),
      0 10px 40px rgba(0, 0, 0, 0.7);
}

/* Vinyl grooves - realistic spiral texture */
.vinyl-grooves {
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background-image:
      repeating-radial-gradient(
         circle at 50% 50%,
         transparent 0px,
         transparent 1.5px,
         rgba(255, 255, 255, 0.03) 1.5px,
         rgba(255, 255, 255, 0.03) 3px
      ),
      repeating-radial-gradient(
         circle at 50% 50%,
         transparent 0px,
         transparent 8px,
         rgba(0, 0, 0, 0.4) 8px,
         rgba(0, 0, 0, 0.4) 9px
      );
   opacity: 0.8;
   pointer-events: none;
}

/* Center label - album cover goes here */
.vinyl-label {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 45%;
   height: 45%;
   border-radius: 50%;
   overflow: hidden;
   box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.1),
      0 0 20px rgba(0, 0, 0, 0.8),
      inset 0 0 30px rgba(0, 0, 0, 0.5);
   z-index: 3;
}

.vinyl-label img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   visibility: hidden;
}

.vinyl-label img[src] {
   visibility: visible;
}

/* Center hole - realistic spindle hole */
.vinyl-center-hole {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 8%;
   height: 8%;
   border-radius: 50%;
   background: radial-gradient(
      circle at 40% 40%,
      #0a0a0a 0%,
      #000000 60%,
      #1a1a1a 100%
   );
   box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      inset 0 2px 8px rgba(0, 0, 0, 0.9),
      0 2px 10px rgba(0, 0, 0, 0.8);
   z-index: 4;
}

/* Vinyl rotation - controlled by JavaScript for angle preservation */
.vinyl-record {
   transition: none; /* No CSS transitions - JS controls rotation */
}

/* Vinyl shine/reflection effect */
.vinyl-record::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background: radial-gradient(
      circle at 25% 25%,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 40%
   );
   pointer-events: none;
   z-index: 2;
}

/* Edge highlight - vinyl rim */
.vinyl-record::after {
   content: '';
   position: absolute;
   top: -1px;
   left: -1px;
   right: -1px;
   bottom: -1px;
   border-radius: 50%;
   background: conic-gradient(
      from 0deg,
      rgba(255, 255, 255, 0.1) 0deg,
      transparent 45deg,
      transparent 135deg,
      rgba(255, 255, 255, 0.05) 180deg,
      transparent 225deg,
      transparent 315deg,
      rgba(255, 255, 255, 0.1) 360deg
   );
   pointer-events: none;
   z-index: 1;
}

.audio-cover-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.15) 100%);
   pointer-events: none;
   border-radius: 50%;
   z-index: 5;
}

/* Spectrum Canvas on Mirror Line - Rectangle bar emerging upward from waveform mirror line */
.waveform-spectrum {
   position: absolute;
   bottom: 35.7%; /* Mirror line is at 64.3% from top = 35.7% from bottom, spectrum grows upward */
   left: 50%;
   width: 92%;
   height: 220px;
   z-index: 1; /* Behind waveform, above background */
   border-radius: 35px;
   pointer-events: none; /* Allow touch events to pass through to waveform */

   /* Animation properties */
   transform: translateX(-50%) translateY(30%);
   opacity: 0;
   visibility: hidden;
   transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
               opacity 0.2s ease,
               visibility 0s linear 0.25s;

   /* Fade-in effect from bottom to top using mask */
   -webkit-mask-image: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 1) 50%);
   mask-image: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 1) 50%);

   /* Realistic Glassmorphism Effect */
   background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 50%,
      rgba(0, 0, 0, 0.05) 100%
   );
   backdrop-filter: blur(10px) saturate(180%) brightness(1.1);
   -webkit-backdrop-filter: blur(10px) saturate(180%) brightness(1.1);

   /* Glass borders and reflections */
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-top: 1px solid rgba(255, 255, 255, 0.25);
   border-left: 1px solid rgba(255, 255, 255, 0.15);

   /* Multi-layer shadows for depth */
   box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 rgba(0, 0, 0, 0.1),
      0 -8px 24px rgba(0, 0, 0, 0.15);
}

/* Glass reflection effect - light catching on top edge */
.waveform-spectrum::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 50%;
   background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.05) 30%,
      transparent 100%
   );
   border-radius: 35px 35px 0 0;
   pointer-events: none;
}

/* Glass shine effect - subtle diagonal light */
.waveform-spectrum::after {
   content: '';
   position: absolute;
   top: -50%;
   left: -50%;
   width: 200%;
   height: 200%;
   background: linear-gradient(
      45deg,
      transparent 30%,
      rgba(255, 255, 255, 0.08) 50%,
      transparent 70%
   );
   pointer-events: none;
   animation: glassShine 8s ease-in-out infinite;
}

@keyframes glassShine {
   0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
   50% { transform: translateX(0%) translateY(0%) rotate(45deg); }
}

/* Spectrum visible state - slide up animation */
.waveform-spectrum.active {
   transform: translateX(-50%) translateY(0);
   opacity: 1;
   visibility: visible;
   transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
               opacity 0.2s ease,
               visibility 0s linear 0s;
}

/* Waveform Container */
.audio-waveform-container {
   margin: 30px 0 10px 0;
}

.waveform-wrapper {
   position: relative;
   width: 100%;
}

/* Waveform Time Displays - On mirror line */
.waveform-time-left,
.waveform-time-right {
   position: absolute;
   top: 64.3%; /* Mirror line position (135/210 = 64.3%) */
   transform: translateY(-50%);
   padding: 3px 8px;
   border-radius: 4px;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   color: #fff;
   font-size: 11px;
   font-weight: 600;
   z-index: 30;
   pointer-events: none;
}

.waveform-time-left {
   left: 10px;
}

.waveform-time-right {
   right: 10px;
}

/* Waveform Canvas Container */
.waveform-canvas-container {
   position: relative;
   width: 100%;
   cursor: pointer;
   overflow: hidden;
   /* Aspect ratio for full waveform including mirror: 1240 x 210 (135 main + 75 mirror) */
   aspect-ratio: 1240 / 210;
   z-index: 10; /* Above spectrum (z-index: 1) to prevent hover overlay conflicts */
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
}

.waveform-canvas-container:hover {
   filter: brightness(1.1) contrast(1.05);
}

/* Base Waveform Image (WebP) - VISIBLE background */
.waveform-base-image {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: fill;
   position: relative;
   z-index: 10;
   visibility: hidden;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -khtml-user-drag: none;
   -moz-user-drag: none;
   -o-user-drag: none;
   pointer-events: none;
}

.waveform-base-image[src]:not([src=""]) {
   visibility: visible;
}

/* Base Color Overlay (entire waveform in user's base color) */
.waveform-base-overlay {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   z-index: 15;
   pointer-events: none;
}

#waveformBaseCanvas {
   display: block;
   position: absolute;
   left: 0;
   top: 0;
   pointer-events: none;
}

/* Progress Overlay */
.waveform-progress-overlay {
   position: absolute;
   left: 0;
   top: 0;
   width: 0%;
   height: 100%;
   overflow: hidden;
   z-index: 20;
   pointer-events: none;
}

#waveformProgressCanvas {
   display: block;
   position: absolute;
   left: 0;
   top: 0;
   /* Canvas uses its intrinsic dimensions (canvas.width/height attributes) */
   /* NO CSS width/height - prevents scaling with overlay container */
}

/* Hover Preview Overlay (SoundCloud-style) */
.waveform-hover-overlay {
   position: absolute;
   left: 0;
   top: 0;
   width: 0%;
   height: 100%;
   overflow: hidden;
   z-index: 25;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.1s;
}

.waveform-hover-overlay.visible {
   opacity: 1;
}

#waveformHoverCanvas {
   display: block;
   position: absolute;
   left: 0;
   top: 0;
   /* Canvas uses its intrinsic dimensions (canvas.width/height attributes) */
   /* NO CSS width/height - prevents scaling with overlay container */
}

/* Comment Bar */
.waveform-comment-bar {
   position: absolute;
   left: 0;
   top: 64.3%; /* Mirror line position (135/210 = 64.3%) */
   width: 100%;
   height: 26px;
   z-index: 30;
   pointer-events: none;
}

.waveform-comment-marker {
   position: absolute;
   top: 50%;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background-size: cover;
   background-position: center;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   transform: translate(-50%, -50%);
   cursor: pointer;
   pointer-events: all;
   transition: transform 0.2s, opacity 0.3s;
}

.waveform-comment-marker:hover,
.waveform-comment-marker.active {
   transform: translate(-50%, -50%) scale(1.3);
   z-index: 100;
   box-shadow: 0 0 20px rgba(138, 43, 226, 0.8);
}

.waveform-comment-marker.active {
   animation: commentPulse 0.5s ease-in-out;
}

@keyframes commentPulse {
   0%, 100% { transform: translate(-50%, -50%) scale(1.3); }
   50% { transform: translate(-50%, -50%) scale(1.5); }
}

/* Flying Comment - bigger by 1/3 and no blur */
.waveform-flying-comment {
   position: fixed;
   background: rgba(0, 0, 0, 0.3);
   /* NO BLUR */
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: #fff;
   padding: 5px 11px; /* Increased by ~1/3 */
   border-radius: 5px; /* Increased by ~1/3 */
   font-size: 13px; /* Increased by ~1/3 */
   white-space: nowrap;
   pointer-events: none;
   z-index: 10000; /* Higher z-index for mobile visibility */
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
   opacity: 0;
   transform: translateX(-50%);
   will-change: transform, opacity;
}

/* Short comment animation - simple and smooth */
@keyframes flyCommentShort {
   0% {
      opacity: 0;
      transform: translateX(-50%) translateY(0);
   }
   30% {
      /* Fade in while flying to center and stop position with random offset */
      opacity: 1;
      transform: translateX(calc(-50% + var(--fly-x) * 0.6 + var(--stop-x))) translateY(var(--stop-y));
   }
   70% {
      /* Hold at stop position with offset */
      opacity: 1;
      transform: translateX(calc(-50% + var(--fly-x) * 0.6 + var(--stop-x))) translateY(var(--stop-y));
   }
   100% {
      /* Fly away upward with fade out */
      opacity: 0;
      transform: translateX(calc(-50% + var(--fly-x) * 0.6 + var(--stop-x) + var(--random-x))) translateY(calc(var(--stop-y) - 400px));
   }
}

/* Long comment animation - simple and smooth */
@keyframes flyCommentLong {
   0% {
      opacity: 0;
      transform: translateX(-50%) translateY(0);
   }
   20% {
      /* Fade in while flying to center and stop position with random offset */
      opacity: 1;
      transform: translateX(calc(-50% + var(--fly-x) * 0.5 + var(--stop-x))) translateY(var(--stop-y));
   }
   60% {
      /* Hold at stop position with offset */
      opacity: 1;
      transform: translateX(calc(-50% + var(--fly-x) * 0.5 + var(--stop-x))) translateY(var(--stop-y));
   }
   100% {
      /* Fly away upward with fade out */
      opacity: 0;
      transform: translateX(calc(-50% + var(--fly-x) * 0.5 + var(--stop-x) + var(--random-x))) translateY(calc(var(--stop-y) - 450px));
   }
}

/* Apply animations based on text length */
.waveform-flying-comment.short {
   animation: flyCommentShort 3s linear forwards;
}

.waveform-flying-comment.long {
   animation: flyCommentLong 5s linear forwards;
}

/* Hide static tooltip when comment is flying */
.waveform-comment-marker.triggered .waveform-comment-tooltip {
   display: none;
}

/* Old tooltip system - kept for hover preview only */
.waveform-comment-tooltip {
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   background: rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(10px) saturate(180%);
   -webkit-backdrop-filter: blur(10px) saturate(180%);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: #fff;
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 10px;
   white-space: nowrap;
   margin-top: 5px;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.2s;
   z-index: 200;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Only show tooltip on hover, not when triggered */
.waveform-comment-marker:hover:not(.triggered) .waveform-comment-tooltip {
   opacity: 1;
}

/* Mobile touch toggle - show tooltip when .show-tooltip class is added */
.waveform-comment-marker.show-tooltip .waveform-comment-tooltip {
   opacity: 1;
}

.waveform-comment-tooltip::after {
   content: '';
   position: absolute;
   bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
   width: 0;
   height: 0;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-bottom: 4px solid rgba(255, 255, 255, 0.2);
}

/* Hidden WaveSurfer container */
#waveform {
   display: none !important; /* Hidden - only used for audio handling, not visual display */
   height: 80px;
   cursor: pointer;
}


/* DJ Control Section - Transport Bar Above EQ */
.dj-control-section {
   margin-top: 20px;
   padding: 0;
}

/* Transport Bar - All controls in one row */
.transport-bar {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 30px;
   margin-bottom: 5px;
   flex-wrap: wrap;
}

/* Mobile volume button in EQ corner - hidden on desktop, shown on tablet/mobile */
.corner-control .btn-volume-mobile {
   display: none;
}

/* Volume rotary-knob always visible (label/button/value structure) */
.corner-control .knob-volume {
   display: flex;
}

/* Desktop: show knob, hide mobile button */
.corner-control .knob-volume .knob {
   width: 68px;
   height: 68px;
   display: flex;
}

.corner-control .knob-volume .knob-indicator {
   height: 23px;
   top: 9px;
   transform-origin: center 25px;
}

.corner-control .knob-volume .knob-value {
   font-size: 9px;
}

.corner-control .knob-volume .btn-volume-mobile {
   display: none;
}

/* Spectrum button in EQ corner - 85% of EQ knobs (68px) */
.corner-control .btn-fx {
   width: 68px;
   height: 68px;
}

.corner-control .btn-fx svg {
   width: 27px;
   height: 27px;
}

/* EQ/FX Container - Flex layout with side controls */
.eq-fx-container {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
   width: 100%;
   margin: 0 auto;
}

/* Side Controls - Volume, FX, Spectrum, PLAY, CUE vertical stack with CUE aligned to bottom */
.side-controls {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 15px;
   flex-shrink: 0;
   align-self: stretch;
}

/* Push PLAY button to bottom (CUE will follow below it) to align with LOW knob */
.side-controls .btn-play {
   margin-top: auto;
}

/* Volume knob in side controls */
.side-controls .knob-volume {
   margin: 0;
}

/* Secondary FX Controls - Below EQ/FX */
.fx-controls-secondary {
   display: flex;
   justify-content: center;
   gap: 20px;
   flex-wrap: wrap;
   margin-top: 30px;
}

/* DJ Mixer Section - Legacy (for backwards compatibility) */
.dj-mixer-section {
   margin-top: 30px;
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 20px 0;
}

/* Mixer Left - Play/Cue Controls - Legacy */
.mixer-left {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 15px;
   flex: 0 0 auto;
}

/* Mixer Center - EQ/FX Section - Legacy */
.mixer-center {
   flex: 1;
   max-width: 600px; /* Limit max width */
   margin: 0 auto;
}

/* Adjust EQ/FX sections for smaller width - Legacy */
.mixer-center .eq-cross-section,
.mixer-center .fx-pad-section {
   max-width: 100%;
   margin: 0;
   padding: 0;
}

/* Mixer Right - Volume/FX Controls - Legacy */
.mixer-right {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   flex: 0 0 auto;
}

/* Main Transport Controls - CDJ Style - Legacy */
.transport-controls {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 40px;
   margin-bottom: 30px;
   position: relative;
}

.transport-left,
.transport-right {
   flex: 0 0 auto;
}

.transport-center {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 15px;
}

/* Playback Controls - Legacy */
.audio-controls {
   margin-top: 20px;
}

.control-row-main {
   display: flex;
   align-items: center;
   gap: 20px;
   margin-bottom: 20px;
   flex-wrap: wrap;
}

.btn-control {
   background: rgba(255, 255, 255, 0.15);
   border: 4px solid rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   width: 84px;
   height: 84px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s ease;
   flex-shrink: 0;
}

.btn-control:hover {
   background: rgba(255, 255, 255, 0.25);
   transform: scale(1.1);
}

.btn-control:active {
   transform: scale(0.98);
}

.btn-control svg {
   color: #fff;
}

/* PLAY Button - Pulsing green border when paused (CDJ style) */
.btn-play {
   border-color: rgba(0, 255, 0, 0.6);
   box-shadow: 0 0 5px rgba(0, 255, 0, 0.5),
               0 0 10px rgba(0, 255, 0, 0.2);
   animation: greenPulse 1.5s ease-in-out infinite;
}

/* PLAY Button when playing - Static green border (no pulsing) */
.btn-play.playing {
   animation: none;
   border-color: rgba(0, 255, 0, 0.6);
   box-shadow: 0 0 5px rgba(0, 255, 0, 0.5),
               0 0 10px rgba(0, 255, 0, 0.2);
}

@keyframes greenPulse {
   0%, 100% {
      border-color: rgba(0, 255, 0, 0.4);
      box-shadow: 0 0 5px rgba(0, 255, 0, 0.3),
                  0 0 10px rgba(0, 255, 0, 0.1);
   }
   50% {
      border-color: rgba(0, 255, 0, 1);
      box-shadow: 0 0 10px rgba(0, 255, 0, 0.8),
                  0 0 20px rgba(0, 255, 0, 0.4);
   }
}

/* CUE Button - same style as PLAY */
.cue-text {
   font-size: 18px;
   font-weight: 700;
   letter-spacing: 1px;
   color: #fff;
}

/* FX Button Text */
.fx-text {
   font-size: 18px;
   font-weight: 700;
   letter-spacing: 1px;
   color: #fff;
}

/* CUE Button Active State (when CUE point is set) */
.btn-cue.active {
   box-shadow: 0 0 5px rgba(255, 165, 0, 0.5),
               0 0 10px rgba(255, 165, 0, 0.2);
   border-color: rgba(255, 165, 0, 0.6);
}

.btn-cue.active .cue-text {
   color: #fff;
}

/* CUE Button Holding State (when physically pressed - bright glow) */
.btn-cue.holding {
   border-color: rgba(255, 165, 0, 1);
   box-shadow: 0 0 10px rgba(255, 165, 0, 0.8),
               0 0 20px rgba(255, 165, 0, 0.4);
}


.time-display {
   color: #fff;
   font-size: 16px;
   font-weight: 500;
   display: flex;
   align-items: center;
   gap: 5px;
}

.time-separator {
   margin: 0 5px;
}

.volume-control {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-left: auto;
}

.btn-volume {
   background: transparent;
   border: none;
   cursor: pointer;
   color: #fff;
   padding: 5px;
   transition: opacity 0.3s;
}

.btn-volume:hover {
   opacity: 0.8;
}

.btn-volume .unmute-icon {
   display: block;
}

.btn-volume .mute-icon {
   display: none;
}

.btn-volume.muted .unmute-icon {
   display: none;
}

.btn-volume.muted .mute-icon {
   display: block;
}

/* Volume Knob - Desktop */
.knob-volume .knob {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.15);
   border: 2px solid rgba(255, 255, 255, 0.3);
   position: relative;
   cursor: ns-resize;
   transition: all 0.2s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Volume knob indicator - default position at 80% */
.knob-volume .knob-indicator {
   transform: translateX(-50%) rotate(81deg);
}

.knob-volume .knob:hover {
   background: rgba(255, 255, 255, 0.25);
   border-color: rgba(255, 255, 255, 0.4);
   transform: scale(1.05);
}

.knob-volume .knob:active {
   background: rgba(255, 255, 255, 0.3);
   transform: scale(0.98);
}

/* Volume knob muted state - red glow */
.knob-volume .knob.muted {
   border-color: rgba(255, 87, 34, 0.8);
   background: rgba(255, 87, 34, 0.2);
   box-shadow: 0 0 20px rgba(255, 87, 34, 0.5);
}

.knob-volume .knob.muted:hover {
   border-color: rgba(255, 87, 34, 1);
   background: rgba(255, 87, 34, 0.3);
}

/* Sliders */
.slider {
   -webkit-appearance: none;
   width: 100px;
   height: 6px;
   border-radius: 5px;
   background: rgba(255, 255, 255, 0.2);
   outline: none;
   transition: background 0.3s;
}

.slider:hover {
   background: rgba(255, 255, 255, 0.3);
}

.slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: #fff;
   cursor: pointer;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
   transition: transform 0.2s;
}

.slider::-webkit-slider-thumb:hover {
   transform: scale(1.2);
}

.slider::-moz-range-thumb {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: #fff;
   cursor: pointer;
   border: none;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* FX Buttons - Legacy (replaced by dj-control-section) */
.fx-button-container {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin-top: 20px;
   flex-wrap: wrap;
}

/* FX Button - smaller style (also used by RESTART button) */
.btn-fx {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 80px;
   height: 80px;
   padding: 0;
   background: rgba(255, 255, 255, 0.15);
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   color: #fff;
   cursor: pointer !important;
   transition: all 0.2s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-fx:hover {
   background: rgba(255, 255, 255, 0.25);
   border-color: rgba(255, 255, 255, 0.4);
   transform: scale(1.05);
}

.btn-fx:active {
   background: rgba(255, 255, 255, 0.3);
   transform: scale(0.98);
}

/* FX Button active state */
.btn-fx.active {
   background: rgba(76, 175, 80, 0.25);
   border-color: rgba(76, 175, 80, 0.7);
   box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.btn-fx.active:hover {
   background: rgba(76, 175, 80, 0.35);
   border-color: rgba(76, 175, 80, 0.9);
}

.btn-fx svg {
   width: 32px;
   height: 32px;
   fill: #fff;
}

/* FX Toggle Buttons (Compressor, Limiter, Widener, Spectrum) - 85% of EQ knobs (68px) */
.btn-fx-toggle {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 68px;
   height: 68px;
   padding: 0;
   background: rgba(255, 255, 255, 0.15);
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   cursor: pointer !important;
   transition: all 0.2s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-fx-toggle svg {
   width: 27px;
   height: 27px;
   fill: #fff;
}

.btn-fx-toggle:hover {
   background: rgba(255, 255, 255, 0.25);
   border-color: rgba(255, 255, 255, 0.4);
   transform: scale(1.05);
}

.btn-fx-toggle:active {
   background: rgba(255, 255, 255, 0.3);
   transform: scale(0.98);
}

.btn-fx-toggle.active {
   background: rgba(76, 175, 80, 0.25);
   border-color: rgba(76, 175, 80, 0.7);
   box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

.btn-fx-toggle.active:hover {
   background: rgba(76, 175, 80, 0.35);
   border-color: rgba(76, 175, 80, 0.9);
}

/* Disabled state for FX buttons (until PLAY) */
.btn-fx:disabled,
.btn-fx-toggle:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
}

/* Disabled state for knobs (until PLAY) */
.rotary-faders.disabled {
   pointer-events: none;
   opacity: 0.5;
   transition: opacity 0.3s ease;
}

.rotary-faders.disabled .knob {
   cursor: not-allowed;
}

/* FX Modal */
.fx-modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   z-index: 9999;
   align-items: center;
   justify-content: center;
}

.fx-modal.active {
   display: flex;
}

.fx-modal-content {
   background: rgba(20, 20, 20, 0.95);
   border: 2px solid rgba(255, 255, 255, 0.1);
   border-radius: 20px;
   padding: 30px;
   max-width: 600px;
   width: 90%;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

.fx-modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
}

.fx-modal-header h3 {
   color: #fff;
   font-size: 24px;
   font-weight: 700;
   margin: 0;
   letter-spacing: 2px;
}

.fx-modal-close {
   background: transparent;
   border: none;
   color: #fff;
   font-size: 32px;
   cursor: pointer;
   line-height: 1;
   transition: color 0.2s;
}

.fx-modal-close:hover {
   color: #ff5722;
}

/* Effect Selector */
.fx-effect-selector {
   display: flex;
   align-items: center;
   gap: 15px;
   margin-bottom: 20px;
}

.fx-effect-selector label {
   color: #fff;
   font-size: 14px;
   font-weight: 600;
   text-transform: uppercase;
}

.effect-dropdown {
   flex: 1;
   padding: 10px 15px;
   background: rgba(255, 255, 255, 0.1);
   border: 2px solid rgba(255, 255, 255, 0.2);
   border-radius: 10px;
   color: #fff;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s;
}

.effect-dropdown:hover {
   background: rgba(255, 255, 255, 0.15);
   border-color: rgba(255, 87, 34, 0.5);
}

.effect-dropdown:focus {
   outline: none;
   border-color: rgba(255, 87, 34, 0.8);
}

.effect-dropdown option {
   background: #1a1a1a;
   color: #fff;
}


/* XY Pad */
.xy-pad-container {
   margin-top: 20px;
}

.xy-pad {
   position: relative;
   width: 100%;
   aspect-ratio: 1;
   background: linear-gradient(135deg, rgba(255, 87, 34, 0.05), rgba(255, 152, 0, 0.05));
   border: 2px solid rgba(255, 255, 255, 0.2);
   border-radius: 15px;
   cursor: crosshair;
   overflow: hidden;
   touch-action: none;
   user-select: none;
}

.xy-crosshair-h,
.xy-crosshair-v {
   position: absolute;
   background: rgba(255, 255, 255, 0.1);
   pointer-events: none;
}

.xy-crosshair-h {
   top: 50%;
   left: 0;
   width: 100%;
   height: 1px;
   transform: translateY(-50%);
}

.xy-crosshair-v {
   top: 0;
   left: 50%;
   width: 1px;
   height: 100%;
   transform: translateX(-50%);
}

.xy-pointer {
   position: absolute;
   width: 30px;
   height: 30px;
   background: radial-gradient(circle, rgba(255, 87, 34, 0.8), rgba(255, 87, 34, 0.3));
   border: 3px solid rgba(255, 255, 255, 0.9);
   border-radius: 50%;
   pointer-events: none;
   transform: translate(-50%, -50%);
   box-shadow: 0 0 20px rgba(255, 87, 34, 0.8);
   transition: transform 0.05s ease-out;
}

.xy-labels {
   display: flex;
   justify-content: space-between;
   margin-top: 10px;
   padding: 0 10px;
}

.xy-label-left,
.xy-label-center,
.xy-label-right {
   color: rgba(255, 255, 255, 0.6);
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.xy-label-center {
   text-align: center;
   flex: 1;
}

/* Values positioned inside XY pad */
.xy-pad-value-left,
.xy-pad-value-right {
   position: absolute;
   top: 10px;
   color: rgba(255, 255, 255, 0.9);
   font-size: 11px;
   font-weight: 600;
   font-family: 'Courier New', monospace;
   z-index: 2;
   pointer-events: none;
   transition: opacity 0.2s ease;
}

.xy-pad-value-left {
   left: 10px;
}

.xy-pad-value-right {
   right: 10px;
}

/* Fade values during drag */
.xy-pad.dragging .xy-pad-value-left,
.xy-pad.dragging .xy-pad-value-right {
   opacity: 0.5;
}

/* Label displays at bottom inside pad */
.xy-pad-label-bottom-left,
.xy-pad-label-bottom-right {
   position: absolute;
   bottom: 10px;
   color: rgba(255, 255, 255, 0.4);
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   z-index: 2;
   pointer-events: none;
   transition: opacity 0.2s ease;
}

.xy-pad-label-bottom-left {
   left: 10px;
}

.xy-pad-label-bottom-right {
   right: 10px;
}

/* Fade bottom labels during drag */
.xy-pad.dragging .xy-pad-label-bottom-left,
.xy-pad.dragging .xy-pad-label-bottom-right {
   opacity: 0.5;
}

/* Music Info Section */
.music-info-section {
   margin-top: 20px;
}

.music-meta {
   display: flex;
   gap: 20px;
   margin: 15px 0;
   color: #888;
   flex-wrap: wrap;
}

.music-meta > div {
   display: flex;
   align-items: center;
   gap: 5px;
}

.music-meta svg {
   opacity: 0.7;
}

.music-description {
   margin: 20px 0;
}

.music-description h4 {
   margin-bottom: 10px;
   font-size: 16px;
   font-weight: 600;
}

.music-description p {
   color: #666;
   line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
   .audio-player-content {
      padding: 20px;
      min-height: auto;
   }

   .audio-cover {
      max-width: 250px;
   }

   /* Spectrum on waveform - smaller height for tablet */
   .waveform-spectrum {
      height: 220px;
   }

   /* DJ Control Section - Tablet */
   .dj-control-section {
      padding: 0;
   }

   .transport-bar {
      gap: 20px;
      margin-bottom: 5px;
   }

   .eq-fx-container {
      max-width: 500px;
   }

   /* Ensure same width for EQ and FX on tablet */
   .eq-fx-container .eq-cross-section,
   .eq-fx-container .fx-pad-section {
      max-width: 100%;
   }

   /* Smaller controls on tablet */
   .btn-control {
      width: 70px;
      height: 70px;
   }

   /* Tablet: hide knob, show button in Volume rotary-knob */
   .corner-control .knob-volume .knob {
      display: none !important;
   }

   .corner-control .knob-volume .btn-volume-mobile {
      display: flex !important;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      border: 2px solid rgba(255, 255, 255, 0.3);
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      padding: 0;
      cursor: pointer;
   }

   .corner-control .knob-volume .btn-volume-mobile svg {
      width: 28px;
      height: 28px;
      fill: #fff;
   }

   .corner-control .knob-volume .btn-volume-mobile:hover {
      background: rgba(255, 255, 255, 0.25);
      border-color: rgba(255, 255, 255, 0.4);
      transform: scale(1.05);
   }

   .corner-control .knob-volume .btn-volume-mobile:active {
      background: rgba(255, 255, 255, 0.3);
      transform: scale(0.98);
   }

   .corner-control .knob-volume .btn-volume-mobile.muted {
      border-color: rgba(255, 87, 34, 0.8);
      background: rgba(255, 87, 34, 0.2);
      box-shadow: 0 0 20px rgba(255, 87, 34, 0.5);
   }

   .corner-control .knob-volume .btn-volume-mobile.muted:hover {
      border-color: rgba(255, 87, 34, 1);
      background: rgba(255, 87, 34, 0.3);
   }

   /* Hide transport-bar on tablet */
   .transport-bar {
      display: none;
   }

   /* FX Buttons - same size as volume button on tablet */
   .btn-fx:not(.btn-control),
   .btn-fx-toggle {
      width: 60px;
      height: 60px;
   }

   .btn-fx:not(.btn-control) svg,
   .btn-fx-toggle svg {
      width: 24px;
      height: 24px;
   }

   .fx-controls-secondary {
      gap: 15px;
      margin-top: 20px;
   }

   .control-row-main {
      gap: 15px;
   }

   .btn-control {
      width: 64px;
      height: 64px;
   }

   .btn-control svg {
      width: 40px;
      height: 40px;
   }

   .cue-text {
      font-size: 14px;
   }

   .fx-text {
      font-size: 14px;
   }

   .fx-modal-content {
      width: 95%;
      padding: 20px;
   }

   .fx-modal-header h3 {
      font-size: 20px;
   }

   .volume-control {
      margin-left: auto;
      width: auto;
   }
}

@media (max-width: 480px) {
   .audio-player-content {
      padding: 15px 5px; /* Reduce side padding to 5px */
   }

   .audio-cover {
      max-width: 200px;
   }

   /* Spectrum on waveform - smaller height for mobile */
   .waveform-spectrum {
      height: 150px;
   }

   /* DJ Control Section - Mobile */
   .dj-control-section {
      padding: 0;
   }

   .transport-bar {
      gap: 5px;
      margin-bottom: 5px;
   }

   .eq-fx-container {
      max-width: 100%;
      padding: 0 5px; /* Minimal padding - only 5px from sides */
   }

   /* Ensure same width for EQ and FX on mobile */
   .eq-fx-container .eq-cross-section,
   .eq-fx-container .fx-pad-section {
      max-width: 100%;
      padding: 0;
   }

   /* Mobile: hide knob, show button in Volume rotary-knob */
   .corner-control .knob-volume .knob {
      display: none !important;
   }

   .corner-control .knob-volume .btn-volume-mobile {
      display: flex !important;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      border: 2px solid rgba(255, 255, 255, 0.3);
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      padding: 0;
      cursor: pointer;
   }

   .corner-control .knob-volume .btn-volume-mobile svg {
      width: 18px;
      height: 18px;
      fill: #fff;
   }

   .corner-control .knob-volume .btn-volume-mobile.muted {
      border-color: rgba(255, 87, 34, 0.8);
      background: rgba(255, 87, 34, 0.2);
      box-shadow: 0 0 20px rgba(255, 87, 34, 0.5);
   }

   /* Hide transport-bar on mobile */
   .transport-bar {
      display: none;
   }

   /* Side controls - smaller gap for mobile */
   .side-controls {
      gap: 8px;
   }

   /* FX button in side-controls - inherits btn-control size (64px) on mobile */
   .side-controls .btn-fx:not(.btn-control) {
      width: 64px;
      height: 64px;
      flex-shrink: 0;
   }

   .side-controls .btn-fx:not(.btn-control) svg {
      width: 28px;
      height: 28px;
   }
}

/* EQ Cross Section - Container with background */
.eq-cross-section {
   padding: 20px 0;
   margin: 15px 0;
   max-width: 450px;
   margin-left: auto;
   margin-right: auto;
}

.eq-cross-container {
   position: relative;
   background: linear-gradient(135deg, rgba(76, 175, 80, 0.05), rgba(0, 150, 136, 0.05));
   border: 2px solid rgba(255, 255, 255, 0.2);
   border-radius: 15px;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
               inset 0 1px 0 rgba(255, 255, 255, 0.1);
   padding: 20px;
   transition: all 0.3s ease;
}

/* Corner controls for COMP and LIM - aligned with grid layout */
.eq-corner-controls {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 10;
   pointer-events: none;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, auto);
   gap: 20px;
   padding: 20px;
   box-sizing: border-box;
   align-items: start;
}

.corner-control {
   pointer-events: all;
   display: flex;
   align-items: start;
   justify-content: center;
}

/* Top controls align with HIGH knob */
/* Spectrum aligns with GAIN column (left), HIGH row (top) */
.corner-control.top-left {
   grid-column: 1;
   grid-row: 1;
   align-self: start; /* Start because rotary-knob has label/value structure */
}

/* Volume aligns with FILTER column (right), HIGH row (top) */
.corner-control.top-right {
   grid-column: 3;
   grid-row: 1;
   align-self: start; /* Start because rotary-knob has label/value structure */
}

/* Bottom controls align with LOW knob */
.corner-control.bottom-left .rotary-knob,
.corner-control.bottom-right .rotary-knob {
   margin-top: 10px;
   margin-bottom: 0;
}

/* COMP aligns with GAIN column (left), LOW row (bottom) */
.corner-control.bottom-left {
   grid-column: 1;
   grid-row: 3;
   align-self: end;
}

/* LIM aligns with FILTER column (right), LOW row (bottom) */
.corner-control.bottom-right {
   grid-column: 3;
   grid-row: 3;
   align-self: end;
}

.eq-cross-container:hover {
   border-color: rgba(255, 255, 255, 0.3);
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4),
               inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Ensure EQ and FX sections have same width in container */
.eq-fx-container .eq-cross-section,
.eq-fx-container .fx-pad-section {
   max-width: 450px;
   width: 100%;
   margin: 0 auto;
   padding: 0;
   transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Slide animations for EQ/FX toggle - dynamic based on swipe direction */
.eq-fx-container .eq-cross-section,
.eq-fx-container .fx-pad-section {
   opacity: 1;
   transform: translateX(0);
}

/* Hiding animations - element slides out */
.eq-fx-container .eq-cross-section.hiding-left,
.eq-fx-container .fx-pad-section.hiding-left {
   opacity: 0;
   transform: translateX(-50px);
}

.eq-fx-container .eq-cross-section.hiding-right,
.eq-fx-container .fx-pad-section.hiding-right {
   opacity: 0;
   transform: translateX(50px);
}

/* Showing animations - element slides in */
.eq-fx-container .eq-cross-section.showing-left,
.eq-fx-container .fx-pad-section.showing-left {
   opacity: 0;
   transform: translateX(-50px);
}

.eq-fx-container .eq-cross-section.showing-left.visible,
.eq-fx-container .fx-pad-section.showing-left.visible {
   opacity: 1;
   transform: translateX(0);
}

.eq-fx-container .eq-cross-section.showing-right,
.eq-fx-container .fx-pad-section.showing-right {
   opacity: 0;
   transform: translateX(50px);
}

.eq-fx-container .eq-cross-section.showing-right.visible,
.eq-fx-container .fx-pad-section.showing-right.visible {
   opacity: 1;
   transform: translateX(0);
}

/* Rotary Faders (EQ + Filter) - Cross Layout */
.rotary-faders {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, auto);
   gap: 20px;
   padding: 0;
   margin: 0;
   max-width: none;
}

/* FX Pad Section (toggles with EQ cross) - moved to eq-fx-container styles */

/* Grid positioning for cross layout */
.knob-high {
   grid-column: 2;
   grid-row: 1;
}

.knob-gain {
   grid-column: 1;
   grid-row: 2;
}

.knob-mid {
   grid-column: 2;
   grid-row: 2;
}

.knob-filter {
   grid-column: 3;
   grid-row: 2;
}

.knob-low {
   grid-column: 2;
   grid-row: 3;
}


.rotary-knob {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
}

.knob-label {
   color: rgba(255, 255, 255, 0.9);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.knob {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.15);
   border: 2px solid rgba(255, 255, 255, 0.3);
   position: relative;
   cursor: ns-resize;
   transition: all 0.2s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.knob:hover {
   background: rgba(255, 255, 255, 0.25);
   border-color: rgba(255, 255, 255, 0.4);
   transform: scale(1.05);
}

.knob:active {
   background: rgba(255, 255, 255, 0.3);
   transform: scale(0.98);
}

.knob-indicator {
   position: absolute;
   width: 3px;
   height: 27px;
   background: #fff;
   border-radius: 2px;
   top: 11px;
   left: 50%;
   transform: translateX(-50%);
   transform-origin: center 29px;
   transition: transform 0.1s ease-out;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.knob-value {
   color: rgba(255, 255, 255, 0.8);
   font-size: 11px;
   font-weight: 600;
   min-width: 60px;
   text-align: center;
}


/* Responsive */
@media (max-width: 768px) {
   .eq-cross-section {
      max-width: 350px;
   }

   .eq-cross-container {
      padding: 15px;
   }

   .eq-corner-controls {
      padding: 15px;
      gap: 15px;
   }

   .rotary-faders {
      gap: 15px;
   }

   .knob {
      width: 50px;
      height: 50px;
   }

   .knob-indicator {
      height: 16px;
      top: 7px;
      transform-origin: center 18px;
   }

   .knob-label {
      font-size: 11px;  /* Consistent with all buttons */
   }

   .knob-value {
      font-size: 11px;
   }

}

@media (max-width: 480px) {
   /* EQ and FX sections on mobile */
   .eq-cross-container {
      padding: 15px;
   }

   .eq-corner-controls {
      padding: 15px;
      gap: 10px;
      align-items: start;
   }

   .corner-control {
      align-items: start;
   }

   .corner-control.top-left,
   .corner-control.top-right {
      align-self: start;
   }

   .rotary-faders {
      gap: 10px;
   }


   /* EQ knobs for mobile - reduced by 1/3 */
   .eq-fx-container .rotary-faders {
      gap: 5px;
   }

   .eq-fx-container .knob {
      width: 47px;
      height: 47px;
   }

   .eq-fx-container .knob-indicator {
      height: 15px;
      width: 2px;
      top: 6px;
      transform-origin: center 17.5px;
   }

   .eq-fx-container .knob-label {
      font-size: 8px;
      letter-spacing: 0.5px;
   }

   .eq-fx-container .knob-value {
      font-size: 9px;
   }

   /* Reduced padding for EQ container on mobile */
   .eq-fx-container .eq-cross-container {
      padding: 10px;
   }

   .eq-corner-controls {
      padding: 10px;
      gap: 5px;
   }

   /* COMP/LIM toggle buttons - reduced by 1/3 */
   .eq-fx-container .btn-fx-toggle {
      width: 40px;
      height: 40px;
   }

   .eq-fx-container .btn-fx-toggle svg {
      width: 16px;
      height: 16px;
   }

   .knob {
      width: 45px;
      height: 45px;
   }

   .knob-indicator {
      height: 14px;
      top: 6px;
      transform-origin: center 16.5px;
   }

   .knob-label {
      font-size: 8px;
   }

   .knob-value {
      font-size: 9px;
   }

   /* XY Pad bottom labels - smaller on mobile */
   .xy-pad-label-bottom-left,
   .xy-pad-label-bottom-right {
      font-size: 9px;
      letter-spacing: 0.8px;
      color: rgba(255, 255, 255, 0.4);
   }

   /* FX dropdown - reduced height by 1/3 on mobile */
   .effect-dropdown {
      padding: 7px 15px;
      font-size: 12px;
   }
}

/* Hidden class utility */
.hidden {
   display: none !important;
}

/* Loading state */
.audio-player-loading {
   opacity: 0.6;
   pointer-events: none;
}

.audio-player-loading::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 40px;
   height: 40px;
   border: 4px solid rgba(255, 255, 255, 0.3);
   border-top-color: #fff;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   z-index: 999;
}

@keyframes spin {
   to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ============================================
   TRACK INFO DISPLAY ELEMENTS
   ============================================ */

/* Track Header Info - Stats and Details */
.track-header-info {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 30px;
   padding: 0 10px;
}

/* Left Side - Stats (Views & Likes) */
.track-stats {
   display: flex;
   gap: 20px;
   align-items: center;
}

.stat-item {
   display: flex;
   align-items: center;
   gap: 8px;
   color: rgba(255, 255, 255, 0.9);
   font-size: 14px;
   font-weight: 500;
   letter-spacing: 0.5px;
   background: rgba(255, 255, 255, 0.1);
   padding: 8px 14px;
   border-radius: 25px;
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   transition: all 0.3s ease;
}

.stat-item:hover {
   background: rgba(255, 255, 255, 0.15);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.stat-item svg {
   opacity: 0.9;
   flex-shrink: 0;
}

/* Right Side - Track Details (Genre, BPM, Key) */
.track-details {
   display: flex;
   gap: 25px;
   align-items: flex-start;
}

.detail-item {
   text-align: center;
   min-width: 60px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.detail-label {
   font-size: 11px;
   color: rgba(255, 255, 255, 0.5);
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 6px;
   font-weight: 600;
}

.detail-value {
   font-size: 18px;
   color: rgba(255, 255, 255, 0.95);
   font-weight: 700;
   letter-spacing: 0.5px;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

/* Track Info Below Vinyl */
.vinyl-track-info {
   position: absolute;
   bottom: -60px;
   left: 50%;
   transform: translateX(-50%);
   text-align: center;
   width: 100%;
   max-width: 400px;
}

.track-title {
   font-size: 20px;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.95);
   margin-bottom: 8px;
   letter-spacing: 0.3px;
   line-height: 1.3;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.track-date {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.6);
   letter-spacing: 0.8px;
   font-weight: 500;
}

/* Adjust cover margin to accommodate info below */
.audio-cover {
   margin-bottom: 80px !important;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
   /* Make player content relative for absolute positioning */
   .audio-player-content {
      position: relative;
   }

   /* Reposition header info to overlay on vinyl area */
   .track-header-info {
      position: relative;
      margin-bottom: -280px;  /* Pull vinyl up to overlap */
      height: 280px;
      pointer-events: none;
      z-index: 10;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 0;
   }

   /* Left side - Stats vertically stacked */
   .track-stats {
      flex-direction: column;
      gap: 10px;
      align-items: flex-start;
      pointer-events: auto;  /* Make clickable */
      margin-left: 10px;
      margin-top: 20px;
   }

   .stat-item {
      font-size: 12px;
      padding: 6px 10px;
      width: auto;
      min-width: auto;  /* Remove fixed width on mobile */
   }

   /* Right side - Track details vertically stacked */
   .track-details {
      flex-direction: column;
      gap: 8px;
      align-items: flex-end;
      pointer-events: auto;  /* Make readable */
      margin-right: 10px;
      margin-top: 20px;
   }

   .detail-item {
      min-width: auto;
      text-align: right;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
   }

   .detail-label {
      font-size: 10px;
      margin-bottom: 3px;
   }

   .detail-value {
      font-size: 15px;
      line-height: 1;
   }

   /* Make sure vinyl is positioned correctly */
   .audio-cover {
      position: relative;
      margin-top: 0 !important;
      margin-bottom: 65px !important;
   }

   .vinyl-track-info {
      bottom: -50px;
   }

   .track-title {
      font-size: 16px;
   }

   .track-date {
      font-size: 12px;
   }
}

@media (max-width: 480px) {
   /* Even smaller screens - adjust margins */
   .track-stats {
      margin-left: 5px;
      gap: 8px;
   }

   .track-details {
      margin-right: 5px;
      gap: 6px;
   }

   .stat-item {
      font-size: 11px;
      padding: 5px 8px;
      gap: 5px;
      min-width: auto;  /* Remove fixed width on small mobile */
   }

   .stat-item svg {
      width: 14px;
      height: 14px;
   }

   .detail-label {
      font-size: 9px;
      letter-spacing: 1px;
   }

   .detail-value {
      font-size: 13px;
      line-height: 1;
   }

   .track-title {
      font-size: 14px;
   }

   .audio-cover {
      max-width: 260px;  /* Smaller vinyl on very small screens */
   }
}

/* Beat Detection - REMOVED (not accurate enough) */

/* ============================================
   MOBILE FULLSCREEN MODE (LIKE SHORTS)
   ============================================ */

/* Fullscreen mode - only on mobile */
@media (max-width: 768px) {
   /* Fullscreen container */
   .top-video.video-player-page {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      height: 100dvh !important; /* Dynamic viewport height for iPhone browser bar */
      background: #000 !important;
      z-index: 9999 !important;
      margin: 0 !important;
      padding: 0 !important;
   }

   /* Music player fullscreen */
   .audio-player-container {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100vw !important;
      height: 100dvh !important; /* Dynamic viewport height for iPhone browser bar */
      border-radius: 0 !important;
      margin: 0 !important;
      max-width: none !important;
   }

   /* Player content full height */
   .audio-player-content {
      min-height: 100dvh !important; /* Dynamic viewport height for iPhone browser bar */
      height: 100dvh !important; /* Dynamic viewport height for iPhone browser bar */
      padding: 15px !important;
      border-radius: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
      gap: 15px !important;
   }

   /* Background blur fullscreen */
   .audio-player-bg {
      border-radius: 0 !important;
   }

   /* Remove any padding/margins from parent containers */
   .container,
   .row,
   .col-md-8,
   #padding_15 {
      padding: 0 !important;
      margin: 0 !important;
      width: 100% !important;
   }

   /* iOS safe areas */
   .audio-player-content {
      padding-top: env(safe-area-inset-top, 15px) !important;
      padding-bottom: env(safe-area-inset-bottom, 15px) !important;
      padding-left: env(safe-area-inset-left, 15px) !important;
      padding-right: env(safe-area-inset-right, 15px) !important;
   }

   /* Bigger vinyl with proper spacing */
   .audio-cover {
      max-width: 340px !important;
      margin: 30px auto 20px !important;
      position: relative !important;
   }

   /* Taller waveform for better visibility */
   .audio-waveform-container {
      flex: 1 !important;
      display: flex !important;
      align-items: center !important;
      margin: 15px 0 !important;
      min-height: 120px !important;
   }

   .waveform-wrapper {
      width: 100% !important;
      max-width: 100% !important;
   }

   /* Let aspect ratio work properly - no fixed height! */
   .waveform-canvas-container {
      /* aspect-ratio already set in main CSS (1240/210) */
      /* Do NOT set fixed height - it breaks the aspect ratio! */
   }

   /* DJ controls at bottom */
   .dj-control-section {
      margin-top: auto !important;
      padding-bottom: 5px !important;
   }

   /* Fix FX Pad positioning on mobile fullscreen */
   .eq-fx-container {
      display: flex !important;
      align-items: flex-start !important; /* Align to top instead of center */
      justify-content: center !important;
      flex: 0 0 auto !important; /* Don't grow/shrink */
   }

   /* FX pad section layout - only when visible */
   .eq-fx-container .fx-pad-section {
      flex-direction: column !important;
      align-items: center !important;
      width: 100% !important;
      max-height: calc(100dvh - 380px) !important; /* More space for XY pad */
      overflow: visible !important;
   }

   /* Apply flex display only when FX pad is actually shown */
   .eq-fx-container .fx-pad-section:not([style*="display: none"]) {
      display: flex !important;
   }

   /* Position FX dropdown at the very top, full width */
   .fx-effect-selector {
      position: relative !important;
      width: 100% !important;
      margin-bottom: 15px !important;
      padding: 0 !important;
      display: flex !important;
      justify-content: center !important;
   }

   .effect-dropdown {
      width: calc(100vw - 80px) !important; /* Same width as XY pad */
      max-width: none !important;
      margin: 0 auto !important;
      padding: 8px 12px !important;
      font-size: 11px !important;
      background: rgba(0, 0, 0, 0.5) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      border-radius: 8px !important;
   }

   /* XY Pad container - maximized space */
   .xy-pad-container {
      flex: 1 !important;
      align-items: center !important;
      justify-content: center !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
   }

   /* Only show flex when parent FX pad is visible */
   .fx-pad-section:not([style*="display: none"]) .xy-pad-container {
      display: flex !important;
   }

   /* Larger XY pad - slightly narrower for better fit */
   .xy-pad {
      width: calc(100vw - 80px) !important; /* 40px padding each side */
      max-width: none !important;
      height: calc(100vw - 80px) !important; /* Square aspect ratio */
      max-height: calc(100dvh - 460px) !important;
      margin: 0 auto !important;
   }

   /* Smaller control buttons - reduced by 1/3 */
   .side-controls {
      gap: 8px !important;
   }

   .btn-fx,
   .btn-control,
   .btn-fx.btn-restart {
      width: 50px !important;
      height: 50px !important;
      font-size: 11px !important;
   }

   .btn-control.btn-play svg,
   .btn-fx.btn-restart svg {
      width: 32px !important;
      height: 32px !important;
   }

   .cue-text,
   .fx-text {
      font-size: 11px !important;
      letter-spacing: 1px !important;
   }

   /* Adjust track info positioning */
   .track-header-info {
      margin-bottom: -320px !important;
      height: 320px !important;
   }

   /* Track title and date more compact */
   .vinyl-track-info {
      bottom: -40px !important;
   }

   .track-title {
      font-size: 18px !important;
      margin-bottom: 5px !important;
   }
}

/* Even smaller screens (480px and below) */
@media (max-width: 480px) {
   .audio-cover {
      max-width: 300px !important;
   }

   /* Flying comments adjustments for mobile - bigger by 1/3 and no blur */
   .waveform-flying-comment {
      font-size: 13px !important; /* Increased by ~1/3 */
      padding: 5px 11px !important; /* Increased by ~1/3 */
      z-index: 10000 !important; /* Ensure visibility above all mobile elements */
   }

   /* Further adjustments for FX pad on very small screens */
   .eq-fx-container .fx-pad-section {
      max-height: calc(100dvh - 350px) !important; /* Adjusted for smaller screens */
   }

   /* XY pad on very small phones - slightly narrower */
   .xy-pad {
      width: calc(100vw - 70px) !important; /* 35px padding each side */
      height: calc(100vw - 70px) !important; /* Square aspect ratio */
      max-height: calc(100dvh - 420px) !important;
   }

   /* Narrower dropdown on small screens */
   .effect-dropdown {
      width: calc(100vw - 70px) !important; /* Same width as XY pad */
      margin: 0 auto !important;
      padding: 6px 10px !important;
      font-size: 10px !important;
   }

   /* Even smaller buttons on very small phones */
   .btn-fx,
   .btn-control,
   .btn-fx.btn-restart {
      width: 45px !important;
      height: 45px !important;
   }

   .btn-control.btn-play svg,
   .btn-fx.btn-restart svg {
      width: 28px !important;
      height: 28px !important;
   }
}

/* ========================================
   MUSIC PROCESSING OVERLAY
   Queue progress tracking modal
   ======================================== */

.music-processing-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background: rgba(0, 0, 0, 0.95);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9999;
   backdrop-filter: blur(10px);
}

.processing-modal {
   text-align: center;
   max-width: 500px;
   width: 90%;
   padding: 40px;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 20px;
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.processing-animation {
   position: relative;
   width: 200px;
   height: 200px;
   margin: 0 auto 30px;
}

.processing-cover {
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   border-radius: 20px;
   filter: blur(5px);
   opacity: 0.6;
   animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
   0%, 100% { transform: scale(1); opacity: 0.6; }
   50% { transform: scale(1.05); opacity: 0.8; }
}

.processing-spinner {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   animation: spin 2s linear infinite;
}

@keyframes spin {
   from { transform: translate(-50%, -50%) rotate(0deg); }
   to { transform: translate(-50%, -50%) rotate(360deg); }
}

.processing-spinner svg {
   filter: drop-shadow(0 0 20px rgba(255, 152, 0, 0.5));
}

.processing-title {
   font-size: 28px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 10px;
   text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.processing-message {
   color: rgba(255, 255, 255, 0.7);
   font-size: 16px;
   margin-bottom: 30px;
   line-height: 1.5;
}

.processing-modal .progress-container {
   position: relative;
   width: 100%;
   height: 50px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 25px;
   overflow: hidden;
   margin-bottom: 20px;
   border: 1px solid rgba(255, 255, 255, 0.15);
}

.processing-modal .progress-bar {
   height: 100%;
   background: linear-gradient(90deg, #ff9800, #ff5722);
   transition: width 0.5s ease;
   border-radius: 25px;
   box-shadow: 0 0 20px rgba(255, 152, 0, 0.5);
}

.processing-modal .progress-text {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: #fff;
   font-weight: bold;
   font-size: 18px;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
   z-index: 1;
}

.processing-status {
   color: rgba(255, 255, 255, 0.9);
   font-size: 15px;
   font-weight: 500;
   margin-top: 15px;
   min-height: 24px;
}

.queue-position {
   color: rgba(255, 255, 255, 0.6);
   font-size: 14px;
   margin-top: 15px;
   padding: 10px;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.queue-position span {
   color: #ff9800;
   font-weight: bold;
   font-size: 16px;
}

.hidden {
   display: none !important;
}

/* Mobile responsiveness for processing overlay */
@media (max-width: 768px) {
   .processing-modal {
      padding: 30px 20px;
      max-width: 90%;
   }

   .processing-animation {
      width: 150px;
      height: 150px;
      margin-bottom: 20px;
   }

   .processing-title {
      font-size: 22px;
   }

   .processing-message {
      font-size: 14px;
   }

   .processing-modal .progress-container {
      height: 40px;
   }

   .processing-modal .progress-text {
      font-size: 16px;
   }
}

@media (max-width: 480px) {
   .processing-modal {
      padding: 25px 15px;
   }

   .processing-animation {
      width: 120px;
      height: 120px;
   }

   .processing-title {
      font-size: 20px;
   }

   .processing-message {
      font-size: 13px;
      margin-bottom: 20px;
   }

   .processing-modal .progress-container {
      height: 35px;
   }

   .processing-modal .progress-text {
      font-size: 14px;
   }

   .processing-status {
      font-size: 13px;
   }

   .queue-position {
      font-size: 12px;
   }
}

/* ========================================================================
   MUSIC COMMENTS MODAL - Glass Morphism Style (same as shorts)
   ======================================================================== */

/* Modal Glass Effect */
#music_comments_modal .modal-content {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 20px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   position: relative;
   padding: 0 24px !important; /* Override matdialog default - 0px top/bottom, 24px left/right */
}

/* Modal Dialog sizing */
#music_comments_modal .modal-dialog {
   max-width: 480px;
   margin: 40px auto;
}


/* Modal Body */
#music_comments_modal .modal-body {
   padding: 0;
   max-height: 60vh;
   overflow-y: auto;
   background: transparent;
   display: flex;
   flex-direction: column;
}

/* Time Header */
#music_comments_modal .music-comment-time-header {
   padding: 8px 16px;
   background: rgba(255, 255, 255, 0.03);
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   color: rgba(255, 255, 255, 0.8);
   font-size: 12px;
   font-weight: 500;
   display: flex;
   align-items: center;
}

#music_comments_modal .music-comment-time-header svg {
   color: rgba(255, 255, 255, 0.6);
}

/* Comment Input Area with Glass */
#music_comments_modal .pt_blogcomm_combo {
   padding: 16px;
   background: rgba(255, 255, 255, 0.05);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   gap: 10px;
   align-items: center;
   position: relative;
}

/* Textarea Field - EXACTLY like shorts */
#music_comments_modal #music-comment-textarea {
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 10px;
   color: #fff;
   padding: 10px 14px;
   padding-top: 16px;
   font-size: 14px;
   resize: none;
   min-height: 40px;
   max-height: 100px;
   transition: all 0.2s ease;
   flex: 1;
}

#music_comments_modal #music-comment-textarea:focus {
   background: rgba(255, 255, 255, 0.12);
   border-color: rgba(255, 255, 255, 0.3);
   outline: none;
   box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

#music_comments_modal #music-comment-textarea::placeholder {
   color: rgba(255, 255, 255, 0.5);
}

/* User Avatar */
#music_comments_modal .pt_blogcomm_combo .avatar {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Send Button - EXACT COPY from shorts style.css */
#music_comments_modal .pt_blogcomm_combo .btn.btn-main {
   padding: 10px;
   background: transparent;
   border: none;
   border-radius: 8px;
   color: rgba(255, 255, 255, 0.7);
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin-right: 20px;
   margin-bottom: 14px;
   cursor: pointer;
}

#music_comments_modal .pt_blogcomm_combo .btn.btn-main:hover {
   background: transparent;
   transform: translateX(2px);
}

/* SVG arrow - EXACT from shorts */
#music_comments_modal .pt_blogcomm_combo .btn.btn-main svg.feather-arrow-right {
   vertical-align: middle;
   transform: scale(1.17);
}

/* Comments Container */
#music_comments_modal .music_comments_show {
   padding: 8px 12px;
   min-height: auto;
}

/* No Comments Message */
#music_comments_modal .no-comments-message {
   color: rgba(255, 255, 255, 0.5);
   padding: 12px 8px;
   text-align: center;
   font-size: 13px;
   font-style: italic;
}

/* Pinned Comment Section */
#music_comments_modal .comment-button {
   padding: 0;
}

#music_comments_modal #music-pinned-comment {
   padding: 10px 12px;
   background: linear-gradient(180deg,
      rgba(102, 126, 234, 0.08) 0%,
      rgba(118, 75, 162, 0.01) 100%);
}

#music_comments_modal #music-pinned-comment:empty {
   display: none;
}

#music_comments_modal .pt_comment_item {
   padding: 12px;
   margin-bottom: 8px;
   border-radius: 12px;
   transition: background 0.2s ease;
   background: rgba(255, 255, 255, 0.03);
   display: flex;
   gap: 10px;
}

#music_comments_modal .pt_comment_item:hover {
   background: rgba(255, 255, 255, 0.08);
}

/* Comment Text Styling */
#music_comments_modal .pt_comment_item .comment-text {
   color: rgba(255, 255, 255, 0.9);
   font-size: 14px;
   line-height: 1.5;
}

#music_comments_modal .pt_comment_item .comment-author {
   color: rgba(255, 255, 255, 0.95);
   font-weight: 500;
   margin-bottom: 4px;
}

#music_comments_modal .pt_comment_item .comment-time {
   color: rgba(255, 255, 255, 0.5);
   font-size: 12px;
}

/* Scrollbar Styling */
#music_comments_modal .modal-body::-webkit-scrollbar {
   width: 5px;
}

#music_comments_modal .modal-body::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.05);
}

#music_comments_modal .modal-body::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.2);
   border-radius: 3px;
}

#music_comments_modal .modal-body::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.3);
}

/* Mobile Responsive */
@media (max-width: 768px) {
   /* Modal must be above fullscreen player (player has z-index: 9999) */
   #music_comments_modal {
      z-index: 10000 !important;
   }

   /* Modal backdrop also above player */
   .modal-backdrop {
      z-index: 9999 !important;
   }

   #music_comments_modal .modal-dialog {
      margin: 20px auto;
      width: 95%;
      max-width: 95%;
   }

   #music_comments_modal .modal-content {
      border-radius: 16px;
   }

   #music_comments_modal .modal-header {
      padding: 14px 16px;
   }

   #music_comments_modal .pt_blogcomm_combo {
      padding: 12px;
   }
}