*{box-sizing:border-box;margin:0;padding:0}:root{color:#333;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-weight:400;line-height:1.5}html{scrollbar-gutter:stable;width:100%;max-width:100%;position:relative;overflow-x:hidden!important}body{box-sizing:border-box;width:100%;min-width:320px;max-width:100%;min-height:100vh;margin:0;position:relative;overflow-x:hidden!important}#root{box-sizing:border-box;width:100%;max-width:100%;min-height:100vh;position:relative;overflow-x:hidden!important}img,video,iframe,canvas{max-width:100%;height:auto}table{max-width:100%}[style*="left: -"],[style*="right: -"]{contain:layout}button,input{font-family:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}@media (max-width:767px){html,body,#root{-webkit-overflow-scrolling:touch;position:relative;width:100%!important;max-width:100%!important;overflow-x:hidden!important}.main-layout,.app,.layout-body,.layout-content,.app-container,.main-content{max-width:100%!important;overflow-x:hidden!important}.notation-grid-container,[class*=scroll],[class*=table-container],[class*=grid-container]{-webkit-overflow-scrolling:touch;overflow:auto}[class*=fixed],[class*=absolute]{max-width:100vw}}.signin-container{background-color:#0000;background-image:linear-gradient(#00000080,#00000080),url(/assets/login_bg-5i3gMbUw.png);background-position:50%;background-repeat:repeat,repeat;background-size:cover;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;justify-content:center;align-items:center;min-height:100vh;padding:20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex}.signin-card{background:#e9ecef;border-radius:24px;width:100%;max-width:440px;overflow:hidden;box-shadow:0 20px 40px #0000004d}.signin-header{text-align:center;background:#9f75ff;padding:20px}.signin-header h1{color:#fff;margin:0;font-size:24px;font-weight:700}.signin-body{padding:30px}.signin-subtitle{text-align:center;margin-bottom:25px;position:relative}.signin-subtitle:before{content:"";z-index:1;background:#ddd;width:100%;height:1px;position:absolute;top:50%;left:0}.signin-subtitle span{color:#888;z-index:2;background:#e9ecef;padding:0 15px;font-size:14px;font-weight:600;position:relative}.form-group label{color:#555;font-size:13px;font-weight:600;display:block;margin-bottom:2px!important}.signin-container .auth-form-group{margin-bottom:14px!important}.auth-input{margin-top:2px}.form-group input{box-sizing:border-box;color:#333;background:#fff;border:1px solid #fff;border-radius:10px;width:100%;padding:14px 20px;font-size:15px;transition:all .3s}.form-group input::placeholder{color:#aaa}.form-group input:focus{border-color:#9f75ff;outline:none;box-shadow:0 0 0 3px #9f75ff1a}.password-input-wrapper{position:relative}.password-toggle{color:#888;cursor:pointer;background:0 0;border:none;font-size:18px;display:flex;position:absolute;top:50%;right:15px;transform:translateY(-50%)}.forgot-password{margin-bottom:25px}.forgot-link{color:#888;cursor:pointer;background:0 0;border:none;padding:0;font-size:12px}.signin-button{color:#fff;cursor:pointer;background-color:#2c2c34;border:none;border-radius:10px;width:100%;margin-top:10px;padding:16px;font-size:15px;font-weight:600;transition:background-color .2s}.signin-button:hover:not(:disabled){background-color:#1f1f25}.signin-button:disabled{opacity:.6;cursor:not-allowed}.error-message{color:#af233a;text-align:center;background-color:#ffdce0;border-radius:8px;margin-bottom:20px;padding:12px;font-size:13px}.toggle-auth{text-align:center;color:#666;margin-top:25px;font-size:14px}.toggle-button{color:#9f75ff;cursor:pointer;background:0 0;border:none;padding:0;font-weight:600;text-decoration:none}.invitation-banner{background:#fff;border-left:4px solid #9f75ff;border-radius:8px;margin-bottom:20px;padding:15px}.invitation-text{color:#333;margin:0 0 4px;font-size:14px;font-weight:600}.invitation-subtext{color:#888;margin:0;font-size:12px}.email-verified{color:#4caf50;margin-top:5px;font-size:11px;font-weight:600;display:block}.info-box{color:#666;background:#fff;border:1px solid #fff;border-radius:10px;padding:15px;font-size:13px}.info-box p{margin:0}.inherited-styles{color:#9f75ff;font-weight:600;margin-top:8px!important}.checkbox-group{flex-direction:column;gap:8px;margin-top:8px;display:flex}.checkbox-label{cursor:pointer;align-items:center;gap:8px;font-size:14px;display:flex}.checkbox-label input[type=checkbox]{cursor:pointer;width:18px;height:18px}.checkbox-label span{color:#333}.recording-modal-overlay{z-index:2000;background:#000c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.recording-modal-content{background:#fff;border-radius:12px;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 10px 40px #0000004d}.recording-modal-header{border-bottom:1px solid #e0e0e0;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.recording-modal-header h2{color:#333;margin:0;font-size:20px;font-weight:600}.recording-modal-close{color:#666;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;font-size:24px;transition:background .2s;display:flex}.recording-modal-close:hover{background:#f5f5f5}.recording-modal-body{flex-direction:column;gap:20px;padding:24px;display:flex}.media-type-selector{border-bottom:2px solid #e0e0e0;gap:8px;display:flex}.media-type-btn{color:#666;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;align-items:center;gap:8px;margin-bottom:-2px;padding:12px 24px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.media-type-btn:hover:not(:disabled){color:#333}.media-type-btn.active{color:#4a90e2;border-bottom-color:#4a90e2}.media-type-btn:disabled{opacity:.5;cursor:not-allowed}.video-preview-container{aspect-ratio:16/9;background:#000;border-radius:8px;width:100%;overflow:hidden}.video-preview{object-fit:contain;width:100%;height:100%}.recording-controls{flex-wrap:wrap;gap:12px;display:flex}.record-btn,.upload-btn,.stop-btn,.process-btn{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.record-btn{color:#fff;background:#4a90e2}.upload-btn{color:#333;background:#f5f5f5;border:1px solid #e0e0e0}.upload-btn:hover{background:#e8e8e8}.stop-btn{color:#fff;background:#d32f2f}.stop-btn:hover{background:#b71c1c}.process-btn{color:#fff;background:#4caf50}.process-btn:hover{background:#388e3c}.upload-progress{flex-direction:column;gap:8px;display:flex}.upload-progress-bar{background:#e0e0e0;border-radius:4px;width:100%;height:8px;overflow:hidden}.upload-progress-fill{background:#4a90e2;height:100%;transition:width .3s}.upload-progress-text{color:#666;text-align:center;font-size:12px}.recorded-preview{text-align:center;background:#f1f8f4;border:1px solid #4caf50;border-radius:8px;padding:16px}.recorded-preview p{color:#2e7d32;margin:0 0 12px;font-weight:500}.play-btn{color:#fff;cursor:pointer;background:#4caf50;border:none;border-radius:6px;align-items:center;gap:8px;padding:8px 16px;font-size:14px;transition:background .2s;display:inline-flex}.play-btn:hover{background:#388e3c}@media (max-width:768px){.recording-modal-content{max-width:100%;max-height:95vh}.recording-modal-body{padding:16px}.recording-controls{flex-direction:column}.record-btn,.upload-btn,.stop-btn,.process-btn{justify-content:center;width:100%}}.skeleton-loader{background:linear-gradient(90deg,#f0f0f0 0%,#f5f5f5 50%,#f0f0f0 100%) 0 0/200% 100%;border-radius:4px;animation:1.5s ease-in-out infinite skeleton-loading}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-detail-page,.skeleton-detail-header,.skeleton-detail-content,.skeleton-content-card{background-color:#fff}.skeleton-button{background-color:#f5f5f5;border:2px solid #e0e0e0;border-radius:4px;flex:0 auto;min-width:120px;max-width:200px;height:36px;padding:8px 16px}.skeleton-card{background-color:#fff;border:1px solid #e0e0e0;border-radius:12px;flex-direction:column;gap:12px;min-height:150px;padding:20px;display:flex}.skeleton-card:before{content:"";background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) 0 0/200% 100%;border-radius:4px;width:60%;height:20px;animation:1.5s ease-in-out infinite skeleton-loading}.skeleton-card:after{content:"";background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) 0 0/200% 100%;border-radius:4px;width:100%;height:14px;margin-top:8px;animation:1.5s ease-in-out infinite skeleton-loading}.skeleton-text{border-radius:4px;width:100%;height:16px}.skeleton-text.short{width:60%}.skeleton-text.medium{width:80%}.collection-labels-container .skeleton-button{margin:0}.skeleton-module-card{background-color:#fff;border:1px solid #e0e0e0;border-radius:12px;flex-direction:column;display:flex;overflow:hidden}.skeleton-module-image-container{background-color:#f5f5f5;width:100%;height:200px;position:relative;overflow:hidden}.skeleton-image{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) 0 0/200% 100%;border-radius:0;width:100%;height:100%;animation:1.5s ease-in-out infinite skeleton-loading}.skeleton-difficulty-badge{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%) 0 0/200% 100%;border-radius:12px;width:60px;height:24px;animation:1.5s ease-in-out infinite skeleton-loading;position:absolute;top:12px;right:12px}.skeleton-module-content{flex-direction:column;gap:8px;padding:20px;display:flex}.skeleton-module-stats{flex-wrap:wrap;gap:12px;margin-top:8px;display:flex}.skeleton-stat{border-radius:12px}.skeleton-detail-page{box-sizing:border-box;contain:layout style;background-color:#fff;flex-direction:column;width:100%;max-width:100%;display:flex;position:relative;overflow:hidden}.skeleton-detail-header{background-color:#fff;border-bottom:1px solid #e0e0e0;justify-content:space-between;align-items:center;gap:16px;padding:24px 20px;display:flex}@media (min-width:1024px){.skeleton-detail-header{padding:24px 66px}}@media (max-width:768px){.skeleton-detail-header{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}}.skeleton-header-left{flex:1;align-items:center;gap:20px;min-width:0;display:flex}.skeleton-back-button{background:linear-gradient(90deg,#f0f0f0 0%,#f5f5f5 50%,#f0f0f0 100%) 0 0/200% 100%;border-radius:50%;flex-shrink:0;width:44px;height:44px;animation:1.5s ease-in-out infinite skeleton-loading;box-shadow:0 4px 12px #00000014}@media (max-width:768px){.skeleton-back-button{width:40px;height:40px}}.skeleton-title-wrapper{flex:1;min-width:0}.skeleton-title{background:linear-gradient(90deg,#f0f0f0 0%,#f5f5f5 50%,#f0f0f0 100%) 0 0/200% 100%;border-radius:6px;width:300px;max-width:100%;height:28px;animation:1.5s ease-in-out infinite skeleton-loading}@media (max-width:768px){.skeleton-title{width:200px;height:20px}}.skeleton-header-right{flex-shrink:0;align-items:center;gap:8px;display:flex}.skeleton-tab-button{background:linear-gradient(90deg,#f0f0f0 0%,#f5f5f5 50%,#f0f0f0 100%) 0 0/200% 100%;border-radius:8px;width:100px;height:36px;animation:1.5s ease-in-out infinite skeleton-loading}.skeleton-detail-content{background-color:#fff;flex-direction:column;gap:24px;padding:24px 20px;display:flex}@media (min-width:1024px){.skeleton-detail-content{padding:24px 66px}}.skeleton-content-card{background-color:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:20px;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.skeleton-card-header{margin-bottom:16px}.skeleton-card-title{background:linear-gradient(90deg,#f0f0f0 0%,#f5f5f5 50%,#f0f0f0 100%) 0 0/200% 100%;border-radius:4px;width:200px;height:20px;margin-bottom:16px;animation:1.5s ease-in-out infinite skeleton-loading}.skeleton-card-content{flex-direction:column;gap:12px;display:flex}.skeleton-text-line{background:linear-gradient(90deg,#f0f0f0 0%,#f5f5f5 50%,#f0f0f0 100%) 0 0/200% 100%;border-radius:4px;height:14px;animation:1.5s ease-in-out infinite skeleton-loading}.skeleton-table{flex-direction:column;gap:12px;margin-top:16px;display:flex}.skeleton-table-row{background:linear-gradient(90deg,#f0f0f0 0%,#f5f5f5 50%,#f0f0f0 100%) 0 0/200% 100%;border:1px solid #f0f0f0;border-radius:8px;width:100%;height:48px;animation:1.5s ease-in-out infinite skeleton-loading}.skeleton-exercise-collection-page{background-color:#e5e7eb;flex-direction:column;width:100%;height:100%;min-height:calc(100vh - 64px);display:flex}.skeleton-collection-header{background-color:#0000;justify-content:space-between;align-items:center;padding:40px 4% 24px;display:flex}.skeleton-collection-header .skeleton-back-button{border-radius:50%;width:40px;height:40px}.skeleton-add-exercise-btn{background:linear-gradient(90deg,#e5e7eb 0%,#d1d5db 50%,#e5e7eb 100%) 0 0/200% 100%;border-radius:8px;width:140px;height:44px;animation:1.5s ease-in-out infinite skeleton-loading}.skeleton-collection-content{flex:1;gap:32px;padding:32px 12%;display:flex}.skeleton-collection-sidebar{flex-shrink:0;width:280px}.skeleton-sidebar-card{background-color:#fff;border-radius:12px;flex-direction:column;gap:8px;padding:20px;display:flex;box-shadow:0 1px 3px #0000000d}.skeleton-sidebar-item{align-items:center;gap:12px;padding:16px;display:flex}.skeleton-stat-circle{background:linear-gradient(90deg,#e5e7eb 0%,#d1d5db 50%,#e5e7eb 100%) 0 0/200% 100%;border-radius:50%;width:28px;height:28px;animation:1.5s ease-in-out infinite skeleton-loading}.skeleton-stat-label{background:linear-gradient(90deg,#e5e7eb 0%,#d1d5db 50%,#e5e7eb 100%) 0 0/200% 100%;border-radius:4px;width:80px;height:16px;animation:1.5s ease-in-out infinite skeleton-loading}.skeleton-collection-main{background-color:#fff;border-radius:12px;flex:1;min-width:0;padding:24px;box-shadow:0 1px 3px #0000000d}.skeleton-filter-bar{align-items:center;gap:12px;margin-bottom:24px;display:flex}.skeleton-filter-label{background:linear-gradient(90deg,#e5e7eb 0%,#d1d5db 50%,#e5e7eb 100%) 0 0/200% 100%;border-radius:4px;width:120px;height:20px;animation:1.5s ease-in-out infinite skeleton-loading}.skeleton-raag-select{background:linear-gradient(90deg,#e5e7eb 0%,#d1d5db 50%,#e5e7eb 100%) 0 0/200% 100%;border-radius:8px;width:160px;height:36px;animation:1.5s ease-in-out infinite skeleton-loading}.skeleton-exercises-placeholder{background:linear-gradient(90deg,#f3f4f6 0%,#e5e7eb 50%,#f3f4f6 100%) 0 0/200% 100%;border-radius:8px;min-height:200px;animation:1.5s ease-in-out infinite skeleton-loading}.app-container{background-color:#fff;width:100%;max-width:100%;min-height:100vh;display:flex;position:relative;overflow-x:hidden}.sidebar{z-index:100;background-color:#1a1a1a;border-right:1px solid #333;width:250px;height:100vh;padding:20px;display:none;position:fixed;top:0;left:0;overflow-y:auto}.sidebar-content{flex-direction:column;display:flex}.sidebar-title{color:#fff;margin:0 0 30px;font-size:24px;font-weight:600}.sidebar-nav{flex-direction:column;gap:8px;display:flex}.sidebar-tab{cursor:pointer;text-align:left;color:#bbb;background:0 0;border:none;border-radius:8px;align-items:center;gap:12px;padding:12px 16px;font-size:18px;transition:background-color .2s,color .2s;display:flex}.sidebar-tab.active{color:#4a90e2;background-color:#333;border-left:4px solid #4a90e2;font-weight:600}.sidebar-icon{justify-content:center;align-items:center;font-size:24px;display:flex}.sidebar-label{font-size:18px}.main-content{box-sizing:border-box;flex:1;width:100%;max-width:100%;margin-left:0;padding:20px 20px 100px;overflow-x:hidden}.library-header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:0;display:flex;position:relative}.header-left{flex-wrap:wrap;flex:1;align-items:center;gap:16px;min-width:0;display:flex}.library-title{color:#333;align-items:center;margin:0;font-size:32px;font-weight:600;line-height:1.2;display:flex}.back-button{color:#374151;cursor:pointer;background-color:#f3f4f6;border:1px solid #e5e7eb;border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;padding:0;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform 50ms;display:inline-flex;overflow:hidden;box-shadow:0 1px 3px #0f172a14}.back-button:hover{color:#111827;background-color:#e5e7eb;border-color:#d1d5db;box-shadow:0 2px 6px #0f172a1f}.back-button:active{transform:translateY(1px);box-shadow:0 0 #0f172a14}.back-button:focus-visible{outline-offset:2px;outline:2px solid #646cff}.back-button svg{font-size:18px}.style-selector-container{flex-wrap:wrap;align-items:flex-start;gap:6px;width:100%;margin-top:8px;display:flex;position:relative}.dropdown-wrapper{min-width:fit-content;display:inline-block;position:relative}.filter-tag{color:#666;cursor:default;white-space:nowrap;text-overflow:clip;background-color:#f0f0f0;border:none;border-radius:20px;padding:6px 10px;font-size:11px;font-weight:500;overflow:visible}.style-selector,.substyle-selector,.type-selector{cursor:pointer;align-items:center;gap:4px;transition:all .2s;display:flex;position:relative}.style-selector:hover,.substyle-selector:hover,.type-selector:hover{background-color:#e0e0e0;transform:scale(1.05)}.dropdown-arrow{flex-shrink:0;align-items:center;margin-left:4px;font-size:16px;transition:transform .3s;display:flex;transform:rotate(0)}.dropdown-arrow svg{width:16px;height:16px}.dropdown-arrow.open{transform:rotate(180deg)}.dropdown-menu{z-index:1000;background:#fff;border:1px solid #ddd;border-radius:8px;min-width:180px;max-width:calc(100% - 40px);max-height:250px;margin-top:4px;padding:8px 0;position:absolute;top:100%;left:0;overflow-y:auto;box-shadow:0 4px 12px #00000026}.substyle-dropdown,.type-dropdown{left:0;right:auto}.style-dropdown{min-width:150px}.dropdown-item{text-align:left;cursor:pointer;color:#333;background:0 0;border:none;width:100%;padding:10px 16px;font-size:14px;transition:background-color .2s}.dropdown-item:hover{background-color:#f5f5f5}.dropdown-item:active{background-color:#e0e0e0}.header-right{flex-shrink:0;align-items:center;gap:8px;display:flex}.view-toggle{cursor:pointer;color:#666;white-space:nowrap;background:#fff;border:1px solid #ddd;border-radius:8px;align-items:center;gap:4px;padding:8px 10px;font-size:12px;display:flex}.view-toggle:hover{background-color:#f5f5f5}.user-dropdown-wrapper{display:inline-block;position:relative}.user-profile-icon{cursor:pointer;background:#f0f0f0;border:none;border-radius:20px;flex-shrink:0;justify-content:center;align-items:center;width:auto;min-width:36px;height:auto;min-height:36px;padding:6px;transition:all .2s;display:flex}.user-profile-icon:hover{background-color:#e0e0e0;transform:scale(1.05)}.profile-icon{color:#666;font-size:20px;display:block}.user-dropdown-menu{z-index:1000;background:#fff;border:1px solid #ddd;border-radius:8px;min-width:160px;padding:4px 0;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 4px 12px #00000026}.user-dropdown-item{text-align:left;cursor:pointer;color:#333;background:0 0;border:none;align-items:center;width:100%;padding:12px 16px;font-size:14px;transition:background-color .2s;display:flex}.user-dropdown-item:hover{background-color:#f5f5f5}.user-dropdown-item:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.user-dropdown-item:last-child{border-bottom-right-radius:8px;border-bottom-left-radius:8px}.category-nav-wrapper{align-items:center;gap:16px;margin-bottom:20px;display:flex}.category-nav{flex:1;gap:20px;padding-bottom:8px;display:flex;overflow-x:auto}.category-nav::-webkit-scrollbar{height:4px}.category-nav::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}.category-tab{cursor:pointer;color:#666;white-space:nowrap;background:0 0;border:none;padding:8px 0;font-size:16px;transition:color .2s;position:relative}.category-tab:hover{color:#333}.category-tab.active{color:#333;font-weight:500}.category-tab.active:after{content:"";background-color:#333;height:2px;position:absolute;bottom:-4px;left:0;right:0}.pill-tabs-nav{-webkit-overflow-scrolling:touch;background-color:#eef2f6;border:1px solid #e5e7eb;border-radius:16px;flex:none;align-items:center;gap:6px;width:fit-content;max-width:100%;padding:6px;display:inline-flex;overflow-x:auto}.pill-tabs-nav .category-tab{color:#6b7280;background-color:#0000;border-radius:8px;justify-content:center;align-self:flex-start;align-items:center;height:auto;padding:12px 24px;font-size:20px;font-weight:500;display:inline-flex;position:static}.pill-tabs-nav .category-tab:hover{color:#374151;background-color:#e5e7eb}.pill-tabs-nav .category-tab.active{color:#f9fafb;background-color:#111827;font-weight:600;box-shadow:0 4px 10px #0f172a40}.pill-tabs-nav .category-tab:after{content:none}.add-button{color:#fff;cursor:pointer;background-color:#4a90e2;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex;box-shadow:0 2px 4px #0000001a}.add-button:hover{background-color:#357abd;transform:scale(1.05);box-shadow:0 4px 8px #00000026}.add-button:active{transform:scale(.95)}.add-icon{font-size:24px}.search-container{background-color:#f5f5f5;border-radius:12px;align-items:center;gap:12px;margin-bottom:24px;padding:12px 16px;display:flex}.search-icon{color:#999;flex-shrink:0;font-size:18px}.search-input{color:#333;background:0 0;border:none;outline:none;flex:1;font-size:16px}.search-input::placeholder{color:#999}.collection-cards-container{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:24px;display:grid}.empty-state{grid-column:1/-1;justify-content:center;align-items:center;min-height:160px;padding:40px 20px;display:flex}.empty-state-message{color:#999;text-align:center;margin:0;font-size:18px;font-weight:400}.assignments-container{flex-direction:column;gap:32px;width:100%;margin:0;padding:0;display:flex}.assignment-date-section{flex-direction:column;gap:16px;width:100%;display:flex}.assignment-date-header{align-items:center;gap:8px;margin-bottom:8px;display:flex}.assignment-date-title{color:#333;margin:0;font-size:18px;font-weight:600}.assignment-classes-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;width:100%;display:grid}.assignment-class-card{background:#fff;border:1px solid #e0e0e0;border-radius:12px;flex-direction:column;height:100%;padding:20px;display:flex;box-shadow:0 1px 3px #0000001a}.assignments-list{flex-direction:column;flex:1;gap:12px;display:flex}.assignment-class-header{border-bottom:1px solid #f0f0f0;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;display:flex}.assignment-class-time{color:#666;font-size:14px;font-weight:500}.assignment-item{background:#f9f9f9;border:1px solid #e0e0e0;border-radius:8px;margin-bottom:12px;padding:16px}.assignment-item-header{align-items:center;gap:12px;margin-bottom:8px;display:flex}.submission-item{box-sizing:border-box;background:#fff;border:1px solid #e0e0e0;border-radius:8px;flex-wrap:wrap;align-items:center;gap:12px;width:100%;padding:12px;display:flex}.submission-item .submission-info{flex:1;min-width:150px}.submission-icon{color:#4a90e2;flex-shrink:0;font-size:24px}.submission-info{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex;overflow:hidden}.submission-file{color:#333;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;overflow:hidden}.submission-date{color:#999;text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.play-submission-btn{color:#fff;cursor:pointer;white-space:nowrap;background:#4a90e2;border:none;border-radius:6px;flex-shrink:0;align-items:center;gap:6px;padding:8px 16px;font-size:14px;transition:background .2s;display:flex}.share-submission-btn{color:#fff;cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;flex-shrink:0;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:500;transition:all .2s;display:flex}.share-submission-btn:hover:not(:disabled){background:linear-gradient(135deg,#5568d3 0%,#653a91 100%);transform:translateY(-1px);box-shadow:0 2px 8px #667eea4d}.share-submission-btn:disabled{cursor:not-allowed;opacity:.6;background:#ccc;transform:none}.assignments-wrapper{width:100%;max-width:100%;margin:0;padding:0}.collection-card{cursor:pointer;background:#fff;border:1px solid #e0e0e0;border-radius:12px;flex-direction:column;transition:all .2s;display:flex;overflow:hidden}.collection-card:hover{border-color:#646cff;transform:translateY(-2px);box-shadow:0 4px 12px #646cff26}.collection-card-image{background:#f5f5f5;justify-content:center;align-items:center;width:100%;height:160px;display:flex;overflow:hidden}.collection-card-image img{object-fit:cover;width:100%;height:100%}.collection-card-image-placeholder{color:#ccc;background-color:#f5f5f5;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.collection-card-image-placeholder .placeholder-icon{opacity:.3;font-size:3rem}.collection-card-content{flex-direction:column;flex:1;padding:16px;display:flex}.collection-card-header-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.collection-card-title{color:#333;margin:0 0 8px;font-size:20px;font-weight:600;line-height:1.4}.collection-card-description{color:#666;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:13px;line-height:1.5;display:-webkit-box;overflow:hidden}.system-default-badge{color:#0369a1;text-transform:uppercase;letter-spacing:.04em;background-color:#e0f2fe;border-radius:999px;flex-shrink:0;padding:2px 8px;font-size:11px;font-weight:600}.collection-labels-container{flex-wrap:wrap;gap:12px;margin-bottom:24px;display:flex}.collection-label{color:#666;cursor:pointer;white-space:nowrap;background-color:#fff;border:2px solid #e0e0e0;border-radius:4px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s}.collection-label:hover{background-color:#f5f5f5;border-color:#d0d0d0}.collection-label.active{color:#dc3545;background-color:#fff;border:2px solid #dc3545;border-radius:4px}.exercise-list{flex-direction:column;gap:32px;display:flex}.exercise-section{flex-direction:column;gap:16px;display:flex}.exercise-section .exercise-cards-container{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;width:100%;display:grid}@media (max-width:768px){.exercise-section .exercise-cards-container{grid-template-columns:1fr}.pill-tabs-nav .category-tab{border-radius:7px;padding:10px 16px;font-size:18px}.add-button{border-radius:50%;width:35px;height:35px}}.exercise-card{cursor:pointer;background-color:#fff;border:1px solid #e0e0e0;border-radius:12px;flex-direction:column;justify-content:space-between;height:100%;min-height:150px;padding:20px;transition:box-shadow .2s,transform .2s;display:flex}.exercise-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.exercise-content{flex-direction:column;flex:1;gap:8px;display:flex}.exercise-title{color:#333;margin:0;font-size:18px;font-weight:600}.exercise-description{color:#666;margin:0;font-size:14px}.exercise-count{color:#666;background-color:#f0f0f0;border-radius:12px;width:fit-content;margin-top:4px;padding:4px 10px;font-size:12px;font-weight:500;display:inline-block}.exercise-icon{opacity:.3;flex-shrink:0;justify-content:flex-end;align-items:center;margin-top:auto;padding-top:12px;font-size:32px;display:flex}.exercise-icon svg{width:32px;height:32px}.bottom-nav{z-index:100;box-sizing:border-box;background-color:#fff;border-top:1px solid #e0e0e0;justify-content:space-around;align-items:center;width:100%;max-width:100%;display:flex;position:fixed;bottom:0;left:0;right:0;overflow-x:hidden}.bottom-nav-tab{cursor:pointer;color:#999;background:0 0;border:none;flex-direction:column;align-items:center;gap:4px;min-width:60px;padding:8px 12px;transition:color .2s;display:flex}.bottom-nav-tab:hover{color:#666}.bottom-nav-tab.active,.bottom-nav-tab.active .bottom-nav-icon{color:#4a90e2}.bottom-nav-icon{justify-content:center;align-items:center;font-size:20px;display:flex}.bottom-nav-icon svg{width:20px;height:20px}.bottom-nav-label{font-size:12px;font-weight:500}@media (max-width:767px){.library-header{flex-flow:wrap;align-items:flex-start}.header-left{flex-direction:row;align-items:flex-start;gap:8px;width:100%;padding-right:0}.library-title{word-wrap:break-word;max-width:calc(100% - 120px);padding-right:0;font-size:24px}.style-selector-container{flex-flow:wrap;gap:6px;width:100%;margin-top:0}.filter-tag{text-align:left;flex:0 auto;justify-content:space-between;align-items:center;width:auto;min-width:100px;max-width:calc(50% - 3px);padding:6px 10px;font-size:11px;display:flex}.dropdown-wrapper{flex:0 auto;width:auto;min-width:100px;max-width:calc(50% - 3px);position:relative}.header-right{justify-content:flex-end;width:auto;margin-top:0;position:absolute;top:0;right:0}.view-toggle{padding:6px 8px;font-size:11px}.user-profile-icon{min-width:32px;min-height:32px;padding:5px}.profile-icon{font-size:18px}.dropdown-menu{width:max-content;min-width:180px;max-width:calc(100% - 40px);max-height:200px}.substyle-dropdown,.type-dropdown{width:max-content;min-width:180px;left:0!important;right:auto!important}.style-dropdown{width:max-content;min-width:150px}.main-content{padding-bottom:100px}.category-nav{gap:12px}.category-tab{font-size:14px}.search-container{margin-bottom:16px}.assignment-classes-grid{grid-template-columns:1fr}}@media (min-width:768px){.main-content{padding-bottom:100px}.style-selector-container{margin-top:0}.filter-tag{padding:6px 12px;font-size:12px}}@media (min-width:1024px){.sidebar{display:block}.main-content{margin-left:250px;padding-bottom:20px}.bottom-nav{display:none}}@media (min-width:768px) and (max-width:1023px){.main-content{max-width:100%;padding:24px}.library-title{font-size:32px}.style-selector-container{gap:8px}.filter-tag{font-size:12px}}@media (max-width:425px){.pill-tabs-nav .category-tab{border-radius:7px;padding:10px 16px;font-size:16px}.filter-tag{max-width:calc(60% - 3px);font-size:10px}}.student-assignments-container{max-width:1200px;margin:0 auto;padding:24px}.assignment-actions{gap:8px;margin-top:12px;display:flex}.record-btn{color:#fff;cursor:pointer;background:#4a90e2;border:none;border-radius:8px;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:500;transition:background .2s;display:flex}.record-btn:hover{background:#357abd}@media (max-width:768px){.student-assignments-container{padding:16px}.page-title{font-size:24px}}.exercise-modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.exercise-modal-content{color:#333;background:#f3f4f6;border-radius:16px;flex-direction:column;width:90%;max-width:600px;max-height:90vh;font-family:Inter,system-ui,-apple-system,sans-serif;display:flex;position:relative;overflow-y:auto;box-shadow:0 10px 25px #0003}.exercise-modal-header{align-items:center;gap:12px;padding:20px 24px;display:flex;position:relative}.step-indicator{color:#fff;background-color:#1a1a1a;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;font-weight:600;display:flex}.exercise-modal-body{flex-direction:column;gap:20px;padding:0 24px 24px;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-input{background-color:#fff;border:1px solid #0000;border-radius:8px;outline:none;padding:10px 12px;font-size:14px;transition:border-color .2s,box-shadow .2s}.form-input:focus{border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e21a}.pattern-selection-group{flex-direction:row;gap:16px;display:flex}.pattern-option{cursor:pointer;color:#333;background-color:#fff;border:1px solid #0000;border-radius:8px;flex:1;justify-content:space-between;align-items:center;padding:12px 16px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.pattern-option.selected{border-color:#4a90e2;box-shadow:0 0 0 1px #4a90e2}.pattern-selection-group.read-only .pattern-option,.pattern-option.read-only{cursor:default;pointer-events:none}.pattern-option.selected.read-only{box-shadow:none;background-color:#e5e7eb;border-color:#9ca3af}.pattern-option.selected.read-only .pattern-option-check{color:#6b7280}.pattern-option-check{color:#4a90e2;align-items:center;font-size:18px;display:flex}.creation-mode-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.creation-card{cursor:pointer;text-align:center;background-color:#fff;border:2px solid #0000;border-radius:12px;flex-direction:column;align-items:center;height:100%;padding:16px;transition:all .2s;display:flex;position:relative}.creation-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000000d}.creation-card.selected{border-color:#4a90e2}.creation-mode-grid.read-only .creation-card,.creation-card.read-only{cursor:default;pointer-events:none}.creation-card.selected.read-only{background-color:#e5e7eb;border-color:#9ca3af}.creation-card.selected.read-only .creation-card-check{color:#6b7280}.creation-card.read-only:hover{box-shadow:none;transform:none}.creation-card-check{color:#4a90e2;font-size:20px;position:absolute;top:8px;right:8px}.creation-card-image{object-fit:contain;opacity:.8;width:100%;height:60px;margin-bottom:12px}.creation-card-title{color:#1a1a1a;margin:0 0 4px;font-size:13px;font-weight:600}.creation-card-desc{color:#888;margin:0;font-size:10px;line-height:1.4}.extra-form-section{flex-direction:column;gap:16px;margin-top:8px;animation:.3s fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.row-2-cols{grid-template-columns:1fr 1fr auto;align-items:end;gap:12px;display:grid}.checkbox-label{color:#666;cursor:pointer;align-items:center;gap:6px;margin-bottom:12px;font-size:12px;display:flex}.pattern-table-label-row{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.add-row-link{color:#4a90e2;cursor:pointer;font-size:12px;font-weight:500;text-decoration:none}.pattern-input-grid{grid-template-columns:repeat(8,1fr);gap:8px;display:grid}.pattern-cell-input{aspect-ratio:1;text-align:center;color:#333;background-color:#fff;border:1px solid #0000;border-radius:6px;width:100%;padding:0;font-size:14px;font-weight:500;box-shadow:0 1px 2px #0000000d}.pattern-cell-input:focus{border-color:#4a90e2;outline:none}.exercise-modal-footer{justify-content:space-between;align-items:center;padding:16px 24px;display:flex}@media (max-width:600px){.creation-mode-grid{grid-template-columns:1fr}.row-2-cols{grid-template-columns:1fr;gap:12px}.checkbox-label{margin-top:4px;margin-bottom:16px}.exercise-modal-body{padding:0 16px 20px}.exercise-modal-header{padding:16px}}.delete-confirmation-modal-overlay{z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#00000080;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.delete-confirmation-modal-content{color:#333;background:#fff;border-radius:12px;flex-direction:column;width:90%;max-width:400px;font-family:Inter,system-ui,-apple-system,sans-serif;animation:.2s ease-out slideIn;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 25px #0003}.delete-confirmation-modal-header{padding:20px 24px 10px}.delete-confirmation-modal-title{color:#1a1a1a;margin:0;font-size:18px;font-weight:600}.delete-confirmation-modal-body{color:#666;padding:0 24px 24px;font-size:14px;line-height:1.5}.delete-confirmation-modal-item-name{color:#1a1a1a;font-weight:600}.delete-confirmation-modal-footer{background-color:#f9fafb;border-top:1px solid #e5e7eb;justify-content:flex-end;align-items:center;gap:12px;padding:16px 24px;display:flex}.btn-modal-cancel{color:#374151;cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s}.btn-modal-cancel:hover{background-color:#f3f4f6;border-color:#9ca3af}.btn-modal-delete{color:#fff;cursor:pointer;background-color:#dc2626;border:none;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:500;transition:background-color .2s}.btn-modal-delete:hover{background-color:#b91c1c}.btn-modal-delete:disabled{opacity:.7;cursor:default}.btn-modal-delete--loading{position:relative}.btn-modal-delete--loading:after{content:"";vertical-align:-2px;border:2px solid #ffffffb3;border-top-color:#fff;border-radius:999px;width:14px;height:14px;margin-left:8px;animation:.7s linear infinite btn-spinner;display:inline-block}@keyframes btn-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.delete-confirmation-modal-content{width:90%;max-width:90%}.delete-confirmation-modal-title{font-size:1.1rem}}@media (max-width:480px){.delete-confirmation-modal-content{width:95%;max-width:95%;margin:0 16px}.delete-confirmation-modal-footer{flex-direction:column-reverse;gap:8px}.btn-modal-cancel,.btn-modal-delete{text-align:center;width:100%;padding:12px;font-size:16px}.delete-confirmation-modal-header{padding:16px 20px 8px}.delete-confirmation-modal-body{padding:0 20px 20px}}.collection-settings-modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.collection-settings-modal-content{color:#333;background:#f3f4f6;border-radius:16px;flex-direction:column;width:90%;max-width:600px;height:90vh;max-height:90vh;font-family:Inter,system-ui,-apple-system,sans-serif;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 25px #0003}.collection-settings-modal-header{z-index:10;background:#f3f4f6;flex-shrink:0;align-items:center;gap:12px;padding:20px 24px;display:flex;position:relative}.collection-settings-modal-body{-webkit-overflow-scrolling:touch;flex-direction:column;flex:1 1 0;gap:20px;min-height:0;padding:0 24px 24px;display:flex;overflow:hidden auto}.collection-settings-modal-body-inner{flex-direction:column;gap:20px;padding-bottom:8px;display:flex}.difficulty-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.difficulty-title{color:#666;margin:0;font-size:14px}.add-level-btn{color:#4a90e2;cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;font-size:14px;font-weight:500;display:flex}.add-level-btn:hover{text-decoration:underline}.level-card{background:#fff;border:1px solid #0000;border-radius:12px;flex-shrink:0;transition:all .2s;box-shadow:0 1px 3px #0000000d}.level-card-header{cursor:pointer;justify-content:space-between;align-items:center;padding:16px;display:flex}.level-card-header:hover{background-color:#f9fafb}.level-title-group{align-items:center;gap:12px;display:flex}.collapse-icon{color:#666;font-size:20px;transition:transform .2s}.collapse-icon.collapsed{transform:rotate(-90deg)}.level-title{color:#333;font-size:16px;font-weight:600}.level-actions{align-items:center;gap:12px;display:flex}.action-icon-btn{color:#999;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;font-size:18px;transition:color .2s;display:flex}.action-icon-btn:hover{color:#333}.level-card-body{border-top:1px solid #f3f4f6;flex-direction:column;gap:16px;padding:0 16px 20px;animation:.2s ease-out slideDown;display:flex}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.level-label{color:#666;margin-bottom:8px;font-size:12px;font-weight:500;display:block}.radio-group-control{flex-wrap:wrap;gap:12px;display:flex}.radio-option-label{cursor:pointer;color:#333;background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;flex:1;justify-content:space-between;align-items:center;min-width:140px;padding:12px 16px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.radio-option-label.selected{background-color:#f0f7ff;border-color:#2563eb}.radio-input{display:none}.radio-custom-circle{border:1px solid #d1d5db;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;transition:all .2s;display:flex}.radio-option-label:hover{border-color:#d1d5db}.radio-option-label.selected:hover{border-color:#2563eb}.radio-input:checked~.radio-custom-circle{background-color:#2563eb;border-color:#2563eb}.radio-custom-circle:after{content:"✓";color:#fff;font-size:12px;font-weight:700;display:none}.radio-input:checked~.radio-custom-circle:after{display:block}.row-2-cols{grid-template-columns:1fr 1fr;gap:16px;display:grid}.bpm-selector{flex-wrap:wrap;gap:8px;display:flex}.bpm-option{color:#666;cursor:pointer;background-color:#e5e7eb;border:none;border-radius:16px;justify-content:center;align-items:center;min-width:40px;height:32px;padding:0 12px;font-size:12px;font-weight:500;transition:all .2s;display:flex}.bpm-option:hover{background-color:#d1d5db}.bpm-option.selected{color:#fff;background-color:#16a34a}.bpm-option.selected:hover{background-color:#15803d}.laya-selector{flex-wrap:wrap;gap:8px;display:flex}.laya-option{color:#666;cursor:pointer;background-color:#e5e7eb;border:none;border-radius:16px;justify-content:center;align-items:center;width:32px;height:32px;font-size:12px;font-weight:500;transition:all .2s;display:flex}.laya-option.selected{color:#fff;background-color:#16a34a}.laya-option.selected:hover{background-color:#15803d}.raag-select{color:#333;cursor:pointer;background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;outline:none;width:100%;padding:10px 12px;font-size:14px}.collection-settings-modal-footer{z-index:10;background:#f3f4f6;flex-shrink:0;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}@media (max-width:600px){.row-2-cols{grid-template-columns:1fr}}.additional-info-modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.additional-info-modal-content{color:#333;background:#f3f4f6;border-radius:16px;flex-direction:column;width:90%;max-width:600px;font-family:Inter,system-ui,-apple-system,sans-serif;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 25px #0003}.additional-info-modal-header{align-items:center;gap:12px;padding:20px 24px;display:flex;position:relative}.step-indicator{color:#fff;background-color:#1a1a1a;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;font-weight:600;display:flex}.modal-title{color:#1a1a1a;flex:1;margin:0;font-size:18px;font-weight:600}.modal-close-btn{color:#666;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;padding:4px;font-size:24px;transition:background-color .2s,color .2s;display:flex;position:absolute;top:20px;right:24px}.modal-close-btn:hover{color:#1a1a1a;background-color:#e5e7eb}.additional-info-modal-body{flex-direction:column;flex:1;gap:8px;padding:0 24px 24px;display:flex}.form-label{color:#666;margin-bottom:4px;font-size:12px;font-weight:500}.notes-textarea{resize:vertical;box-sizing:border-box;background-color:#fff;border:1px solid #0000;border-radius:8px;outline:none;width:100%;min-height:120px;padding:12px;font-family:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s}.notes-textarea:focus{border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e21a}.additional-info-modal-footer{border-top:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.btn-cancel,.btn-previous{color:#666;cursor:pointer;background:0 0;border:none;padding:8px 16px;font-size:14px;font-weight:500;transition:color .2s}.btn-previous:hover{color:#1a1a1a}.btn-next{color:#fff;cursor:pointer;background-color:#1a1a1a;border:none;border-radius:6px;padding:10px 24px;font-size:14px;font-weight:600;transition:background-color .2s}.btn-next:hover{background-color:#333}@media (max-width:600px){.additional-info-modal-content{width:95%}}.users-table-container{max-width:1400px;margin:0 auto;padding:24px}.table-title{color:#333;margin-bottom:24px;font-size:28px;font-weight:600}.table-wrapper{background:#fff;border-radius:12px;overflow-x:auto;box-shadow:0 2px 8px #0000001a}.users-table{border-collapse:collapse;width:100%;min-width:800px}.users-table thead{background-color:#f5f5f5}.users-table th{text-align:left;color:#333;border-bottom:2px solid #e0e0e0;padding:16px;font-size:14px;font-weight:600}.users-table td{color:#666;border-bottom:1px solid #f0f0f0;padding:16px;font-size:14px}.users-table tbody tr:hover{background-color:#f9f9f9}.users-table tbody tr:last-child td{border-bottom:none}.account-type-badge{border-radius:12px;padding:4px 12px;font-size:12px;font-weight:500;display:inline-block}.account-type-instructor{color:#1976d2;background-color:#e3f2fd}.account-type-student{color:#7b1fa2;background-color:#f3e5f5}.account-type-superadmin{color:#e65100;background-color:#fff3e0}.music-styles{flex-wrap:wrap;gap:6px;display:flex}.music-style-tag{color:#666;background-color:#f0f0f0;border-radius:8px;padding:4px 10px;font-size:12px;display:inline-block}.no-styles{color:#999;font-style:italic}.additional-info{font-size:12px;line-height:1.6}.additional-info div{margin-bottom:4px}.additional-info strong{color:#333;font-weight:600}.permissions-list{flex-wrap:wrap;gap:6px;margin-top:4px;display:flex}.permission-tag{color:#e65100;background-color:#fff3e0;border-radius:6px;padding:2px 8px;font-size:11px;display:inline-block}.no-data{text-align:center;color:#999;padding:40px;font-style:italic}.error-message{color:#c33;text-align:center;background-color:#fee;border-radius:8px;padding:16px}@media (max-width:768px){.users-table-container{padding:16px}.table-title{font-size:24px}.users-table{font-size:12px}.users-table th,.users-table td{padding:12px 8px}}.page-description{color:#666;font-size:16px}.modules-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;margin-top:24px;display:grid}.module-card{cursor:pointer;background-color:#fff;border:1px solid #e0e0e0;border-radius:12px;flex-direction:column;transition:box-shadow .2s,transform .2s;display:flex;overflow:hidden}.module-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.module-image-container{background-color:#f5f5f5;width:100%;height:200px;position:relative;overflow:hidden}.module-image{object-fit:cover;width:100%;height:100%}.module-difficulty-badge{color:#fff;text-transform:uppercase;letter-spacing:.5px;border-radius:12px;padding:4px 12px;font-size:11px;font-weight:600;position:absolute;top:12px;right:12px}.module-content{flex-direction:column;flex:1;gap:12px;padding:20px;display:flex}.module-title{color:#333;margin:0;font-size:20px;font-weight:600;line-height:1.3}.module-description{color:#666;-webkit-line-clamp:3;-webkit-box-orient:vertical;flex:1;margin:0;font-size:14px;line-height:1.5;display:-webkit-box;overflow:hidden}.module-stats{flex-wrap:wrap;gap:12px;margin-top:auto;display:flex}.module-stat{color:#999;background-color:#f5f5f5;border-radius:12px;padding:4px 10px;font-size:12px}.assign-module-button{color:#fff;cursor:pointer;background-color:#646cff;border:none;border-radius:8px;margin-top:12px;padding:10px 16px;font-size:14px;font-weight:500;transition:background-color .2s}.assign-module-button:hover:not(:disabled){background-color:#535bf2}.assign-module-button:disabled{cursor:not-allowed;opacity:.6;background-color:#ccc}.no-modules{text-align:center;color:#999;grid-column:1/-1;padding:60px 20px;font-size:16px}@media (max-width:768px){.modules-grid{grid-template-columns:1fr;gap:16px}}.video-upload-container{height:100vh;display:flex;overflow:hidden}.video-upload-sidebar{color:#fff;background-color:#1a1a1a;flex-direction:column;width:250px;padding:20px;display:flex}.video-upload-sidebar-content{flex-direction:column;display:flex}.video-upload-sidebar-nav{flex-direction:column;gap:8px;display:flex}.video-upload-sidebar-title{margin-bottom:30px;font-size:24px;font-weight:600}.video-upload-sidebar-icon{font-size:20px}.video-upload-sidebar-label{font-size:16px}.video-upload-sidebar-tab{color:#bbb;cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:12px;padding:12px 16px;font-size:16px;transition:background .2s,color .2s;display:flex}.video-upload-sidebar-tab.active,.video-upload-sidebar-tab:hover{color:#fff;background-color:#333}.video-upload-main-content{background-color:#f5f5f5;flex-direction:column;flex:1;padding:16px;display:flex;overflow-y:auto}@media (max-width:1023px){.video-upload-sidebar{display:none}.video-upload-main-content{padding-bottom:100px}}.video-upload-library-header{background:#fff;border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:24px;padding:16px;display:flex;box-shadow:0 2px 6px #00000014}.video-upload-header-left{align-items:center;display:flex}.video-upload-header-right{align-items:center;gap:12px;display:flex}.video-upload-library-title{color:#333;font-size:28px;font-weight:700}.video-upload-user-profile-icon{cursor:pointer;color:#333;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:8px;transition:background .2s;display:flex}.video-upload-user-profile-icon:hover{background-color:#f0f0f0}.video-upload-profile-icon{font-size:24px}.video-upload-view-toggle{cursor:pointer;background:0 0;border:1px solid #ddd;border-radius:6px;align-items:center;gap:6px;padding:8px 12px;font-size:14px;transition:all .2s;display:flex}.video-upload-view-toggle:hover{background-color:#f5f5f5;border-color:#bbb}.video-upload-dropdown-arrow{font-size:18px}.video-upload-recovery-banner{background:linear-gradient(135deg,#fff3cd 0%,#ffe69c 100%);border-left:4px solid #ffc107;border-radius:8px;justify-content:space-between;align-items:center;margin-bottom:20px;padding:16px 20px;display:flex;box-shadow:0 4px 12px #ffc10733}.video-upload-recovery-content{flex:1;align-items:center;gap:16px;display:flex}.video-upload-recovery-icon{color:#ff9800;flex-shrink:0;font-size:28px}.video-upload-recovery-content h3{color:#333;margin:0 0 4px;font-size:16px;font-weight:700}.video-upload-recovery-content p{color:#666;margin:0;font-size:14px}.video-upload-recovery-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.video-upload-recovery-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:6px;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .3s;display:flex}.video-upload-recovery-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.video-upload-recovery-dismiss{color:#333;cursor:pointer;background:#0000001a;border:none;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .3s}.video-upload-recovery-dismiss:hover{background:#0003}.video-upload-page-container{flex-direction:column;flex:1;gap:20px;display:flex;overflow-y:auto}.video-upload-controls{box-sizing:border-box;background:linear-gradient(#fff 0%,#fafafa 100%);border:1px solid #0000000d;border-radius:12px;flex-wrap:wrap;align-items:center;gap:16px;width:100%;padding:28px;display:flex;position:relative;box-shadow:0 4px 12px #0000001a}.video-upload-file-wrapper{flex:1.2;min-width:250px;max-width:400px;position:relative}.video-upload-file-input{opacity:0;z-index:-1;width:0;height:0;position:absolute;overflow:hidden}.video-upload-file-label{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;justify-content:center;align-items:center;gap:10px;width:100%;min-height:52px;padding:14px 32px;font-size:15px;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 15px #667eea66}.video-upload-file-label:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea80}.video-upload-file-label:active{transform:translateY(0)}.video-upload-file-input:disabled+.video-upload-file-label{opacity:.6;cursor:not-allowed;transform:none}.video-upload-file-icon{font-size:20px}.video-upload-file-text{letter-spacing:.3px;font-size:15px}.video-upload-record-btn{color:#fff;cursor:pointer;letter-spacing:.3px;background:linear-gradient(135deg,#007bff 0%,#0056b3 100%);border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:10px;min-width:180px;max-width:300px;min-height:52px;padding:14px 24px;font-size:15px;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 15px #007bff66}.video-upload-record-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #007bff80}.video-upload-record-btn:active:not(:disabled){transform:translateY(0)}.video-upload-record-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.video-upload-record-btn.stop{background:linear-gradient(135deg,#dc3545 0%,#c82333 100%);box-shadow:0 4px 15px #dc354566}.video-upload-record-btn.stop:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #dc354580}.video-upload-record-icon{font-size:20px}.video-upload-camera-close-btn{color:#fff;cursor:pointer;z-index:10;background:#dc3545e6;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:22px;transition:all .2s;display:flex;position:absolute;top:16px;right:16px}.video-upload-camera-close-btn:hover{background:#dc3545}.video-upload-youtube-btn{color:#fff;cursor:pointer;letter-spacing:.3px;background:linear-gradient(135deg,red 0%,#c00 100%);border:none;border-radius:8px;align-items:center;gap:8px;min-height:52px;padding:14px 24px;font-size:15px;font-weight:600;transition:all .3s;display:flex;box-shadow:0 4px 15px #f006}.video-upload-youtube-btn:hover:not(:disabled){background:linear-gradient(135deg,#c00 0%,#900 100%);transform:translateY(-2px);box-shadow:0 6px 20px #ff000080}.video-upload-youtube-btn:disabled{cursor:not-allowed;opacity:.6;background:#ccc;transform:none}.video-upload-youtube-input-wrapper{flex:1;align-items:center;gap:8px;max-width:500px;display:flex}.video-upload-youtube-input{border:2px solid #e5e7eb;border-radius:8px;flex:1;min-height:52px;padding:14px 16px;font-size:14px;transition:border-color .2s}.video-upload-youtube-input:focus{border-color:#4a90e2;outline:none}.video-upload-youtube-submit,.video-upload-youtube-cancel{cursor:pointer;border:none;border-radius:8px;min-height:52px;padding:14px 20px;font-size:14px;font-weight:600;transition:all .2s}.video-upload-youtube-submit{color:#fff;background:linear-gradient(135deg,#4a90e2 0%,#357abd 100%);box-shadow:0 4px 15px #4a90e266}.video-upload-youtube-submit:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4a90e280}.video-upload-youtube-cancel{color:#666;background-color:#e5e7eb}.video-upload-youtube-cancel:hover{background-color:#d1d5db;transform:translateY(-1px)}.video-upload-camera-preview-wrapper{justify-content:center;width:100%;padding:16px 0;display:flex}.video-upload-camera-preview-container{aspect-ratio:16/9;background:#000;border-radius:12px;justify-content:center;align-items:center;width:100%;max-width:600px;display:flex;position:relative;overflow:hidden;box-shadow:0 8px 24px #00000026}.video-upload-camera-preview{object-fit:cover;background:#000;width:100%;height:100%;display:block}.video-upload-recording-indicator{color:#fff;background:#000000b3;border-radius:20px;align-items:center;gap:8px;padding:8px 14px;font-size:14px;font-weight:600;display:flex;position:absolute;bottom:16px;left:16px}.video-upload-recording-dot{background:#dc3545;border-radius:50%;width:10px;height:10px;animation:1s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.video-upload-progress-container{background:#fff;border-radius:12px;flex-direction:column;gap:12px;padding:20px;display:flex;box-shadow:0 4px 12px #00000014}.video-upload-progress-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.video-upload-progress-header h3{color:#333;margin:0;font-size:16px;font-weight:700}.video-upload-progress-count{color:#fff;background:#667eea;border-radius:12px;padding:4px 12px;font-size:12px;font-weight:600}.video-upload-progress-item{flex-direction:column;gap:8px;display:flex}.video-upload-progress-info{justify-content:space-between;align-items:center;display:flex}.video-upload-progress-name{color:#333;word-break:break-word;font-size:14px;font-weight:600}.video-upload-progress-percentage{font-size:13px;font-weight:600}.video-upload-progress-percentage.uploading{color:#667eea}.video-upload-progress-percentage.completed{color:#28a745}.video-upload-progress-percentage.failed{color:#dc3545}.video-upload-progress-percentage.recovering{color:#ff9800}.video-upload-progress-chunk-info{color:#999;font-size:12px;font-weight:500}.video-upload-progress-bar-container{background:#e9ecef;border-radius:3px;width:100%;height:6px;overflow:hidden}.video-upload-progress-bar{background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);border-radius:3px;height:100%;transition:width .3s}.video-upload-progress-bar.completed{background:linear-gradient(90deg,#28a745 0%,#20c997 100%)}.video-upload-progress-bar.failed{background:linear-gradient(90deg,#dc3545 0%,#c82333 100%)}.video-upload-progress-bar.recovering{background:linear-gradient(90deg,#ff9800 0%,#fb8c00 100%)}.video-upload-progress-error{color:#ff9800;font-size:12px;font-weight:600}.video-upload-media-section{flex-direction:column;gap:16px;display:flex}.video-upload-media-title{color:#333;margin:0;font-size:18px;font-weight:700}.video-upload-list{flex:1;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;display:grid}.video-upload-empty-state{background:#fff;border:2px dashed #e0e0e0;border-radius:12px;grid-column:1/-1;justify-content:center;align-items:center;min-height:300px;display:flex}.video-upload-empty-state p{color:#999;font-size:16px;font-weight:500}.video-upload-item{cursor:pointer;background:#fff;border-radius:12px;flex-direction:column;padding:12px;transition:all .2s;display:flex;overflow:hidden;box-shadow:0 2px 8px #0000001a}.video-upload-item:hover{transform:translateY(-4px);box-shadow:0 8px 16px #00000026}.video-upload-item-preview{background:linear-gradient(135deg,#f5f5f5 0%,#e9e9e9 100%);border-radius:8px;width:100%;height:180px;margin-bottom:8px;position:relative;overflow:hidden}.video-upload-item-media{object-fit:cover;width:100%;height:100%;display:block}.video-upload-item-audio-placeholder{color:#667eea;background:linear-gradient(135deg,#f8f9ff 0%,#f0f4f8 100%);justify-content:center;align-items:center;width:100%;height:100%;font-size:56px;display:flex}.video-upload-item-play-button{color:#fff;opacity:0;background:#667eeae6;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;font-size:32px;transition:all .3s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.video-upload-item:hover .video-upload-item-play-button{opacity:1;transform:translate(-50%,-50%)scale(1.1)}.video-upload-item-badge{color:#fff;background:#667eeaf2;border-radius:16px;align-items:center;gap:4px;padding:4px 10px;font-size:11px;font-weight:600;display:flex;position:absolute;top:8px;right:8px}.video-upload-item-info{flex-direction:column;gap:6px;display:flex}.video-upload-item-name{color:#333;word-break:break-word;margin:0;font-size:14px;font-weight:600}.video-upload-item-size{color:#999;margin:0;font-size:12px}.video-upload-modal-overlay{z-index:1000;background:#000c;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.video-upload-modal-content{background:#fff;border-radius:16px;flex-direction:column;width:100%;max-width:900px;max-height:90vh;display:flex;position:relative;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.video-upload-modal-close{color:#fff;cursor:pointer;z-index:10;background:#000000b3;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:28px;transition:all .3s;display:flex;position:absolute;top:16px;right:16px}.video-upload-modal-close:hover{background:#000000e6;transform:scale(1.1)}.video-upload-modal-header{border-bottom:1px solid #f0f0f0;padding:24px}.video-upload-modal-header h2{color:#333;word-break:break-word;margin:0 0 8px;font-size:22px;font-weight:700}.video-upload-modal-size{color:#999;margin:0;font-size:14px}.video-upload-modal-body{flex:1;justify-content:center;align-items:center;min-height:300px;padding:24px;display:flex}.video-upload-modal-youtube{background:#000;border-radius:8px;width:100%;max-width:100%;height:0;padding-bottom:56.25%;position:relative;overflow:hidden}.video-upload-modal-youtube iframe{border:none;border-radius:8px;width:100%;height:100%;position:absolute;top:0;left:0}.video-upload-modal-video{background:#000;border-radius:12px;width:100%;max-height:60vh}.video-upload-modal-audio-container{flex-direction:column;align-items:center;gap:24px;width:100%;display:flex}.video-upload-modal-audio-icon{color:#667eea;justify-content:center;align-items:center;font-size:120px;display:flex}.video-upload-modal-audio{width:100%;max-width:500px;height:50px}.video-upload-modal-image{border-radius:12px;max-width:100%;max-height:70vh}.video-upload-modal-footer{border-top:1px solid #f0f0f0;justify-content:flex-end;padding:16px 24px;display:flex}.video-upload-modal-download{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:8px;align-items:center;gap:8px;padding:10px 24px;font-size:14px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex}.video-upload-modal-download:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}@media (max-width:768px){.video-upload-container{flex-direction:column}.video-upload-main-content{padding:12px}.video-upload-library-header{display:none}.video-upload-controls{flex-direction:column;gap:12px;padding:20px}.video-upload-file-wrapper{width:100%;max-width:100%}.video-upload-file-label,.video-upload-record-btn{justify-content:center;width:100%}.video-upload-list{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.video-upload-camera-preview-container{max-width:100%}.video-upload-modal-content{border-radius:8px;max-width:100%;max-height:100vh}.video-upload-modal-body{min-height:auto}.video-upload-recovery-banner{flex-direction:column;align-items:flex-start;gap:12px}.video-upload-recovery-actions{justify-content:flex-start;width:100%}}.manage-content-page-container{flex-direction:column;width:100%;height:100%;min-height:calc(100vh - 100px);padding:0;display:flex;overflow:hidden}.manage-content-wrapper{box-sizing:border-box;flex-direction:column;flex:1;width:100%;max-width:100%;min-height:0;margin:0;padding:1.5rem 0;display:flex;overflow:hidden auto}.page-title{color:#1a1a1a;margin-bottom:.5rem;font-size:1.75rem;font-weight:600}.page-description{color:#666;margin-bottom:1.5rem;font-size:.95rem}.message{border-radius:8px;margin-bottom:1.5rem;padding:1rem;font-size:.95rem;font-weight:500}.message.success{color:#155724;background-color:#d4edda;border:1px solid #c3e6cb}.message.error{color:#721c24;background-color:#f8d7da;border:1px solid #f5c6cb}.form-section{background:#fff;border:1px solid #e0e0e0;border-radius:12px;flex-shrink:0;margin-bottom:1rem;padding:1.25rem;box-shadow:0 2px 4px #0000000d}.section-title{color:#1a1a1a;border-bottom:2px solid #f0f0f0;margin-bottom:.75rem;padding-bottom:.5rem;font-size:1.1rem;font-weight:600}.checkbox-group,.radio-group{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;width:100%;display:grid}.checkbox-label,.radio-label{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;background:#fafafa;border:1px solid #e0e0e0;border-radius:8px;align-items:center;gap:.5rem;min-width:0;padding:.625rem .875rem;font-size:.9rem;transition:all .2s;display:flex}.checkbox-label:hover,.radio-label:hover{background:#f0f0f0;border-color:#d0d0d0}.checkbox-label input[type=checkbox]{cursor:pointer;accent-color:#4a90e2;width:18px;height:18px}.music-styles-selector .radio-label input[type=radio]{opacity:0;width:0;height:0;position:absolute}.music-styles-selector .radio-label{position:relative;padding-left:32px!important}.music-styles-selector .radio-label:before{content:"";box-sizing:border-box;background:#fff;border:2px solid #ccc;border-radius:50%;width:18px;height:18px;transition:all .2s;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.music-styles-selector .radio-label:after{content:"";background:#4a90e2;border-radius:50%;width:8px;height:8px;transition:transform .2s;position:absolute;top:50%;left:19px;transform:translate(-50%,-50%)scale(0)}.music-styles-selector .radio-label:has(input[type=radio]:checked):before{border-color:#4a90e2}.music-styles-selector .radio-label:has(input[type=radio]:checked):after{transform:translate(-50%,-50%)scale(1)}.checkbox-label input[type=checkbox]:checked+span{color:#4a90e2;font-weight:600}.music-styles-selector .radio-label span{margin-left:0}.music-styles-selector .radio-label:has(input[type=radio]:checked) span{color:#4a90e2;font-weight:600}.checkbox-label:has(input[type=checkbox]:checked){background:#e8f4fd;border-color:#4a90e2}.music-styles-selector .radio-label:has(input[type=radio]:checked){background:#e8f4fd;border-color:#4a90e2}.style-category-group{background:#f9f9f9;border:1px solid #e8e8e8;border-radius:8px;margin-bottom:1rem;padding:1rem}.style-category-group:last-child{margin-bottom:0}.style-label{color:#333;border-bottom:1px solid #e0e0e0;margin-bottom:.75rem;padding-bottom:.5rem;font-size:1.1rem;font-weight:600}.sub-category-group{background:#fff;border:1px solid #e8e8e8;border-radius:6px;margin-top:.75rem;margin-left:.75rem;padding:.875rem}.sub-category-header{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.category-type-label{color:#555;margin-bottom:.75rem;font-size:1rem;font-weight:600}.form-actions{border-top:1px solid #e0e0e0;flex-shrink:0;justify-content:flex-end;margin-top:1rem;padding-top:1rem;display:flex}.save-button{color:#fff;cursor:pointer;background:#4a90e2;border:none;border-radius:8px;padding:.875rem 2rem;font-size:1rem;font-weight:600;transition:all .2s;box-shadow:0 2px 4px #4a90e233}.save-button:hover:not(:disabled){background:#357abd;transform:translateY(-1px);box-shadow:0 4px 8px #4a90e24d}.save-button:active:not(:disabled){transform:translateY(0)}.save-button:disabled{cursor:not-allowed;box-shadow:none;background:#ccc}@media (min-width:1024px){.checkbox-group,.radio-group{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}@media (min-width:1400px){.checkbox-group,.radio-group{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}.manage-content-wrapper{padding:2rem 0}}@media (max-width:768px){.manage-content-wrapper{padding:1rem 0}.page-title{font-size:1.5rem}.form-section{padding:1rem}.checkbox-group,.radio-group{grid-template-columns:1fr;gap:.75rem}.checkbox-label,.radio-label{white-space:normal;width:100%}.sub-category-group{margin-left:0}.save-button{width:100%;padding:1rem}}.students-page-container{background-color:#f8f8f8;border-radius:0;flex-direction:column;align-items:flex-start;width:100%;min-height:calc(100vh - 100px);padding:0;display:flex}.students-page-container .category-nav{flex:0;width:100%;margin-bottom:16px}.app-container .main-content{background-color:#f8f8f8}.students-tabs{background-color:#f5f5f5;border-radius:8px;gap:0;width:100%;max-width:800px;margin-bottom:24px;padding:4px;display:flex}.students-tab{color:#666;cursor:pointer;background-color:#e8e8e8;border:none;border-radius:0;flex:1;padding:12px 16px;font-size:16px;font-weight:500;transition:all .2s}.students-tab.active{color:#fff;background-color:#333}.classes-content{flex-direction:column;gap:32px;width:100%;display:flex}.date-section{flex-direction:column;gap:16px;width:100%;display:flex}.date-header{align-items:center;gap:8px;display:flex}.date-title{color:#333;margin:0;font-size:18px;font-weight:600}.classes-list{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:16px;width:100%;max-width:100%;display:grid}.class-card{background-color:#fff;border:1px solid #e5e5e5;border-radius:12px;flex-direction:column;gap:0;width:100%;min-width:0;padding:20px;display:flex;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.class-card-header{justify-content:space-between;align-items:center;display:flex}.instructor-info{align-items:center;gap:12px;display:flex}.instructor-avatar{background-color:#f0f0f0;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;display:flex;overflow:hidden}.instructor-avatar img{object-fit:cover;width:100%;height:100%}.avatar-placeholder{color:#fff;background-color:#646cff;justify-content:center;align-items:center;width:100%;height:100%;font-size:18px;font-weight:600;display:flex}.instructor-name{color:#333;font-size:16px;font-weight:500}.class-time-actions{align-items:center;gap:12px;display:flex}.class-time{color:#666;font-size:14px}.video-icon-btn{cursor:pointer;color:#4a4a4a;background-color:#e8e8e8;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding:8px;transition:all .2s;display:flex}.action-icon-btn{cursor:pointer;color:#4a4a4a;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:color .2s;display:flex}.video-icon-btn:hover,.action-icon-btn:hover{color:#333}.video-icon-btn svg,.action-icon-btn svg{width:20px;height:20px}.theme-title-section{margin-top:16px;margin-bottom:12px}.theme-title{color:#333;margin:0;font-size:18px;font-weight:600}.plan-section{margin-bottom:16px}.plan-box{color:#333;background-color:#f5f5f5;border:none;border-radius:8px;padding:12px 16px;font-size:14px;line-height:1.5}.plan-label{font-weight:600}.card-divider{background-color:#e0e0e0;height:1px;margin:16px 0}.homework-section{justify-content:space-between;align-items:center;display:flex}.homework-label{color:#666;font-size:14px}.homework-status{font-size:14px;font-weight:500}.homework-status.review{color:#333;cursor:pointer;text-decoration:underline}.homework-status.review:hover{opacity:.8}.homework-status.not-submitted{color:#999}.prior-practice-section{flex-direction:column;gap:12px;margin-top:0;display:flex}.prior-practice-label{color:#666;margin-bottom:4px;font-size:14px}.prior-practice-list{flex-direction:column;gap:12px;display:flex}.practice-item{align-items:center;gap:12px;width:100%;display:flex}.practice-exercise-name{color:#333;flex-shrink:0;min-width:180px;max-width:200px;font-size:14px}.practice-progress{flex:1;align-items:center;gap:12px;min-width:0;display:flex}.progress-bar{background-color:#e8e8e8;border-radius:4px;flex:1;min-width:0;height:8px;overflow:hidden}.progress-fill{background-color:#4a4a4a;border-radius:4px;height:100%;transition:width .3s}.progress-percentage{color:#666;text-align:right;min-width:45px;font-size:14px}.tab-content-placeholder{text-align:center;color:#999;justify-content:center;align-items:center;width:100%;min-height:calc(100vh - 200px);padding:20px;font-size:16px;display:flex}.review-content{flex-direction:column;gap:32px;width:100%;display:flex}.review-section{flex-direction:column;gap:16px;display:flex}.review-section-header{align-items:center;gap:8px;display:flex}.section-icon{font-size:20px}.section-icon.checkmark-icon{background-color:#e8e8e8;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:14px;display:flex}.checkmark-symbol{color:#4a4a4a;font-size:14px;font-weight:600;line-height:1}.section-title{color:#333;margin:0;font-size:18px;font-weight:600}.review-cards-list{flex-direction:column;gap:12px;display:flex}.review-card{cursor:grab;background-color:#fff;border:1px solid #e5e5e5;border-radius:12px;justify-content:space-between;align-items:center;gap:16px;width:100%;max-width:800px;padding:16px;transition:all .3s;display:flex;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}.review-card:active{cursor:grabbing}.review-card.dragging{opacity:.5;background-color:#f0f4ff;border-color:#646cff;transform:scale(.95);box-shadow:0 4px 12px #646cff33}.review-card.drag-over{background-color:#e8f0fe;border-style:dashed;border-color:#646cff;transform:translateY(-2px);box-shadow:0 4px 12px #646cff26}.review-card-content{flex:1;align-items:center;gap:12px;min-width:0;display:flex}.review-avatar-container{flex-shrink:0;position:relative}.review-avatar{background-color:#f0f0f0;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;display:flex;overflow:hidden}.review-avatar img{object-fit:cover;width:100%;height:100%}.bell-badge{color:#4a4a4a;filter:grayscale();background-color:#e8e8e8;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:12px;display:flex;position:absolute;top:-2px;right:-2px}.review-info{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.review-text{color:#333;margin:0;font-size:14px;font-weight:500}.review-date{color:#666;margin:0;font-size:12px}.review-button{color:#fff;cursor:pointer;background-color:#333;border:none;border-radius:20px;flex-shrink:0;padding:10px 20px;font-size:14px;font-weight:500;transition:background-color .2s}.review-button:hover{background-color:#444}.rating-button{color:#666;cursor:pointer;background-color:#fff;border:1px solid #e0e0e0;border-radius:20px;flex-direction:row;flex-shrink:0;justify-content:center;align-items:center;gap:4px;min-width:fit-content;padding:8px 16px;transition:all .2s;display:flex}.rating-button:hover{background-color:#f8f8f8;border-color:#ccc}.star-icon{color:#666;font-size:14px;line-height:1}.rating-number{color:#666;font-size:14px;font-weight:500;line-height:1}.students-list-content{width:100%;padding:24px 24px 40px}.instructor-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.instructor-title{color:#111827;margin:0;font-size:20px;font-weight:600}.add-instructor-btn{color:#fff;cursor:pointer;background-color:#111827;border:none;border-radius:999px;align-items:center;gap:6px;padding:8px 16px;font-size:14px;font-weight:500;transition:background-color .15s,transform .15s,box-shadow .15s;display:inline-flex;box-shadow:0 2px 6px #0f172a40}.add-instructor-btn:hover{background-color:#1f2937;transform:translateY(-1px);box-shadow:0 4px 10px #0f172a59}.add-instructor-btn:active{transform:translateY(0);box-shadow:0 1px 3px #0f172a33}.students-grid{flex-direction:column;gap:12px;width:100%;max-width:500px;margin:0;display:flex}.student-card{cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:12px;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;transition:box-shadow .2s,transform .2s,border-color .2s,background-color .2s;display:flex;box-shadow:0 4px 8px #0f172a0a}.student-card:hover{background-color:#f9fbff;border-color:#4a90e2;transform:translateY(-1px);box-shadow:0 8px 20px #0f172a14}.student-card-avatar{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:18px;font-weight:600;display:flex}.student-card-info{flex:1;min-width:0}.student-card-info h3,.student-card-info p{margin-right:40px}.student-card-name{color:#333;white-space:nowrap;text-overflow:ellipsis;margin:0 0 4px;font-size:16px;font-weight:600;overflow:hidden}.student-card-email{color:#666;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:14px;overflow:hidden}.student-card-details{color:#888;margin:4px 0 0;font-size:13px}.login-as-btn{color:#fff;cursor:pointer;white-space:nowrap;background-color:#4a90e2;border:none;border-radius:8px;flex-shrink:0;padding:8px 16px;font-size:13px;font-weight:500;transition:all .2s}.login-as-btn:hover:not(:disabled){background-color:#357abd;transform:translateY(-1px);box-shadow:0 2px 8px #4a90e24d}.login-as-btn:disabled{cursor:not-allowed;opacity:.6;background-color:#ccc}.switch-account-error{background:#fef2f2e6;border:1px solid #dc262640;border-radius:10px;margin-top:10px;padding:10px 12px}.switch-account-error-text{color:#7f1d1d;margin:0;font-size:13px;line-height:1.2rem}.switch-account-error-actions{gap:8px;margin-top:8px;display:flex}.switch-account-set-password-btn{color:#111827;cursor:pointer;background:#ffffffe6;border:1px solid #1f29372e;border-radius:10px;padding:7px 10px;font-size:13px;font-weight:600}.switch-account-set-password-btn:hover{background:#fff;box-shadow:0 2px 10px #11182714}.create-instructor-overlay{z-index:900;background:#0f172a8c;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.create-instructor-modal{background-color:#fff;border-radius:16px;flex-direction:column;width:100%;max-width:720px;max-height:80vh;padding:20px 24px 24px;display:flex;overflow:hidden;box-shadow:0 20px 40px #0f172a59}.create-instructor-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.create-instructor-title{color:#111827;margin:0;font-size:18px;font-weight:600}.create-instructor-close{cursor:pointer;color:#4b5563;background:0 0;border:none;border-radius:999px;padding:4px;font-size:18px;line-height:1;transition:background-color .15s,color .15s}.create-instructor-close:hover{color:#111827;background-color:#f3f4f6}.create-instructor-error{margin-bottom:8px}.create-instructor-body{flex:1;padding-right:4px;overflow-y:auto}.create-instructor-form{flex-direction:column;gap:12px;display:flex}.create-instructor-row{gap:12px;display:flex}.create-instructor-field{flex-direction:column;flex:1;gap:4px;display:flex}.create-instructor-field label{color:#374151;flex-direction:column;gap:4px;font-size:13px;display:flex}.create-instructor-field input[type=text],.create-instructor-field input[type=email],.create-instructor-field input[type=password]{border:1px solid #d1d5db;border-radius:8px;outline:none;padding:8px 10px;font-size:14px;transition:border-color .15s,box-shadow .15s}.create-instructor-field input[type=text]:focus,.create-instructor-field input[type=email]:focus,.create-instructor-field input[type=password]:focus{border-color:#4a90e2;box-shadow:0 0 0 1px #4a90e259}.password-input-wrapper{align-items:center;display:flex;position:relative}.password-input-wrapper input{width:100%;padding-right:34px}.password-toggle-btn{cursor:pointer;color:#9ca3af;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.password-toggle-btn:hover{color:#4b5563}.create-instructor-label{color:#374151;font-size:13px;font-weight:500}.create-instructor-music-list{max-height:220px;padding:8px 4px 4px 0;overflow-y:auto}.create-instructor-style-block{margin-bottom:8px}.create-instructor-style-title{color:#111827;margin-bottom:4px;font-size:13px;font-weight:600}.create-instructor-music-wrapper{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:12px 12px 8px}.create-instructor-music-wrapper .music-styles-selector .form-section{box-shadow:none;margin-bottom:.5rem;padding:.75rem .75rem .5rem}.create-instructor-music-wrapper .music-styles-selector .section-title{margin-bottom:.5rem;font-size:.95rem}.create-instructor-music-wrapper .music-styles-selector .checkbox-group,.create-instructor-music-wrapper .music-styles-selector .radio-group{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem}.create-instructor-music-wrapper .music-styles-selector .checkbox-label,.create-instructor-music-wrapper .music-styles-selector .radio-label{border-radius:6px;padding:.4rem .6rem;font-size:.8rem}.create-instructor-music-wrapper .music-styles-selector .style-category-group{margin-bottom:.5rem;padding:.75rem}.create-instructor-music-wrapper .music-styles-selector .sub-category-group{padding:.6rem}.create-instructor-substyle-block{margin-bottom:4px;margin-left:8px}.create-instructor-substyle-title{color:#4b5563;margin-bottom:2px;font-size:12px;font-weight:500}.create-instructor-types{flex-wrap:wrap;gap:6px;display:flex}.create-instructor-type-option{color:#374151;align-items:center;gap:4px;font-size:12px;display:inline-flex}.create-instructor-type-option input{width:14px;height:14px}.create-instructor-actions{justify-content:flex-end;gap:8px;margin-top:8px;display:flex}.create-instructor-cancel{color:#4b5563;cursor:pointer;background-color:#fff;border:1px solid #d1d5db;border-radius:999px;padding:8px 14px;font-size:14px;transition:background-color .15s,border-color .15s,color .15s}.create-instructor-cancel:hover{color:#111827;background-color:#f3f4f6;border-color:#9ca3af}.create-instructor-submit{color:#fff;cursor:pointer;background-color:#4a90e2;border:none;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:500;transition:background-color .15s,transform .15s,box-shadow .15s;box-shadow:0 2px 8px #4a90e266}.create-instructor-submit:hover{background-color:#357abd;transform:translateY(-1px);box-shadow:0 4px 12px #4a90e280}.create-instructor-submit:disabled,.create-instructor-cancel:disabled{opacity:.7;cursor:not-allowed;box-shadow:none}.switching-overlay{z-index:999;background:#00000059;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.switching-spinner{border:4px solid #fff6;border-top-color:#fff;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite switching-spin}.switching-text{color:#fff;margin-left:12px;font-size:16px;font-weight:500}@keyframes switching-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width:768px){.students-page-container{padding:16px}.create-instructor-modal{max-width:100%;margin:0 12px}.create-instructor-row{flex-direction:column}.classes-list{grid-template-columns:1fr}.class-card{padding:16px}.class-card-header{flex-wrap:wrap;gap:12px}.class-time-actions{justify-content:flex-end;width:100%}.review-card{flex-direction:row;align-items:center;gap:12px}.review-card-content{flex:1;min-width:0}.review-button{flex-shrink:0;padding:10px 20px;font-size:14px}.rating-button{flex-shrink:0}}.student-link-manager{background-color:#f9f9f9;border:1px solid #e0e0e0;border-radius:8px;margin-top:16px;padding:16px}.students-list{max-height:400px;padding-right:4px;overflow-y:auto}.students-list::-webkit-scrollbar{width:6px}.students-list::-webkit-scrollbar-thumb{background:#ddd;border-radius:3px}.students-list::-webkit-scrollbar-thumb:hover{background:#bbb}.student-item{transition:background-color .2s}.student-item:hover{background-color:#f5f5f5!important}.error-message{color:#c33;background-color:#fee;border-radius:4px;margin-bottom:12px;padding:8px 12px;font-size:14px}.invite-student-container{width:100%;max-width:600px}.invite-student-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:20px}.invitation-info{color:#666;background:#f5f5f5;border-radius:8px;padding:12px;font-size:14px}.invitation-info p{margin:0 0 8px;font-weight:500}.invitation-info ol{margin:0;padding-left:20px}.invitation-info li{margin-bottom:4px}.error-message{color:#c33;background:#fee;border-radius:4px;margin-bottom:12px;padding:8px 12px;font-size:14px}.success-message{color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:4px;margin-bottom:12px;padding:12px;font-size:14px}.success-message p{margin:0 0 8px}.success-message input{border:none;outline:none;flex:1;font-family:monospace;font-size:12px}.form-group label{margin-bottom:6px;font-size:14px;font-weight:500;display:block}.form-group input{box-sizing:border-box;border:1px solid #ddd;border-radius:6px;width:100%;padding:10px 12px;font-size:18px}.form-group input:disabled{cursor:not-allowed;background:#f5f5f5}.form-group small{color:#666;margin-top:4px;font-size:12px;display:block}.profile-container{max-width:800px;margin:0 auto;padding:24px}.back-to-library-button{color:#666;cursor:pointer;background-color:#f0f0f0;border:none;border-radius:20px;align-items:center;gap:8px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.back-to-library-button:hover{color:#333;background-color:#e0e0e0}.back-icon{align-items:center;font-size:18px;display:flex}.back-icon svg{width:18px;height:18px}.profile-title{color:#333;margin-bottom:24px;font-size:32px;font-weight:600}.profile-card{background:#fff;border-radius:12px;padding:32px;box-shadow:0 2px 8px #0000001a}.profile-header{border-bottom:1px solid #e0e0e0;justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px;padding-bottom:24px;display:flex}.profile-header-main{align-items:center;gap:20px;display:flex}.profile-avatar{color:#fff;background:linear-gradient(135deg,#646cff 0%,#535bf2 100%);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:80px;height:80px;font-size:32px;font-weight:600;display:flex}.profile-name h2{color:#333;margin:0 0 8px;font-size:28px;font-weight:600}.profile-email{color:#666;margin:0;font-size:16px}.profile-details{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px 24px;margin-bottom:32px;display:grid}.detail-row{flex-direction:column;gap:8px;display:flex}.detail-label{color:#666;font-size:14px;font-weight:500}.detail-value{color:#333;font-size:16px}.account-badge{border-radius:12px;padding:6px 14px;font-size:14px;font-weight:500;display:inline-block}.account-instructor{color:#1976d2;background-color:#e3f2fd}.account-student{color:#7b1fa2;background-color:#f3e5f5}.account-superadmin{color:#e65100;background-color:#fff3e0}.music-styles-list{flex-wrap:wrap;gap:8px;display:flex}.music-style-badge{color:#666;background-color:#f0f0f0;border-radius:8px;padding:6px 12px;font-size:14px;display:inline-block}.invited-students-row{font-size:14px}.invited-students-status{text-align:center;white-space:nowrap;border-radius:999px;padding:4px 8px;font-size:12px;line-height:1.2}.instructor-ids-list{flex-wrap:wrap;gap:8px;display:flex}.instructor-id-badge{color:#1976d2;background-color:#e3f2fd;border-radius:8px;padding:6px 12px;font-size:14px;font-weight:500;display:inline-block}.permissions-list{flex-wrap:wrap;gap:8px;display:flex}.permission-badge{color:#e65100;background-color:#fff3e0;border-radius:6px;padding:4px 10px;font-size:12px;display:inline-block}.profile-actions{border-top:1px solid #e0e0e0;flex-wrap:wrap;gap:12px;padding-top:24px;display:flex}.action-button{cursor:pointer;color:#fff;background-color:#646cff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;transition:all .2s}.action-button:hover{background-color:#535bf2;transform:translateY(-2px)}.action-button.secondary{color:#333;background-color:#f5f5f5}.action-button.secondary:hover{background-color:#e0e0e0}.action-button.danger{color:#fff;background-color:#c33}.action-button.danger:hover{background-color:#a22}.loading-message{text-align:center;color:#666;padding:40px;font-size:16px}.preferences-section{border-top:1px solid #e0e0e0;margin-top:24px;padding-top:24px}.preferences-title{color:#333;margin:0 0 20px;font-size:18px;font-weight:600}.preference-item{flex-direction:column;gap:12px;display:flex}.preference-label{color:#666;font-size:14px;font-weight:500}.notation-system-options{flex-flow:wrap;gap:12px;display:flex}.radio-label{cursor:pointer;background-color:#fff;border:2px solid #e0e0e0;border-radius:8px;flex:auto;align-items:center;gap:10px;min-width:180px;padding:12px 16px;transition:all .2s;display:flex}.radio-label:hover{background-color:#f8f9ff;border-color:#646cff}.radio-label input[type=radio]{display:none}.radio-label input[type=radio]:checked+.radio-custom{background-color:#646cff;border-color:#646cff}.radio-label input[type=radio]:checked+.radio-custom:after{transform:scale(1)}.radio-label input[type=radio]:not(:checked)+.radio-custom:after{transform:scale(0)}.radio-label input[type=radio]:checked~.radio-text{color:#646cff;font-weight:600}.radio-label input[type=radio]:disabled+.radio-custom{opacity:.5}.radio-custom{border:2px solid #ccc;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;transition:all .2s;display:flex;position:relative}.radio-custom:after{content:"";background-color:#fff;border-radius:50%;width:10px;height:10px;transition:transform .2s;transform:scale(0)}.radio-text{color:#333;font-size:15px;transition:all .2s}.saving-indicator{color:#646cff;font-size:13px;font-style:italic}@media (max-width:600px){.notation-system-options{flex-direction:column}.radio-label{min-width:100%}}@media (max-width:768px){.profile-container{padding:0}.profile-title{margin-top:5px;margin-bottom:14px;font-size:20px}.profile-card{padding:16px}.profile-header{text-align:left;flex-direction:column;align-items:flex-start;gap:16px}.profile-header-main{gap:12px;width:100%}.profile-avatar{width:64px;height:64px;font-size:26px}.profile-name h2{font-size:20px}.profile-email{font-size:14px}.profile-header .action-button.secondary{justify-content:center;width:100%;padding:10px 16px;font-size:14px}.profile-actions{flex-direction:column}.action-button{width:100%;font-size:15px}.profile-details{grid-template-columns:1fr;gap:16px}.detail-label{font-size:13px}.detail-value{font-size:14px}.music-style-badge{padding:5px 10px;font-size:13px}.invited-students-row{font-size:13px}.invited-students-status{padding:3px 8px;font-size:11px}}.notation-table-container{-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:silver #f0f0f0;overscroll-behavior-x:contain;border-spacing:0;background:0 0;border:none;border-radius:4px;width:100%;margin:24px 0;position:relative;overflow:auto visible}.notation-grid-table th,.notation-grid-table td{border-radius:0}.notation-table-container.with-border{background:#fff;border:1px solid #ddd;border-radius:10px;margin:1rem 0 1.5rem;padding:0;overflow:hidden}.notation-table-container::-webkit-scrollbar{height:8px}.notation-table-container::-webkit-scrollbar-track{background:#f0f0f0;border-radius:4px}.notation-table-container::-webkit-scrollbar-thumb{background:silver;border-radius:4px}.notation-table-container::-webkit-scrollbar-thumb:hover{background:#a0a0a0}.notation-table{border-collapse:separate;border-spacing:0;table-layout:auto;background:#fff;width:max-content;min-width:100%;font-family:Arial,sans-serif;font-size:16px;position:relative}.notation-table thead{z-index:10;background-color:#f5f5f5;position:sticky;top:0}.notation-table th{text-align:center;color:#333;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;z-index:10;background-color:#f5f5f5;border:1px solid #000;border-bottom-width:2px;padding:10px 12px;font-size:12px;font-weight:600;position:sticky;top:0}.notation-table td{color:#333;vertical-align:middle;text-align:center;background-color:#fff;border-top:1px solid #000;border-bottom:1px solid #000;border-right:1px solid #000;padding:10px 12px;position:relative}.notation-table td:first-child{border-left:1px solid #000}.notation-table td.notation-cell-with-stroke{min-height:40px;padding-bottom:26px}.notation-stroke-container{background-color:#f0f0f0;border:1px solid #d0d0d0;border-radius:3px;justify-content:center;align-items:center;min-width:18px;min-height:18px;margin-top:8px;margin-right:7px;padding:2px 6px;display:flex}.notation-stroke-value{color:#555;text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:600;line-height:1.2}.notation-table td:last-child{border-right:1px solid #e0e0e0}.notation-grid-table{table-layout:auto;border-collapse:separate;border-spacing:0;width:max-content;min-width:100%}.notation-grid-table th:not(.notation-col-section-header):not(.notation-col-beat-header):not(.notation-col-actions-header),.notation-grid-table td:not(.notation-col-section-label):not(.notation-col-swar):not(.notation-col-actions){border:1px solid #636363}.notation-grid-table thead th:first-child{border-top:1px solid #636363!important;border-left:1px solid #636363!important}.notation-grid-table thead th:last-child{border-top:1px solid #636363!important;border-right:1px solid #636363!important}.notation-grid-table tbody tr:first-child td:first-child{border-top:1px solid #636363!important;border-left:1px solid #636363!important}.notation-grid-table tbody tr:first-child td:last-child{border-top:1px solid #636363!important;border-right:1px solid #636363!important}.notation-grid-table tbody tr:last-child td:first-child{border-bottom:1px solid #636363!important;border-left:1px solid #636363!important}.notation-grid-table tbody tr:last-child td:last-child{border-bottom:1px solid #636363!important;border-right:1px solid #636363!important}.notation-grid-table .notation-col-label{color:#333;z-index:1;background-color:#fff;width:100px;min-width:100px;padding-left:16px;font-weight:600;position:sticky;left:0;text-align:left!important;border:1px solid #636363!important;border-right:2px solid #d0d0d0!important}.notation-grid-table thead th.notation-col-label:first-child{border-top-left-radius:8px!important}.notation-grid-table .notation-col-section-header{color:#333;z-index:12;background-color:#a9dfbf;width:120px;min-width:120px;padding:10px 12px 10px 4px;font-weight:600;position:sticky;top:0;left:0;text-align:center!important;border:1px solid #636363!important;border-left:none!important;border-right:2px solid #d0d0d0!important}.notation-grid-table thead th.notation-col-section-header:first-child{border-left:1px solid #636363!important}.notation-grid-table .notation-col-section-label{color:#333;vertical-align:middle;z-index:1;background-color:#fff;width:120px;min-width:120px;padding:10px 12px;font-weight:600;position:sticky;left:0;text-align:center!important;border:1px solid #636363!important;border-left:none!important;border-right-color:#e0e0e0!important}.notation-grid-table tbody td.notation-col-section-label:first-child{border-left:1px solid #636363!important}.notation-section-label-mobile-row{display:none}.notation-grid-table .notation-col-beat-header{text-align:center;border:1px solid #636363;width:60px;min-width:60px;font-weight:600}.notation-grid-table thead th.notation-col-beat-header{border-top:1px solid #636363!important}.notation-grid-table tbody td.notation-multi-note-cell{width:auto;min-width:60px;max-width:none}.notation-grid-table thead th.notation-col-beat-header:nth-child(n+2):nth-child(-n+5){background-color:#9fa8da}.notation-grid-table thead th.notation-col-beat-header:nth-child(n+6):nth-child(-n+9){background-color:#80cbc4}.notation-grid-table thead th.notation-col-beat-header:nth-child(n+10):nth-child(-n+13){background-color:#9fa8da}.notation-grid-table thead th.notation-col-beat-header:nth-child(n+14):nth-child(-n+17),.notation-grid-table.notation-table-with-drag thead th.notation-col-beat-header:nth-child(n+15):nth-child(-n+18){background-color:#80cbc4}.notation-grid-table thead th.notation-col-actions-header{border-top:1px solid #636363!important;border-right:1px solid #636363!important}.notation-grid-table thead th.notation-col-actions-header:last-child{border-top-right-radius:8px!important}.notation-grid-table tbody td{text-align:center;border:1px solid #636363;width:60px;min-width:60px;padding:8px 4px}.notation-grid-table tbody tr:last-child td:last-child{border-bottom-right-radius:8px!important}.notation-grid-table tbody tr:last-child td.notation-col-label:first-child,.notation-grid-table tbody tr:last-child td.notation-col-section-label:first-child{border-bottom-left-radius:8px!important}.notation-grid-table tbody tr:last-child td.notation-col-swar:last-child,.notation-grid-table tbody tr:last-child td.notation-col-actions:last-child{border-bottom-right-radius:8px!important}.notation-col-beat-no{color:#333;background-color:#f9f9f9;width:90px;font-weight:600;text-align:center!important;border-right:1px solid #d0d0d0!important}.notation-col-lyric{text-align:center}.notation-col-swar{color:#1b5e20;text-align:center;letter-spacing:.6em;border:1px solid #636363;font-family:Arial,sans-serif;font-size:18px;font-weight:700;background-color:#0000!important}.notation-grid-table tbody tr:first-child td.notation-col-swar{border-top:1px solid #636363!important}.notation-grid-table tbody tr:last-child td.notation-col-swar{border-bottom:1px solid #636363!important}.notation-grid-table tbody td.notation-col-swar:first-child{border-left:1px solid #636363!important}.notation-grid-table tbody td.notation-col-swar:last-child{border-right:1px solid #636363!important}.notation-col-swar.notation-cell-with-content{background-color:#f5f5f5!important}.notation-multi-note-cell{white-space:nowrap;width:auto!important;min-width:fit-content!important}.notation-multi-note-container{box-sizing:border-box;flex-wrap:nowrap;justify-content:center;align-items:center;gap:4px;width:100%;min-width:fit-content;max-width:100%;display:flex}.notation-multi-note-container>div:first-child{right:-8px}.notation-note-separator{z-index:5;background:repeating-linear-gradient(#1b5e20 0 2px,#0000 2px 4px);flex-shrink:0;align-self:center;width:1px;height:20px;margin:0;position:relative}.notation-split-cell{width:100%;height:100%;display:flex;position:relative}.notation-split-cell-left,.notation-split-cell-right{flex:1;justify-content:center;align-items:center;padding:0 4px;display:flex}.notation-split-cell-divider{background:repeating-linear-gradient(#1b5e20 0 2px,#0000 2px 4px);flex-shrink:0;width:1px;margin:0 2px}.notation-meend-style{z-index:0;padding-top:10px;position:relative;overflow:visible}.notation-meend-style>div{z-index:1;border-top:2px solid #333;border-radius:50% 50% 0 0/25px 25px 0 0;padding-top:6px;padding-left:0;padding-right:0;display:inline-block;position:relative}.notation-meend-style>div:before{display:none}.notation-chando-taal-style{border-radius:4px;position:relative;border:2px solid #000!important;overflow:visible!important}.notation-table td.notation-chando-taal-style,.notation-grid-table td.notation-chando-taal-style{border-radius:4px;border:2px solid #000!important;overflow:visible!important}.notation-col-tabla{text-align:center;color:#e65100;font-weight:500}.notation-col-sitar,.notation-col-sarod,.notation-col-santoor{text-align:center;color:#1976d2}.notation-row-separator{background-color:#0000;height:8px}.notation-row-separator td{background-color:#0000;border:none;padding:4px}.notation-info-icon{color:#1b5e20;cursor:pointer;opacity:.8;z-index:15;background:0 0;border:none;justify-content:center;align-items:center;padding:2px;font-size:14px;transition:opacity .2s,color .2s;display:flex;position:absolute;top:2px;right:2px}.notation-info-icon:hover{opacity:1;color:#1b5e20}.notation-info-icon svg{width:14px;height:14px}.notation-popup-overlay{z-index:1000;background:#0000004d;position:fixed;inset:0}.notation-popup{z-index:1001;background:#fff;border-radius:8px;max-width:300px;margin-top:0;padding:16px;position:fixed;transform:translate(-50%);box-shadow:0 4px 12px #00000026}.notation-popup-close{color:#666;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;padding:0;font-size:20px;transition:background-color .2s;display:flex;position:absolute;top:8px;right:8px}.notation-popup-close:hover{background-color:#f0f0f0}.notation-popup-content{padding-right:24px}.notation-popup-content p{color:#333;margin:0;font-size:14px;line-height:1.5}.notation-col-actions-header{color:#333;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;z-index:10;border:1px solid #d0d0d0;border-bottom:2px solid #b0b0b0;width:60px;min-width:60px;max-width:60px;padding:10px 12px;font-size:12px;font-weight:600;position:sticky;top:0;text-align:center!important}.notation-col-actions{vertical-align:middle;background-color:#fff;width:60px;min-width:60px;max-width:60px;padding:8px 4px;position:relative;overflow:visible;text-align:center!important;border-top:1px solid #636363!important;border-bottom:1px solid #636363!important;border-right:1px solid #636363!important}.notation-grid-table tbody tr:first-child td.notation-col-actions{border-top:1px solid #636363!important}.notation-grid-table tbody tr:last-child td.notation-col-actions{border-bottom:1px solid #636363!important}.notation-grid-table tbody td.notation-col-actions:last-child{border-right:1px solid #636363!important}.notation-actions-button{color:#6b7280;cursor:pointer;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;padding:0;font-size:16px;transition:all .2s;display:flex;box-shadow:0 2px 5px #00000008}.notation-actions-button:hover{color:#374151;background:#e5e7eb}.notation-actions-menu{z-index:99999;background:#fff;border:1px solid #d0d0d0;border-radius:4px;min-width:140px;max-height:200px;position:fixed;overflow:hidden;box-shadow:0 4px 12px #00000026}.notation-actions-menu-item{text-align:left;cursor:pointer;color:#333;background:0 0;border:none;align-items:center;gap:8px;width:100%;padding:10px 16px;font-size:14px;transition:background-color .2s;display:flex}.notation-actions-menu-item:hover{background-color:#f5f5f5}.notation-actions-menu-item svg{width:16px;height:16px}@media (max-width:768px){.notation-table-container{-webkit-overflow-scrolling:touch;border-radius:4px;margin:12px 0;position:relative;overflow-x:auto}.notation-table{width:max-content;min-width:800px;font-size:11px}.notation-table thead{z-index:100;background-color:#f5f5f5;position:sticky;top:0}.notation-table thead th{z-index:101;background-color:#f5f5f5;position:sticky;top:0}.notation-table th,.notation-table td{padding:6px 4px}.notation-grid-table .notation-col-section-header,.notation-grid-table .notation-col-section-label{display:table-cell;width:80px!important;min-width:80px!important;padding:8px 6px!important;font-size:.9rem!important;position:static!important;left:auto!important}.notation-grid-table .notation-col-section-header .notation-header-fullscreen-button{display:inline-flex}.notation-grid-table .notation-col-section-header span,.notation-grid-table .notation-col-section-header .beat-number-text,.notation-grid-table .notation-col-section-label{font-size:.85rem!important}.notation-section-label-mobile-row{display:none!important}.notation-section-label-mobile{color:#333;text-align:center;text-transform:uppercase;letter-spacing:.5px;background-color:#f9f9f9;border-bottom:2px solid #d0d0d0;padding:6px 8px;font-size:12px;font-weight:600;display:table-cell!important}.notation-grid-table .notation-col-beat-header{width:auto;min-width:60px;font-size:14px}.notation-grid-table tbody td{white-space:nowrap;vertical-align:middle;box-sizing:border-box;width:auto;min-width:60px;padding:17px 6px;font-size:16px;position:relative;overflow:visible}.notation-grid-table tbody td.notation-meend-style,.notation-grid-table tbody td.notation-chando-taal-style,.notation-grid-table tbody td .notation-bracket-group{overflow:visible}.notation-grid-table tbody td .notation-multi-note-container{gap:2px;max-width:100%}.notation-col-swar{font-size:20px}.notation-table td .notation-octave-dot-lower,.notation-grid-table td .notation-octave-dot-lower{bottom:-6px!important}.notation-table td .notation-octave-dot-higher,.notation-grid-table td .notation-octave-dot-higher{top:-18px!important}.notation-meend-style{z-index:0;padding-top:14px;padding-left:3px;padding-right:3px;overflow:visible}.notation-meend-style>div{z-index:1;border-top:2px solid #333;border-radius:50% 50% 0 0/18px 18px 0 0;max-width:100%;padding-top:8px;padding-left:1px;padding-right:1px;display:inline-block;position:relative}.notation-meend-style>div:before{display:none}.notation-bracket-group{max-width:100%;padding-bottom:7px;padding-left:3px;padding-right:3px;overflow:visible}.notation-bracket-group:after{border-bottom:2px solid #333;border-left:2px solid #333;border-right:2px solid #333;border-radius:0 0 50% 50%;height:12px;bottom:-4px;left:-2px;right:-2px}.notation-chando-taal-style,.notation-table td.notation-chando-taal-style,.notation-grid-table td.notation-chando-taal-style{box-sizing:border-box;border-radius:4px;border:2px solid #1b5e20!important;padding:2px!important;overflow:visible!important}.notation-info-icon{padding:1px;font-size:12px;top:1px;right:1px}.notation-info-icon svg{width:12px;height:12px}.notation-popup{max-width:90%;padding:12px;font-size:13px}.notation-popup-content{padding-right:20px}.notation-popup-content p{font-size:13px}.notation-col-actions-header,.notation-col-actions{width:60px;min-width:60px;padding:6px 2px}.notation-actions-button{width:40px;height:40px;padding:0;font-size:16px}.notation-actions-menu{min-width:120px}.notation-actions-menu-item{padding:8px 12px;font-size:13px}}@media (max-width:480px){.notation-table-container{margin:2px 0}.notation-table{width:max-content;min-width:700px;font-size:10px}.notation-table thead{z-index:100;background-color:#f5f5f5;position:sticky;top:0}.notation-table thead th{z-index:101;background-color:#f5f5f5;position:sticky;top:0}.notation-table th,.notation-table td{padding:4px 2px}.notation-grid-table .notation-col-section-header,.notation-grid-table .notation-col-section-label{display:table-cell;width:70px!important;min-width:70px!important;padding:6px 4px!important;font-size:.8rem!important;position:static!important;left:auto!important}.notation-grid-table .notation-col-section-header .notation-header-fullscreen-button{display:inline-flex}.notation-grid-table .notation-col-section-header span,.notation-grid-table .notation-col-section-header .beat-number-text,.notation-grid-table .notation-col-section-label{font-size:.75rem!important}.notation-grid-table .notation-col-section-header .beat-number-text{display:none}.notation-section-label-mobile-row{display:none!important}.notation-section-label-mobile{padding:4px 6px;font-size:11px}.notation-grid-table .notation-col-beat-header{width:auto;min-width:55px;font-size:13px}.notation-grid-table tbody td{white-space:nowrap;vertical-align:middle;box-sizing:border-box;width:auto;min-width:55px;padding:15px 5px;font-size:15px;position:relative;overflow:visible}.notation-grid-table tbody td.notation-meend-style,.notation-grid-table tbody td.notation-chando-taal-style,.notation-grid-table tbody td .notation-bracket-group{overflow:visible}.notation-grid-table tbody td .notation-multi-note-container{gap:1px;max-width:100%;font-size:15px}.notation-col-swar{font-size:18px}.notation-table td .notation-octave-dot-lower,.notation-grid-table td .notation-octave-dot-lower{bottom:-5px!important}.notation-table td .notation-octave-dot-higher,.notation-grid-table td .notation-octave-dot-higher{top:-16px!important}.notation-meend-style{z-index:0;padding-top:12px;padding-left:2px;padding-right:2px;overflow:visible}.notation-meend-style>div{z-index:1;border-top:2px solid #333;border-radius:50% 50% 0 0/15px 15px 0 0;max-width:100%;padding-top:8px;padding-left:0;padding-right:0;display:inline-block;position:relative}.notation-meend-style>div:before{display:none}.notation-bracket-group{max-width:100%;padding-bottom:5px;padding-left:2px;padding-right:2px;overflow:visible}.notation-bracket-group:after{border-bottom:2px solid #333;border-left:2px solid #333;border-right:2px solid #333;border-radius:0 0 50% 50%;height:10px;bottom:-2px;left:-2px;right:-2px}.notation-chando-taal-style,.notation-table td.notation-chando-taal-style,.notation-grid-table td.notation-chando-taal-style{box-sizing:border-box;border-radius:4px;border:2px solid #1b5e20!important;padding:2px!important;overflow:visible!important}.notation-info-icon{font-size:10px;top:0;right:0}.notation-info-icon svg{width:10px;height:10px}.notation-popup{max-width:95%;padding:10px;font-size:12px}.notation-popup-content p{font-size:12px}.notation-table-container{overflow-y:visible!important}.notation-col-actions-header,.notation-col-actions{width:60px;min-width:60px;padding:4px 2px}.notation-actions-button{width:36px;height:36px;padding:0;font-size:14px}.notation-actions-menu{min-width:110px}.notation-actions-menu-item{padding:6px 10px;font-size:12px}}.notation-col-drag-handle-header{z-index:13;background-color:#a9dfbf;min-width:40px;position:sticky;top:0;left:0;border-right:none!important;padding:10px 8px!important}.notation-col-drag-handle{z-index:3;cursor:grab;background-color:#fff;width:40px;min-width:40px;position:sticky;left:0;border-right:none!important;padding:8px!important}.notation-col-drag-handle:active{cursor:grabbing}.drag-handle{color:#666;justify-content:center;align-items:center;transition:color .2s;display:flex}.drag-handle:hover{color:#1b5e20}.notation-row-dragging{opacity:.5;background-color:#f0f0f0!important}.notation-row-drag-over{background-color:#e8f5e9!important;border-top:3px solid #1b5e20!important}.notation-table tbody tr[draggable=true]{cursor:move}.notation-table tbody tr[draggable=true]:hover{background-color:auto}.notation-header-fullscreen-button{cursor:pointer;color:#555;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;font-size:20px;transition:all .2s;display:flex}.notation-header-fullscreen-button:hover{color:#1b5e20;background:#0000000d}.notation-header-fullscreen-button svg{width:20px;height:20px}.notation-fullscreen-modal{z-index:10000;background:#fff;flex-direction:column;display:flex;position:fixed;inset:0;overflow:hidden}.notation-fullscreen-header{background:#f9f9f9;border-bottom:1px solid #d0d0d0;flex-shrink:0;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.notation-fullscreen-header h2{color:#333;margin:0;font-size:24px;font-weight:600}.notation-fullscreen-close{cursor:pointer;color:#666;background:0 0;border:1px solid #d0d0d0;border-radius:4px;justify-content:center;align-items:center;padding:8px;font-size:20px;transition:all .2s;display:flex}.notation-fullscreen-close:hover{color:#1b5e20;background:#f5f5f5;border-color:#1b5e20}.notation-fullscreen-close svg{width:20px;height:20px}.notation-fullscreen-content{background:#fff;flex:1;padding:24px;overflow:auto}.notation-fullscreen-table{-webkit-overflow-scrolling:touch;border:none;max-width:100%;margin:0;overflow:auto visible}.notation-fullscreen-table .notation-table{width:max-content;min-width:100%}@media (max-width:768px){.notation-fullscreen-button{width:32px;height:32px;margin:4px 4px 0 0;padding:6px;font-size:18px;top:4px}.notation-fullscreen-button svg{width:18px;height:18px}.notation-fullscreen-header{padding:12px 16px}.notation-fullscreen-header h2{font-size:20px}.notation-fullscreen-close{padding:6px;font-size:18px}.notation-fullscreen-close svg{width:18px;height:18px}.notation-fullscreen-content{padding:12px}.notation-fullscreen-button-wrapper{top:385px!important;right:40px!important}}@media (max-width:1024px){.notation-fullscreen-button-wrapper{top:385px!important;right:40px!important}}@media (max-width:480px){.notation-fullscreen-button{width:28px;height:28px;margin:2px 2px 0 0;padding:4px;font-size:16px;top:2px}.notation-fullscreen-button svg{width:16px;height:16px}.notation-fullscreen-header{padding:8px 12px}.notation-fullscreen-header h2{font-size:18px}.notation-fullscreen-close{padding:4px;font-size:16px}.notation-fullscreen-close svg{width:16px;height:16px}.notation-fullscreen-content{padding:8px}.notation-fullscreen-button-wrapper{top:387px!important;right:36px!important}}.notation-table td.notation-active-beat,.notation-grid-table td.notation-active-beat{background-color:#e8f5e9!important}.combobox-container,.combobox-input-wrapper{width:100%;position:relative}.combobox-input:focus{border-color:#4a90e2;outline:none;box-shadow:0 0 0 2px #4a90e21a}.combobox-input{border:1px solid #e0e0e0;padding-right:2.5rem;border-radius:8px!important}.combobox-arrow{pointer-events:none;color:#666;-webkit-user-select:none;user-select:none;font-size:.75rem;position:absolute;top:50%;right:.75rem;transform:translateY(-50%)}.combobox-dropdown{z-index:3001;background:#fff;border:1px solid #e0e0e0;border-radius:8px;width:max-content;min-width:100%;max-width:min(400px,90vw);max-height:250px;margin-top:4px;position:absolute;top:100%;left:0;overflow-y:auto;box-shadow:0 4px 12px #00000026}.combobox-option{cursor:pointer;white-space:nowrap;text-overflow:ellipsis;border-bottom:1px solid #f0f0f0;padding:.75rem;transition:background-color .2s;overflow:hidden}@media (max-width:480px){.combobox-dropdown{max-width:calc(100vw - 32px)}.combobox-option{white-space:normal;word-wrap:break-word}}.combobox-option:last-child{border-bottom:none}.combobox-option:hover{background-color:#f5f5f5}.combobox-option-create{color:#1b5e20;font-style:italic;font-weight:500}.combobox-option-create:hover{background-color:#e8f5e9}.add-notation-container{box-sizing:border-box;width:100%;margin:0;padding-left:0;padding-right:0;overflow-x:hidden}@media (min-width:1024px){.add-notation-container{box-sizing:border-box;width:100%;padding-left:66px;padding-right:66px}}.add-notation-container .library-header{border-radius:0;justify-content:space-between;align-items:center;margin-bottom:0;padding:1rem 1.5rem;display:flex;position:relative}.add-notation-container .header-right{align-items:center;gap:.75rem;display:flex}.auto-save-message{color:#fff;z-index:99999;pointer-events:none;backface-visibility:hidden;will-change:opacity,transform;background-color:#4caf50;border-radius:6px;padding:6px 12px;font-size:.75rem;font-weight:500;animation:2s ease-in-out fadeInOut;position:fixed;top:12px;right:12px;transform:translateZ(0);box-shadow:0 2px 8px #0000004d}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-5px)}20%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}.add-notation-container .header-right .btn{white-space:nowrap;border-radius:8px;padding:.5rem 1rem;font-size:.9rem;font-weight:500}.add-notation-container .header-right .btn-secondary{color:#666;background-color:#fff;border:1px solid #e0e0e0;align-items:center;gap:6px;display:flex}.add-notation-container .header-right .btn-secondary:hover{background-color:#f5f5f5}.add-notation-container .header-right .btn-primary{color:#fff;background-color:#25252e;border:none}.add-notation-container .header-right .btn-primary:hover:not(:disabled){background-color:#23272b}.add-notation-container .header-right .btn-primary:disabled{opacity:.6;cursor:not-allowed}@media (min-width:1024px){.add-notation-container .library-header{width:100%;margin:0;padding:1.5rem 0}}.add-notation-container .header-left{flex:1;align-items:center;gap:1rem;display:flex}.add-notation-container .library-title{color:#1a1a1a;letter-spacing:-.01em;font-size:1.8rem;font-weight:700;line-height:1.4}.add-notation-content-wrapper{box-sizing:border-box;background-color:#0000;border-radius:0;flex-direction:column;gap:1.5rem;width:100%;max-width:100%;margin:0;padding:0;display:flex;overflow-x:hidden}@media (min-width:1024px){.add-notation-content-wrapper{box-sizing:border-box;background-color:#0000;width:100%;max-width:100%}}.add-notation-header{margin-bottom:2rem}.add-notation-header h1{color:#1b5e20;margin-bottom:.5rem;font-size:2rem}.add-notation-subtitle{color:#666;font-size:.95rem;line-height:1.6}.add-notation-subtitle code{color:#d32f2f;background-color:#f5f5f5;border-radius:3px;padding:.2rem .4rem;font-family:Courier New,monospace}.add-notation-form{box-shadow:none;box-sizing:border-box;border:none;border-radius:12px;width:100%;max-width:100%;margin:0;padding:1.5rem;overflow-x:hidden;background:#ebeef1!important}.notation-form-layout{box-sizing:border-box;background-color:#ebeef1;align-items:stretch;gap:2rem;width:100%;max-width:100%;min-height:100%;display:flex;overflow-x:hidden}.notation-form-left{border-right:1px solid #d0d4d8;flex-direction:column;flex:0 0 280px;align-self:stretch;min-width:280px;padding-right:2rem;display:flex}.notation-form-left .form-group-row{margin-bottom:.5rem}.notation-form-right{flex:1;min-width:0}.toggles-row{flex-flow:wrap;gap:1rem;margin-bottom:1rem;display:flex}.notation-tabs-mobile,.notation-toggles-desktop{display:none}@media (min-width:1024px){.notation-tabs-mobile,.notation-toggles-desktop{display:none}.notation-toggle-item{flex:none;align-items:center;display:flex}.notation-toggle-item .toggle-label{cursor:pointer;color:#4f4f4f;-webkit-user-select:none;user-select:none;white-space:nowrap;justify-content:flex-start;align-items:center;gap:12px;width:auto;margin:0;font-size:.95rem;font-weight:400;display:flex}.notation-toggle-item .toggle-label span{white-space:nowrap;flex:none}}@media (max-width:1023px){.notation-toggles-desktop{display:none!important}}.toggle-group{flex:1;min-width:0;margin-bottom:0}.notation-tabs-group{background:#ebeef1;border-radius:10px;flex-wrap:nowrap;flex-shrink:0;align-items:center;gap:0;width:100%;height:44px;min-height:44px;margin-bottom:12px;padding:4px;display:flex;overflow:hidden}.notation-tab{cursor:pointer;color:#4b5563;white-space:nowrap;background:#f3f5f7;border:none;border-radius:0;flex:1;justify-content:center;align-items:center;min-width:0;height:36px;margin:0;padding:10px 24px;font-size:1rem;font-weight:600;transition:all .2s;display:flex}.notation-tab:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.notation-tab:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.notation-tab.active{color:#fff;background:#25252e;box-shadow:0 2px 4px #0000001a}@media (min-width:1024px){.notation-tabs-group{background:#ebeef1;border-radius:10px;gap:0;height:44px;min-height:44px;padding:4px;overflow:hidden}.notation-tab{background:0 0;border-radius:0;flex:1;min-width:0;height:36px;padding:10px 20px;font-size:.9rem;font-weight:600;transition:all .2s}.notation-tab:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.notation-tab:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.notation-tab:hover:not(.active){color:#4b5563;background:#ffffff80}.notation-tab.active{color:#fff;background:#25252e;box-shadow:0 2px 4px #00000026}}@media (max-width:768px){.notation-tabs-group{border-radius:10px;gap:0;width:100%;padding:4px;margin-bottom:.2rem!important}.notation-tab{background:#f3f5f7;border-radius:0;flex:1;height:36px;margin:0;padding:8px 20px;font-size:.8rem}.notation-tab:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.notation-tab:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.notation-tab.active{color:#fff;background:#25252e}}@media (max-width:480px){.notation-tabs-group{border-radius:10px;gap:0;padding:4px}.notation-tab{background:#f3f5f7;border-radius:0;height:34px;margin:0;padding:8px 16px;font-size:.75rem}.notation-tab:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px}.notation-tab:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.notation-tab.active{color:#fff;background:#25252e}}.toggle-label{cursor:pointer;color:#4f4f4f;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:12px;margin:0;font-size:.95rem;font-weight:400;display:flex}.toggle-label span{flex:1}.add-notation-container{background-color:#ebeef1;max-width:100%;min-height:100vh;margin:0;padding:0}@media (max-width:1023px){.main-content{background-color:#ebeef1;margin:0;padding:0}}.add-notation-container .back-button{color:#2d2d2d;background-color:#d9d9d9;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:inline-flex;box-shadow:0 1px 3px #0000001a}.add-notation-container .back-button:hover{background-color:#c9c9c9;box-shadow:0 2px 6px #00000026}.add-notation-container .back-button svg{color:#2d2d2d;width:24px;height:24px;display:block}@media (min-width:1024px){.add-notation-container,.main-content{background-color:#ebeef1;margin:0;padding:0}.header-actions-desktop{display:flex!important}}.form-group:last-child{margin-bottom:0}.add-notation-form-row{grid-template-columns:1fr 1fr;align-items:end;gap:.75rem;width:100%;display:grid!important}.add-notation-inline-field{min-width:0}.add-notation-inline-field label{color:#4f4f4f;margin-bottom:.5rem;font-size:.95rem;font-weight:400;line-height:1.4;display:block}.form-group label{color:#4f4f4f;margin-bottom:.5rem;font-size:20px;font-weight:400;line-height:1.4;display:block}.form-control{color:#2d2d2d;width:100%;box-shadow:none;appearance:none;border:1px solid #e0e0e0;border-radius:8px;padding:.75rem;font-family:inherit;font-size:1rem;line-height:1.5;transition:border-color .2s,background-color .2s;background-color:#fff!important}.form-control:focus{outline:none;background-color:#fff!important}.notation-textarea{resize:none;color:#2d2d2d;box-sizing:border-box;border:1px solid #e0e0e0;border-radius:8px;width:100%;min-height:44px;max-height:300px;padding:.625rem .75rem;font-family:inherit;font-size:.9rem;font-weight:600;line-height:1.5;overflow-y:auto;background-color:#fff!important}.notation-textarea:focus{outline:none;background-color:#fff!important}.notation-textarea-mobile-overlay,.form-control.notation-textarea-mobile-overlay{color:#0000!important;caret-color:#0000!important}.notation-cursor-indicator-overlay{background-color:#fff;border:1px solid #0000;border-radius:8px}.notation-cursor-block{color:#fff;background-color:#4a90e2}@media (max-width:480px){.notation-textarea{min-height:44px;max-height:200px}}@media (min-width:481px) and (max-width:1024px){.notation-textarea{min-height:44px;max-height:250px}}.notation-textarea-invalid{border-color:#d32f2f!important;box-shadow:0 0 0 3px #d32f2f1a!important}.notation-textarea-invalid:focus{border-color:#d32f2f!important;box-shadow:0 0 0 3px #d32f2f33!important}.current-beat-indicator{color:#555;justify-content:flex-start;align-items:center;gap:10px;margin-top:8px;font-size:.9rem;display:flex}.current-beat-indicator-inline{color:#555;flex-shrink:0;align-items:center;gap:8px;font-size:.9rem;display:flex}@media (max-width:767px){.current-beat-indicator-inline{font-size:.85rem}}.current-beat-label{color:#666;font-size:16px}.current-beat-value{color:#4a90e2;font-variant-numeric:tabular-nums;background:#4a90e21a;border:1px solid #4a90e233;border-radius:8px;justify-content:center;align-items:center;min-width:28px;height:24px;padding:0 10px;font-weight:700;display:inline-flex}.notation-validation-error{color:#c62828;background-color:#ffebee;border:1px solid #ef5350;border-radius:8px;margin-top:8px;padding:10px 12px;font-size:.9rem;line-height:1.5}.notation-validation-error strong{color:#b71c1c}.invalid-letters{color:#d32f2f;background-color:#ffcdd2;border-radius:8px;padding:2px 6px;font-family:Courier New,monospace;font-weight:700}.form-actions{gap:.5rem;margin-top:.75rem;display:flex}.textarea-with-clear{margin-top:0;margin-bottom:.75rem;position:relative}.textarea-with-clear .notation-textarea{margin-top:0;margin-bottom:0}.textarea-with-clear .inline-clear-btn{color:#6b7280;cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:999px;justify-content:center;align-items:center;width:28px;height:28px;display:inline-flex;position:absolute;top:10px;right:10px;box-shadow:0 1px 2px #0f172a14}.textarea-with-clear .inline-clear-btn:hover{color:#111827;background:#f3f4f6}.textarea-with-clear .inline-clear-btn:focus-visible{outline-offset:2px;outline:2px solid #1b5e20}.textarea-with-clear .inline-clear-btn svg{width:18px;height:18px}.notation-pill-list{flex-wrap:wrap;gap:8px;margin-bottom:6px;display:flex}.notation-pill-list[aria-label=Cursor\ controls],.notation-pill-list[aria-label*=Cursor\ controls]{-webkit-overflow-scrolling:touch;flex-wrap:nowrap;justify-content:flex-start;gap:10px;display:flex;overflow-x:auto}@media (max-width:767px){.notation-pill-list[aria-label=Cursor\ controls],.notation-pill-list[aria-label*=Cursor\ controls]{scrollbar-width:none;-ms-overflow-style:none;flex-wrap:nowrap;justify-content:center;gap:8px;overflow-x:auto}.notation-pill-list[aria-label=Cursor\ controls]::-webkit-scrollbar{display:none}.notation-pill-list[aria-label*=Cursor\ controls]::-webkit-scrollbar{display:none}.notation-pill-list[aria-label=Cursor\ controls] .notation-pill,.notation-pill-list[aria-label*=Cursor\ controls] .notation-pill{flex-shrink:0;min-width:auto;padding:10px 14px;font-size:.95rem}.notation-pill-list[aria-label=Cursor\ controls] .arrow-icon-btn,.notation-pill-list[aria-label*=Cursor\ controls] .arrow-icon-btn{min-width:50px!important;min-height:50px!important;padding:12px 14px!important;font-size:1.5rem!important}}.add-notation-input-tabs{margin-bottom:1rem}.add-notation-input-tabs.pill-tabs-nav{background-color:#eef2f6;border:1px solid #e5e7eb;border-radius:16px;gap:30px;width:auto;padding:6px;display:inline-flex}.add-notation-input-tabs .category-tab{color:#666;text-align:center;background-color:#0000;border-radius:6px;flex:1;min-width:0;padding:10px 18px;font-weight:500;transition:all .2s}.add-notation-input-tabs .category-tab:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.add-notation-input-tabs .category-tab:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.add-notation-input-tabs .category-tab{position:relative}.add-notation-input-tabs .category-tab:not(:last-child):after{content:"";background-color:#919191;width:1px;height:30px;position:absolute;top:50%;right:-15px;transform:translateY(-50%)}.add-notation-input-tabs .category-tab.active:after{display:none}.add-notation-input-tabs .category-tab:has(+.category-tab.active):after{display:none}@media (max-width:767px){.add-notation-input-tabs.pill-tabs-nav{width:100%}.add-notation-input-tabs .category-tab{flex:1;min-width:0;padding:10px 12px;font-size:.9rem}}.add-notation-input-tabs .category-tab:hover{color:#666;background-color:#0000}.add-notation-input-tabs .category-tab.active{color:#f9fafb;background-color:#111827;font-weight:600;box-shadow:0 4px 10px #0f172a40}.add-notation-input-tabs .category-tab.active:hover{color:#fff;background-color:#25252e}.cursor-controls-row{margin-top:8px;margin-bottom:10px}.cursor-controls-separator{width:10px;height:1px}.notation-pill-list[aria-label=Cursor\ controls] .notation-pill,.notation-pill-list[aria-label*=Cursor\ controls] .notation-pill{color:#4a4a4a;background-color:#fff;border:none;border-radius:9999px;padding:8px 16px;font-weight:500;transition:all .2s;box-shadow:0 1px 3px #0000001a}.notation-pill-list[aria-label=Cursor\ controls] .notation-pill:hover,.notation-pill-list[aria-label*=Cursor\ controls] .notation-pill:hover{background-color:#fff;border:none;box-shadow:0 2px 6px #00000026}.notation-pill-list[aria-label=Cursor\ controls] .notation-pill:focus-visible,.notation-pill-list[aria-label*=Cursor\ controls] .notation-pill:focus-visible{outline-offset:2px;outline:2px solid #1b5e20}.notation-pill-list[aria-label=Cursor\ controls] .notation-pill:first-child,.notation-pill-list[aria-label=Cursor\ controls] .notation-pill:nth-child(2),.notation-pill-list[aria-label=Cursor\ controls] .notation-pill:nth-child(3),.notation-pill-list[aria-label*=Cursor\ controls] .notation-pill:first-child,.notation-pill-list[aria-label*=Cursor\ controls] .notation-pill:nth-child(2),.notation-pill-list[aria-label*=Cursor\ controls] .notation-pill:nth-child(3){min-width:40px;padding:8px 14px}.notation-pill-list[aria-label=Cursor\ controls] .notation-pill:last-child,.notation-pill-list[aria-label*=Cursor\ controls] .notation-pill:last-child{padding:8px 20px;font-weight:600}.swar-note-grid{box-sizing:border-box;grid-template-columns:repeat(8,minmax(44px,1fr));justify-content:start;align-items:stretch;gap:10px 12px;width:100%;max-width:100%;display:grid;overflow:visible}@media (min-width:768px){.swar-note-grid{width:70%;max-width:70%}}@media (max-width:767px){.swar-note-grid{grid-template-columns:repeat(8,1fr);gap:8px 6px;width:100%;max-width:100%}}.swar-pair-col{grid-template-rows:auto auto;gap:8px;display:grid}.swar-note-pill{background-color:#fff;border:none;justify-content:center;width:100%;min-width:44px;position:relative;overflow:visible;box-shadow:0 1px 3px #0000001a;padding:10px 14px!important;font-size:1.1rem!important;font-weight:600!important}.swar-button-content{vertical-align:middle;display:inline-block;position:relative}.swar-octave-dot-lower{color:#2d2d2d;font-size:1.2em;font-weight:700;line-height:1;position:absolute;left:50%;transform:translate(-50%);bottom:-9px!important}.swar-octave-dot-higher{color:#2d2d2d;z-index:10;font-size:1.2em;font-weight:700;line-height:1;position:absolute;left:50%;transform:translate(-50%);top:-17px!important}@media (max-width:767px){.swar-note-pill{justify-content:center;align-items:center;min-height:48px;padding:12px 10px;font-size:1.15rem;font-weight:600;display:flex;overflow:visible}.swar-octave-dot-lower{font-size:1.3em;bottom:-5px}.swar-octave-dot-higher{font-size:1.3em;top:-10px}}.swar-note-pill:hover{background-color:#fff;box-shadow:0 2px 6px #00000026}.swar-note-pill--tall{grid-row:span 2;justify-content:center;align-items:center;height:100%;min-height:68px;display:inline-flex;overflow:visible}.ornaments-section{margin:8px 0 10px}.ornament-shortcuts-row{flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:10px;width:100%;margin:8px 0 10px;display:flex}.ornament-shortcut-trigger{justify-content:center;align-items:center;gap:10px;display:inline-flex}.ornament-shortcut-symbol-btn{color:#2d2d2d;justify-content:center;align-items:center;min-width:56px;padding-left:16px;padding-right:16px;display:inline-flex}.ornament-symbol{justify-content:center;align-items:center;line-height:1;display:inline-flex}.ornament-symbol__svg{display:block}.ornament-symbol--kan{letter-spacing:.02em;font-weight:700}.ornament-symbol--kan sup{margin-right:1px;font-size:.6em;line-height:1;position:relative;top:-.5em}@media (max-width:768px){.ornament-shortcuts-row{justify-content:center}}.ornaments-dropdown-wrapper{display:inline-block;position:relative}@media (max-width:768px){.ornaments-section{justify-content:center;width:100%;display:flex}}.ornaments-dropdown-trigger{cursor:pointer;color:#111827;background-color:#fff;border:1px solid #e0e0e0;border-radius:10px;justify-content:center;align-items:center;gap:12px;min-width:200px;padding:14px 36px;font-size:1.15rem;font-weight:600;transition:all .2s;display:flex;box-shadow:0 2px 4px #00000014}.ornaments-dropdown-trigger:hover{background-color:#f5f5f5;box-shadow:0 3px 8px #0000001f}.dropdown-arrow{color:#666;font-size:.75rem}.ornaments-dropdown-menu{z-index:9999;background-color:#fff;border:1px solid #e0e0e0;border-radius:12px;min-width:200px;max-height:calc(100vh - 100px);padding:8px 0;position:fixed;overflow:visible auto;box-shadow:0 6px 20px #00000026}.ornaments-dropdown-item{cursor:pointer;align-items:center;gap:12px;padding:12px 18px;font-size:1rem;transition:background-color .15s;display:flex;position:relative;overflow:visible}.ornaments-dropdown-item:hover{background-color:#f0f4f8}.ornaments-dropdown-item.disabled{opacity:.5;cursor:not-allowed}.ornaments-dropdown-item.disabled:hover{background-color:#0000}.ornaments-dropdown-item.has-submenu{padding-right:40px;overflow:visible}.ornaments-dropdown-item.has-submenu:hover,.ornaments-dropdown-item.has-submenu:focus-within{background-color:#e8f0fe}.ornaments-item-label{color:#2d2d2d;min-width:80px;font-weight:500}.ornaments-item-example{color:#333;justify-content:flex-end;align-items:center;min-width:50px;margin-left:auto;font-family:inherit;font-size:1rem;display:flex}.submenu-arrow{color:#888;font-size:.7rem;transition:transform .2s;position:absolute;right:14px}.submenu-arrow.open{color:#1a73e8;transform:rotate(90deg)}.ornaments-submenu{z-index:10001;background-color:#fff;border:1px solid #d0d0d0;border-radius:8px;min-width:80px;max-height:280px;padding:6px 0;position:fixed;overflow-y:auto;box-shadow:0 4px 12px #00000026;visibility:visible!important;opacity:1!important;display:block!important}.ornaments-submenu-item{cursor:pointer;white-space:nowrap;text-align:center;padding:8px 20px;font-size:1rem;font-weight:500;transition:background-color .15s}.ornaments-submenu-item:hover{color:#1a73e8;background-color:#e8f0fe}@media (max-width:767px){.ornaments-dropdown-menu{min-width:180px;max-height:calc(100vh - 120px);overflow-y:auto}.ornaments-submenu{max-height:250px}.ornaments-dropdown-trigger{min-width:160px;padding:12px 24px;font-size:1rem}.ornaments-dropdown-item{padding:12px 14px;font-size:.95rem}.ornaments-submenu-item{padding:10px 14px;font-size:.9rem}}.ornaments-header{color:#2d2d2d;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.95rem;font-weight:600;display:flex}.show-ornaments-toggle{color:#4a90e2;cursor:pointer;background:0 0;border:none;padding:0;font-size:1rem;font-weight:500;text-decoration:none;transition:color .2s}.show-ornaments-toggle:hover{color:#357abd;text-decoration:underline}.ornament-accordion>summary{cursor:pointer;color:#111827;justify-content:space-between;align-items:center;gap:12px;font-weight:700;list-style:none;display:flex}.ornament-accordion>summary::-webkit-details-marker{display:none}.ornament-accordion>summary:after{content:"▾";color:#374151;flex:none;padding-left:6px;font-size:24px;line-height:1;transition:transform .16s}.ornament-accordion[open]>summary:after{transform:rotate(180deg)}.ornament-accordion[open]>summary{margin-bottom:10px}.notation-pill{color:#2d2d2d;cursor:pointer;white-space:nowrap;background-color:#fff;border:none;border-radius:8px;justify-content:center;align-items:center;max-width:100%;font-weight:600;line-height:1;transition:all .2s;display:inline-flex;box-shadow:0 1px 3px #0000001a;padding:10px 16px!important;font-size:1rem!important}.notation-pill.notation-pill--comma{line-height:1;padding-left:18px!important;padding-right:18px!important;font-size:1.85rem!important}.notation-pill:hover{background-color:#fff;box-shadow:0 2px 6px #00000026}.notation-pill:focus-visible{outline-offset:2px;outline:2px solid #1b5e20}.notation-pill--active{box-shadow:0 2px 8px #d32f2f40;border:2px solid #d32f2f!important}.notation-pill--disabled{opacity:.5;cursor:not-allowed}.chhand-select{color:#2d2d2d;cursor:pointer;text-align:center;text-align-last:center;appearance:none;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;border:2px solid #d32f2f;border-radius:8px;justify-content:center;align-items:center;min-width:80px;height:auto;min-height:62px;padding:12px 28px 12px 16px;font-size:1rem;font-weight:600;line-height:1.4;display:inline-flex;box-shadow:0 2px 8px #d32f2f40}.chhand-select:focus{border-color:#d32f2f;outline:none;box-shadow:0 2px 8px #d32f2f40}.chhand-select option{color:#2d2d2d;text-align:center;background-color:#fff;padding:12px 16px;font-size:1rem;font-weight:500}.chhand-select option:hover,.chhand-select option:focus,.chhand-select option:checked{background-color:#f5f5f5}.chhand-select option:disabled{color:#999;font-weight:600}@media (min-width:1024px){.chhand-select{min-width:85px;min-height:66px;padding:12px 30px 12px 16px;font-size:1rem}.chhand-select option{padding:14px 18px;font-size:1rem}}@media (max-width:767px){.chhand-select{min-width:70px;min-height:54px;padding:10px 26px 10px 12px;font-size:.95rem}.chhand-select option{padding:10px 14px;font-size:.95rem}}@media (max-width:480px){.chhand-select{min-width:65px;min-height:50px;padding:8px 24px 8px 10px;font-size:.9rem}.chhand-select option{padding:8px 12px;font-size:.9rem}}.arrow-icon-btn{box-shadow:none!important;background-color:#0000!important;justify-content:center!important;align-items:center!important;min-width:48px!important;min-height:48px!important;padding:12px 14px!important;font-size:1.8rem!important;font-weight:600!important;display:flex!important}.arrow-icon-btn:hover{box-shadow:none!important;background-color:#0000000d!important}.arrow-icon-btn:focus-visible{outline-offset:2px;outline:2px solid #1b5e20;background-color:#0000!important}.octave-arrow-btn{border-radius:8px!important;width:52px!important;min-width:52px!important;padding:12px 8px!important;font-size:2rem!important}.btn{cursor:pointer;border:none;border-radius:8px;padding:.5rem 1rem;font-size:.9rem;transition:background-color .2s}.btn-primary{color:#fff;background-color:#25252e;border:none;border-radius:8px;font-weight:600}.btn-primary:hover{color:#fff;background-color:#1a1a1a}.btn-primary:disabled{cursor:not-allowed;background-color:#ccc}.btn-secondary{color:#2d2d2d;background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;font-weight:600}.btn-secondary:hover{color:#2d2d2d;background-color:#f5f5f5;border-color:#d0d0d0}.notation-preview{margin-top:8px}.notation-preview-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem;display:flex}.preview-fullscreen-button-mobile{cursor:pointer;color:#666;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;margin-right:auto;padding:4px;font-size:18px;transition:all .2s;display:flex}.preview-fullscreen-button-mobile:hover{color:#25252e;background:#0000000d}.preview-fullscreen-button-mobile svg{width:18px;height:18px}.notation-preview h2{color:#2d2d2d;margin-bottom:0;font-size:1.5rem;font-weight:700}.notation-preview-empty{text-align:center;color:#666;background:#f5f5f5;border:1px dashed #e0e0e0;border-radius:12px;margin-top:2rem;padding:2rem}@media (min-width:1024px){.notation-preview-empty{background:#fff;border:1px solid #e0e0e0;border-radius:12px;margin-top:0;padding:3rem 2rem}}.stroke-checkbox-label{cursor:pointer;color:#333;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;width:auto;margin-top:8px;margin-bottom:0;padding:0;font-weight:600;display:flex}.stroke-checkbox-label input[type=checkbox]{cursor:pointer;accent-color:#1b5e20;appearance:checkbox;flex-shrink:0;width:18px;height:18px;margin:0 5px 0 0}.stroke-checkbox-label span{font-size:1rem;line-height:1.4;display:inline-block}.notation-actions-bottom{border-top:1px solid #e0e0e0;justify-content:flex-end;gap:.75rem;margin-top:1rem;padding-top:1rem;display:flex}.notation-actions-bottom .btn{border-radius:8px;padding:.75rem 1.5rem;font-size:1rem}.notation-actions-mobile{display:none}.additional-info-section{background-color:#ebeef1;border:none;border-top:1px solid #d0d4d8;border-radius:12px;margin:0;padding:1.5rem}@media (max-width:1023px){.additional-info-section{display:none}}.additional-info-header{align-items:center;gap:12px;margin-bottom:20px;display:flex}.additional-info-label{color:#4f4f4f;cursor:pointer;flex-shrink:0;margin:0;font-size:.95rem;font-weight:400}.toggle-switch{cursor:pointer;width:44px;height:24px;display:inline-block;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{cursor:pointer;background-color:#dcdcdc;border-radius:24px;transition:all .3s;position:absolute;inset:0}.toggle-slider:before{content:"";background-color:#fff;border-radius:50%;width:18px;height:18px;transition:all .3s;position:absolute;bottom:3px;left:3px}.toggle-switch input:checked+.toggle-slider{background-color:#343a40}.toggle-switch input:checked+.toggle-slider:before{transform:translate(20px)}.additional-info-fields{flex-flow:row;align-items:flex-end;gap:12px;display:flex}.additional-info-field{flex-direction:column;display:flex}.additional-info-field:first-child{flex:0 0 120px;min-width:0}.additional-info-field:nth-child(2){flex:1;min-width:0}.additional-info-field label{color:#4f4f4f;margin-bottom:.5rem;font-size:.875rem;font-weight:400}.additional-info-field .form-control{color:#2d2d2d;background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:.625rem .875rem;font-size:.9rem}.additional-info-field .form-control::placeholder{color:#999}.btn-submit-info{color:#fff;cursor:pointer;background-color:#666;border:none;border-radius:8px;flex-shrink:0;height:fit-content;padding:.625rem 1.5rem;font-size:.9rem;font-weight:500;transition:all .2s}.btn-submit-info:hover:not(:disabled){background-color:#555}.btn-submit-info:disabled{opacity:.5;cursor:not-allowed;background-color:#999}@media (max-width:1023px){.add-notation-content-wrapper{padding-bottom:100px}.add-notation-form{padding-bottom:1rem}.notation-actions-mobile{z-index:1000;box-sizing:border-box;background-color:#ebeef1;border-top:1px solid #e0e0e0;justify-content:space-between;gap:.75rem;width:100%;padding:8px;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -2px 8px #0000001a}.notation-actions-mobile .btn{border-radius:8px;flex:1;justify-content:center;align-items:center;gap:6px;min-height:35px;padding:.625rem 1rem;font-size:1rem;font-weight:600;display:flex}.notation-actions-mobile .btn-primary{color:#fff!important;background-color:#25252e!important;border:none!important}.notation-actions-mobile .btn-primary:hover:not(:disabled){background-color:#1a1a1a!important}.notation-actions-mobile .clear-icon{font-size:20px}.notation-actions-desktop,.header-actions-desktop{display:none!important}.scroll-to-top-container-mobile{z-index:10;justify-content:center;align-items:center;width:100%;margin-top:-10px;margin-bottom:-10px;display:flex;position:relative}.scroll-to-top-mobile{color:#fff;cursor:pointer;background-color:#2d2d2d;border:none;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;transition:all .2s;display:flex;position:relative}.scroll-to-top-mobile:hover{background-color:#1a1a1a}.scroll-to-top-mobile svg{color:#fff;width:16px;height:16px}}@media (min-width:1024px){.add-notation-container{box-sizing:border-box;background-color:#ebeef1;width:100%;max-width:100%;margin:0;padding-left:66px;padding-right:66px}.add-notation-content-wrapper{box-sizing:border-box;background-color:#0000;flex-direction:column;align-items:stretch;gap:1.5rem;width:100%;max-width:100%;margin:0}.add-notation-form{min-width:0;box-shadow:none;box-sizing:border-box;background:#ebeef1;border:none;border-bottom:1px solid #d0d4d8;border-radius:12px;flex:1;width:100%;max-width:100%;margin:0;padding:1.5rem}.additional-info-section{box-sizing:border-box;background-color:#ebeef1;border:none;border-top:1px solid #d0d4d8;border-radius:12px;width:100%;max-width:100%;margin:0;padding:1.5rem}.notation-form-layout{align-items:stretch;gap:2.5rem;min-height:100%}.notation-form-left{border-right:1px solid #d0d4d8;flex-direction:column;flex:0 0 460px;align-self:stretch;min-width:460px;padding-right:2.5rem;display:flex}.notation-form-left .form-group-row{gap:1rem}.notation-form-left .form-field-inline{flex:1;min-width:0}.notation-preview{min-width:0;box-shadow:none;background:#ebeef1;border:none;border-radius:12px;flex:1;margin-top:0;padding:1.5rem}.notation-preview-header{border-bottom:1px solid #e0e0e0;margin-bottom:1rem;padding-bottom:1rem}.form-group-row{gap:1.5rem}.form-field-inline{flex:1;min-width:120px}.add-notation-input-tabs{margin-bottom:20px}.add-notation-input-tabs .category-tab{font-size:1rem}.notation-textarea{height:auto;min-height:48px;max-height:400px;overflow-y:auto}.form-control{min-height:48px;padding:1rem;font-size:1.1rem}.btn,.btn-primary,.btn-secondary{font-size:1.1rem}.notation-tab{font-size:1rem}.notation-pill{font-size:1.05rem!important;font-weight:600!important}.swar-note-pill{font-size:1.1rem}.swar-note-grid{width:65%;max-width:65%}.swar-note-pill{min-width:28px;padding:9px;font-size:.95rem}.swar-note-pill--tall{min-height:54px}.add-notation-container .header-right .btn{font-size:1rem}.notation-actions-bottom .btn{font-size:1.1rem}.arrow-icon-btn{justify-content:center!important;align-items:center!important;min-width:52px!important;min-height:52px!important;padding:14px 16px!important;font-size:2rem!important;font-weight:600!important;display:flex!important}.add-notation-container .back-button{width:48px;height:48px}.add-notation-container .back-button svg{width:28px;height:28px}.textarea-with-clear .inline-clear-btn{width:36px;height:36px}.textarea-with-clear .inline-clear-btn svg{width:24px;height:24px}.add-notation-container svg,.add-notation-container .btn svg,.add-notation-container .notation-pill svg,.add-notation-container .back-button svg,.add-notation-container button svg,.btn svg,.notation-pill svg,.arrow-icon-btn svg{width:24px!important;height:24px!important}.preview-fullscreen-button-mobile svg{width:24px;height:24px}.add-notation-container .header-right .btn svg{width:20px;height:20px}.notation-actions-mobile,.scroll-to-top-container-mobile,.scroll-to-top-mobile{display:none!important}.additional-info-section{box-shadow:none;background-color:#ebeef1;border:none;border-radius:12px;padding:1.5rem}.additional-info-header{align-items:center;gap:12px;display:flex}.additional-info-label{color:#4f4f4f;cursor:pointer;flex-shrink:0;margin:0;font-size:20px;font-weight:400}.additional-info-fields{flex-wrap:nowrap;align-items:flex-end;gap:12px;display:flex}.additional-info-field{flex-direction:column;display:flex}.additional-info-field:first-child{flex:0 0 150px}.additional-info-field:nth-child(2){flex:1}.additional-info-field label{color:#4f4f4f;margin-bottom:.5rem;font-size:20px;font-weight:400}.additional-info-field .form-control{color:#2d2d2d;background-color:#fff;border:1px solid #e0e0e0;border-radius:8px;min-height:48px;padding:.75rem 1rem;font-size:20px}.additional-info-field .form-control::placeholder{color:#999;font-size:20px}.btn-submit-info{color:#fff;cursor:pointer;background-color:#666;border:none;border-radius:8px;flex:none;height:fit-content;min-height:48px;padding:.75rem 1.5rem;font-size:20px;font-weight:500;transition:all .2s}.btn-submit-info:hover:not(:disabled){background-color:#555}.btn-submit-info:disabled{opacity:.5;cursor:not-allowed;background-color:#999}}@media (min-width:768px) and (max-width:1023px){.add-notation-content-wrapper{gap:1.5rem}.add-notation-form{padding:1.25rem}.form-group-row{gap:1rem}.form-control{min-height:44px;padding:.875rem;font-size:1rem}.btn,.btn-primary,.btn-secondary{font-size:1rem}.notation-tab{font-size:.95rem}.notation-pill{font-size:1rem!important;font-weight:600!important}.swar-note-pill{font-size:1rem}.add-notation-container .header-right .btn{font-size:.95rem}.notation-actions-bottom .btn{font-size:1rem}.add-notation-input-tabs .category-tab{font-size:.95rem}.arrow-icon-btn{justify-content:center!important;align-items:center!important;min-width:48px!important;min-height:48px!important;padding:12px 14px!important;font-size:1.3rem!important;font-weight:600!important;display:flex!important}.add-notation-container .back-button{width:44px;height:44px}.add-notation-container .back-button svg{width:26px;height:26px}.textarea-with-clear .inline-clear-btn{width:32px;height:32px}.textarea-with-clear .inline-clear-btn svg{width:20px;height:20px}.add-notation-container svg,.add-notation-container .btn svg,.add-notation-container .notation-pill svg,.add-notation-container .back-button svg,.add-notation-container button svg,.btn svg,.notation-pill svg,.arrow-icon-btn svg{width:20px!important;height:20px!important}.add-notation-container .header-right .btn svg{width:18px;height:18px}.swar-note-grid{width:70%;max-width:70%}.swar-note-pill{min-width:30px;padding:7px 10px;font-size:.9rem}.swar-note-pill--tall{min-height:59px}.additional-info-label,.additional-info-field label{font-size:18px}.additional-info-field .form-control{min-height:44px;font-size:18px}.additional-info-field .form-control::placeholder{font-size:18px}.btn-submit-info{min-height:44px;font-size:18px}}@media (max-width:767px){.add-notation-container,.add-notation-form,.notation-form-layout,.notation-form-right{max-width:100%;overflow-x:hidden}.preview-fullscreen-button-mobile{padding:6px;font-size:20px;display:flex}.preview-fullscreen-button-mobile svg{width:20px;height:20px}.add-notation-container{background-color:#ebeef1;width:100%;max-width:100%;margin:0;padding:0;overflow-x:hidden}.add-notation-content-wrapper{box-sizing:border-box;background-color:#ebeef1;gap:0;width:100%;max-width:100%;margin:0;padding:0;overflow-x:hidden}.notation-form-layout{flex-direction:column;gap:.5rem}.notation-form-left{border-bottom:1px solid #d0d4d8;border-right:none;flex:1;width:100%;padding-bottom:4px;padding-right:0}.notation-form-right{padding-top:0;padding-bottom:6px;padding-left:0}.notation-form-left .form-group-row{flex-flow:row;gap:.5rem}.notation-form-left .form-field-inline{flex:1;min-width:0}.toggles-row{flex-flow:row;gap:.75rem;margin-bottom:.5rem}.toggle-group{flex:1;min-width:0}.notation-form-right{flex:1;width:100%}.notation-form-right .form-group:first-child{margin-top:0}.add-notation-container .library-header{background-color:#dee3e7;flex-wrap:wrap;gap:.5rem;margin:0;padding:8px}.add-notation-container .header-right{gap:.5rem}.add-notation-container .header-right .btn{padding:.5rem .75rem;font-size:.85rem}.add-notation-container .library-title{color:#1a1a1a;font-size:1.35rem;font-weight:700;line-height:1.4}.add-notation-form{box-sizing:border-box;background-color:#ebeef1;border-radius:0;width:100%;max-width:100%;margin:0;padding:1rem;overflow-x:hidden;padding-bottom:2px!important}.notation-form-right{max-width:100%;overflow-x:hidden}.form-group{margin-bottom:.75rem}.notation-form-right .form-group:first-child{margin-top:0;margin-bottom:.5rem}.form-group:last-child{margin-bottom:0}.form-group-row{flex-flow:row;gap:.75rem;margin-bottom:0}.form-field-inline{flex:1;min-width:0;max-width:100%;margin-bottom:0}.form-field-inline label,.form-group label{color:#4f4f4f;margin-bottom:.5rem;font-size:.9rem;font-weight:400;line-height:1.4}.add-notation-input-tabs{margin-bottom:1rem}.notation-textarea,.current-beat-indicator{margin-top:.5rem;margin-bottom:.5rem}.notation-pill-list{margin-top:.5rem;margin-bottom:.75rem}.cursor-controls-row{margin-top:.75rem;margin-bottom:.75rem}.swar-note-grid{margin-top:.5rem;margin-bottom:.75rem}.ornament-accordion{margin:.75rem 0}.notation-validation-error{margin-top:.5rem;margin-bottom:.5rem}.notation-pill{flex:none;width:auto;padding:8px 14px!important;font-size:.95rem!important;font-weight:600!important}.header-right{align-items:center;display:flex}.notation-actions-bottom{flex-direction:column;gap:.5rem}.notation-actions-bottom .btn{width:100%}.notation-preview{background-color:#dee3e7;margin-top:1rem;padding:0 8px}.notation-preview-header{gap:2px;margin-bottom:0;padding:5px 0}.notation-preview h2{font-size:1.25rem;line-height:1.4}}@media (max-width:480px){.add-notation-content-wrapper{box-sizing:border-box;gap:0;width:100%;max-width:100%;padding:0;overflow-x:hidden}.add-notation-form{box-sizing:border-box;background-color:#ebeef1;border-radius:0;width:100%;max-width:100%;padding:8px;overflow-x:hidden}.add-notation-container .library-header{background-color:#dee3e7}.form-group{margin-bottom:.75rem}.form-field-inline label,.form-group label{color:#4f4f4f;margin-bottom:.4rem;font-weight:400;font-size:.75rem!important}.form-control{background-color:#fff;border:1px solid #e0e0e0;padding:.625rem;font-size:.95rem}.form-group-row{gap:.5rem}.swar-note-grid{box-sizing:border-box;width:100%;max-width:100%;margin-bottom:.5rem;padding:0;overflow-x:hidden;grid-template-columns:repeat(8,1fr)!important;gap:8px 6px!important}.swar-note-pill{justify-content:center;align-items:center;width:100%;min-width:0;min-height:48px;display:flex;padding:12px 6px!important;font-size:1.1rem!important;font-weight:600!important;overflow:visible!important}.swar-octave-dot-lower{font-size:1.4em!important;bottom:-10px!important}.swar-octave-dot-higher{font-size:1.4em!important;top:-20px!important}.swar-note-pill--tall{min-height:66px}.notation-pill{padding:10px 14px!important;font-size:.95rem!important;font-weight:600!important}.notation-pill-list{gap:6px;margin-bottom:.5rem}.notation-pill-list[aria-label=Cursor\ controls]{justify-content:space-between;align-items:center;width:100%;max-width:100%;margin:0 auto;padding:0 4px;gap:2px!important;display:flex!important;overflow:visible!important}.notation-pill-list[aria-label=Cursor\ controls] .notation-pill{box-sizing:border-box;border-radius:9999px;min-width:0;font-size:.9rem;padding:10px 12px!important}.notation-pill-list[aria-label=Cursor\ controls] .notation-pill.notation-pill--comma{font-size:1.2rem}.add-notation-input-tabs{margin-top:.35rem;margin-bottom:.35rem}.add-notation-input-tabs .category-tab{color:#666}.add-notation-input-tabs .category-tab.active{color:#fff;background-color:#25252e}.add-notation-input-tabs .category-tab{padding:8px 16px;font-size:.85rem}.notation-textarea{padding:.625rem;font-size:.9rem}.current-beat-indicator{margin-top:.4rem;font-size:.85rem}.notation-actions-bottom .btn{padding:.4rem .8rem;font-size:.85rem}.notation-preview{background-color:#dee3e7;margin-top:0}.notation-preview h2{font-size:1.1rem}.add-notation-content-wrapper .combobox-input-wrapper .form-group input{font-size:14px!important}.textarea-with-clear{margin-bottom:.2rem!important}.notation-pill.notation-pill--comma{line-height:1;font-size:1.65rem!important}}@media (max-width:320px){.swar-note-grid{column-gap:3px!important}.swar-note-pill{padding:8px 4px!important;font-size:.85rem!important;font-weight:600!important}.notation-pill-list[aria-label=Cursor\ controls]{gap:10px!important}.notation-pill-list[aria-label=Cursor\ controls] .notation-pill{padding:9px 0!important;font-size:.75rem!important}.notation-pill-list[aria-label=Cursor\ controls] .notation-pill.notation-pill--comma{font-size:1.1rem!important}}@media (max-width:768px){.add-notation-container .library-title{font-size:1.25rem}.add-notation-container .header-right .btn{padding:.4rem .8rem;font-size:.8rem}.form-group label,.form-field-inline label,.form-control,.combobox-input{font-size:12px}.combobox-option{padding:.6rem;font-size:12px}.notation-tab{padding:8px 12px;font-size:.75rem}.notation-textarea{font-size:.85rem}.current-beat-indicator-inline{font-size:.75rem}.current-beat-label{font-size:.7rem}.current-beat-value{font-size:.75rem}.notation-pill{padding:10px 12px;font-size:.9rem;font-weight:600}.swar-note-pill{min-height:40px;padding:10px 6px;font-size:1rem;font-weight:600;overflow:visible}.swar-octave-dot-lower{font-size:1.2em;bottom:-5px}.swar-octave-dot-higher{font-size:1.2em;top:-9px}.ornaments-header{font-size:.85rem}.show-ornaments-toggle,.notation-validation-error{font-size:.8rem}.notation-validation-error small{font-size:.75rem}.notation-actions-bottom .btn{padding:.5rem 1rem;font-size:.8rem}.notation-preview h2{font-size:1rem}.additional-info-label{font-size:.85rem}.additional-info-field label{font-size:.8rem}.additional-info-field .form-control{font-size:.85rem}}@media (max-width:480px){.add-notation-container .library-title{font-size:1.1rem}.add-notation-container .header-right .btn{padding:.35rem .7rem;font-size:.75rem}.form-group label,.form-field-inline label{font-size:12px}.form-control,.combobox-input{font-size:12px!important}.combobox-option{padding:.5rem;font-size:12px}.notation-tab{padding:6px 10px;font-size:.7rem}.notation-textarea{font-size:.8rem}.current-beat-indicator-inline{font-size:.7rem}.current-beat-label{font-size:.65rem}.current-beat-value{border-radius:8px;min-width:20px;height:18px;padding:0 6px;font-size:.7rem}.notation-pill{padding:10px 12px;font-size:1rem;font-weight:600}.swar-note-pill{min-height:30px;padding:10px 6px;font-size:1rem;font-weight:600;overflow:visible}.swar-octave-dot-lower{font-size:1.1em;bottom:-4px}.swar-octave-dot-higher{font-size:1.1em;top:-8px}.ornaments-header{font-size:.8rem}.ornament-shortcuts-row{justify-content:space-between!important;gap:15px!important}.show-ornaments-toggle,.notation-validation-error{font-size:.75rem}.notation-validation-error small{font-size:.7rem}.notation-actions-bottom .btn{padding:.45rem .9rem;font-size:.75rem}.notation-preview h2{font-size:.95rem}.additional-info-label{font-size:.8rem}.additional-info-field label{font-size:.75rem}.additional-info-field .form-control{font-size:.8rem}}@media (max-width:1024px){.notation-form-layout{flex-direction:column;gap:0}.notation-form-left,.notation-form-right{flex:none;width:100%}}@media (max-width:768px){.octave-arrow-btn{width:35px!important;min-width:35px!important;min-height:35px!important;box-shadow:none!important;background-color:#0000!important;justify-content:center!important;align-items:center!important;padding:0!important;font-size:1.6rem!important;display:flex!important}.octave-arrow-btn:hover,.octave-arrow-btn:active{background-color:#0000000d!important}}@supports (-webkit-touch-callout:none){@media (max-width:1023px){.add-notation-container input,.add-notation-container textarea,.add-notation-container select{font-size:16px!important}}}.add-notation-input-tabs .category-tab{padding:.75rem 1.5rem!important;font-size:1.25rem!important;font-weight:600!important}.notation-pill.cursor-arrow-pill{box-shadow:none!important;background-color:#0000!important;padding-left:14px!important;padding-right:14px!important;font-size:1.8rem!important}.notation-pill-list[aria-label=Cursor\ controls] .notation-pill.cursor-arrow-pill{font-size:1.8rem!important}.raag-detail-enhanced{color:#111;box-sizing:border-box;background:#dee3e7;width:100%;max-width:100%;min-height:100vh;margin:0 auto;padding:0 0 100px;font-family:Inter,sans-serif;overflow-x:hidden}@media (min-width:1024px){.raag-detail-enhanced{padding-bottom:0}}.raag-detail-header{flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:16px;padding:24px 20px;display:flex}@media (min-width:1024px){.raag-detail-header{padding:24px 66px}}@media (max-width:768px){.raag-detail-header{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}}@media (max-width:480px){.raag-detail-header{gap:10px;padding:10px}}.header-left{flex:1;align-items:center;gap:20px;min-width:0;display:flex}@media (min-width:769px){.header-left{flex:0 auto}}@media (max-width:768px){.header-left{gap:12px;width:100%}}.header-left .back-button{color:#111827;cursor:pointer;background:#fff;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;margin-bottom:0;transition:transform .2s;display:inline-flex;box-shadow:0 4px 12px #00000014}@media (max-width:768px){.header-left .back-button{width:40px;height:40px}}.header-left .back-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0000001f}.header-title-wrapper{flex:1;justify-content:space-between;align-items:center;gap:12px;min-width:0;display:flex}@media (max-width:768px){.header-title-wrapper{flex:1;gap:8px;min-width:0}}.header-title{color:#1a1a1a;word-wrap:break-word;overflow-wrap:break-word;margin:0;font-size:1.75rem;font-weight:700;line-height:1.3}@media (max-width:768px){.header-title{font-size:1.25rem;line-height:1.4}}@media (max-width:480px){.header-title{font-size:1.1rem}}.header-badge{color:#fff;cursor:pointer;z-index:10002;background:#6366f1;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:.75rem;font-weight:700;transition:transform .2s,box-shadow .2s;display:flex;position:relative}.header-badge:hover{transform:scale(1.1);box-shadow:0 2px 8px #6366f14d}@media (max-width:768px){.header-badge{width:20px;height:20px;font-size:.65rem}}.system-content-tooltip{z-index:10001;pointer-events:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)}.system-content-tooltip-portal{pointer-events:none}.system-content-tooltip-content{color:#374151;pointer-events:auto;text-align:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;min-width:200px;max-width:280px;padding:12px 16px;font-size:.875rem;line-height:1.5;box-shadow:0 4px 12px #00000026}.system-content-tooltip-content:before{content:"";border:6px solid #0000;border-bottom-color:#e5e7eb;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.system-content-tooltip-content:after{content:"";border:5px solid #0000;border-bottom-color:#fff;margin-bottom:1px;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.system-content-tooltip-content p{margin:0;padding:0}.system-content-tooltip-content p:first-child{margin-bottom:4px}.header-more-btn{color:#999;cursor:pointer;background:0 0;border:none;flex-shrink:0;align-items:center;margin-left:auto;padding:4px;font-size:1.25rem;display:flex}@media (max-width:768px){.header-more-btn{padding:2px;font-size:1.1rem}}.header-menu-wrapper{flex-shrink:0;position:relative}.header-menu-dropdown{z-index:1001;background:#fff;border:1px solid #e0e0e0;border-radius:8px;min-width:200px;margin-top:8px;position:absolute;top:100%;right:0;box-shadow:0 4px 12px #00000026}.header-menu-item{cursor:pointer;color:#333;text-align:left;background:0 0;border:none;flex-wrap:nowrap;align-items:center;gap:12px;width:100%;padding:12px 16px;font-size:14px;transition:background-color .2s;display:flex}.header-menu-item span{white-space:nowrap;flex:1;line-height:1.3}.header-menu-item:hover{background-color:#f5f5f5}.header-menu-item:first-child{border-radius:8px 8px 0 0}.header-menu-item:last-child{border-radius:0 0 8px 8px}.raag-tabs-and-share-section{box-sizing:border-box;border-bottom:none;flex-wrap:nowrap;flex-shrink:0;justify-content:flex-end;align-items:center;gap:16px;padding:0;display:flex}@media (min-width:1024px){.raag-tabs-and-share-section{gap:16px}}@media (min-width:768px) and (max-width:1023px){.raag-tabs-and-share-section{gap:12px}}@media (max-width:768px){.raag-tabs-and-share-section{flex-direction:column;align-items:stretch;gap:12px;width:100%}}@media (max-width:480px){.raag-tabs-and-share-section{gap:10px}}.share-student-btn{color:#4b5563;cursor:pointer;white-space:nowrap;background:#f1f3f5;border:none;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;gap:8px;height:44px;min-height:44px;padding:10px 20px;font-size:.85rem;font-weight:600;transition:all .2s;display:flex}.share-student-btn:hover{color:#374151;background:#e5e7eb}.share-student-btn .share-icon{color:inherit;font-size:1rem}.share-student-btn .share-btn-text{display:inline}@media (max-width:768px){.share-student-btn{order:2;width:100%;height:44px;min-height:44px;padding:10px 20px;font-size:.85rem}.share-btn-text{display:inline!important}.raag-toggle-group{order:1;height:44px;min-height:44px}}@media (max-width:480px){.share-student-btn{height:40px;min-height:40px;padding:8px 16px;font-size:.8rem}.raag-toggle-group{gap:6px;height:auto;min-height:auto;padding:6px}}.raag-toggle-group{background:#f1f3f5;border-radius:10px;flex-wrap:nowrap;flex-shrink:0;align-items:center;gap:4px;height:auto;min-height:56px;padding:3px;display:flex}@media (min-width:768px){.raag-toggle-group{flex-wrap:nowrap;width:auto}}@media (max-width:768px){.raag-toggle-group{width:100%}}.toggle-btn{cursor:pointer;color:#4b5563;white-space:nowrap;background:0 0;border:none;border-radius:8px;flex-shrink:0;padding:12px 24px;font-size:20px;font-weight:600;transition:all .2s}@media (min-width:768px){.toggle-btn{flex:none;width:auto}}@media (max-width:768px){.toggle-btn{flex:1;height:38px;padding:8px 20px;font-size:.8rem}}@media (max-width:480px){.toggle-btn{height:34px;padding:8px 16px;font-size:.75rem}}.toggle-btn.active{color:#fff;background:#1e1e2d;box-shadow:0 4px 10px #0000001a}.raag-detail-layout{align-items:start;gap:32px;padding:0 20px 40px;display:flex}@media (min-width:1024px){.raag-detail-layout{padding:0 66px 40px}}.raag-main-content{flex:1.5;min-width:0}.raag-references-sidebar{box-sizing:border-box;background:#ebeef1;border-radius:32px;flex-direction:column;flex:1 0;min-width:320px;max-width:500px;padding:24px;display:flex;overflow:hidden visible}@media (max-width:1024px){.raag-references-sidebar{width:100%;max-width:100%}.details-view-layout{flex-direction:column}}.raag-references-sidebar::-webkit-scrollbar{display:none}.raag-references-sidebar{scrollbar-width:none}.details-view-layout{align-items:flex-start;gap:32px;display:flex}.detail-table-section{background:#eef2f6;border-radius:32px;flex-direction:column;flex:1.5;gap:12px;padding:32px;display:flex}.raag-left-image{background:#eef2f6;border-radius:16px;height:320px;overflow:hidden}.raag-left-image.editing{height:auto;overflow:visible}.raag-left-image img{object-fit:cover;width:100%;height:100%;display:block}.raag-left-image .raag-hero-placeholder{height:100%;min-height:0}.raag-left-image .edit-hero-image-btn{top:12px;right:12px}.raag-left-title-area{margin-top:12px}.raag-left-title-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.raag-left-card .raag-title{color:#111827;margin:0;font-size:1.25rem;font-weight:700;line-height:1.15}.raag-left-card .raag-title-input{padding:.6rem .8rem;font-size:1.25rem}.raag-left-actions{flex-direction:column;gap:10px;margin-top:12px;display:flex}.raag-left-actions-row{flex-direction:column;gap:10px;display:flex}.raag-right-panel{min-width:0}.raag-detail-loading,.raag-detail-error{text-align:center;color:#666;padding:2rem;font-size:1.2rem}.raag-hero-image{background-color:#f5f5f5;justify-content:center;align-items:center;width:100%;min-height:300px;max-height:400px;margin-bottom:2rem;display:flex;overflow:hidden}.raag-hero-image img{object-fit:cover;width:100%;height:100%;max-height:400px}.raag-hero-placeholder{color:#999;background-color:#f5f5f5;flex-direction:column;justify-content:center;align-items:center;width:100%;height:300px;display:flex}.raag-hero-placeholder .placeholder-icon{opacity:.5;margin-bottom:.5rem;font-size:3rem}.raag-hero-placeholder span{color:#999;font-size:1rem}.raag-header{box-sizing:border-box;width:100%;max-width:100%;margin-bottom:1.5rem;padding:0 20px}@media (min-width:1024px){.raag-header{padding:0 66px}}.raag-header .back-button{cursor:pointer;color:#333;background:0 0;border:1px solid #ddd;border-radius:4px;align-items:center;gap:.5rem;margin-bottom:5px;padding:.5rem 1rem;font-size:.9rem;transition:all .2s;display:inline-flex}.raag-header .back-button:hover{background:#f5f5f5;border-color:#999}.raag-title-wrapper{align-items:center;gap:1rem;display:flex}.raag-title{color:#222;margin:0;font-size:clamp(1.8rem,4vw,2.5rem);font-weight:600}.edit-name-btn{cursor:pointer;color:#666;background:#f8f9fa;border:1px solid #ddd;border-radius:6px;justify-content:center;align-items:center;padding:.5rem;transition:all .2s;display:flex}.edit-name-btn:hover{color:#333;background:#e9ecef;border-color:#adb5bd}.raag-title-edit{flex-direction:column;gap:.5rem;width:100%;max-width:600px;display:flex}.raag-title-input{color:#222;border:2px solid #4a90e2;border-radius:8px;width:100%;padding:.75rem 1rem;font-family:inherit;font-size:clamp(1.8rem,4vw,2.5rem);font-weight:600}.raag-title-input:focus{outline:none;box-shadow:0 0 0 3px #4a90e21a}.detail-notation-meend-style{z-index:0;vertical-align:middle;justify-content:center;align-items:center;padding-top:18px;display:inline-flex;position:relative;overflow:visible}.detail-notation-meend-style>div{z-index:1;justify-content:center;align-items:center;font-weight:600;line-height:1;display:inline-flex;position:relative}.detail-notation-meend-style>div:before{content:"";box-sizing:border-box;z-index:2;pointer-events:none;border-top:2px solid #333;border-left:2px solid #333;border-right:2px solid #333;border-radius:50% 50% 0 0;height:20px;position:absolute;top:-8px;left:-6px;right:-6px}.notation-bracket-group{z-index:0;padding-bottom:10px;display:inline-block;position:relative;overflow:visible}.notation-bracket-group:after{content:"";box-sizing:border-box;z-index:2;pointer-events:none;border-bottom:2px solid #333;border-left:2px solid #333;border-right:2px solid #333;border-radius:0 0 50% 50%;height:16px;position:absolute;bottom:-4px;left:-4px;right:-4px}.raag-title-edit-hints{color:#666;font-size:.85rem;font-style:italic}.edit-hero-image-btn{cursor:pointer;color:#666;z-index:10;background:#ffffffe6;border:1px solid #ddd;border-radius:8px;justify-content:center;align-items:center;padding:.75rem;transition:all .2s;display:flex;position:absolute;top:1rem;right:1rem;box-shadow:0 2px 8px #0000001a}.edit-hero-image-btn:hover{color:#333;background:#fff;border-color:#adb5bd;box-shadow:0 4px 12px #00000026}.hero-image-edit-container{background:#f8f9fa;border:2px dashed #ddd;border-radius:12px;width:100%;padding:1.5rem}.hero-image-edit-controls{flex-direction:column;gap:1rem;margin-bottom:1rem;display:flex}.hero-image-preview{border:1px solid #e0e0e0;border-radius:8px;margin-top:1rem;overflow:hidden}.hero-image-preview img{object-fit:contain;width:100%;max-height:200px;display:block}.cancel-edit-btn{cursor:pointer;color:#333;background:#f5f5f5;border:1px solid #ddd;border-radius:6px;align-self:flex-start;padding:.5rem 1rem;font-size:.9rem;font-weight:500;transition:all .2s}.cancel-edit-btn:hover:not(:disabled){background:#e8e8e8;border-color:#adb5bd}.cancel-edit-btn:disabled{opacity:.6;cursor:not-allowed}.hero-image-edit-controls .upload-button{color:#333;cursor:pointer;background:#f8f9fa;border:2px solid #ddd;border-radius:8px;align-items:center;gap:.5rem;width:fit-content;padding:.75rem 1.5rem;font-size:.95rem;font-weight:500;transition:all .2s;display:inline-flex}.hero-image-edit-controls .upload-button:hover:not(:disabled){color:#212529;background:#e9ecef;border-color:#adb5bd}.hero-image-edit-controls .upload-button:disabled{opacity:.6;cursor:not-allowed}.hero-image-edit-controls .image-url-input-wrapper{align-items:center;gap:1rem;display:flex}.hero-image-edit-controls .url-divider{color:#999;white-space:nowrap;font-size:.9rem;font-weight:500}.hero-image-edit-controls .form-control{border:1px solid #ddd;border-radius:4px;flex:1;padding:.75rem;font-size:1rem;transition:border-color .2s}.hero-image-edit-controls .form-control:focus{border-color:#4a90e2;outline:none;box-shadow:0 0 0 3px #4a90e21a}.hero-image-edit-controls .form-control:disabled{cursor:not-allowed;background-color:#f5f5f5}.hero-image-edit-controls .upload-progress-container{background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-top:.5rem;padding:.75rem}.hero-image-edit-controls .upload-progress-info{color:#333;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.9rem;font-weight:500;display:flex}.hero-image-edit-controls .upload-progress-info span:first-child{align-items:center;gap:.5rem;display:flex}.hero-image-edit-controls .upload-progress-info span:first-child:before{content:"";border:2px solid #4a90e2;border-top-color:#0000;border-radius:50%;width:12px;height:12px;animation:.8s linear infinite spin;display:inline-block}.hero-image-edit-controls .upload-progress-bar-container{background:#e0e0e0;border-radius:3px;width:100%;height:6px;position:relative;overflow:hidden}.hero-image-edit-controls .upload-progress-bar{background:linear-gradient(90deg,#4a90e2 0%,#357abd 100%);height:100%;transition:width .3s;position:relative}.hero-image-edit-controls .upload-progress-bar:after{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);animation:1.5s infinite shimmer;position:absolute;inset:0}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.raag-tabs{-webkit-overflow-scrolling:touch;scrollbar-width:thin;align-items:center;gap:1rem;margin-bottom:2rem;padding:0 20px;display:flex;position:relative;overflow-x:auto}@media (min-width:1024px){.raag-tabs{padding:0 66px}}.raag-tabs::-webkit-scrollbar{height:4px}.raag-tabs::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}.raag-tabs-desktop{flex-shrink:0;gap:.75rem;min-width:max-content;display:flex}.raag-tabs-mobile-toggle,.raag-tabs-mobile-menu{display:none!important}.raag-tab{cursor:pointer;color:#6b7280;white-space:nowrap;text-overflow:ellipsis;background:#e5e7eb;border:none;border-radius:9999px;flex-shrink:0;max-width:100%;padding:.55rem 1.4rem;font-size:.9rem;font-weight:500;transition:all .2s;overflow:hidden}.raag-tab:hover{color:#374151;background:#e5e7eb}.raag-tab.active{color:#f9fafb;background-color:#111827;font-weight:600;box-shadow:0 4px 10px #0f172a40}.raag-tab-content{-webkit-overflow-scrolling:touch;box-sizing:border-box;width:100%;max-width:100%;padding:0 1.5rem 2rem;overflow-x:visible}.raag-tab-content--panel{padding:0}.details-tab{flex-direction:column;gap:18px;display:flex}.detail-table-section{box-sizing:border-box;background:#ebeef1;border:1px solid #11182714;border-radius:18px;width:100%;max-width:100%;margin-bottom:0;padding:16px;position:relative;overflow:visible;box-shadow:0 10px 28px #1118270f}.raag-features-header{color:#6b7280;cursor:pointer;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:600;display:flex}.raag-features-header svg{font-size:1.5rem}.detail-table-section .detail-table-wrapper,.detail-table-wrapper{-webkit-overflow-scrolling:touch;width:100%;position:relative;overflow:auto visible}.section-title{color:#8c96ab;letter-spacing:.01em;border-bottom:none;padding-bottom:0;font-size:1.15rem;font-weight:700}@media (max-width:768px){.section-title{font-size:.9rem}}@media (max-width:480px){.section-title{font-size:.8rem}}@media (max-width:768px){.raag-references-sidebar .section-title{color:#727b8e;font-size:.95rem;font-weight:600}}@media (max-width:480px){.raag-references-sidebar .section-title{color:#727b8e;font-size:.95rem;font-weight:600}}.detail-table{border-collapse:separate;border-spacing:0 6px;width:100%}.detail-table th{text-align:left;color:#8c96ab;text-transform:capitalize;letter-spacing:.01em;padding:0 24px 14px;font-size:1.15rem;font-weight:600}.detail-table th:first-child,.detail-table th:nth-child(2){width:50%}.detail-table td{vertical-align:middle;color:#1a1a1a;background:#fff;border:none;padding:20px 24px;font-size:1.1rem}.detail-table tr td:first-child{border-top-left-radius:16px;border-bottom-left-radius:16px}.detail-table tr td:last-child{border-top-right-radius:16px;border-bottom-right-radius:16px}.feature-cell{color:#1e293b;width:50%;font-size:1.1rem;font-weight:600}.editable-cell{color:#4b5563;width:50%;font-size:1.1rem}.references-inner{flex-direction:column;flex:1;gap:20px;display:flex}.reference-card{cursor:pointer;background:#fff;border-radius:24px;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;box-shadow:0 4px 14px #0000000a}.reference-menu-btn--overlay{z-index:5;background:#fffffff2;border-radius:10px;width:32px;height:32px;position:absolute;top:10px;right:10px;box-shadow:0 2px 10px #00000024;opacity:1!important}.reference-menu-btn--overlay:hover{background:#fff}.reference-menu-popover{z-index:9999;background:#fff;border:1px solid #00000014;border-radius:12px;min-width:140px;padding:6px;position:absolute;top:46px;right:10px;box-shadow:0 12px 28px #00000024}.reference-menu-item{color:#111827;cursor:pointer;background:0 0;border:none;border-radius:10px;align-items:center;gap:10px;width:100%;padding:10px;font-size:.9rem;font-weight:600;display:flex}.reference-menu-item:hover{background:#0000000d}.reference-trash-btn{z-index:5;cursor:pointer;color:#b91c1c;background:#fffffff2;border:none;border-radius:12px;justify-content:center;align-items:center;width:36px;height:36px;display:flex;position:absolute;bottom:10px;left:10px;box-shadow:0 2px 10px #00000024}.reference-trash-btn:hover{color:#991b1b;background:#fff}.reference-card--youtube{flex-direction:column;display:flex}.reference-card--youtube .reference-thumb{aspect-ratio:16/9;background:#000;width:100%;position:relative;overflow:hidden}.reference-thumb-img{object-fit:cover;width:100%;height:100%;display:block}.reference-card--youtube .reference-body{padding:16px 20px 24px}.reference-card--youtube .reference-title{color:#1a1a1a;word-wrap:break-word;overflow-wrap:break-word;margin:0 0 10px;font-size:1rem;font-weight:700;line-height:1.4}.reference-card--youtube .reference-notes{color:#6b7280;word-wrap:break-word;overflow-wrap:break-word;margin:0;font-size:.875rem;line-height:1.5}.reference-card--audio,.reference-card--media{box-sizing:border-box;flex-shrink:1;align-items:flex-start;gap:12px;width:100%;min-width:0;max-width:100%;height:auto;padding:12px 16px;display:flex}.reference-card--image{box-sizing:border-box;background:#fff;flex-direction:column;width:100%;min-width:0;max-width:100%;display:flex}@media (min-width:768px){.reference-card--image{max-width:100%}}@media (max-width:767px){.reference-card--image{max-width:100%}}.reference-card--image .reference-thumb,.reference-thumb--image{aspect-ratio:16/9;background:#000;flex-shrink:0;order:1;width:100%;position:relative;overflow:hidden}.reference-card--image .reference-thumb-img,.reference-thumb--image .reference-thumb-img{object-fit:cover;pointer-events:none;width:100%;height:100%;display:block}.reference-card--image .reference-body{background:#fff;flex-direction:column;order:2;gap:0;padding:16px 20px 20px;display:flex}.reference-card--image .reference-title{color:#1a1a1a;word-wrap:break-word;overflow-wrap:break-word;margin:0 0 10px;font-size:1rem;font-weight:700;line-height:1.4}.reference-card--image .reference-notes{color:#6b7280;word-wrap:break-word;overflow-wrap:break-word;margin:0;font-size:.875rem;line-height:1.5}.reference-card--image .reference-thumb-view,.reference-thumb--image .reference-thumb-view{color:#1a1a1a;z-index:2;cursor:pointer;background:#fffffff2;border:none;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;padding:0;font-size:1.5rem;transition:transform .2s,box-shadow .2s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 16px #0000004d}.reference-card--image .reference-thumb-view:hover,.reference-thumb--image .reference-thumb-view:hover{background:#fff;transform:translate(-50%,-50%)scale(1.1)}.reference-card--image .reference-thumb-view svg,.reference-thumb--image .reference-thumb-view svg{width:24px;height:24px}@media (min-width:768px){.reference-card--audio,.reference-card--media{max-width:100%}}@media (max-width:767px){.reference-card--audio,.reference-card--media{max-width:100%}}.reference-icon-wrap{color:#1a1a1a;background:#e5e7eb;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;min-width:44px;height:44px;display:flex}.media-play-icon{color:#1a1a1a;margin-left:2px;font-size:1.25rem}@media (max-width:767px){.reference-icon-wrap{width:44px;min-width:44px;height:44px}.media-play-icon{font-size:1.1rem}}.reference-info{flex-direction:column;flex:1;gap:0;min-width:0;display:flex;overflow:hidden}.reference-top-row{justify-content:space-between;align-items:center;gap:12px;width:100%;min-width:0;margin-bottom:4px;display:flex}.reference-name{color:#1a1a1a;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;margin:0;font-size:.95rem;font-weight:700;line-height:1.4;overflow:hidden}@media (max-width:767px){.reference-name{font-size:.9rem}}.reference-duration{color:#94a3b8;white-space:nowrap;flex-shrink:0;margin-left:auto;font-size:.85rem;font-weight:500}@media (max-width:767px){.reference-duration{font-size:.8rem}}.reference-subtext{color:#64748b;word-wrap:break-word;overflow-wrap:break-word;-webkit-line-clamp:2;text-overflow:ellipsis;-webkit-box-orient:vertical;margin-top:4px;margin-bottom:0;font-size:.85rem;line-height:1.5;display:-webkit-box;overflow:hidden}@media (max-width:767px){.reference-subtext{-webkit-line-clamp:2;margin-top:2px;font-size:.8rem}}.reference-menu-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;margin-top:0;padding:4px;font-size:1rem;transition:all .2s;display:flex}.reference-card--audio .reference-menu-btn,.reference-card--media .reference-menu-btn{align-self:flex-start;margin-top:0}.reference-menu-btn:hover{color:#64748b;background:#0000000d;border-radius:4px}@media (max-width:767px){.reference-menu-btn{width:20px;height:20px;padding:2px;font-size:.9rem}}.center-add-row,.references-add-row{justify-content:center;margin-top:auto;padding-top:5px;display:flex}.circle-add-btn{color:#fff;cursor:pointer;background:#1e1e2d;border:none;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.5rem;display:flex}.editable-cell:hover{background-color:#f9f9f9}.editable-cell.read-only{cursor:default}.editable-cell.read-only:hover{background-color:#fff}.editable-cell.read-only .cell-content{color:#666}.editable-cell.editing{background-color:#fff;padding:0}.cell-content{word-wrap:break-word;white-space:pre-wrap;min-height:1.5rem;display:block}.cell-content em{color:#999;font-style:italic}.cell-editor{width:100%;position:relative}.cell-input{resize:vertical;border:2px solid #1b5e20;border-radius:4px;outline:none;width:100%;min-height:80px;padding:.75rem;font-family:inherit;font-size:.95rem}.cell-input-notation{min-height:110px;font-family:Courier New,monospace}.cell-input-notation-invalid{border-color:#d32f2f!important;box-shadow:0 0 0 3px #d32f2f1f!important}.swar-ornament-pill-row{flex-wrap:wrap;gap:8px;margin-bottom:8px;display:flex}.swar-ornament-pill{color:#111827;cursor:pointer;background:#ffffffe6;border:1px solid #1f29372e;border-radius:999px;padding:6px 10px;font-size:13px;font-weight:600}.swar-ornament-pill:hover{background:#fff;box-shadow:0 2px 10px #11182714}.cell-notation-warning{color:#c62828;background-color:#ffebee;border:1px solid #ef5350;border-radius:6px;margin-top:8px;padding:10px 12px;font-size:.9rem;line-height:1.35}.cell-notation-invalid-letters{color:#d32f2f;background-color:#ffcdd2;border-radius:4px;padding:2px 6px;font-family:Courier New,monospace;font-weight:700}.cell-editor-hints{color:#666;padding:.25rem 0;font-size:.75rem;position:absolute;bottom:-1.5rem;left:0}.detail-table-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.detail-table-header .section-title{margin-bottom:0}.center-add-row{justify-content:center;margin-top:14px;display:flex}.circle-add-btn{color:#f9fafb;cursor:pointer;background:#111827;border:none;border-radius:999px;justify-content:center;align-items:center;width:36px;height:36px;display:inline-flex}.circle-add-btn:hover{background:#0b1220}.circle-add-btn svg{width:20px;height:20px}.add-detail-row-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#1b5e20 0%,#2e7d32 100%);border:none;border-radius:6px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem;font-weight:500;transition:all .2s;display:flex}.add-detail-row-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #1b5e204d}.add-detail-row-btn:active{transform:translateY(0)}.action-cell{text-align:center;width:80px;padding:.5rem!important}.delete-row-btn{color:#d32f2f;cursor:pointer;background:0 0;border:1px solid #d32f2f;border-radius:4px;justify-content:center;align-items:center;padding:.5rem;font-size:1rem;transition:all .2s;display:flex}.delete-row-btn:hover{color:#fff;background:#d32f2f}.detail-combobox{width:100%;position:relative}.detail-combobox .combobox-container{z-index:1;position:relative}.editable-cell{position:relative}.detail-combobox .combobox-dropdown{z-index:10000;position:absolute}.detail-table tbody tr:last-child .detail-combobox .combobox-dropdown{margin-top:0;margin-bottom:4px;top:auto;bottom:100%;box-shadow:0 -4px 12px #00000026}.detail-table tbody tr td .detail-combobox .combobox-dropdown{z-index:10000}.feature-cell .cell-content.editable{cursor:pointer;border-radius:4px;padding:.25rem;transition:background-color .2s}.uploader-section{box-sizing:border-box;width:100%;max-width:100%;box-shadow:none;background:0 0;border:none;border-radius:0;margin-bottom:0;padding:0;overflow:hidden visible}.section-header{justify-content:space-between;align-items:center;display:flex}.references-inner{box-shadow:none;box-sizing:border-box;background:0 0;border:none;border-radius:0;width:100%;max-width:100%;padding:0;overflow:hidden visible}.references-strip{box-sizing:border-box;flex-wrap:wrap;align-content:flex-start;align-items:flex-start;gap:6px;width:100%;max-width:100%;padding:4px 0;display:flex;overflow:hidden visible}@media (max-width:767px){.references-strip{flex-direction:column}.reference-card--youtube,.reference-card--video,.reference-card--audio,.reference-card--media,.reference-card--image{max-width:100%}}@media (min-width:768px){.references-strip{flex-wrap:wrap;overflow:hidden visible}}.reference-card{cursor:pointer;text-align:left;box-sizing:border-box;background:#fff;border:1px solid #00000014;border-radius:12px;flex-shrink:1;min-width:0;transition:transform .16s,box-shadow .16s;display:flex;overflow:hidden}.reference-card--youtube,.reference-card--video,.reference-card--audio,.reference-card--media{background:#fff}.reference-card--youtube{box-sizing:border-box;background:#fff;flex-direction:column;width:100%;min-width:0;max-width:100%;display:flex}@media (min-width:768px){.reference-card--youtube{max-width:100%}}@media (max-width:767px){.reference-card--youtube{max-width:100%}}.reference-card--youtube .reference-thumb{aspect-ratio:16/9;background:#000;flex-shrink:0;order:1;width:100%;position:relative;overflow:hidden}.reference-card--youtube .reference-thumb-img{object-fit:cover;width:100%;height:100%;display:block}.reference-card--youtube .reference-body{flex-shrink:0;order:2}.reference-card--youtube .reference-thumb-play,.reference-card--video .reference-thumb-play,.reference-thumb--video .reference-thumb-play{color:#1a1a1a;z-index:2;cursor:pointer;background:#fffffff2;border:none;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;padding:0;font-size:1.5rem;transition:transform .2s,box-shadow .2s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 16px #0000004d}.reference-card--youtube .reference-thumb-play:hover,.reference-card--video .reference-thumb-play:hover,.reference-thumb--video .reference-thumb-play:hover{background:#fff;transform:translate(-50%,-50%)scale(1.1)}.reference-card--youtube .reference-body{background:#fff;flex-direction:column;gap:0;padding:16px 20px 20px;display:flex}.reference-card--video{box-sizing:border-box;background:#fff;flex-direction:column;width:100%;min-width:0;max-width:100%;display:flex}@media (min-width:768px){.reference-card--video{max-width:100%}}@media (max-width:767px){.reference-card--video{max-width:100%}}.reference-card--video .reference-thumb,.reference-thumb--video{aspect-ratio:16/9;background:#000;flex-shrink:0;order:1;width:100%;position:relative;overflow:hidden}.reference-card--video .reference-thumb-img,.reference-thumb--video .reference-thumb-img,.reference-thumb--video video{object-fit:cover;pointer-events:none;opacity:1;visibility:visible;width:100%;height:100%;display:block}.reference-thumb--video video.reference-thumb-img{background:#000}.reference-thumb--video video::-webkit-media-controls{display:none!important}.reference-thumb--video video::-webkit-media-controls-enclosure{display:none!important}.reference-card--video .reference-body{background:#fff;flex-direction:column;order:2;gap:0;padding:16px 20px 20px;display:flex}.reference-card--video .reference-title{color:#1a1a1a;word-wrap:break-word;overflow-wrap:break-word;margin:0 0 10px;font-size:1rem;font-weight:700;line-height:1.4}.reference-card--video .reference-notes{color:#6b7280;word-wrap:break-word;overflow-wrap:break-word;margin:0;font-size:.875rem;line-height:1.5}.reference-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000001f}.reference-thumb:not(.reference-card--youtube .reference-thumb){background:#dfe7ef;justify-content:center;align-items:center;min-height:100px;display:flex;position:relative;overflow:hidden}.reference-thumb--audio{background:#e8e0f0}.reference-thumb video.reference-thumb-img{object-fit:cover}.reference-thumb-icon{justify-content:center;align-items:center;display:flex}.reference-thumb-icon svg{color:#6b7280;width:28px;height:28px}.reference-thumb-play{background:#ffffffeb;border-radius:999px;justify-content:center;align-items:center;width:28px;height:28px;display:inline-flex;position:absolute;bottom:8px;right:8px;box-shadow:0 4px 12px #00000026}.reference-thumb-play--center{bottom:auto;right:auto;width:40px;height:40px;margin:auto;inset:0}.reference-thumb-play svg{color:#1a1a1a;width:14px;height:14px}.reference-thumb-play--center svg{width:18px;height:18px}.reference-card--audio,.reference-card--media{box-shadow:none;background:#fff;border:none;border-radius:16px;flex-direction:row;align-items:flex-start;gap:0;margin-bottom:0;padding:16px;transition:transform .2s,box-shadow .2s;display:flex}.reference-card--audio:hover,.reference-card--media:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0000000d}.reference-icon-wrap{background:#25282b;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;margin-right:16px;display:flex}.media-play-icon{color:#fff;width:20px;height:20px;margin-left:2px}.reference-info{flex-direction:column;flex:1;justify-content:center;min-width:0;padding-top:2px;display:flex}.reference-top-row{justify-content:space-between;align-items:center;width:100%;margin-bottom:4px;display:flex}.reference-name{color:#1a1a1a;white-space:nowrap;text-overflow:ellipsis;margin-right:8px;font-size:.95rem;font-weight:700;overflow:hidden}.reference-duration{color:#8c96ab;white-space:nowrap;font-size:.85rem;font-weight:500}.reference-subtext{color:#6b7280;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.8rem;line-height:1.4;display:-webkit-box;overflow:hidden}.reference-menu-btn{cursor:pointer;color:#9ca3af;opacity:0;background:0 0;border:none;justify-content:center;align-items:center;margin-left:4px;padding:4px;transition:opacity .2s;display:flex}.reference-menu-btn.reference-menu-btn--overlay{border-radius:10px;width:32px;height:32px;padding:0;opacity:1!important;color:#111827!important;background:#fffffff5!important;border:1px solid #00000014!important;box-shadow:0 2px 10px #00000024!important}.reference-menu-btn.reference-menu-btn--overlay:hover{background:#fff!important}.reference-card:hover .reference-menu-btn{opacity:1}.reference-title{color:#111827;-webkit-line-clamp:2;line-clamp:2;text-overflow:ellipsis;-webkit-box-orient:vertical;margin-bottom:8px;font-size:1rem;font-weight:700;line-height:1.4;display:-webkit-box;overflow:hidden}.reference-notes{color:#6b7280;-webkit-line-clamp:3;line-clamp:3;text-overflow:ellipsis;-webkit-box-orient:vertical;font-size:.85rem;line-height:1.6;display:-webkit-box;overflow:hidden}.reference-notes-empty{color:#9ca3af;font-style:italic}.references-add-row{justify-content:center;display:flex}.show-media-library-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;padding:.5rem 1rem;font-size:.9rem;font-weight:600;transition:all .3s}.show-media-library-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.media-library-preview{background:#fff;border:2px solid #e0e0e0;border-radius:12px;margin-bottom:2rem;padding:1.5rem}.media-library-preview h3{color:#333;margin:0 0 1rem;font-size:1.1rem}.media-library-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;max-height:400px;padding:.5rem;display:grid;overflow-y:auto}.media-library-item{cursor:pointer;background:#f5f5f5;border:2px solid #e0e0e0;border-radius:8px;transition:all .3s;position:relative;overflow:hidden}.media-library-item:hover{border-color:#667eea;transform:translateY(-4px);box-shadow:0 8px 16px #00000026}.media-library-preview-media{object-fit:cover;width:100%;height:150px;display:block}.media-library-audio-placeholder,.media-library-youtube-placeholder,.media-library-image-placeholder{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:center;align-items:center;width:100%;height:150px;font-size:3rem;display:flex}.media-library-badge{color:#fff;background:#000000b3;border-radius:4px;align-items:center;gap:.25rem;padding:.25rem .5rem;font-size:.75rem;display:flex;position:absolute;top:8px;right:8px}.media-library-info{background:#fff;padding:.75rem}.media-library-name{color:#333;white-space:nowrap;text-overflow:ellipsis;margin:0 0 .25rem;font-size:.85rem;font-weight:600;overflow:hidden}.media-library-size{color:#666;margin:0;font-size:.75rem}.media-library-notes{color:#888;margin:.25rem 0 0;font-size:.7rem;font-style:italic}.no-media{text-align:center;color:#999;grid-column:1/-1;padding:2rem;font-style:italic}.preview-items-section{background:#f8f9fa;border:1px solid #e0e0e0;border-radius:12px;margin-bottom:2rem;padding:1.5rem}.preview-items-title{color:#333;border-bottom:2px solid #1b5e20;margin-bottom:1rem;padding-bottom:.5rem;font-size:1.1rem;font-weight:600}.preview-row{background:#fff;border:1px solid #d0d0d0;border-radius:12px;grid-template-columns:60% 40%;align-items:flex-start;gap:1rem;margin-bottom:1rem;padding:1rem 1.5rem;display:grid;position:relative;box-shadow:0 2px 8px #0000000a}@media (max-width:1024px){.preview-row{grid-template-columns:1fr;gap:1rem}}.preview-row:last-child{margin-bottom:0}.preview-left{align-items:center;gap:1rem;width:100%;display:flex}.preview-video-player,.preview-audio-player{border-radius:8px;width:100%}.preview-image{object-fit:contain;border:1px solid #e0e0e0;border-radius:8px;max-width:300px;max-height:200px}.preview-right{flex-direction:column;align-items:flex-start;gap:.75rem;width:100%;display:flex}.preview-notes-section{width:100%}.preview-notes-heading{color:#1b5e20;border-bottom:1px solid #1b5e20;margin:0 0 .5rem;padding-bottom:.25rem;font-size:.9rem;font-weight:600}.preview-notes{color:#555;white-space:pre-wrap;word-wrap:break-word;margin:0;font-size:.9rem;line-height:1.5}.preview-notes em{color:#999;font-style:italic}.preview-close-btn{color:#fff;cursor:pointer;z-index:10;background:#dc3545;border:none;border-radius:6px;justify-content:center;align-items:center;width:32px;height:32px;padding:.5rem;transition:all .2s;display:flex;position:absolute;top:.75rem;right:.75rem}.preview-close-btn:hover{background:#c82333;transform:scale(1.05)}.upload-rows{flex-direction:column;gap:1.5rem;display:flex}.upload-row{background:#fff;border:1px solid #e0e0e0;border-radius:12px;grid-template-columns:1fr auto;align-items:flex-start;gap:1rem;padding:1rem 1.5rem;transition:all .3s;display:grid;box-shadow:0 2px 8px #0000000a}.upload-row:hover{border-color:silver;box-shadow:0 4px 12px #00000014}.upload-left{flex-flow:wrap;flex:1;align-items:flex-start;gap:1rem;display:flex}.upload-right{justify-content:flex-end;align-items:flex-start;width:100%;min-width:150px;padding-top:0;display:flex}.upload-type-select{cursor:pointer;color:#333;background:#fff;border:2px solid #e0e0e0;border-radius:8px;flex:none;min-width:140px;max-width:100%;padding:.75rem 1rem;font-size:.95rem;font-weight:500;transition:all .2s}.upload-type-select:hover{border-color:#1b5e20}.upload-type-select:focus{border-color:#1b5e20;outline:none;box-shadow:0 0 0 3px #1b5e201a}.upload-url-input{background:#fff;border:2px solid #e0e0e0;border-radius:8px;flex:1;width:100%;min-width:200px;max-width:100%;padding:.75rem 1rem;font-size:.95rem;transition:all .2s}.upload-url-input:hover{border-color:silver}.upload-url-input:focus{border-color:#1b5e20;outline:none;box-shadow:0 0 0 3px #1b5e201a}.youtube-preview{border-radius:8px;flex-shrink:0;grid-column:1/-1;width:200px;height:200px;margin-top:1rem;overflow:hidden;box-shadow:0 2px 8px #0000001a}.youtube-preview iframe{border:none;border-radius:8px;width:100%;height:100%}.audio-player,.video-player{object-fit:cover;border-radius:8px;flex-shrink:0;grid-column:1/-1;width:200px;height:200px;margin-top:1rem;box-shadow:0 2px 8px #0000001a}.upload-left .audio-player,.upload-right .audio-player{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:center;align-items:center;padding:1rem;display:flex}.upload-left .audio-player::-webkit-media-controls-panel{background-color:#0000}.upload-right .audio-player::-webkit-media-controls-panel{background-color:#0000}.upload-left .audio-player::-webkit-media-controls-play-button{filter:brightness(0)invert()}.upload-left .audio-player::-webkit-media-controls-volume-slider{filter:brightness(0)invert()}.upload-left .audio-player::-webkit-media-controls-timeline{filter:brightness(0)invert()}.upload-right .audio-player::-webkit-media-controls-play-button{filter:brightness(0)invert()}.upload-right .audio-player::-webkit-media-controls-volume-slider{filter:brightness(0)invert()}.upload-right .audio-player::-webkit-media-controls-timeline{filter:brightness(0)invert()}.upload-right{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:.75rem;display:flex;position:relative}.upload-right-top-row{flex-wrap:wrap;align-items:flex-start;gap:.75rem;width:100%;display:flex}.upload-right-buttons{align-items:center;gap:.75rem;display:flex}.upload-notes-input{resize:none;background:#fff;border:2px solid #e0e0e0;border-radius:8px;flex:1;width:100%;min-width:200px;max-width:100%;min-height:44px;max-height:200px;padding:.75rem 1rem;font-family:inherit;font-size:.95rem;line-height:1.5;transition:all .2s;overflow:hidden}.upload-notes-input::-webkit-scrollbar{display:none}.upload-notes-input{-ms-overflow-style:none;scrollbar-width:none}.upload-notes-input:hover{border-color:silver}.upload-notes-input:focus{border-color:#1b5e20;outline:none;box-shadow:0 0 0 3px #1b5e201a}.upload-actions{display:none}.save-upload-btn{color:#fff;cursor:pointer;letter-spacing:.3px;background:linear-gradient(135deg,#1b5e20 0%,#2e7d32 100%);border:none;border-radius:8px;padding:.625rem 1.5rem;font-size:.95rem;font-weight:600;transition:all .2s;box-shadow:0 2px 6px #1b5e204d}.save-upload-btn:hover{background:linear-gradient(135deg,#155016 0%,#1b5e20 100%);transform:translateY(-1px);box-shadow:0 4px 12px #1b5e2066}.save-upload-btn:active{transform:translateY(0)}.save-upload-btn:disabled{opacity:.6!important;cursor:not-allowed!important;transform:none!important}.save-upload-btn:disabled:hover{transform:none!important;box-shadow:0 2px 6px #1b5e204d!important}.upload-spinner{vertical-align:middle;border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:14px;height:14px;margin-right:8px;animation:.8s linear infinite spin;display:inline-block}.delete-upload-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#dc3545 0%,#c82333 100%);border:none;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;padding:.625rem;transition:all .2s;display:flex;box-shadow:0 2px 6px #dc35454d}.delete-upload-btn:hover{background:linear-gradient(135deg,#c82333 0%,#bd2130 100%);transform:translateY(-1px);box-shadow:0 4px 12px #dc354566}.delete-upload-btn:active{transform:translateY(0)}.add-upload-row-btn{cursor:pointer;color:#1b5e20;white-space:nowrap;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border:2px dashed #1b5e20;border-radius:10px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;transition:all .3s;display:flex;box-shadow:0 2px 4px #1b5e201a}.add-upload-row-btn:hover{color:#155016;background:linear-gradient(135deg,#e9ecef 0%,#dee2e6 100%);border-color:#155016;transform:translateY(-2px);box-shadow:0 4px 12px #1b5e2033}.add-upload-row-btn:active{transform:translateY(0)}.add-upload-row-btn:disabled{opacity:.6!important;cursor:not-allowed!important;transform:none!important}.add-upload-row-btn:disabled:hover{box-shadow:none!important;color:#1b5e20!important;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%)!important;border-color:#1b5e20!important;transform:none!important}.add-upload-row-btn:disabled:hover svg{transform:none!important}.add-upload-row-btn svg{font-size:1.2rem;transition:transform .2s}.add-upload-row-btn:hover svg{transform:rotate(90deg)}.upload-file-controls{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.upload-file-input{display:none}.upload-file-label{color:#fff;cursor:pointer;white-space:nowrap;box-sizing:border-box;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:8px;flex:none;justify-content:center;align-items:center;gap:.5rem;min-width:160px;max-width:100%;height:40px;padding:.5rem 1rem;font-size:.9rem;font-weight:600;transition:all .2s;display:flex;box-shadow:0 2px 6px #667eea4d}.upload-file-label:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.upload-record-btn{color:#fff;cursor:pointer;white-space:nowrap;box-sizing:border-box;background:linear-gradient(135deg,#1b5e20 0%,#2e7d32 100%);border:none;border-radius:6px;flex:1;justify-content:center;align-items:center;gap:6px;height:32px;padding:8px 12px;font-size:.8rem;font-weight:600;transition:all .2s;display:flex;box-shadow:0 2px 4px #1b5e2033}.upload-record-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 3px 8px #1b5e204d}.upload-record-btn:disabled{opacity:.6;cursor:not-allowed}.upload-record-btn.stop{background:linear-gradient(135deg,#dc3545 0%,#c82333 100%);box-shadow:0 2px 4px #dc354533}.upload-record-btn.stop:hover{box-shadow:0 3px 8px #dc35454d}.upload-record-btn.capture{background:linear-gradient(135deg,#28a745 0%,#20c997 100%);box-shadow:0 2px 4px #28a74533}.upload-record-btn.capture:hover{box-shadow:0 3px 8px #28a7454d}.upload-record-btn.close{background:linear-gradient(135deg,#6c757d 0%,#5a6268 100%);box-shadow:0 2px 4px #6c757d33}.upload-record-btn.close:hover{box-shadow:0 3px 8px #6c757d4d}.upload-camera-preview-wrapper{border-radius:8px;grid-column:1/-1;width:100%;margin-top:1rem;position:relative;overflow:hidden;box-shadow:0 2px 8px #0000001a}.upload-camera-preview{object-fit:contain;background:#000;width:100%;max-height:300px}.upload-audio-preview{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:8px;flex-direction:column;grid-column:1/-1;justify-content:center;align-items:center;gap:1rem;min-height:200px;margin-top:1rem;padding:2rem;display:flex}.upload-recording-indicator{color:#fff;z-index:10;background:#dc3545e6;border-radius:8px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem;font-weight:600;display:flex;position:absolute;top:1rem;left:1rem}.upload-recording-dot{background:#fff;border-radius:50%;width:12px;height:12px;animation:1.5s infinite pulse}.upload-image-preview{object-fit:cover;border-radius:8px;flex-shrink:0;grid-column:1/-1;width:200px;height:200px;margin-top:1rem;box-shadow:0 2px 8px #0000001a}.upload-progress-item{background:#f8f9fa;border:1px solid #e0e0e0;border-radius:8px;grid-column:1/-1;width:100%;margin-top:.75rem;padding:.75rem}.add-upload-row-btn:hover{color:#333;background:#e0e0e0;border-color:#666}.notation-section{margin-bottom:3rem}.notation-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.add-notation-btn{color:#fff;cursor:pointer;background:#1b5e20;border:none;border-radius:4px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem;font-weight:500;transition:background .2s;display:flex}.add-notation-btn:hover{background:#155016}.notation-entries-section{margin-top:3rem}.notation-entry{background:#fafafa;border:1px solid #ddd;border-radius:8px;margin-bottom:2rem;padding:1rem}.aalap-tab{text-align:center;color:#666;padding:2rem}.bandish-tab{border-bottom:none;flex-direction:column;gap:24px;width:100%;display:flex}@media (max-width:768px){.bandish-tab{gap:16px}}@media (max-width:480px){.bandish-tab{gap:12px}}.notation-header-styled{border-bottom:none;align-items:center;gap:12px;margin-bottom:0;display:flex}@media (max-width:768px){.notation-header-styled{gap:8px;margin-bottom:16px}}.notation-header-styled .section-title{color:#111827;letter-spacing:-.01em;border-bottom:none;margin:0;padding-bottom:0%;font-size:1.5rem;font-weight:700}@media (max-width:768px){.notation-header-styled .section-title{font-size:1.1rem}}@media (max-width:480px){.notation-header-styled .section-title{font-size:1rem}}.add-notation-btn-circle{color:#fff;cursor:pointer;background:#111827;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;padding:0;transition:transform .2s,background-color .2s;display:flex}.add-notation-btn-circle svg{width:16px;height:16px}.add-notation-btn-circle:hover{background:#000;transform:scale(1.1)}.gb-accordion{flex-direction:column;gap:16px;display:flex}@media (max-width:768px){.gb-accordion{gap:12px}}@media (max-width:480px){.gb-accordion{gap:10px}}.gb-accordion-item{background:#ebeef1;border:1px solid #00000014;border-radius:14px;transition:transform .2s,box-shadow .2s;overflow:visible;box-shadow:0 4px 14px #0000000a}.gb-accordion-item:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000014}.gb-accordion-header{cursor:pointer;background:0 0;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}@media (max-width:768px){.gb-accordion-header{padding:16px 20px}}@media (max-width:480px){.gb-accordion-header{padding:12px 16px}}.gb-accordion-left{flex:1;align-items:flex-start;gap:16px;min-width:0;display:flex}@media (max-width:768px){.gb-accordion-left{gap:12px}}@media (max-width:480px){.gb-accordion-left{gap:10px}}.entry-serial-circle{color:#111827;background:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:.85rem;font-weight:600;display:flex}@media (max-width:768px){.entry-serial-circle{width:40px;height:40px;font-size:.8rem}}@media (max-width:480px){.entry-serial-circle{width:36px;height:36px;font-size:.75rem}}.entry-details{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}@media (max-width:768px){.entry-details{gap:4px}}.entry-type-name{color:#111827;word-wrap:break-word;overflow-wrap:break-word;font-size:1rem;font-weight:700;line-height:1.4}@media (max-width:768px){.entry-type-name{font-size:.95rem}}@media (max-width:480px){.entry-type-name{font-size:.9rem}}.entry-taal{color:#6b7280;word-wrap:break-word;overflow-wrap:break-word;font-size:.85rem;font-weight:400}@media (max-width:768px){.entry-taal{font-size:.8rem}}@media (max-width:480px){.entry-taal{font-size:.75rem}}@media (max-width:768px){.gb-accordion-right{gap:8px}}@media (max-width:480px){.gb-accordion-right{gap:6px}}.gb-action-menu-wrapper{position:relative}.gb-action-menu-btn{color:#6b7280;cursor:pointer;background:#fff;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s;display:flex;box-shadow:0 2px 5px #00000008}@media (max-width:768px){.gb-action-menu-btn{width:40px;height:40px}}@media (max-width:480px){.gb-action-menu-btn{width:36px;height:36px}}.gb-action-menu-btn:hover{color:#374151;background:#e5e7eb}.gb-action-dropdown{z-index:50;background:#fff;border:1px solid #e5e7eb;border-radius:8px;min-width:150px;margin-top:4px;padding:6px;position:absolute;top:100%;right:0;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.gb-dropdown-item{color:#374151;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:4px;align-items:center;gap:8px;width:100%;padding:8px 12px;font-size:.85rem;display:flex}.gb-dropdown-item:hover{background:#f3f4f6}.gb-dropdown-item.delete:hover{background:#fef2f2}.gb-accordion-toggle-circle{color:#6b7280;cursor:pointer;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s;display:flex;box-shadow:0 2px 5px #00000008}.gb-accordion-toggle-circle:hover{color:#374151;border-color:#d1d5db}.gb-accordion-toggle-circle.open{background:#fff;border-color:#0000;transform:rotate(180deg)}.gb-accordion-body{background:#ebeef1;border-top:none;border-radius:14px;padding:0 24px 24px 72px}.gb-accordion-toggle-circle svg{font-size:24px}@media (max-width:768px){.gb-accordion-body{padding:0 20px 20px}.gb-accordion-toggle-circle svg,.gb-action-menu-btn svg{font-size:18px}}@media (max-width:480px){.gb-accordion-body{padding:0 16px 16px}.gb-accordion-toggle-circle svg{font-size:14px}.gb-action-menu-btn svg{font-size:16px}}.notation-entries-container{flex-direction:column;gap:24px;display:flex}.notation-entry-wrapper{flex-direction:column;gap:16px;display:flex}.notation-entry-actions{justify-content:flex-start;margin-top:16px;padding:0;display:flex}.add-notation-entry-btn{color:#fff;cursor:pointer;background:#111827;border:none;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-size:.85rem;font-weight:500;transition:opacity .2s;display:inline-flex}.add-notation-entry-btn:hover{background:#000}.inline-notation-form{background:#f9f9f9;border:1px solid #e0e0e0;border-radius:8px;margin-top:1rem;padding:1rem}.rd-modal-overlay{z-index:2000;background:#0000008c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.rd-modal-dialog{-webkit-overflow-scrolling:touch;width:min(920px,100%);max-height:calc(100vh - 32px);position:relative;overflow:visible}.rd-modal-content{background:#fff;margin-top:0;overflow:visible;box-shadow:0 16px 40px #00000040}@media (max-width:640px){.rd-modal-overlay{padding:10px}.rd-modal-dialog{width:100%;max-height:calc(100vh - 20px);top:auto;bottom:0;transform:none}}.inline-form-header{border-bottom:2px solid #e0e0e0;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;display:flex}.inline-form-header h3{color:#1a1a1a;margin:0;font-size:1.1rem;font-weight:600}.close-inline-form-btn{cursor:pointer;color:#666;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:.5rem;font-size:1.25rem;transition:all .2s;display:flex}.close-inline-form-btn:hover{color:#333;background:#e0e0e0}.inline-form-content{flex-direction:column;gap:1rem;display:flex}.inline-form-content .form-group{flex-direction:column;gap:.4rem;display:flex}.inline-form-content .form-group-row{flex-flow:wrap;gap:.75rem;display:flex}.inline-form-content .form-field-inline{flex-direction:column;flex:1;gap:.4rem;min-width:150px;display:flex}@media (max-width:640px){.inline-form-content .form-group-row{flex-direction:column;gap:.75rem}.inline-form-content .form-field-inline{min-width:100%}.inline-form-actions{flex-direction:column;align-items:stretch}.inline-form-actions .btn{justify-content:center;width:100%}}.inline-form-content .form-field-inline label{color:#333;margin-bottom:.25rem;font-size:.85rem;font-weight:600;display:block}.inline-form-content label{color:#333;margin-bottom:.25rem;font-size:.85rem;font-weight:600}.inline-form-content .form-control{border:1px solid #ddd;border-radius:4px;padding:.625rem;font-family:inherit;font-size:.9rem;transition:border-color .2s}.inline-form-content .form-control:focus{border-color:#1b5e20;outline:none;box-shadow:0 0 0 3px #1b5e201a}.inline-form-content .notation-textarea{resize:vertical;font-family:monospace}.inline-form-actions{border-top:1px solid #e0e0e0;justify-content:flex-end;gap:.75rem;margin-top:.5rem;padding-top:.75rem;display:flex}.inline-form-actions .btn{cursor:pointer;border:none;border-radius:6px;padding:.625rem 1.25rem;font-size:.9rem;font-weight:500;transition:all .2s}.inline-form-actions .btn-primary{color:#fff;background:#1b5e20}.inline-form-actions .btn-primary:hover:not(:disabled){background:#155016}.inline-form-actions .btn-primary:disabled{cursor:not-allowed;opacity:.6;background:#ccc}.inline-form-actions .btn-secondary{color:#333;background:#f0f0f0}.inline-form-actions .btn-secondary:hover:not(:disabled){background:#e0e0e0}.inline-form-actions .btn-secondary:disabled{opacity:.6;cursor:not-allowed}.no-notation-message{text-align:center;color:#666;background:#f9f9f9;border:1px dashed #ddd;border-radius:8px;padding:2rem}.gat-bandish-entries-list{box-sizing:border-box;flex-direction:column;gap:1rem;width:100%;max-width:100%;margin-bottom:2rem;display:flex}.gb-accordion{border:1px solid #e0e0e0;border-radius:10px;flex-direction:column;margin-bottom:2rem;display:flex}.gb-accordion-item{background:#ebeef1;border-top:1px solid #eaeaea}.gb-accordion-item:first-child{border-top:none;border-top-left-radius:10px;border-top-right-radius:10px}.gb-accordion-item:last-child{border-bottom-right-radius:10px;border-bottom-left-radius:10px}.gb-accordion-header{cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem;display:flex}.gb-accordion-left{align-items:flex-start;gap:1rem;min-width:0;display:flex}.gb-accordion-right,.gb-accordion-actions{flex-shrink:0;align-items:center;gap:.75rem;display:flex}.gb-action-menu-wrapper{justify-content:center;align-items:center;display:flex;position:relative}.gb-action-menu-btn{color:#666;cursor:pointer;background:#fff;border:1px solid #e5e5e5;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;font-size:1.2rem;transition:all .2s;display:flex}.gb-action-menu-btn:hover{color:#333;background-color:#f3f3f3;border-color:#d8d8d8}.gb-action-dropdown{z-index:100;background:#fff;border:1px solid #e5e5e5;border-radius:8px;flex-direction:column;min-width:160px;margin-top:4px;padding:4px;animation:.1s ease-out fadeIn;display:flex;position:absolute;top:100%;right:0;box-shadow:0 4px 12px #00000026}.gb-dropdown-item{text-align:left;color:#333;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-radius:6px;align-items:center;gap:10px;width:100%;padding:10px 12px;font-size:.9rem;transition:background-color .2s;display:flex}.gb-dropdown-item:hover{background-color:#f5f5f5}.gb-dropdown-item.delete{color:#dc3545}.gb-dropdown-item.delete:hover{background-color:#fff5f5}.gb-accordion-toggle{color:#333;cursor:pointer;background:#fff;border:1px solid #e5e5e5;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;transition:transform .16s,background-color .16s,border-color .16s;display:inline-flex}.gb-accordion-toggle svg{width:22px;height:22px}.gb-accordion-toggle:hover{background:#f3f3f3;border-color:#d8d8d8}.gb-accordion-toggle.open{transform:rotate(180deg)}.gb-accordion-body{background:#ebeef1;border-top:none;padding:0 1rem 1rem}.gb-media-section{background:#fff;border:1px solid #e7e7e7;border-radius:10px;margin-top:12px;margin-bottom:14px;padding:12px}@media (max-width:768px){.gb-media-section{margin-top:16px;margin-bottom:16px;padding:16px}}@media (max-width:480px){.gb-media-section{margin-top:12px;margin-bottom:12px;padding:12px}}.gb-media-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;display:flex}@media (max-width:768px){.gb-media-header{gap:8px;margin-bottom:12px}}.gb-media-title{color:#222;margin:0;font-size:1.5rem;font-weight:600}.gb-media-controls{flex-wrap:wrap;gap:10px;margin-bottom:10px;display:flex}.gb-media-btn{cursor:pointer;background:#f8f8f8;border:1px solid #ddd;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:.55rem .9rem;font-size:.9rem;display:inline-flex}.gb-media-btn:hover{background:#f1f1f1}.gb-media-btn.danger{color:#c62828;background:#fff5f5;border-color:#ffd0d0}.gb-media-upload .gb-media-btn{display:inline-flex}.gb-media-youtube{align-items:center;gap:10px;margin-bottom:10px;display:flex}.gb-media-youtube .form-control{flex:1}.gb-media-progress{color:#555;margin-bottom:10px;font-size:.85rem}.gb-media-list{--gb-media-thumb-h:clamp(120px,14vw,165px);box-sizing:border-box;width:100%;overflow:visible}.gb-media-list:has(.gb-media-item){grid-template-columns:repeat(auto-fill,minmax(220px,1fr));align-items:start;gap:12px;display:grid}.gb-media-list:has(.references-strip){width:100%;max-width:100%;display:block;overflow:visible}.gb-media-list:has(.references-strip) .references-strip{width:100%;max-width:100%}.gb-media-item{background:#fafafa;border:1px solid #eee;border-radius:10px;flex-direction:column;height:100%;display:flex;overflow:hidden}.gb-media-item-main{padding:10px}.gb-media-item-main audio{width:100%}.gb-media-item-main video,.gb-media-item-main iframe{width:100%;height:var(--gb-media-thumb-h);object-fit:cover;background:#000;border:0;border-radius:8px;display:block}.gb-media-item-actions{background:#fff;border-top:1px solid #eee;justify-content:flex-end;padding:10px;display:flex}.gb-media-empty{color:#666;padding:10px 0;font-size:.9rem}@media (max-width:640px){.gb-media-youtube{flex-direction:column;align-items:stretch}.gb-media-btn{width:100%}.gb-media-list{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}.gb-accordion-header{gap:1rem;padding:1rem}.entry-serial-circle{width:36px;height:36px;font-size:.9rem}.gb-accordion-left{flex:1;gap:12px;min-width:0}.gb-accordion-right,.gb-accordion-actions{gap:8px}.gb-action-menu-btn,.gb-accordion-toggle-circle{width:28px;height:28px}}@media (max-width:1024px){.gat-bandish-entries-list{gap:.75rem}}@media (max-width:768px){.gat-bandish-entries-list{gap:.625rem}}@media (max-width:480px){.gat-bandish-entries-list{gap:.5rem}}.gat-bandish-entry-item{box-sizing:border-box;border:1px solid #e0e0e0;border-radius:8px;grid-template-columns:50px 1fr auto auto;align-items:center;gap:1rem;width:100%;padding:1rem;transition:all .2s;display:grid}.gat-bandish-entry-item:nth-child(odd){background:#dbeef4!important}.gat-bandish-entry-item:nth-child(2n){background:#dfd8c5!important}.gat-bandish-entry-item:hover{opacity:.9;box-shadow:0 2px 4px #0000001a}.entry-serial-circle{color:#4b5563;background:#fff;border:1px solid #e5e7eb;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.1rem;font-weight:700;display:flex;box-shadow:0 2px 4px #0000000d}.entry-details{flex-direction:column;gap:.25rem;min-width:0;display:flex;overflow:hidden}.entry-type-name{color:#1a1a1a;word-wrap:break-word;overflow-wrap:break-word;margin-bottom:.35rem;font-size:1.25rem;font-weight:600}.entry-taal,.entry-prasang{color:#666;word-wrap:break-word;overflow-wrap:break-word;font-size:.95rem}.entry-audio{min-width:300px;max-width:100%}.gat-bandish-audio-player{width:100%;min-width:250px;max-width:100%;height:40px}.entry-actions{gap:.5rem;display:flex}.delete-entry-btn{color:#dc3545;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:.5rem;transition:all .2s;display:flex}.delete-entry-btn:hover{color:#c82333;background:#fee}.audio-upload-section{flex-direction:column;gap:.75rem;display:flex}.audio-upload-controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.audio-controls-left{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.audio-preview{background:#f8f9fa;border:1px solid #e0e0e0;border-radius:8px;align-items:center;gap:.75rem;margin-left:auto;padding:.5rem .75rem;display:flex;box-shadow:0 2px 4px #0000000d}.audio-preview-label{color:#666;white-space:nowrap;font-size:.85rem;font-weight:600}.audio-preview .audio-player{background:#fff;border:1px solid #ddd;border-radius:6px;width:auto;min-width:300px;max-width:400px;height:36px;padding:0;display:block}.audio-preview .audio-player::-webkit-media-controls-panel{background-color:#fff;border-radius:6px}.audio-preview .audio-player::-webkit-media-controls-play-button{filter:none}.audio-preview .audio-player::-webkit-media-controls-volume-slider{filter:none}.audio-preview .audio-player::-webkit-media-controls-timeline{filter:none}@media (max-width:1024px){.detail-table-section{width:calc(100% + 2rem);max-width:calc(100% + 2rem);margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem;overflow:visible}.detail-table-wrapper{-webkit-overflow-scrolling:touch;width:100%;display:block;overflow:auto visible}.detail-table{width:max-content;min-width:800px;display:table}.detail-table th,.detail-table td{white-space:nowrap}.detail-table td.editable-cell .cell-content{white-space:pre-wrap;word-wrap:break-word}}@media (max-width:768px){.detail-table-section{box-shadow:none;background:0 0;border:none;width:100%;max-width:100%;margin:0;padding:0}.detail-table-wrapper{width:100%;overflow:visible}.detail-table{border-collapse:separate;border-spacing:0;width:100%;display:block}.detail-table thead{display:none}.detail-table tbody{width:100%;display:block}.detail-table tbody tr{box-sizing:border-box;background:#fff;border:1px solid #00000014;border-radius:12px;width:100%;margin-bottom:8px;padding:10px;display:block;box-shadow:0 2px 8px #00000014}.detail-table tbody tr:last-child{margin-bottom:0}.detail-table tbody tr td{text-align:left;white-space:normal;background:0 0;border:none;border-radius:0;width:100%;padding:6px 0;display:block}.detail-table tbody tr td:first-child{color:#1e293b;border-radius:0;margin-bottom:4px;padding-top:0;font-size:.9rem;font-weight:600}.detail-table tbody tr td:last-child{border-radius:0;padding-bottom:0}.detail-table tbody tr td:not(:first-child):not(.action-cell):before{content:attr(data-label);color:#8c96ab;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:.75rem;font-weight:600;display:none}.detail-table tbody tr td.action-cell{display:none}.entry-serial{font-size:.9rem}.entry-type-name{font-size:.95rem}.entry-audio{min-width:200px;max-width:100%}.gat-bandish-audio-player{min-width:180px;max-width:100%;height:36px}.upload-row{grid-template-columns:1fr;gap:1.5rem}.upload-right-top-row{flex-wrap:wrap;width:100%}.upload-notes-input{width:100%;min-width:auto;max-width:100%}.upload-left{flex-wrap:wrap;width:100%}.upload-url-input{width:100%;min-width:auto;max-width:100%}.upload-type-select{flex:none}.upload-file-controls{flex-wrap:wrap;width:100%}.edit-hero-image-btn{top:1.5rem;right:1rem}.raag-header{padding:0 1rem}.raag-detail-layout{padding:0 16px 24px}.raag-tabs{-webkit-overflow-scrolling:touch;border-bottom:none;gap:.5rem;padding:0 1rem;overflow-x:auto}.raag-tabs-desktop{flex-wrap:nowrap;gap:.5rem;display:flex!important}.raag-tab{flex-shrink:0;padding:.45rem 1rem;font-size:.75rem}.raag-tabs-mobile-toggle,.raag-tabs-mobile-menu,.raag-tab-mobile{display:none!important}.raag-tab-content{box-sizing:border-box;width:100%;max-width:100%;padding:0 1rem 2rem;overflow-x:visible}.detail-table-section{width:100%;max-width:100%;box-shadow:none;background:#ebeef1;border-radius:20px;margin-left:0;margin-right:0;padding:16px}.raag-features-header{color:#727b8e;padding-bottom:0%;padding-left:4px;font-size:.95rem;font-weight:600;display:flex}.detail-table{width:100%;min-width:0}.upload-row{grid-template-columns:1fr;gap:1rem;padding:1rem}.upload-left{flex-direction:column;gap:.75rem;width:100%}.upload-type-select,.upload-url-input{width:100%;max-width:100%}.upload-file-controls{flex-direction:column;gap:.5rem;width:100%}.upload-file-label,.upload-record-btn{justify-content:center;width:100%}.upload-right{justify-content:flex-start;width:100%}.upload-right-top-row{flex-direction:column;gap:.75rem;width:100%}.upload-notes-input{width:100%;max-width:100%}.delete-upload-btn,.save-upload-btn,.add-upload-row-btn{justify-content:center;width:100%}.notation-header{flex-direction:column;align-items:flex-start;gap:1rem}.detail-table-section{width:calc(100% + 2rem);max-width:calc(100% + 2rem);margin-left:-1rem;margin-right:-1rem;padding-left:1rem;padding-right:1rem;overflow:visible}.detail-table-wrapper{-webkit-overflow-scrolling:touch;width:100%;display:block;overflow:auto visible}.detail-table{width:100%;min-width:0;font-size:.85rem;display:block}.detail-table th,.detail-table td{white-space:normal;padding:.75rem}.detail-table td.editable-cell .cell-content{white-space:pre-wrap;word-wrap:break-word}.preview-left,.preview-right{width:100%}.gat-bandish-entry-item{grid-template-columns:1fr;gap:.75rem;padding:.75rem}.entry-serial{text-align:left;border-bottom:1px solid #0000001a;margin-bottom:.25rem;padding-bottom:.5rem;font-size:.85rem}.entry-details{order:2;gap:.15rem;width:100%}.entry-type-name{margin-bottom:.15rem;font-size:.9rem}.entry-taal,.entry-prasang{font-size:.8rem}.entry-audio{order:3;width:100%;min-width:auto;max-width:100%}.gat-bandish-audio-player{width:100%;min-width:auto;max-width:100%;height:36px}.entry-actions{order:4;justify-content:flex-end;margin-top:.25rem}}@media (max-width:480px){.edit-hero-image-btn{padding:.625rem;top:2rem;right:.75rem}.raag-detail-header{gap:10px;padding:10px}.header-left{gap:8px}.header-left .back-button{width:32px;height:32px}.header-title{font-size:1rem}.header-badge{width:18px;height:18px;font-size:.6rem}.header-right{gap:6px}.share-student-btn{padding:6px 12px;font-size:.8rem}.toggle-btn{height:auto;padding:10px 16px;font-size:16px}.raag-title{font-size:1.5rem}.raag-tab{padding:.4rem .85rem;font-size:.7rem}.raag-tabs-desktop{gap:.4rem}.raag-detail-layout{border-radius:18px;margin-left:10px;margin-right:10px;padding:0 0 20px}.detail-table-section{border-radius:22px;width:100%;max-width:none;margin-left:0;margin-right:0;padding:10px}.details-view-layout{gap:16px}.raag-references-sidebar{border-radius:22px;padding:16px}.notation-header-styled{gap:8px;margin-top:4px;margin-bottom:4px}.detail-table,.detail-table tbody,.detail-table tr{box-sizing:border-box;min-width:100%;max-width:100%;display:block;width:100%!important}.detail-table{font-size:.8rem}.detail-table th,.detail-table td{white-space:normal;padding:.5rem}.detail-table td.editable-cell .cell-content{white-space:pre-wrap;word-wrap:break-word}.gat-bandish-entry-item{grid-template-columns:1fr;gap:.5rem;padding:.625rem}.entry-serial-circle{text-align:left;width:auto;height:auto;box-shadow:none;background:0 0;border:none;border-bottom:1px solid #0000001a;border-radius:0;margin-bottom:4px;padding-bottom:4px;font-size:.9rem;display:block}.entry-details{gap:.25rem}.entry-type-name{margin-bottom:.25rem;font-size:1.1rem}.entry-taal,.entry-prasang{font-size:.9rem}.entry-audio{width:100%;min-width:auto;max-width:100%}.gat-bandish-audio-player{width:100%;min-width:auto;max-width:100%;height:32px}.entry-actions{justify-content:flex-end;margin-top:.25rem}.delete-entry-btn{padding:.375rem;font-size:.9rem}.upload-row{padding:.75rem}.upload-type-select,.upload-url-input,.upload-notes-input{padding:.625rem .875rem;font-size:.9rem}.upload-file-label,.upload-record-btn{min-width:auto;padding:.5rem .75rem;font-size:.85rem}.delete-upload-btn,.save-upload-btn,.add-upload-row-btn{padding:.5rem 1rem;font-size:.85rem}.circle-add-btn{width:24px;height:24px;font-size:1rem}.circle-add-btn svg{width:14px;height:14px}.media-library-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}.youtube-preview,.audio-player,.video-player,.upload-image-preview{width:100%;max-width:100%}}@media (max-width:425px){.raag-tabs{gap:.35rem;padding:0 .75rem}.raag-tabs-desktop{gap:.35rem}.raag-tab{padding:.35rem .75rem;font-size:.65rem}}@media (max-width:375px){.edit-hero-image-btn{padding:.625rem;top:3rem;right:.75rem}.raag-tab{padding:.3rem .65rem;font-size:.6rem}.header-left .back-button{width:30px;height:30px}}.add-reference-overlay{z-index:2000;background:#00000073;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.add-reference-modal{background:#f3f4f6;border-radius:20px;flex-direction:column;width:min(520px,95%);height:fit-content;max-height:95vh;display:flex;overflow-y:auto;box-shadow:0 20px 50px #0003}.add-reference-header{align-items:center;gap:14px;padding:20px 24px 16px;display:flex}.add-reference-header-icon{color:#fff;background:#0d0d0d;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:inline-flex}.add-reference-header-icon svg{width:22px;height:22px}.add-reference-title{color:#111827;margin:0;font-size:1.4rem;font-weight:700}.add-reference-body{flex-direction:column;gap:16px;padding:0 24px 20px;display:flex}.add-reference-field{flex-direction:column;gap:6px;display:flex}.add-reference-label{color:#374151;font-size:1rem;font-weight:600}.add-reference-select-wrap{position:relative}.add-reference-select{color:#374151;appearance:none;cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:10px;width:100%;padding:12px 40px 12px 14px;font-size:1rem}.add-reference-chevron{color:#374151;pointer-events:none;width:18px;height:18px;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.add-reference-input{color:#111827;box-sizing:border-box;background:#fff;border:1px solid #e5e7eb;border-radius:10px;width:100%;padding:12px 14px;font-size:1rem}.add-reference-input::placeholder{color:#9ca3af;font-size:1rem}.add-reference-file-input{display:none}.add-reference-upload-zone{text-align:center;cursor:pointer;background:#fff;border:2px dashed #d1d5db;border-radius:12px;padding:20px 16px;transition:border-color .2s,background .2s}.add-reference-upload-zone:hover{background:#fafafa;border-color:#9ca3af}.add-reference-upload-icon{color:#6b7280;width:32px;height:32px;margin:0 auto 8px;display:block}.add-reference-upload-zone p{color:#4b5563;margin:0;font-size:1rem}.add-reference-upload-link{color:#2563eb;font-weight:600;text-decoration:underline}.add-reference-or{text-align:center;margin:1px 0}.add-reference-or span{color:#6b7280;background:#e5e7eb;border-radius:999px;padding:1px 8px;font-size:.7rem;font-weight:600;display:inline-block}.add-reference-record-zone{text-align:center;cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px;transition:background .2s,border-color .2s}.add-reference-record-zone:hover{background:#fafafa;border-color:#d1d5db}.add-reference-record-icon{color:#6b7280;width:20px;height:20px;margin:0 auto 2px;display:block}.add-reference-record-zone p{color:#4b5563;margin:0;font-size:.8rem}.add-reference-uploading,.add-reference-upload-done{color:#6b7280;margin:0;font-size:.85rem}.add-reference-upload-done{color:#059669}.add-reference-footer{border-top:1px solid #e5e7eb;justify-content:flex-end;align-items:center;gap:12px;padding:16px 24px 20px;display:flex}.add-reference-btn-cancel{color:#374151;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:10px 20px;font-size:1rem;font-weight:500}.add-reference-btn-cancel:hover{color:#111827;background:#e5e7eb}.add-reference-btn-save{color:#fff;cursor:pointer;background:#0d0d0d;border:none;border-radius:8px;padding:10px 24px;font-size:1rem;font-weight:600;transition:background .2s}.add-reference-btn-save:hover:not(:disabled){background:#262626}.add-reference-btn-save:disabled{opacity:.6;cursor:not-allowed}.add-reference-video-preview-container{background:#000;border-radius:6px;justify-content:center;align-items:center;width:100%;height:140px;display:flex;position:relative;overflow:hidden}.add-reference-recording-indicator{color:#fff;z-index:10;background:#dc3545f2;border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:.75rem;font-weight:600;display:flex;position:absolute;top:8px;left:8px;box-shadow:0 2px 8px #0000004d}.recording-dot-small{background:#fff;border-radius:50%;width:8px;height:8px;animation:1s infinite recording-blink}.add-reference-video-preview{object-fit:contain;width:100%;height:100%}.add-reference-uploaded-media{box-sizing:border-box;background:#000;border:1px solid #e5e7eb;border-radius:12px;width:100%;max-height:240px}.add-reference-uploaded-media--image{object-fit:contain;display:block}.add-reference-footer{justify-content:space-between;align-items:center;gap:12px;display:flex}.add-reference-footer-right{align-items:center;gap:12px;display:flex}.add-reference-btn-delete{color:#b91c1c;cursor:pointer;background:#fff;border:1px solid #e5e7eb;border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;transition:background .2s,color .2s,transform .1s;display:inline-flex}.add-reference-btn-delete:hover:not(:disabled){color:#991b1b;background:#b91c1c0f}.add-reference-btn-delete:disabled{opacity:.5;cursor:not-allowed}.add-reference-button-group{flex-direction:column;justify-content:center;align-items:center;gap:6px;width:100%;display:flex}.add-reference-button-group .upload-record-btn{flex:1;min-width:60px}.add-reference-button-group>div:last-child{gap:4px;width:100%;display:flex}@media (max-width:768px){.add-reference-modal{border-radius:12px;width:95vw;max-width:100%;max-height:calc(100vh - 20px)}.add-reference-header{padding:16px 16px 12px}.add-reference-body{gap:12px;padding:4px 16px 12px}.add-reference-field{gap:6px}.add-reference-label{font-size:.85rem}.add-reference-input,.add-reference-select{padding:10px 12px;font-size:16px}.add-reference-upload-zone{padding:20px 12px}.add-reference-upload-icon{width:28px;height:28px;margin:0 auto 8px}.add-reference-upload-zone p{font-size:.85rem}.add-reference-record-zone{padding:14px}.add-reference-record-zone p{font-size:.85rem}.add-reference-video-preview-container{height:180px;max-height:40vh}.add-reference-button-group{gap:8px}.add-reference-button-group .upload-record-btn{min-width:80px;padding:8px 12px;font-size:.85rem}.add-reference-footer{gap:8px;padding:12px 16px 16px}.add-reference-btn-cancel,.add-reference-btn-save{flex:1;min-width:80px;padding:8px 16px;font-size:.9rem}}@media (max-width:480px){.add-reference-modal{border-radius:8px 8px 0 0;width:100%;max-height:calc(100vh - 10px)}.add-reference-header{padding:12px 12px 10px}.add-reference-title{font-size:1rem}.add-reference-body{padding:2px 12px 10px}.add-reference-video-preview-container{height:160px;max-height:35vh}.add-reference-button-group{gap:6px}.add-reference-button-group .upload-record-btn{min-width:70px;padding:6px 10px;font-size:.8rem}}.youtube-preview-container{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;flex-direction:column;gap:8px;padding:12px;display:flex}.youtube-preview-wrapper{aspect-ratio:16/9;background:#000;border-radius:6px;justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.youtube-preview-wrapper.error{background:#fee2e2;border:1px dashed #ef4444}.youtube-preview-wrapper.error:after{content:"Video Unavailable";color:#b91c1c;font-size:.875rem;font-weight:500}.youtube-preview-img{object-fit:cover;width:100%;height:100%}.youtube-play-icon{color:#fff;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#000000b3;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.youtube-preview-info{justify-content:space-between;align-items:center;display:flex}.youtube-preview-valid{color:#059669;align-items:center;gap:4px;font-size:.75rem;font-weight:500;display:flex}.youtube-preview-valid:before{content:"✓";color:#fff;background:#059669;border-radius:50%;justify-content:center;align-items:center;width:14px;height:14px;font-size:10px;display:inline-flex}.youtube-preview-error{color:#b91c1c;background:#fee2e2;border:1px solid #fca5a5;border-radius:6px;align-items:center;gap:8px;padding:12px;font-size:.875rem;display:flex}.youtube-preview-error:before{content:"!";color:#fff;background:#b91c1c;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:12px;font-weight:700;display:inline-flex}.fullscreen-recording-overlay{z-index:3000;background:#000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.fullscreen-recording-container{flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.fullscreen-recording-indicator{color:#fff;z-index:10;background:#dc3545f2;border-radius:12px;align-items:center;gap:12px;padding:12px 20px;font-size:1rem;font-weight:600;display:flex;position:absolute;top:24px;left:24px;box-shadow:0 4px 12px #0000004d}.recording-dot{background:#fff;border-radius:50%;width:14px;height:14px;animation:1s infinite recording-blink}@keyframes recording-blink{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}.fullscreen-recording-video{object-fit:contain;background:#000;width:100%;height:100%}.fullscreen-audio-recording-container{background:#000;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.fullscreen-audio-icon{color:#667eea;margin-bottom:40px;font-size:120px;animation:1.5s infinite audio-pulse}@keyframes audio-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.fullscreen-audio-waveform{justify-content:center;align-items:center;gap:8px;height:80px;display:flex}.waveform-bar{background:#667eea;border-radius:4px;width:8px;animation:1s ease-in-out infinite waveform-animation}.waveform-bar:first-child{height:20px;animation-delay:0s}.waveform-bar:nth-child(2){height:40px;animation-delay:.1s}.waveform-bar:nth-child(3){height:60px;animation-delay:.2s}.waveform-bar:nth-child(4){height:40px;animation-delay:.3s}.waveform-bar:nth-child(5){height:20px;animation-delay:.4s}@keyframes waveform-animation{0%,to{opacity:.7;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}.fullscreen-recording-controls{z-index:10;gap:16px;display:flex;position:absolute;bottom:32px;left:50%;transform:translate(-50%)}.fullscreen-stop-btn{color:#fff;cursor:pointer;background:#dc3545;border:none;border-radius:12px;align-items:center;gap:8px;padding:16px 32px;font-size:1.1rem;font-weight:600;transition:all .2s;display:flex;box-shadow:0 4px 16px #dc354566}.fullscreen-stop-btn:hover{background:#c82333;transform:scale(1.05);box-shadow:0 6px 20px #dc354580}.fullscreen-stop-btn:active{transform:scale(.98)}.fullscreen-upload-container{color:#fff;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:40px;display:flex}.fullscreen-upload-icon{color:#667eea;margin-bottom:24px;font-size:64px;animation:2s infinite upload-pulse}@keyframes upload-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}.fullscreen-upload-title{color:#fff;margin-bottom:32px;font-size:1.5rem;font-weight:600}.fullscreen-upload-progress-container{width:100%;max-width:400px;margin-bottom:16px}.fullscreen-upload-progress-bar{background:#fff3;border-radius:4px;width:100%;height:8px;margin-bottom:12px;overflow:hidden}.fullscreen-upload-progress-fill{background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);border-radius:4px;height:100%;transition:width .3s}.fullscreen-upload-progress-text{text-align:center;color:#fff;font-size:1.2rem;font-weight:600}.fullscreen-upload-status{text-align:center;color:#ffffffb3;margin-top:8px;font-size:.9rem}@media (max-width:768px){.fullscreen-recording-indicator{padding:10px 16px;font-size:.9rem;top:16px;left:16px}.fullscreen-recording-controls{width:calc(100% - 32px);max-width:300px;bottom:24px}.fullscreen-stop-btn{justify-content:center;width:100%;padding:14px 24px;font-size:1rem}.fullscreen-upload-container{padding:24px}.fullscreen-upload-icon{margin-bottom:20px;font-size:48px}.fullscreen-upload-title{margin-bottom:24px;font-size:1.2rem}.fullscreen-upload-progress-container{max-width:100%}.fullscreen-upload-progress-text{font-size:1rem}.fullscreen-audio-icon{margin-bottom:30px;font-size:80px}.fullscreen-audio-waveform{gap:6px;height:60px}.waveform-bar{width:6px}.gb-media-title{color:#727b8e!important;font-size:.95rem!important;font-weight:600!important}.circle-add-btn{width:36px!important;height:36px!important;font-size:1.2rem!important}.circle-add-btn svg{width:20px!important;height:20px!important}}.references-strip{flex-wrap:wrap;gap:16px;width:100%;margin-top:12px;display:flex}.gb-reference-card{border:1px solid #00000014;flex:none;width:440px;min-width:0;position:relative}.gb-reference-card:hover{border-color:#00000026;transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.gb-reference-card.reference-card--audio,.gb-reference-card.reference-card--media{flex-direction:row;align-items:center}@media (max-width:640px){.gb-reference-card{width:100%}}.raag-media-preview-overlay{z-index:10000;background:#000000d9;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.raag-media-preview-content{background:#fff;border-radius:16px;flex-direction:column;width:100%;max-width:900px;max-height:90vh;display:flex;position:relative;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.raag-media-preview-close{color:#fff;cursor:pointer;z-index:10;background:#000000b3;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:28px;transition:all .3s;display:flex;position:absolute;top:16px;right:16px}.raag-media-preview-close:hover{background:#000000e6;transform:scale(1.1)}.raag-media-preview-header{border-bottom:1px solid #f0f0f0;padding:24px}.raag-media-preview-header h2{color:#333;word-break:break-word;margin:0;font-size:22px;font-weight:700}.raag-media-preview-body{flex:1;justify-content:center;align-items:center;min-height:300px;padding:24px;display:flex}.raag-media-preview-youtube{background:#000;border-radius:8px;width:100%;max-width:100%;height:0;padding-bottom:56.25%;position:relative;overflow:hidden}.raag-media-preview-youtube iframe{border:none;border-radius:8px;width:100%;height:100%;position:absolute;top:0;left:0}.raag-media-preview-video{background:#000;border-radius:12px;width:100%;max-height:60vh}.raag-media-preview-audio-container{flex-direction:column;align-items:center;gap:24px;width:100%;display:flex}.raag-media-preview-audio-icon{color:#667eea;justify-content:center;align-items:center;font-size:120px;display:flex}.raag-media-preview-audio{width:100%;max-width:500px;height:50px}.raag-media-preview-image{border-radius:12px;max-width:100%;max-height:70vh}.raag-media-preview-unavailable{color:#666;margin:0}.raag-media-preview-footer{border-top:1px solid #f0f0f0;justify-content:flex-end;padding:16px 24px;display:flex}.raag-media-preview-download{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:8px;padding:10px 24px;font-size:14px;font-weight:600;text-decoration:none;transition:all .3s}.raag-media-preview-download:hover{color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.add-raag-header-wrap{box-sizing:border-box;width:100%;max-width:100%;margin:0 auto;padding:2rem 2rem 0}.add-raag-header-wrap .library-header{max-width:900px;margin-bottom:0;margin-left:auto;margin-right:auto}.add-raag-container{box-sizing:border-box;width:100%;max-width:100%;margin:0;padding:2rem}.add-raag-form{box-sizing:border-box;background:#fff;border-radius:12px;width:100%;max-width:900px;margin:0 auto;padding:1.5rem;box-shadow:0 2px 12px #0000000f}.form-group{margin-bottom:2rem}.form-group-description{margin-top:1.25rem}.form-group-hero{margin-top:1.25rem;margin-bottom:2.25rem}.form-group label{color:#1a1a1a;letter-spacing:.01em;margin-bottom:.625rem;font-size:1rem;font-weight:600;display:block}.required{color:#e74c3c}.form-control{box-sizing:border-box;border:1px solid #e0e0e0;border-radius:8px;width:100%;padding:.875rem 1rem;font-size:1rem;transition:border-color .2s,box-shadow .2s}.form-control:focus{outline:none}.form-control:disabled{cursor:not-allowed;background-color:#f5f5f5}textarea.form-control{resize:vertical;min-height:100px;font-family:inherit}.error-message{color:#c33;background-color:#fee;border:1px solid #fcc;border-radius:4px;margin-bottom:1.5rem;padding:.75rem 1rem}.form-actions{border-top:1px solid #eee;justify-content:flex-end;gap:1rem;margin-top:1rem;padding-top:1.5rem;display:flex}.btn{cursor:pointer;border:none;border-radius:4px;padding:.75rem 1.5rem;font-size:1rem;font-weight:500;transition:all .2s}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{color:#fff;background-color:#4a90e2}.btn-primary:hover:not(:disabled){background-color:#357abd}.btn-secondary{color:#333;background-color:#f5f5f5;border:1px solid #ddd}.btn-secondary:hover:not(:disabled){background-color:#e8e8e8}.hero-image-section{box-sizing:border-box;background:linear-gradient(145deg,#f8fafc 0%,#f1f5f9 100%);border:1px solid #e2e8f0;border-radius:12px;width:100%;margin-top:.5rem;padding:1.5rem}.image-upload-controls{margin-bottom:0}.file-input{display:none}.upload-zone{cursor:pointer;box-sizing:border-box;background:#fff;border:2px dashed #cbd5e1;border-radius:10px;flex-flow:wrap;justify-content:center;align-items:center;gap:.75rem;width:100%;min-height:72px;padding:.875rem 1.25rem;transition:border-color .2s,background .2s,color .2s;display:flex}.upload-zone-row{flex-direction:row;align-items:center;gap:.75rem;display:inline-flex}.upload-zone:hover{background:#4a90e20a;border-color:#4a90e2}.image-upload-controls:has(.file-input:disabled) .upload-zone{opacity:.7;cursor:not-allowed;pointer-events:none}.upload-zone-icon{color:#fff;background:linear-gradient(135deg,#4a90e2 0%,#357abd 100%);border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.75rem;display:flex}.upload-zone-text{color:#334155;white-space:nowrap;font-size:1rem;font-weight:600}.upload-zone-hint{color:#64748b;font-size:.8125rem}.image-url-divider{align-items:center;gap:1rem;margin:1.25rem 0;display:flex}.url-divider-line{background:#e2e8f0;flex:1;height:1px}.url-divider-text{color:#64748b;white-space:nowrap;font-size:.875rem;font-weight:500}.image-url-input-wrapper{box-sizing:border-box;align-items:center;width:100%;display:flex;position:relative}.url-input-icon{color:#94a3b8;pointer-events:none;z-index:1;font-size:1.25rem;position:absolute;left:1rem}.image-url-input-wrapper .url-input{flex:1;min-width:0;padding-left:2.75rem}.upload-progress-container{background:#f8f9fa;border:1px solid #e0e0e0;border-radius:8px;margin-top:1rem;padding:.75rem}.upload-progress-info{color:#333;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.9rem;font-weight:500;display:flex}.upload-progress-info span:first-child{align-items:center;gap:.5rem;display:flex}.upload-progress-info span:first-child:before{content:"";border:2px solid #4a90e2;border-top-color:#0000;border-radius:50%;width:12px;height:12px;animation:.8s linear infinite spin;display:inline-block}.upload-progress-bar-container{background:#e0e0e0;border-radius:3px;width:100%;height:6px;position:relative;overflow:hidden}.upload-progress-bar{background:linear-gradient(90deg,#4a90e2 0%,#357abd 100%);height:100%;transition:width .3s;position:relative}.upload-progress-bar:after{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);animation:1.5s infinite shimmer;position:absolute;inset:0}.upload-progress-bar.failed{background:linear-gradient(90deg,#dc3545 0%,#c82333 100%)}.upload-progress-error{color:#c62828;background:#ffebee;border:1px solid #ef5350;border-radius:4px;margin-top:.5rem;padding:.5rem;font-size:.85rem}.image-preview-container{margin-top:1rem;display:inline-block;position:relative}.image-preview{object-fit:contain;border:1px solid #e0e0e0;border-radius:8px;max-width:100%;max-height:300px;box-shadow:0 2px 8px #0000001a}.remove-image-btn{color:#fff;cursor:pointer;background:#dc3545;border:none;border-radius:6px;margin-top:.5rem;padding:.5rem 1rem;font-size:.9rem;font-weight:500;transition:all .2s}.remove-image-btn:hover:not(:disabled){background:#c82333;transform:translateY(-1px)}.remove-image-btn:disabled{opacity:.6;cursor:not-allowed}@media (max-width:768px){.add-raag-header-wrap{padding:1rem .75rem 0}.add-raag-container{max-width:100%;padding:1rem .75rem}.add-raag-form{max-width:100%;padding:1.25rem 1rem}.form-group{margin-bottom:1.75rem}.form-group label{margin-bottom:.5rem;font-size:.9375rem}.form-control{padding:.75rem .875rem;font-size:16px}.form-control::placeholder{font-size:.9375rem}textarea.form-control{min-height:96px;font-size:16px}.form-group-hero{margin-bottom:2rem}.hero-image-section{padding:1rem}.upload-zone{min-height:64px;padding:.75rem 1rem}.upload-zone-icon{width:40px;height:40px;font-size:1.4rem}.upload-zone-text{text-align:center;font-size:.9375rem}.upload-zone-hint{font-size:.8125rem}.image-url-divider{margin:1rem 0}.url-divider-text{font-size:.8125rem}.image-url-input-wrapper .url-input{padding-left:2.5rem;font-size:16px}.url-input-icon{font-size:1.125rem;left:.875rem}.form-actions{flex-flow:wrap;gap:.75rem;margin-top:2rem;padding-top:1.5rem}.btn{flex:1;min-width:0;padding:.75rem 1rem;font-size:1rem}.error-message{padding:.625rem .875rem;font-size:.9375rem}}@media (max-width:425px){.add-raag-header-wrap{padding:.75rem .5rem 0}.add-raag-container{padding:.75rem .5rem}.add-raag-form{padding:1rem .75rem}.form-group label{font-size:.9rem}.form-control{padding:.625rem .75rem}.hero-image-section{padding:.75rem}.upload-zone{min-height:60px;padding:.625rem .875rem}.upload-zone-text{font-size:.875rem}}.new-exercise-modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.new-exercise-modal-content{color:#333;background:#f3f4f6;border-radius:16px;flex-direction:column;width:92%;max-width:960px;min-height:320px;max-height:90vh;font-family:Inter,system-ui,-apple-system,sans-serif;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 25px #0003}.new-exercise-modal-header{padding:20px 24px}.modal-title{color:#1a1a1a;margin:0;font-size:18px;font-weight:600}.new-exercise-modal-body{flex-direction:column;flex:1;gap:16px;min-height:0;padding:0 24px 24px;display:flex;overflow-y:auto}.section-label{color:#333;margin-bottom:8px;font-size:14px;font-weight:600}.form-row{grid-template-columns:140px 1fr;align-items:center;gap:16px;display:grid}.form-label{color:#333;font-size:13px;font-weight:600}.form-input{background-color:#fff;border:1px solid #0000;border-radius:8px;outline:none;width:100%;min-height:40px;padding:10px 12px;font-size:13px}.checkbox-group{gap:16px;display:flex}.checkbox-label{color:#333;cursor:pointer;align-items:center;gap:8px;font-size:13px;display:flex}.checkbox-label input{width:16px;height:16px}.notes-grid{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.note-input{text-align:center;background-color:#fff;border:none;border-radius:8px;width:40px;height:40px;font-size:14px;font-weight:500}.fill-in-notes-footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:12px;display:flex}.fill-in-notes-footer .checkbox-label{margin:0}.add-row-btn{color:#4a90e2;cursor:pointer;text-align:left;background:0 0;border:none;width:fit-content;margin:0;padding:0;font-size:13px;font-weight:500}.new-exercise-modal-footer{justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.btn-cancel{color:#666;cursor:pointer;background:0 0;border:none;font-size:14px;font-weight:500}.btn-save{color:#fff;cursor:pointer;background-color:#1a1a1a;border:none;border-radius:6px;padding:10px 32px;font-size:14px;font-weight:600}.btn-save:hover{background-color:#333}.add-exercise-collection-container{box-sizing:border-box;background-color:#e5e7eb;flex-direction:column;width:100%;min-width:100%;height:100%;min-height:calc(100vh - 64px);padding:0;display:flex}.collection-header{background-color:#0000;border-bottom:none;justify-content:space-between;align-items:center;padding:25px 4% 24px;display:flex}.header-left-group{align-items:center;gap:16px;display:flex}.back-circle-btn{cursor:pointer;color:#1a1a1a;background-color:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:24px;display:flex;box-shadow:0 1px 2px #0000000d}.collection-page-title{color:#1a1a1a;margin:0;font-size:24px;font-weight:700}.add-exercise-btn{color:#fff;cursor:pointer;background-color:#1a1a1a;border:none;border-radius:8px;align-items:center;gap:8px;padding:10px 24px;font-size:14px;font-weight:600;display:flex}.collection-content{flex:1;gap:32px;padding:20px 12%;display:flex}.collection-sidebar{flex-direction:column;flex-shrink:0;gap:16px;width:280px;display:flex}.sidebar-stats-card{background-color:#fff;border-radius:12px;flex-direction:column;gap:8px;padding:20px;display:flex;box-shadow:0 1px 3px #0000000d}.sidebar-item{cursor:pointer;color:#666;border-radius:8px;align-items:center;gap:12px;padding:16px;font-size:18px;font-weight:500;transition:background-color .1s;display:flex}.sidebar-item:hover{background-color:#f3f4f6}.sidebar-item.active{color:#1a1a1a;background-color:#f3f4f6}.sidebar-item-button{text-align:left;width:100%;font:inherit;background:0 0;border:none}.sidebar-item-button:disabled{opacity:.7;cursor:not-allowed}.sidebar-icon-container{color:#8b5cf6;justify-content:center;width:28px;font-size:18px;font-weight:600;display:flex}.stat-number{color:#8b5cf6}.sidebar-anchor-card{background-color:#fff;border-radius:12px;justify-content:space-between;align-items:center;padding:24px;display:flex;box-shadow:0 1px 3px #0000000d}.anchor-text{color:#1a1a1a;letter-spacing:1px;font-size:18px;font-weight:700}.anchor-label{color:#666;font-size:12px;font-weight:500}.collection-main-area{flex-direction:column;flex:1;gap:20px;min-width:0;display:flex}.exercises-filter-bar{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#fff9;border-radius:16px;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.filter-left{align-items:center;gap:12px;display:flex}.filter-label{color:#1a1a1a;font-size:18px;font-weight:700}.pattern-tag{color:#7e22ce;background-color:#e9d5ff;border-radius:20px;padding:4px 12px;font-size:13px;font-weight:600}.raag-filter-select{cursor:pointer;color:#1a1a1a;background-color:#fff;border:none;border-radius:8px;outline:none;min-width:160px;padding:10px 16px;font-size:14px;font-weight:500;box-shadow:0 1px 2px #0000000d}.exercises-list-container{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#fff6;border-radius:24px;flex-direction:column;gap:16px;min-width:0;padding:24px;display:flex;overflow:hidden}.exercise-card{background-color:#fff;border-radius:16px;justify-content:flex-start;align-items:flex-start;min-width:0;height:auto;padding:16px 72px 16px 32px;display:flex;position:relative;overflow:hidden;box-shadow:0 1px 3px #0000000d}.exercise-info{flex:1;align-items:flex-start;gap:48px;min-width:0;display:flex;overflow:hidden}.exercise-index{color:#9ca3af;flex-shrink:0;width:24px;padding-top:4px;font-size:14px;font-weight:500}.exercise-notes-container{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex;overflow:hidden}.exercise-notes{color:#1a1a1a;letter-spacing:3px;text-transform:uppercase;overflow-wrap:break-word;word-break:break-word;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:16px;font-weight:700}.exercise-notes-by-rows{flex-direction:column;gap:6px;min-width:0;display:flex;overflow:hidden}.exercise-notes-arohan{color:#1a1a1a;flex-direction:column;gap:6px;min-width:0;font-weight:700;display:flex;overflow:hidden}.exercise-notes-avrohan{color:#9ca3af;letter-spacing:3px;flex-direction:column;gap:6px;min-width:0;margin-top:10px;font-size:16px;font-weight:600;display:flex;overflow:hidden}.exercise-notes-line{overflow-wrap:break-word;word-break:break-word;min-width:0;line-height:1.4}.exercise-notes.anchor-highlight{color:#4a4a4a}.exercise-notes.user-notes{color:#1a1a1a}.exercise-notes-highlight{color:#8b5cf6}.exercise-notes-secondary{color:#9ca3af;letter-spacing:2px;text-transform:uppercase;overflow-wrap:break-word;word-break:break-word;min-width:0;margin-top:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:14px;font-weight:600}.exercise-actions{align-items:center;gap:8px;display:flex;position:absolute;top:16px;right:24px}.exercise-copy-btn{color:#9ca3af;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:20px;transition:background-color .2s,color .2s;display:flex}.exercise-copy-btn:hover{color:#4b5563;background-color:#f3f4f6}.exercise-menu-wrapper{position:relative}.exercise-menu-btn{color:#9ca3af;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:24px;transition:background-color .2s,color .2s;display:flex}.exercise-menu-btn:hover{color:#4b5563;background-color:#f3f4f6}.exercise-menu-dropdown{z-index:100;background:#fff;border:1px solid #e5e7eb;border-radius:8px;min-width:160px;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 4px 12px #00000026}.exercise-menu-item{text-align:left;color:#333;cursor:pointer;background:0 0;border:none;width:100%;padding:12px 16px;font-size:14px;transition:background-color .2s}.exercise-menu-item:hover{background-color:#f3f4f6}.exercise-menu-item:not(:last-child){border-bottom:1px solid #f3f4f6}.exercise-menu-item-danger{color:#dc2626}.exercise-menu-item-danger:hover{color:#b91c1c;background-color:#fef2f2}.exercise-media-list{flex-flow:wrap;gap:12px;margin-top:16px;display:flex}.exercise-media-item{flex:0 auto;min-width:0}.exercise-media-youtube{cursor:pointer;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;align-items:center;gap:12px;min-width:200px;max-width:100%;padding:8px;transition:background-color .2s;display:flex}.exercise-media-youtube:hover{background-color:#f3f4f6}.exercise-media-thumbnail{background-color:#000;border-radius:6px;flex-shrink:0;width:120px;height:68px;position:relative;overflow:hidden}.exercise-media-thumb-img{object-fit:cover;width:100%;height:100%}.exercise-media-play-overlay{background-color:#fffffff2;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:transform .2s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.exercise-media-youtube:hover .exercise-media-play-overlay{background-color:#fff;transform:translate(-50%,-50%)scale(1.1)}.exercise-media-play-icon{color:#dc2626;margin-left:2px;font-size:18px}.exercise-media-info{flex:1;min-width:0}.exercise-media-title{color:#1a1a1a;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;display:block;overflow:hidden}.exercise-media-video,.exercise-media-audio{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;align-items:center;gap:12px;min-width:200px;max-width:100%;padding:8px;display:flex}.exercise-media-icon{color:#6b7280;background-color:#e5e7eb;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex}.exercise-media-image{background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;align-items:center;gap:12px;min-width:200px;max-width:100%;padding:8px;display:flex}.exercise-media-img{object-fit:cover;border-radius:6px;flex-shrink:0;width:60px;height:60px}@media (max-width:768px){.collection-header{padding:20px 16px}.collection-content{flex-direction:column;gap:20px;padding:16px}.collection-sidebar,.collection-main-area{width:100%}.exercises-list-container{border-radius:16px;padding:16px}.exercise-card{padding:16px 40px 16px 16px}.exercise-menu-btn{right:12px}}.exercise-detail-container{flex-direction:column;gap:24px;padding:0;display:flex}.exercise-info-section{flex-direction:column;gap:16px;display:flex}.exercise-info-card,.exercise-description-card,.exercise-instructions-card,.exercise-content-card{background-color:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:20px}.exercise-info-title{color:#333;margin:0 0 16px;font-size:18px;font-weight:600}.exercise-info-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;display:grid}.info-item{flex-direction:column;gap:4px;display:flex}.info-label{color:#999;text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:500}.info-value{color:#333;font-size:16px;font-weight:500}.exercise-description-card p,.exercise-instructions-card p{color:#666;margin:0;font-size:14px;line-height:1.6}.notation-pattern-section{background-color:#fff;border:1px solid #e0e0e0;border-radius:12px;flex-direction:column;gap:24px;padding:24px;display:flex}.notation-section{flex-direction:column;gap:16px;display:flex}.notation-title{color:#333;margin:0;font-size:20px;font-weight:600}.notation-grid{flex-direction:column;gap:12px;display:flex}.notation-row{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.notation-cell{text-align:center;color:#333;cursor:pointer;background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:8px;justify-content:center;align-items:center;min-height:60px;padding:16px;font-size:14px;font-weight:500;transition:all .2s;display:flex;box-shadow:0 1px 3px #0000001a}.notation-cell:hover{background-color:#f0f0f0;border-color:#d0d0d0;transform:translateY(-1px);box-shadow:0 2px 6px #00000026}.notation-cell:active{transform:translateY(0);box-shadow:0 1px 3px #0000001a}.notation-divider{border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;justify-content:center;align-items:center;margin:8px 0;padding:16px 0;display:flex}.notation-hint{color:#999;margin:0;font-size:12px;font-style:italic}.pattern-examples-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;display:grid}.exercise-content-section{flex-direction:column;gap:16px;display:flex}.exercise-content-card p{color:#666;margin:0;font-size:14px;line-height:1.6}@media (max-width:768px){.exercise-detail-container{gap:16px}.exercise-info-grid{grid-template-columns:1fr;gap:12px}.notation-pattern-section{gap:16px;padding:16px}.notation-row{grid-template-columns:1fr;gap:8px}.notation-cell{min-height:50px;padding:12px;font-size:13px}.notation-title{font-size:18px}.pattern-examples-grid{grid-template-columns:1fr;gap:8px}.exercise-info-card,.exercise-description-card,.exercise-instructions-card,.exercise-content-card{padding:16px}}@media (min-width:769px) and (max-width:1024px){.notation-row{grid-template-columns:repeat(2,1fr)}}@media (min-width:1025px){.notation-row{grid-template-columns:repeat(3,1fr)}}.raag-detail{color:#111;background:#fff;flex-direction:column;width:100%;max-width:100%;min-height:100vh;margin:0 auto;font-family:Inter,sans-serif;display:flex}.raag-content{box-sizing:border-box;flex:1;width:100%;max-width:100%;margin:0 auto;padding:clamp(.8rem,3vw,1.5rem);overflow:hidden auto}.raag-title{word-wrap:break-word;margin-bottom:.5rem;font-size:clamp(1.4rem,4vw,2rem);font-weight:600}.raag-tags{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.tag{color:#555;white-space:nowrap;background:#f0f0f0;border-radius:1rem;padding:.3rem .8rem;font-size:clamp(.75rem,2vw,.85rem)}.raag-desc{color:#555;margin-bottom:1.5rem;font-size:clamp(.85rem,2.5vw,.95rem);line-height:1.6}.raag-section{margin-bottom:2rem}.raag-info-section{border:1px solid #ddd;border-radius:10px;margin:1.2rem 0 1.5rem;overflow:auto hidden}.raag-info-table{border-collapse:collapse;background:#fff;width:100%;min-width:300px}.raag-info-table th,.raag-info-table td{text-align:left;vertical-align:top;border:1px solid #e2e2e2;padding:clamp(.6rem,2vw,.85rem);font-size:clamp(.8rem,2vw,.9rem)}.raag-info-table th{color:#333;background:#fafafa;width:30%;min-width:100px;font-weight:600}.raag-info-table td{color:#444;white-space:pre-wrap;word-break:break-word;line-height:1.5}.raag-info-table tr:first-child th:first-child{border-top-left-radius:10px}.raag-info-table tr:first-child td:last-child{border-top-right-radius:10px}.raag-info-table tr:last-child th:first-child{border-bottom-left-radius:10px}.raag-info-table tr:last-child td:last-child{border-bottom-right-radius:10px}.raag-aalap-section{border:1px solid #ddd;border-radius:10px;margin:1rem 0 1.5rem;overflow:auto hidden}.raag-aalap-table{border-collapse:collapse;background:#fff;width:100%;min-width:300px}.raag-aalap-table th,.raag-aalap-table td{text-align:left;vertical-align:top;border:1px solid #e2e2e2;padding:clamp(.6rem,2vw,.85rem);font-size:clamp(.8rem,2vw,.9rem)}.raag-aalap-table th{color:#333;background:#fafafa;width:25%;min-width:80px;font-weight:600}.raag-aalap-table td{color:#444;word-break:break-word;line-height:1.5}.aalap-line+.aalap-line{margin-top:.5rem}.raag-aalap-table tr:first-child th:first-child{border-top-left-radius:10px}.raag-aalap-table tr:first-child td:last-child{border-top-right-radius:10px}.raag-aalap-table tr:last-child th:first-child{border-bottom-left-radius:10px}.raag-aalap-table tr:last-child td:last-child{border-bottom-right-radius:10px}.upload-section{margin:1.5rem 0 2rem}.upload-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.upload-title{color:#333;margin:0;font-size:clamp(.95rem,2.5vw,1.1rem);font-weight:600}.upload-file-info{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.upload-filename{color:#666;word-break:break-all;font-size:clamp(.85rem,2vw,.95rem);font-weight:400}.delete-icon-btn{cursor:pointer;color:#999;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:.3rem;transition:color .2s;display:flex}.delete-icon-btn:hover{color:#dc3545}.upload-item{margin-bottom:1.5rem}.upload-item:last-child{margin-bottom:0}.audio-player-container{background:#f5f5f5;border-radius:12px;align-items:center;gap:clamp(.6rem,2vw,1rem);padding:clamp(.8rem,2vw,1.2rem);display:flex}.audio-play-btn{color:#fff;cursor:pointer;background:#2c2c2c;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:clamp(40px,10vw,48px);height:clamp(40px,10vw,48px);padding-left:3px;transition:background .2s;display:flex}.audio-play-btn:hover{background:#3a3a3a}.audio-play-btn:active{background:#1a1a1a}@media (min-width:1400px){.raag-content{max-width:1400px}.notation-grid-container{max-height:700px}}@media (min-width:1024px) and (max-width:1399px){.raag-content{max-width:1100px}}@media (max-width:1023px){.raag-content{padding:1.2rem}.raag-info-table th{width:35%}.raag-aalap-table th{width:30%}.notation-grid-container{max-height:50vh}.notation-grid-table{min-width:500px}.notation-grid-table .beat-label,.notation-grid-table .row-label{min-width:70px}}@media (max-width:767px){.raag-content{padding:1rem}.upload-header{flex-direction:column;align-items:flex-start;gap:.8rem}.audio-player-container{gap:.7rem;padding:.9rem}.notation-grid-container{max-height:400px}.notation-grid-table{min-width:480px}.notation-grid-table th,.notation-grid-table td{padding:.5rem .6rem}.notation-grid-table .beat-label,.notation-grid-table .row-label{min-width:65px}.raag-info-table th{width:38%}.raag-aalap-table th{width:33%}}@media (max-width:599px){.raag-content{padding:.9rem}.raag-title{font-size:1.5rem}.tag{padding:.25rem .65rem;font-size:.75rem}.audio-play-btn{width:42px;height:42px}.notation-grid-table{min-width:450px}.notation-grid-table th,.notation-grid-table td{padding:.45rem .55rem;font-size:.78rem}.notation-grid-table .beat-label,.notation-grid-table .row-label{min-width:60px;padding-left:.7rem}.raag-info-table th{width:40%}.raag-aalap-table th{width:35%}}@media (max-width:479px){.raag-content{padding:.7rem}.raag-title{font-size:1.35rem}.section-title{font-size:1.1rem}.tag{padding:.22rem .6rem;font-size:.7rem}.audio-play-btn{width:38px;height:38px}.audio-play-btn svg{width:18px;height:18px}.audio-duration{min-width:38px;font-size:.8rem}.notation-grid-container{max-height:350px}.notation-grid-table{min-width:400px}.notation-grid-table th,.notation-grid-table td{padding:.38rem .45rem;font-size:.72rem}.notation-grid-table .beat-label,.notation-grid-table .row-label{min-width:52px;padding-left:.55rem}.raag-info-table th,.raag-aalap-table th,.raag-info-table td,.raag-aalap-table td{font-size:.8rem}}@media (max-width:319px){.raag-content{padding:.5rem}.notation-grid-table{min-width:350px}.notation-grid-table th,.notation-grid-table td{padding:.3rem .4rem;font-size:.68rem}}.share-modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background-color:#0006;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.share-modal-content{background:#e9ecef;border-radius:24px;flex-direction:column;width:100%;max-width:440px;max-height:90vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex;overflow:hidden;box-shadow:0 20px 40px #0003}.share-modal-header{align-items:center;gap:16px;padding:30px 30px 20px;display:flex}.share-icon-wrapper{color:#fff;background:#2c2c34;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:20px;display:flex}.share-header-text h2{color:#1a1a1a;margin:0;font-size:20px;font-weight:700}.share-header-text p{color:#6c757d;margin:2px 0 0;font-size:14px;font-weight:500}.share-controls{align-items:center;gap:24px;padding:0 30px 20px;display:flex}.share-control-item{cursor:pointer;color:#6c757d;align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.share-control-item input[type=checkbox]{accent-color:#2c2c34;cursor:pointer;width:18px;height:18px}.share-student-list{flex-direction:column;flex:1;gap:12px;padding:0 30px 6px 20px;display:flex;overflow-y:auto}.student-card{cursor:pointer;background:#dee2e6;border:2px solid #0000;border-radius:16px;align-items:center;gap:12px;padding:10px 16px;transition:all .2s;display:flex}.student-card.selected{background:#fff}.student-card.shared{opacity:.7;cursor:default}.student-checkbox{color:#0000;background:#fff;border:2px solid #adb5bd;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;transition:all .2s;display:flex}.student-card.selected .student-checkbox{color:#fff;background:#2c2c34;border-color:#2c2c34}.student-info-list{text-align:left;flex-direction:column;flex:1;align-items:flex-start;gap:0;min-width:0;display:flex}.student-name-list{color:#1a1a1a;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:15px;font-weight:700;line-height:1.2;overflow:hidden}.student-email{color:#6c757d;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:13px;font-weight:500;line-height:1.2;overflow:hidden}.share-modal-footer{justify-content:space-between;align-items:center;padding:20px 30px 30px;display:flex}.cancel-btn{color:#6c757d;cursor:pointer;background:0 0;border:none;padding:8px 0;font-size:15px;font-weight:600}.done-btn{color:#fff;cursor:pointer;background:#2c2c34;border:none;border-radius:12px;padding:12px 36px;font-size:15px;font-weight:700;transition:background .2s}.done-btn:hover:not(:disabled){background:#1a1a1a}.done-btn:disabled{opacity:.6;cursor:not-allowed}.shared-badge{color:#2e7d32;align-items:center;gap:4px;font-size:12px;font-weight:700;display:flex}.song-detail{color:#111;background:#fff;flex-direction:column;width:100%;max-width:100%;min-height:100vh;margin:0 auto;font-family:Inter,sans-serif;display:flex}.song-content{box-sizing:border-box;flex:1;width:100%;max-width:100%;margin:0 auto;padding:clamp(.8rem,3vw,1.5rem);overflow:hidden auto}.song-title{word-wrap:break-word;color:#333;margin-bottom:.5rem;font-size:clamp(1.4rem,4vw,2rem);font-weight:600}.song-tags{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.song-tags .tag{color:#666;white-space:nowrap;background:#f0f0f0;border-radius:1rem;padding:.3rem .8rem;font-size:clamp(.75rem,2vw,.85rem)}.song-desc{color:#555;margin-bottom:1.5rem;font-size:clamp(.85rem,2.5vw,.95rem);line-height:1.6}.song-section{margin-bottom:2rem}.notation-grid-table .beat-label,.notation-grid-table .row-label{text-align:left;z-index:5;min-width:80px;padding-left:clamp(.6rem,2vw,1rem);font-weight:600;position:sticky;left:0;background:#fafafa!important}@media (min-width:1400px){.song-content{max-width:1400px}.notation-grid-container{max-height:700px}}@media (min-width:1024px) and (max-width:1399px){.song-content{max-width:1100px}}@media (max-width:1023px){.song-content{padding:1.2rem}.notation-grid-container{max-height:50vh}.notation-grid-table{min-width:500px}.notation-grid-table .beat-label,.notation-grid-table .row-label{min-width:70px}}@media (max-width:767px){.song-content{padding:1rem}.notation-grid-container{max-height:400px}.notation-grid-table{min-width:480px}.notation-grid-table th,.notation-grid-table td{padding:.5rem .6rem}.notation-grid-table .beat-label,.notation-grid-table .row-label{min-width:65px}}@media (max-width:599px){.song-content{padding:.9rem}.song-title{font-size:1.5rem}.song-tags .tag{padding:.25rem .65rem;font-size:.75rem}.notation-grid-table{min-width:450px}.notation-grid-table th,.notation-grid-table td{padding:.45rem .55rem;font-size:.78rem}.notation-grid-table .beat-label,.notation-grid-table .row-label{min-width:60px;padding-left:.7rem}}@media (max-width:479px){.song-content{padding:.7rem}.song-title{font-size:1.35rem}.song-tags .tag{padding:.22rem .6rem;font-size:.7rem}.notation-grid-container{max-height:350px}.notation-grid-table{min-width:400px}.notation-grid-table th,.notation-grid-table td{padding:.38rem .45rem;font-size:.72rem}.notation-grid-table .beat-label,.notation-grid-table .row-label{min-width:52px;padding-left:.55rem}}@media (max-width:319px){.song-content{padding:.5rem}.notation-grid-table{min-width:350px}.notation-grid-table th,.notation-grid-table td{padding:.3rem .4rem;font-size:.68rem}}.article-detail{color:#111;background:#fff;flex-direction:column;width:100%;max-width:100%;min-height:100vh;margin:0 auto;font-family:Inter,sans-serif;display:flex}.article-banner{background:#f0f0f0;width:100%;height:clamp(200px,40vh,350px);position:relative;overflow:hidden}.banner-media{object-fit:cover;width:100%;height:100%;display:block}.banner-overlay{background:linear-gradient(#0006 0%,#0000001a 50%,#0000004d 100%);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.back-btn-banner{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;z-index:20;background:#ffffff26;border:none;border-radius:8px;align-items:center;gap:.5rem;padding:.6rem 1rem;font-size:.95rem;font-weight:500;transition:background .2s;display:flex;position:absolute;top:clamp(1rem,3vw,1.5rem);left:clamp(1rem,3vw,1.5rem)}.back-btn-banner:hover{background:#ffffff40}.back-btn-banner svg{width:18px;height:18px}.banner-play-btn{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;z-index:10;background:#000000b3;border:3px solid #fffc;border-radius:50%;justify-content:center;align-items:center;width:clamp(60px,15vw,80px);height:clamp(60px,15vw,80px);padding-left:4px;transition:all .3s;display:flex}.banner-play-btn:hover{background:#000000d9;border-color:#fff;transform:scale(1.1)}.banner-play-btn svg{width:32px;height:32px}.article-content{box-sizing:border-box;flex:1;width:100%;max-width:100%;margin:0 auto;padding:clamp(1.2rem,4vw,2rem);overflow-x:hidden}.article-title{color:#333;margin-bottom:.8rem;font-size:clamp(1.5rem,5vw,2rem);font-weight:600;line-height:1.3}.article-description{color:#666;margin-bottom:1.5rem;font-size:clamp(.9rem,2.5vw,.95rem);line-height:1.7}.article-image-container{border-radius:12px;width:100%;margin:1.5rem 0;overflow:hidden}.article-image{object-fit:cover;border-radius:12px;width:100%;height:auto;max-height:400px;display:block}.article-subtitle{color:#333;margin:1.8rem 0 1rem;font-size:clamp(1.2rem,4vw,1.5rem);font-weight:600;line-height:1.4}.article-paragraph{color:#555;text-align:left;margin-bottom:1.3rem;font-size:clamp(.9rem,2.5vw,.95rem);line-height:1.8}.article-paragraph:last-of-type{margin-bottom:0}.article-image-grid{grid-template-columns:repeat(2,1fr);gap:clamp(1rem,3vw,1.5rem);margin:1.8rem 0;display:grid}.grid-image-item{flex-direction:column;gap:.8rem;display:flex}.grid-image-wrapper{aspect-ratio:4/3;background:#f0f0f0;border-radius:12px;width:100%;position:relative;overflow:hidden}.grid-image{object-fit:cover;width:100%;height:100%;display:block}.image-caption{color:#666;text-align:left;margin:0;padding:0 .2rem;font-size:clamp(.85rem,2vw,.9rem);font-weight:500}.article-notation-section{margin:2.5rem 0}.notation-grid-container{-webkit-overflow-scrolling:touch;box-sizing:border-box;background:#fff;border:1px solid #ddd;border-radius:10px;width:100%;max-width:100%;max-height:clamp(400px,60vh,600px);margin:1rem 0 1.5rem;overflow:auto}.notation-grid-table{border-collapse:collapse;width:100%;min-width:600px}.notation-grid-table thead{z-index:10;background:#f8f8f8;position:sticky;top:0}.notation-grid-table th,.notation-grid-table td{text-align:center;white-space:nowrap;border:1px solid #e2e2e2;padding:clamp(.5rem,1.5vw,.75rem);font-size:clamp(.8rem,2vw,.9rem)}.notation-grid-table th{color:#333;font-weight:600}.notation-grid-table .gray-col{background:#f5f5f5}.notation-grid-table .white-col{background:#fff}.notation-grid-table .beat-label,.notation-grid-table .row-label{text-align:left;z-index:5;color:#333;min-width:85px;padding-left:clamp(.8rem,2vw,1rem);font-weight:600;position:sticky;left:0;background:#fafafa!important}.notation-grid-table thead .beat-label{z-index:15}.notation-grid-table .spacer-row td{border:none;height:.5rem;padding:0;background:#fafafa!important}.notation-grid-container::-webkit-scrollbar{width:8px;height:8px}.notation-grid-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.notation-grid-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:10px}.notation-grid-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.article-audio-player{background:#f5f5f5;border-radius:12px;align-items:center;gap:clamp(.8rem,2vw,1rem);margin:2rem 0 0;padding:clamp(1rem,2.5vw,1.3rem);display:flex}.audio-play-btn-small{color:#fff;cursor:pointer;background:#2c2c2c;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:clamp(44px,10vw,48px);height:clamp(44px,10vw,48px);padding-left:2px;transition:background .2s;display:flex}.audio-play-btn-small:hover{background:#3a3a3a}.audio-play-btn-small:active{background:#1a1a1a}.audio-play-btn-small svg{width:20px;height:20px}.audio-waveform{flex:1;align-items:center;min-width:80px;height:clamp(32px,8vw,40px);display:flex;overflow:hidden}.waveform-svg{width:100%;height:100%}.audio-duration{color:#666;text-align:right;flex-shrink:0;min-width:45px;font-size:clamp(.85rem,2vw,.95rem);font-weight:500}.article-video-container{background:#000;border-radius:12px;width:100%;margin:2rem 0;overflow:hidden}.article-video{width:100%;height:auto;max-height:500px;display:block}.article-list{margin:1.5rem 0;padding-left:1.5rem;list-style:outside}.article-list li{color:#555;margin-bottom:.8rem;font-size:clamp(.9rem,2.5vw,.95rem);line-height:1.8}.article-list li:last-child{margin-bottom:0}@media (min-width:1400px){.article-content{max-width:1000px}.article-banner{height:400px}}@media (min-width:1024px) and (max-width:1399px){.article-content{max-width:900px;padding:1.5rem}}@media (max-width:1023px){.article-content{max-width:100%;padding:1.3rem}.article-image-grid{gap:1rem}.notation-grid-container{max-height:50vh}.notation-grid-table{min-width:500px}}@media (max-width:767px){.article-content{padding:1.1rem}.article-title{margin-bottom:.7rem;font-size:1.4rem}.article-description{margin-bottom:1.3rem;font-size:.9rem}.article-image{max-height:350px}.article-subtitle{margin:1.5rem 0 .8rem;font-size:1.2rem}.article-paragraph{margin-bottom:1.2rem;font-size:.9rem}.article-image-grid{gap:1rem}.notation-grid-container{max-height:45vh}.notation-grid-table{min-width:480px}.notation-grid-table th,.notation-grid-table td{padding:.45rem .5rem;font-size:.8rem}.notation-grid-table .beat-label,.notation-grid-table .row-label{min-width:65px;padding-left:.6rem}.article-audio-player{gap:.8rem;padding:.95rem}.audio-play-btn-small{width:44px;height:44px}}@media (max-width:599px){.article-content{padding:1rem}.article-title{margin-bottom:.7rem;font-size:1.35rem}.article-description{margin-bottom:1.2rem;font-size:.9rem;line-height:1.6}.article-image{max-height:300px}.article-subtitle{margin:1.3rem 0 .7rem;font-size:1.15rem}.article-paragraph{margin-bottom:1rem;font-size:.9rem;line-height:1.7}.article-image-grid{grid-template-columns:1fr 1fr;gap:.9rem}.grid-image-wrapper{border-radius:8px}.image-caption{font-size:.82rem}.notation-grid-container{max-height:40vh}.notation-grid-table{min-width:450px}.notation-grid-table th,.notation-grid-table td{padding:.4rem .45rem;font-size:.78rem}.notation-grid-table .beat-label,.notation-grid-table .row-label{min-width:60px;padding-left:.55rem}.article-audio-player{gap:.7rem;padding:.9rem}.audio-play-btn-small{width:40px;height:40px}.audio-duration{min-width:42px;font-size:.85rem}}@media (max-width:479px){.article-content{padding:.9rem}.article-title{margin-bottom:.65rem;font-size:1.25rem}.article-description{margin-bottom:1.1rem;font-size:.88rem}.article-image{border-radius:8px;max-height:280px}.article-image-container{border-radius:8px;margin:1.3rem 0}.article-subtitle{margin:1.2rem 0 .65rem;font-size:1.05rem}.article-paragraph{margin-bottom:.9rem;font-size:.88rem}.article-image-grid{grid-template-columns:1fr;gap:1rem}.grid-image-wrapper{aspect-ratio:4/3;border-radius:8px}.image-caption{font-size:.8rem}.notation-grid-container{max-height:35vh}.notation-grid-table{min-width:400px}.notation-grid-table th,.notation-grid-table td{padding:.35rem .4rem;font-size:.75rem}.notation-grid-table .beat-label,.notation-grid-table .row-label{min-width:55px;padding-left:.5rem}.article-audio-player{gap:.6rem;margin:1.5rem 0 0;padding:.85rem}.audio-play-btn-small{width:38px;height:38px}.audio-play-btn-small svg{width:18px;height:18px}.audio-waveform{min-width:60px}.audio-duration{min-width:38px;font-size:.8rem}.back-btn-banner{padding:.5rem .7rem;font-size:.85rem}}@media (max-width:319px){.article-content{padding:.8rem}.article-title{font-size:1.2rem}.article-image-grid{grid-template-columns:1fr}.notation-grid-table{min-width:350px}.notation-grid-table th,.notation-grid-table td{padding:.3rem .35rem;font-size:.7rem}.audio-play-btn-small{width:36px;height:36px}}.collection-meta-row{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;display:flex}.collection-meta-content{flex:1;min-width:0}.collection-meta-actions{flex-shrink:0;justify-content:flex-end;margin-bottom:0;display:flex}@media (max-width:520px){.collection-meta-row{flex-direction:column;align-items:stretch}.collection-meta-actions{justify-content:flex-start;align-self:flex-start;margin-bottom:16px}.collection-meta-actions .add-notation-btn{white-space:normal;width:auto;max-width:100%}}.collection-meta-row .collection-description{margin-bottom:0}.collection-description{background-color:#f9f9f9;border-left:4px solid #dc3545;border-radius:8px;margin-bottom:24px;padding:16px}.collection-description p{color:#666;margin:0;font-size:14px;line-height:1.6}.page-container{padding:20px}.collection-title-row{align-items:center;gap:10px;min-width:0;display:flex}.collection-edit-title-btn{cursor:pointer;color:#666;background:#f8f9fa;border:1px solid #ddd;border-radius:6px;flex:none;justify-content:center;align-items:center;padding:.5rem;transition:all .2s;display:flex}.collection-edit-title-btn:hover:not(:disabled){color:#333;background:#e9ecef;border-color:#adb5bd}.collection-edit-title-btn:disabled{opacity:.6;cursor:not-allowed}.collection-title-edit{flex-direction:column;gap:6px;width:100%;max-width:700px;display:flex}.collection-title-input{color:#222;border:2px solid #4a90e2;border-radius:8px;width:100%;padding:.75rem 1rem;font-family:inherit;font-size:32px;font-weight:700}.collection-title-input:focus{outline:none;box-shadow:0 0 0 3px #4a90e21f}.collection-title-edit-hints{color:#666;font-size:.85rem;font-style:italic}.collection-hero-image{background:#f5f5f5;border-radius:8px;margin-bottom:16px;position:relative;overflow:hidden}.collection-hero-image img{object-fit:cover;width:100%;height:300px;display:block}.collection-hero-placeholder{color:#999;justify-content:center;align-items:center;height:300px;font-size:14px;display:flex}.collection-edit-hero-image-btn{cursor:pointer;color:#666;z-index:10;background:#ffffffe6;border:1px solid #ddd;border-radius:8px;justify-content:center;align-items:center;padding:.75rem;transition:all .2s;display:flex;position:absolute;top:1rem;right:1rem;box-shadow:0 2px 8px #0000001a}.collection-edit-hero-image-btn:hover:not(:disabled){color:#333;background:#fff;border-color:#adb5bd;box-shadow:0 4px 12px #00000026}.collection-edit-hero-image-btn:disabled{opacity:.6;cursor:not-allowed}.collection-hero-image-edit-container{background:#f8f9fa;border:2px dashed #ddd;border-radius:12px;width:100%;padding:1.5rem}.collection-hero-image-edit-controls{flex-direction:column;gap:1rem;margin-bottom:1rem;display:flex}.collection-file-input{display:none}.collection-upload-button{color:#333;cursor:pointer;background:#f8f9fa;border:2px solid #ddd;border-radius:8px;align-items:center;gap:.5rem;width:fit-content;padding:.75rem 1.5rem;font-size:.95rem;font-weight:500;transition:all .2s;display:inline-flex}.collection-upload-button:hover{color:#212529;background:#e9ecef;border-color:#adb5bd}.collection-image-url-input-wrapper{align-items:center;gap:1rem;display:flex}.collection-url-divider{color:#999;white-space:nowrap;font-size:.9rem;font-weight:500}.collection-upload-progress-container{background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-top:.25rem;padding:.75rem}.collection-upload-progress-info{color:#333;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.9rem;font-weight:500;display:flex}.collection-upload-progress-bar-container{background:#e0e0e0;border-radius:3px;width:100%;height:6px;overflow:hidden}.collection-upload-progress-bar{background:linear-gradient(90deg,#1b5e20 0%,#2e7d32 100%);height:100%;transition:width .3s}.collection-upload-progress-bar.failed{background:linear-gradient(90deg,#dc3545 0%,#c82333 100%)}.collection-cancel-edit-btn{cursor:pointer;color:#333;background:#f5f5f5;border:1px solid #ddd;border-radius:6px;align-self:flex-start;padding:.5rem 1rem;font-size:.9rem;font-weight:500;transition:all .2s}.collection-cancel-edit-btn:hover:not(:disabled){background:#e8e8e8;border-color:#adb5bd}.collection-cancel-edit-btn:disabled{opacity:.6;cursor:not-allowed}.collection-hero-image-preview{border:1px solid #e0e0e0;border-radius:8px;margin-top:1rem;overflow:hidden}.collection-hero-image-preview img{object-fit:contain;width:100%;max-height:200px;display:block}@media (max-width:768px){.collection-title-input{font-size:24px}}.module-description-section{background:#f5f5f5;border-radius:8px;margin-bottom:24px;padding:16px}.module-description-section p{color:#666;margin:0;line-height:1.6}.module-content-list{flex-direction:column;gap:12px;display:flex}.module-content-item{background:#fff;border:1px solid #e0e0e0;border-radius:8px;align-items:center;gap:12px;padding:16px;transition:all .2s;display:flex}.module-content-item:hover{border-color:#646cff;box-shadow:0 2px 8px #646cff1a}.module-content-item.draggable{cursor:move}.module-content-item.dragging{opacity:.5;background:#f0f0ff;border-color:#646cff}.drag-handle{color:#999;cursor:grab;align-items:center;padding:4px;display:flex}.drag-handle:active{cursor:grabbing}.content-item-icon{color:#646cff;background:#f5f5f5;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;display:flex}.content-item-info{flex:1;min-width:0}.content-item-title{color:#333;margin:0 0 4px;font-size:16px;font-weight:600}.content-item-description{color:#666;margin:0 0 8px;font-size:14px;line-height:1.4}.content-item-type{color:#1976d2;background:#e3f2fd;border-radius:4px;padding:4px 8px;font-size:12px;font-weight:500;display:inline-block}.no-content{text-align:center;color:#999;padding:40px}.instructor-note{align-items:center;gap:8px;display:flex}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{background:#fff;border-radius:12px;flex-direction:column;width:100%;max-width:600px;max-height:80vh;display:flex;box-shadow:0 10px 40px #0003}.modal-header{border-bottom:1px solid #e0e0e0;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.modal-header h2{color:#333;margin:0;font-size:20px;font-weight:600}.close-button{color:#666;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;font-size:24px;transition:background .2s;display:flex}.close-button:hover{background:#f5f5f5}.modal-body{flex-direction:column;flex:1;gap:16px;padding:24px;display:flex;overflow-y:auto}.assignment-type-selector{border-bottom:2px solid #e0e0e0;gap:8px;display:flex}.type-btn{color:#666;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-2px;padding:12px 24px;font-size:14px;font-weight:500;transition:all .2s}.type-btn:hover{color:#333}.type-btn.active{color:#4a90e2;border-bottom-color:#4a90e2}.search-box{align-items:center;display:flex;position:relative}.search-icon{color:#999;font-size:20px;position:absolute;left:12px}.search-input{border:1px solid #e0e0e0;border-radius:8px;width:100%;padding:12px 12px 12px 40px;font-size:14px;transition:border-color .2s}.search-input:focus{border-color:#4a90e2;outline:none}.items-list{flex-direction:column;flex:1;gap:8px;min-height:200px;max-height:400px;display:flex;overflow-y:auto}.item-card{cursor:pointer;background:#fff;border:2px solid #e0e0e0;border-radius:8px;padding:16px;transition:all .2s}.item-card:hover{background:#f0f8ff;border-color:#4a90e2}.item-card.selected{background:#e3f2fd;border-color:#4a90e2}.item-title{color:#333;margin-bottom:4px;font-size:16px;font-weight:500}.item-description{color:#666;font-size:14px;line-height:1.4}.loading-state,.empty-state{text-align:center;color:#999;padding:48px 24px;font-size:14px}.modal-footer{border-top:1px solid #e0e0e0;justify-content:flex-end;align-items:center;gap:12px;padding:20px 24px;display:flex}.cancel-button,.submit-button{cursor:pointer;border-radius:8px;padding:10px 24px;font-size:14px;font-weight:500;transition:all .2s}.cancel-button{color:#666;background:#fff;border:1px solid #e0e0e0}.cancel-button:hover:not(:disabled){background:#f5f5f5;border-color:#999}.submit-button{color:#fff;background:#4a90e2;border:1px solid #4a90e2}.submit-button:hover:not(:disabled){background:#357abd;border-color:#357abd}.cancel-button:disabled,.submit-button:disabled{opacity:.5;cursor:not-allowed}@media (max-width:768px){.modal-content{max-width:100%;max-height:90vh}.modal-body{padding:16px}.items-list{max-height:300px}}.student-profile-container{max-width:1200px;margin:0 auto;padding:24px}.student-profile-header{margin-bottom:32px}.back-button{color:#666;cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;margin-bottom:5px;padding:8px 0;font-size:14px;transition:color .2s;display:flex}.back-button:hover{color:#333}.back-icon{font-size:20px}.student-info{align-items:center;gap:16px;display:flex}.student-avatar{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;font-size:24px;font-weight:600;display:flex}.student-name{color:#333;margin:0 0 4px;font-size:28px;font-weight:600}.student-email{color:#666;margin:0;font-size:14px}.assignments-section{margin-top:32px}.section-title{color:#333;font-size:24px;font-weight:600}.empty-state{text-align:center;color:#999;background:#f9f9f9;border-radius:12px;padding:48px 24px}.date-section{margin-bottom:32px}.date-header{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px;display:flex}.calendar-icon{font-size:20px}.date-title{color:#333;flex:1;font-size:20px;font-weight:600}.date-actions{flex-wrap:wrap;gap:8px;display:flex}.action-btn{color:#333;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:8px;align-items:center;gap:6px;padding:8px 16px;font-size:14px;transition:all .2s;display:flex}.action-btn:hover{background:#f5f5f5;border-color:#999}.duplicate-btn{color:#4a90e2;background:#f0f8ff;border-color:#4a90e2}.duplicate-btn:hover{background:#e0f0ff}.add-btn{color:#fff;background:#4a90e2;border-color:#4a90e2}.add-btn:hover{background:#357abd;border-color:#357abd}.class-assignment-card{background:#fff;border:1px solid #e0e0e0;border-radius:12px;margin-bottom:16px;padding:20px}.assignment-header{border-bottom:1px solid #f0f0f0;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;display:flex}.class-time{color:#666;font-size:14px;font-weight:500}.empty-assignments{text-align:center;color:#999;padding:24px;font-size:14px}.assignments-list{flex-direction:column;gap:12px;display:flex}.assignment-item{background:#f9f9f9;border:1px solid #e0e0e0;border-radius:8px;padding:16px}.assignment-item-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.assignment-info{flex:1;align-items:center;gap:12px;display:flex}.assignment-type-badge{color:#1976d2;background:#e3f2fd;border-radius:12px;padding:4px 12px;font-size:12px;font-weight:600}.assignment-title{color:#333;font-size:16px;font-weight:500}.delete-assignment-btn{color:#d32f2f;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;transition:background .2s;display:flex}.delete-assignment-btn:hover{background:#ffebee}.assignment-description{color:#666;margin:8px 0 0;font-size:14px}.submissions-section{border-top:1px solid #e0e0e0;margin-top:16px;padding-top:16px}.submissions-title{color:#333;margin-bottom:12px;font-size:14px;font-weight:600}.submissions-list{flex-direction:column;gap:8px;display:flex}.submission-item{background:#fff;border:1px solid #e0e0e0;border-radius:8px;align-items:center;gap:12px;padding:12px;display:flex}.submission-icon{color:#4a90e2;font-size:24px}.submission-info{flex-direction:column;flex:1;gap:4px;display:flex}.submission-file{color:#333;font-size:14px;font-weight:500}.submission-date{color:#999;font-size:12px}.play-submission-btn{color:#fff;cursor:pointer;background:#4a90e2;border:none;border-radius:6px;align-items:center;gap:6px;padding:8px 16px;font-size:14px;transition:background .2s;display:flex}.play-submission-btn:hover{background:#357abd}.add-class-section{border-top:2px solid #e0e0e0;margin-top:48px;padding-top:32px}.add-class-section h3{color:#333;margin-bottom:16px;font-size:20px;font-weight:600}.class-dates-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;display:grid}.class-date-btn{cursor:pointer;text-align:left;background:#fff;border:2px solid #e0e0e0;border-radius:8px;flex-direction:column;align-items:flex-start;padding:16px;transition:all .2s;display:flex}.class-date-btn:hover{background:#f0f8ff;border-color:#4a90e2}.class-date-btn.has-assignment{background:#f1f8f4;border-color:#4caf50}.class-date-label{color:#333;margin-bottom:4px;font-size:14px;font-weight:600}.class-time-label{color:#666;font-size:12px}.has-assignment-badge{color:#fff;background:#4caf50;border-radius:4px;margin-top:8px;padding:4px 8px;font-size:11px;font-weight:600}@media (max-width:768px){.student-profile-container{padding:16px}.date-header{flex-direction:column;align-items:flex-start}.date-actions{width:100%}.action-btn{flex:1;justify-content:center}.class-dates-grid{grid-template-columns:1fr}}.top-app-bar{color:#fff;z-index:1000;box-sizing:border-box;background-color:#1e1e2d;justify-content:space-between;align-items:center;width:100%;max-width:100%;height:64px;padding:0 16px;display:flex;position:fixed;top:0;left:0;overflow-x:hidden;box-shadow:0 2px 4px #0003}@media (min-width:1024px){.top-app-bar{padding:0 66px}}.top-app-bar-left{align-items:center;gap:16px;display:flex}.top-app-bar-right{align-items:center;display:flex}.app-title{color:#fff;letter-spacing:.5px;margin:0;font-size:20px;font-weight:600}.icon-button{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:background-color .2s;display:flex}.icon-button:hover{background-color:#ffffff1a}.icon-button:active{background-color:#fff3}.main-layout{box-sizing:border-box;background-color:#fff;flex-direction:column;width:100%;max-width:100%;min-height:100vh;padding-top:64px;display:flex;overflow-x:hidden}.layout-body{box-sizing:border-box;flex:1;width:100%;max-width:100%;margin-top:0;display:flex;position:relative;overflow-x:hidden}.sidebar{overscroll-behavior:contain;z-index:90;background-color:#1e1e2d;border-right:1px solid #ffffff1a;width:250px;height:calc(100vh - 64px);transition:transform .3s;display:block;position:fixed;top:64px;left:0;overflow-y:auto;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-content{padding:20px}.sidebar-title{color:#fff;margin-bottom:24px;font-size:20px;display:none}.sidebar-tab{cursor:pointer;text-align:left;color:#a0a0ba;background:0 0;border:none;border-radius:8px;align-items:center;gap:12px;width:100%;padding:12px 16px;font-size:18px;transition:all .2s;display:flex}.sidebar-tab:hover{color:#fff;background-color:#ffffff0d}.sidebar-tab.active{color:#4a90e2;background-color:#4a90e226;border-left:3px solid #4a90e2}.sidebar-icon{font-size:24px}.layout-content{box-sizing:border-box;flex:1;width:100%;max-width:100%;margin-left:0;padding:20px;transition:margin-left .3s;overflow-x:hidden}@media (min-width:1024px){.sidebar{transform:translate(0)}.sidebar:not(.open){transform:translate(-100%)}.layout-content.sidebar-open{margin-left:250px}.layout-content{padding-bottom:20px;padding-left:66px;padding-right:66px}}.layout-content.no-padding{margin:0;padding:0!important}.layout-content.exercise-collection-page{background-color:#e5e7eb;min-height:calc(100vh - 64px)}.layout-content.no-padding .add-notation-container{box-sizing:border-box;background-color:#dee3e7;width:100%;padding-left:0;padding-right:0}@media (min-width:1024px){.layout-content.sidebar-open.no-padding{width:calc(100% - 250px);margin-left:250px}.layout-content.no-padding .add-notation-container,.layout-content.sidebar-open.no-padding .add-notation-container{box-sizing:border-box;width:100%;padding-left:66px;padding-right:66px}}.sidebar-overlay{z-index:80;background:#00000080;display:none;position:fixed;inset:0}@media (max-width:1023px){.sidebar.open+.sidebar-overlay{display:block}}.app{box-sizing:border-box;width:100%;max-width:100%;min-height:100vh;overflow-x:hidden}.loading-container{background-color:#f5f5f5;justify-content:center;align-items:center;min-height:100vh;display:flex}.loading-spinner{color:#666;font-size:18px}.scroll-to-top{--stt-size:44px;width:var(--stt-size);height:var(--stt-size);color:#fff;cursor:pointer;z-index:1000;opacity:0;pointer-events:none;background:#1b5e20;border:1px solid #0000000f;border-radius:999px;justify-content:center;align-items:center;transition:opacity .16s,transform .16s,background-color .16s;display:inline-flex;position:fixed;bottom:88px;right:16px;transform:translateY(8px);box-shadow:0 10px 24px #0000002e}.scroll-to-top svg{width:calc(var(--stt-size)*.58);height:calc(var(--stt-size)*.58)}.scroll-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0)}.scroll-to-top:hover{background:#155016}.scroll-to-top:focus{outline:none;box-shadow:0 0 0 4px #1b5e2038,0 10px 24px #0000002e}@media (min-width:768px){.scroll-to-top{--stt-size:48px;bottom:96px;right:18px}}@media (min-width:1024px){.scroll-to-top{--stt-size:52px;bottom:24px;right:24px}}@media (min-width:1440px){.scroll-to-top{--stt-size:56px;bottom:32px;right:32px}}.nav-bar{z-index:100;background-color:#fff;border-bottom:1px solid #e0e0e0;gap:12px;padding:16px 24px;display:flex;position:sticky;top:0}.nav-button{cursor:pointer;color:#666;background:#fff;border:1px solid #ddd;border-radius:8px;padding:8px 16px;font-size:14px;transition:all .2s}.nav-button:hover{background-color:#f5f5f5}.nav-button.active{color:#fff;background-color:#646cff;border-color:#646cff}.nav-button.logout{color:#c33;border-color:#c33;margin-left:auto}.nav-button.logout:hover{background-color:#fee}