/* ============================================
   RESET & BASE
   ============================================ */
*{margin:0;padding:0;box-sizing:border-box}body,html{font-family:'M PLUS Rounded 1c','M+PLUS+Rounded',sans-serif;min-height:100vh;color:#fff;overflow-x:hidden}body{background:#0a0a12}a{color:var(--station-color);text-decoration:none;transition:color .3s ease}a:hover{color:#fff;text-decoration:none}

/* ============================================
   LAYOUT
   ============================================ */
.app-container{max-width:1400px;margin:0 auto;padding:20px;min-height:100vh;position:relative;z-index:1}

/* ============================================
   STATION SELECTOR
   ============================================ */
.station-selector{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;justify-content:center;padding:0 0 5px 0;border-bottom:1px solid rgba(255,255,255,.04)}.station-btn{padding:4px 14px;border:2px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.02);color:rgba(255,255,255,.4);font-family:inherit;font-weight:500;font-size:13px;cursor:pointer;transition:all .3s ease;backdrop-filter:blur(10px);display:flex;align-items:center;gap:6px;position:relative}.station-btn:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.2);transform:translateY(-1px)}.station-btn.active{color:#fff;border-color:var(--station-color);background:var(--station-color)25;box-shadow:0 0 60px var(--station-color)25,inset 0 0 30px var(--station-color)08}.station-btn .station-logo-small{width:16px;height:16px;object-fit:contain;filter:grayscale(1) opacity(.4);transition:all .3s ease}.station-btn.active .station-logo-small{filter:grayscale(0) opacity(1)}.station-btn:hover .station-logo-small{filter:grayscale(0) opacity(.9)}.station-btn:not(.active):hover{box-shadow:0 0 25px var(--hover-color,rgba(255,255,255,.1))15}

/* ============================================
   MAIN GRID
   ============================================ */
.main-grid{display:grid;grid-template-columns:1fr;gap:20px}@media(min-width:992px){.main-grid{grid-template-columns:2fr 1fr;gap:20px}}

/* ============================================
   VIDEO WRAPPER
   ============================================ */
.video-wrapper{position:relative;border-radius:0;overflow:hidden;background:transparent}.video-wrapper .video-js{width:100%;aspect-ratio:16/9;background:transparent;border-radius:10px;overflow:hidden}.video-wrapper .video-js .vjs-big-play-button{border-color:var(--station-color);background:var(--station-color)33}.video-wrapper .video-js .vjs-big-play-button:hover{background:var(--station-color)55}.video-wrapper .video-js .vjs-control-bar{background:linear-gradient(to top,rgba(0,0,0,.85),transparent)}.video-wrapper .video-js .vjs-progress-holder .vjs-play-progress{background:var(--station-color)}

/* ============================================
   LOGO - Mobile only
   ============================================ */
.station-logo{display:none;text-align:center;padding:7px 0 12px 0}.station-logo img{max-width:100%;width:auto;height:auto;filter:drop-shadow(0 4px 20px rgba(0,0,0,.5))}@media(max-width:991px){.station-logo{display:block}.station-logo img{max-height:110px}}@media(max-width:480px){.station-logo img{max-height:90px}}@media(max-width:991px){.main-grid{display:flex;flex-direction:column;gap:20px}.station-logo{order:0}.video-wrapper{order:1}.sidebar{order:2}}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar{display:flex;flex-direction:column;gap:14px}

/* ============================================
   DESKTOP LOGO + DESCRIPTION - Intro fade only on desktop
   ============================================ */
.station-desktop-logo{display:none;align-items:flex-start;gap:16px;background:rgba(255,255,255,.04);border-radius:16px;padding:14px 16px;border:1px solid rgba(255,255,255,.05);order:0;transition:opacity 1.5s ease,transform 1.5s ease;opacity:1;transform:translateY(0)}@media(min-width:992px){.station-desktop-logo{display:flex}}.station-desktop-logo.intro-hidden{display:none!important}.station-desktop-logo.intro-fading{opacity:0;transform:translateY(-10px);pointer-events:none}.desktop-logo{width:80px;height:80px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 4px 20px rgba(0,0,0,.3));margin-left:-4px}.station-desktop-logo .station-description{background:transparent;padding:0;border:none;font-size:14px;line-height:1.5;color:rgba(255,255,255,.7);flex:1}.station-desktop-logo .station-description strong{color:var(--station-color);font-weight:700}

/* ============================================
   MOBILE DESCRIPTION - Always visible
   ============================================ */
.mobile-description{display:block;background:rgba(255,255,255,.04);border-radius:16px;padding:14px 16px;border:1px solid rgba(255,255,255,.05);font-size:14px;line-height:1.6;color:rgba(255,255,255,.7);order:0}@media(min-width:992px){.mobile-description{display:none}}.mobile-description strong{color:var(--station-color);font-weight:700}

/* ============================================
   STREAM NOW PLAYING + COMING UP
   ============================================ */
.stream-now-playing{background:rgba(255,255,255,.04);border-radius:16px;padding:12px 16px;border:1px solid rgba(255,255,255,.05);backdrop-filter:blur(10px);order:1}.stream-now-playing .label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:rgba(255,255,255,.4);font-weight:500;margin-bottom:6px}.stream-now-playing .now-track{font-size:18px;font-weight:700;color:var(--station-color);line-height:1.4;margin-bottom:4px}.stream-now-playing .coming-up{margin-top:4px;padding-top:4px;border-top:1px solid rgba(255,255,255,.05)}.stream-now-playing .coming-label{font-size:9px;text-transform:uppercase;letter-spacing:2px;color:rgba(255,255,255,.35);font-weight:500;margin-bottom:2px}.stream-now-playing .coming-tracks{font-size:14px;font-weight:300;color:rgba(255,255,255,.7);line-height:1.4}.stream-now-playing .coming-tracks .dot{color:rgba(255,255,255,.25);margin:0 4px}

/* ============================================
   LIVE RADIO
   ============================================ */
.live-radio{background:rgba(255,255,255,.04);border-radius:16px;padding:12px 16px;border:1px solid rgba(255,255,255,.05);backdrop-filter:blur(10px);order:2}.live-radio .label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:rgba(255,255,255,.4);font-weight:500;margin-bottom:8px;text-align:left}.live-radio .audio-controls{display:flex;align-items:center;gap:14px}.live-radio .play-btn{width:44px;height:44px;border-radius:50%;border:2px solid var(--station-color);background:transparent;color:var(--station-color);font-size:18px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.live-radio .play-btn:hover{background:var(--station-color);color:#000;transform:scale(1.05)}.live-radio .play-btn.playing{background:var(--station-color);color:#000}.live-radio .stream-info{flex:1;min-width:0}.live-radio .stream-info .stream-name{font-size:14px;font-weight:500;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-radio .stream-info .stream-bitrate{font-size:11px;color:rgba(255,255,255,.4)}.live-radio .volume-control{display:flex;align-items:center;gap:8px}.live-radio .volume-control i{color:rgba(255,255,255,.4);font-size:14px}.live-radio .volume-control input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:rgba(255,255,255,.15);border-radius:2px;outline:none}.live-radio .volume-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--station-color);cursor:pointer}

/* ============================================
   RADIO NOW PLAYING
   ============================================ */
.radio-now-playing{background:rgba(255,255,255,.04);border-radius:16px;padding:14px 18px;border:1px solid rgba(255,255,255,.05);backdrop-filter:blur(10px);order:3}.radio-now-playing .label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:rgba(255,255,255,.4);font-weight:500;margin-bottom:6px}.radio-now-playing .track{font-size:18px;font-weight:700;color:var(--station-color);line-height:1.4}

/* ============================================
   RADIO LAST PLAYED
   ============================================ */
.history{background:rgba(255,255,255,.04);border-radius:16px;padding:12px 16px;border:1px solid rgba(255,255,255,.05);order:4}.history .label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:rgba(255,255,255,.4);font-weight:500;margin-bottom:8px}.history-item{display:flex;align-items:center;padding:2px 0;font-size:14px;color:rgba(255,255,255,.7)}.history-item .bullet{color:rgba(255,255,255,.25);margin-right:10px;font-size:10px}.history-item .title{color:rgba(255,255,255,.7);font-weight:300}.history-item .minutes-ago{opacity:.5;font-size:12px;margin-left:6px;font-weight:300;color:rgba(255,255,255,.5)}

/* ============================================
   RADIO LINKS
   ============================================ */
.radio-links{background:rgba(255,255,255,.04);border-radius:16px;padding:10px 16px;border:1px solid rgba(255,255,255,.05);order:5}.radio-links .label{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:rgba(255,255,255,.4);font-weight:500;margin-bottom:6px}.radio-links .links{display:flex;flex-wrap:wrap;gap:8px 16px}.radio-links .links a{font-size:13px;color:rgba(255,255,255,.55);transition:color .3s ease;display:inline-flex;align-items:center;gap:4px}.radio-links .links a:hover{color:var(--station-color)}.radio-links .links a i{font-size:12px}.radio-links .links .separator{color:rgba(255,255,255,.1)}

/* ============================================
   CREDITS + SOCIAL LINKS
   ============================================ */
.station-credits{background:transparent;padding:8px 4px;font-size:13px;color:rgba(255,255,255,.5);line-height:1.6;text-align:left;order:6;padding-top:6px}.station-credits .credits-text{margin-bottom:8px}.station-credits .credits-text a{color:rgba(255,255,255,.6);transition:color .3s ease}.station-credits .credits-text a:hover{color:var(--station-color)}.station-credits .social-links{display:flex;gap:8px;margin-top:2px}.station-credits .social-links a{color:rgba(255,255,255,.35);font-size:16px;transition:all .3s ease;display:inline-flex;align-items:center;justify-content:center;padding:4px}.station-credits .social-links a:first-child{margin-left:-4px}.station-credits .social-links a:hover{color:var(--station-color);transform:scale(1.1)}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}.pulse-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--station-color);animation:pulse 1.5s ease-in-out infinite;margin-right:8px;vertical-align:middle}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:rgba(255,255,255,.02)}::-webkit-scrollbar-thumb{background:var(--station-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--station-color)cc}

/* ============================================
   CONTACT FORM MODAL
   ============================================ */
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1000;justify-content:center;align-items:center;padding:20px;animation:modalFadeIn .3s ease-out}.modal-overlay.active{display:flex}@keyframes modalFadeIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-container{background:rgba(20,20,35,.95);border-radius:20px;padding:30px 35px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;position:relative;border:1px solid rgba(255,255,255,.06);box-shadow:0 30px 80px rgba(0,0,0,.6)}.modal-close{position:absolute;top:14px;right:18px;background:0 0;border:none;color:rgba(255,255,255,.3);font-size:20px;cursor:pointer;transition:all .3s ease;padding:4px 8px;border-radius:8px}.modal-close:hover{color:#fff;background:rgba(255,255,255,.05)}.modal-header{margin-bottom:20px}.modal-header h2{font-size:22px;font-weight:700;color:var(--station-color,#7d8fe5);margin:0}

/* Form Styles */
#contactForm .form-group{margin-bottom:14px}#contactForm label{display:block;font-size:11px;font-weight:500;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px}#contactForm input,#contactForm textarea{width:100%;padding:10px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;color:#fff;font-family:inherit;font-size:14px;transition:all .3s ease;outline:0}#contactForm input:focus,#contactForm textarea:focus{border-color:var(--station-color,#7d8fe5);background:rgba(255,255,255,.06);box-shadow:0 0 20px var(--station-color,#7d8fe5)10}#contactForm textarea{resize:vertical;min-height:80px}#contactForm .form-hint{display:block;font-size:10px;color:rgba(255,255,255,.2);margin-top:3px}

/* Captcha */
.captcha-container{display:flex;align-items:center;gap:10px}.captcha-text{font-size:24px;font-weight:700;font-family:'Courier New',monospace;letter-spacing:5px;padding:6px 14px;background:rgba(255,255,255,.04);border-radius:10px;border:1px solid rgba(255,255,255,.06);min-width:70px;text-align:center;color:var(--station-color,#7d8fe5);user-select:none}.captcha-container input{flex:1;max-width:80px;text-transform:uppercase;letter-spacing:2px;font-family:'Courier New',monospace;text-align:center}.captcha-container input::placeholder{color:rgba(255,255,255,.15)}.captcha-refresh{background:0 0;border:none;color:rgba(255,255,255,.2);cursor:pointer;font-size:16px;padding:6px;border-radius:8px;transition:all .3s ease}.captcha-refresh:hover{color:var(--station-color,#7d8fe5);background:rgba(255,255,255,.04)}

/* Submit Button */
.submit-btn{width:100%;padding:12px;background:var(--station-color,#7d8fe5);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .3s ease;letter-spacing:.5px;margin-top:4px}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--station-color,#7d8fe5)30}.submit-btn:active{transform:translateY(0)}

/* Form Status */
.form-status{margin-top:10px;padding:8px 12px;border-radius:10px;font-size:13px;display:none}.form-status.success{display:block;background:rgba(76,175,80,.12);color:#4caf50;border:1px solid rgba(76,175,80,.15)}.form-status.error{display:block;background:rgba(244,67,54,.12);color:#f44336;border:1px solid rgba(244,67,54,.15)}

/* ============================================
   RESPONSIVE - Mobile
   ============================================ */
@media(max-width:767px){.app-container{padding:12px;padding-bottom:15px}.station-selector{gap:4px;padding:0 0 4px 0;margin-bottom:16px}.station-btn{padding:4px 10px;font-size:14px;border-radius:6px;gap:5px}.station-btn .station-logo-small{width:15px;height:15px}.station-logo{padding:7px 0 12px 0}.station-logo img{max-height:110px!important}.radio-now-playing .track{font-size:18px}.stream-now-playing .now-track{font-size:18px}.stream-now-playing .coming-tracks{font-size:15px}.live-radio .play-btn{width:38px;height:38px;font-size:15px}.live-radio .volume-control input[type=range]{width:40px}.radio-links .links a{font-size:15px}.station-description{font-size:14px;padding:14px 16px}.station-credits{font-size:14px;text-align:left}.station-credits .social-links{gap:3px}.station-credits .social-links a{font-size:22px;padding:8px 10px}.station-credits .social-links a:first-child{margin-left:-6px}.stream-now-playing{padding:12px 16px}.history{padding:12px 16px}.history-item{font-size:15px}.radio-links{padding:10px 16px}.live-radio{padding:12px 16px}.radio-now-playing{padding:14px 16px}.station-desktop-logo{display:none!important}.mobile-description{display:block}.modal-container{padding:20px;margin:10px;border-radius:16px}.modal-header h2{font-size:20px}.captcha-text{font-size:20px;min-width:56px;padding:4px 10px}.captcha-container input{max-width:60px}#contactForm input,#contactForm textarea{padding:8px 12px;font-size:16px!important}.stream-now-playing .label{font-size:13px}.radio-now-playing .label{font-size:13px}.live-radio .label{font-size:13px}.history .label{font-size:13px}.radio-links .label{font-size:13px}.history-item .minutes-ago{font-size:14px}.stream-now-playing .coming-label{font-size:10px}}

@media(max-width:480px){.station-btn{padding:3px 8px;font-size:13px;border-radius:4px;gap:4px}.station-btn .station-logo-small{width:13px;height:13px}.station-logo{padding:5px 0 5px 0}.station-logo img{max-height:90px!important}.station-credits .social-links{gap:2px}.station-credits .social-links a{font-size:26px;padding:10px 12px}.station-credits .social-links a:first-child{margin-left:-8px}.app-container{padding-bottom:20px}.radio-now-playing{padding:12px 14px}.radio-now-playing .track{font-size:18px}.stream-now-playing{padding:12px 14px}.stream-now-playing .now-track{font-size:18px}.stream-now-playing .coming-tracks{font-size:14px}.live-radio{padding:10px 14px}.live-radio .volume-control input[type=range]{width:30px}.radio-links .links{gap:4px 10px}.radio-links .links a{font-size:14px}.station-description{font-size:13px;padding:12px 14px}.station-credits{font-size:13px;text-align:left}.history{padding:10px 14px}.history-item{font-size:14px}.history-item .minutes-ago{font-size:13px}.modal-container{padding:16px}.modal-header h2{font-size:18px}.captcha-text{font-size:18px;min-width:48px;padding:4px 8px;letter-spacing:3px}.captcha-container input{max-width:50px;font-size:13px}#contactForm input,#contactForm textarea{font-size:13px}.stream-now-playing .label{font-size:12px}.radio-now-playing .label{font-size:12px}.live-radio .label{font-size:12px}.history .label{font-size:12px}.radio-links .label{font-size:12px}.stream-now-playing .coming-label{font-size:9px}}

/* ============================================
   MOBILE DESCRIPTION - Fade support
   ============================================ */
.mobile-description{display:block;background:rgba(255,255,255,.04);border-radius:16px;padding:14px 16px;border:1px solid rgba(255,255,255,.05);font-size:14px;line-height:1.6;color:rgba(255,255,255,.7);order:0;transition:all 1.5s ease;overflow:hidden;max-height:500px}@media(min-width:992px){.mobile-description{display:none!important}}.mobile-description.fading{opacity:0;transform:translateY(-10px);max-height:0;padding:0 16px;margin-bottom:0;pointer-events:none}.mobile-description.hidden{display:none!important}

.loading-text{color:rgba(255,255,255,.3);font-weight:300}