html{scrollbar-gutter:stable}body,html{overflow-x:hidden}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}.Navbar{background-color:#282c34;box-shadow:0 2px 4px #0000001a;position:-webkit-sticky;position:sticky;top:0;width:100%;z-index:1000}.nav-container{height:70px;justify-content:space-between;padding:0 20px;width:100%}.nav-brand,.nav-container{align-items:center;display:flex}.nav-brand h1{color:#fff;font-size:2rem;font-weight:700;letter-spacing:2px;margin:0}.nav-brand-link{color:inherit;cursor:pointer;text-decoration:none}.nav-actions{align-items:center;display:flex;height:70px;position:absolute;right:0;top:0}.nav-login-btn{background-color:initial;border:none;border-left:3px solid #0000;color:#fff;cursor:pointer;display:block;font-size:1rem;font-weight:500;margin-right:20px;padding:12px 24px;text-decoration:none;transition:all .2s ease}.nav-login-btn:hover{background-color:#e9ecef;border-left-color:#007bff;color:#212529}.nav-login-btn:active{background-color:#dee2e6}.user-menu-container{margin-right:20px;position:relative}.user-name-btn{align-items:center;background-color:initial;border:none;border-left:3px solid #0000;color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:500;min-height:50px;padding:12px 18px;transition:all .2s ease}.user-name-btn:hover{background-color:#e9ecef;border-left-color:#007bff;color:#212529}.user-name-btn:active{background-color:#dee2e6}.user-dropdown{animation:dropdownSlide .2s ease-out;background:#fff;border-radius:0;box-shadow:0 8px 24px #00000026;min-width:220px;overflow:hidden;position:absolute;right:0;top:calc(100% + 8px);z-index:2000}@keyframes dropdownSlide{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.user-dropdown-header{background:#f8f9fa;border-bottom:1px solid #e9ecef;padding:15px}.user-dropdown-name{color:#212529;font-size:1rem;font-weight:600;margin-bottom:4px}.user-dropdown-email{color:#6c757d;font-size:.85rem}.user-dropdown-divider{background:#e9ecef;height:1px}.user-dropdown-item{align-items:center;background:#fff;border:none;color:#495057;cursor:pointer;display:flex;font-size:.95rem;font-weight:500;gap:10px;padding:12px 15px;text-align:left;transition:all .2s ease;width:100%}.user-dropdown-item:hover{background:#f8f9fa;color:#212529}.user-dropdown-item.logout{color:#dc3545}.user-dropdown-item.logout:hover{background:#fff5f5;color:#c82333}.hamburger-menu{background:none;border:none;cursor:pointer;display:none;flex-shrink:0;margin-right:10px;padding:8px;z-index:1001}.hamburger-icon{display:flex;flex-direction:column;height:14px;justify-content:space-between;position:relative;width:18px}.hamburger-icon span{background-color:#fff;border-radius:1px;display:block;height:2px;transform-origin:center;transition:all .3s ease;width:100%}.hamburger-icon.open span:first-child{transform:translateY(6px) rotate(45deg)}.hamburger-icon.open span:nth-child(2){opacity:0;transform:scale(0)}.hamburger-icon.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}@media (max-height:768px) and (max-width:1024px),(max-width:768px){.hamburger-menu{align-items:center;display:flex;justify-content:center;margin-left:-4px;margin-right:8px;padding:8px 4px}.nav-container{justify-content:flex-start;padding:0 12px}.nav-brand{flex:1 1}.nav-brand h1{font-size:1.5rem;letter-spacing:1px}.nav-login-btn{font-size:.9rem;padding:8px 16px}.nav-login-btn,.user-menu-container{margin-right:12px}.user-name-btn{font-size:.9rem;min-height:45px;padding:10px 14px}.user-dropdown{min-width:200px;right:-12px}}@media (max-width:480px){.hamburger-menu{margin-left:-2px;margin-right:6px;padding:6px 2px}.nav-container{padding:0 8px}.nav-brand h1{font-size:1.3rem}.nav-login-btn{font-size:.85rem;padding:6px 12px}.nav-login-btn,.user-menu-container{margin-right:8px}.user-name-btn{font-size:.85rem;min-height:42px;padding:8px 12px}.user-dropdown{min-width:180px;right:-8px}.user-dropdown-header{padding:12px}.user-dropdown-name{font-size:.95rem}.user-dropdown-email{font-size:.8rem}.user-dropdown-item{font-size:.9rem;padding:10px 12px}}.Sidebar{background-color:#f8f9fa;border-right:1px solid #e9ecef;height:calc(100vh - 70px);overflow-y:auto;width:160px}.sidebar-content{display:flex;flex-direction:column;height:100%;padding:0}.sidebar-nav{flex:1 1;width:100%}.sidebar-menu{list-style:none}.sidebar-item,.sidebar-menu{margin:0;padding:0}.sidebar-link{align-items:center;border-left:3px solid #0000;color:#495057;display:flex;font-size:1rem;font-weight:500;margin:8px;min-height:50px;padding:10px;text-decoration:none;transition:all .2s ease}.sidebar-link:hover{background-color:#e9ecef;border-left-color:#007bff;color:#212529;transform:translateX(4px)}.sidebar-link:hover .sidebar-icon-svg{color:#212529}.sidebar-link.active{background-color:#e9ecef;border-left-color:#007bff;color:#212529;transform:translateX(4px)}.sidebar-link.active .sidebar-icon-svg{color:#212529}.sidebar-link:active{background-color:#dee2e6}.sidebar-icon{color:#495057;flex-shrink:0;height:40px;margin-right:8px;object-fit:contain;width:40px}.sidebar-icon-svg{box-sizing:border-box;padding:8px}.sidebar-text{font-size:1.1rem;font-weight:600}.sidebar-bottom{margin-top:auto;padding-top:20px}@media (max-width:1024px){.sidebar-icon{display:block;flex-shrink:0;height:40px;width:40px}.sidebar-text{font-size:1.05rem}}@media (max-height:768px) and (max-width:1024px),(max-width:768px){.Sidebar{width:200px}.sidebar-link{min-height:55px;padding:12px}.sidebar-icon{display:block;flex-shrink:0;height:38px;width:38px}.sidebar-text{font-size:1rem}}@media (max-width:480px){.Sidebar{width:180px}.sidebar-link{min-height:50px;padding:10px}.sidebar-icon{display:block;flex-shrink:0;height:35px;width:35px}.sidebar-text{font-size:.95rem}}.share-button{align-items:center;background:#0000;border:none;cursor:pointer;display:flex;justify-content:center;padding:0;position:relative}.share-button svg{color:#6c757d}.share-button:hover svg{color:#0d6efd}.share-button:focus{outline:none}.share-button-feedback{color:#198754;font-size:12px;left:50%;margin-top:4px;position:absolute;top:100%;transform:translateX(-50%);white-space:nowrap}.search-header{box-sizing:border-box;margin:0 auto;max-width:680px;padding:0;position:relative;width:100%}.search-container{background:#f8f9fa;border:none;box-shadow:0 4px 8px #0000001a;gap:10px;padding:0}.input-wrapper,.search-container{align-items:center;border-radius:8px;display:flex}.input-wrapper{background:#fff;box-shadow:0 1px 3px #0000001a;flex:1 1;gap:8px;padding:8px 12px}.search-icon-left{color:#6c757d;flex-shrink:0;height:18px;width:18px}.search-bar{-webkit-text-fill-color:#333;background:#0000;border:none;border-radius:4px;color:#333;flex:1 1;font-size:16px;opacity:1;outline:none;padding:4px 8px}.search-bar::placeholder{color:#6c757d;opacity:1}.search-bar:active,.search-bar:focus{-webkit-text-fill-color:#333;color:#333}.lang-toggle{align-items:center;background:#007bff;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;flex-shrink:0;font-size:12px;font-weight:700;height:32px;justify-content:center;padding:6px 10px;text-align:center;transition:background-color .2s;width:45px}.lang-toggle:hover{background:#0056b3}.lang-toggle.english{background:#28a745}.lang-toggle.english:hover{background:#1e7e34}.search-dropdown{background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;left:0;margin-top:8px;max-height:400px;overflow-y:auto;position:absolute;right:0;top:100%;z-index:1000}.dropdown-error,.dropdown-loading,.dropdown-no-results{color:#6c757d;padding:20px;text-align:center}.dropdown-error{color:#dc3545}.dropdown-results{padding:8px 0}.dropdown-result-item{align-items:center;border-bottom:1px solid #f8f9fa;color:#333;cursor:pointer;display:flex;gap:8px;padding:12px 16px;transition:background-color .2s}.dropdown-result-item:hover{background-color:#f8f9fa}.dropdown-result-item:last-child{border-bottom:none}.result-content{display:flex;flex:1 1;flex-direction:column;gap:4px;min-width:0}.result-actions{flex-shrink:0}.result-title{color:#333;font-size:14px;font-weight:600;line-height:1.2;margin:0}.result-level{color:#6c757d;font-size:12px;font-weight:500;margin:0}.result-verse{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;color:#495057;display:-webkit-box;font-size:12px;line-height:1.3;margin:0;overflow:hidden}.dropdown-more{background-color:#f8f9fa;border-top:1px solid #e9ecef;color:#6c757d;cursor:pointer;font-size:12px;font-style:italic;padding:12px 16px;text-align:center;transition:background-color .2s ease}.dropdown-more:hover{background-color:#e9ecef;color:#495057}@media (max-width:768px){.search-header{max-width:100%;padding:0 10px}.search-container{padding:0}.input-wrapper{padding:6px 10px}.search-bar{font-size:15px}.lang-toggle{font-size:11px;height:30px;padding:5px 8px;width:40px}.search-dropdown{max-height:350px}.dropdown-result-item{padding:10px 12px}.result-title{font-size:13px}.result-level,.result-verse{font-size:11px}}@media (max-width:480px){.search-header{padding:0 5px}.input-wrapper{gap:6px;padding:5px 8px}.search-bar{font-size:14px}.search-icon-left{height:16px;width:16px}.lang-toggle{font-size:10px;height:28px;width:38px}.search-dropdown{max-height:300px}.dropdown-result-item{padding:8px 10px}.result-title{font-size:12px}.result-level,.result-verse{font-size:10px}}.notation-page{background:#f8f9fa;min-height:100vh;width:100%}.back-btn{align-items:center;background:#0000;border:none;color:#495057;cursor:pointer;display:flex;height:32px;justify-content:center;left:10px;line-height:1;padding:0;position:absolute;top:10px;transition:all .2s ease;z-index:10}.back-btn:hover{color:#4facfe;transform:scale(1.1)}.back-btn:active{transform:scale(1)}.notation-header-actions{position:absolute;right:20px;top:10px;z-index:10}.favorite-btn-notation,.notation-header-actions{align-items:center;display:flex;gap:12px;height:32px}.headphone-icon-btn{align-items:center;background:#0000;border:none;border-radius:50%;color:#495057;cursor:pointer;display:flex;height:32px;justify-content:center;line-height:1;padding:0;transition:all .2s ease;width:32px}.headphone-icon-btn:hover{background-color:#007bff1a;color:#007bff;transform:scale(1.1)}.headphone-icon-btn:active{transform:scale(1)}.headphone-icon-btn.playing{background-color:#28a7451a;color:#28a745}.headphone-icon-btn.playing:hover{background-color:#28a74526;color:#218838}.print-icon-btn{align-items:center;background:#0000;border:none;border-radius:50%;color:#495057;cursor:pointer;display:flex;height:32px;justify-content:center;line-height:1;padding:0;transition:all .2s ease;width:32px}.print-icon-btn:hover{background-color:#007bff1a;color:#007bff;transform:scale(1.1)}.print-icon-btn:active{transform:scale(1)}.delete-icon-btn{align-items:center;background:#0000;border:none;border-radius:50%;color:#495057;cursor:pointer;display:flex;height:32px;justify-content:center;line-height:1;padding:0;transition:all .2s ease;width:32px}.delete-icon-btn:hover{background-color:#007bff1a;color:#007bff;transform:scale(1.1)}.delete-icon-btn:active{transform:scale(1)}.edit-icon-btn{align-items:center;background:#0000;border:none;color:#495057;cursor:pointer;display:flex;height:32px;justify-content:center;line-height:1;padding:0;transition:all .2s ease}.edit-icon-btn:hover{color:#007bff;transform:scale(1.1)}.edit-icon-btn:active{transform:scale(1)}.composition-title-row{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 10px;padding:20px 20px 0}.composition-header-section h1{color:#212529;font-size:2rem;font-weight:600;margin:0;padding:0;text-align:center}.status-badge{padding:.25rem .75rem}.status-badge,.submit-btn{border-radius:4px;font-size:.75rem;white-space:nowrap}.submit-btn{align-items:center;background:#007bff;border:1px solid #007bff;box-sizing:border-box;color:#fff;cursor:pointer;display:flex;font-weight:600;height:18px;justify-content:center;letter-spacing:.5px;margin-left:8px;min-width:55px;padding:0 .5rem;text-transform:uppercase;transition:all .2s ease}.submit-btn:hover:not(:disabled){background:#0056b3;border-color:#0056b3;box-shadow:0 2px 4px #007bff4d;transform:translateY(-1px)}.submit-btn:active:not(:disabled){transform:translateY(0)}.submit-btn:disabled{cursor:not-allowed;opacity:.6;transform:none}.composition-header-section .composition-meta{color:#6c757d;display:block;font-size:.875rem;margin:0 auto;padding:0 20px 20px;text-align:center;width:100%}.notation-content{margin:0 auto;max-width:100%;padding:0 30px 30px;position:relative}.composition-header-section{padding:0;position:relative}.composition-header-section,.notation-section-main,.verse-section{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 15px #0000001a;margin-bottom:30px}.notation-section-main,.verse-section{padding:25px}.notation-section-main h4,.verse-section h4{color:#212529;font-size:1.3rem;font-weight:600;margin:0 0 20px}.verse-text p{color:#495057;font-size:1.1rem;line-height:1.3;margin:0 0 6px}.verse-text p.no-verse{color:#6c757d;font-style:italic;padding:20px;text-align:center}.recordings-upload-section{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 15px #0000001a;margin-bottom:30px;padding:25px}.recordings-upload-section h4{color:#212529;font-size:1.3rem;font-weight:600;margin:0 0 20px}.file-upload-section{margin-bottom:15px}.verse-edit{background:#fff;border:2px solid #007bff;border-radius:6px;box-sizing:border-box;color:#212529;font-family:inherit;font-size:1rem;line-height:1.5;min-height:200px;padding:12px;resize:vertical;width:100%}.verse-edit:focus{border-color:#0056b3;box-shadow:0 0 0 3px #007bff1a;outline:none}.verse-edit::placeholder{color:#6c757d}.notation-section{margin-bottom:30px;transition:all .2s ease}.notation-section[draggable=true]{cursor:move}.notation-section.section-dragging{background:#e3f2fd;border:2px dashed #2196f3;opacity:.5}.notation-section.section-drag-over{border-top:4px solid #2196f3;margin-top:4px}.section-name{color:#212529;font-size:1.2rem;font-weight:600;margin:0 0 15px}.notation-grid{display:flex;flex-direction:column;gap:15px}.notation-row{align-items:stretch;background:#0000;border:1px solid #e9ecef;border-radius:8px;display:flex;flex-direction:row;gap:0;margin-bottom:0;min-width:-webkit-fit-content;min-width:fit-content;overflow:hidden;padding:0;width:100%}.notation-content-area{display:flex;flex:1 1;flex-direction:column;overflow-x:auto}.left-controls{border-right:1px solid #e9ecef}.left-controls,.right-controls{background:#fff;display:flex;flex-direction:column;min-width:60px}.right-controls{border-left:1px solid #e9ecef}.control-cell{align-items:center;display:flex;justify-content:center;padding:4px}.control-cell:last-child{border-bottom:none}.delete-button{padding:4px}.delete-button,.play-button{align-items:center;display:flex;justify-content:center}.play-button{background:#fff;min-height:40px}.line-number{background:#f8f9fa;color:#6c757d;font-size:.7rem;font-weight:600}.play-btn{align-items:center;background:#6c757d;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:32px;justify-content:center;transition:all .2s ease;width:32px}.play-btn:hover{background:#6c757d;transform:scale(1.05)}.play-btn:active{transform:scale(.95)}.play-btn.playing{background:#ff6b35;color:#fff}.play-btn.playing:hover{background:#e55a2b}.section-header{align-items:center;border-bottom:1px solid #e9ecef;display:flex;justify-content:space-between;margin-bottom:15px;padding:10px 0}.section-header-left{align-items:center;display:flex;flex:1 1;gap:12px}.section-drag-handle{align-items:center;color:#6c757d;cursor:grab;display:flex;justify-content:center;margin-right:8px;padding:0 8px;transition:color .2s ease}.section-drag-handle:hover{color:#495057}.notation-section.section-dragging .section-drag-handle,.section-drag-handle:active{cursor:grabbing}.section-play-btn{align-items:center;background:#fff;border:1px solid #dee2e6;border-radius:6px;color:#495057;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:6px;padding:8px 16px;transition:all .2s ease}.section-play-btn:hover{background:#f8f9fa;border-color:#adb5bd;box-shadow:0 2px 6px #00000026;transform:translateY(-1px)}.section-play-btn:active{transform:translateY(0)}.section-play-btn.playing{background:#ff6b35;border-color:#ff6b35;color:#fff}.section-play-btn.playing:hover{background:#e55a2b;border-color:#e55a2b}.notation-cell.highlighted{animation:cellGlow .3s ease-in-out;animation:cellGlow var(--highlight-duration,.3s) ease-in-out;background-color:#fff3cd;box-shadow:inset 0 0 0 2px #ffc107;position:relative;z-index:1}@keyframes cellGlow{0%{box-shadow:inset 0 0 0 2px #ffc107}50%{box-shadow:inset 0 0 0 3px #ffc107}to{box-shadow:inset 0 0 0 2px #ffc107}}.beat-labels{background:#f8f9fa;border:none;border-radius:0;display:flex;flex-wrap:nowrap;gap:0;justify-content:flex-start;margin-bottom:0}.beat-label{align-items:center;background:#0000;border:none;box-sizing:border-box;color:#6c757d;display:flex;flex:1 1;font-size:.7rem;font-weight:600;justify-content:center;min-width:50px;padding:4px 2px;text-align:center;width:auto}.cells-container{background:#fff;border:none;border-radius:0;display:flex;flex-wrap:nowrap;gap:0;justify-content:flex-start;width:100%}.notation-cell{align-items:center;background:#0000;border:none;box-sizing:border-box;display:flex;flex:1 1;flex-direction:column;height:46px;min-width:50px;padding:6px 4px;width:auto}.notation-cell[data-beat=K],.notation-cell[data-beat=S],.notation-cell[data-beat=T]{background:#0000;border-left:1px solid #ced4da}.beat-label[data-beat-marker=K],.beat-label[data-beat-marker=S],.beat-label[data-beat-marker=T]{font-weight:400}.note{align-items:center;color:#212529;display:flex;flex-direction:column;font-family:Noto Sans Gurmukhi,Gurmukhi MT,Arial,sans-serif;font-size:.9rem;font-weight:600;justify-content:center;margin-bottom:4px;min-height:1.2em;position:relative}.octave-lower{bottom:-.4em}.octave-lower,.octave-upper{color:inherit;font-size:1.2em;font-weight:700;left:.1em;position:absolute}.octave-upper{top:-.8em}.superscript-notes{align-items:flex-start;display:flex;flex-direction:row;justify-content:center;line-height:1;position:relative;vertical-align:initial}.complex-compound-notes,.double-notes{align-items:center;display:flex;flex-direction:row;gap:0;justify-content:center;line-height:1;position:relative}.compound-base,.compound-middle{display:inline}.compound-last{display:inline;position:relative}.superscript-note{font-size:.7rem;line-height:1;margin-right:2px;transform:translateY(-4px)}.base-note{display:inline-block;font-size:.9rem;line-height:1;position:relative}.text{align-items:center;color:#6c757d;display:flex;font-size:.7rem;justify-content:center;min-height:1em;text-align:center}@media (min-width:1920px){.beat-label,.notation-cell{max-width:90px}}@media (max-width:768px){.notation-content{padding:15px 10px 50px}.composition-title-row{gap:8px;padding:15px 15px 0}.composition-header-section h1{font-size:1.5rem}.status-badge{font-size:.65rem;padding:.2rem .6rem}.back-btn{height:40px;left:10px;top:10px;width:40px}.composition-header-section .composition-meta{font-size:.8rem;padding:0 15px 15px}.notation-section-main,.verse-section{-webkit-overflow-scrolling:touch;overflow-x:auto;padding:15px 20px 15px 15px}.notation-section-main h4,.verse-section h4{font-size:1.1rem}.verse-text p{font-size:1rem}.verse-edit{font-size:.95rem;padding:10px}.recordings-upload-section{padding:15px 20px}.recordings-upload-section h4{font-size:1.1rem}.recording-controls{align-items:stretch;flex-direction:column}.recording-artist-input,.recording-quality-select,.recording-title-input{min-width:0;min-width:auto;width:100%}.play-recording-btn,.recording-duration,.remove-recording-btn{align-self:flex-start}.section-name{font-size:1.1rem}.notation-row{-webkit-overflow-scrolling:touch}.notation-grid,.notation-row{overflow-x:visible}.left-controls,.right-controls{min-width:50px}.beat-label,.notation-cell{min-width:45px;padding:5px 3px}.notation-cell{height:42px}.beat-label{font-size:.65rem;padding:3px 2px}.note{font-size:.85rem}.text{font-size:.65rem}.play-btn{height:28px;width:28px}.section-play-btn{display:none}.notation-section,.section-header{min-width:-webkit-fit-content;min-width:fit-content}.section-header{margin-left:0;margin-right:0;padding:10px 0}.section-name{flex:1 1;white-space:nowrap}.notation-grid{min-width:-webkit-fit-content;min-width:fit-content}}@media (max-width:480px){.notation-content{padding:10px 5px 50px}.composition-title-row{gap:6px;margin:0 0 8px;padding:12px 12px 0}.composition-header-section h1{font-size:1.3rem}.status-badge{font-size:.6rem;padding:.15rem .5rem}.back-btn{height:36px;left:8px;top:8px;width:36px}.back-btn svg{height:20px;width:20px}.composition-header-section .composition-meta{font-size:.75rem;padding:0 12px 12px}.notation-section-main,.verse-section{-webkit-overflow-scrolling:touch;margin-bottom:20px;overflow-x:auto;padding:12px 18px 12px 12px}.notation-section-main h4,.verse-section h4{font-size:1rem;margin-bottom:15px}.verse-text p{font-size:.95rem}.verse-edit{font-size:.9rem;padding:8px}.recordings-upload-section{padding:12px 18px}.recordings-upload-section h4{font-size:1rem;margin-bottom:15px}.section-name{font-size:1rem}.notation-grid,.notation-row{overflow-x:visible}.left-controls,.right-controls{min-width:45px}.beat-label,.notation-cell{min-width:40px;padding:4px 2px}.notation-cell{height:40px}.beat-label{font-size:.6rem;padding:3px 1px}.note{font-size:.8rem}.text{font-size:.6rem}.play-btn{height:26px;width:26px}.section-play-btn{display:none}.notation-section,.section-header{min-width:-webkit-fit-content;min-width:fit-content}.section-header{margin-left:0;margin-right:0;padding:8px 0}.section-name{flex:1 1;white-space:nowrap}.notation-grid{min-width:-webkit-fit-content;min-width:fit-content}}.edit-mode-controls-wrapper{align-items:flex-end;display:flex;flex-direction:column;gap:6px;position:absolute;right:20px;top:10px;z-index:10}.edit-mode-controls{align-items:center;display:flex;gap:12px;height:32px}.edit-mode-label{align-items:center;background:#fff3cd;border:1px solid #ffc107;border-radius:3px;color:#856404;display:flex;font-size:.65rem;font-weight:600;gap:3px;height:24px;line-height:1;padding:3px 6px}.edit-mode-label svg{color:#856404;flex-shrink:0;height:10px;width:10px}.edit-mode-status{align-items:center;background:#fff;border:1px solid #dee2e6;border-radius:3px;color:#495057;display:flex;font-size:.7rem;gap:4px;height:20px;line-height:1;padding:2px 6px}.edit-mode-status svg{color:#28a745;flex-shrink:0}.edit-mode-status .saving-spinner{animation:spin 1s linear infinite;border:2px solid #f3f3f3;border-radius:50%;border-top-color:#007bff;height:10px;width:10px}.save-icon-btn{align-items:center;background:#0000;border:none;color:#28a745;cursor:pointer;display:flex;height:32px;justify-content:center;line-height:1;padding:0;transition:all .2s ease}.save-icon-btn:hover:not(:disabled){color:#218838;transform:scale(1.1)}.save-icon-btn:active{transform:scale(1)}.save-icon-btn:disabled{cursor:not-allowed;opacity:.5}.cancel-icon-btn{align-items:center;background:#0000;border:none;color:#dc3545;cursor:pointer;display:flex;height:32px;justify-content:center;line-height:1;padding:0;transition:all .2s ease}.cancel-icon-btn:hover{color:#c82333;transform:scale(1.1)}.cancel-icon-btn:active{transform:scale(1)}.add-section-container{display:flex;justify-content:flex-start}.add-section-btn{align-items:center;background:#6c757d;border:none;border-radius:4px;box-shadow:0 2px 8px #6c757d33;color:#fff;cursor:pointer;display:flex;font-size:.85rem;font-weight:600;gap:4px;padding:6px 12px;transition:all .2s ease}.add-section-btn:hover{background:#5a6268;box-shadow:0 4px 12px #6c757d4d;transform:translateY(-1px)}.add-section-btn:active{transform:translateY(0)}.section-actions{align-items:center;display:flex;gap:8px;margin-left:auto}.section-name-edit{background:#fff;border:1px solid #dee2e6;border-radius:4px;color:#212529;flex:0 1 auto;font-size:.85rem;font-weight:600;padding:6px 12px;transition:all .2s ease;width:140px}.section-name-edit:hover{background:#f8f9fa;border-color:#adb5bd}.section-name-edit:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a;outline:none}.section-taal-select{background:#fff;border:1px solid #dee2e6;border-radius:4px;color:#495057;cursor:pointer;font-family:inherit;font-size:.85rem;font-weight:600;padding:6px 12px;transition:all .2s ease;width:140px}.section-taal-select:hover{background:#f8f9fa;border-color:#adb5bd}.section-taal-select:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a;outline:none}.section-taal-select option{font-size:.85rem;font-weight:600;padding:8px}.add-row-btn{align-items:center;background:#28a745;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:.85rem;font-weight:600;gap:4px;padding:6px 12px;transition:all .2s ease}.add-row-btn:hover{background:#218838}.duplicate-section-btn{align-items:center;background:#007bff;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;height:28px;justify-content:center;transition:all .2s ease;width:28px}.duplicate-section-btn:hover{background:#0056b3}.delete-section-btn{align-items:center;background:#6c757d;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;height:28px;justify-content:center;transition:all .2s ease;width:28px}.delete-section-btn:hover{background:#5a6268}.delete-row-btn{align-items:center;background:#6c757d;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;height:32px;justify-content:center;transition:all .2s ease;width:32px}.delete-row-btn:hover{background:#5a6268}.notation-section.blocks-mode{margin-bottom:30px}.blocks-container{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000000d;padding:20px}.block-beat-labels{border-bottom:2px solid #dee2e6;display:flex;gap:0;margin-bottom:10px;padding-bottom:8px}.block-beat-label{color:#6c757d;flex:1 1;font-size:.75rem;font-weight:600;min-width:70px;padding:4px;text-align:center}.block-beat-label[data-beat-marker=K],.block-beat-label[data-beat-marker=S],.block-beat-label[data-beat-marker=T]{color:inherit;font-weight:400}.block-row .notation-cell[data-beat=K],.block-row .notation-cell[data-beat=S],.block-row .notation-cell[data-beat=T]{background:#0000;border-left:1px solid #ced4da}.blocks-grid{display:flex;flex-direction:column;gap:2px}.block-row{display:flex;gap:0}.block-row .notation-cell{border-bottom:1px solid #e9ecef;border-right:1px solid #e9ecef;flex:1 1;min-width:70px;padding:10px 8px}.block-row .notation-cell:first-child{border-left:1px solid #e9ecef}.block-row:first-child .notation-cell{border-top:1px solid #e9ecef}.block-row .notation-cell.blank-cell{background:#0000;opacity:1}.block-row .notation-cell.blank-cell .note{color:inherit}@media (max-width:768px){.block-beat-label,.block-row .notation-cell{font-size:.65rem;min-width:50px;padding:6px 4px}}@media (max-width:480px){.block-beat-label,.block-row .notation-cell{font-size:.6rem;min-width:45px;padding:5px 3px}}.note-edit,.text-edit{background:#f8f9fa;border:1px solid #d0d0d0;border-radius:3px;box-sizing:border-box;font-family:Courier New,monospace;font-size:.85rem;height:auto;margin-bottom:4px;min-height:20px;padding:2px 4px;text-align:center;width:100%}.note-edit:focus,.text-edit:focus{background:#fff;border-color:#0056b3;box-shadow:0 0 0 2px #007bff33;outline:none}.note-edit-preview{align-items:center;color:#212529;display:flex;font-family:Noto Sans Gurmukhi,Gurmukhi MT,Arial,sans-serif;font-size:.9rem;font-weight:600;justify-content:center;min-height:1.2em}.text-edit{text-align:left}.no-notation{color:#6c757d;padding:40px;text-align:center}@media (max-width:768px){.notation-header-actions{gap:6px}.edit-mode-controls-wrapper{align-items:center;margin:10px auto;position:static}.edit-mode-controls{flex-wrap:wrap;justify-content:center}.add-section-btn{font-size:.85rem}.section-name-edit,.section-taal-select{font-size:.8rem;width:120px}.section-header-left{flex-wrap:wrap;gap:8px}}.drag-handle{align-items:center;color:#6c757d;cursor:grab;display:flex;justify-content:center;padding:0 8px;transition:color .2s ease}.drag-handle:hover{color:#495057}.drag-handle:active{cursor:grabbing}.notation-row[draggable=true]{transition:all .2s ease}.notation-row.dragging{background:#e3f2fd;border:2px dashed #2196f3;opacity:.5}.notation-row.drag-over{background:#f0f8ff;border-top:3px solid #2196f3}.notation-row.dragging .drag-handle{cursor:grabbing}@media print{@page{size:letter;margin:.5in}body,html{margin:0;padding:0}.Navbar,.add-row-btn,.add-section-btn,.back-btn,.cancel-icon-btn,.control-bar,.control-buttons,.delete-row-btn,.delete-section-btn,.drag-handle,.duplicate-section-btn,.edit-mode-controls,.edit-mode-controls-wrapper,.fixed-control-bar,.keyboard-toggle-btn,.notation-header-actions,.piano-keyboard,.play-btn,.sa-mapping-btn,.sa-selection-overlay,.save-icon-btn,.section-actions,.section-drag-handle,.section-play-btn,.sidebar-container,.sidebar-overlay,.speed-control-group{display:none!important}.notation-page{background:#fff;margin:0;min-height:auto!important;padding:0;width:100%}.composition-header-section{background:#fff;border:none;box-shadow:none;margin-bottom:4px;padding:2px 0 4px;page-break-inside:avoid}.composition-header-section h1{color:#000;font-size:1rem;margin:0 0 2px}.composition-header-section .composition-meta{color:#000;font-size:.8rem;padding:0}.verse-section{background:#fff;border:none;box-shadow:none;margin-bottom:6px;margin-top:4px;padding:6px 8px;page-break-inside:avoid}.verse-section h4{color:#000;font-size:.9rem;margin:0 0 4px}.verse-text p{color:#000;font-size:.8rem;line-height:1.2;margin:0 0 2px}.notation-section-main{background:#fff;border:none;box-shadow:none;margin-bottom:6px;padding:6px 4px;page-break-inside:avoid}.notation-section-main h4{color:#000;font-size:.9rem;margin:0 0 4px}.notation-row{border-bottom:none;border-top:none;margin-bottom:2px;width:100%}.left-controls{border-right:none;display:none!important;min-width:0}.play-button{display:none}.line-number{border-bottom:none;display:none}.notation-cell{flex:0 0 60px;flex:0 0 var(--print-cell-width,60px);height:32px;max-width:60px;max-width:var(--print-cell-width,60px);min-width:60px;min-width:var(--print-cell-width,60px);padding:2px 1px;page-break-inside:avoid;width:60px;width:var(--print-cell-width,60px)}.beat-label,.notation-cell,.notation-cell:last-child{border-right:none}.beat-label{color:#000;flex:0 0 60px;flex:0 0 var(--print-cell-width,60px);font-size:.65rem;max-width:60px;max-width:var(--print-cell-width,60px);min-width:60px;min-width:var(--print-cell-width,60px);padding:4px 2px;width:60px;width:var(--print-cell-width,60px)}.beat-label:last-child{border-right:none}.beat-label:nth-child(4n),.notation-row .cells-container .notation-cell:nth-child(4n){border-right:1px solid #ddd}.note{color:#000;font-size:.75rem;font-weight:600}.text{color:#000;font-size:.6rem}.cells-container{--print-cell-width:var(--print-cell-width,60px);border:none;width:auto}.beat-labels{border-bottom:1px solid #000;margin-bottom:2px}.right-controls{display:none!important}.notation-section .notation-grid .notation-row .beat-labels{display:none}.notation-section .notation-grid .notation-row:first-child .beat-labels{display:flex}.section-header{border-bottom:1px solid #000;margin-bottom:4px;padding-bottom:2px}.section-name{color:#000;font-size:.9rem}.notation-section{margin-bottom:4px;page-break-inside:avoid}.notation-section:last-child{margin-bottom:4px}.notation-row{page-break-inside:avoid}.notation-content{margin:0;max-width:100%;padding:0}.status-badge{background:#fff;border:1px solid #000;color:#000}.note-edit,.recordings-upload-section,.section-name-edit,.section-taal-select,.text-edit{display:none}*{color:#000!important}.composition-header-section,.left-controls,.notation-cell,.notation-content,.notation-page,.notation-row,.notation-section-main,.verse-section,body{background:#fff!important}.notation-section.blocks-mode{margin:0 0 10px!important;page-break-inside:avoid}.blocks-container,.notation-section.blocks-mode{border:none!important;padding:0!important;width:100%!important}.blocks-container{box-shadow:none!important}.blocks-grid{border:1px solid #000!important;flex-direction:column!important}.block-row,.blocks-grid{display:flex!important;width:100%!important}.block-row{border-bottom:1px solid #000!important;flex-wrap:nowrap!important;page-break-inside:avoid}.block-row:last-child{border-bottom:none!important}.block-row .notation-cell{background:#0000!important;border:none!important;border-right:1px solid #000!important;flex:1 1!important;height:auto!important;max-width:none!important;min-width:0!important;padding:2px 1px!important;width:auto!important}.block-row .notation-cell:last-child{border-right:none!important}.block-row .notation-cell .note{font-size:.75rem!important;margin-bottom:2px!important;white-space:nowrap}.block-row .notation-cell .text{font-size:.55rem!important;line-height:1.1!important;overflow:hidden;white-space:normal}.block-beat-labels{background:#f0f0f0!important;border-bottom:1px solid #000!important;display:flex!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;width:100%!important}.block-beat-label{border-right:1px solid #ccc!important;color:#000!important;flex:1 1!important;font-size:.65rem!important;font-weight:700!important;min-width:0!important;padding:4px 1px!important;width:auto!important}.block-beat-label:last-child{border-right:none!important}}.favorite-button{align-items:center;background:#0000;border:none;cursor:pointer;display:flex;justify-content:center;padding:0;position:relative}.favorite-button svg{color:#6c757d}.favorite-button.favorited svg,.favorite-button:hover svg{color:#dc3545}.favorite-button.loading{cursor:not-allowed;opacity:.6}.favorite-button.loading svg{animation:pulse 1s infinite}.favorite-button:disabled{cursor:not-allowed;opacity:.6}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.piano-keyboard{align-items:center;background-color:#4facfe;border-bottom:.5px solid #4facfe;border-top:1px solid #ccc;bottom:50px;box-sizing:border-box;display:flex;height:200px;left:0;padding:5px 7.5px;position:fixed;right:0;transition:height .3s ease;-webkit-user-select:none;user-select:none;z-index:1000;&.selecting-sa{.piano-key{cursor:pointer}}&.closed{display:none}@media (max-height:700px){height:150px}@media (max-height:600px){height:100px}}.octave-container{display:flex;height:95%;width:100%}.octave{height:100%;position:relative;width:33.33%}.piano-key{border:1px solid #ccc;border-top:none;box-sizing:border-box;cursor:pointer;height:100%;position:absolute;transition:none;-webkit-user-select:none;user-select:none;width:14.28%;&.white{background-color:#fff;border-bottom-left-radius:5px;border-bottom-right-radius:5px;z-index:1;&:hover{background-color:#f0f0f0}}&.black{background-color:#000;border-bottom-left-radius:5px;border-bottom-right-radius:5px;height:60%;z-index:2;&:hover{background-color:#333}}&.active{background-color:orange!important;transition:none}&.selecting-sa{opacity:.8}}.sa-indicator{bottom:15px;color:#deb887;font-size:20px;left:50%;pointer-events:none;position:absolute;transform:translateX(-50%)}.sa-selection-overlay{background-color:#00000080;bottom:0;left:0;pointer-events:auto;position:fixed;right:0;top:0;z-index:999}.overlay-message{background-color:#fff;border-radius:4px;box-shadow:0 2px 10px #0000001a;font-size:16px;padding:15px 20px;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:1001}.key-label,.overlay-message{left:50%;pointer-events:none}.key-label{bottom:5px;font-size:12px;position:absolute;transform:translateX(-50%);-webkit-user-select:none;user-select:none;.black &{bottom:2px;color:#fff}@media (max-width:600px){font-size:8px}}.anote{position:relative}.anote[data-octave="2"]:after{bottom:-.4em}.anote[data-octave="2"]:after,.anote[data-octave="4"]:after{color:inherit;content:".";font-size:1.2em;font-weight:700;left:.1em;position:absolute}.anote[data-octave="4"]:after{top:-.8em}.sa-mapping-option{align-items:center;background:#fff;border:1px solid #dee2e6;border-radius:6px;color:#495057;cursor:pointer;display:flex;font-size:12px;font-weight:600;gap:4px;height:32px;justify-content:center;min-width:80px;padding:0 12px;transition:all .2s ease;white-space:nowrap}.sa-mapping-option:hover{background:#f8f9fa;border-color:#adb5bd;box-shadow:0 2px 6px #00000026;transform:translateY(-1px)}.sa-mapping-option:active{transform:translateY(0)}.sa-mapping-option.selecting{background:#ffc107;border-color:#ffc107;color:#212529}.sa-mapping-option.selecting:hover{background:#e0a800;border-color:#e0a800}.control-bar{background:#fff;border:1px solid #e9ecef;border-radius:0;box-shadow:0 -2px 8px #0000001a;gap:20px;justify-content:flex-start;margin:0;padding:8px 15px}.control-bar,.control-buttons{align-items:center;display:flex}.control-buttons{gap:15px}.language-toggle-btn{align-items:center;background:#fff;border:1px solid #dee2e6;border-radius:6px;color:#495057;cursor:pointer;display:flex;font-size:12px;font-weight:600;height:32px;justify-content:center;min-width:80px;padding:0 12px;transition:all .2s ease;white-space:nowrap}.language-toggle-btn:hover{background:#f8f9fa;border-color:#adb5bd;box-shadow:0 2px 6px #00000026;transform:translateY(-1px)}.language-toggle-btn:active{transform:translateY(0)}.language-toggle-btn.gurmukhi{background:#4facfe;border-color:#4facfe;color:#fff}.language-toggle-btn.gurmukhi:hover{background:#3a8bfd;border-color:#3a8bfd}.language-toggle-btn.english{background:#fff;border-color:#dee2e6;color:#495057}.display-mode-control{align-items:center;display:flex;gap:6px}.mode-toggle-btn{align-items:center;background:#fff;border:1px solid #dee2e6;border-radius:6px;color:#495057;cursor:pointer;display:flex;height:32px;justify-content:center;transition:all .2s ease;width:32px}.mode-toggle-btn:hover{background:#f8f9fa;border-color:#adb5bd;box-shadow:0 2px 6px #00000026;transform:translateY(-1px)}.mode-toggle-btn:active{transform:translateY(0)}.mode-toggle-btn.active{background:#4facfe;border-color:#4facfe;color:#fff}.mode-toggle-btn.active:hover{background:#3a8bfd;border-color:#3a8bfd}.mode-toggle-btn svg{flex-shrink:0}.keyboard-toggle-btn{align-items:center;background:#fff;border:1px solid #dee2e6;border-radius:6px;color:#495057;cursor:pointer;display:flex;font-size:12px;font-weight:600;height:32px;justify-content:center;transition:all .2s ease;width:32px}.keyboard-toggle-btn:hover{background:#f8f9fa;border-color:#adb5bd;box-shadow:0 2px 6px #00000026;transform:translateY(-1px)}.keyboard-toggle-btn:active{transform:translateY(0)}.keyboard-toggle-btn.active{background:#4facfe;border-color:#4facfe;color:#fff}.keyboard-toggle-btn.active:hover{background:#3a8bfd;border-color:#3a8bfd}.sa-mapping-btn{align-items:center;background:#fff;border:1px solid #dee2e6;border-radius:6px;color:#495057;cursor:pointer;display:flex;font-size:12px;font-weight:600;gap:4px;height:32px;justify-content:center;min-width:80px;padding:0 12px;transition:all .2s ease;white-space:nowrap}.sa-mapping-btn:hover{background:#f8f9fa;border-color:#adb5bd;box-shadow:0 2px 6px #00000026;transform:translateY(-1px)}.sa-mapping-btn:active{transform:translateY(0)}.sa-mapping-btn.selecting{background:#ffc107;border-color:#ffc107;color:#212529}.sa-mapping-btn.selecting:hover{background:#e0a800;border-color:#e0a800}.sa-label{color:#4facfe;font-weight:700}.sa-separator{color:#6c757d;font-weight:400}.sa-note{color:#495057;font-family:Courier New,monospace;font-weight:600}.speed-control-group{align-items:center;display:flex;min-width:200px;position:relative}.speed-toggle-btn{align-items:center;background:#fff;border:1px solid #dee2e6;border-radius:6px;color:#495057;cursor:pointer;display:none;font-size:12px;font-weight:600;gap:10px;height:32px;justify-content:space-between;min-width:120px;padding:0 12px;transition:all .2s ease}.speed-slider-overlay{display:none}.speed-toggle-btn:hover{background:#f8f9fa;border-color:#adb5bd;box-shadow:0 2px 6px #00000026;transform:translateY(-1px)}.speed-toggle-btn:active{transform:translateY(0)}.speed-display-compact{align-items:center;display:flex;gap:2px}.speed-label{color:#495057;font-size:12px;font-weight:600;margin:0}.speed-slider-container{align-items:center;display:flex;gap:10px;width:100%}.speed-slider{-webkit-appearance:none;appearance:none;background:#e9ecef;border-radius:3px;cursor:pointer;flex:1 1;height:6px;outline:none}.speed-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#4facfe;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px #0003;cursor:pointer;height:18px;-webkit-transition:all .2s ease;transition:all .2s ease;width:18px}.speed-slider::-webkit-slider-thumb:hover{background:#3a8bfd;box-shadow:0 3px 6px #0000004d;transform:scale(1.1)}.speed-slider::-moz-range-thumb{background:#4facfe;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px #0003;cursor:pointer;height:18px;-moz-transition:all .2s ease;transition:all .2s ease;width:18px}.speed-slider::-moz-range-thumb:hover{background:#3a8bfd;box-shadow:0 3px 6px #0000004d;transform:scale(1.1)}.speed-display{align-items:center;display:flex;gap:2px;justify-content:center;min-width:50px}.speed-value{color:#4facfe;font-size:14px;font-weight:700;min-width:30px;text-align:center}.speed-unit{color:#6c757d;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}@media (max-width:768px){.control-bar{box-sizing:border-box;flex-direction:column;gap:15px;padding:15px;width:100%}.control-buttons{flex-wrap:wrap;gap:12px;justify-content:center;width:100%}.keyboard-toggle-btn,.language-toggle-btn,.sa-mapping-btn{flex-shrink:0}.speed-control-group{min-width:auto;width:auto}.speed-toggle-btn{display:flex}.speed-slider-overlay{animation:fadeIn .2s ease-out;background:#0006;bottom:0;display:block;left:0;position:fixed;right:0;top:0;z-index:999}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.speed-slider-container{background:#fff;border:1px solid #dee2e6;border-radius:8px;bottom:80px;box-shadow:0 -4px 20px #0003;display:none;left:50%;padding:12px;position:fixed;transform:translateX(-50%);width:240px;z-index:1000}.speed-slider-container.open{animation:slideUp .2s ease-out;display:flex;flex-direction:column;gap:8px}@keyframes slideUp{0%{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.speed-slider-container .speed-label{display:block;font-size:11px;margin-bottom:3px}.speed-slider-container .speed-slider{height:5px}.speed-slider-container .speed-slider::-webkit-slider-thumb{height:16px;width:16px}.speed-slider-container .speed-slider::-moz-range-thumb{height:16px;width:16px}.speed-slider-container .speed-display{margin-top:0}.speed-slider-container .speed-value{font-size:16px}.speed-slider-container .speed-unit{font-size:11px}}@media (max-width:480px){.control-bar{padding:12px 10px}.control-buttons{gap:10px}.language-toggle-btn,.sa-mapping-btn{font-size:11px;min-width:75px;padding:0 10px}.keyboard-toggle-btn{height:32px;width:32px}.speed-toggle-btn{font-size:11px;min-width:110px;padding:0 10px}.speed-slider-container{bottom:70px;padding:10px;width:220px}.speed-slider-container.open{gap:6px}.speed-slider-container .speed-label{font-size:10px;margin-bottom:2px}.speed-slider-container .speed-slider{height:4px}.speed-slider-container .speed-slider::-webkit-slider-thumb{height:14px;width:14px}.speed-slider-container .speed-slider::-moz-range-thumb{height:14px;width:14px}.speed-slider-container .speed-value{font-size:14px}.speed-slider-container .speed-unit{font-size:10px}}.Layout{display:flex;flex-direction:column;min-height:100vh;width:100%}.Layout,.Layout-main{min-width:0;overflow-x:hidden}.Layout-main{background-color:#f8f9fa;flex:1 1;margin-left:150px;min-height:calc(100vh - 70px);padding:10px;transition:margin-left .2s ease-out}.sidebar-container{box-shadow:2px 0 10px #0000001a;left:0;position:fixed;top:70px;transition:transform .2s ease-out;z-index:100}.sidebar-container.sidebar-hidden{transform:translateX(-100%)}.Layout-main.no-sidebar{margin-left:0}.sidebar-overlay{display:none!important}@media (max-height:768px) and (max-width:1024px),(max-width:768px){.Layout-main{margin-left:0;padding:5px}.sidebar-container{box-shadow:2px 0 15px #0003;z-index:999}.sidebar-container.sidebar-hidden{transform:translateX(-100%)}.sidebar-overlay{background:#00000080;display:block!important}}@media (max-width:480px){.Layout-main{padding:3px}}.Home{box-sizing:border-box;margin:0 auto;max-width:1200px;min-width:0;padding:0 10px;width:100%}.Home-content{background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;margin-bottom:30px;padding:30px}.Home h1{color:#333;margin-bottom:30px;text-align:left}.search-section{margin-bottom:20px}.featured-section{margin-bottom:40px}.featured-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.featured-grid .composition-card{background:#fff;border:2px solid #e9ecef;border-radius:8px;box-shadow:0 4px 8px #0000001a;cursor:pointer;padding:20px;position:relative;transition:all .3s ease}.featured-grid .composition-card:hover{background:#f8f9fa;border-color:#4facfe}.featured-grid .composition-card:hover .composition-title-clickable{color:#4facfe;transition:color .3s ease}.composition-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:20px;transition:transform .2s,box-shadow .2s}.composition-header-actions{align-items:center;display:flex;gap:6px}.composition-header{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between;margin-bottom:15px}.composition-card h3{color:#333;flex:1 1;font-size:18px;line-height:1.4;margin:0}.composition-info{color:#6c757d;font-size:.875rem;margin:0 0 15px}.verse-lines,.verse-preview{background:#f8f9fa;border-left:3px solid #007bff;border-radius:4px;margin-top:10px;padding:10px}.verse-lines p,.verse-preview p{color:#495057;font-size:13px;line-height:1.4;margin:5px 0 0}.skeleton-card{background:#fff;border:2px solid #e9ecef;border-radius:8px;box-shadow:0 4px 8px #0000001a;overflow:hidden;padding:20px;position:relative}.skeleton{animation:loading 1.5s ease-in-out infinite;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;border-radius:4px}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-title{height:24px;margin-bottom:15px;width:70%}.skeleton-text{height:16px;margin-bottom:10px;width:100%}.skeleton-text.short{width:50%}@media (max-width:768px){.Home{padding:10px}.Home-content{padding:20px}.featured-grid{grid-template-columns:1fr}}.Learn{width:100%}.Learn-content{margin:0 auto;max-width:1200px}.filter-section,.search-section{margin:10px auto;max-width:680px}.filter-section{background:#fff;border:none;border-radius:8px;box-shadow:0 4px 8px #0000001a;box-sizing:border-box;padding:15px 20px;width:680px}.filter-section h2{display:none}.filter-dropdowns{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.filter-dropdown{display:flex;flex:0 1 auto;flex-direction:column;min-width:130px}.filter-dropdown label{color:#495057;font-size:.75rem;font-weight:600;letter-spacing:.3px;margin-bottom:5px;text-transform:uppercase}.filter-dropdown select{background:#fff;border:1px solid #dee2e6;border-radius:6px;color:#212529;cursor:pointer;font-size:.85rem;min-width:130px;padding:6px 10px;transition:all .2s ease}.filter-dropdown select:hover{border-color:#4facfe}.filter-dropdown select:focus{border-color:#4facfe;box-shadow:0 0 0 3px #4facfe1a;outline:none}.clear-filters-btn{align-items:center;align-self:flex-end;background:#6c757d;border:none;border-radius:4px;box-shadow:none;color:#fff;cursor:pointer;display:flex;height:21px;justify-content:center;min-width:21px;padding:0;transition:all .2s ease;width:21px}.clear-filters-btn:hover{background:#495057;box-shadow:0 2px 4px #00000026;transform:translateY(-1px)}.clear-filters-btn svg{height:11px;width:11px}.compositions-section{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 15px #0000001a;display:flex;flex-direction:column;margin-top:20px;max-height:700px;padding:2rem}.compositions-section h1{color:#333;flex-shrink:0;font-size:1.5rem;font-weight:600;margin:0 0 1.5rem}.compositions-list{flex:1 1;gap:0;min-height:0;overflow-y:auto}.composition-item{align-items:center;border-bottom:1px solid #e9ecef;cursor:pointer;display:flex;gap:1rem;padding:1rem .5rem;transition:all .2s ease}.composition-item:last-child{border-bottom:none}.composition-item:hover{background:#f8f9fa;padding-left:1rem}.composition-icon{color:#4facfe}.composition-details-main{flex:1 1;min-width:0}.composition-details-main h4{color:#212529;font-size:1rem;font-weight:600;margin:0 0 .25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.composition-action,.composition-favorite{align-items:center;display:flex;flex-shrink:0}.composition-action{color:#6c757d}.composition-item:hover .composition-action{color:#4facfe}.pagination{align-items:center;border-top:1px solid #e9ecef;display:flex;flex-shrink:0;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:1.5rem;padding-top:1rem}.pagination-btn{background:#fff;border:2px solid #e9ecef;border-radius:6px;color:#212529;cursor:pointer;font-size:.9rem;font-weight:600;min-width:40px;padding:8px 12px;transition:all .3s ease}.pagination-btn:hover:not(:disabled){background:#f8f9fa;border-color:#4facfe}.pagination-btn.active{background:#4facfe;border-color:#4facfe;color:#fff}.pagination-btn:disabled{cursor:not-allowed;opacity:.5}.loading-message,.no-compositions{color:#6c757d;font-size:1.1rem;padding:40px;text-align:center}@media (max-width:768px){.Learn-content{padding:5px}.search-section{margin-bottom:10px;margin-top:10px}.Learn-content h1{font-size:1.5rem;margin-bottom:10px}.filter-section{margin:10px 1rem;max-width:100%;padding:12px 15px}.filter-dropdowns{flex-direction:column;gap:10px}.filter-dropdown{min-width:100%;width:100%}.filter-dropdown label{font-size:.7rem}.filter-dropdown select{font-size:.85rem;min-width:100%;padding:6px 10px;width:100%}.clear-filters-btn{align-self:stretch;height:34px;margin-top:0;width:100%}.clear-filters-btn svg{height:13px;width:13px}.search-section{margin:10px 1rem 0;max-width:100%}.compositions-section{margin-top:10px;padding:1.5rem}.composition-item{padding:1rem}.composition-details-main h4{font-size:.95rem}.composition-meta{font-size:.8rem}.pagination{gap:6px;margin-top:1rem;padding-top:1rem}.pagination-btn{font-size:.85rem;min-width:44px;padding:8px 14px}}@media (max-width:480px){.Learn-content{padding:3px}.search-section{margin-bottom:8px;margin-top:8px}.Learn-content h1{font-size:1.3rem;margin-bottom:8px}.filter-section{margin:8px .5rem;max-width:100%;padding:10px 12px}.filter-dropdowns{gap:8px}.filter-dropdown{width:100%}.filter-dropdown label{font-size:.7rem;margin-bottom:3px}.filter-dropdown select{font-size:.8rem;padding:6px 8px;width:100%}.clear-filters-btn{height:21px;margin-top:0}.clear-filters-btn svg{height:11px;width:11px}.search-section{margin:8px .5rem 0;max-width:100%}.compositions-section{margin-top:8px;padding:1rem}.composition-item{gap:.75rem;padding:.75rem}.composition-details-main h4{font-size:.9rem}.composition-meta{font-size:.75rem}.composition-icon svg{height:20px;width:20px}.composition-action svg{height:18px;width:18px}.pagination{margin-top:1rem;padding-top:.75rem}.pagination-btn{font-size:.8rem;min-width:40px;padding:6px 10px}.loading-message,.no-compositions{font-size:1rem;padding:20px 10px}}.Sources{width:100%}.Sources-content{margin:0 auto;max-width:1200px;padding:10px}.Sources-content h1{color:#212529;font-size:2rem;font-weight:700;margin-bottom:10px;margin-top:10px}@media (max-width:768px){.Sources-content{padding:5px}.Sources-content h1{font-size:1.5rem}}@media (max-width:480px){.Sources-content{padding:3px}.Sources-content h1{font-size:1.3rem}}.Profile{background-color:#f8f9fa;min-height:calc(100vh - 70px);width:100%}.Profile-content{margin:0 auto;max-width:800px;padding:40px 20px}.Profile-content h1{color:#212529;font-size:2rem;font-weight:700;margin-bottom:30px;margin-top:0}.profile-card{background:#fff;border-radius:0;box-shadow:0 2px 8px #0000001a;margin-bottom:30px;padding:40px}.profile-avatar{color:#6c757d;margin-bottom:30px;text-align:center}.profile-avatar svg{background-color:#e9ecef;border-radius:50%;height:100px;padding:20px;width:100px}.profile-info{display:flex;flex-direction:column;gap:20px}.profile-field{border-bottom:1px solid #e9ecef;padding-bottom:15px}.profile-field:last-child{border-bottom:none;padding-bottom:0}.profile-field label{color:#6c757d;display:block;font-size:.875rem;font-weight:600;letter-spacing:.5px;margin-bottom:8px;text-transform:uppercase}.profile-field p{color:#212529;font-size:1.125rem;font-weight:500;margin:0}.profile-actions{display:flex;gap:15px;justify-content:center}.add-notation-btn{align-items:center;background-color:#007bff;border:none;border-radius:0;box-shadow:0 2px 4px #007bff4d;color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:10px;padding:14px 28px;transition:all .2s ease}.add-notation-btn:hover{background-color:#0056b3;box-shadow:0 4px 8px #007bff66;transform:translateY(-1px)}.add-notation-btn:active{box-shadow:0 2px 4px #007bff4d;transform:translateY(0)}@media (max-width:768px){.Profile-content{padding:20px 15px}.Profile-content h1{font-size:1.5rem;margin-bottom:20px}.profile-card{padding:30px 20px}.profile-avatar svg{height:80px;padding:15px;width:80px}.add-notation-btn{font-size:.95rem;padding:12px 24px}}@media (max-width:480px){.Profile-content{padding:15px 10px}.Profile-content h1{font-size:1.3rem}.profile-card{padding:20px 15px}.profile-avatar svg{height:70px;padding:12px;width:70px}.profile-field label{font-size:.8rem}.profile-field p{font-size:1rem}.add-notation-btn{font-size:.9rem;justify-content:center;padding:10px 20px;width:100%}}.notation-page-container{background:#f8f9fa;min-height:100vh;width:100%}.notation-page-error{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:40px;text-align:center}.notation-page-error h2{color:#dc3545;font-size:2rem;margin-bottom:20px}.notation-page-error p{color:#6c757d;font-size:1.1rem;margin-bottom:30px}.notation-page-error .back-btn{background:#4facfe;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:12px 24px;transition:all .3s ease}.notation-page-error .back-btn:hover{background:#3a8bfd;box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.fixed-control-bar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-top:1px solid #e9ecef;bottom:0;box-shadow:0 -4px 20px #0000001a;left:0;margin:0;padding:0;position:fixed;right:0;z-index:1000}.add-notation-page-container{background-color:#f8f9fa;min-height:calc(100vh - 70px);width:100%}.add-notation-content{margin:0 auto;max-width:800px;padding:40px 20px}.add-notation-card{background:#fff;border-radius:0;box-shadow:0 2px 8px #0000001a;padding:40px}.add-notation-header{align-items:center;display:flex;gap:1rem;margin-bottom:30px;position:relative}.back-btn-add-notation{align-items:center;background:#fff;border:1px solid #dee2e6;border-radius:50%;box-shadow:0 2px 8px #0000001a;color:#495057;cursor:pointer;display:flex;height:44px;justify-content:center;transition:all .2s ease;width:44px}.back-btn-add-notation:hover{background:#4facfe;border-color:#4facfe;box-shadow:0 4px 12px #4facfe4d;color:#fff;transform:translateX(-2px)}.back-btn-add-notation:active{transform:translateX(0)}.add-notation-card h2{color:#212529;flex:1 1;font-size:1.75rem;font-weight:700;margin:0;text-align:center}.notation-form{display:flex;flex-direction:column;gap:20px}.form-group label{font-size:.875rem;letter-spacing:.5px;margin-bottom:8px;text-transform:uppercase}.form-group input,.form-group select,.form-group textarea{background-color:#fff;border:1px solid #ced4da;border-radius:0!important;-webkit-border-radius:0!important;-moz-border-radius:0!important;color:#495057;font-size:1rem;padding:12px 16px;transition:border-color .2s ease}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#007bff;box-shadow:0 0 0 3px #007bff1a;outline:none}.form-group textarea{font-family:inherit;min-height:100px;resize:vertical}.form-group input::placeholder,.form-group textarea::placeholder{color:#adb5bd}.form-actions{display:flex;gap:15px;justify-content:flex-end;margin-top:10px}.cancel-btn,.create-btn{border:none;border-radius:0;cursor:pointer;font-size:1rem;font-weight:600;padding:12px 28px;transition:all .2s ease}.cancel-btn{background-color:#6c757d;color:#fff}.cancel-btn:hover{background-color:#5a6268}.create-btn{background-color:#007bff;box-shadow:0 2px 4px #007bff4d;color:#fff}.create-btn:hover{background-color:#0056b3;box-shadow:0 4px 8px #007bff66;transform:translateY(-1px)}.create-btn:active{box-shadow:0 2px 4px #007bff4d;transform:translateY(0)}@media (max-width:768px){.add-notation-content{padding:20px 15px}.add-notation-card{padding:30px 20px}.add-notation-card h2{font-size:1.5rem;margin-bottom:20px}.form-group input,.form-group select,.form-group textarea{font-size:.95rem;padding:10px 14px}.form-actions{flex-direction:column}.cancel-btn,.create-btn{padding:12px 20px;width:100%}}@media (max-width:480px){.add-notation-content{padding:15px 10px}.add-notation-card{padding:20px 15px}.add-notation-card h2{font-size:1.3rem}.form-group label{font-size:.8rem}.form-group input,.form-group select,.form-group textarea{font-size:.9rem;padding:10px 12px}.cancel-btn,.create-btn{font-size:.9rem;padding:10px 18px}}.file-upload-section{display:flex;flex-direction:column;gap:8px;margin-top:8px}.file-upload-label{background-color:#007bff;border:none;border-radius:0;color:#fff;cursor:pointer;display:inline-block;font-size:.95rem;font-weight:600;padding:10px 20px;text-align:center;transition:all .2s ease}.file-upload-label:hover{background-color:#0056b3;box-shadow:0 4px 8px #007bff66;transform:translateY(-1px)}.file-upload-label:active{transform:translateY(0)}.file-upload-label:disabled{background-color:#6c757d;cursor:not-allowed;opacity:.6}.file-upload-hint{color:#6c757d;font-size:.8rem;font-style:italic}.recordings-list{display:flex;flex-direction:column;gap:12px;margin-top:15px}.recording-item{background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:0;padding:12px;transition:all .2s ease}.recording-item:hover{border-color:#007bff;box-shadow:0 2px 4px #007bff1a}.recording-controls{align-items:center;display:flex;flex-wrap:wrap;gap:10px}.play-recording-btn{align-items:center;background-color:#fff;border:1px solid #dee2e6;border-radius:50%;color:#495057;cursor:pointer;display:flex;flex-shrink:0;height:36px;justify-content:center;transition:all .2s ease;width:36px}.play-recording-btn:hover{background-color:#007bff;border-color:#007bff;color:#fff;transform:scale(1.05)}.play-recording-btn.playing{background-color:#dc3545;border-color:#dc3545;color:#fff}.play-recording-btn.playing:hover{background-color:#c82333;border-color:#c82333}.recording-artist-input,.recording-title-input{background-color:#fff;border:1px solid #ced4da;border-radius:0;flex:1 1;font-size:.9rem;min-width:150px;padding:8px 12px}.recording-artist-input:focus,.recording-title-input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a;outline:none}.recording-quality-select{background-color:#fff;border:1px solid #ced4da;border-radius:0;cursor:pointer;font-size:.9rem;min-width:100px;padding:8px 12px}.recording-quality-select:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff1a;outline:none}.recording-duration{background-color:#fff;border:1px solid #dee2e6;border-radius:0;color:#6c757d;font-size:.85rem;min-width:50px;padding:8px 12px;text-align:center}.remove-recording-btn{align-items:center;background-color:#fff;border:1px solid #dc3545;border-radius:50%;color:#dc3545;cursor:pointer;display:flex;flex-shrink:0;height:36px;justify-content:center;transition:all .2s ease;width:36px}.remove-recording-btn:hover{background-color:#dc3545;color:#fff;transform:scale(1.05)}@media (max-width:768px){.recording-controls{align-items:stretch;flex-direction:column}.recording-artist-input,.recording-quality-select,.recording-title-input{min-width:0;min-width:auto;width:100%}.play-recording-btn,.recording-duration,.remove-recording-btn{align-self:flex-start}}.Login{background:#f8f9fa;box-sizing:border-box;min-height:calc(100vh - 70px);padding:20px;position:relative;width:100%}.Login,.back-arrow-btn{align-items:center;display:flex;justify-content:center}.back-arrow-btn{background:#fff;border:1px solid #dee2e6;border-radius:50%;box-shadow:0 2px 8px #0000001a;color:#495057;cursor:pointer;height:44px;left:20px;position:absolute;top:20px;transition:all .2s ease;width:44px;z-index:10}.back-arrow-btn:hover{background:#4facfe;border-color:#4facfe;box-shadow:0 4px 12px #4facfe4d;color:#fff;transform:translateX(-2px)}.back-arrow-btn:active{transform:translateX(0)}.login-container{max-width:450px;width:100%}.login-card{background:#fff;border-radius:16px;box-shadow:0 10px 30px #00000026;box-sizing:border-box;padding:50px 40px;width:100%}.login-card h1{color:#212529;font-size:2rem;font-weight:700;margin:0 0 35px;text-align:center}.login-form{gap:20px}.form-group,.login-form{display:flex;flex-direction:column}.form-group{gap:8px}.form-group label{color:#495057;font-size:.95rem;font-weight:600}.form-group input{background:#fff;border:2px solid #e9ecef;border-radius:0;font-size:1rem;padding:14px 16px;transition:all .3s ease}.form-group input:focus{border-color:#4facfe;box-shadow:0 0 0 3px #4facfe1a;outline:none}.error-message{background:#ffe6e6;border:1px solid #fcc;border-radius:0;color:#dc3545;font-size:.9rem;padding:12px 15px;text-align:center}.login-submit-btn{background:#4facfe;border:none;border-radius:0;box-shadow:0 4px 12px #4facfe4d;color:#fff;cursor:pointer;font-size:1.1rem;font-weight:600;margin-top:10px;padding:16px;transition:all .3s ease}.login-submit-btn:hover:not(:disabled){background:#3a8bfd;box-shadow:0 6px 20px #4facfe66;transform:translateY(-2px)}.login-submit-btn:active:not(:disabled){transform:translateY(0)}.login-submit-btn:disabled{cursor:not-allowed;opacity:.6}.login-footer{margin-top:30px;text-align:center}.back-to-home-btn-mobile{background:#0000;border:1px solid #dee2e6;border-radius:0;color:#6c757d;cursor:pointer;display:none;font-size:.95rem;font-weight:600;padding:10px 20px;transition:all .2s ease}.back-to-home-btn-mobile:hover{background:#f8f9fa;border-color:#adb5bd;color:#495057}@media (max-height:768px) and (max-width:1024px),(max-width:768px){.Login{align-items:flex-start;min-height:calc(100vh - 70px);padding:30px 12px 12px}.login-container{max-width:100%}.login-card{border-radius:12px;box-shadow:0 8px 20px #0000001a;padding:35px 25px}.login-card h1{font-size:1.6rem;margin-bottom:25px}.login-form{gap:18px}.form-group{gap:6px}.form-group input{font-size:16px;padding:12px 14px}.login-submit-btn{font-size:1rem;padding:14px}.back-arrow-btn{display:none}.back-to-home-btn-mobile{display:block;padding:12px;width:100%}.login-footer{margin-top:25px}}@media (max-width:480px){.Login{padding:20px 8px 8px}.login-card{border-radius:10px;padding:25px 20px}.login-card h1{font-size:1.4rem;margin-bottom:20px}.login-form{gap:15px}.form-group label{font-size:.9rem}.form-group input{padding:11px 12px}.error-message{font-size:.85rem;padding:10px 12px}.login-submit-btn{font-size:.95rem;padding:13px}.back-arrow-btn{display:none}.back-to-home-btn-mobile{display:block;font-size:.9rem;padding:10px}.login-footer{margin-top:20px}}.UserDashboard{min-height:100vh;padding:2rem}.user-info-card{align-items:center;background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 15px #0000001a;display:flex;gap:2rem;margin-bottom:2rem;padding:2rem}.user-avatar{background:#e9ecef;border-radius:50%;color:#6c757d;padding:1rem}.user-badge{background:#667eea;border-radius:20px;color:#fff;display:inline-block;font-size:.875rem;margin-right:.5rem;padding:.25rem .75rem;text-transform:uppercase}@media (max-width:768px){.UserDashboard{padding:1rem}.dashboard-header{align-items:flex-start;flex-direction:column;gap:1rem}.user-info-card{flex-direction:column;text-align:center}.favorites-section{padding:1.5rem}.favorite-item{padding:1rem}}.EditorDashboard{min-height:100vh;padding:2rem}.user-info-card.editor{align-items:center;background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 15px #0000001a;display:flex;gap:2rem;margin-bottom:2rem;padding:2rem}.user-avatar.editor{background:#e9ecef;border-radius:50%;color:#6c757d;padding:1rem}@media (max-width:768px){.EditorDashboard{padding:1rem}.dashboard-header{align-items:flex-start;flex-direction:column;gap:1rem}.user-info-card.editor{flex-direction:column;text-align:center}.favorites-section{padding:1.5rem}.favorite-item{padding:1rem}.notations-section{padding:1.5rem}.notation-item{padding:1rem}}.AdminDashboard{min-height:100vh;padding:2rem}.dashboard-header{align-items:center;color:#333;display:flex;justify-content:space-between;margin-bottom:2rem}.dashboard-header h1{color:#282c34;font-size:2rem;margin:0}.dashboard-content{margin:0 auto;max-width:1200px}.user-info-card.admin{align-items:center;background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 15px #0000001a;display:flex;gap:2rem;margin-bottom:2rem;padding:2rem}.user-avatar.admin{background:#e9ecef;border-radius:50%;color:#6c757d;padding:1rem}.user-details h2{color:#333;margin:0 0 .5rem}.user-email{color:#666;margin:0 0 .5rem}.user-level{color:#666;display:inline-block;font-weight:600;margin:0}.admin-stats-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:2rem}.admin-stat-card{align-items:center;background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 15px #0000001a;cursor:pointer;display:flex;gap:1rem;padding:1.5rem;transition:all .2s ease}.admin-stat-card:hover{border-color:#4facfe;box-shadow:0 6px 20px #00000026;transform:translateY(-2px)}.admin-stat-icon{align-items:center;background:#f8f9fa;border-radius:12px;color:#4facfe;display:flex;flex-shrink:0;justify-content:center;padding:.75rem}.admin-stat-info{flex:1 1}.admin-stat-info h4{color:#212529;font-size:1.125rem;font-weight:600;margin:0 0 .25rem}.admin-stat-info p{color:#6c757d;font-size:.875rem;margin:0}.favorites-section{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 15px #0000001a;display:flex;flex-direction:column;max-height:600px;padding:2rem}.favorites-section h3{color:#333;flex-shrink:0;font-size:1.5rem;margin:0 0 1.5rem}.favorites-list{display:flex;flex:1 1;flex-direction:column;gap:0;overflow-y:auto}.favorite-item{align-items:center;border-bottom:1px solid #e9ecef;cursor:pointer;display:flex;gap:1rem;padding:1rem .5rem;transition:all .2s ease}.favorite-item:last-child{border-bottom:none}.favorite-item:hover{background:#f8f9fa;padding-left:1rem}.favorite-icon{align-items:center;color:#dc3545;display:flex;flex-shrink:0;justify-content:center}.favorite-details{flex:1 1}.favorite-details h4{color:#212529;font-size:1rem;font-weight:600;margin:0 0 .25rem}.favorite-level{color:#6c757d;font-size:.875rem;margin:0}.favorite-action{align-items:center;color:#6c757d;display:flex;flex-shrink:0}.favorite-item:hover .favorite-action{color:#4facfe}.empty-favorites{align-items:center;color:#999;display:flex;flex-direction:column;justify-content:center;padding:2rem;text-align:center}.empty-favorites svg{height:48px;width:48px}.empty-favorites p{font-size:1rem;margin:.75rem 0 0}.favorites-loading{align-items:center;color:#666;display:flex;flex-direction:column;justify-content:center;padding:3rem}.favorites-loading p{font-size:1rem;margin:1rem 0 0}.notations-section{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 15px #0000001a;display:flex;flex-direction:column;margin-top:2rem;max-height:600px;padding:2rem}.notations-section-header{align-items:center;display:flex;flex-shrink:0;justify-content:space-between;margin-bottom:1.5rem}.notations-section h3{color:#333;font-size:1.5rem;margin:0}.add-composition-btn{align-items:center;background:#4facfe;border:none;border-radius:0;color:#fff;cursor:pointer;display:flex;font-size:.875rem;font-weight:600;gap:.5rem;padding:.5rem 1rem;transition:background .2s ease}.add-composition-btn:hover{background:#3a8cce}.add-composition-btn svg{flex-shrink:0}.notations-list{display:flex;flex:1 1;flex-direction:column;gap:0;overflow-y:auto}.notation-item{align-items:center;border-bottom:1px solid #e9ecef;cursor:pointer;display:flex;gap:1rem;padding:1rem .5rem;transition:all .2s ease}.notation-item:last-child{border-bottom:none}.notation-item:hover{background:#f8f9fa;padding-left:1rem}.notation-icon{align-items:center;color:#667eea;display:flex;flex-shrink:0;justify-content:center}.notation-details{flex:1 1}.notation-details h4{color:#212529;font-size:1rem;font-weight:600;margin:0 0 .25rem}.notation-meta{align-items:center;display:flex;gap:.5rem}.status-badge{border-radius:3px;font-size:.625rem;font-weight:600;letter-spacing:.5px;padding:.125rem .5rem;text-transform:uppercase}.status-badge.published{background:#d4edda;border:1px solid #c3e6cb;color:#155724}.status-badge.draft{background:#fff3cd;border:1px solid #ffeaa7;color:#856404}.status-badge.submitted{background:#cfe2ff;border:1px solid #b6d4fe;color:#084298}.notation-level{color:#6c757d;font-size:.875rem}.notation-action{align-items:center;color:#6c757d;display:flex;flex-shrink:0}.notation-item:hover .notation-action{color:#4facfe}.empty-notations{align-items:center;color:#999;display:flex;flex-direction:column;justify-content:center;padding:2rem;text-align:center}.empty-notations svg{height:48px;width:48px}.empty-notations p{font-size:1rem;margin:.75rem 0 0}.create-notation-btn{background:#4facfe;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;padding:.75rem 1.5rem;transition:background .2s ease}.create-notation-btn:hover{background:#3a8cce}.notations-loading{align-items:center;color:#666;display:flex;flex-direction:column;justify-content:center;padding:3rem}.notations-loading p{font-size:1rem;margin:1rem 0 0}@media (max-width:768px){.AdminDashboard{padding:1rem}.dashboard-header{align-items:flex-start;flex-direction:column;gap:1rem}.user-info-card.admin{flex-direction:column;text-align:center}.admin-stats-grid{grid-template-columns:1fr}.favorites-section{padding:1.5rem}.favorite-item{padding:1rem}.notations-section{padding:1.5rem}.notation-item{padding:1rem}}.ReviewCompositions{min-height:100vh;padding:2rem}.review-header{color:#333;gap:1rem;margin-bottom:2rem}.back-button,.review-header{align-items:center;display:flex}.back-button{background:#fff;border:1px solid #dee2e6;border-radius:50%;box-shadow:0 2px 8px #0000001a;color:#495057;cursor:pointer;flex-shrink:0;height:44px;justify-content:center;padding:0;transition:all .2s ease;width:44px}.back-button:hover{background:#4facfe;border-color:#4facfe;box-shadow:0 4px 12px #4facfe4d;color:#fff;transform:translateX(-2px)}.back-button:active{transform:translateX(0)}.review-header h1{color:#282c34;font-size:2rem;margin:0}.review-content{margin:0 auto;max-width:1200px}.review-info{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 15px #0000001a;margin-bottom:2rem;padding:1rem 1.5rem}.review-info p{color:#666;font-size:.875rem;margin:0}.review-error,.review-loading{align-items:center;background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 15px #0000001a;display:flex;flex-direction:column;justify-content:center;padding:3rem}.review-error{gap:1rem}.review-error p{color:#dc3545;margin:0}.retry-button{background:#4facfe;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:600;padding:.5rem 1.5rem;transition:background .2s ease}.retry-button:hover{background:#3a8cce}.loading-spinner{animation:spin 1s linear infinite;border:4px solid #f3f3f3;border-radius:50%;border-top-color:#667eea;height:40px;width:40px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.empty-reviews{align-items:center;background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 15px #0000001a;color:#999;display:flex;flex-direction:column;justify-content:center;padding:4rem 2rem;text-align:center}.empty-reviews svg{margin-bottom:1rem}.empty-reviews p{font-size:1.125rem;margin:.5rem 0 0}.empty-subtitle{color:#999;font-size:.875rem!important;margin-top:.25rem!important}.compositions-list{display:flex;flex-direction:column;gap:1rem}.review-composition-item{background:#fff;border:1px solid #e9ecef;border-radius:12px;box-shadow:0 4px 15px #0000001a;overflow:hidden;transition:all .2s ease}.review-composition-item:hover{box-shadow:0 6px 20px #00000026}.composition-content{align-items:center;cursor:pointer;display:flex;gap:1rem;padding:1.5rem;transition:background .2s ease}.composition-content:hover{background:#f8f9fa}.composition-icon{align-items:center;color:#667eea;display:flex;flex-shrink:0;justify-content:center}.composition-details{flex:1 1}.composition-details h4{color:#212529;font-size:1.125rem;font-weight:600;margin:0 0 .5rem}.composition-meta{color:#6c757d;font-size:.875rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.submission-date{color:#999;font-size:.75rem;margin:.5rem 0 0}.composition-action-icon{align-items:center;color:#6c757d;display:flex;flex-shrink:0}.composition-content:hover .composition-action-icon{color:#4facfe}.review-actions{background:#f8f9fa;border-top:1px solid #e9ecef;display:flex;gap:.75rem;padding:1rem 1.5rem}.approve-button,.reject-button{align-items:center;border:1px solid;border-radius:4px;cursor:pointer;display:flex;font-size:.75rem;font-weight:600;gap:.5rem;letter-spacing:.5px;padding:.25rem .75rem;text-transform:uppercase;transition:all .2s ease}.approve-button{background:#d1e7dd;border-color:#badbcc;color:#0f5132}.approve-button:hover{background:#badbcc;border-color:#a3cfbb}.reject-button{background:#f8d7da;border-color:#f5c2c7;color:#842029}.reject-button:hover{background:#f5c2c7;border-color:#f1b0b7}.approve-button svg,.reject-button svg{flex-shrink:0}@media (max-width:768px){.ReviewCompositions{padding:1rem}.review-header{flex-wrap:wrap}.review-header h1{font-size:1.5rem}.composition-content{align-items:flex-start}.composition-content,.review-actions{flex-direction:column}.approve-button,.reject-button{justify-content:center;width:100%}}
/*# sourceMappingURL=main.2c0e7252.css.map*/