:root{color-scheme:dark;--bg:#090b12;--panel:#10131d;--panel-2:#141824;--line:rgba(255,255,255,.075);--text:#f8f8fc;--muted:#858899;--accent:#a9ecdd;--accent-rgb:169,236,221;--sidebar:252px;--player:94px;font-family:'Cairo',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:'Cairo',sans-serif;font-size:14px;overflow-x:hidden}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}svg:not(.icons){width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icons{position:absolute;overflow:hidden;width:0;height:0}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}::selection{background:rgba(169,236,221,.3)}
.app{min-height:100vh}.sidebar{position:fixed;right:0;top:0;bottom:var(--player);width:var(--sidebar);background:#0d0f18;border-left:1px solid var(--line);display:flex;flex-direction:column;z-index:12;padding:27px 15px 0;transition:transform .3s ease}.brand{display:flex;align-items:center;gap:11px;margin:0 15px 33px;direction:ltr;justify-content:flex-end}.brand-icon{display:grid;place-items:center;width:43px;height:43px;background:linear-gradient(145deg,#b1f7e4,#8d83fe);box-shadow:0 0 28px #93e6d738;border-radius:14px;color:#0b1016}.brand-wave{font-family:'Outfit',sans-serif;font-size:38px;line-height:1;transform:rotate(90deg)}.brand-type{display:flex;flex-direction:column;align-items:flex-end}.brand-type strong{font-family:'Outfit',sans-serif;font-size:27px;letter-spacing:3px;line-height:1.05}.brand-dot{color:#a9ecdd}.brand-type small{font-family:'Outfit';color:#737786;letter-spacing:1.25px;font-size:8px;font-weight:700}.side-scroll{overflow:auto;padding:0 1px}.side-label{padding:0 19px 12px;color:#74798d;font-size:11px;font-weight:800;letter-spacing:1px}.side-label-categories{padding-top:28px}.side-nav,.category-nav{display:grid;gap:5px}.nav-item,.cat-nav{background:transparent;border:1px solid transparent;border-radius:12px;color:#969aab;text-align:right;display:flex;align-items:center;gap:15px;padding:11px 15px;font-weight:700;font-size:12px;width:100%;transition:.2s}.nav-item svg{width:18px;height:18px}.nav-item:hover,.cat-nav:hover{color:#fff;background:#ffffff08}.nav-item.active{color:#c5ffee;background:linear-gradient(100deg,#a8f3dd15,#8e85f514);border-color:#a9ecdd20}.nav-item.active svg{color:#a9ecdd}.nav-pip{display:none;margin-right:auto;width:4px;height:15px;border-radius:4px;background:#a9ecdd;box-shadow:0 0 12px #a9ecdd}.nav-item.active .nav-pip{display:block}.cat-nav{gap:11px;font-family:'Outfit','Cairo',sans-serif;letter-spacing:.35px;font-size:12px;padding-block:10px}.cat-nav.active{color:#fff;background:#ffffff0d;border-color:#ffffff16}.cat-nav-icon{display:grid;place-items:center;min-width:27px;height:27px;border-radius:8px;background:color-mix(in srgb,var(--chip),transparent 88%);color:var(--chip);font-size:18px}.side-bottom{margin-top:auto;padding-top:10px}.storage-card{position:relative;overflow:hidden;border-radius:16px;background:linear-gradient(135deg,#26263c,#131a24);border:1px solid #ffffff0e;padding:18px 17px 16px;margin-bottom:15px}.storage-card:after{content:'';position:absolute;left:-40px;top:-45px;width:110px;height:110px;background:#a1f0d020;filter:blur(35px)}.storage-card strong{display:block;font-size:13px}.storage-card p{font-size:10.4px;color:#b1b3c4;line-height:1.8;margin:7px 0 13px}.storage-orb{color:#b8f0e3;float:left;font-size:25px}.micro-wave{font-family:'Outfit';color:#b0f5df;font-size:16px;letter-spacing:6px;white-space:nowrap}.side-footer{display:flex;gap:8px;align-items:center;color:#767c8d;border-top:1px solid var(--line);font-size:10.5px;min-height:47px;padding:0 10px}.online-dot{height:7px;width:7px;border-radius:50%;background:#adadad;box-shadow:0 0 9px #aaaaaa55}.online-dot.live{background:#83d1a5;box-shadow:0 0 9px #83d1a599}.main-frame{margin-right:var(--sidebar);min-width:0;padding-bottom:calc(var(--player) + 4px)}.topbar{height:118px;padding:30px 45px 15px;display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow{display:block;color:#9196a7;font-size:11px;font-weight:700}.sparkle{color:#b8f8e6;font-size:14px;margin-inline:4px}.topbar h1{font-size:24px;line-height:1.65;margin:1px 0 0;font-weight:800;letter-spacing:-.7px}.gradient-text{background:linear-gradient(125deg,#b5ffde,#c7a1ff);color:transparent;background-clip:text}.top-actions{display:flex;align-items:center;gap:10px}.search-box{display:flex;align-items:center;gap:9px;border:1px solid #ffffff0d;background:#151823;border-radius:13px;padding:0 13px;height:43px;width:265px;color:#9295a5}.search-box svg{width:17px;height:17px}.search-box input{min-width:0;flex:1;border:0;outline:none;background:transparent;color:#fff;font-size:11px}.search-box input::placeholder{color:#6d7283}.search-box kbd{font-family:'Outfit';font-size:11px;color:#777b8b;background:#ffffff0c;border:1px solid #ffffff0c;padding:0 6px;border-radius:5px}.upload-top,.btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;color:#071414;border:0;border-radius:11px;background:linear-gradient(110deg,#b5f2d8,#9be5e0);font-weight:900;box-shadow:0 6px 28px #a9ecdd18;transition:transform .2s,filter .2s}.upload-top{height:43px;padding:0 17px;white-space:nowrap;font-size:11px}.upload-top:hover,.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06)}.upload-top svg{width:17px;height:17px}.profile-btn,.icon-btn{display:grid;place-items:center;background:transparent;color:#b4b8c7;border:1px solid var(--line);border-radius:12px;flex-shrink:0}.profile-btn{position:relative;width:43px;height:43px;background:#151823}.profile-btn svg{width:18px;height:18px}.profile-btn span{position:absolute;bottom:5px;left:5px;width:8px;height:8px;border:2px solid #151823;border-radius:50%;background:#777}.profile-btn span.authed{background:#9de8ca}.mobile-menu{display:none}.content{padding:0 45px;max-width:1600px;margin:auto}.hero{position:relative;overflow:hidden;display:flex;min-height:328px;border-radius:22px;background:radial-gradient(ellipse at 78% 40%,#6051aa55,transparent 43%),radial-gradient(ellipse at 92% 100%,#4cb3a648,transparent 35%),linear-gradient(110deg,#1b2033 5%,#1c2336 51%,#151827 100%);border:1px solid #ffffff13;isolation:isolate}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 45%,#0d122944 100%);z-index:-1}.hero-noise{position:absolute;inset:0;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}.hero-copy{padding:36px 45px 34px;position:relative;z-index:2;width:58%;min-width:410px}.hero-tag{border:1px solid #b2edd63b;background:#aeefd617;color:#bdeee1;border-radius:30px;padding:3px 12px;font-family:'Outfit';font-size:9px;font-weight:700;letter-spacing:1.5px;direction:ltr;display:inline-flex;align-items:center;gap:7px}.tiny-star{font-size:13px}.hero-copy h2{font-size:49px;line-height:1.21;letter-spacing:-2px;font-weight:900;margin:15px 0 12px}.hero-copy h2 em{font-style:normal;color:#abefd8;text-shadow:0 0 30px #a8f7dc38}.hero-copy p{color:#c3c5d4;max-width:400px;line-height:1.9;font-size:12px;margin:0 0 23px}.hero-buttons{display:flex;gap:12px;align-items:center}.btn-primary,.btn-secondary{min-height:41px;padding:0 21px;font-size:11.5px}.btn-primary svg,.btn-secondary svg{width:17px;height:17px}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #ffffff28;border-radius:11px;background:#ffffff09;color:#e7e9f1;font-weight:800;transition:background .2s}.btn-secondary:hover{background:#ffffff19}.hero-art{position:absolute;left:3%;top:-22px;bottom:-10px;width:49%;pointer-events:none}.art-ring{position:absolute;border:1px solid #b4a4ff24;border-radius:50%;left:12%;top:0;width:360px;height:360px}.ring-two{left:18%;top:30px;width:300px;height:300px;border-color:#94fae12b}.art-disc{position:absolute;left:23%;top:37px;width:276px;height:276px;border-radius:50%;background:radial-gradient(circle at 46% 44%,#0c111b 0 7%,#8983b2 7.4% 8%,#221c37 8.5% 14%,#0c1019 14% 21%,#30254a 22%,#151722 29%,#0f131e 31%,#2e2447 33%,#111623 55%,#131825 70%);box-shadow:0 0 0 1px #ffffff36,0 20px 100px #1d2638,0 0 100px #9df0cc3b;animation:rotate 22s linear infinite;display:grid;place-items:center}.art-disc:before{content:'';position:absolute;inset:11px;border:1px solid #ddd8fa18;border-radius:50%;box-shadow:0 0 0 16px #c0b7ed08,0 0 0 25px #c0b7ed08,0 0 0 42px #c0b7ed08,0 0 0 56px #c0b7ed08}.vinyl-grooves{position:absolute;inset:55px;border-radius:50%;border:1px solid #a9cce03b;box-shadow:0 0 0 11px #b1c3fc0e,0 0 0 17px #bbc8ef16,0 0 0 24px #bbc8ef0b,0 0 0 35px #bbc8ef08}.vinyl-core{position:relative;z-index:1;display:grid;place-items:center;width:81px;height:81px;border-radius:50%;background:linear-gradient(135deg,#abf7d5,#8b83e4);color:#10252f;font-family:'Outfit';font-size:41px;font-weight:900;box-shadow:0 0 35px #b5edd763}.art-bars{position:absolute;z-index:2;left:5%;bottom:48px;display:flex;gap:5px;align-items:center;transform:rotate(180deg);opacity:.75}.art-bars i{height:var(--h,25px);width:4px;background:#a4f1d9;border-radius:4px;box-shadow:0 0 10px #a9f6d8;animation:bounce 1s ease-in-out infinite alternate}.art-bars i:nth-child(2n){--h:36px;animation-delay:.2s}.art-bars i:nth-child(3n){--h:14px;animation-delay:.5s}.art-bars i:nth-child(4n){--h:42px;animation-delay:.7s}.art-note{position:absolute;color:#d8c2ff;font-size:29px;text-shadow:0 0 22px #d8c2ffad}.art-note-a{top:39px;left:15%}.art-note-b{right:3%;bottom:53px}.hero-edge{position:absolute;left:17px;bottom:14px;font-family:'Outfit';font-size:8px;letter-spacing:2px;color:#c8d4dd88;direction:ltr}.hero-edge span{color:#a9f4dc;padding:0 6px}.status-note{margin-top:21px;padding:12px 16px;border:1px solid #e4d5a12d;background:#e4d5a110;color:#d9cfb0;border-radius:12px;font-size:11.5px;display:flex;gap:15px;align-items:center;justify-content:space-between}.status-note button{background:#f1dda9;color:#332c1b;border:0;border-radius:8px;padding:5px 12px;font-weight:800;white-space:nowrap}.section{margin-top:37px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:18px}.section-kicker{display:block;color:#9ccabf;font-family:'Outfit';font-size:9px;font-weight:800;letter-spacing:2.1px}.section-heading h2{margin:1px 0 0;font-weight:900;font-size:23px;letter-spacing:-.5px}.section-heading h2 span{color:var(--accent)}.section-meta{font-size:11px;color:#838999;display:flex;align-items:center;gap:8px}.star{color:#a2e9d6;font-size:16px}.mood-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.mood-card{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;text-align:right;min-width:0;overflow:hidden;border:1px solid #ffffff14;border-radius:17px;height:180px;padding:0;color:#fff;isolation:isolate;transition:transform .24s,border-color .24s,box-shadow .24s}.mood-card:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,#00000012 100%);z-index:-1}.mood-card:hover{transform:translateY(-5px);border-color:var(--m-glow);box-shadow:0 10px 34px var(--m-shadow)}.mood-card.selected{outline:2px solid var(--m-glow)}.mood-gym{--m-glow:#fa4057;--m-shadow:#ce183124;background:radial-gradient(circle at 28% 38%,#c71b365f,transparent 48%),linear-gradient(140deg,#201015,#100d12 75%)}.mood-sad{--m-glow:#f6dc82;--m-shadow:#f4de7e18;background:radial-gradient(circle at 23% 30%,#dcc46b36,transparent 40%),linear-gradient(140deg,#20345d,#111f40)}.mood-quran{--m-glow:#dabe67;--m-shadow:#d9b66b1c;background:radial-gradient(circle at 24% 24%,#9fa94e60,transparent 44%),linear-gradient(140deg,#3f4b29,#202b1d)}.mood-happy{--m-glow:#f7cbd2;--m-shadow:#d46e9b30;background:radial-gradient(circle at 25% 25%,#f4b3c04c,transparent 55%),linear-gradient(140deg,#753c4b,#4e2737)}.mood-rap{--m-glow:#8acebd;--m-shadow:#69b3a02b;background:radial-gradient(circle at 25% 30%,#659d8766,transparent 50%),linear-gradient(140deg,#20292a,#111618)}.mood-podcast{--m-glow:#efddc2;--m-shadow:#d1ac8221;background:radial-gradient(circle at 25% 30%,#a2755166,transparent 50%),linear-gradient(140deg,#473526,#17243b)}.mood-art{position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none}.mood-art:before{content:'';position:absolute;width:175px;height:175px;border:1px solid color-mix(in srgb,var(--m-glow),transparent 74%);border-radius:50%;left:-23px;top:-68px;box-shadow:0 0 0 19px color-mix(in srgb,var(--m-glow),transparent 94%),0 0 0 38px color-mix(in srgb,var(--m-glow),transparent 96%);transform:rotate(-25deg)}.mood-art-symbol{position:absolute;left:27px;top:0;font-family:Georgia,serif;font-size:117px;line-height:1;color:var(--m-glow);opacity:.35;transform:rotate(-10deg);text-shadow:0 0 44px var(--m-glow)}.mood-art-symbol.arabic-symbol{font-size:66px;left:14px;top:31px;transform:none}.mood-art-ghost{position:absolute;top:15px;right:17px;font-family:'Outfit';font-size:11px;color:#ffffff68;letter-spacing:2px}.mood-info{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:22px 18px 13px;background:linear-gradient(0deg,#0505097a,transparent 73%)}.mood-small{font-family:'Outfit';font-size:8px;letter-spacing:2px;color:var(--m-glow);font-weight:700}.mood-info strong{font-family:'Outfit','Cairo';font-size:23px;line-height:1.5;font-weight:800;letter-spacing:.3px}.mood-info strong span{color:var(--m-glow)}.mood-bottom{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#fffafaad;font-weight:700;line-height:1.6}.mood-bottom span{font-size:19px;color:var(--m-glow);line-height:1}.library-section{margin-top:37px}.library-actions{display:flex;align-items:center;gap:11px}.track-count{color:#8f93a3;font-size:10.5px}.tiny-button{border:1px solid var(--line);background:#171a25;color:#b8bfca;border-radius:9px;display:inline-flex;align-items:center;gap:4px;padding:7px 12px;font-size:11px}.tiny-button:hover{color:#fff}.filter-row{display:flex;gap:8px;overflow:auto;padding-bottom:12px;scrollbar-width:none}.filter-row::-webkit-scrollbar{display:none}.filter{border:1px solid #ffffff13;background:#151822;color:#9a9fae;border-radius:25px;padding:7px 17px;font-size:11px;font-weight:700;white-space:nowrap}.filter:hover{color:#fff}.filter.active{background:color-mix(in srgb,var(--accent),transparent 84%);border-color:color-mix(in srgb,var(--accent),transparent 68%);color:var(--accent)}.song-list{display:grid;gap:7px}.song-row{display:flex;gap:14px;align-items:center;padding:10px 14px;background:#11141d;border:1px solid #ffffff08;border-radius:13px;min-height:67px;transition:background .2s,border-color .2s}.song-row:hover{background:#191d29;border-color:#ffffff15}.song-row.is-playing{border-color:color-mix(in srgb,var(--accent),transparent 63%);background:color-mix(in srgb,var(--accent),transparent 95%)}.row-cover{display:grid;place-items:center;width:47px;height:47px;flex-shrink:0;border-radius:10px;border:1px solid #ffffff16;background:linear-gradient(140deg,var(--coverA),var(--coverB));overflow:hidden;color:#ffffffba}.row-cover svg{width:25px;height:25px}.row-cover img,.player-cover img{width:100%;height:100%;object-fit:cover}.row-identity{flex:1;min-width:0}.row-identity strong,.row-identity span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-identity strong{font-size:12.5px;font-weight:800}.row-identity span{font-size:10.5px;color:#8e94a4;margin-top:1px}.row-category{font-family:'Outfit','Cairo';font-size:9px;font-weight:800;padding:5px 9px;border-radius:30px;background:color-mix(in srgb,var(--row-accent),transparent 88%);color:var(--row-accent);white-space:nowrap}.row-date{color:#6f7785;font-size:10px;white-space:nowrap}.row-private{display:grid;place-items:center;color:#a5a8b8}.row-private svg{width:15px;height:15px}.row-play,.row-action{flex-shrink:0;border:0;background:transparent;color:#929aaa;display:grid;place-items:center;width:33px;height:33px;border-radius:9px}.row-play{background:color-mix(in srgb,var(--accent),transparent 85%);color:var(--accent)}.row-play:hover,.row-action:hover{background:#ffffff14;color:#fff}.row-play svg,.row-action svg{width:18px;height:18px}.row-action.liked,.player-heart.liked{color:#f1a0b9}.row-action.liked svg,.player-heart.liked svg{fill:currentColor}.empty-state{border:1px dashed #ffffff21;background:linear-gradient(140deg,#131621,#0e121b);border-radius:17px;min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:27px;text-align:center}.empty-icon{display:grid;place-items:center;width:56px;height:56px;border:1px solid #b6eac82e;background:#a3ecdb14;color:#a9ebd8;border-radius:17px;margin-bottom:4px}.empty-icon svg{width:30px;height:30px}.empty-state h3{font-size:16px;margin:3px 0 0}.empty-state p{color:#9299aa;font-size:11px;margin:0 0 14px;line-height:1.9}.btn-primary.small{height:36px;min-height:36px}.site-footer{padding:31px 0 15px;margin-top:17px;color:#6e7586;display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:10px}.site-footer strong{font-family:'Outfit';font-size:14px;color:#a7ebdb;letter-spacing:1px}
.player{position:fixed;z-index:20;bottom:0;left:0;right:0;height:var(--player);display:grid;grid-template-columns:minmax(220px,1fr) minmax(270px,1.2fr) minmax(160px,1fr);align-items:center;gap:16px;padding:12px 34px 12px 29px;background:#10131deF;backdrop-filter:blur(22px);border-top:1px solid #ffffff16;box-shadow:0 -12px 35px #00000028;direction:rtl}.player-info{display:flex;align-items:center;gap:12px;min-width:0}.player-cover{width:52px;height:52px;flex-shrink:0;border-radius:11px;background:linear-gradient(135deg,#6d85a0,#534b87);display:grid;place-items:center;color:#d5dbf4;overflow:hidden;border:1px solid #ffffff11}.player-cover svg{width:27px;height:27px}.player-track{min-width:0;flex:1}.player-track strong,.player-track span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-track strong{font-size:12px}.player-track span{color:#818796;font-size:10px;margin-top:3px}.player-heart{background:transparent;color:#9da3b3;border:0;display:grid;place-items:center;flex-shrink:0}.player-heart svg{width:17px;height:17px}.player-center{display:grid;gap:8px;justify-items:center}.player-controls{display:flex;align-items:center;gap:15px}.player-controls .icon-btn{border:0;width:25px;height:25px}.player-controls .icon-btn:hover{color:#fff}.player-controls .icon-btn.on{color:var(--accent)}.player-controls .icon-btn svg{width:17px;height:17px}.player-controls .play-main{background:#d8f7ee;color:#10202a;display:grid;place-items:center;border:0;border-radius:50%;width:35px;height:35px;box-shadow:0 0 16px #bfffe333}.play-main svg{width:17px;height:17px;fill:currentColor;stroke-width:1}.seek-row{display:flex;gap:10px;align-items:center;width:min(100%,415px);direction:ltr}.seek-row span{font-family:'Outfit';font-size:10px;color:#8d94a4;font-variant-numeric:tabular-nums;min-width:27px}.seek-row input{flex:1;min-width:0}.player-side{display:flex;gap:12px;align-items:center;justify-content:flex-end;direction:ltr}.player-side>svg{width:18px;height:18px;color:#a3a8b7}.player-side input{width:85px}.playing-eq{height:22px;display:flex;align-items:center;gap:3px;margin-right:14px}.playing-eq i{background:var(--accent);width:3px;height:9px;border-radius:4px;opacity:.5}.playing-eq.active i{opacity:1;animation:eq .6s ease-in-out infinite alternate}.playing-eq.active i:nth-child(2){animation-delay:.2s}.playing-eq.active i:nth-child(3){animation-delay:.45s}.playing-eq.active i:nth-child(4){animation-delay:.1s}input[type=range]{-webkit-appearance:none;appearance:none;border:0;border-radius:12px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--value,0%),#393d4b var(--value,0%),#393d4b 100%);height:4px;cursor:pointer;direction:ltr}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#e9faf5;box-shadow:0 0 10px #abf8e2}input[type=range]::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:#e9faf5}
.modal-layer{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:15px}.modal-backdrop{position:absolute;inset:0;background:#020307be;backdrop-filter:blur(8px)}.modal{position:relative;width:min(100%,535px);max-height:min(90dvh,850px);overflow:auto;border:1px solid #ffffff24;border-radius:23px;background:linear-gradient(145deg,#1c2130,#11151e);box-shadow:0 24px 90px #0009;padding:28px}.modal:before{content:'';position:absolute;width:200px;height:200px;right:-95px;top:-120px;background:#9adfd920;filter:blur(45px);pointer-events:none}.modal-x{position:absolute;left:18px;top:18px;border:1px solid #ffffff18;border-radius:11px;color:#e6e8f0;background:#ffffff0c;width:34px;height:34px;display:grid;place-items:center}.modal-x svg{width:17px;height:17px}.modal-top{text-align:center;margin:0 auto 21px}.modal-mark{margin:auto auto 9px;width:46px;height:46px;border-radius:15px;background:#a9f5dd1a;border:1px solid #a9f5dd40;color:#b3f6e2;display:grid;place-items:center;font-size:27px}.modal-top h2{font-size:23px;margin:6px 0 0}.modal-top p{font-size:11px;color:#979bad;margin:1px 0 0}.drop-zone{border:1px dashed #acedd16c;background:#a9ecdc0b;border-radius:16px;min-height:138px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:6px;cursor:pointer;text-align:center;padding:17px}.drop-zone:focus-within{border-color:#d1fcf1}.drop-zone.dragging{background:#bafde920}.drop-zone strong{font-size:12px}.drop-zone small{font-family:'Outfit','Cairo';color:#a3aabc;font-size:10px}.drop-icon{width:35px;height:35px;display:grid;place-items:center;color:#b8f9e2;border:1px solid #adf8e633;border-radius:10px}.drop-icon svg{width:19px;height:19px}.drop-zone input{position:absolute;opacity:0;width:1px;height:1px}.field-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.field{min-width:0}.field-label{display:block;font-size:11px;font-weight:700;color:#d9dce5;margin:0 0 7px}.text-field{display:block;width:100%;height:41px;background:#0e121b;border:1px solid #ffffff1a;border-radius:10px;padding:0 12px;color:#f1f3f8;font-size:11px;outline:0}.text-field:focus{border-color:#a4f0d7}.text-field::placeholder{color:#626b7c}.file-field{padding:10px;font-size:9px}select.text-field{appearance:auto;cursor:pointer}.visibility-select{margin:17px 0 11px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.visibility-select label{cursor:pointer}.visibility-select input{position:absolute;opacity:0}.visibility-select label span{border:1px solid #ffffff18;border-radius:12px;display:grid;grid-template-columns:22px 1fr;gap:0 7px;padding:10px;background:#ffffff04}.visibility-select svg{grid-row:span 2;width:17px;height:17px;align-self:center;color:#94a4ad}.visibility-select strong{font-size:11px}.visibility-select small{color:#8991a0;font-size:9px}.visibility-select input:checked+span{border-color:#a6efd78c;background:#a7eddb14}.visibility-select input:focus-visible+span{outline:2px solid #a9ecdd;outline-offset:2px}.copyright-note{font-size:10px;color:#a5a7b2;line-height:1.7;margin:12px 0}.wide{width:100%;margin-top:14px;min-height:43px}.modal-tip{color:#858a98;font-size:11px;line-height:1.9;margin:15px 0 0}.account-success{text-align:center;border:1px solid #a3edc92b;background:#a3edc90a;border-radius:14px;padding:22px}.account-success svg{color:#a5eccb;width:29px;height:29px;display:block;margin:0 auto 8px}.account-success strong{font-size:14px}.account-success p{color:#a9b5bd;font-size:11px}.progress-wrap{margin-top:13px;display:grid;gap:6px}.progress-track{height:6px;background:#323646;border-radius:6px;overflow:hidden}.progress-track span{display:block;height:100%;width:45%;background:#acf0d8;border-radius:6px;animation:progress 1.5s linear infinite}.progress-wrap>span{color:#a6bbc0;font-size:10px}.toast{position:fixed;z-index:60;bottom:calc(var(--player) + 17px);left:50%;transform:translateX(-50%);border:1px solid #a2eddb35;border-radius:11px;padding:10px 18px;background:#1e2830;box-shadow:0 10px 25px #0008;color:#e5f6f1;max-width:calc(100% - 30px);font-size:12px;text-align:center}
[data-theme=gym]{--accent:#f84f60;--accent-rgb:248,79,96}[data-theme=sad]{--accent:#f6dc82;--accent-rgb:246,220,130}[data-theme=quran]{--accent:#d7b96d;--accent-rgb:215,185,109}[data-theme=happy]{--accent:#f3c4cf;--accent-rgb:243,196,207}[data-theme=rap]{--accent:#91cabc;--accent-rgb:145,202,188}[data-theme=podcast]{--accent:#e9d8bc;--accent-rgb:233,216,188}.player .play-main{background:var(--accent)}.mood-card,.row-cover{font-synthesis:none}
@keyframes rotate{to{transform:rotate(360deg)}}@keyframes bounce{from{transform:scaleY(.6)}to{transform:scaleY(1.8)}}@keyframes eq{from{height:5px}to{height:19px}}@keyframes progress{from{transform:translateX(125%)}to{transform:translateX(-260%)}}
@media (max-width:1250px){:root{--sidebar:220px}.content{padding:0 28px}.topbar{padding-inline:28px}.hero-copy{padding-inline:30px}.hero-art{left:-4%;}.mood-grid{gap:10px}.mood-info strong{font-size:20px}.search-box{width:215px}.player{padding-inline:20px}}
@media (max-width:1020px){:root{--sidebar:76px}.sidebar{padding-inline:10px}.brand{margin:0 4px 35px;justify-content:center}.brand-type,.side-label,.nav-item span:not(.nav-pip),.cat-nav span:not(.cat-nav-icon),.storage-card,.side-footer #sideStatus{display:none}.nav-item,.cat-nav{justify-content:center;padding:11px;gap:0}.cat-nav-icon{min-width:31px;height:31px}.side-footer{justify-content:center}.nav-pip{position:absolute;right:7px;margin:0!important}.side-label-categories{display:none}.category-nav{padding-top:22px}.topbar h1{font-size:20px}.search-box{width:190px}.hero-copy{min-width:360px}.hero-copy h2{font-size:43px}.hero-art{opacity:.75;left:-11%}}
@media (max-width:760px){:root{--sidebar:0px;--player:124px}.sidebar{bottom:0;transform:translateX(110%);width:min(280px,83vw);padding:24px 18px 0;box-shadow:-10px 0 40px #0008}.sidebar.open{transform:translateX(0)}.sidebar.open .brand{justify-content:flex-end}.sidebar.open .brand-type,.sidebar.open .side-label,.sidebar.open .nav-item span:not(.nav-pip),.sidebar.open .cat-nav span:not(.cat-nav-icon),.sidebar.open .storage-card,.sidebar.open .side-footer #sideStatus{display:flex}.sidebar.open .brand-type{display:flex}.sidebar.open .storage-card{display:block}.sidebar.open .nav-item,.sidebar.open .cat-nav{justify-content:flex-start;gap:13px}.sidebar.open .side-label{display:block}.sidebar.open .side-label-categories{padding-top:24px}.sidebar.open .category-nav{padding-top:0}.main-frame{margin-right:0}.topbar{padding:16px 17px 15px;height:auto;min-height:99px;align-items:flex-start;flex-wrap:wrap;gap:13px}.topbar-intro{display:flex;align-items:center;flex-wrap:wrap;gap:2px 8px}.topbar-intro h1{width:calc(100% - 51px);order:2;font-size:20px;margin:-3px 48px 0 0}.topbar-intro .eyebrow{order:1}.mobile-menu{display:grid;width:34px;height:34px;grid-row:span 2;order:0;margin-top:5px}.mobile-menu svg{width:19px}.top-actions{margin-right:auto;gap:7px}.search-box{height:38px;width:min(44vw,240px)}.search-box kbd{display:none}.upload-top{height:38px;padding:0 11px}.upload-top span{display:none}.profile-btn{width:38px;height:38px}.content{padding:0 15px}.hero{min-height:260px;border-radius:19px}.hero-copy{padding:26px 20px;min-width:0;width:85%}.hero-tag{font-size:8px;letter-spacing:1px}.hero-copy h2{font-size:36px;margin:12px 0 7px}.hero-copy p{font-size:10.8px;max-width:260px;margin-bottom:13px}.hero-art{left:-20%;width:67%;opacity:.5;top:6px}.art-disc{width:190px;height:190px;top:30px;left:17%}.vinyl-core{width:58px;height:58px;font-size:30px}.hero-edge,.art-bars,.art-note{display:none}.hero-buttons{gap:7px}.hero-buttons button{min-height:35px;padding:0 11px;font-size:10px}.hero-buttons svg{width:14px;height:14px}.section{margin-top:27px}.section-heading h2{font-size:19px}.section-meta{font-size:9px}.mood-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mood-card{height:158px;border-radius:14px}.mood-info{padding:15px 12px 12px}.mood-info strong{font-size:18px}.mood-small{font-size:7px;letter-spacing:1px}.mood-bottom{font-size:9px}.mood-art-symbol{font-size:98px}.mood-art-symbol.arabic-symbol{font-size:56px}.library-heading{align-items:center}.song-row{gap:9px;padding:8px}.row-cover{height:43px;width:43px}.row-date{display:none}.row-category{font-size:8px;padding:4px 7px}.row-identity strong{font-size:11px}.row-identity span{font-size:9px}.song-row .row-action{width:25px}.site-footer{flex-direction:column;align-items:center;font-size:9px;text-align:center;gap:3px}.player{grid-template-columns:1fr auto;height:var(--player);padding:9px 15px max(10px,env(safe-area-inset-bottom));gap:7px;background:#111521f5}.player-info{min-width:0}.player-cover{height:39px;width:39px;border-radius:8px}.player-track strong{font-size:11px}.player-track span{font-size:9px}.player-center{grid-column:1 / 3;grid-row:2;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:13px;width:100%}.player-controls{gap:11px}.player-controls .play-main{width:33px;height:33px}.seek-row{flex:1;max-width:none;gap:6px}.seek-row span{font-size:9px;min-width:24px}.player-side{display:none}.player-heart svg{height:17px;width:17px}.modal{padding:21px 17px;border-radius:19px}.modal-top h2{font-size:19px}.toast{bottom:calc(var(--player) + 12px)}}
@media (max-width:390px){.topbar h1{font-size:18px}.topbar .eyebrow{font-size:9px}.search-box{width:42vw}.hero-copy h2{font-size:32px}.hero-copy p{max-width:235px}.mood-info strong{font-size:16px}.mood-bottom{font-size:8px}.field-columns{grid-template-columns:1fr}.visibility-select label span{padding:8px 6px}.visibility-select small{font-size:8px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
/* VYBE Local Edition — additional native playlists and backup controls. */
.playlist-heading{display:flex;justify-content:space-between;align-items:center;padding:20px 14px 8px;color:#a5f0de;font-weight:800;font-size:11px;letter-spacing:.5px}
.playlist-heading button{border:1px solid #a5f0de40;border-radius:9px;background:#a5f0de12;color:#bdf7e6;width:29px;height:29px;display:grid;place-items:center;cursor:pointer}
.playlist-heading svg,.playlist-nav svg{width:16px;height:16px;flex-shrink:0}
.playlist-nav-wrap{display:grid;gap:4px;margin:0 0 2px}
.playlist-placeholder{color:#626e7e;font-size:10px;padding:8px 16px 9px}
.playlist-nav{background:transparent;border:1px solid transparent;border-radius:12px;color:#959caf;text-align:right;display:flex;align-items:center;gap:11px;padding:10px 14px;width:100%;cursor:pointer;font-size:11px;font-weight:700}
.playlist-nav:hover,.playlist-nav.active{background:#a7f5db16;border-color:#a7f5db26;color:#bafce3}
.playlist-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.playlist-number{color:#748b87;font-size:10px}
.local-overview{padding:16px;border-radius:15px;background:linear-gradient(125deg,#a5efdb12,#617b8611);border:1px solid #a5efdb30}
.local-overview-heading{display:flex;align-items:center;gap:11px}
.local-overview-heading strong{font-size:14px;display:block}
.local-overview-heading small{color:#9caab7;font-size:10px;line-height:1.6}
.local-overview-symbol{display:grid;place-items:center;background:#98e4ca20;border:1px solid #b0f3dd40;color:#adf6dd;border-radius:11px;width:40px;height:40px;flex-shrink:0}
.local-overview-symbol svg{width:20px;height:20px}
.local-stats{display:flex;gap:12px;justify-content:space-between;margin-top:15px;font-size:11px;color:#c7e9df}
.storage-meter{height:6px;background:#09111a;border:1px solid #ffffff16;border-radius:5px;margin-top:12px;overflow:hidden}
.storage-meter span{display:block;width:0;height:100%;background:#a5efdc;border-radius:5px;transition:width .2s ease}
.storage-meter span.near-full{background:#f19e75}
.local-overview .modal-tip{margin:6px 0 0;font-size:10px}
.storage-refresh{margin-top:9px;margin-inline-end:7px;font-size:10px}
.backup-section{margin-top:15px;border:1px solid #ffffff1c;border-radius:15px;padding:16px;background:#0c14204d}
.backup-section-title{display:flex;align-items:center;gap:9px;color:#e5fff4;font-size:13px}
.backup-section-title svg{width:18px;height:18px;color:#a7efd7}
.backup-section p{color:#aab6c1;font-size:11px;line-height:1.9;margin:8px 0 11px}
.backup-section .file-field{height:auto;min-height:40px;padding:11px}
.backup-section .field-label{margin-top:11px}
.backup-filename{font-size:10px;color:#92acb1;overflow-wrap:anywhere;margin:8px 0}
.backup-section .wide{display:flex;align-items:center;justify-content:center;gap:9px}
.backup-section .wide svg{width:16px;height:16px}
.backup-warning{font-size:11px;line-height:1.9;border:1px solid #f1c47d45;border-radius:12px;color:#e7cea0;background:#f5c6790c;padding:12px;margin:15px 0 0}
.backup-progress{font-size:10px;line-height:1.6;color:#b6f4de;margin:12px 0 0}
[hidden]{display:none!important}
@media(max-width:1020px) and (min-width:761px){.playlist-heading span,.playlist-nav .playlist-name,.playlist-nav .playlist-number,.playlist-placeholder{display:none}.playlist-heading{justify-content:center;padding:20px 0 7px}.playlist-nav{justify-content:center;padding:11px 5px}}
@media(max-width:760px){.sidebar.open .playlist-heading span,.sidebar.open .playlist-nav .playlist-name,.sidebar.open .playlist-nav .playlist-number,.sidebar.open .playlist-placeholder{display:block}.modal{max-height:calc(100dvh - 30px)}}