.player-wrapper{background:linear-gradient(135deg,#ffffff 0%,#fafbfc 100%);border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,0.08),0 0 0 1px rgba(0,0,0,0.06);display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;position:relative}
.player-wrapper::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--orange) 0%,var(--red) 100%);opacity:.6}
.player-wrapper .player{padding:40px 48px;background:rgba(255,255,255,0.6);backdrop-filter:blur(10px)}
.track-info{display:flex;gap:32px;margin-bottom:28px;align-items:center}
.audio-visualizer{display:flex;gap:5px;align-items:center;height:72px;min-width:100px;padding:24px;background:linear-gradient(135deg,#f8f9fb 0%,#ffffff 100%);border-radius:16px;border:1px solid rgba(74,130,194,0.12);box-shadow:inset 0 2px 4px rgba(255,255,255,0.5),0 4px 12px rgba(74,130,194,0.08);position:relative;overflow:hidden}
.audio-visualizer::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 50%,rgba(74,130,194,0.05) 0%,transparent 70%);pointer-events:none}
.bar{flex:1;max-width:6px;background:linear-gradient(180deg,var(--orange) 0%,var(--red) 100%);border-radius:3px;height:25%;min-width:6px;opacity:.35;transition:all .4s cubic-bezier(0.4,0,0.2,1);box-shadow:0 2px 4px rgba(236,115,56,0.2);position:relative;z-index:1}
.bar:nth-child(1){height:25%}
.bar:nth-child(2){height:45%}
.bar:nth-child(3){height:65%}
.bar:nth-child(4){height:50%}
.bar:nth-child(5){height:30%}
.bar:nth-child(6){height:50%}
.bar:nth-child(7){height:70%}
.bar:nth-child(8){height:45%}
.bar:nth-child(9){height:25%}
.bar.playing{animation:pulse 1.2s ease-in-out infinite;box-shadow:0 4px 12px rgba(236,115,56,0.4)}
.bar.stopping{animation:pulseStop .5s ease-out forwards!important}
.bar:nth-child(1).playing{animation-duration:1.2s;animation-delay:0}
.bar:nth-child(2).playing{animation-duration:1.5s;animation-delay:.1s}
.bar:nth-child(3).playing{animation-duration:1.8s;animation-delay:.2s}
.bar:nth-child(4).playing{animation-duration:2s;animation-delay:.3s}
.bar:nth-child(5).playing{animation-duration:1.6s;animation-delay:.4s}
.bar:nth-child(6).playing{animation-duration:1.4s;animation-delay:.3s}
.bar:nth-child(7).playing{animation-duration:1.7s;animation-delay:.2s}
.bar:nth-child(8).playing{animation-duration:2.2s;animation-delay:.1s}
.bar:nth-child(9).playing{animation-duration:1.3s;animation-delay:0}
@keyframes pulse {
0%,100%{height:25%;opacity:.35;transform:scaleY(1)}
50%{height:100%;opacity:.85;transform:scaleY(1.05)}
}
@keyframes pulseStop {
from{height:inherit;opacity:.85}
to{height:25%;opacity:.35}
}
.track-right{flex:1;min-width:0}
.track-details{margin-bottom:20px;min-width:0}
#trackTitle{font-size:20px;font-weight:700;color:var(--dark-blue);display:block;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:400px;letter-spacing:-.02em;line-height:1.3}
.time{color:#7f8c9a;font-size:14px;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.controls{display:flex;align-items:center;gap:32px}
.buttons{display:flex;gap:14px;align-items:center}
body.svatby .player button{background:linear-gradient(135deg,#4a82c2 0%,#3a6fa3 100%);border:none;border-radius:14px;cursor:pointer;transition:all .3s cubic-bezier(0.4,0,0.2,1);color:#fff;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 4px 12px rgba(74,130,194,0.25)}
body.svatby .player button::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%);opacity:0;transition:opacity .3s ease}
body.svatby .player button:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(74,130,194,0.35);background:linear-gradient(135deg,#5590d0 0%,#4a82c2 100%)}
body.svatby .player button:hover::before{opacity:1}
body.svatby .player button:active{transform:translateY(-1px);box-shadow:0 6px 16px rgba(74,130,194,0.3)}
#prev,#next{width:48px;height:48px}
#prev{padding:10px 13px 10px 10px}
#next{padding:10px 10px 10px 13px}
#prev svg{transform:rotate(180deg)}
#playPause{width:64px;height:64px;border-radius:50%;position:relative;box-shadow:0 6px 20px rgba(74,130,194,0.35)}
#playPause:hover{box-shadow:0 8px 28px rgba(74,130,194,0.45)}
#playPause .icon::before,#playPause .icon::after{content:'';position:absolute;background:#fff;transition:all .3s cubic-bezier(0.4,0,0.2,1)}
#playPause.paused .icon::before{left:50%;top:50%;transform:translate(-30%,-50%);width:0;height:0;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff;background:transparent}
#playPause:not(.paused) .icon::before{left:50%;top:50%;transform:translate(-9px,-50%);width:4px;height:20px;border-radius:2px}
#playPause:not(.paused) .icon::after{left:50%;top:50%;transform:translate(5px,-50%);width:4px;height:20px;border-radius:2px}
.volume{display:flex;align-items:center;gap:14px;flex:1}
.volume svg{width:24px;height:24px;color:#4a82c2;flex-shrink:0;transition:color .3s ease}
.volume:hover svg{color:#3a6fa3}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:linear-gradient(to right,#4a82c2 0%,#4a82c2 var(--val,80%),#e8ecef var(--val,80%),#e8ecef 100%);outline:none;cursor:pointer;box-shadow:inset 0 1px 3px rgba(0,0,0,0.12);transition:all .2s ease;position:relative}
input[type="range"]:hover{background:linear-gradient(to right,#3a6fa3 0%,#3a6fa3 var(--val,80%),#d4dbe0 var(--val,80%),#d4dbe0 100%)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#5590d0 0%,#4a82c2 100%);cursor:pointer;box-shadow:0 2px 8px rgba(74,130,194,0.3),0 0 0 4px rgba(255,255,255,0.8),inset 0 1px 2px rgba(255,255,255,0.3);transition:all .2s cubic-bezier(0.4,0,0.2,1);border:2px solid #fff}
input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 4px 16px rgba(74,130,194,0.45),0 0 0 5px rgba(74,130,194,0.15),inset 0 1px 2px rgba(255,255,255,0.3);background:linear-gradient(135deg,#6aa0dc 0%,#5590d0 100%)}
input[type="range"]::-webkit-slider-thumb:active{transform:scale(1.05)}
input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#5590d0 0%,#4a82c2 100%);cursor:pointer;border:2px solid #fff;box-shadow:0 2px 8px rgba(74,130,194,0.3),0 0 0 4px rgba(255,255,255,0.8),inset 0 1px 2px rgba(255,255,255,0.3);transition:all .2s cubic-bezier(0.4,0,0.2,1)}
input[type="range"]::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:0 4px 16px rgba(74,130,194,0.45),0 0 0 5px rgba(74,130,194,0.15),inset 0 1px 2px rgba(255,255,255,0.3);background:linear-gradient(135deg,#6aa0dc 0%,#5590d0 100%)}
#progress{margin-top:24px;background:linear-gradient(to right,#4a82c2 0%,#4a82c2 var(--val,0%),#e8ecef var(--val,0%),#e8ecef 100%)}
#playlist{list-style:none;display:grid;gap:6px;overflow-y:auto;flex:1;min-height:0;padding:0 48px 48px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(74,130,194,0.3) rgba(0,0,0,0.04);font-size:.9em}
#playlist::-webkit-scrollbar{width:10px}
#playlist::-webkit-scrollbar-track{background:rgba(0,0,0,0.03);border-radius:12px;margin:4px 0}
#playlist::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(74,130,194,0.5) 0%,rgba(58,111,163,0.6) 100%);border-radius:12px;border:2px solid rgba(255,255,255,0.2);transition:background .3s ease,box-shadow .3s ease}
#playlist:hover::-webkit-scrollbar-track{background:rgba(0,0,0,0.06)}
#playlist:hover::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(74,130,194,0.7) 0%,rgba(58,111,163,0.8) 100%);box-shadow:0 2px 8px rgba(74,130,194,0.25)}
#playlist:hover{scrollbar-color:rgba(74,130,194,0.6) rgba(0,0,0,0.06)}
#playlist::-webkit-scrollbar-button{display:none}
#playlist li{padding:14px 22px;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(0.4,0,0.2,1);font-weight:600;color:var(--dark-blue);display:flex;justify-content:space-between;align-items:center;gap:12px;position:relative;background:transparent;border:1px solid transparent}
#playlist li::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(74,130,194,0.05) 0%,rgba(74,130,194,0.02) 100%);border-radius:12px;opacity:0;transition:opacity .3s ease;z-index:-1}
#playlist li span:nth-child(1)::before{content:'▶';margin-right:.6rem;opacity:0;transition:opacity .3s ease;font-size:.8em}
#playlist li span:nth-child(2){flex:1;color:#8f9aa6;font-weight:500}
#playlist li span:nth-child(2)::before{content:'';width:5px;height:5px;display:inline-block;background:#b5bfc9;border-radius:50%;vertical-align:middle;margin-right:12px;transition:background .3s ease}
#playlist li:hover{background:rgba(74,130,194,0.06);transform:translateX(4px);border-color:rgba(74,130,194,0.15)}
#playlist li:hover::before{opacity:1}
#playlist li:hover span:nth-child(2){color:#6b7885}
#playlist li.active{background:linear-gradient(135deg,#4a82c2 0%,#3a6fa3 100%);color:#fff;box-shadow:0 6px 20px rgba(74,130,194,0.35),inset 0 1px 2px rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.15);transform:translateX(6px)}
#playlist li.active span:nth-child(2){color:rgba(255,255,255,0.9)}
#playlist li.active span:nth-child(2)::before{background:rgba(255,255,255,0.7)}
#playlist li.active span:nth-child(1)::before,#playlist li:hover span:nth-child(1)::before{opacity:.7}
.playlist-cta{margin-top:24px;width:100%;cursor:pointer;transition:all .3s cubic-bezier(0.4,0,0.2,1)}
.playlist-cta:active{transform:translateY(2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
@media (max-width: 1300px) {
.media-container{flex-direction:column;gap:50px}
.media-container .left-column,.media-container .right-column{width:100%}
.player-wrapper{width:initial}
.playlist-cta{width:max-content;align-self:center}
}
@media (max-width: 768px) {
.player-wrapper .player{padding:24px 20px}
.track-info{flex-direction:column;gap:20px;margin-bottom:20px}
.audio-visualizer{width:100%;height:56px;justify-content:center;padding:20px}
.track-details{text-align:center}
#trackTitle{max-width:100%;font-size:18px}
.controls{flex-direction:column;gap:20px}
.buttons{gap:16px}
#prev,#next{width:52px;height:52px}
#playPause{width:68px;height:68px}
.volume{display:none}
#progress{margin-top:16px}
#playlist{padding:0 20px 32px;gap:8px}
#playlist li{padding:12px 18px}
}
@media (max-width: 480px) {
.player-wrapper::before{height:3px}
.audio-visualizer{min-width:auto;padding:16px}
.bar{min-width:4px;max-width:4px}
#trackTitle{font-size:16px}
#playlist{font-size:.85em}
}