html{height:100%}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-background-body);margin-top:1%}.drop-shadow-thick{filter:drop-shadow(2px 2px 2px rgba(0,0,0,1))}.drop-shadow-thin{filter:drop-shadow(1px 1px 1px rgba(0,0,0,.5))}.App{display:flex;flex-direction:column;transition:margin-right .3s ease}.App.lyrics-open .SongPlayer,.App.lyrics-open .main-content{margin-right:300px;margin-right:var(--lyrics-width,300px)}.App.layout{display:flex;flex-direction:row;transition:all .3s ease}.content{flex:1 1;margin-right:0;transition:padding-bottom .3s ease}.content.with-lyrics{flex:none;margin-right:300px;margin-right:var(--lyrics-width,300px);width:calc(100% - 300px);width:calc(100% - var(--lyrics-width, 300px))}.content.with-player{padding-bottom:130px}.search-bar input:focus{border:2px solid var(--color-border-search);box-shadow:0 0 5px #1d181599;outline:none}.search-bar input{background-color:var(--color-background-search);border:1px solid var(--color-border-search-light);border-radius:4px;font-size:1rem;padding:5px}.border-below{border-bottom:2px solid var(--color-border-nav);margin-top:1.5rem}.thumbnail-wrapper{display:inline-block;position:relative}.play-overlay{color:#fff;font-size:2rem;left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2}.thumbnail-wrapper:hover .play-overlay{animation:fadeOverlay 2s ease forwards}.play-overlay svg{filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}@keyframes fadeOverlay{0%{opacity:0}20%{opacity:.7}80%{opacity:.7}to{opacity:0}}.add-pointer{cursor:pointer}.page-container{color:var(--color-text-title);padding:3vh}#content{padding:.8em}h1,h2,h3,h4,h5,h6,p{font-family:Tajawal,sans-serif}p{font-size:1.25em;line-height:1.75em;margin:0 0 1em;padding:0 1.5rem}h1,h2,h3{font-size:1.5em;letter-spacing:.05em;margin:0 0 .6em}h4,h5{font-size:1.25em;line-height:1.75em;margin:0 0 1em}h6{font-size:1.125em;margin:0 0 .2em}h3{text-align:center}@media screen and (min-width:320px) and (max-width:767px){#content{padding:0}p{font-size:1.125em;line-height:1.75em;margin:0 0 1em}h1,h2,h3{font-size:1.375em;letter-spacing:.05em;margin:0 0 .6em}h4,h5{font-size:1.125em;line-height:1.75em;margin:0 0 1em}h6{font-size:1em;margin:0 0 .2em}}div li.hide{display:none}.auth-controls{align-items:flex-end;display:flex;flex-direction:column;gap:.25rem}.auth-buttons button,.auth-logged-in button{font-size:1rem;padding:4px 10px}.auth-logged-in{align-items:flex-end;display:flex;flex-direction:column;margin-bottom:20px;text-align:right}.profile-icon{border-radius:50%;height:50px;object-fit:cover;width:50px}.listen-nav-wrapper{display:block;left:0;margin-top:5px;position:fixed;top:200px;z-index:1000}.listen-nav{background:#0000;pointer-events:auto}.listen-nav ul{display:flex;flex-direction:column;gap:.5rem;padding:0 .4rem}.listen-nav li{margin:0}.listen-nav a{border-radius:6px;color:inherit;display:inline-block;font-size:1rem;padding:0 .2rem;text-decoration:none}.listen-nav a:hover{background:var(--color-hover-dark);color:var(--color-text-nav)}.listen-nav a.active{background:#ffffff1f;font-weight:600}@media (max-width:660px){.listen-nav-wrapper{display:block;left:auto;margin-bottom:8px;pointer-events:auto;position:static;top:auto;width:100%;z-index:auto}.listen-nav{overflow:visible;padding:.5rem 0;width:100%}.listen-nav ul{display:flex;flex-direction:row;gap:.75rem;justify-content:center;padding:0 .75rem}}.footer{background-color:var(--color-footer-bg);box-shadow:0 -2px 6px #0006;color:var(--color-text-secondary);font-size:.9rem;padding:18px 10px;text-align:center}.footer-social-container{margin-bottom:10px}.footer-icon{color:var(--text-secondary);cursor:pointer;display:inline-block;font-size:1.45rem;margin:0 12px;transition:color .25s ease,transform .25s ease,filter .25s ease}.footer-icon:hover{color:var(--color-text-title);filter:brightness(1.3);transform:scale(1.15)}.footer-copyright{font-size:.85rem;margin-top:6px;opacity:.8}.footer-contact-btn{background-color:var(--color-button-footer);border:none;border-radius:0;color:var(--color-black);cursor:pointer;font-family:Tajawal,sans-serif;font-size:1rem;font-weight:600;margin:2px 0 8px;padding:5px 10px;transition:all .2s ease}.footer-contact-btn:hover{background-color:var(--color-button-footer-hover);color:var(--color-white);transform:translateY(-1px)}.footer-back-to-top{color:var(--color-text-secondary);cursor:pointer;margin-top:8px;text-decoration:underline;transition:color .3s ease}.footer-back-to-top:hover{color:var(--color-text-title)}.header-container{justify-content:space-between;padding:.5rem 0}.header-container,header{align-items:center;background-color:var(--color-header-container);display:flex;margin-left:1%;margin-right:1%}nav{background-color:var(--color-background-nav);padding:.5em 0;position:-webkit-sticky;position:sticky;top:0;z-index:1001}.container{box-shadow:0 -4px 4px #0006;margin:0 auto;position:relative;z-index:150}nav:after{clear:both;content:"";display:table}nav ul{list-style:none;padding:0;position:relative}nav ul,nav ul li{margin:0;text-align:center}nav ul li{background-color:var(--color-background-nav);display:inline-block}nav ul li a,nav ul ul li a{color:var(--color-black);display:block;font-family:Tajawal,sans-serif;font-size:clamp(.95em,2vw,1.15em);letter-spacing:.1em;line-height:40px;padding:0 clamp(6px,1.5vw,12px);text-align:center;text-decoration:none;transition:all .25s ease}nav a:hover{background-color:var(--color-active-bg);color:var(--color-active-text)}.main-nav{color:inherit;position:relative;text-decoration:none}.main-nav.active{color:var(--color-background-search);text-shadow:0 0 20px #1a1919,0 0 5px #252525}.main-nav:after{background-color:var(--color-text-nav-hover);bottom:-4px;content:"";height:2px;left:50%;position:absolute;transform:translateX(-50%);transition:width .3s ease;width:0}.main-nav.active:after{width:100%}.headernav{margin-top:1px;width:100%}.logo-link-header{align-items:center;display:flex;justify-content:center;margin-top:-10px;text-align:center}#logo{margin-bottom:1em;max-width:100%;width:100%}#logo h1{color:#fff;font:normal clamp(150%,8vw,300%) Tajawal,sans-serif;letter-spacing:clamp(.1em,1vw,.2em);margin:.2em 0 0}#logo h1,#logo-img{display:block;text-align:center}#logo-img{border-radius:50%;filter:drop-shadow(2px 2px 2px rgba(0,0,0,1));height:auto;margin:-.5rem .5% .5rem;width:100px}#hidden{display:none}#logo h2{color:#ebe7e2;display:block;font:normal clamp(70%,4vw,90%) Tajawal,sans-serif;letter-spacing:clamp(.2em,2vw,.35em);text-align:center}#logo h1 a,#logo h2 a{color:#ebe7e2;text-decoration:none}@media screen and (min-width:480px) and (max-width:767px){#logo{max-width:90%;position:relative;width:90%}#logo h1{font:normal clamp(100%,7vw,200%) Tajawal,sans-serif;letter-spacing:.2em;margin:.2em 0 0}#logo h1,#logo h2{color:#ebe7e2;display:block;padding-top:.1875em;text-align:center}#logo h2{font:normal clamp(80%,4vw,85%) Tajawal,sans-serif;letter-spacing:.35em}}@media screen and (max-width:479px){#logo{max-width:95%;position:relative;width:95%}#logo h1{font:normal clamp(100%,6vw,200%) Tajawal,sans-serif;letter-spacing:.2em;margin:0 auto;padding-top:.5em}#logo h1,#logo h2{color:#fff;display:block;text-align:center}#logo h2{font:normal clamp(65%,2vw,70%) Tajawal,sans-serif;letter-spacing:.35em;padding-top:1em}}.header-logo-container{display:flex;justify-content:flex-start;width:clamp(50px,12vw,120px)}.header-auth-container{text-align:right;width:clamp(50px,12vw,120px)}.dropdown-menu{align-items:stretch;background:var(--color-dropdown-bg);border-radius:6px;box-shadow:0 2px 8px #0000004d;display:flex;flex-direction:column;left:0;list-style:none;margin:0;padding:0;position:absolute;top:100%;z-index:1000}.dropdown-menu.hidden{display:none}.dropdown-menu-item{border-bottom:1px solid var(--color-dropdown-border);white-space:nowrap}.dropdown-menu-item:last-child{border-bottom:none}.dropdown-menu-link{display:inline-block;text-align:left;text-decoration:none;width:100%}.home{padding:7.5vh 15vh}.home h1{font-size:2.5rem;margin-bottom:1rem;text-align:center}.home-verse{font-style:italic;margin-top:2rem;text-align:center}.home-links .main-nav{text-decoration:none}.home-links .main-nav:hover{text-decoration:underline}.home-section-with-media p{margin-bottom:0;padding:1rem}.home-section-with-media .home-media{float:left;margin-right:2rem}.home-section-with-media.media-right .home-media{float:right;margin-left:2rem;margin-right:0}.home-media{border-radius:16px;height:200px;object-fit:cover;width:200px}.home-section-with-media:after{clear:both;content:"";display:table}@media (max-width:1024px){.home-media{height:120px;width:120px}.home{padding:5vh 10vh}}@media (max-width:900px){.home{padding:4vh 8.5vh}}@media (max-width:800px){.home-section-with-media .home-media,.home-section-with-media.media-right .home-media{display:block;float:none;margin:0 auto}.home-media{height:200px;width:200px}.home{padding:3vh 7vh}}.share-modal-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#000000b3;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.share-modal{background-color:#52504e;border-radius:12px;box-shadow:0 8px 32px #0006;max-height:80vh;max-width:500px;overflow-y:auto;width:90%}.share-modal-header{align-items:center;border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding:1.5rem}.share-modal-header h3{color:#ebe7e2;font-size:1.2rem;margin:0}.share-modal-close{align-items:center;background:none;border:none;color:#ebe7e2;cursor:pointer;display:flex;font-size:2rem;height:32px;justify-content:center;padding:0;transition:transform .2s ease;width:32px}.share-modal-close:hover{transform:rotate(90deg)}.share-modal-content{padding:1.5rem}.share-social-options{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr);margin-bottom:1.5rem}.share-social-btn{align-items:center;background-color:#ffffff1a;border:1px solid #fff3;border-radius:8px;color:#ebe7e2;cursor:pointer;display:flex;font-size:1rem;gap:.75rem;padding:1rem;transition:all .2s ease}.share-social-btn:hover{background-color:#ffffff26;border-color:#ffffff4d;transform:translateY(-2px)}.share-social-icon{font-size:1.2rem;font-weight:700;min-width:24px;text-align:center}.share-copy-section{margin-top:1rem}.share-copy-btn{align-items:center;background-color:#ffffff1a;border:1px solid #fff3;border-radius:8px;color:#ebe7e2;cursor:pointer;display:flex;font-size:1rem;gap:.5rem;justify-content:center;padding:1rem;transition:all .2s ease;width:100%}.share-copy-btn:hover:not(:disabled){background-color:#ffffff26;border-color:#ffffff4d}.share-copy-btn:disabled{cursor:default;opacity:.6}.share-copy-icon{font-size:1.2rem}@media (max-width:600px){.share-social-options{grid-template-columns:1fr}}.recent-releases-carousel{background:linear-gradient(135deg,var(--color-card-gradient-start) 0,var(--color-card-gradient-end) 100%);border:2px solid #0000;border-radius:16px;box-sizing:border-box;contain:layout paint;margin-top:1rem;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:1rem;transition:box-shadow .3s ease,border .3s ease;width:100%}.recent-releases-carousel.engaged{border-color:#ffffff4d;box-shadow:0 0 15px #fff3}.carousel-scroll-container{contain:layout inline-size;display:flex;flex:1 1 auto;gap:1rem;overflow-x:visible;overflow-y:hidden;padding:.5rem;scroll-behavior:smooth;scrollbar-color:#ffffff4d #0000;scrollbar-gutter:stable;scrollbar-width:thin;width:100%}.carousel-scroll-container::-webkit-scrollbar{height:8px}.carousel-scroll-container::-webkit-scrollbar-track{background:#0003;border-radius:4px}.carousel-scroll-container::-webkit-scrollbar-thumb{background:#fff6;border-radius:4px}.carousel-scroll-container::-webkit-scrollbar-thumb:hover{background:#fff9}.carousel-card{flex:0 0 auto;overflow:hidden;transition:box-shadow .3s ease,border .3s ease,transform .2s ease;width:160px}.carousel-card.highlighted{border-color:#fff9;border-width:3px;box-shadow:0 0 20px #fff6}.carousel-card img,.carousel-card video{display:block;height:100%;object-fit:cover;object-position:center;width:100%}.end-card{aspect-ratio:1/1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0006}.end-card,.end-card-content{align-items:center;display:flex;justify-content:center}.end-card-content{color:var(--color-text-title);flex-direction:column;gap:.75rem;padding:.5rem;text-align:center}.end-card-content p{font-size:1rem;font-weight:500;line-height:1.3;margin:0}.end-card-button{background-color:var(--color-card-gradient-start);border:none;border-radius:8px;color:var(--color-text-title);cursor:pointer;filter:drop-shadow(1px 1px 2px rgba(0,0,0,.5));font-size:.9rem;padding:.5rem 1rem;transition:all .2s ease}.end-card-button:hover{background-color:var(--color-card-hover-alt);filter:drop-shadow(2px 2px 4px rgba(0,0,0,.75));transform:translateY(-1px)}.recent-release-card{background:linear-gradient(135deg,#ffffff0d,#ffffff05);border:1px solid #ffffff1a;border-radius:12px;box-shadow:0 4px 12px #0000004d;box-sizing:border-box;margin:2rem 0;max-width:100%;min-width:0;overflow:hidden;overflow-x:hidden;padding:1.5rem;transition:transform .2s ease,box-shadow .2s ease}.recent-release-card:hover{box-shadow:0 6px 16px #0006;transform:translateY(-2px)}.recent-release-header{align-items:center;display:flex;gap:1rem;margin-bottom:1rem}.recent-release-badge{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0000004d;border-radius:6px;color:var(--color-text-title);display:inline-block;font-size:1.2rem;font-weight:600;letter-spacing:.5px;padding:.1rem .2rem}.recent-release-content{grid-gap:2rem;align-items:start;display:grid;gap:2rem;grid-template-columns:300px 1fr;min-width:0}.recent-release-thumbnail{border-radius:16px;cursor:pointer;height:300px;overflow:hidden;position:relative;width:300px}.recent-release-thumbnail .song-thumbnail{height:100%;width:100%}.recent-release-thumbnail img,.recent-release-thumbnail video{height:100%;object-fit:cover;width:100%}.recent-release-info{display:flex;flex-direction:column;gap:.8rem;max-width:600px}.recent-release-title{color:var(--color-text-light);cursor:pointer;font-size:2rem;font-weight:600;margin:0 0 1rem;text-align:left;text-shadow:1px 2px 3px #000000bf}.recent-release-title:hover{text-decoration:underline}.recent-release-genre-info{align-items:center;background-color:#ffffff1a;border-radius:6px;display:flex;gap:.5rem;padding:.5rem 1rem;width:-webkit-fit-content;width:fit-content}.recent-release-genre-icon{font-size:1.2rem}.recent-release-header-genre-icon{cursor:default;filter:grayscale(30%) opacity(90%);font-size:2rem;position:relative;text-shadow:0 0 3px #232121;transition:filter .2s ease,transform .2s ease}.recent-release-header-genre-icon:hover{filter:grayscale(0) opacity(100%);transform:scale(1.1)}.recent-release-header-genre-icon .tooltip{background-color:#000000bf;border-radius:4px;color:#fff;font-size:.9rem;margin-top:4px;opacity:0;padding:2px 6px;position:absolute;right:0;top:100%;transition:opacity .2s;visibility:hidden;white-space:nowrap;z-index:10}.recent-release-header-genre-icon:hover .tooltip{opacity:1;visibility:visible}.recent-release-genre-label{color:var(--color-text-light);font-size:1rem;font-weight:500}.recent-release-description{color:#f0eae3e6;font-size:1rem;font-style:italic;line-height:1.6;margin:0}.recent-release-scripture{color:#f0eae3b3;font-size:.9rem;margin:0}.recent-release-actions{align-items:center;display:flex;gap:.8rem;margin-top:.5rem}.rr-btn{align-items:center;border:none;border-radius:6px;cursor:pointer;display:flex;font-size:.95rem;font-weight:600;gap:.5rem;padding:.6rem 1.2rem;transition:all .2s ease}.rr-btn-primary{background-color:var(--color-card-gradient-start);border:1px solid #fff3;color:var(--color-text-title);padding:.6rem}.rr-btn-primary:hover{background-color:var(--color-card-hover);border-color:#ffffff4d}.rr-btn-secondary{background:#ffffff1a;border:1px solid #fff3;color:var(--color-text-light)}.rr-btn-secondary:hover{background:#ffffff26;border-color:#ffffff4d}.rr-btn-icon{align-items:center;background:#0000;border:1px solid #fff3;color:var(--color-text-light);justify-content:center;min-height:42px;min-width:42px;padding:.6rem}.rr-btn-icon:hover{background:#ffffff1a;border-color:#ffffff4d}@media (max-width:800px){.recent-release-content{gap:1.5rem;grid-template-columns:1fr}.recent-release-thumbnail{aspect-ratio:1;height:auto;width:70%}.recent-release-header-genre-icon{font-size:1.8rem}.recent-release-title{font-size:1.5rem}.recent-release-actions{flex-wrap:wrap}.rr-btn{flex:1 1;justify-content:center;min-width:calc(50% - .4rem)}.rr-btn-icon{flex:0 1;min-width:auto}}@media (max-width:480px){.recent-release-card{padding:1rem}.recent-release-title{font-size:1.3rem}.recent-release-description{font-size:.9rem}.recent-release-header-genre-icon{font-size:1.5rem}}.about{color:#ebe7e2;font-size:1.1rem;padding:7.5vh 15vh 15vh}.about,.about h2{text-align:center}.about h2{text-shadow:1px 2px 3px #000000bf}.about-section-with-media p{margin-bottom:0;padding:1rem}.about-section-with-media .about-media{float:left;margin-right:1rem}.about-section-with-media.media-right .about-media{float:right;margin-left:1rem;margin-right:0}.about-media{border-radius:16px;height:200px;object-fit:cover;width:200px}.about-section-with-media:after{clear:both;content:"";display:table}@media (max-width:1024px){.about-media{height:120px;width:120px}.about{padding:5vh 10vh}}@media (max-width:900px){.about{padding:4vh 8.5vh}}@media (max-width:800px){.about{padding:3vh 7vh}.about-section-with-media .about-media,.about-section-with-media.media-right .about-media{display:block;float:none;margin:0 auto}.about-media{height:200px;width:200px}}.videos{color:#ebe7e2;padding:3vh}.video-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;padding:2rem}.video-card{box-shadow:0 2px 6px #0006;cursor:pointer;overflow:hidden;transition:transform .2s;width:300px}.video-thumbnail{object-fit:cover;width:100%}.video-card:hover{box-shadow:0 6px 10px #0006;transform:scale(1.02)}.video-title{background-color:#413b34;color:#fff;font-size:1.2rem;margin-top:-1px;padding:.5rem;text-align:center}.video-search{display:flex;justify-content:center;margin:16px 0 20px}.video-search input{background-color:#e7e5e5;border:1px solid #bdbcbc;border-radius:6px;font-size:14px;padding:6px 8px;text-align:left;width:min(320px,45%)}.partner{color:#ebe7e2;font-size:1.1rem;padding:7.5vh 15vh 15vh}.partner-section-with-media p{margin-bottom:0;padding:1rem}.partner-section-with-media .partner-media{float:left;margin-right:1rem}.partner-media{border-radius:16px;height:200px;object-fit:cover;width:200px}.partner-section-with-media:after{clear:both;content:"";display:table}@media (max-width:1024px){.partner-media{height:120px;width:120px}.partner{padding:5vh 10vh}}@media (max-width:900px){.partner{padding:4vh 8.5vh}}@media (max-width:800px){.partner{padding:3vh 7vh}.partner h2{text-align:center}.partner-section-with-media .partner-media{display:block;float:none;margin:0 auto}.partner-media{height:200px;width:200px}}.partner-button{background-color:#4c4740;border-radius:5px;color:#ebe7e2;margin-right:10px;padding:10px 15px;text-decoration:none}.partner-button:hover{background-color:#5a524a;box-shadow:inset 2px 2px 5px #00000080;color:#fff;text-decoration:none}.partner-button-container{display:flex;margin-bottom:40px}.contact-page{align-items:center;display:flex;justify-content:center;min-height:80vh;padding:3vh}.contact-container{margin:0 auto;max-width:600px;width:100%}.contact-container h1{color:var(--color-text-light);font-size:2.5rem;margin-bottom:1rem;margin-top:1.5rem;text-align:center;text-shadow:1px 2px 3px #000000bf}.contact-intro{color:var(--color-text-title);font-size:1.1rem;line-height:1.6;margin-bottom:.5rem;text-align:center}.required-note{color:#ebe7e2b3;font-size:.9rem;font-style:italic;margin-bottom:2rem;text-align:center}.contact-form{background:linear-gradient(135deg,#ffffff0d,#ffffff05);border:1px solid #ffffff1a;border-radius:12px;box-shadow:0 4px 12px #0000004d;padding:2rem}.form-field{margin-bottom:1.5rem}.form-field label{color:var(--color-text-title);display:block;font-size:1rem;font-weight:500;margin-bottom:.5rem}.required-asterisk{color:var(--color-text-title);font-weight:700;margin-left:2px}.contact-form input,.contact-form textarea{background:#ffffff0d;border:1px solid #fff3;border-radius:8px;box-sizing:border-box;color:var(--color-text-title);font-family:Tajawal,sans-serif;font-size:1rem;padding:12px 16px;transition:border-color .2s,background-color .2s;width:100%}.contact-form input::placeholder,.contact-form textarea::placeholder{color:#ebe7e280}.contact-form input:focus,.contact-form textarea:focus{background:#ffffff14;border-color:#fff6;outline:none}.contact-form input.error,.contact-form textarea.error{border-color:var(--color-error)}.contact-form textarea{min-height:120px;resize:vertical}.error-message{color:var(--color-error);font-size:.875rem;margin-top:.5rem;text-shadow:1px 1px 2px #00000080}.contact-submit-btn{background-color:var(--color-button-footer);border:none;border-radius:0;color:var(--color-black);cursor:pointer;font-family:Tajawal,sans-serif;font-size:1.1rem;font-weight:600;margin-top:1rem;padding:14px;transition:all .2s ease;width:100%}.contact-submit-btn:hover:not(:disabled){background-color:var(--color-active-bg);color:var(--color-white);transform:translateY(-1px)}.contact-submit-btn:disabled{background:#4c474080;color:#ebe7e266;cursor:not-allowed;opacity:.5;transform:none}@media (max-width:768px){.contact-page{padding:2vh 3vh}.contact-container h1{font-size:2rem}.contact-intro{font-size:1rem}.contact-form{padding:1.5rem}}@media (max-width:480px){.contact-container h1{font-size:1.75rem}.contact-form{padding:1rem}.contact-form input,.contact-form textarea{font-size:.95rem;padding:10px 12px}.contact-submit-btn{font-size:1rem;padding:12px}}.song-card-wrapper{min-height:372px}.song-filters{align-items:center;display:flex;gap:1.2rem;justify-content:center;margin-top:20px}.song-card .genre-icon{cursor:default;filter:grayscale(30%) opacity(90%);font-size:1.3rem;left:-1px;position:absolute;text-shadow:0 0 3px #232121;top:-1px;transition:filter .2s ease,transform .2s ease;z-index:5}.song-card .genre-icon:hover{filter:grayscale(0) opacity(100%);transform:scale(1.1)}.genre-dropdown{font-weight:700;margin-top:1rem;text-align:center}.genre-dropdown-menu{background-color:#e7e5e5;font-size:1rem;padding:5px}.song-card .genre-icon .tooltip{background-color:#000000bf;border-radius:4px;color:#fff;font-size:1rem;left:22px;opacity:0;padding:2px 6px;position:absolute;top:5px;transition:opacity .2s;visibility:hidden;white-space:nowrap;z-index:10}.song-card .genre-icon:hover .tooltip{opacity:1;visibility:visible}.song-card{border:1px solid #ccc;border-radius:8px;box-shadow:0 2px 4px #00000080;height:17rem;margin:1rem;padding:1rem;position:relative;transition:transform .2s,box-shadow .2s;width:12rem}.song-card:hover{background-color:#ffffff0d;box-shadow:0 6px 10px #0006;transform:scale(1.02)}.song-list{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;padding-top:2rem;text-align:center}.song-thumbnail{border-radius:8px;box-shadow:0 2px 4px #000;height:10rem;object-fit:cover;width:100%}.thumbnail-wrapper{cursor:pointer;transition:transform .2s ease,filter .2s ease}.thumbnail-wrapper:hover{filter:brightness(1.1);transform:scale(1.02)}.song-card-buttons{display:flex;gap:.5rem;justify-content:center;margin:.5rem 0 .25rem}.song-play-button,.song-share-button{font-size:.9rem;width:27px}.song-add-to-playlist-button,.song-play-button,.song-share-button{align-items:center;background-color:#29262678;border:none;border-radius:5px;color:#ebe7e2;cursor:pointer;display:flex;height:27px;justify-content:center;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.song-add-to-playlist-button{font-size:.85rem;min-width:auto;padding:.25rem .5rem;white-space:nowrap}.song-add-to-playlist-button:hover,.song-play-button:hover,.song-share-button:hover{background-color:#5c554c;box-shadow:0 2px 8px #0000004d;transform:scale(1.05)}.song-title{color:#ebe7e2;cursor:pointer;display:flex;flex-wrap:wrap;font-size:1.2rem;font-weight:700;justify-content:center;margin:0;text-align:center;text-shadow:1px 1px 2px #000;transition:-webkit-text-decoration .2s ease;transition:text-decoration .2s ease;transition:text-decoration .2s ease,-webkit-text-decoration .2s ease}.song-title:hover{text-decoration:underline}.pe-theme-dropdown-wrapper{display:inline-block;font-size:1rem;overflow:visible;position:relative;width:150px}.pe-theme-dropdown{align-items:center;background:#444;border:1px solid #ffffff26;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:1rem;justify-content:space-between;padding:.3rem .6rem .3rem .3rem;text-shadow:0 0 3px #00000080;width:100%}.pe-theme-left{align-items:center;display:flex;gap:.4rem}.pe-theme-icon{font-size:1.2rem}.pe-theme-svg-icon{filter:drop-shadow(0 0 3px rgba(0,0,0,.5));flex-shrink:0;height:1.5rem;object-fit:contain;transform:scale(1.2);transform-origin:center;width:1.5rem}.theme-thumbnail{background-position:50%;background-repeat:no-repeat;background-size:cover;border:1px solid #fff3;border-radius:6px;flex-shrink:0;height:2em;overflow:hidden;position:relative;transition:transform .3s ease,box-shadow .3s ease;width:2em}.theme-thumbnail:hover{box-shadow:0 4px 12px #0009;transform:scale(1.5) translateX(.1em);transform-origin:center center;z-index:99999}.pe-theme-chevron{font-size:.85rem;opacity:.9}.pe-theme-menu{background:#222;border-radius:8px;box-shadow:0 3px 6px #00000059;left:0;max-height:250px;overflow-x:visible;overflow-y:auto;position:absolute;top:110%;width:100%;z-index:99}.pe-theme-option{align-items:center;color:#fff;cursor:pointer;display:flex;font-size:1.1rem;gap:.8rem;padding:.45rem .7rem;text-shadow:0 0 3px #00000080}.pe-theme-option:hover{filter:brightness(1.15)}.pe-theme-option.selected-theme .theme-thumbnail{border:1px solid #e6c547}.pe-theme-option.selected-theme{color:#f2d966;text-shadow:0 0 3px #000c}.modal-overlay{align-items:center;background-color:#000000b3;bottom:0;display:flex;justify-content:center;left:0;padding-bottom:120px;position:fixed;right:0;top:0;z-index:1002}.add-to-playlist-modal{background:linear-gradient(160deg,#2c2c2c,#1a1a1a);border:1px solid #444;border-radius:16px;box-shadow:0 10px 30px #00000080;max-height:80vh;max-width:400px;overflow:hidden;padding:0;width:90%}.modal-header{align-items:center;background:#ffffff0d;border-bottom:1px solid #444;display:flex;justify-content:space-between;padding:20px 24px}.modal-header h3{color:#ebe7e2;font-size:1.3rem;font-weight:600;margin:0}.close-button{background:none;border:none;border-radius:4px;color:#dedad9;cursor:pointer;font-size:1.2rem;padding:4px;transition:background-color .2s}.close-button:hover{background-color:#ffffff1a}.saved-message{animation:slideIn .3s ease-out;background:#ffffff0d;border-bottom:1px solid #444;color:#ebe7e2;font-size:1rem;font-weight:600;padding:12px 24px;text-align:center}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.modal-content{max-height:60vh;overflow-y:auto;padding:24px}.auth-required{padding:40px 20px;text-align:center}.login-prompt{align-items:center;display:flex;flex-direction:column;gap:20px}.login-prompt h4{color:#ebe7e2;font-size:1.3rem;font-weight:600;margin:0}.login-prompt p{color:#dedad9;font-size:1.1rem;line-height:1.4;margin:0}.login-button{background:linear-gradient(135deg,#4a90e2,#357abd);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:12px 24px;transition:all .2s}.login-button:hover:not(:disabled){background:linear-gradient(135deg,#357abd,#2c5aa0);transform:translateY(-1px)}.login-button:disabled{background:#666;cursor:not-allowed;transform:none}.existing-playlists{display:flex;flex-direction:column;gap:20px}.playlist-list{display:flex;flex-direction:column;gap:12px;max-height:300px;overflow-x:hidden;overflow-y:auto}.playlist-item{align-items:center;background:#ffffff0d;border:1px solid #444;border-radius:8px;box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;padding:16px;transition:all .2s;width:100%}.playlist-item:hover{box-shadow:0 4px 12px #0000004d;transform:scale(1.02)}.playlist-left{align-items:center;display:flex;gap:8px}.playlist-icon{font-size:1.3rem;text-shadow:3px 2px 2px #000000e6}.playlist-left h4{color:#ebe7e2;font-size:1.1rem;font-weight:600;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-item p,.playlist-left h4{margin:0;text-shadow:3px 2px 2px #000000e6}.playlist-item p{color:#dedad9;font-size:.9rem}.no-playlists{color:#dedad9;font-style:italic;padding:40px 20px;text-align:center}.create-playlist-form{gap:20px}.create-playlist-form,.form-group{display:flex;flex-direction:column}.form-group{gap:8px}.form-group label{color:#ebe7e2;font-size:1rem;font-weight:600}.form-group input{background:#ffffff0d;border:1px solid #444;border-radius:8px;color:#ebe7e2;font-size:1rem;padding:12px 16px;transition:border-color .2s}.form-group input:focus{background:#ffffff14;border-color:#666;outline:none}.char-counter{color:#ffffff80;font-size:.85rem;margin-top:4px;text-align:right}.pe-name-input::placeholder{color:#bbb}.pe-name-input::-webkit-input-placeholder{color:#ddd;opacity:1}.pe-name-input::-moz-placeholder{color:#bbb;opacity:1}.pe-name-input:-ms-input-placeholder{color:#bbb;opacity:1}.form-group .pe-theme-dropdown-wrapper{width:100%}.form-group .pe-theme-dropdown{background:#ffffff0d;border:1px solid #444;border-radius:8px;padding:12px 16px;transition:border-color .2s;width:100%}.form-group .pe-theme-dropdown:hover{border-color:#666}.form-group .pe-theme-menu{max-height:200px;width:100%;z-index:1003}.form-info{background:#ffffff0d;border-left:3px solid #666;border-radius:8px;padding:12px 16px}.form-info p{color:#dedad9;font-size:.9rem;line-height:1.4;margin:0}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:8px}.create-btn,.create-new-btn{background-color:#e8e8e8;border:none;border-radius:0;color:#000;cursor:pointer;font-family:Tajawal,sans-serif;font-size:1rem;font-weight:600;padding:12px 24px;transition:all .2s}.create-btn:hover,.create-new-btn:hover{background-color:#a5a09b;color:#fff}.create-btn:disabled{background:#666;cursor:not-allowed;transform:none}.cancel-btn{background:#0000;border:1px solid #444;border-radius:8px;color:#dedad9;cursor:pointer;font-size:1rem;font-weight:600;padding:12px 24px;transition:all .2s}.cancel-btn:hover{background:#ffffff0d;border-color:#666}.modal-content::-webkit-scrollbar,.playlist-list::-webkit-scrollbar{width:6px}.modal-content::-webkit-scrollbar-track,.playlist-list::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.modal-content::-webkit-scrollbar-thumb,.playlist-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.modal-content::-webkit-scrollbar-thumb:hover,.playlist-list::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (max-width:600px){.modal-overlay{align-items:flex-start;padding-bottom:140px;padding-top:20px}.add-to-playlist-modal{margin:20px;max-height:80vh;width:95%}.modal-header{padding:16px 20px}.modal-content{padding:20px}.modal-actions{flex-direction:column}.cancel-btn,.create-btn,.create-new-btn{width:100%}}.song-details-page{background-color:#7d7771;color:#ebe7e2;min-height:100vh;padding:2rem}.song-details-header{margin-bottom:3rem;position:relative;text-align:center}.song-details-title{font-size:3rem;font-weight:700;margin-bottom:.5rem;text-shadow:3px 2px 2px #000000e6}.song-artist{color:#dedad9;font-size:1.2rem;margin-bottom:0}.song-details-content{grid-gap:3rem;display:grid;gap:3rem;grid-template-columns:1fr 1fr;margin-bottom:3rem}.song-media-section{align-items:center;display:flex;flex-direction:column;width:100%}.song-media-description-verse{margin-top:1.5rem;max-width:400px;text-align:left;width:100%}.song-media-description{color:#ebe7e2e6;display:block;font-size:.95rem;font-style:italic;line-height:1.5;margin:0 0 .75rem}.song-media-verse-container{display:block}.song-media-verse-text{color:#ebe7e2d9;display:block;font-size:.9rem;margin:0}.song-media-verse-reference{color:#ebe7e2b3;display:block;font-size:.85rem;margin:.25rem 0 0}.song-thumbnail-large{aspect-ratio:1/1;margin-bottom:2rem;max-width:400px;width:100%}.song-thumbnail-large .song-thumbnail{height:100%!important}.song-controls{align-items:center;display:flex;gap:1rem;margin-bottom:2rem}.song-control-btn{background-color:#52504e;border:none;border-radius:4px;color:#ebe7e2;cursor:pointer;font-size:1rem;padding:.75rem;transition:background-color .2s ease}.song-control-btn:hover{background-color:#6b6966}.song-lyrics-section{background-color:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;padding:2rem}.song-lyrics-section h2{font-size:1.5rem;margin-bottom:1.5rem;text-shadow:2px 1px 1px #000c}.lyrics-content{max-height:80vh;overflow-y:auto;padding-right:8px;scrollbar-color:#ffffff4d #0000;scrollbar-width:thin}.lyrics-content::-webkit-scrollbar{width:6px}.lyrics-content::-webkit-scrollbar-track{background:#0000}.lyrics-content::-webkit-scrollbar-thumb{background-color:#ffffff4d;border-radius:3px}.lyrics-content::-webkit-scrollbar-thumb:hover{background-color:#ffffff80}.lyrics-text{color:#ebe7e2;font-family:inherit;font-size:1rem;line-height:1.6;margin:0}.lyrics-text p{margin-bottom:1rem}.lyrics-text p:last-child{margin-bottom:0}.lyrics-error,.lyrics-loading,.no-lyrics{color:#dedad9;font-style:italic;padding:2rem;text-align:center}.lyrics-error{color:#ff6b6b}.related-songs-section{margin-bottom:3rem}.related-songs-section h2{font-size:1.8rem;margin-bottom:1.5rem;text-shadow:2px 1px 1px #000c}.related-songs-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.related-song-card{background-color:#ffffff0d;border:1px solid #ffffff1a;border-radius:12px;cursor:pointer;padding:1rem;transition:all .2s ease}.related-song-card:hover{background-color:#ffffff1a;box-shadow:0 4px 12px #0000004d;transform:translateY(-2px)}.related-songs-section .song-thumbnail{height:auto!important}.related-song-title{color:#ebe7e2;display:block;font-size:.9rem;margin-top:.75rem;text-align:center}.external-links-section{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.external-link{background-color:#52504e;border:none;border-radius:4px;color:#ebe7e2;cursor:pointer;font-family:inherit;font-size:1rem;padding:.75rem 1.5rem;text-decoration:none;transition:background-color .2s ease}.external-link:hover{background-color:#6b6966}.external-link{align-items:center;display:flex;gap:.5rem}.external-link svg{color:#ebe7e2;font-size:1.2rem}.song-details-error,.song-details-loading{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:50vh;text-align:center}.loading-spinner{animation:spin 1s linear infinite;border:4px solid #ffffff4d;border-radius:50%;border-top-color:#ebe7e2;height:40px;margin-bottom:1rem;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.back-button{background-color:#52504e;border:none;border-radius:4px;color:#ebe7e2;cursor:pointer;font-size:1rem;margin-top:1rem;padding:.75rem 1.5rem;transition:background-color .2s ease}.back-button:hover{background-color:#6b6966}.footer{box-shadow:0 -4px 12px #0009!important;position:relative;z-index:10}@media (max-width:1024px){.song-details-page{padding:1rem}.song-details-header{margin-top:1.5rem}.song-details-title{font-size:2rem}.song-media-description-verse{max-width:100%}.song-media-description{font-size:.9rem}.song-media-verse-text{font-size:.85rem}.song-media-verse-reference{font-size:.75rem}.song-details-content{gap:2rem;grid-template-columns:1fr}.song-controls{flex-direction:column;max-width:300px;width:100%}.song-control-btn{width:100%}.related-songs-grid{gap:1rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.external-links-section{align-items:center;flex-direction:column}.external-link{justify-content:center;max-width:300px;text-align:center;width:100%}}.video-modal{align-items:center;background-color:#000c;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.video-modal-content{aspect-ratio:16/9;max-width:800px;width:80%}.albums-heading{margin:0 0 1rem;text-align:center}.albums-list{display:flex;flex-direction:column;gap:1rem;margin:0 auto;max-width:clamp(680px,88vw,880px)}.album-card{background:#0000;border:1px solid #00000040;border-radius:12px;box-shadow:0 2px 6px #00000059;overflow:hidden;width:100%}.album-header{background-color:#5f5953;border-bottom:1px solid #0003;justify-content:space-between;padding:.7rem 1rem}.album-header,.album-left{align-items:center;display:flex}.album-left{gap:.4rem}.album-toggle{background:#0000;border:none;color:#f0f0f0;cursor:pointer;font-size:1.2rem;line-height:1;padding:0}.album-toggle:hover{color:#fff;transform:scale(1.15);transition:transform .15s ease}.album-title{font-size:1.5rem;font-weight:800}.album-play{background:#ffffff14;border:1px solid #ffffff40;border-radius:8px;color:inherit;cursor:pointer;padding:.4rem .7rem}.album-play:hover:not(:disabled){background:#ffffff24}.album-play:disabled{cursor:not-allowed;opacity:.5}.album-tracks{display:flex;flex-direction:column;gap:.35rem;list-style:none;margin:0;padding:.6rem .7rem .9rem}.album-track{align-items:center;border-radius:8px;cursor:pointer;display:flex;gap:.5rem;padding:.38rem .45rem}.album-track:hover{background:#ffffff0f}.track-thumb{border-radius:6px;box-shadow:0 1px 3px #00000080;height:64px;object-fit:cover;width:64px}.track-title{flex:1 1;font-size:1.2rem;font-weight:700;line-height:1.2;margin-left:.3rem}.album-track span:last-child{min-width:5.5rem;opacity:.9;text-align:right;white-space:nowrap}@media (max-width:1060px){.albums-list{max-width:70vw}.albums-view{padding-left:9.5rem}}@media (max-width:600px){.albums-list{max-width:100%}.album-header{padding:.6rem .8rem}.album-tracks{padding:.5rem .6rem .75rem}.album-track{padding:.34rem .4rem}.album-track span:last-child{min-width:4.2rem}.track-thumb{height:40px;width:40px}.album-play{padding:.32rem .55rem}}.playlists-page{color:#f6f6f6;flex-wrap:wrap;margin:2rem auto;min-height:100vh;padding:1rem}.playlist-header,.playlists-page{align-items:center;display:flex;flex-direction:column}.playlist-header{justify-content:space-between;margin-bottom:1.5rem}.playlists-list{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;max-width:clamp(680px,95vw,1400px)}.playlist-card{background-size:cover;border:1px solid #00000040;border-radius:12px;box-shadow:0 2px 6px #00000059;flex:1 1 200px;max-width:220px;overflow:hidden;padding:1rem;text-align:center;transition:transform .2s ease}.playlist-card h3,.playlist-card p{color:#ebe7e2;margin:.5rem 0;text-shadow:3px 2px 2px #000000e6}.playlist-card:hover{transform:translateY(-3px)}.playlist-buttons{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}.playlist-description{align-items:center;display:flex;gap:1rem}.create-playlist-button{font-size:1rem;padding:8px 12px}.create-playlist-button,.icon-button{align-items:center;background-color:#29262678;border:none;border-radius:5px;color:#ebe7e2;cursor:pointer;display:flex;justify-content:center;transition:background .2s ease}.icon-button{font-size:1.2rem;height:36px;position:relative;width:36px}.icon-button:hover{background-color:#5c554c}.icon-button .tooltip-text{background-color:#000000d9;border-radius:5px;bottom:120%;color:#fff;font-size:.8rem;left:50%;opacity:0;padding:4px 8px;pointer-events:none;position:absolute;text-align:center;transform:translateX(-50%);transition:opacity .2s ease;visibility:hidden;white-space:nowrap;z-index:10}.icon-button:hover .tooltip-text{opacity:1;visibility:visible}.icon-button .tooltip-text:after{border:5px solid #0000;border-top-color:#000000d9;content:"";left:50%;position:absolute;top:100%;transform:translateX(-50%)}@media (max-width:600px){.playlists-list{gap:.8rem;max-width:100%}.playlist-card{flex:1 1 140px;padding:.8rem}.icon-button{font-size:1rem;height:30px;width:30px}}.confirm-modal-backdrop{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#000000b3;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:10001}.confirm-modal{animation:confirmModalSlideIn .2s ease-out;background:#2a2a2a;border:1px solid #ffffff1a;border-radius:12px;box-shadow:0 8px 32px #0009;max-height:90vh;max-width:500px;min-width:400px;overflow:hidden}@keyframes confirmModalSlideIn{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.confirm-modal-header{align-items:center;border-bottom:1px solid #ffffff1a;display:flex;gap:12px;padding:20px 24px 16px}.confirm-modal-icon{align-items:center;background-color:#2196f333;border-radius:50%;color:#2196f3;display:flex;flex-shrink:0;font-size:24px;height:32px;justify-content:center;width:32px}.confirm-modal-title{color:#ebe7e2;font-size:18px;font-weight:600;margin:0}.confirm-modal-body{padding:20px 24px}.confirm-modal-message{color:#ebe7e2;font-size:16px;line-height:1.5;margin:0}.confirm-modal-footer{border-top:1px solid #ffffff1a;display:flex;gap:12px;justify-content:flex-end;padding:16px 24px 20px}.confirm-modal-btn{border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;min-width:80px;padding:10px 20px;transition:all .2s ease}.confirm-modal-btn-cancel{background-color:#404040;border:1px solid #fff3;color:#ebe7e2}.confirm-modal-btn-cancel:hover{background-color:#4a4a4a}.confirm-modal-btn-confirm{background-color:#2196f3;color:#fff}.confirm-modal-btn-confirm:hover{background-color:#1976d2}.confirm-modal-danger .confirm-modal-icon{background-color:#f4433633;color:#f44336}.confirm-modal-danger .confirm-modal-btn-confirm{background-color:#f44336}.confirm-modal-danger .confirm-modal-btn-confirm:hover{background-color:#d32f2f}.confirm-modal-warning .confirm-modal-icon{background-color:#ff980033;color:#ff9800}.confirm-modal-warning .confirm-modal-btn-confirm{background-color:#ff9800}.confirm-modal-warning .confirm-modal-btn-confirm:hover{background-color:#f57c00}.confirm-modal-btn:focus{outline:2px solid #e6c547;outline-offset:2px}@media (max-width:800px){.confirm-modal{margin:20px;min-width:320px}.confirm-modal-body,.confirm-modal-footer,.confirm-modal-header{padding-left:16px;padding-right:16px}.confirm-modal-footer{flex-direction:column}.confirm-modal-btn{width:100%}}@media (prefers-reduced-motion:reduce){.confirm-modal{animation:none}}.pe-page{color:#f6f6f6;margin:1.5rem auto;max-width:min(1100px,95vw);padding:0 1rem}.pe-header{align-items:center;display:flex;gap:1rem;justify-content:space-between;margin-bottom:1rem}.pe-name-input{background:#0000;border:1px solid #ffffff26;border-radius:8px;color:#f6f6f6;display:inline-block;font-size:1.5rem;margin-bottom:-4px;margin-top:-3px;max-width:none;padding:.1rem;text-align:center;width:auto}.pe-name-input:focus{border:2px solid #635f5f;box-shadow:0 0 5px #1d181599;outline:none}.pe-theme-section{display:flex;gap:.5rem;max-width:320px;width:100%}.pe-theme-help-icon,.pe-theme-section{align-items:center;justify-content:center}.pe-theme-help-icon{background-color:#ffffff1a;border:1px solid #fff3;border-radius:50%;color:#ebe7e2;cursor:pointer;display:inline-flex;font-size:.9rem;font-weight:700;height:20px;transition:all .2s ease;width:20px}.pe-theme-help-icon:focus,.pe-theme-help-icon:hover{background-color:#fff3;border-color:#fff6;outline:none;transform:scale(1.1)}.pe-theme-help-icon:focus{box-shadow:0 0 0 2px #ffffff4d}.pe-actions{display:flex;gap:.5rem;justify-content:center;max-width:360px;width:100%}.pe-btn{background:#0000;border:1px solid #fff3;border-radius:6px;color:#ebe7e2;cursor:pointer;padding:.4rem .7rem}.pe-btn.subtle{font-size:1rem;opacity:.9}.pe-btn.primary{border-color:#ffffff59}.pe-columns{grid-column-gap:1.5rem;align-items:start;column-gap:1.5rem;display:grid;grid-template-columns:1fr 1px 1fr}.pe-col-title{font-weight:600;margin:0 0 .5rem;text-align:center}.pe-divider{background:#ffffff1f;height:100%;width:1px}.pe-left-controls{align-items:center;display:flex;flex-direction:column;gap:.6rem;margin-bottom:.6rem}.pe-list{border:1px solid #ffffff1f;border-radius:10px;max-height:130vh;min-height:320px;overflow-y:auto;padding:.5rem}.pe-list.drag-over{border-color:#ffffff59}.pe-empty{opacity:.7;padding:1rem;text-align:center}.pe-song-row{grid-gap:.5rem;align-items:center;background:#ffffff05;border:1px solid #ffffff14;border-radius:8px;display:grid;gap:.5rem;grid-template-columns:66px 1fr 24px 28px;margin-bottom:.4rem;padding:.35rem}.pe-song-row:hover{background:#ffffff0f}.pe-thumb{border-radius:6px;box-shadow:0 1px 2px #0006;height:66px;object-fit:cover;width:66px}.pe-title{font-size:1.2rem}.pe-genre{opacity:.9;text-align:center}.pe-add,.pe-remove{background:#0000;border:0;color:#f0eae3;cursor:pointer;opacity:.9}.pe-add{align-items:center;display:flex;justify-content:center}.library-row{grid-template-columns:66px 1fr 24px 28px}.pe-filters{align-items:center;display:flex;flex-direction:column;gap:.5rem;margin-bottom:.5rem}.pe-genre-select{max-width:100%;padding:.5rem;width:auto}.pe-genre-select,.pe-search input{background:#e7e5e5;border:none;border-radius:6px;color:#232121;display:block;font-size:1rem;margin:0 auto;text-align:center}.pe-search input{max-width:420px;padding:.5rem .75rem;width:80%}@media (max-width:815px){.pe-columns{gap:1rem;grid-template-columns:1fr}.pe-divider{display:none}.pe-list{max-height:70vh}}.tooltip-container{display:inline-block;position:relative}.tooltip{background-color:#000000bf;border-radius:6px;box-shadow:0 2px 8px #0000004d;color:#fff;font-size:.9rem;font-weight:500;max-width:900px;opacity:0;padding:8px 12px;pointer-events:none;position:absolute;text-align:left;transition:opacity .2s ease-in-out;visibility:hidden;white-space:normal;width:150px;z-index:1000}.tooltip-container:focus-within .tooltip,.tooltip-container:hover .tooltip{opacity:1;visibility:visible}.tooltip-top{bottom:100%;margin-bottom:8px}.tooltip-bottom,.tooltip-top{left:50%;transform:translateX(-50%)}.tooltip-bottom{margin-top:8px;top:100%}.tooltip-left{margin-right:8px;right:100%}.tooltip-left,.tooltip-right{top:50%;transform:translateY(-50%)}.tooltip-right{left:100%;margin-left:8px}.tooltip-top:after{border:5px solid #0000;border-top-color:#000000bf;top:100%}.tooltip-bottom:after,.tooltip-top:after{content:"";left:50%;margin-left:-5px;position:absolute}.tooltip-bottom:after{border:5px solid;border-color:#0000 #0000 #000000bf;bottom:100%}.tooltip-left:after{border:5px solid #0000;border-left-color:#000000bf;left:100%}.tooltip-left:after,.tooltip-right:after{content:"";margin-top:-5px;position:absolute;top:50%}.tooltip-right:after{border:5px solid #0000;border-right-color:#000000bf;right:100%}.playlist-details-container{background:var(--theme-gradient);border-radius:10px;box-shadow:0 3px 10px #0000004d;margin:2rem auto;max-width:min(900px,95vw);padding:1rem 1.5rem}.playlist-details-header{align-items:center;background-image:var(--theme-image);background-size:cover;display:flex;justify-content:space-between;margin-bottom:10px}.playlist-details-header h2{color:var(--color-text-primary);font-size:1.5rem;font-weight:600;margin:0;padding:15px;text-shadow:0 0 4px #000}.play-all-btn{background:rgba(38,36,36,.513);border:none;border-radius:6px;color:var(--color-text-primary);cursor:pointer;font-weight:500;margin-right:.8rem;padding:.4rem .8rem}.play-all-btn:hover{background:#2c2b2b33}.playlist-song-list{display:flex;flex-direction:column;gap:.75rem}.playlist-song-row{align-items:center;background:rgba(0,0,0,.228);border-radius:8px;display:grid;grid-template-columns:64px 1fr auto auto;padding:.4rem .8rem}.playlist-song-thumb{border-radius:6px;height:64px;object-fit:cover;width:64px}.playlist-song-title{color:var(--color-white);font-size:1.1rem;font-weight:600;margin-left:.8rem}.playlist-song-genre{color:var(--color-text-secondary);font-size:.9rem;margin-right:1rem;text-align:right}.playlist-song-play{background:#ffffff26;border:none;border-radius:50%;color:var(--color-white);cursor:pointer;height:30px;width:30px}.playlist-song-play:hover{background:#ffffff40}.playlist-edit-top{display:flex;gap:1rem;justify-content:center;margin:0 auto;max-width:600px}.open-editor-btn,.share-button{background-color:var(--color-card-gradient-start);border:none;border-radius:8px;color:var(--color-text-title);cursor:pointer;flex:1 1;font-size:1rem;margin-top:1.7rem;max-width:200px;padding:.5rem 1rem;transition:background .2s ease}.open-editor-btn:hover,.share-button:hover{background-color:var(--color-card-hover)}.open-editor-btn svg,.share-button svg{margin-bottom:2px;vertical-align:middle}@media (max-width:600px){.playlist-edit-top{flex-wrap:wrap;gap:.5rem;padding:0 .5rem}.open-editor-btn,.share-button{font-size:.9rem;min-width:-webkit-fit-content;min-width:fit-content;padding:.5rem .75rem}}@media (max-width:400px){.playlist-edit-top{align-items:stretch;flex-direction:column}.open-editor-btn,.share-button{width:100%}}.listen-layout{align-items:flex-start;width:100%}.listen-content,.listen-layout{display:flex;justify-content:center}.listen-content{flex:1 1;min-width:0;padding:0 6.5rem}.listen-content>*{flex:1 1}@media (max-width:660px){.listen-layout{align-items:stretch;flex-direction:column}.listen-content{justify-content:flex-start;margin-left:0;max-width:100%;padding:0}}.repeat-button-wrapper{display:inline-block;position:relative}.repeat-indicator{font-size:.6em;pointer-events:none;position:absolute;right:-.4em;top:-.4em}.song-player{background-color:var(--color-player-bg);border-top:1px solid var(--color-border-dark);bottom:0;box-shadow:0 -3px 10px #242121bf;color:var(--color-white);display:flex;flex-direction:column;left:0;padding:1rem;position:fixed;right:0;z-index:1000}.song-player-control-bar{align-items:center;display:flex;justify-content:space-between;position:relative}.song-player-thumbnail-title{align-items:center;display:flex;gap:1rem;min-width:200px}.song-player-thumbnail{box-shadow:0 2px 4px #000;height:66px;object-fit:cover;width:66px}.song-player-title{color:var(--color-text-title);cursor:pointer;font-size:1.3rem;font-weight:700;max-width:130px;text-decoration:none;text-shadow:1px 1px 2px #000;transition:-webkit-text-decoration .2s ease;transition:text-decoration .2s ease;transition:text-decoration .2s ease,-webkit-text-decoration .2s ease}.song-player-title:hover{text-decoration:underline}.song-player-controls{align-items:center;display:flex;gap:1rem;left:50%;position:absolute;transform:translateX(-50%)}.song-player-progress-bar,.song-player-volume{align-items:center;display:flex;gap:.5rem}.song-player-progress-bar{margin-top:.5rem}.song-player-controls .active{background-color:var(--color-player-active)}.song-player-progress-time{color:var(--color-text-secondary);font-size:.8rem}.song-player-progress{background:var(--color-player-accent);cursor:pointer;flex-grow:1;height:4px;position:relative}.song-player-progress-fill{background:var(--color-white);height:100%;position:absolute;transition:width .2s ease}.song-player-lyrics-button{background-color:var(--color-button-bg);border:none;border-radius:4px;color:var(--color-button-text);cursor:pointer;font-size:1rem;padding:.25rem .5rem;transition:background-color .2s ease,color .2s ease}.song-player-lyrics-button:hover{background-color:var(--color-button-hover-alt);color:var(--color-white)}.song-player-add-to-playlist-button{background-color:var(--color-button-bg);border:none;border-radius:4px;color:var(--color-button-text);cursor:pointer;font-size:1rem;margin-left:.5rem;padding:.25rem .5rem;transition:background-color .2s ease,color .2s ease}.song-player-add-to-playlist-button:hover{background-color:var(--color-button-hover-alt);color:var(--color-white)}.close-player-button{background-color:initial;border:none;color:var(--color-text-secondary);cursor:pointer;position:absolute;right:.5rem;top:.5rem}input[type=range]{background:var(--color-range-track);border-radius:5px;height:6px;margin-left:1rem;outline:none;width:100px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--color-range-thumb);border:2px solid var(--color-range-border);border-radius:50%;cursor:pointer;height:14px;width:14px}input[type=range]::-moz-range-thumb{background:var(--color-range-thumb);border:2px solid var(--color-range-border);border-radius:50%;cursor:pointer;height:14px;width:14px}input[type=range]::-moz-range-track{background:var(--color-range-track-alt);border-radius:5px;height:6px}@media screen and (max-width:1300px){.song-player-control-bar.with-lyrics{display:block;flex-direction:column;margin-bottom:1rem}.song-player-control-bar.with-lyrics .song-player-volume{display:none}}@media screen and (max-width:1000px){.song-player-control-bar{display:block;margin-bottom:1rem}.song-player-volume{display:none;margin-block:1rem}}@media screen and (max-width:600px){.song-player-lyrics-button{display:none}}.lyrics-viewer{background-color:#413b34;box-shadow:0 0 10px #121111e0;color:#fff;height:100%;overflow-y:auto;padding:1rem;position:fixed;right:0;top:0;z-index:1001}.resize-handle{cursor:col-resize;height:100%;left:0;position:absolute;top:0;transition:background-color .2s ease;-webkit-user-select:none;user-select:none;width:10px;z-index:1002}.resize-handle:hover{background-color:#ffffff1a}.lyrics-viewer .close-btn{background:#0000;border:none;color:#fff;cursor:pointer;font-size:1.2rem;position:absolute;right:10px;top:10px}.lyrics-viewer .lyrics-body{font-size:1rem;line-height:1.6;margin-top:2rem}.error-boundary{align-items:center;background:linear-gradient(160deg,#2c2c2c,#1a1a1a);border-radius:12px;display:flex;justify-content:center;margin:1rem;min-height:400px;padding:2rem}.error-boundary-content{color:#ebe7e2;max-width:500px;text-align:center}.error-boundary h2{color:#ebe7e2;font-size:1.8rem;font-weight:600;margin-bottom:1rem}.error-boundary p{color:#dedad9;font-size:1.1rem;line-height:1.5;margin-bottom:2rem}.error-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.reload-button,.retry-button{border:none;border-radius:8px;cursor:pointer;font-size:1rem;font-weight:600;padding:12px 24px;transition:all .2s}.retry-button{background:linear-gradient(135deg,#4a90e2,#357abd);color:#fff}.retry-button:hover{background:linear-gradient(135deg,#357abd,#2c5aa0);transform:translateY(-1px)}.reload-button{background:#0000;border:1px solid #444;color:#dedad9}.reload-button:hover{background:#ffffff0d;border-color:#666}.error-details{background:#0000004d;border:1px solid #444;border-radius:8px;margin-top:2rem;padding:1rem;text-align:left}.error-details summary{color:#ebe7e2;cursor:pointer;font-weight:600;margin-bottom:1rem}.error-details pre{background:#00000080;border-radius:4px;color:#ff6b6b;font-size:.9rem;overflow-x:auto;padding:1rem;white-space:pre-wrap;word-break:break-word}@media (max-width:600px){.error-boundary{margin:.5rem;padding:1rem}.error-boundary h2{font-size:1.5rem}.error-boundary p{font-size:1rem}.error-actions{align-items:center;flex-direction:column}.reload-button,.retry-button{max-width:200px;width:100%}}.toast{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(160deg,#2c2c2c,#1a1a1a);border:1px solid #ffffff26;border-radius:12px;box-shadow:0 8px 24px #000c,0 2px 8px #0006;color:#ebe7e2;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.6));max-width:500px;min-width:300px;position:fixed;right:20px;top:20px;transition:all .3s ease-in-out;z-index:10000}.toast,.toast.toast-entering{opacity:1;transform:translateX(0)}.toast-leaving{opacity:0;transform:translateX(100%)}.toast-content{gap:14px;padding:18px 20px}.toast-content,.toast-icon{align-items:center;display:flex}.toast-icon{border-radius:50%;filter:drop-shadow(1px 1px 2px rgba(0,0,0,.5));flex-shrink:0;font-size:20px;font-weight:700;height:28px;justify-content:center;width:28px}.toast-message{word-wrap:break-word;flex:1 1;font-size:15px;font-weight:500;line-height:1.5;text-shadow:0 1px 2px #00000080}.toast-close{align-items:center;background:#ffffff1a;border:1px solid #fff3;border-radius:6px;color:#ebe7e2;cursor:pointer;display:flex;flex-shrink:0;font-size:18px;font-weight:700;height:28px;justify-content:center;padding:6px;transition:all .2s ease;width:28px}.toast-close:hover{background-color:#fff3;border-color:#ffffff4d;transform:scale(1.05)}.toast-close:focus{outline:2px solid #e6c547;outline-offset:2px}.toast-success{border-left:4px solid #6b8e6b}.toast-success .toast-icon{background-color:#6b8e6b4d;color:#8fbc8f;text-shadow:0 0 8px #6b8e6b99}.toast-error{border-left:4px solid #b85450}.toast-error .toast-icon{background-color:#b854504d;color:#d4a5a2;text-shadow:0 0 8px #b8545099}.toast-warning{border-left:4px solid #d4a574}.toast-warning .toast-icon{background-color:#d4a5744d;color:#e6c547;text-shadow:0 0 8px #d4a57499}.toast-info{border-left:4px solid #7d7771}.toast-info .toast-icon{background-color:#7d77714d;color:#ebe7e2;text-shadow:0 0 8px #7d777199}.toast-container{pointer-events:none;position:fixed;right:20px;top:20px;z-index:10000}.toast-container .toast{margin-bottom:12px;pointer-events:auto;position:relative;right:auto;top:auto}.toast-container .toast:first-child{animation-delay:0ms}.toast-container .toast:nth-child(2){animation-delay:.1s}.toast-container .toast:nth-child(3){animation-delay:.2s}@media (max-width:800px){.toast{left:20px;max-width:none;min-width:auto;right:20px;transform:translateY(-100%)}.toast.toast-entering{transform:translateY(0)}.toast-leaving{transform:translateY(-100%)}.toast-container{left:20px;right:20px}.toast-container .toast{margin-bottom:8px}}@media (prefers-contrast:high){.toast{background:#000;border:2px solid #ebe7e2}}@media (prefers-reduced-motion:reduce){.toast{transition:none}.toast-container .toast{animation-delay:0ms}}
/*# sourceMappingURL=main.9145c84b.css.map*/