.podcast-loading{margin:10px 0;color:#666;font-size:14px;display:flex;align-items:center;gap:8px}
.podcast-loading i{animation:spin 1s linear infinite}
.podcast-error{margin:10px 0;padding:10px;background:#fee;color:#c00;border-radius:4px;font-size:14px}
@keyframes spin{to{transform:rotate(360deg)}
}
.podcast-page{background:#0a0a0a;color:#fff;min-height:100vh}
.nav-podcast{background:rgba(0,0,0,0.95);border-bottom:2px solid #0078d4}
.broadcast-header{background:linear-gradient(135deg,#1a1a1a 0%,#0d0d0d 100%);padding:2rem 0;border-bottom:1px solid #333;position:relative;overflow:hidden}
.broadcast-header::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,120,212,0.1),transparent);animation:sweep 8s infinite}
@keyframes sweep{to{left:100%}
}
.broadcast-status{text-align:center}
.live-indicator{display:inline-flex;align-items:center;gap:0.5rem;background:#dc2626;color:#fff;padding:0.25rem 1rem;border-radius:4px;font-weight:700;font-size:0.875rem;letter-spacing:0.05em;animation:pulse-bg 2s infinite}
@keyframes pulse-bg{0%,100%{background:#dc2626}
50%{background:#ef4444}
}
.live-dot{width:8px;height:8px;background:#fff;border-radius:50%;animation:pulse 1.5s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,0.7)}
70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}
100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
.broadcast-header h1{font-size:2.5rem;margin:1rem 0 0.5rem;font-weight:300;letter-spacing:-0.02em}
.broadcast-header p{color:#999;font-size:1.125rem}
.podcast-main{padding:2rem 0}
.podcast-grid{display:grid;grid-template-columns:1fr 380px;gap:2rem}
.player-card{background:#141414;border:1px solid #2a2a2a;border-radius:12px;padding:2rem}
.player-card h2{display:flex;align-items:center;gap:0.75rem;font-size:1.5rem;margin-bottom:1.5rem;font-weight:400}
.audio-visualizer{position:relative;height:200px;background:#0a0a0a;border-radius:8px;overflow:hidden;margin-bottom:2rem}
#visualizerCanvas{width:100%;height:100%}
.visualizer-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3rem;color:rgba(0,120,212,0.2);pointer-events:none}
.audio-controls{display:flex;align-items:center;gap:1rem;padding:1.5rem;background:#0a0a0a;border-radius:8px;margin-bottom:2rem}
.control-btn{background:#1a1a1a;border:1px solid #333;color:#fff;padding:0.75rem;border-radius:8px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:0.5rem;font-size:0.875rem}
.control-btn:hover{background:#2a2a2a;border-color:#0078d4}
.control-btn.active{background:#0078d4;border-color:#0078d4}
.play-btn{font-size:1.25rem;padding:1rem 1.5rem}
.volume-control{display:flex;align-items:center;gap:0.75rem;flex:1}
#volumeSlider{-webkit-appearance:none;appearance:none;height:4px;background:#333;border-radius:2px;outline:none;flex:1}
#volumeSlider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#0078d4;border-radius:50%;cursor:pointer}
.btn-label{font-size:0.75rem;font-weight:500}
.current-story{background:#0a0a0a;padding:1.5rem;border-radius:8px;margin-bottom:2rem}
.current-story h3{font-size:0.875rem;text-transform:uppercase;letter-spacing:0.05em;color:#666;margin-bottom:1rem}
.story-title{font-size:1.25rem;font-weight:500;margin-bottom:0.75rem;line-height:1.4}
.story-summary{color:#999;line-height:1.6}
.audio-queue h3{display:flex;align-items:center;gap:0.5rem;font-size:1rem;margin-bottom:1rem;font-weight:400}
.queue-list{max-height:300px;overflow-y:auto}
.queue-item{padding:1rem;background:#0a0a0a;border-radius:6px;margin-bottom:0.5rem;display:flex;align-items:center;gap:0.75rem;cursor:pointer;transition:all 0.2s}
.queue-item:hover{background:#1a1a1a}
.queue-item.active{background:#0078d4}
.queue-item.played{opacity:0.5}
.queue-number{font-size:0.875rem;color:#666;min-width:20px}
.feed-card{background:#141414;border:1px solid #2a2a2a;border-radius:12px;padding:2rem;height:fit-content}
.feed-card h2{display:flex;align-items:center;gap:0.75rem;font-size:1.5rem;margin-bottom:1.5rem;font-weight:400}
.feed-filters{display:flex;gap:0.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.filter-btn{background:#1a1a1a;border:1px solid #333;color:#999;padding:0.5rem 1rem;border-radius:6px;font-size:0.875rem;cursor:pointer;transition:all 0.2s}
.filter-btn:hover{border-color:#0078d4;color:#fff}
.filter-btn.active{background:#0078d4;border-color:#0078d4;color:#fff}
.live-feed{max-height:600px;overflow-y:auto}
.feed-item{padding:1.5rem;border-bottom:1px solid #2a2a2a;transition:all 0.2s;cursor:pointer}
.feed-item:hover{background:#1a1a1a}
.feed-item:last-child{border-bottom:none}
.feed-time{font-size:0.75rem;color:#0078d4;margin-bottom:0.5rem}
.feed-title{font-size:1rem;margin-bottom:0.5rem;line-height:1.4}
.feed-excerpt{font-size:0.875rem;color:#999;line-height:1.5}
.feed-loading{text-align:center;padding:3rem;color:#666}
.stats-card{background:#141414;border:1px solid #2a2a2a;border-radius:12px;padding:2rem;margin-top:2rem}
.stats-card h3{display:flex;align-items:center;gap:0.5rem;font-size:1.125rem;margin-bottom:1.5rem;font-weight:400}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.stat-item{text-align:center}
.stat-value{font-size:2rem;font-weight:300;color:#0078d4;margin-bottom:0.25rem}
.stat-label{font-size:0.75rem;color:#666;text-transform:uppercase;letter-spacing:0.05em}
@media (max-width:1024px){.podcast-grid{grid-template-columns:1fr}
.broadcast-header h1{font-size:2rem}
}
@media (max-width:768px){.audio-controls{flex-wrap:wrap}
.volume-control{width:100%}
.stats-grid{grid-template-columns:1fr;gap:1rem}
}
.queue-list::-webkit-scrollbar,.live-feed::-webkit-scrollbar{width:6px}
.queue-list::-webkit-scrollbar-track,.live-feed::-webkit-scrollbar-track{background:#0a0a0a}
.queue-list::-webkit-scrollbar-thumb,.live-feed::-webkit-scrollbar-thumb{background:#333;border-radius:3px}
.queue-list::-webkit-scrollbar-thumb:hover,.live-feed::-webkit-scrollbar-thumb:hover{background:#444}