.wrapper-radio {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }
        .radio-container {
            background: rgba(74, 0, 130, 0.8);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
            text-align: center;
            width: 100%;
            max-width: 800px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-sizing: border-box;
            margin: 10px;
        }
        .radio-header {
            margin-bottom: 20px;
        }
        .radio-title {
            color: #fff;
            font-size: clamp(20px, 5vw, 26px);
            font-weight: bold;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        .radio-subtitle {
            color: #d9b3ff;
            font-size: clamp(14px, 3vw, 16px);
        }
        .player-controls {
            margin: 20px 0;
        }
        .play-btn {
            width: clamp(60px, 15vw, 80px);
            height: clamp(60px, 15vw, 80px);
            border-radius: 50%;
            background: linear-gradient(135deg, #9933ff, #6600cc);
            border: none;
            color: white;
            font-size: clamp(18px, 4vw, 24px);
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            margin: 0 auto;
            display: block;
        }
        .play-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 20px rgba(102, 0, 204, 0.6);
        }
        .play-btn:active {
            transform: scale(0.95);
        }
        .volume-control {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }
        .volume-icon {
            color: #d9b3ff;
            font-size: clamp(16px, 4vw, 20px);
        }
        .volume-slider {
            width: 100%;
            max-width: 200px;
            height: 6px;
            -webkit-appearance: none;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            outline: none;
        }
        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #9933ff;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(153, 51, 255, 0.5);
        }
        .status {
            color: #d9b3ff;
            font-size: clamp(12px, 3vw, 14px);
            margin-top: 15px;
            height: 20px;
        }
        .visualizer {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            height: clamp(40px, 10vw, 50px);
            gap: 3px;
            margin: 20px 0;
        }
        .bar {
            width: 4px;
            background: linear-gradient(to top, #9933ff, #d9b3ff);
            border-radius: 2px;
            animation: visualizer 1.5s infinite ease-in-out;
            animation-play-state: paused;
        }
        .bar:nth-child(1) { animation-delay: 0s; height: 15px; }
        .bar:nth-child(2) { animation-delay: 0.1s; height: 25px; }
        .bar:nth-child(3) { animation-delay: 0.2s; height: 35px; }
        .bar:nth-child(4) { animation-delay: 0.3s; height: 40px; }
        .bar:nth-child(5) { animation-delay: 0.4s; height: 35px; }
        .bar:nth-child(6) { animation-delay: 0.5s; height: 25px; }
        .bar:nth-child(7) { animation-delay: 0.6s; height: 15px; }
        @keyframes visualizer {
            0%, 100% { transform: scaleY(0.8); }
            50% { transform: scaleY(1.2); }
        }
        .playing .bar {
            animation-play-state: running;
        }
        .stream-info {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 15px;
            margin-top: 15px;
        }
        .stream-title {
            color: white;
            font-size: clamp(14px, 3vw, 16px);
            font-weight: bold;
            margin-bottom: 5px;
        }
        .stream-description {
            color: #d9b3ff;
            font-size: clamp(12px, 3vw, 14px);
        }
        @media (max-width: 768px) {
            .radio-container {
                padding: 15px;
                margin: 5px;
            }
            .radio-title {
                font-size: clamp(18px, 4.5vw, 22px);
            }
            .play-btn {
                width: clamp(50px, 12vw, 70px);
                height: clamp(50px, 12vw, 70px);
                font-size: clamp(16px, 3.5vw, 20px);
            }
            .visualizer {
                height: clamp(30px, 8vw, 40px);
            }
            .volume-control {
                gap: 8px;
                margin-top: 15px;
            }
            .volume-slider {
                max-width: 150px;
            }
        }
        @media (max-width: 480px) {
            .radio-container {
                padding: 10px;
                margin: 5px;
            }
            .visualizer {
                height: clamp(25px, 7vw, 35px);
            }
            .bar {
                width: 3px;
            }
            .volume-slider {
                max-width: 120px;
            }
        }