.card{position:relative;overflow:hidden;border-radius:.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(42 31 27/var(--tw-border-opacity,1));background-image:linear-gradient(to bottom right,var(--tw-gradient-stops));--tw-gradient-from:#1A1311 var(--tw-gradient-from-position);--tw-gradient-to:rgb(26 19 17/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:#0F0908 var(--tw-gradient-to-position);padding:1.25rem;--tw-shadow:0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition:all .3s ease}.card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at top right,rgba(193,127,89,.15),transparent 70%);pointer-events:none}.mix-image{aspect-ratio:1/1;width:100%;box-shadow:0 4px 8px rgba(0,0,0,.3)}.mix-image>div{position:relative;width:100%;height:100%}.mix-image img{transition:transform .5s ease}.play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;opacity:.9;background:rgba(193,127,89,.9);width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .3s ease;box-shadow:0 2px 8px rgba(0,0,0,.4)}.play-icon:hover{transform:translate(-50%,-50%) scale(1.1);background:rgba(193,127,89,1)}.card:hover .mix-image img{transform:scale(1.05)}.card:hover .play-icon{opacity:1}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#2A1F1B;border-radius:9999px;height:.5rem;position:relative;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1rem;height:1rem;background:#C17F59;border-radius:50%;cursor:pointer;-webkit-transition:all .2s;transition:all .2s;box-shadow:0 2px 4px rgba(0,0,0,.2)}input[type=range]::-webkit-slider-thumb:hover{background:#D4956D;transform:scale(1.1);box-shadow:0 3px 6px rgba(0,0,0,.3)}input[type=range]::-moz-range-thumb{width:1rem;height:1rem;background:#C17F59;border-radius:50%;cursor:pointer;-moz-transition:all .2s;transition:all .2s;box-shadow:0 2px 4px rgba(0,0,0,.2);border:none}input[type=range]::-moz-range-thumb:hover{background:#D4956D;transform:scale(1.1);box-shadow:0 3px 6px rgba(0,0,0,.3)}.progress-bar{position:relative;width:100%;height:.5rem;background:#2A1F1B;border-radius:9999px;cursor:pointer;overflow:hidden}.progress-bar>div{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,#C17F59,#D4956D);border-radius:9999px;transition:width .1s linear}.progress-bar:hover>div{background:linear-gradient(90deg,#D4956D,#E5A77F)}.volume-bar{position:relative;width:5rem;height:.5rem;background:#2A1F1B;border-radius:9999px;cursor:pointer;overflow:hidden}.volume-bar>div{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,#C17F59,#D4956D);border-radius:9999px;transition:width .1s linear}.volume-bar:hover>div{background:linear-gradient(90deg,#D4956D,#E5A77F)}.player-control-button{background-color:rgb(42 31 27/.6);transition-property:all;transition-duration:.2s}.player-control-button:hover{background-color:rgb(193 127 89/var(--tw-bg-opacity,1));--tw-scale-x:1.1;--tw-scale-y:1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.playlist-history-button{display:flex;align-items:center;gap:.5rem;border-radius:.5rem;border-width:1px;border-color:rgb(58 47 43/.5);background-image:linear-gradient(to right,var(--tw-gradient-stops));--tw-gradient-from:#2A1F1B var(--tw-gradient-from-position);--tw-gradient-to:rgb(42 31 27/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:#1F1614 var(--tw-gradient-to-position);padding:.5rem 1rem;--tw-text-opacity:1;color:rgb(232 223 216/var(--tw-text-opacity,1));--tw-shadow:0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.playlist-history-button:hover{border-color:rgb(193 127 89/.7)}.playlist-history-button{position:relative;overflow:hidden}.playlist-history-button:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,rgba(193,127,89,.1),transparent 70%);opacity:0;transition:opacity .3s ease}.playlist-history-button:hover:before{opacity:1}.playlist-history-button.active{--tw-border-opacity:1;border-color:rgb(216 155 122/var(--tw-border-opacity,1));background-image:linear-gradient(to right,var(--tw-gradient-stops));--tw-gradient-from:#C17F59 var(--tw-gradient-from-position);--tw-gradient-to:rgb(193 127 89/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:#A66B4B var(--tw-gradient-to-position);--tw-text-opacity:1;color:rgb(15 9 8/var(--tw-text-opacity,1));box-shadow:0 4px 12px rgba(193,127,89,.3)}.playlist-history-button span{font-weight:500}.playlist-history-button .count-badge{margin-left:.25rem;border-radius:9999px;background-color:rgb(193 127 89/.2);padding:.125rem .5rem;font-size:.75rem;line-height:1rem;--tw-text-opacity:1;color:rgb(232 223 216/var(--tw-text-opacity,1));transition:all .3s ease}.playlist-history-button:hover .count-badge{background-color:rgb(193 127 89/.4)}.playlist-history-button.active .count-badge{background-color:rgb(15 9 8/.2);--tw-text-opacity:1;color:rgb(245 235 226/var(--tw-text-opacity,1))}.history-tracks,.playlist-tracks{max-height:300px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#C17F59 #2A1F1B}.history-tracks::-webkit-scrollbar,.playlist-tracks::-webkit-scrollbar{width:6px}.history-tracks::-webkit-scrollbar-track,.playlist-tracks::-webkit-scrollbar-track{background:#2A1F1B;border-radius:3px}.history-tracks::-webkit-scrollbar-thumb,.playlist-tracks::-webkit-scrollbar-thumb{background-color:#C17F59;border-radius:3px}.history-item,.playlist-item{transition:all .2s ease}.history-item:hover,.playlist-item:hover{transform:translateX(4px)}@keyframes pulse{0%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}to{opacity:.8;transform:scale(1)}}.animate-pulse{animation:pulse 2s infinite}.search-container{position:relative}.search-container input{width:100%;border-radius:.5rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(42 31 27/var(--tw-border-opacity,1));background-color:rgb(42 31 27/.4);padding:.5rem 1rem .5rem 2.5rem;--tw-text-opacity:1;color:rgb(232 223 216/var(--tw-text-opacity,1));transition:all .3s ease}.search-container input:focus{--tw-border-opacity:1;border-color:rgb(193 127 89/var(--tw-border-opacity,1));background-color:rgb(42 31 27/.6);outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px rgba(193,127,89,.2)}.search-icon{position:absolute;left:.75rem;top:50%;--tw-translate-y:-50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));--tw-text-opacity:1;color:rgb(154 133 118/var(--tw-text-opacity,1))}.mix-image{position:relative;overflow:hidden;border-radius:.5rem}.mix-image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .3s ease}.mix-image:hover img{transform:scale(1.1)}.mix-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.4));opacity:0;transition:opacity .3s ease}.mix-image:hover:after{opacity:1}.mix-image .play-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.4);color:white;opacity:1;z-index:20}.mix-image:hover .play-icon{opacity:1}.play-button{transition:all .3s cubic-bezier(.4,0,.2,1)}.play-button:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,.3)}.play-button:active{transform:scale(.95)}.player-image{border-radius:.375rem;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.2)}.player-image img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.player-container{border-radius:.75rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(42 31 27/var(--tw-border-opacity,1));background-image:linear-gradient(to right,var(--tw-gradient-stops));--tw-gradient-from:#1A1311 var(--tw-gradient-from-position);--tw-gradient-to:rgb(26 19 17/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-gradient-to:#0F0908 var(--tw-gradient-to-position);padding:1.5rem;--tw-shadow:0 20px 25px -5px rgb(0 0 0/0.1),0 8px 10px -6px rgb(0 0 0/0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);position:relative;overflow:hidden}.player-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at bottom right,rgba(193,127,89,.1),transparent 70%);pointer-events:none}.player-controls{display:flex;align-items:center;gap:.5rem}.player-control-button{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(42 31 27/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(232 223 216/var(--tw-text-opacity,1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.player-control-button:hover{--tw-bg-opacity:1;background-color:rgb(58 46 43/var(--tw-bg-opacity,1))}.player-main-button{display:flex;height:3rem;width:3rem;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity:1;background-color:rgb(193 127 89/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(15 9 8/var(--tw-text-opacity,1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.player-main-button:hover{--tw-bg-opacity:1;background-color:rgb(212 149 109/var(--tw-bg-opacity,1))}.player-info{min-width:0;flex-grow:1}.player-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:500;color:rgb(232 223 216/var(--tw-text-opacity,1))}.player-artist,.player-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-text-opacity:1}.player-artist{font-size:.875rem;line-height:1.25rem;color:rgb(154 133 118/var(--tw-text-opacity,1))}.player-card{min-height:180px;height:auto;position:relative}.player-card,.player-image{transition:none}