*{box-sizing:border-box;margin:0;padding:0}:root{--bg-color: #ffffff;--text-color: #000000;--elements-color: white;--link-color: #646cff;--link-hover: #232eff;--primary-color: #6366f1;--inMain-color-element: black;--button-hover: rgb(245, 199, 235);--border-color: rgb(52, 18, 44);--button-color: #e5d5e4;--elements-hover: rgb(239, 214, 233);--big-elements-color: #f5dfdf}body{background-color:var(--bg-color);color:var(--text-color);min-height:100vh;margin:0;display:flex;flex-direction:column;width:100%;background-image:url(/assets/%D7%A8%D7%A7%D7%A2%20%D7%A1%D7%95%D7%A4%D7%99-CbVPU-L5.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;width:100%;color-scheme:light dark;background-color:var(--bg-color)}main{display:flex;flex-direction:column;align-items:end;min-height:100vh;width:100%;padding:0 5% 5%}@media(max-width:700px){main{padding:2%}}a{font-weight:500;color:var(--link-color);text-decoration:none;cursor:pointer}a:hover{color:var(--link-color)}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--button-color);cursor:pointer;color:var(--text-color);margin:2px}button:hover{border-color:var(--button-hover)}select,input,textarea{width:100%;padding:12px 14px;font-size:14px;font-family:inherit;color:var(--text-color);background-color:var(--elements-color);border:2px solid var(--border-color);border-radius:8px;outline:none;box-sizing:border-box;transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease;direction:rtl}input:hover,textarea:hover{border-color:var(--elements-hover)}input:focus,textarea:focus{background-color:var(--elements-hover);border-color:var(--border-color);box-shadow:0 0 0 2px var(--border-color)}input::placeholder,textarea::placeholder{color:#9aa0c9}textarea{min-height:120px;resize:vertical}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;color:inherit;font-size:20px;vertical-align:middle}.active .material-symbols-outlined{font-variation-settings:"FILL" 1;color:#000}.songListGrid{display:grid;gap:30px;padding:30px;direction:rtl;grid-template-columns:repeat(3,1fr);font-family:Arial,Helvetica,sans-serif;width:100%}.songListGrid .songCard{display:flex;flex-direction:row-reverse;flex-wrap:wrap;background-color:#fff;border-radius:15px;padding:25px;min-height:220px;border-right:6px solid #cc30d1;border-top:1px solid rgba(0,0,0,.05);border-bottom:1px solid rgba(0,0,0,.05);border-left:1px solid rgba(0,0,0,.05);box-shadow:0 4px 10px #00000014;transition:all .3s ease;justify-content:space-around;align-items:center;text-align:right;box-sizing:border-box}.songListGrid .songCard:hover{transform:translateY(-5px);background-color:#f7e6f0;box-shadow:0 8px 20px #cc30d126}.songListGrid .songCard .songNameDiv,.songListGrid .songCard .artistDiv,.songListGrid .songCard .categoryName,.songListGrid .songCard .puclishDate{width:48%;margin:10px 0;display:flex;flex-direction:column}.songListGrid .songCard .bold{color:#6d1b70;font-weight:700;font-size:1.25rem;margin-top:4px}.songListGrid .songCard div:not(.bold):not(button){font-size:.9rem;color:#666}.songListGrid .songCard button{width:100%;margin-top:20px;background-color:transparent;color:#cc30d1;border:2px solid #cc30d1;padding:12px;border-radius:12px;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;justify-content:center;align-items:center;gap:8px;font-family:Arial,Helvetica,sans-serif}.songListGrid .songCard button:hover{background-color:#cc30d1;color:#fff}.songListGrid .songCard button img{width:20px;transition:filter .3s ease}.songListGrid .songCard button:hover img{filter:brightness(0) invert(1)}@media(max-width:1300px){.songListGrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:750px){.songListGrid{grid-template-columns:1fr;padding:15px}.songListGrid .songCard{max-width:450px;margin:0 auto}}.songListFlex{display:flex;flex-direction:column;gap:30px;direction:rtl;font-family:Arial,Helvetica,sans-serif;width:100%}.songListFlex .songList{display:flex;flex-direction:row;height:110px;width:100%;padding:0 35px;justify-content:space-between;background-color:#fff;align-items:center;border-radius:15px;border-right:6px solid #cc30d1;box-shadow:0 4px 10px #00000014;transition:all .3s ease;box-sizing:border-box}.songListFlex .songList:hover{transform:translateY(-2px);background-color:#f7e6f0;box-shadow:0 5px 15px #cc30d126}.songListFlex .songList .songNameDiv,.songListFlex .songList .artistDiv,.songListFlex .songList .publishDate,.songListFlex .songList .categoryName{display:flex;flex-direction:column;width:18%}.songListFlex .songList .bold{color:#6d1b70;font-weight:700;font-size:1.2rem;margin-top:4px}.songListFlex .songList div:not(.bold):not(.divider):not(.tochordsbtn):not(.chordBtn){font-size:.9rem;color:#666}.songListFlex .tochordsbtn{background-color:transparent!important;color:#cc30d1!important;border:2px solid #cc30d1!important;padding:10px 20px;border-radius:12px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px;flex-shrink:0}.songListFlex .tochordsbtn:hover{background-color:#cc30d1!important;color:#fff!important}.songListFlex .tochordsbtn img{width:22px;filter:none;transition:all .3s ease}.songListFlex .tochordsbtn:hover img{filter:brightness(0) invert(1)}@media(max-width:1000px){.songListFlex .songList .publishDate,.songListFlex .tochordsbtn .chordBtn{display:none}.songListFlex .tochordsbtn{padding:0;width:48px;height:48px;justify-content:center}}@media(max-width:600px){.songListFlex .tochordsbtn{display:none}.songListFlex .songList{height:85px;padding:0 20px}.songListFlex .songList .artistDiv,.songListFlex .songList .categoryName{display:none}.songListFlex .songList .songNameDiv{width:100%;text-align:center;align-items:center}}:root{--main-pink: #c690e6;--light-pink: #f8f0ff;--border-color: #eee}.displayBtns{display:flex;flex-direction:row;gap:8px;margin-bottom:20px;background-color:#fff;padding:5px;border-radius:10px;box-shadow:0 2px 8px #0000000d;width:fit-content}.displayBtns button{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:none;background-color:transparent;border-radius:8px;cursor:pointer;transition:all .3s ease;padding:8px}.displayBtns button img{width:24px;height:24px;opacity:.6;transition:all .3s ease}.displayBtns button.active{background-color:var(--light-pink);box-shadow:inset 0 0 0 1px #c690e633}.displayBtns button.active img{opacity:1;filter:drop-shadow(0px 0px 1px var(--main-pink))}.displayBtns button:hover:not(.active){background-color:#fafafa}.displayBtns button:hover img{opacity:.9}@media(max-width:700px){.displayBtns button{width:48px;height:48px}}.display{width:100%}@media(max-width:360px){.chordsList.cards{grid-template-columns:repeat(1,100%);gap:20px}}.home{width:100%;display:flex;flex-direction:column}.welcome{width:100%;display:flex;flex-direction:column;color:#fff;direction:rtl;gap:10px;padding:5% 10% 10%;align-items:center}.welcome button{background:none;width:auto;border-color:#fff;height:auto;font-size:20px;color:#fff;animation:pulse 2s infinite;border-radius:20px}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #cc30d1b3}50%{transform:scale(1.1);box-shadow:0 0 0 10px #cc30d100}to{transform:scale(1);box-shadow:0 0 #cc30d100}}.content{width:100%;display:flex;flex-direction:column;align-items:center;padding:5%;background-color:#fff;border-radius:20px;gap:30px}.menuBtnsDiv{width:100%;padding:5%;gap:50px;height:400px;display:flex;flex-direction:row;align-items:center;justify-content:center}.menuBtns{width:50%;height:100%;background-color:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.icon{width:50px;height:50px}@media(max-width:800px){.menuBtnsDiv{flex-direction:column;width:100%;padding:5%;height:auto}.menuBtns{width:100%;height:300px}}@media(max-width:600px){.welcome h1{font-size:1.7rem;margin-bottom:10px}.content h1{font-size:1.7rem}.welcome h2{font-size:1.1rem;padding:0 10px}.welcome h3{font-size:.9rem;font-weight:400;line-height:1.4}.menuBtns{padding:10px 20px;font-size:1rem;width:80%}.welcome{text-align:center;padding:20px}}:root{--card-white: #ffffff;--main-blue: #2196F3;--text-dark: #2c3e50;--text-gray: #95a5a6;--bg-light: #f8f9fa}.page-wrapper{padding:20px;width:100%}.add-request-section{margin-bottom:30px}.add-request-card{background:var(--card-white);border-radius:18px;padding:15px 20px;box-shadow:0 4px 15px #0000000d;border:1px solid #edf2f7;display:flex;gap:15px;width:100%;max-width:100%}.add-request-input{flex:1;border:1px solid #e2e8f0;padding:10px 15px;border-radius:12px;font-size:1rem;outline:none}.add-request-input:focus{border-color:var(--main-blue)}.submit-request-btn{background:var(--main-blue);color:#fff;border:none;padding:10px 20px;border-radius:12px;font-weight:600;cursor:pointer;white-space:nowrap}.submit-request-btn:hover{background:#1976d2}.requests-masonry-container{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:20px;width:100%}.no-requests{text-align:center;color:var(--text-gray);padding:40px;grid-column:span 4}.request-card{background:var(--card-white);border-radius:18px;padding:20px;box-shadow:0 4px 15px #0000000d;border:1px solid #edf2f7;position:relative;transition:transform .2s;box-sizing:border-box}.request-card:hover{transform:scale(1.02)}.request-card:before{content:"";position:absolute;top:20%;bottom:20%;right:0;width:4px;background:var(--main-blue);border-radius:0 4px 4px 0}.request-header{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;margin-bottom:15px}.creator-name{color:var(--text-gray)}.votes-count{color:var(--main-blue);font-weight:700;background:#e3f2fd;padding:2px 12px;border-radius:12px}.request-body{font-size:1.1rem;color:var(--text-dark);line-height:1.6;margin-bottom:20px}.request-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed #e2e8f0;padding-top:15px}.created-at{font-size:.8rem;color:var(--text-gray)}.vote-button{background:var(--main-blue);color:#fff;border:none;padding:8px 18px;border-radius:12px;font-weight:600;cursor:pointer;transition:background .2s}.vote-button:hover{background:#1976d2}.vote-button.active{background:#e0e0e0;color:var(--text-dark)}.vote-button.active:hover{background:#bdbdbd}.status-done{color:#27ae60;font-weight:700;font-size:.9rem}.loader{text-align:center;padding:50px;color:var(--main-blue);font-size:1.2rem}@media(max-width:900px){.requests-masonry-container{grid-template-columns:repeat(2,1fr)}.no-requests{grid-column:span 2}.request-card[style*="span 2"]{grid-column:span 2!important}}@media(max-width:500px){.requests-masonry-container{grid-template-columns:1fr;gap:15px}.request-card{grid-column:span 1!important}.add-request-card{flex-direction:column;max-width:100%}}.splash{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg, #0e0a1a);z-index:9999;overflow:hidden}.ripple{position:absolute;width:180px;height:180px;border-radius:50%;border:1px solid rgba(160,120,255,.3);animation:ripple 3s ease-out infinite;pointer-events:none}.ripple:nth-child(2){animation-delay:1s}.ripple:nth-child(3){animation-delay:2s}.logo-wrap{animation:waveIn 1.1s cubic-bezier(.22,1,.36,1) both;animation-delay:.2s;text-align:center;z-index:2}.logo-text{display:flex;font-size:clamp(52px,10vw,86px);font-weight:500;letter-spacing:.05em;color:#fff;animation:glowPulse 3s ease-in-out 1.4s infinite}.logo-text span{display:inline-block;animation:letterFloat 3s ease-in-out infinite}.subtitle{font-size:13px;color:#ffffff80;animation:subtitleFade 1.2s ease-out 1.1s both;letter-spacing:.22em;text-transform:uppercase;margin-top:10px}.bars{display:flex;align-items:flex-end;gap:5px;height:36px;margin-top:28px;animation:waveIn 1s ease 1.4s both}.bar{width:4px;border-radius:2px;background:linear-gradient(to top,#7c5cbf,#b89fe8);transform-origin:bottom;animation:barWave 1.4s ease-in-out infinite}@keyframes waveIn{0%{opacity:0;transform:translateY(40px) scale(.85);filter:blur(8px)}60%{opacity:1;transform:translateY(-6px) scale(1.02);filter:blur(0)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}@keyframes letterFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes glowPulse{0%,to{text-shadow:0 0 20px rgba(160,120,255,.4),0 0 60px rgba(160,120,255,.15)}50%{text-shadow:0 0 40px rgba(160,120,255,.8),0 0 100px rgba(160,120,255,.3)}}@keyframes subtitleFade{0%{opacity:0;letter-spacing:.4em}to{opacity:1;letter-spacing:.22em}}@keyframes barWave{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}@keyframes ripple{0%{transform:scale(.6);opacity:.6}to{transform:scale(2.2);opacity:0}}.hero{position:relative;width:100%;min-height:480px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;border-radius:16px;border:1px solid rgba(255,255,255,.08);direction:rtl;margin-bottom:20px;margin-top:20px}.hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hero-content{position:relative;z-index:2;text-align:center;padding:3rem 2rem;display:flex;flex-direction:column;align-items:center;gap:0}.hero-title{font-size:clamp(42px,8vw,72px);font-weight:500;color:#000;letter-spacing:.06em;margin:0 0 8px;animation:fadeUp .9s cubic-bezier(.22,1,.36,1) .1s both;text-shadow:0 0 40px rgba(200,140,255,.6),0 0 80px rgba(180,100,255,.25)}.hero-tagline{font-size:13px;color:#b716c2;letter-spacing:.18em;text-transform:uppercase;animation:fadeUp .9s cubic-bezier(.22,1,.36,1) .3s both;margin:0 0 2.5rem}.chord-bubbles{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:2.5rem;animation:fadeUp .9s cubic-bezier(.22,1,.36,1) .5s both}.chord-bubble{width:52px;height:52px;border-radius:50%;border:1px solid rgb(246,150,255);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;color:#171010e6;background:#a050dc26;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .2s,background .2s,border-color .2s;cursor:default;opacity:0;animation:bubblePop .5s cubic-bezier(.34,1.56,.64,1) forwards}.chord-bubble:hover{transform:scale(1.18) translateY(-3px);background:#b450e666;border-color:#e6a0ffcc}.hero-cta{display:inline-block;padding:12px 32px;border-radius:50px;border:1px solid rgba(210,150,255,.45);color:#fff;font-size:15px;font-weight:500;letter-spacing:.04em;cursor:pointer;background:#8c46d240;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,transform .15s,border-color .2s,box-shadow .2s;animation:fadeUp .9s cubic-bezier(.22,1,.36,1) 1.4s both}.hero-cta:hover{background:#a050e680;border-color:#e6aaffe6;transform:scale(1.04);box-shadow:0 0 24px #b464ff4d}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes bubblePop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@media(max-width:600px){.hero{min-height:420px;border-radius:10px}.chord-bubble{width:44px;height:44px;font-size:13px}.hero-cta{padding:10px 24px;font-size:14px}}:root{--primary-purple: #cc30d1;--dark-purple: #6d1b70;--border-light: rgba(0, 0, 0, .05)}.log-in-form{max-width:900px;margin:60px auto;padding:50px;background:#fff;border-radius:25px;box-shadow:0 15px 40px #0000001f;border:1px solid var(--border-light);direction:rtl;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;font-family:sans-serif}.log-in-form h1,.btns{grid-column:span 2;text-align:center}.log-in-form h1{color:var(--dark-purple);font-size:2.5rem;margin-bottom:10px;font-weight:800}.btns{display:flex;justify-content:center;gap:30px;margin-bottom:20px;border-bottom:1px solid #eee;padding-bottom:10px}.log-in-form input{height:60px;padding:0 20px;border:1px solid #ddd;border-radius:12px;outline:none;font-size:1.1rem;background-color:#f9f9f9;transition:all .3s ease;width:100%;box-sizing:border-box}.log-in-form input:focus{border-color:var(--primary-purple);background-color:#fff;box-shadow:0 0 8px #cc30d11a}.log-in-form input:nth-last-of-type(1):nth-of-type(odd){grid-column:span 2}.log-in-form button:not(.btn1){grid-column:span 2;height:65px;background:var(--primary-purple);color:#fff;border:none;border-radius:12px;font-size:1.3rem;font-weight:700;cursor:pointer;margin-top:10px;transition:all .3s ease;box-shadow:0 8px 20px #cc30d140}.log-in-form button:not(.btn1):hover{background-color:var(--dark-purple);transform:translateY(-2px)}.btn1{background:none;border:none;padding:10px 20px;cursor:pointer;font-size:1.1rem;font-weight:600;color:#999;border-bottom:3px solid transparent}.btn1.active{color:var(--primary-purple);border-bottom:3px solid var(--primary-purple)}@media(max-width:750px){.log-in-form{grid-template-columns:1fr;margin:20px;padding:30px 20px}.log-in-form h1,.btns,.log-in-form button:not(.btn1),.log-in-form input:nth-last-of-type(1):nth-of-type(odd){grid-column:span 1}.log-in-form h1{font-size:1.8rem}}.header{width:100%;height:100px;z-index:1000;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:15px;padding:20px}.mainLinks{width:75%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:30px;direction:rtl}.mainLinks a{color:#ffffffec;font-size:20px;text-decoration:none;position:relative;padding-bottom:8px;transition:all .3s ease}.mainLinks a.active{color:#fff;font-weight:700}.mainLinks a.active:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:#fff;border-radius:10px;box-shadow:0 0 10px #ffffff80}.headeBtns{background:#ffffff26;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:10px;padding:8px 16px;cursor:pointer;transition:background .3s}.headeBtns:hover{background:#ffffff4d}.left{width:25%;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:5px}@media(max-width:1000px){.header{flex-direction:column;padding-top:20px;height:auto;min-height:150px}.mainLinks{justify-content:center;width:100%;gap:15px}.left{width:50%;margin-right:30%;margin-top:10px}}.footer{bottom:0;height:100px;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:row;font-size:x-large;color:#fff}.rightFooter{width:50%;display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center}.leftFooter{width:50%;height:100%;display:flex;flex-direction:column;gap:20px;align-items:end;justify-content:center}.contact-form{width:60%;height:100%;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center}@media(max-width:1000px){.footer{flex-direction:column;padding-top:20px;height:auto}.rightFooter,.leftFooter{width:100%;justify-content:left;align-items:end}.rightFooter{margin-bottom:20px}.contact-form{width:100%}}:root{--soft-pink: #fce4ec;--deep-pink: #f06292;--dusty-rose: #d81b60;--glass-white: rgba(255, 255, 255, .85)}.sidebar{position:fixed;top:0;right:0;width:220px;height:100vh;background:linear-gradient(180deg,#fffafb 0%,var(--soft-pink) 100%);padding-top:80px;transform:translate(100%);transition:transform .55s cubic-bezier(.4,0,.2,1);z-index:1500;display:flex;flex-direction:column;align-items:flex-start;box-shadow:-5px 0 25px #f062921a}.sidebar.open{transform:translate(0)}.sidebar a,.sidebar button,.sidebar div a{all:unset;display:block;color:#880e4f;padding:15px 25px;text-align:right;direction:rtl;cursor:pointer;width:100%;font-weight:500;box-sizing:border-box;position:relative;transition:all .3s ease}.sidebar a:after,.sidebar button:after{content:"";position:absolute;right:0;top:0;height:100%;width:0;background:var(--deep-pink);transition:width .3s ease}.sidebar a:hover,.sidebar button:hover{background:#ffffff80;color:var(--dusty-rose);padding-right:32px}.sidebar a:hover:after,.sidebar button:hover:after{width:5px}.divOfTatLinks{width:100%;display:flex;flex-direction:column;align-items:flex-start;padding-right:20px;background:#fff3;border-right:1px solid rgba(240,98,146,.1)}.sidebar-btn{position:fixed;top:24px;right:20px;z-index:1600;font-size:20px;padding:10px 14px;border-radius:12px;cursor:pointer;background:none;color:var(--deep-pink);border:1px solid rgba(240,98,146,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 4px 15px #f062921a;transition:all .3s ease}.sidebar-btn:hover{color:var(--dusty-rose)}.sidebar-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0003;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1400;cursor:pointer}:root{--main-pink: #c690e6;--light-pink: #f8f0ff;--border-color: #eee;--text-dark: #333;--text-gray: #666}.btnAndTabl{display:flex;flex-direction:column;align-items:flex-end;gap:15px;width:100%;box-sizing:border-box;min-height:85px}.btnAdd{background-color:var(--main-pink);color:#fff;border:none;padding:10px 25px;border-radius:8px;cursor:pointer;font-weight:600;transition:.3s;box-shadow:0 4px 10px #c690e633}.btnAdd:hover{filter:brightness(1.05);transform:translateY(-1px)}.table-container{width:100%;direction:rtl}.responsive-table{width:100%;overflow-x:auto;background:#fff;border-radius:12px;border:1px solid var(--border-color)}.custom-table{width:100%;border-collapse:collapse;min-width:800px}.custom-table th{background-color:#fafafa;color:var(--text-dark);font-weight:700;text-align:right;padding:18px 20px;border-bottom:2px solid var(--main-pink)}.custom-table td{padding:15px 20px;border-bottom:1px solid #f5f5f5;color:var(--text-gray);vertical-align:middle}.main-cell{color:var(--text-dark)!important;font-weight:600}.custom-table tr:hover{background-color:var(--light-pink)}.flex-actions{display:flex;gap:10px}.icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--border-color);background-color:#fff;cursor:pointer;transition:.2s;font-size:1.1rem}.icon-btn.edit{color:var(--main-pink)}.icon-btn.edit:hover{background-color:var(--main-pink);color:#fff}.icon-btn.delete{color:#ff5e5e}.icon-btn.delete:hover{background-color:#ff5e5e;color:#fff}.empty-state{padding:40px;text-align:center;color:#999}:root{--main-pink: #c690e6;--light-pink: #f8f0ff;--text-gray: #888;--transition: all .3s ease}.wrapperBtns{display:flex;flex-direction:row;background-color:#fff;box-shadow:0 4px 15px #0000000d;border-radius:12px;justify-content:flex-start;align-items:center;padding:6px;gap:8px;width:fit-content;margin:20px 0 20px auto;border:1px solid #f0f0f0}.toggle-btn{display:flex;align-items:center;justify-content:center;height:40px;padding:0 18px;background-color:transparent;color:var(--text-gray);border:none;border-radius:8px;gap:6px;font-size:15px;font-weight:500;cursor:pointer;transition:var(--transition)}.toggle-btn.active{color:var(--main-pink);background-color:var(--light-pink);font-weight:600}@media(max-width:700px){.wrapperBtns{display:grid;grid-template-columns:1fr 1fr;width:calc(100% - 20px);margin:20px auto;justify-content:center;gap:8px;box-sizing:border-box}.toggle-btn{width:100%;font-size:14px;padding:0 5px;height:48px}.icon{font-size:1rem}}.modal-overlay{position:fixed;inset:0;background:#0000004d;display:flex;justify-content:center;align-items:center}.modal{background:#fff;width:500px;padding:25px;border-radius:12px}.modal-header{display:flex;justify-content:space-between;direction:rtl;align-items:center;margin-bottom:20px}.modal-body{display:flex;flex-direction:column;gap:10px;align-items:end}.modal-body input{padding:10px;border-radius:8px;border:1px solid #ddd}.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.add{background:#6b5cff;color:#fff;border:none;padding:8px 18px;border-radius:8px}.modal-footer button{cursor:pointer}.personalArea{margin-top:50px;display:flex;flex-direction:column;gap:40px;align-items:end;width:95%;padding:10%;margin-bottom:50px;background-color:#fff;border-radius:20px}.personalArea.cards{display:grid;grid-template-columns:repeat(3,30%);gap:5%;min-height:200px;border:2 dashed #ccc}.user-card{width:100%;background-color:#fff;border-radius:12px;padding:26px;box-shadow:0 2px 8px #0000001a}.user-info{display:flex;justify-content:right;align-items:center;gap:20px}.user-text{display:flex;flex-direction:column;text-align:right}.userName_andIcon{flex-direction:row;gap:10px;display:flex;align-items:center}.user-name{font-weight:700;font-size:22px;margin-bottom:4px}.user-email{font-size:16px;color:#555}.user-avatar img{width:48px;height:48px;border-radius:50%;object-fit:cover}.default-avatar{width:48px;height:48px;border-radius:50%;background-color:#ddd;display:flex;align-items:center;justify-content:center;font-size:24px}@media(max-width:800px){.personalArea{width:100%;padding:5%;align-items:center}}.profile-container{width:100%;display:flex;flex-direction:column;align-items:start;margin:20px auto;padding:20px;background-color:#fff;border-radius:12px;box-shadow:0 4px 10px #0000001a;direction:rtl}.profile-section,.profile-section.security{width:100%}.profile-container h2{text-align:center;color:#333;margin-bottom:30px}.profile-section{display:flex;flex-direction:column;align-items:start;gap:15px;margin-bottom:25px}.profile-section input{padding:12px;border:1px solid #ddd;border-radius:6px;font-size:16px;outline:none;transition:border-color .3s}.profile-section input:focus{border-color:#007bff}.profile-container button{padding:12px;background-color:#007bff;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:700;transition:background .3s}.profile-container button:hover{background-color:#0056b3}.btn-danger{background-color:#dc3545!important}.btn-danger:hover{background-color:#c82333!important}.warning{color:#856404;background-color:#fff3cd;padding:10px;border-radius:4px;font-size:14px}.songText{height:600px;width:100%;font-size:medium}.tips{height:200px;width:100%;font-size:medium}p,li,h3{direction:rtl;padding:2px}.formAndScan{display:flex;flex-direction:row;width:100%;justify-content:right;padding:50px;gap:20px;z-index:10;height:auto}.formBtns{display:flex;flex-direction:row;justify-content:right}.addSong{display:flex;flex-direction:column;align-items:end;background-color:var(--elements-color);box-shadow:0 4px 10px #0000004d;border-radius:10px;padding:5%;max-width:1000px;gap:13px;height:auto!important}.points{display:flex;flex-direction:column;align-items:end;gap:4px}.points div{direction:rtl}.vewChords{width:70%;height:100%;background-color:var(--elements-color);border-radius:10px;padding:2%}.inputsDiv{width:100%;display:flex;flex-direction:row;gap:20px;direction:rtl}.addSong,.vewChords{flex:1;height:100%}.titlle-logo{display:flex;flex-direction:row;direction:rtl;align-items:center;gap:10px}@media(max-width:1000px){.vewChords{width:100%}.addSong{width:100%!important;margin:0}.formAndScan{flex-direction:column;padding:0}.inputsDiv{flex-direction:column}}:root{--bg: #f5dfdf5b;--color: #cc30d1a7}.wrappwr{position:relative;min-height:100vh;display:flex;flex-direction:row;justify-content:flex-end;width:95%}.chordsOfSong{display:flex;flex-direction:column;align-items:flex-end;gap:50px;border:1px solid transparent;background-color:#fff;border-radius:20px;box-shadow:0 2px 8px #0000001a;width:100%;padding:5%}.chords{display:flex;flex-direction:column;flex-wrap:wrap;direction:ltr}.char{background-color:var(--bg);color:var(--color);padding:3px}.chartrue{background-color:#b6ddea;color:#20b2aa;cursor:pointer;position:relative;display:inline-block}.custom-tooltip{z-index:9999;visibility:hidden;background-color:#333;color:#fff;text-align:center;border-radius:6px;padding:8px;position:absolute;z-index:100;bottom:125%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .3s;font-size:12px;line-height:1.4;box-shadow:0 4px 10px #0000004d;pointer-events:none;z-index:10000!important;direction:rtl}.custom-tooltip:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#333 transparent transparent transparent}.chartrue:hover .custom-tooltip{visibility:visible;opacity:1;z-index:10000}.chartrue.from-ai{color:#8e44ad;font-weight:700;border-bottom:1px dashed #8e44ad}.information{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.utubLink{width:70%;height:400px}.modolationDiv{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:20px}.plus,.minus{width:50px;height:40px;display:flex;flex-direction:row;justify-content:center;cursor:pointer}.img{width:50px;height:40px}.scale{font-size:larger;font-weight:700}@media(max-width:700px){.chordsOfSong{width:100%}.chordsOfSong h1{font-size:large}.wrappwr{padding:2px;width:100%}.utubLink{width:100%;height:300px}}h3{direction:rtl}h5{padding:0;margin:0}.like{display:flex;align-items:center;justify-content:center}.likeImg{width:20px;height:20px;position:relative}.divBtns{position:fixed;left:40px;bottom:40px;display:flex;flex-direction:column;align-items:center;gap:12px;z-index:1000}.btn-main{padding:12px 24px;border:none;border-radius:50px;background:#2563eb;color:#fff;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #2563eb33;transition:all .3s ease;min-width:120px}.btn-main:hover{background:#1d4ed8;transform:translateY(-2px);box-shadow:0 6px 15px #2563eb4d}.btn-main.active{background:#ef4444;box-shadow:0 4px 12px #ef444433}.speed-controls{display:flex;background:#fff;padding:6px;border-radius:30px;box-shadow:0 2px 10px #0000001a;border:1px solid #f1f5f9;gap:5px}.btn-speed{width:35px;height:35px;border-radius:50%;border:none;background:#f8fafc;color:#64748b;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.btn-speed:hover{background:#e2e8f0;color:#0f172a}.speed-label{font-size:11px;color:#94a3b8;margin-top:-5px}:root{--chord-title-color: #c690e6;--active-key-color: #c690e6;--active-black-key-color: #c690e6;--inactive-key-color: #ffffff;--inactive-black-key-color: #333333;--border-color: #ddd;--text-color: #666;--key-text-white: #ffffff;--key-text-black: #000000}.piano-card{display:inline-block;padding:15px;border-radius:5px;text-align:center;background-color:#fff;box-shadow:0 4px 12px #00000014;font-family:system-ui,-apple-system,sans-serif;margin:10px}.white-key{stroke:#d1d8dc;stroke-width:.5;transition:fill .3s ease}.black-key{stroke:#1a1a1a;stroke-width:.5;transition:fill .3s ease}.chord-svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.05))}.chord-title{margin-bottom:12px;font-weight:800;font-size:1.1rem;color:#2c3e50;direction:ltr}.key-label{pointer-events:none;font-weight:700;font-size:3px}.notes-display{margin-top:5px;font-weight:500;color:var(--text-color);font-size:14px;letter-spacing:.5px}@media(max-width:600px){.piano-card{padding:4px;margin:5px}}.chords-viewer-container{display:flex;flex-direction:column;align-items:end;gap:20px;width:100%}.tips{width:70%;direction:rtl;margin-bottom:50px}.chords-grid{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:end;gap:15px;width:100%}@media(max-width:700px){.chords-grid{justify-content:end;align-items:center;gap:5px}}:root{--chord-bg: #ffffff;--chord-primary: #2196F3;--chord-text: #2c3e50;--chord-lines: #bdc3c7;--chord-danger: #e74c3c;--chord-secondary: #95a5a6;--chord-card-radius: 12px}.guitar-chord-card{display:inline-block;text-align:center;margin:8px;padding:5px;background-color:var(--chord-bg);border-radius:var(--chord-card-radius);box-shadow:0 4px 10px #00000014}.chord-title{margin-bottom:2px;font-weight:800;font-size:1.1rem;color:var(--chord-text)}.fret-line,.string-line{stroke:var(--chord-lines);stroke-width:1}.nut-line{stroke:var(--chord-text);stroke-width:4}.barre-rect{fill:var(--chord-primary);opacity:.9}.finger-circle{fill:var(--chord-primary)}.finger-text{fill:#fff;font-size:10px;font-weight:700;text-anchor:middle}.open-string-circle{fill:none;stroke:var(--chord-secondary);stroke-width:1.5}.muted-string-x{fill:var(--chord-danger);font-size:14px;font-weight:700}.fret-number{fill:var(--chord-secondary);font-size:12px}@media(max-width:700px){.guitar-chord-card{margin:5px;padding:2px}}.catDisplay1{width:100%;padding:2%;direction:rtl;font-family:Arial,Helvetica,sans-serif}.catDisplay1 h3{color:#6d1b70;font-size:2.2rem;border-bottom:3px solid #cc30d1;display:inline-block;padding-bottom:10px;margin-bottom:40px}.categories-list-container{display:flex;flex-direction:column;gap:15px}.cat-row{background:#fff;border-radius:15px;padding:25px 35px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;border-right:6px solid #cc30d1;box-shadow:0 4px 10px #00000014;transition:all .3s ease}.cat-row:hover{background-color:#f7e6f0;transform:translate(-5px)}.cat-main-content{display:flex;align-items:center;gap:25px}.cat-name{font-size:1.5rem;font-weight:700;color:#1e272e}.cat-count{font-size:1rem;color:#6d1b70;background:#fdf5f9;padding:5px 15px;border-radius:50px}.category-drawer{max-height:0;overflow:hidden;transition:all .5s cubic-bezier(.4,0,.2,1);background-color:#fdfcff;border-radius:0 0 15px 15px;margin-top:-10px;padding:0 40px;border:1px solid rgba(237,242,247,.8);border-top:none}.category-drawer.expanded{max-height:1000px;padding:30px 40px;box-shadow:inset 0 4px 12px #00000008}.drawer-song-row{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid rgba(204,48,209,.1);text-align:right}.drawer-song-row:last-child{border-bottom:none}.drawer-song-info{display:flex;flex-direction:column;gap:5px}.drawer-song-name{font-size:1.3rem;font-weight:800;color:#6d1b70}.drawer-song-artist{font-size:1rem;color:#888}.drawer-chords-btn{background:transparent;color:#cc30d1;border:2px solid #cc30d1;padding:10px 25px;border-radius:50px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .3s ease}.drawer-chords-btn:hover{background:#cc30d1;color:#fff}.arrow-icon{font-size:1.2rem}.cat-arrow-icon{font-size:1.2rem;color:#cc30d1;transition:transform .4s ease;display:flex;align-items:center;justify-content:center;width:30px;height:30px}.cat-arrow-icon.rotate{transform:rotate(180deg)}.arrow-left{font-size:1.2rem;margin-right:8px;transition:transform .3s ease}.drawer-chords-btn:hover .arrow-left{transform:translate(-5px)}.drawer-loader,.no-songs{padding:20px;text-align:center;color:#888;font-style:italic}.drawer-song-row{direction:rtl}:root{--pp: #cc30d1;--dp: #6d1b70;--lp: #f9eefa;--mp: #e4b8e6;--ap: #f0d6f2}.searchPage{width:100%;direction:rtl;font-family:Segoe UI,Arial,sans-serif;background:var(--color-background-tertiary)}.searchHero{width:100%;padding:48px 40px 56px;text-align:center;position:relative;overflow:hidden}.searchHero:before{content:"";position:absolute;top:-60px;left:-60px;width:220px;height:220px;border-radius:50%;background:#ffffff0a}.searchHero:after{content:"";position:absolute;bottom:-80px;right:-40px;width:280px;height:280px;border-radius:50%;background:#ffffff08}.searchHero h1{font-size:2.4rem;font-weight:700;color:#fff;margin-bottom:8px;position:relative;display:flex;align-items:center;justify-content:center;gap:10px}.searchHero p{font-size:1rem;color:#ffffffa6;position:relative}.heroIcon{width:28px;height:28px;fill:#fff;opacity:.9}.formWrap{width:100%;padding:0 40px;margin-top:-30px;position:relative;box-sizing:border-box}.formCard{background:#fff;border-radius:20px;border:.5px solid rgba(0,0,0,.08);box-shadow:0 8px 32px #6d1b701a;padding:36px 40px 32px;width:100%;box-sizing:border-box}.fieldsGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:20px}.fieldGroup{display:flex;flex-direction:column;gap:7px}.fieldWide{grid-column:span 2}.fieldLabel{font-size:11px;font-weight:600;color:var(--dp);letter-spacing:.5px;text-transform:uppercase}.searchInput{height:52px;padding:0 16px;border:1.5px solid var(--mp);border-radius:12px;font-size:14px;outline:none;background:var(--lp);color:#333;transition:all .2s;width:100%;box-sizing:border-box}.searchInput::placeholder{color:#c09ac2;font-size:13px}.searchInput:focus{border-color:var(--pp);background:#fff;box-shadow:0 0 0 4px #cc30d11f}.chordsInput{direction:ltr;text-align:right}.chordNote{background:var(--lp);border-right:3px solid var(--pp);border-radius:0 8px 8px 0;padding:10px 14px;font-size:12px;color:var(--dp);line-height:1.7}.chordNote code{background:var(--mp);padding:1px 6px;border-radius:4px;font-family:monospace;font-size:11px}.btnRow{display:flex;gap:12px;align-items:center}.btnSearch{flex:1;height:56px;background:var(--pp);color:#fff;border:none;border-radius:12px;font-size:1.05rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .2s,transform .1s}.btnSearch:hover{background:var(--dp)}.btnSearch:active{transform:scale(.99)}.btnSearch:disabled{opacity:.7;cursor:default}.searchIcon{width:20px;height:20px}.btnClear{height:56px;padding:0 24px;background:transparent;border:1.5px solid var(--mp);border-radius:12px;color:var(--dp);font-size:.95rem;cursor:pointer;transition:all .2s;white-space:nowrap}.btnClear:hover{background:var(--lp)}.quickTitle{font-size:11px;font-weight:600;color:#999;letter-spacing:.4px;text-transform:uppercase;padding:28px 40px 12px}.quickGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 40px 40px}.quickCard{background:#fff;border:.5px solid rgba(0,0,0,.08);border-radius:14px;padding:16px 18px;cursor:pointer;transition:all .18s;display:flex;flex-direction:column;gap:4px}.quickCard:hover{border-color:var(--pp);box-shadow:0 0 0 3px #cc30d114}.quickSong{font-size:14px;font-weight:600;color:#222}.quickArtist{font-size:12px;color:#888}.quickTag{margin-top:4px;display:inline-block;background:var(--lp);color:var(--dp);font-size:11px;padding:2px 10px;border-radius:10px;border:1px solid var(--mp)}.spinner{width:22px;height:22px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:900px){.fieldsGrid{grid-template-columns:repeat(2,1fr)}.fieldWide{grid-column:span 2}.quickGrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.fieldsGrid{grid-template-columns:1fr}.fieldWide{grid-column:span 1}.quickGrid{grid-template-columns:1fr}.formWrap{padding:0 16px}.formCard{padding:20px}.quickTitle,.quickGrid{padding-right:16px;padding-left:16px}.searchHero{padding:32px 20px 48px}.searchHero h1{font-size:1.8rem}}.box{width:100%;padding:2% 5% 5%;display:flex;flex-direction:column;align-items:flex-end;gap:5px;background-color:#fff;border-radius:20px;box-shadow:0 2px 8px #0000001a}