/* -- Hello,I'm Ahmed Ayyad,AKA (MooDeeY). how can i help you? Since you've made it here,you're looking for me,and here's my personal email:moodeey.me@gmail.com -- */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{--recommend-gap:20px;--primary:#ffffff;--secondary:#eaf6ff;--text:#fbfbfb;--text-muted:rgba(242,242,242);--stroke:rgba(255,255,255,0.12);--page-x:clamp(14px,4vw,28px);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--header-height:58px;--list-section-height:clamp(252px,30dvh,272px);--album-size:clamp(118px,min(28dvh,42vw),230px);--album-glow:calc(var(--album-size) + clamp(22px,6vmin,52px));--recommend-card:clamp(98px,18vw,126px);--ctrl-btn-size:clamp(38px,8.5vmin,50px);--play-pause-size:clamp(54px,11vmin,70px);--ctrl-gap:clamp(10px,3vw,26px);--radius-lg:clamp(18px,5vw,28px);--neumo-shadow:10px 12px 24px rgba(0,0,0,0.4),-5px -5px 14px rgba(255,255,255,0.1),inset 0 1px 0 rgba(255,255,255,0),inset 0 -1px 0 rgba(0,0,0,0.06);--neumo-shadow-inset:inset 6px 6px 14px rgba(0,0,0,0.36),inset -4px -4px 10px rgba(255,255,255,0.07);--neumo-shadow-active:inset 6px 6px 14px rgba(0,0,0,0.4),inset -4px -4px 10px rgba(255,255,255,0.06);}
html,body{width:100%;height:100%;overflow:hidden;}
body{position:fixed;inset:0;min-height:100dvh;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:linear-gradient(150deg,rgb(67 115 167) 0%,rgb(24 53 87) 48%,rgb(4 24 48) 100%);display:grid;place-items:center;}
button,input{font:inherit;}
button{-webkit-user-select:none;user-select:none;cursor:pointer;transition:all 0.12s ease;}
.app-container{position:relative;isolation:isolate;width:min(100vw,520px);height:100dvh;max-height:920px;overflow:hidden;display:flex;flex-direction:column;background:rgba(7,22,36,0.2);box-shadow:0 60px 120px rgba(0,0,0,.65),0 25px 60px rgba(0,0,0,.45),0 10px 20px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.12);border-radius:0;}
.app-container::before{content:"";position:absolute;inset:-30px;z-index:-1;border-radius:inherit;background:radial-gradient(circle,rgba(255,255,255,0.12) 0%,transparent 70%);filter:blur(40px);}
 .dynamic-background,.background-overlay{position:absolute;inset:0;pointer-events:none;}
.dynamic-background{z-index:-5;background-size:cover;background-position:center;filter:blur(60px) brightness(0.68) saturate(1.08);transform:scale(1.12);transition:background-image 0.45s ease;}
.background-overlay{z-index:-4;background:linear-gradient(160deg,rgba(91,169,198,0.34),rgba(2,13,22,0.62));}
.aurora-visualizer{position:absolute;inset:0;z-index:-3;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:.88;filter:blur(18px) saturate(1.25);transform:translateZ(0);}
.main-header{flex:0 0 auto;min-height:var(--header-height);padding:max(2px,var(--safe-top)) var(--page-x) 6px;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(6px,2.2dvh,15px);}
.header-top,.logo-container,.logo-link{display:flex;align-items:center;}
.header-top{justify-content:space-between;}
.logo-link{text-decoration:none;}
.logo-img{height:clamp(24px,5dvh,34px);width:auto;max-width:150px;object-fit:contain;filter:drop-shadow(0 2px 5px rgba(0,0,0,0.34));}
.logo-text-fallback{display:none;}
.logo{font-size:clamp(1rem,4vw,1.3rem);font-weight:800;}
.logo span,.song-title,.section-header h3,.modal-header h3{background:linear-gradient(135deg,#fff,var(--secondary),var(--primary));-webkit-background-clip:text;background-clip:text;color:#f5f5f5;}
.nav-tabs{display:grid;grid-template-columns:repeat(3,1fr);}
.tab,.tab.active,.tab:active{border:0 !important;}
.tab.active,.tab:active{box-shadow:none !important;}
.tab:first-child::before{content:"🎧";}
.tab:nth-child(2)::before{content:"📀";}
.tab:last-child::before{content:"❤️";}
.tab{background:transparent !important;color:rgba(231,231,231) !important;border:0 !important;}
.tab.active{color:var(--primary) !important;}
.tab.active::after{content:"";position:absolute;left:8%;right:8%;bottom:-1px;height:2px;border-radius:99px;background:linear-gradient(90deg,transparent,#fff,transparent);}
.player-main{flex:1 1 auto;min-height:0;padding:clamp(8px,1.8dvh,16px) var(--page-x);display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,1.5dvh,14px);}
.album-art-container{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;flex:0 0 auto;min-height:calc(var(--album-size) + 6px);}
.album-glow{position:absolute;width:calc(var(--album-size) + 34px);height:calc(var(--album-size) + 34px);border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,0.20),transparent 34%),radial-gradient(circle,rgba(132,219,252,0.30),rgba(244,114,230,0.10) 48%,transparent 72%);filter:blur(18px);opacity:0.9;box-shadow:18px 18px 36px rgba(0,0,0,0.32),-10px -10px 24px rgba(255,255,255,0.07);}
.album-wrapper{position:relative;z-index:1;width:var(--album-size);height:var(--album-size);border-radius:50%;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 30% 24%,rgba(255,255,255,0.26),transparent 28%),rgba(255,255,255,0.075);border:1px solid rgba(255,255,255,0.18);box-shadow:14px 18px 34px rgba(0,0,0,0.36),-8px -8px 20px rgba(255,255,255,0.075),0 0 42px rgba(132,219,252,0.18),inset 0 2px 3px rgba(255,255,255,0.30),inset 0 -10px 22px rgba(0,0,0,0.20);transition:transform 0.18s ease,box-shadow 0.18s ease;}
.album-wrapper:active{transform:scale(0.985);box-shadow:inset 6px 6px 16px rgba(0,0,0,0.34),inset -4px -4px 12px rgba(255,255,255,0.08),0 12px 28px rgba(0,0,0,0.28);}
.album-wrapper::after{content:"";position:absolute;inset:4%;z-index:4;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,0.30),transparent 22%),linear-gradient(135deg,rgba(255,255,255,0.50) 0%,rgba(255,255,255,0.16) 15%,transparent 34%,transparent 58%,rgba(255,255,255,0.10) 76%,rgba(255,255,255,0.28) 100%);box-shadow:inset 0 2px 3px rgba(255,255,255,0.42),inset 0 -18px 28px rgba(0,0,0,0.22),inset 0 0 18px rgba(255,255,255,0.08);transform:rotate(-18deg);}
@keyframes glassRingSpin{to{transform:rotate(360deg);}}
.ice-border,.album-img{position:absolute;inset:0;border-radius:50%;}
.ice-border{background:linear-gradient(135deg,transparent,rgba(255,255,255,0.42));opacity:0.18;pointer-events:none;}
.album-img{width:100%;height:100%;object-fit:cover;box-shadow:inset 3px 3px 8px rgba(0,0,0,0.22),0 8px 20px rgba(0,0,0,0.25);transition:opacity .4s ease,transform .4s ease;}
.album-img.changing{opacity:0;transform:scale(.94);}
.album-center-core{position:absolute;z-index:7;width:10%;height:10%;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,0.55),rgba(255,255,255,0.18) 25%,rgba(70,75,85,0.45));border:1px solid rgba(255,255,255,0.05);box-shadow:inset 0 1px 2px rgba(255,255,255,0.12),inset 0 -2px 4px rgba(0,0,0,0.22),0 2px 6px rgba(0,0,0,0.18);pointer-events:none;opacity:0.72;}
.album-center-core::before{content:"";position:absolute;inset:32%;border-radius:inherit;background:radial-gradient(circle,rgba(255,255,255,0.45),rgba(90,95,110,0.25) 50%,rgba(20,22,28,0.75));}
.rotate{animation:spin 8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.add-current-song-btn{position:absolute;z-index:8;top:2px;right:calc(50% - (var(--album-size) / 2) + 10px);width:clamp(28px,6.5vmin,32px);height:clamp(28px,6.5vmin,32px);border:1px solid var(--stroke);border-radius:50%;display:grid;place-items:center;color:#fff;opacity:70%;background:rgba(255,255,255,0.12);box-shadow:var(--neumo-shadow);cursor:pointer;transition:all 0.12s ease;}
.add-current-song-btn:active{transform:scale(0.95);box-shadow:var(--neumo-shadow-inset);}
.add-current-song-btn span{color:#fff;-webkit-text-fill-color:#fff;font-size:clamp(17px,4vmin,22px);margin-bottom:2px;line-height:1;}
.song-info-container{text-align:center;flex:0 0 auto;min-width:0;}
.song-title{font-size:clamp(0.92rem,3.4vw,1.14rem);font-weight:800;line-height:1.18;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.artist-name{font-size:clamp(0.68rem,2.4vw,0.82rem);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.progress-section{flex:0 0 auto;padding-top:5px;width:100%;}
.progress-bar{position:relative;width:100%;height:clamp(4px,0.9dvh,6px);margin-bottom:6px;border-radius:999px;background:rgba(255,255,255,0.13);cursor:pointer;}
.progress-filled{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5ba9c6,#88d0eb,#fff);}
.progress-handle{position:absolute;left:0%;top:50%;width:25px;height:12px;border-radius:5px;border:1px solid rgba(255,255,255,.4);transform:translate3d(-50%,-50%,0);opacity:1;background:linear-gradient(90deg,transparent 0,transparent 2px,rgba(0,0,0,.18) 2px,rgba(0,0,0,.18) 3px,transparent 3px,transparent 5px,rgba(0,0,0,.18) 5px,rgba(0,0,0,.18) 6px,transparent 6px,transparent 8px,rgba(0,0,0,.18) 8px,rgba(0,0,0,.18) 9px,transparent 9px) center center/11px 5px no-repeat,linear-gradient(180deg,#f5f7fa 0%,#d7dde5 45%,#aab4c0 100%);box-shadow:0 3px 8px rgba(0,0,0,.35),inset 1px 1px 2px rgba(255,255,255,.8),inset -1px -1px 2px rgba(0,0,0,.15);transition:none;will-change:left;}
.progress-bar:hover .progress-handle,.progress-bar:active .progress-handle{opacity:1;}
.time-info{display:flex;justify-content:space-between;font-size:clamp(0.58rem,2vw,0.72rem);color:var(--text-muted);}
.controls-wrapper{display:flex;align-items:center;justify-content:space-between;gap:0;width:100%;padding:0 var(--page-x);margin-bottom:15px;flex:0 0 auto;}
.ctrl-btn,.action-btn,.volume-knob-wrapper,.remove-from-playlist,.add-to-playlist-btn{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.05);box-shadow:var(--neumo-shadow);transition:all 0.12s ease;}
.remove-from-playlist{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.05);box-shadow:4px 6px 14px rgba(0,0,0,0.3),-5px -5px 14px rgba(255,255,255,0.1),inset 0 1px 0 rgba(255,255,255,0),inset 0 -1px 0 rgba(0,0,0,0.06);transition:all 0.12s ease;}
.load-more-library-btn{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.05);transition:all 0.12s ease;}
.recommend-card{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.05);}
.playlist-item,.playlist-item-song{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.05);transition:all 0.12s ease;}
.ctrl-btn:active,.action-btn:active,.recommend-card:active,.playlist-item-song:active,.add-to-playlist-btn:active,.remove-from-playlist:active,.load-more-library-btn:active,.playlist-item:active{transform:scale(0.97);box-shadow:var(--neumo-shadow-inset) !important;background:rgba(255,255,255,0.04) !important;}
.ctrl-btn:hover,.action-btn:hover,.recommend-card:hover{box-shadow:10px 12px 20px rgba(0,0,0,0.4),-5px -5px 12px rgba(255,255,255,0.1);background:rgba(255,255,255,0.1);}
.ctrl-btn{width:var(--ctrl-btn-size);height:var(--ctrl-btn-size);min-width:var(--ctrl-btn-size);min-height:var(--ctrl-btn-size);border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;}
.ctrl-btn svg{width:clamp(16px,43%,23px);height:clamp(16px,43%,23px);display:block;color:#e8edf5;stroke:currentColor;}
.play-pause{width:var(--play-pause-size) !important;height:var(--play-pause-size) !important;min-width:var(--play-pause-size) !important;min-height:var(--play-pause-size) !important;}
.play-pause svg{width:clamp(24px,46%,34px) !important;height:clamp(24px,46%,34px) !important;}
.play-pause.playing,#repeatBtn.repeat-active{background:rgba(255,255,255,0.05);box-shadow:var(--neumo-shadow-inset);}
.secondary-controls{display:flex;align-items:center;justify-content:space-between;gap:clamp(8px,2vw,16px);flex:0 0 auto;width:100%;margin-top:15px;padding-bottom:max(0px,var(--safe-bottom));}
.action-btn{flex:1 1 0;min-width:0;height:clamp(26px,5dvh,30px);border-radius:999px;padding:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--text-muted);font-size:clamp(0.58rem,2vw,0.72rem);font-weight:700;white-space:nowrap;cursor:pointer;}
.action-btn svg{width:clamp(12px,3vw,16px);height:clamp(12px,3vw,16px);stroke:#e8edf5;flex:0 0 auto;}
.volume-container,.volume-knob-wrapper{min-width:0;display:flex;align-items:center;justify-content:center;}
.volume-container{pointer-events:none;flex:1 1 0;min-width:0;}
.volume-knob-wrapper{pointer-events:auto;width:100%;height:clamp(26px,5dvh,30px);border-radius:999px;padding:0;gap:clamp(3px,0.8vw,6px);overflow:visible;}
.volume-mute{width:clamp(16px,3.5vw,24px);height:clamp(16px,3.5vw,24px);min-width:0;flex-shrink:0;border:0;border-radius:50%;display:grid;place-items:center;color:var(--text-muted);background:transparent;cursor:pointer;transition:transform 0.1s ease;}
.volume-mute:active{transform:scale(0.92);}
.volume-mute svg{width:clamp(11px,2.4vw,16px);height:clamp(11px,2.4vw,16px);margin-right:5px;}
.volume-knob{width:clamp(32px,6.5dvh,40px);height:clamp(32px,6.5dvh,40px);min-width:clamp(32px,6.5dvh,40px);flex-shrink:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:all 0.1s ease;}
.volume-knob-inner{width:calc(100% + 5px);height:calc(100% + 5px);border-radius:50%;outline:3px dashed rgba(59,59,59,0.25);outline-offset:-3px;display:grid;place-items:center;background: linear-gradient(180deg, rgb(150 150 150), rgb(185 185 185));box-shadow:inset 0 -2px 0 rgba(0,0,0,0.2),inset 0 2px 0 rgba(255,255,255,0.2);}
.volume-knob-indicator{position:relative;top:-5px;width:3px;height:clamp(10px,2.3dvh,18px);border-radius:2px;background:linear-gradient(180deg,#fff,#d8d8d8);box-shadow:0 0 3px rgba(196,196,196,0.5);}
.volume-level{width:clamp(18px,4vw,24px);min-width:0;margin-left:5px;flex-shrink:1;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(0.5rem,1.6vw,0.64rem);text-align:center;overflow:hidden;}
.recommended-section,.my-playlist-section{flex:0 0 var(--list-section-height);height:var(--list-section-height);min-height:var(--list-section-height);max-height:var(--list-section-height);padding:clamp(8px,1.4dvh,12px) var(--page-x) clamp(10px,1.8dvh,14px);overflow:hidden;}
.my-playlist-section[style*="block"]{display:flex !important;flex-direction:column;}
.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:clamp(22px,4dvh,30px);margin-bottom:clamp(3px,1.1dvh,6px);}
.section-header h3{display:inline-flex;align-items:center;gap:4px;font-size:clamp(0.72rem,2.5vw,0.88rem);line-height:1;font-weight:800;}
.see-all,.clear-playlist-btn{border:1px solid rgba(255,255,255,0.05);padding:2px 8px;color:var(--text-muted);font-size:clamp(0.58rem,2.1vw,0.6rem);font-weight:700;cursor: pointer;background: rgba(255,255,255,0.07);box-shadow: var(--neumo-shadow);border-radius: 999px;transition: all 0.12s ease;}
.see-all:active,.clear-playlist-btn:active{opacity:0.6;box-shadow:var(--neumo-shadow-inset);}
.clear-playlist-btn{border:1px solid rgba(255,255,255,0.05);border-radius:999px;padding:2px 8px;background:rgba(255,255,255,0.07);box-shadow:var(--neumo-shadow);transition:all 0.12s ease;}
.scroll-wrapper{position:relative;height:calc(100% - clamp(28px,5dvh,39px));min-height:0;display:flex;align-items:stretch;}
.horizontal-scroll{width:100%;height:100%;min-height:0;display:flex;align-items:stretch;gap:clamp(8px,2vw,12px);overflow-x:auto;overflow-y:hidden;padding:2px clamp(28px,7vw,40px) 4px;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scroll-padding-inline:32px;}
.horizontal-scroll::-webkit-scrollbar,.my-playlist-container::-webkit-scrollbar,.playlist-items::-webkit-scrollbar{display:none;}
.horizontal-scroll:active{cursor:grabbing;}
.scroll-btn{position:absolute;top:50%;z-index:10;width:clamp(28px,6.5vw,36px);height:clamp(28px,6.5vw,36px);border:1px solid rgba(255,255,255,0.2);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,0.3);color:#fff;box-shadow:var(--neumo-shadow);transform:translateY(-50%);opacity:0.7;cursor:pointer;transition:all 0.12s ease;}
.scroll-btn:active{transform:translateY(-50%) scale(0.94);background:rgba(255,255,255,0.05);box-shadow:var(--neumo-shadow-inset);}
.scroll-left{left: -15px;}
.scroll-right{right: -15px;}
.scroll-btn svg{width:54%;height:54%;fill:none;}
.recommend-card{position:relative;flex:0 0 var(--recommend-card);width:var(--recommend-card);min-width:var(--recommend-card);height:auto;min-height:0;align-self:flex-start;border-radius:clamp(14px,3vw,18px);padding:clamp(6px,1.4vw,8px);display:flex;flex-direction:column;text-align:center;cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease;}
.recommend-card:hover{transform:translateY(-5px);box-shadow:none;}
.recommend-card-img{width:100%;aspect-ratio:1;min-height:0;margin-bottom:5px;object-fit:cover;border-radius:clamp(9px,2.4vw,12px);box-shadow:0 7px 16px rgba(0,0,0,0.22);}
.recommend-card-title{color:#fff;font-size:clamp(0.56rem,2vw,0.68rem);font-weight:800;line-height:1.18;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;}
.recommend-card-artist{color:var(--text-muted);font-size:clamp(0.46rem,1.7vw,0.56rem);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.add-to-playlist-btn{margin-top:5px;min-height:22px;border-radius:999px;padding:3px 6px;display:inline-flex;align-items:center;justify-content:center;gap:4px;color:#fff;font-size:clamp(0.48rem,1.7vw,0.58rem);font-weight:800;cursor:pointer;}
.add-to-playlist-btn svg{width:11px;height:11px;flex:0 0 auto;}
.my-playlist-container{height:calc(100% - clamp(28px,5dvh,39px) - clamp(10px,1.8dvh,14px));min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:clamp(5px,1.2dvh,6px);padding:2px 2px 0 2px;margin-bottom:clamp(10px,1.8dvh,14px);scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-y;}
.playlist-item,.playlist-item-song{width:100%;min-height:clamp(48px,8.5dvh,64px);border-radius:clamp(12px,3vw,16px);padding:clamp(6px,1.3dvh,9px);display:flex;align-items:center;gap:clamp(7px,2vw,10px);cursor:pointer;}
.playlist-item:active,.playlist-item-song:active{transform:scale(0.98);}
.playlist-item-info{flex:1 1 auto;min-width:0;}
.playlist-item-img{width:clamp(40px,9dvh,52px);height:clamp(40px,9dvh,52px);min-width:clamp(40px,9dvh,52px);border-radius:10px;object-fit:cover;box-shadow:0 7px 14px rgba(0,0,0,0.22);}
.playlist-item-title{color:#fff;font-size:clamp(0.72rem,2.5vw,0.9rem);line-height:1.2;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.playlist-item-artist{color:var(--text-muted);font-size:clamp(0.55rem,2vw,0.68rem);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.remove-from-playlist{flex:0 0 auto;border:1px solid rgba(255,255,255,0.1);border-radius:999px;padding:3px 6px;color:#fff;background:rgba(255,0,0,0.2);font-size:clamp(0.45rem,1.9vw,0.5rem);font-weight:800;cursor:pointer;}
.empty-playlist-msg{min-height: calc(100% - 5px);display:grid;place-items:center;align-content:center;gap:4px;text-align:center;background:rgba(255,255,255,0.06);color:var(--text-muted);padding:10px;border-radius:20px;}
.empty-playlist-msg span{font-size:clamp(1.3rem,5vw,2rem);}
.empty-playlist-msg p{color:#fff;font-weight:800;font-size:clamp(0.75rem,2.5vw,0.9rem);}
.empty-playlist-msg small{font-size:clamp(0.55rem,2vw,0.68rem);}
.playlist-modal{display:none;position:fixed;inset:0;z-index:1000;align-items:flex-end;justify-content:center;background:rgba(0,0,0,0.2);backdrop-filter:blur(18px);-webkit-backdrop-filter: blur(18px);}
.modal-content{width:min(100%,560px);max-height:calc(70dvh - max(20px,var(--safe-top)));padding:clamp(14px,3dvh,20px);padding-bottom:max(10px,calc(var(--safe-bottom) + 10px));border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-top:1px solid rgba(245,245,245,0.42);background:linear-gradient(150deg,rgb(102 167 205 / 72%),rgb(54 93 132 / 84%) 48%,rgb(8 32 49 / 92%));box-shadow:0 -18px 38px rgba(0,0,0,0.3);overflow:hidden;animation:slideUp 0.26s ease;display:flex;flex-direction:column;}
@keyframes slideUp{from{transform:translateY(100%);}}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.modal-header h3{font-size:clamp(1rem,4vw,1.22rem);font-weight:800;}
.close-modal{border:0;background:transparent;color:var(--text-muted);font-size:clamp(24px,6vw,32px);cursor:pointer;transition:transform 0.1s ease;}
.close-modal:active{transform:scale(0.9);}
.search-box{margin-bottom:12px;}
.search-box input{width:100%;border:1px solid rgba(136,208,235,0.72);border-radius:999px;background:rgba(255,255,255,0.01);color:#fff;padding:10px 16px;outline:none;font-size:clamp(0.75rem,2.5vw,0.88rem);box-shadow:inset 3px 3px 8px rgba(0,0,0,0.2),inset -1px -1px 3px rgba(255,255,255,0.05);}
.search-box input::placeholder{color:rgba(255,255,255,0.72);}
.playlist-items{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;padding-bottom:max(5px,calc(var(--safe-bottom) + 5px)) !important;gap:8px;scrollbar-width:none;}
#loadMoreLibraryBtn,.load-more-library-btn{display:flex !important;align-items:center;justify-content:center;flex-shrink:0;min-height:38px;margin-top:8px;margin-bottom:8px;}
.load-more-library-btn{width:100%;min-height:38px;border-radius:999px;color:#fff;font-weight:800;cursor:pointer;}
.toast-msg{position:fixed;left:50%;bottom:max(18px,var(--safe-bottom));z-index:2000;max-width:min(92vw,420px);padding:8px 14px;border-radius:999px;background:rgba(10,15,26,0.78);color:#fff;border:1px solid rgba(255,255,255,0.16);box-shadow:0 10px 24px rgba(0,0,0,0.28);font-size:0.78rem;text-align:center;transform:translateX(-50%);}
.horizontal-scroll,#myPlaylistContainer{min-height: clamp(160px, 6dvh, 200px);padding-bottom:0;}
.ctrl-btn:active,.ctrl-btn.active,.ctrl-btn.playing,.play-pause:active,.play-pause.active,.play-pause.playing,.action-btn:active,.action-btn.active,.add-to-playlist-btn:active,.add-to-playlist-btn.active,.see-all:active,.see-all.active,.close-modal:active,.close-modal.active,.remove-from-playlist:active,.remove-from-playlist.active,.volume-mute:active,.volume-mute.active,.add-current-song-btn:active,.add-current-song-btn.active{background:rgba(255,255,255,0.05)!important;box-shadow:var(--neumo-shadow-inset) !important;transform:scale(.97);}
button.active,.tab.active .scroll-btn:active,.scroll-btn.active{transform:scale(.97);}
.recommended-section,.my-playlist-section{min-height:260px;padding-bottom:0;}
.horizontal-scroll{gap:var(--recommend-gap);align-items:flex-start !important;padding:2px 2px 0 2px !important;scroll-padding-inline:2px;}
.recommend-card{flex:0 0 calc((100% - (var(--recommend-gap) * 3)) / 4);min-width:calc((100% - (var(--recommend-gap) * 3)) / 4);max-width:calc((100% - (var(--recommend-gap) * 3)) / 4);padding:5px;margin-bottom:0 !important;align-self:flex-start;}
.recommend-card-title{font-size:clamp(0.6rem,2vw,0.72rem);line-height:1.15;margin-bottom:5px;}
.recommend-card-artist{font-size:clamp(0.5rem,1.7vw,0.6rem);line-height:1.1;margin-bottom: 5px;}
.recommend-card .add-to-playlist-btn{position:relative;width:calc(100% + 10px);margin:auto -5px -5px -5px !important;padding:6px 2px !important;min-height:15px !important;border-radius:0 0 clamp(14px,3vw,18px) clamp(14px,3vw,18px) !important;background:rgba(255,255,255,0.045) !important;border:0 !important;border-top:1px solid rgba(255,255,255,0.08) !important;box-shadow:none !important;color:rgba(255,255,255,0.82);font-size:8px !important;font-weight:800;line-height:1 !important;gap:3px !important;}
.recommend-card .add-to-playlist-btn svg{width:9px !important;height:9px !important;flex-shrink:0;}
.playlist-modal .playlist-items .playlist-item .add-to-playlist-btn,
.playlist-modal .playlist-items .playlist-item-song .add-to-playlist-btn{position:absolute !important;top:0 !important;right:0 !important;bottom:0 !important;width:125px !important;height:100% !important;margin:0 !important;justify-content:flex-end !important;padding-right:10px !important;border-radius:0 12px 12px 0 !important;background:transparent !important;background-color:transparent !important;border:0 !important;box-shadow:none !important;overflow:hidden !important;}
.playlist-modal .playlist-items .playlist-item, .playlist-modal .playlist-items .playlist-item-song{position: relative !important;overflow: hidden !important;}
.playlist-modal .playlist-items .playlist-item .add-to-playlist-btn::before,
.playlist-modal .playlist-items .playlist-item-song .add-to-playlist-btn::before{content:"";position:absolute;top:0;right:-20px;bottom:0;width:125px;background:rgba(255,255,255,.03);transform:translateX(5px) skewX(-35deg);pointer-events:none;z-index:0;transition:background .2s ease;}
.playlist-modal .playlist-items .add-to-playlist-btn > *{position:relative;z-index:1;}
.playlist-modal .playlist-items .add-to-playlist-btn:hover::before{background:rgba(255,255,255,.10);}
.playlist-modal .playlist-items .add-to-playlist-btn:active::before{background:rgba(255,255,255,.10);}
.lang-filters{display:flex;align-items:center;gap:5px;}
.lang-filter{border:1px solid rgba(255,255,255,.05);width:28px;height:28px;border-radius:999px;background:rgba(255,255,255,.07);color:#fff;font-size:clamp(.5rem, 1.8vw, .6rem);font-weight:800;}
.lang-filter.active{background:rgba(255,255,255,.05);box-shadow:var(--neumo-shadow-inset);transform: none;}
@media screen and (min-width:768px) and (max-width:1024px){
:root{--album-size:260px;--album-glow:320px;--list-section-height:340px;}
.app-container{width:min(95vw,600px);height:95dvh;max-height:95dvh;margin:auto;border-radius:32px;}
.player-main{flex:0 0 auto !important;justify-content:flex-start !important;padding-top:30px !important;padding-bottom:10px !important;gap:10px !important;}
.song-info-container{min-height:90px;display:flex;flex-direction:column;justify-content:center;}
.recommended-section,.my-playlist-section{flex:1 1 auto !important;height:auto !important;min-height:260px !important;max-height:none !important;}
.recommend-card .add-to-playlist-btn{font-size:13px !important;gap:3px !important;padding:6px 2px !important;margin:auto -5px -5px -5px !important;line-height:1 !important;min-height:28px !important;border-radius:0 0 15px 15px !important;}
.scroll-wrapper,.horizontal-scroll{height:100% !important;}
.scroll-btn{top:42%;}
.add-current-song-btn{right:calc(50% - (var(--album-size) / 2) + 25px);}
.controls-wrapper{margin-bottom:20px;}
.horizontal-scroll{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding:2px 34px 6px;}
.recommend-card{flex:0 0 calc((100% - 32px) / 3);width:calc((100% - 32px) / 3);min-width:calc((100% - 32px) / 3);height:clamp(120px,21dvh,250px);max-height:none;padding:5px;display:flex;flex-direction:column;justify-content:space-between;}
.recommend-card-img{width:100%;height:165px;max-height:165px;aspect-ratio:auto;object-fit:cover;}
.recommend-card-title{font-size:0.82rem;}
.recommend-card-artist{font-size:0.68rem;}
.add-to-playlist-btn{margin-top:6px;min-height:32px;font-size:0.68rem;}
}
@media (min-width:900px){
.recommend-card{flex-basis:calc((100% - (var(--recommend-gap) * 2)) / 3);min-width:calc((100% - (var(--recommend-gap) * 2)) / 3);max-width:calc((100% - (var(--recommend-gap) * 2)) / 3);}
.horizontal-scroll{align-items:flex-start !important;}
}
@media (min-width:769px){
.horizontal-scroll{align-items:flex-start !important;}
.recommended-section,.my-playlist-section{height:auto !important;max-height:none !important;}
.empty-playlist-msg{min-height:100%}
}
@media (max-width:768px){
.horizontal-scroll{gap:10px;}
.recommend-card{flex:0 0 calc((100% - 20px) / 3) !important;min-width:calc((100% - 20px) / 3) !important;max-width:calc((100% - 20px) / 3) !important;height:auto !important;align-self:flex-start !important;}
.recommended-section,.my-playlist-section{--list-section-height:clamp(210px,28dvh,250px);min-height:clamp(210px,28dvh,250px);height:clamp(210px,28dvh,250px);max-height:clamp(210px,28dvh,250px);}
.player-main{justify-content:flex-start !important;}
.recommend-card-title, .recommend-card-artist{margin-bottom:3px;}
.empty-playlist-msg{min-height:100%}
}
@media (max-height:740px){
:root{--header-height:clamp(66px,11dvh,88px);--list-section-height:clamp(195px,26dvh,215px);--album-size:clamp(110px,20dvh,140px) !important;--recommend-card:clamp(90px,18vw,112px);--ctrl-btn-size:clamp(34px,7.8vmin,44px);--play-pause-size:clamp(48px,10vmin,60px);}
.player-main{gap:clamp(6px,1.15dvh,10px);padding-top:5px;padding-bottom:6px;}
.controls-wrapper{padding:5px 0 5px 0;margin-bottom:0;}
}
@media (max-height:620px){
:root{--header-height:62px;--list-section-height:clamp(175px,28dvh,200px);--album-size:clamp(82px,min(22dvh,34vw),128px);--recommend-card:clamp(84px,17vw,100px);--ctrl-btn-size:32px;--play-pause-size:44px;--ctrl-gap:clamp(7px,2.6vw,14px);}
.logo-img{height:22px;}
.tab{padding:5px 2px;font-size:0.62rem;}
.song-title{font-size:0.78rem;}
.artist-name{font-size:0.58rem;}
.secondary-controls{gap:12px;}
.action-btn span{display:none;}
.section-header{min-height:20px;margin-bottom:4px;}
.recommend-card-img{max-height:calc(100% - 36px);}
.add-to-playlist-btn span{display:none !important;}
}
@media (orientation:landscape) and (max-height:520px){
:root{--header-height:54px;--list-section-height:clamp(160px,26dvh,185px);--album-size:clamp(72px,28dvh,118px);--recommend-card:clamp(86px,12vw,104px);--ctrl-btn-size:clamp(30px,8dvh,38px);--play-pause-size:clamp(42px,11dvh,52px);}
.app-container{width:min(100vw,760px);max-height:none;border-radius:0;}
.main-header{padding-top:max(2px,var(--safe-top));}
.player-main{display:grid;grid-template-columns:auto minmax(120px,1fr) minmax(220px,1.4fr);grid-template-areas:"art info controls" "art progress secondary";align-items:center;gap:8px 16px;}
.album-art-container{grid-area:art;}
.song-info-container{grid-area:info;text-align:left;}
.progress-section{grid-area:progress;}
.controls-wrapper{grid-area:controls;}
.secondary-controls{grid-area:secondary;padding-bottom:0;}
.recommend-card-img{max-height:calc(100% - 34px);}
}
@media (min-width:768px) and (min-height:700px){
:root{--list-section-height:clamp(230px,27dvh,252px);--album-size:clamp(180px,min(27dvh,260px),260px);--recommend-card:clamp(108px,13vw,132px);}
.app-container{border-radius:32px;height:min(94dvh,920px);}
}
@media (max-width:320px),(max-width:374px) and (max-height:580px){
:root{
  --page-x:10px;
  --header-height:52px;
  --list-section-height:clamp(155px,27dvh,180px);
  --album-size:clamp(80px,19dvh,100px) !important;
  --recommend-card:clamp(76px,22vw,90px);
  --ctrl-btn-size:26px !important;
  --play-pause-size:36px !important;
  --ctrl-gap:clamp(6px,2.5vw,10px);
}
.player-main{gap:clamp(4px,0.9dvh,7px);padding-top:4px;padding-bottom:4px;}
.progress-section{padding-top:0px;}
.controls-wrapper{padding:0 2px;margin-bottom:0px;}
.ctrl-btn svg{width:13px;height:13px;}
.play-pause svg{width:18px !important;height:18px !important;}
.secondary-controls{gap:5px;margin-top:6px;margin-bottom:10px;}
.action-btn{font-size:0.48rem;padding:0 4px;gap:2px;height:22px;}
.action-btn span{display:none;}
.volume-level{font-size:0.44rem;min-width:14px;}
.volume-knob{width:20px;height:20px;min-width:20px;}
.volume-knob-wrapper{height:22px;}
.song-title{font-size:0.76rem;}
.artist-name{font-size:0.56rem;}
.tab{padding:4px 2px;font-size:0.58rem;}
.logo-img{height:20px;}
.recommended-section,.my-playlist-section{min-height:155px;padding-top:50px;}
.section-header{min-height:18px;margin-bottom:3px;}
.album-wrapper{width:var(--album-size) !important;height:var(--album-size) !important;}
.album-art-container{min-height:calc(var(--album-size) + 4px) !important;}
.empty-playlist-msg{min-height:80%;}
.add-current-song-btn{top:0px;right:calc(50% - (var(--album-size) / 2) + 4px);width:clamp(18px, 6.5vmin, 32px);height:clamp(18px, 6.5vmin, 32px);}
}
@media (max-width:375px) and (min-height:750px) and (max-height:820px){
:root{
  --page-x:12px;
  --header-height:54px;
  --list-section-height:clamp(190px,24dvh,215px);
  --album-size:clamp(90px,17dvh,110px) !important;
  --recommend-card:clamp(84px,20vw,100px);
  --ctrl-btn-size:30px !important;
  --play-pause-size:44px !important;
  --ctrl-gap:clamp(8px,2.5vw,14px);
}
.player-main{gap:clamp(5px,1dvh,9px);padding-top:4px;padding-bottom:4px;}
.controls-wrapper{padding:0 4px;}
.ctrl-btn svg{width:14px;height:14px;}
.play-pause svg{width:20px !important;height:20px !important;}
.secondary-controls{gap:6px;margin-top:8px;}
.action-btn{font-size:0.5rem;padding:0 5px;height:24px;}
.volume-level{min-width:16px;font-size:0.46rem;}
.volume-knob{width:28px;height:28px;min-width:28px;}
.volume-knob-wrapper{height:24px;}
.recommended-section,.my-playlist-section{min-height:190px;}
.album-wrapper{width:var(--album-size) !important;height:var(--album-size) !important;}
.album-art-container{min-height:calc(var(--album-size) + 4px) !important;}
}
@media (max-width:374px) and (min-height:581px){
:root{--page-x:10px;--album-size:clamp(100px,20dvh,125px) !important;--recommend-card:clamp(80px,20vw,96px);--ctrl-gap:clamp(8px,2.6vw,14px);--ctrl-btn-size:clamp(32px,8vmin,38px);--play-pause-size:clamp(46px,10vmin,54px);}
.remove-from-playlist{padding:5px 7px;}
.controls-wrapper{padding:5px 0 5px 0;margin-bottom:0;}
.secondary-controls{gap:8px;}
.action-btn{font-size:0.52rem;padding:0 6px;gap:4px;}
.volume-level{font-size:0.48rem;min-width:18px;}
}
@media (max-width:390px) and (min-height:820px) and (max-height:920px){
:root{
  --page-x:12px;
  --header-height:54px;
  --list-section-height:clamp(195px,22dvh,220px);
  --album-size:clamp(100px,20dvh,125px) !important;
  --recommend-card:clamp(82px,19vw,98px);
  --ctrl-btn-size:clamp(32px,7.5vmin,38px) !important;
  --play-pause-size:clamp(46px,10vmin,54px) !important;
  --ctrl-gap:clamp(8px,2.5vw,14px);
}
.player-main{gap:clamp(6px,1dvh,10px);padding-top:4px;padding-bottom:4px;}
.controls-wrapper{padding:0 4px;}
.secondary-controls{gap:8px;margin-top:10px;}
.action-btn{font-size:0.52rem;padding:0 6px;}
}