:root{--bg-primary:#05060a;--bg-glass:#ffffff08;--border-glass:#ffffff14;--text-primary:#fff;--text-secondary:#ffffff80;--accent-primary:#8b5cf6;--accent-secondary:#ec4899;--accent-tertiary:#3b82f6;--accent-glow:#8b5cf666;--mesh-1:#4c1d95;--mesh-2:#831843;--mesh-3:#1e3a8a;--mesh-4:#065f46;--font-display:"Outfit", sans-serif;--font-body:"Inter", sans-serif;--shadow-premium:0 20px 50px #0009;--glass-blur:blur(40px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{width:100%;height:100dvh;margin:0;padding:0;position:relative;overflow:hidden}body{font-family:var(--font-body);background-color:var(--bg-primary);color:var(--text-primary);justify-content:center;align-items:center;min-height:100dvh;display:flex}.app-background{z-index:0;background:var(--bg-primary);width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.blob{filter:blur(120px);opacity:.4;border-radius:50%;width:600px;height:600px;animation:20s ease-in-out infinite alternate mesh-move;position:absolute}.blob-1{background:var(--mesh-1);animation-duration:25s;top:-10%;left:-10%}.blob-2{background:var(--mesh-2);animation-duration:30s;animation-delay:-5s;bottom:-10%;right:-10%}.blob-3{background:var(--mesh-3);width:450px;animation-duration:20s;animation-delay:-2s;top:40%;left:50%}.blob-4{background:var(--mesh-4);width:500px;animation-duration:35s;animation-delay:-10s;bottom:10%;left:10%}@keyframes mesh-move{0%{transform:translate(0)rotate(0)scale(1)}50%{transform:translate(5%,10%)rotate(90deg)scale(1.1)}to{transform:translate(-5%,-5%)rotate(180deg)scale(.9)}}.player-container{z-index:10;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:clamp(320px,95vw,440px);padding:clamp(10px,4vw,20px);display:flex;position:relative}.glow-ring{background:conic-gradient(from 0deg, transparent, var(--accent-primary), transparent, var(--accent-secondary), transparent);-webkit-mask-composite:xor;opacity:.3;pointer-events:none;border-radius:35px;padding:2px;animation:8s linear infinite rotate-glow;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}@keyframes rotate-glow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.player-glass-card{background:var(--bg-glass);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-glass);box-shadow:var(--shadow-premium);border-radius:clamp(24px,10vw,35px);flex-direction:column;justify-content:space-between;align-items:center;width:100%;max-height:92vh;padding:clamp(20px,6vw,40px);display:flex;position:relative;overflow:hidden}.library-drawer{-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);z-index:100;background:#0a0b0ffa;border-radius:40px;flex-direction:column;width:100%;height:100%;padding:30px;transition:transform .4s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:0;left:0;transform:translateY(100%)}.library-drawer.active{transform:translateY(0)}.library-header{justify-content:space-between;align-items:center;margin-bottom:25px;display:flex}.library-header h3{font-family:var(--font-display);font-size:1.5rem;font-weight:700}.library-list{flex:1;padding-right:10px;overflow-y:auto}.library-list::-webkit-scrollbar{width:4px}.library-list::-webkit-scrollbar-thumb{background:var(--accent-primary);border-radius:10px}.title-row{justify-content:center;align-items:center;gap:15px;width:100%;display:flex}.btn-icon-small{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;font-size:1.2rem;transition:all .3s;animation:2.5s infinite alternate pulse-glow}@keyframes pulse-glow{0%{filter:drop-shadow(0 0 5px var(--accent-glow));transform:scale(1)}to{filter:drop-shadow(0 0 15px var(--accent-primary));transform:scale(1.1)}}.btn-icon:hover{color:var(--text-primary);animation-play-state:paused;transform:scale(1.2)}.btn-icon-small.active{color:#ff4d4d}.btn-icon-small.active i{font-weight:900}.player-glass-card:before{content:"";pointer-events:none;background:radial-gradient(circle,#ffffff0d 0%,#0000 70%);width:200%;height:200%;position:absolute;top:-50%;left:-50%}.player-header{z-index:50;width:100%;margin-bottom:25px;position:relative}.search-bar{border:1px solid var(--border-glass);background:#ffffff0d;border-radius:20px;align-items:center;padding:12px 18px;transition:all .3s;display:flex}.search-bar:focus-within{border-color:var(--accent-primary);box-shadow:0 0 20px #8b5cf633}.search-bar i{color:var(--text-secondary);margin-right:12px}.search-bar input{color:var(--text-primary);width:100%;font-family:var(--font-body);background:0 0;border:none;outline:none;font-size:1rem}.search-bar input::placeholder{color:var(--text-secondary)}.search-dropdown{-webkit-backdrop-filter:blur(25px);border:1px solid var(--border-glass);z-index:1000;background:#0a0b0ff2;border-radius:20px;width:100%;max-height:280px;padding:10px;position:absolute;top:calc(100% + 10px);left:0;overflow-y:auto;box-shadow:0 15px 45px #000c}.search-dropdown.hidden{display:none!important}.search-item{cursor:pointer;border-radius:15px;flex-direction:column;margin-bottom:2px;padding:12px 18px;transition:all .2s;display:flex}.search-item:hover{background:#ffffff1a;transform:translate(5px)}.search-item-title{color:var(--text-primary);margin-bottom:2px;font-size:.95rem;font-weight:600}.search-item-artist{color:var(--text-secondary);font-size:.8rem}.search-dropdown::-webkit-scrollbar{width:6px}.search-dropdown::-webkit-scrollbar-thumb{background:var(--border-glass);border-radius:10px}.search-dropdown::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.cover-section{aspect-ratio:1;width:100%;max-width:280px;margin:0 auto 35px;position:relative}.cover-art-wrapper{width:100%;height:100%;position:relative}.cover-art{object-fit:cover;border:1px solid #ffffff1a;border-radius:24px;width:100%;height:100%;transition:transform .6s cubic-bezier(.34,1.56,.64,1);box-shadow:0 30px 60px -12px #00000080,0 18px 36px -18px #00000080}.cover-art:hover{transform:scale(1.05)rotate(2deg)}.visualizer{pointer-events:none;align-items:flex-end;gap:3px;height:80px;padding:0 10px;display:flex;position:absolute;bottom:-15px;left:50%;transform:translate(-50%)}.visualizer .bar{background:linear-gradient(to top, var(--accent-primary), var(--accent-secondary));opacity:.3;border-radius:2px;width:4px;height:4px;transition:height .2s,opacity .3s}.visualizer-active .bar{opacity:1;animation:.8s ease-in-out infinite alternate bar-dance}.visualizer .bar:nth-child(n){animation-delay:calc(var(--i) * 50ms)}@keyframes bar-dance{0%{filter:brightness();height:5px}to{height:40px;filter:brightness(1.5) drop-shadow(0 0 5px var(--accent-glow))}}.visualizer .bar:nth-child(odd){animation-duration:.7s}.visualizer .bar:nth-child(3n){animation-duration:1s}.track-info{text-align:center;width:100%;margin-bottom:30px}.track-info h1{font-family:var(--font-display);letter-spacing:-.02em;white-space:nowrap;text-overflow:ellipsis;margin-bottom:6px;font-size:1.7rem;font-weight:700;overflow:hidden}.track-info p{color:var(--text-secondary);letter-spacing:.01em;font-size:1rem;font-weight:500}.duration-control{width:100%;margin-top:25px;margin-bottom:40px}.duration-slider{appearance:none;cursor:pointer;background:#ffffff1a;border-radius:10px;outline:none;width:100%;height:4px;transition:height .2s,background .2s;position:relative}.duration-slider:hover{background:#ffffff26;height:6px}.duration-slider::-webkit-slider-thumb{appearance:none;width:14px;height:14px;box-shadow:0 0 10px var(--accent-glow);cursor:pointer;border:2px solid var(--accent-primary);opacity:0;background:#fff;border-radius:50%;transition:opacity .2s,transform .2s}.duration-slider:hover::-webkit-slider-thumb{opacity:1;transform:scale(1.1)}.duration-slider::-moz-range-thumb{width:14px;height:14px;box-shadow:0 0 10px var(--accent-glow);cursor:pointer;border:2px solid var(--accent-primary);opacity:0;background:#fff;border-radius:50%}.duration-slider:hover::-moz-range-thumb{opacity:1}.time-labels{font-family:var(--font-body);color:var(--text-secondary);font-variant-numeric:tabular-nums;justify-content:space-between;margin-bottom:25px;font-size:.85rem;font-weight:500;display:flex}.controls{justify-content:center;align-items:center;gap:30px;margin-bottom:35px;display:flex}.btn-control{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;font-size:1.6rem;transition:all .2s cubic-bezier(.175,.885,.32,1.275)}.btn-control:hover{color:var(--text-primary);transform:scale(1.2)}.btn-control:active{transform:scale(.9)}.btn-control.active{color:var(--accent-primary);text-shadow:0 0 10px var(--accent-glow)}.repeat-icon-wrapper{justify-content:center;align-items:center;display:flex;position:relative}.repeat-badge{background:var(--accent-primary);color:#fff;border-radius:50%;width:14px;height:14px;padding-top:1px;font-size:.65rem;font-weight:800;display:none;position:absolute;top:-5px;right:-8px}.mode-one .repeat-badge{justify-content:center;align-items:center;display:flex}.btn-play{background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));color:#fff;cursor:pointer;width:80px;height:80px;box-shadow:0 10px 30px var(--accent-glow);border:none;border-radius:30px;justify-content:center;align-items:center;font-size:1.8rem;transition:all .3s;display:flex}.btn-play:hover{filter:brightness(1.1);box-shadow:0 15px 40px var(--accent-glow);transform:translateY(-4px)scale(1.05)}.btn-play:active{transform:scale(.95)}.volume-control{align-items:center;gap:15px;width:100%;margin-top:30px;display:flex}.volume-slider{appearance:none;background:#ffffff1a;border-radius:2px;outline:none;flex:1;height:4px}.volume-control button{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;font-size:1.2rem}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:12px;height:12px;box-shadow:0 0 10px #ffffff4d}.volume-slider::-moz-range-thumb{background:#fff;border:none;border-radius:50%;width:12px;height:12px}.app-nav{border:1px solid var(--border-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border-radius:24px;justify-content:space-around;align-items:center;width:100%;margin-top:20px;padding:12px 0;display:flex}.nav-item{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:6px;transition:all .3s;display:flex}.nav-item i{font-size:1.2rem}.nav-item span{font-size:.75rem;font-weight:500;font-family:var(--font-body)}.nav-item:hover{color:var(--text-primary);transform:translateY(-2px)}.nav-item.active{color:var(--accent-primary);text-shadow:0 0 10px var(--accent-glow)}.nav-item.active i{transform:scale(1.1)}.time-labels{color:var(--text-secondary);font-size:.8rem;font-family:var(--font-body);justify-content:space-between;margin-bottom:8px;display:flex}.duration-slider{appearance:none;background:var(--bg-glass);cursor:pointer;border-radius:2px;outline:none;width:100%;height:4px}.duration-slider::-webkit-slider-thumb{appearance:none;background:var(--accent-primary);width:12px;height:12px;box-shadow:0 0 10px var(--accent-glow);border-radius:50%;transition:transform .2s}.duration-slider::-webkit-slider-thumb:hover{transform:scale(1.4)}.duration-slider::-moz-range-thumb{background:var(--accent-primary);width:12px;height:12px;box-shadow:0 0 10px var(--accent-glow);border:none;border-radius:50%}@media (width<=500px){.player-container{padding:10px}.player-glass-card{border-radius:28px;justify-content:space-between;gap:1.5vh;width:100%;max-height:95dvh;padding:clamp(15px,4vh,25px) 20px}.cover-section{flex-shrink:1;max-width:min(240px,40vh);margin-bottom:0}.track-info{margin-bottom:0}.track-info h1{font-size:clamp(1.1rem,4.5vw,1.4rem)}.track-info p{font-size:.85rem}.btn-play{border-radius:22px;width:clamp(60px,15vw,75px);height:clamp(60px,15vw,75px);font-size:1.5rem}.btn-control{font-size:clamp(1.2rem,5vw,1.5rem)}.controls{gap:clamp(15px,5vw,25px);margin-bottom:5px}.duration-control{margin-top:5px;margin-bottom:10px}.visualizer{height:50px;bottom:-10px}.app-nav{border-radius:20px;margin-top:auto;padding:10px 0}}@media (height<=700px){.player-glass-card{gap:1vh;padding:15px}.cover-section{max-width:min(180px,30vh)}.track-info h1{font-size:1.1rem}.controls{gap:15px}.volume-control{margin-top:2px}}@media (height<=640px){.volume-control{display:none!important}.cover-section{max-width:min(150px,25vh)}.track-info{margin-top:5px;margin-bottom:5px}.duration-control{margin-bottom:5px}}@media (width<=320px){.player-glass-card{padding:12px}.btn-play{width:54px;height:54px;font-size:1.2rem}.controls{gap:10px}}