*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}html{background:#000}body{color:#fff;background:#000;font-family:Inter,Arial,Helvetica,sans-serif;overflow:hidden}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button,input{outline:none}.app-shell{background:radial-gradient(circle at top,#111 0%,#000 55%);flex-direction:column;width:100%;height:100vh;display:flex}.app-header{z-index:300;background:#000;flex-shrink:0;grid-template-columns:220px minmax(280px,600px) 220px;align-items:center;gap:20px;height:70px;padding:0 24px;display:grid}.app-logo{color:#1ed760;white-space:nowrap;cursor:pointer;margin:0;font-size:24px;font-weight:700}.search-section{justify-content:center;align-items:center;gap:10px;width:100%;display:flex}.search-bar{width:100%}.search-bar input{color:#fff;background:#282828;border:none;border-radius:999px;outline:none;width:100%;height:48px;padding:0 22px;font-size:15px;transition:background .2s,box-shadow .2s}.search-bar input:focus{background:#333;box-shadow:0 0 0 1px #555}.search-bar input::placeholder{color:#a7a7a7}.header-spacer{width:100%}.app-body{flex:1;grid-template-columns:250px minmax(0,1fr) 280px;gap:8px;min-height:0;padding:0 8px;display:grid;overflow:hidden}.page-fade{background:#121212;border-radius:10px;min-width:0;min-height:0;padding:22px 24px 130px;animation:.25s fadeIn;overflow-y:auto}.main-content{color:#fff;background:#121212;border-radius:10px;min-width:0;min-height:0;padding:22px 24px 130px;overflow-y:auto}.sidebar{background:#121212;border-radius:10px;min-height:0;padding:18px 12px 120px;overflow-y:auto}.sidebar-header{justify-content:space-between;align-items:center;margin-bottom:14px;padding:0 6px;display:flex}.sidebar-header h3{color:#fff;margin:0;font-size:16px}.playlist-create-box{gap:8px;margin:0 6px 14px;display:flex}.playlist-create-box input{color:#fff;background:#2a2a2a;border:none;border-radius:6px;outline:none;flex:1;min-width:0;padding:9px 10px;font-size:13px}.playlist-create-box input:focus{background:#333}.playlist-create-box button{color:#000;cursor:pointer;background:#1db954;border:none;border-radius:6px;padding:8px 12px;font-weight:600}.playlist-create-box button:hover{background:#1ed760}.sidebar-item{color:#b3b3b3;cursor:pointer;border-radius:7px;align-items:center;gap:10px;width:100%;margin-bottom:4px;padding:10px 8px;transition:background .2s,color .2s;display:flex}.sidebar-item:hover{color:#fff;background:#242424}.sidebar-item p{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;margin:0;font-size:14px;overflow:hidden}.sidebar-count{color:#888;font-size:12px}.liked-icon{color:#fff;background:linear-gradient(135deg,#450af5,#8e8ee8);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.playlist-icon{color:#fff;background:#333;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.sidebar-playlist-img{object-fit:cover;border-radius:6px;flex-shrink:0;width:36px;height:36px}.sidebar-divider{background:#2a2a2a;height:1px;margin:14px 4px}.section{margin-bottom:38px}.section h2{letter-spacing:-.3px;margin:0 0 18px;font-size:22px;font-weight:700}.album-card,.artist-card{cursor:pointer;border-radius:10px;min-width:0;padding:8px;transition:background .2s,transform .2s}.album-card:hover,.artist-card:hover{background:#1d1d1d}.album-card:hover{transform:translateY(-2px)}.card-image-wrapper{background:#282828;border-radius:8px;width:100%;position:relative;overflow:hidden}.card-image-wrapper img{aspect-ratio:1;object-fit:cover;width:100%;transition:transform .25s;display:block}.album-card:hover .card-image-wrapper img{transform:scale(1.05)}.image-placeholder{aspect-ratio:1;background:#282828;justify-content:center;align-items:center;width:100%;font-size:35px;display:flex}.artist-image-wrapper{background:#282828;border-radius:50%;width:100%;overflow:hidden}.artist-image-wrapper img{aspect-ratio:1;object-fit:cover;border-radius:50%;width:100%;transition:transform .25s;display:block}.artist-card:hover .artist-image-wrapper img{transform:scale(1.05)}.artist-img{border-radius:50%}.album-card .card-title{color:#fff;white-space:nowrap;text-overflow:ellipsis;margin:10px 0 4px;font-size:14px;font-weight:600;overflow:hidden}.album-card .card-subtitle{color:#b3b3b3;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:12px;overflow:hidden}.artist-card p{color:#fff;white-space:nowrap;text-overflow:ellipsis;margin:10px 0 0;font-size:14px;font-weight:600;overflow:hidden}.play-overlay{color:#000;opacity:0;background:#1db954;border-radius:50%;justify-content:center;align-items:center;width:46px;height:46px;transition:opacity .2s,transform .2s;display:flex;position:absolute;bottom:10px;right:10px;transform:translateY(10px);box-shadow:0 8px 20px #00000073}.album-card:hover .play-overlay,.artist-card:hover .play-overlay{opacity:1;transform:translateY(0)}.carousel-wrapper{width:100%;position:relative}.carousel-track{scrollbar-width:none;scroll-behavior:smooth;cursor:grab;-webkit-user-select:none;user-select:none;gap:16px;width:100%;display:flex;overflow-x:auto}.carousel-track::-webkit-scrollbar{display:none}.carousel-track.dragging{cursor:grabbing}.carousel-track .album-card,.carousel-track .artist-card{flex:0 0 calc(25% - 12px);min-width:150px}.carousel-arrow{color:#fff;cursor:pointer;z-index:10;opacity:0;background:#000000d9;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:opacity .2s,transform .2s;display:flex;position:absolute;top:42%}.carousel-wrapper:hover .carousel-arrow{opacity:1}.carousel-arrow:hover{transform:scale(1.08)}.carousel-arrow.left{left:4px}.carousel-arrow.right{right:4px}.results-container{width:100%}.loading-text{color:#aaa;padding:20px 0}.error-state{color:#ff8a8a;background:#ff46461a;border-radius:12px;margin:20px 0;padding:20px}.error-state h2{margin-top:0}.empty-state{text-align:center;padding:60px 20px}.empty-state h2{margin-bottom:8px}.empty-state p{color:#aaa}.retry-button{color:#000;cursor:pointer;background:#1db954;border:none;border-radius:999px;justify-content:center;align-items:center;gap:8px;margin-top:15px;padding:10px 18px;font-weight:700;display:inline-flex}.top-result-card{cursor:pointer;background:#1b1b1b;border-radius:10px;align-items:center;gap:16px;max-width:430px;padding:16px;transition:background .2s,transform .2s;display:flex}.top-result-card:hover{background:#282828;transform:translateY(-2px)}.top-result-card img{object-fit:cover;border-radius:8px;flex-shrink:0;width:82px;height:82px}.top-result-name{color:#fff;margin:0;font-size:20px;font-weight:700}.top-result-type{color:#aaa;text-transform:capitalize;margin:6px 0 0;font-size:13px}.song-list{flex-direction:column;gap:4px;width:100%;display:flex}.song-item{cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:8px;transition:background .2s;display:flex}.song-item:hover{background:#242424}.song-item.playing{background:#1db9541f}.song-item.playing .song-name{color:#1db954}.song-item-main{cursor:pointer;flex:1;align-items:center;gap:14px;min-width:0;display:flex}.song-item-main img,.song-item img{object-fit:cover;border-radius:6px;flex-shrink:0;width:48px;height:48px}.song-item-main>div{min-width:0}.song-name{color:#fff;white-space:nowrap;text-overflow:ellipsis;margin:0 0 4px;font-size:14px;font-weight:600;overflow:hidden}.song-artist{color:#aaa;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:12px;overflow:hidden}.icon-btn{color:#b3b3b3;cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;padding:0;transition:color .2s,background .2s,transform .2s;display:flex;position:relative}.icon-btn:hover{color:#fff;background:#2a2a2a}.icon-btn.active{color:#1db954}.icon-btn:disabled{opacity:.35;cursor:not-allowed}.add-to-playlist-wrapper{flex-shrink:0;align-items:center;gap:4px;display:flex;position:relative}.playlist-dropdown{z-index:1000;background:#282828;border:1px solid #333;border-radius:10px;width:230px;padding:10px;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 12px 35px #0009}.playlist-dropdown.open-upward{top:auto;bottom:calc(100% + 8px)}.dropdown-title{color:#aaa;text-transform:uppercase;margin:0 0 8px;font-size:11px;font-weight:600}.dropdown-empty{color:#888;margin:8px 4px;font-size:13px}.dropdown-item{color:#fff;cursor:pointer;border-radius:6px;justify-content:space-between;align-items:center;gap:10px;padding:9px 8px;font-size:13px;display:flex}.dropdown-item:hover{background:#3a3a3a}.dropdown-item span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.dropdown-divider{background:#444;height:1px;margin:8px 0}.dropdown-create{gap:6px;display:flex}.dropdown-create input{color:#fff;background:#1a1a1a;border:none;border-radius:6px;outline:none;flex:1;min-width:0;padding:8px;font-size:12px}.dropdown-create button{color:#000;cursor:pointer;background:#1db954;border:none;border-radius:6px;width:34px;font-size:18px;font-weight:700}.back-arrow-btn{color:#fff;cursor:pointer;background:#282828;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;transition:background .2s;display:flex}.back-arrow-btn:hover{background:#3a3a3a}.playlist-icon-large,.liked-icon-large{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:200px;height:200px;font-size:60px;display:flex}.playlist-icon-large{background:linear-gradient(135deg,#303030,#171717)}.liked-icon-large{color:#fff;background:linear-gradient(135deg,#450af5,#9c9cf0)}.play-all-btn{color:#000;cursor:pointer;background:#1db954;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:54px;height:54px;transition:transform .2s,background .2s;display:flex}.play-all-btn:hover{background:#1ed760;transform:scale(1.06)}.playlist-like-btn{border:1px solid #444;width:46px;height:46px}.playlist-like-btn:hover{border-color:#777}.delete-playlist-page-btn{color:#ddd;cursor:pointer;background:0 0;border:1px solid #555;border-radius:999px;align-items:center;gap:7px;padding:10px 14px;font-size:13px;transition:color .2s,border-color .2s,background .2s;display:flex}.delete-playlist-page-btn:hover{color:#ff6b6b;background:#ff3c3c14;border-color:#f55}.now-playing-sidebar{background:#121212;border-radius:10px;min-height:0;padding:18px 14px 120px;overflow-y:auto}.now-playing-sidebar.empty{color:#777;text-align:center;justify-content:center;align-items:center;display:flex}.now-playing-art{aspect-ratio:1;object-fit:cover;border-radius:8px;width:100%;margin-bottom:16px;display:block}.now-playing-sidebar h3{color:#fff;margin:0 0 6px;font-size:16px}.now-playing-artist{color:#aaa;margin:0 0 22px;font-size:13px}.playing-from{color:#777;font-size:12px}.queue-title{color:#aaa;margin-bottom:10px;font-size:13px;font-weight:600}.queue-empty{color:#777;font-size:13px}.queue-item{cursor:pointer;border-radius:7px;align-items:center;gap:10px;padding:8px;transition:background .2s;display:flex}.queue-item:hover{background:#242424}.queue-item img{object-fit:cover;border-radius:5px;flex-shrink:0;width:42px;height:42px}.queue-item>div{min-width:0}.queue-song-name{color:#fff;white-space:nowrap;text-overflow:ellipsis;margin:0 0 4px;font-size:13px;overflow:hidden}.queue-song-artist{color:#999;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:11px;overflow:hidden}.player-bar{color:#fff;z-index:800;background:#181818;border-top:1px solid #303030;align-items:center;gap:18px;height:92px;padding:10px 16px;display:flex;position:fixed;bottom:0;left:0;right:0}.player-left{align-items:center;gap:12px;width:27%;min-width:200px;display:flex}.player-thumb{object-fit:cover;border-radius:5px;flex-shrink:0;width:56px;height:56px}.player-song-info{min-width:0}.player-song-name{color:#fff;white-space:nowrap;text-overflow:ellipsis;margin:0 0 4px;font-size:13px;font-weight:600;overflow:hidden}.player-song-artist{color:#aaa;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:12px;overflow:hidden}.player-center{flex-direction:column;flex:1;align-items:center;min-width:200px;max-width:720px;display:flex}.player-buttons{align-items:center;gap:16px;margin-bottom:8px;display:flex}.play-btn{color:#000;cursor:pointer;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;transition:transform .2s;display:flex}.play-btn:hover{transform:scale(1.07)}.progress-row{align-items:center;gap:10px;width:100%;display:flex}.time-label{color:#aaa;text-align:center;min-width:36px;font-size:10px}.progress-bar,.volume-bar{appearance:none;cursor:pointer;background:#555;border-radius:999px;height:4px}.progress-bar{flex:1}.volume-bar{width:90px}.progress-bar::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:12px;height:12px}.volume-bar::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:12px;height:12px}.player-right{color:#aaa;justify-content:flex-end;align-items:center;gap:8px;width:27%;min-width:160px;display:flex}.repeat-one-dot{color:#000;background:#1db954;border-radius:50%;justify-content:center;align-items:center;width:14px;height:14px;font-size:9px;font-weight:700;display:flex;position:absolute;top:-2px;right:-2px}.player-error{color:#f77;text-align:center;margin:5px 0 0;font-size:11px}.mobile-bottom-nav{display:none}.skeleton-card{flex-direction:column;gap:8px;display:flex}.skeleton-img{aspect-ratio:1;background:#282828;border-radius:8px;width:100%}.skeleton-line{background:#282828;border-radius:4px;height:12px}.shimmer{position:relative;overflow:hidden}.shimmer:after{content:"";background:linear-gradient(90deg,#0000,#ffffff14,#0000);width:150%;height:100%;animation:1.4s infinite shimmerMove;position:absolute;top:0;left:-150%}@keyframes shimmerMove{to{left:150%}}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.app-footer{text-align:center;color:#777;border-top:1px solid #282828;margin-top:50px;padding:25px 0}.app-footer p{margin:5px 0;font-size:13px}.footer-note{color:#555;font-size:11px}.page-fade,.main-content,.sidebar,.now-playing-sidebar{scrollbar-width:thin;scrollbar-color:#555 transparent}.page-fade::-webkit-scrollbar{width:6px}.main-content::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar{width:6px}.now-playing-sidebar::-webkit-scrollbar{width:6px}.page-fade::-webkit-scrollbar-thumb{background:#555;border-radius:10px}.main-content::-webkit-scrollbar-thumb{background:#555;border-radius:10px}.sidebar::-webkit-scrollbar-thumb{background:#555;border-radius:10px}.now-playing-sidebar::-webkit-scrollbar-thumb{background:#555;border-radius:10px}@media (width>=1500px){.app-body{grid-template-columns:270px minmax(0,1fr) 300px}}@media (width<=1200px){.app-header{grid-template-columns:180px minmax(250px,500px) 180px}.app-body{grid-template-columns:220px minmax(0,1fr)}.now-playing-sidebar{display:none}.carousel-track .album-card,.carousel-track .artist-card{flex:0 0 calc(33.3333% - 10.6667px)}}@media (width<=850px){.app-header{grid-template-columns:1fr;height:auto;padding:14px}.app-logo{display:none}.search-section{width:100%}.app-body{grid-template-columns:190px minmax(0,1fr)}.page-fade{padding:18px 16px 130px}.player-right{display:none}.player-left{width:35%;min-width:160px}}@media (width<=650px){html,body,#root{min-height:100%}body{background:#000;overflow:hidden auto}.app-shell{background:radial-gradient(circle at top,#101010 0%,#000 45%);width:100%;height:auto;min-height:100dvh}.app-header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:500;background:#000000f5;width:100%;height:auto;padding:22px 16px 16px;display:block;position:sticky;top:0}.app-logo,.header-spacer{display:none}.search-section{align-items:center;gap:10px;width:100%;display:flex}.search-bar{width:100%}.search-bar input{color:#fff;background:linear-gradient(135deg,#252525,#1b1b1b);border-radius:999px;height:58px;padding:0 20px;font-size:16px;font-weight:500;box-shadow:0 6px 20px #00000040}.search-bar input::placeholder{color:#b4b4b4}.back-arrow-btn{background:#202020;width:44px;height:44px}.app-body{width:100%;padding:0;display:block;overflow:visible}.sidebar,.now-playing-sidebar{display:none}.page-fade,.main-content{background:0 0;border-radius:0;width:100%;min-height:auto;padding:24px 16px 250px;overflow:visible}.section{margin-bottom:38px}.section h2{letter-spacing:-.5px;margin-bottom:18px;font-size:25px;font-weight:750}.carousel-wrapper{width:calc(100% + 16px);overflow:visible}.carousel-track{cursor:default;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;gap:14px;width:100%;padding-right:16px;overflow-x:auto}.carousel-track .album-card,.carousel-track .artist-card{scroll-snap-align:start;background:0 0;flex:0 0 calc(48% - 6px);min-width:0;padding:0}.album-card{border-radius:14px}.card-image-wrapper{border-radius:13px;box-shadow:0 8px 25px #0000004d}.album-card .card-title{color:#f1f1f1;margin:12px 0 5px;font-size:15px;font-weight:700}.album-card .card-subtitle{color:#a8a8a8;white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;line-height:1.4;display:-webkit-box;overflow:hidden}.play-overlay{opacity:1;color:#111;background:#ffffffeb;width:48px;height:48px;bottom:10px;right:10px;transform:none;box-shadow:0 5px 18px #0000004d}.carousel-arrow{display:none}.player-bar{z-index:950;background:linear-gradient(135deg,#1d1d1f,#161617);border:1px solid #ffffff12;border-radius:22px;flex-direction:column;justify-content:space-between;width:auto;height:142px;padding:14px;display:flex;position:fixed;bottom:94px;left:12px;right:12px;box-shadow:0 12px 40px #00000080}.player-left{align-items:center;gap:12px;width:100%;min-width:0;display:flex}.player-thumb{object-fit:cover;border-radius:9px;flex-shrink:0;width:48px;height:48px}.player-song-info{min-width:0}.player-song-name{white-space:nowrap;text-overflow:ellipsis;margin:0 0 4px;font-size:15px;font-weight:700;overflow:hidden}.player-song-artist{color:#b8b8b8;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:12px;overflow:hidden}.player-center{flex-direction:column;align-items:center;width:100%;min-width:0;max-width:none;display:flex}.player-buttons{justify-content:space-between;align-items:center;gap:4px;width:100%;margin:0;display:flex}.player-buttons .icon-btn{color:#d8d8d8;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.player-buttons .icon-btn:disabled{opacity:.35}.player-buttons .icon-btn.active{color:#1ed760}.play-btn{color:#000;cursor:pointer;background:#1ed760;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex;box-shadow:0 6px 20px #1db95440}.player-buttons .add-to-playlist-wrapper{align-items:center;display:flex}.player-buttons .add-to-playlist-wrapper button{width:34px;height:34px}.progress-row{gap:0;width:auto;display:flex;position:absolute;bottom:8px;left:14px;right:14px}.time-label{display:none}.progress-bar{flex:1;width:100%;height:3px}.progress-bar::-webkit-slider-thumb{width:8px;height:8px}.player-error,.player-right{display:none}.mobile-bottom-nav{z-index:1000;background:linear-gradient(135deg,#0d0d0f,#050506);border:1px solid #ffffff1f;border-radius:28px;grid-template-columns:repeat(4,1fr);align-items:center;height:82px;padding:8px;display:grid;position:fixed;bottom:10px;left:10px;right:10px;box-shadow:0 -8px 30px #00000080}.mobile-bottom-nav button{color:#d1d1d1;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:100%;height:66px;padding:0;font-size:13px;font-weight:600;transition:background .2s,color .2s,transform .2s;display:flex}.mobile-bottom-nav button svg{stroke-width:2px;width:25px;height:25px}.mobile-bottom-nav button.active{color:#1ed760;background:linear-gradient(135deg,#242426,#1b1b1d)}.mobile-bottom-nav button.active svg{stroke:#1ed760}.mobile-bottom-nav button:active{transform:scale(.96)}.mobile-bottom-nav button:not(.active):hover{color:#fff}}