.vinyl-card{position:relative;cursor:pointer;transition:all .3s ease;border-radius:12px;overflow:hidden;background:#8080800d}.vinyl-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #00000026}.vinyl-card.active{background:#80808026;box-shadow:0 0 0 2px #8b451380}.vinyl-card .vinyl-disc{position:relative;width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#1a1a1a,#2d2d2d,#1a1a1a,#2d2d2d,#1a1a1a);box-shadow:inset 0 0 20px #00000080,0 4px 12px #0000004d;flex-shrink:0}.vinyl-card .vinyl-disc:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 4px #0000004d}.vinyl-card .vinyl-disc:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:#333;box-shadow:inset 0 0 2px #00000080}.vinyl-card .vinyl-disc .grooves{position:absolute;inset:15px;border-radius:50%;background:repeating-radial-gradient(circle at center,transparent 0px,transparent 1px,rgba(255,255,255,.03) 1px,rgba(255,255,255,.03) 2px)}.vinyl-search{position:relative}.vinyl-search input{width:100%;padding:.75rem 1rem .75rem 2.5rem;border:1px solid rgba(128,128,128,.2);border-radius:8px;background:#8080800d;font-size:.875rem;transition:all .2s ease}.vinyl-search input:focus{outline:none;border-color:#8b451380;background:#8080801a}.vinyl-search .search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);opacity:.5}.song-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:8px;cursor:pointer;transition:all .2s ease;position:relative;border:2px solid transparent}.song-item:hover{background:#8080801a}.song-item.current{background:#8b451314;border-color:#8b451333}.song-item.playing{background:#8b451326;border-color:#8b451366}.song-item.playing:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#8b4513,peru);border-radius:2px 0 0 2px}.song-item .song-index{width:24px;text-align:center;font-size:.875rem;opacity:.5;flex-shrink:0}.song-item.current .song-index,.song-item.playing .song-index{color:#8b4513;opacity:1;font-weight:600}.song-item .song-info{flex:1;min-width:0}.song-item .song-name{font-size:.9375rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-item.playing .song-name{color:#8b4513;font-weight:600}.song-item .song-duration{font-size:.75rem;opacity:.5}.playing-indicator{display:flex;align-items:flex-end;gap:2px;height:16px}.playing-indicator span{width:3px;background:#8b4513;border-radius:1px;animation:soundbar .5s ease infinite alternate}.playing-indicator span:nth-child(1){animation-delay:0s;height:40%}.playing-indicator span:nth-child(2){animation-delay:.1s;height:70%}.playing-indicator span:nth-child(3){animation-delay:.2s;height:50%}.playing-indicator span:nth-child(4){animation-delay:.3s;height:80%}@keyframes soundbar{0%{height:20%}to{height:100%}}.vinyl-card.dragging{opacity:.5;transform:scale(.95)}.gramophone-drop-zone.drag-over{box-shadow:0 0 30px #8b451380}.volume-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:#8080804d;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#8b4513;cursor:pointer;transition:transform .2s ease}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#8b4513;cursor:pointer;border:none}.collapse-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:#8080801a;border:none;cursor:pointer;transition:all .2s ease}.collapse-btn:hover{background:#80808033}.collapse-btn span{transition:transform .3s ease}.collapse-btn.collapsed span{transform:rotate(180deg)}#global-music-player{position:fixed;inset:0;z-index:100;pointer-events:none;background:transparent}.music-page-wrapper{position:fixed;inset:0;top:4rem;background:transparent;overflow:hidden;display:flex;flex-direction:column;pointer-events:auto;transition:transform .3s ease,opacity .3s ease}.music-page-wrapper.hidden{transform:translateY(100%);opacity:0;pointer-events:none}.music-player-container{flex:1;width:100%;height:100%;margin:0;padding:0;position:relative;overflow:hidden;background:transparent}.sidebar-wrapper{position:absolute;top:0;bottom:0;height:100%;z-index:50;transition:transform .3s ease}.sidebar-wrapper.left{left:0;width:260px}.sidebar-wrapper.right{right:0;width:260px;display:flex;justify-content:flex-end}.sidebar-wrapper.left.collapsed{transform:translate(-260px)}.sidebar-wrapper.right.collapsed{transform:translate(260px)}.sidebar-toggle{position:absolute;top:50%;transform:translateY(-50%);width:20px;height:48px;background:#80808014;border:1px solid rgba(128,128,128,.15);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:10}.sidebar-toggle:hover{background:#8b45131a;border-color:#8b45134d}.sidebar-toggle span{font-size:1rem;opacity:.6;transition:transform .3s ease}.sidebar-toggle:hover span{opacity:1;color:#8b4513}.left-toggle{right:-20px;border-radius:0 6px 6px 0;border-left:none}.right-toggle{left:-20px;border-radius:6px 0 0 6px;border-right:none}.sidebar-wrapper.left.collapsed .left-toggle span,.sidebar-wrapper.right.collapsed .right-toggle span{transform:rotate(180deg)}.gramophone-section{display:flex;align-items:center;justify-content:center;height:100%;width:100%;overflow:hidden;padding:.5rem;background:transparent}.mobile-controls{display:none;position:absolute;bottom:0;left:0;right:0;background:var(--c-bg);border-top:1px solid rgba(128,128,128,.2);padding:.75rem 1rem;padding-bottom:calc(.75rem + env(safe-area-inset-bottom,0px));justify-content:center;gap:3rem;z-index:200;box-shadow:0 -4px 20px #0000001a}.mobile-btn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#8b45131a;border:2px solid rgba(139,69,19,.2);cursor:pointer;transition:all .2s ease}.mobile-btn:hover,.mobile-btn:active{background:#8b451333;border-color:#8b451366;transform:scale(1.05)}.mobile-btn span{font-size:1.5rem;opacity:.8;color:#8b4513}.music-floating-btn{position:fixed;bottom:2rem;right:2rem;width:50px;height:50px;border-radius:50%;background:var(--c-bg);border:1px solid rgba(128,128,128,.2);box-shadow:0 4px 12px #0000001a;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;z-index:101;transition:all .3s ease;opacity:0;transform:scale(.8);pointer-events:none}.music-floating-btn.visible{opacity:1;transform:scale(1);pointer-events:auto}.spin-animation{animation:spin 3s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1024px){.sidebar-wrapper.left{width:200px}.sidebar-wrapper.left.collapsed{transform:translate(-200px)}.sidebar-wrapper.right{transform:translate(260px)}.sidebar-toggle{display:none}.sidebar-wrapper.right.active{transform:translate(0)}.mobile-controls{display:flex}}@media (max-width: 768px){.music-page-wrapper{bottom:4.5rem}.sidebar-wrapper.left{width:260px;bottom:4.5rem;transform:translate(-260px);z-index:150}.sidebar-wrapper.right{width:260px;bottom:4.5rem;transform:translate(260px);z-index:150}.sidebar-wrapper.left.active,.sidebar-wrapper.right.active{transform:translate(0)}.gramophone-section{padding:.25rem}.mobile-controls{padding:.6rem 1rem;padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px))}.mobile-btn{width:48px;height:48px}}@media (max-width: 480px){.sidebar-wrapper.left,.sidebar-wrapper.right{width:85%;max-width:280px}}