.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:var(--bg-sidebar);border-right:1px solid var(--border);flex-direction:column;height:100vh;padding:16px 0;display:flex}.sidebar-top{border-bottom:1px solid var(--border);padding:0 16px 16px}.sidebar-logo{align-items:center;gap:10px;padding:8px 0 16px;display:flex}.logo-icon{color:var(--accent);font-size:1.8rem}.logo-text{color:var(--text-primary);letter-spacing:-.5px;font-size:1.3rem;font-weight:700}.sidebar-user,.user-info{align-items:center;gap:10px;display:flex}.signin-link{color:var(--text-secondary);align-items:center;gap:10px;font-size:.9rem;display:flex}.signin-link:hover{color:var(--accent)}.user-avatar{background:var(--accent-dim);width:36px;height:36px;color:var(--accent);border-radius:50%;justify-content:center;align-items:center;font-size:.9rem;font-weight:700;display:flex}.user-avatar.guest{background:var(--bg-input);color:var(--text-muted)}.user-name{color:var(--text-primary);font-size:.9rem;font-weight:500}.sidebar-nav{flex-direction:column;flex:1;gap:2px;padding:12px 8px;display:flex}.nav-item{color:var(--text-secondary);text-align:left;background:0 0;border-radius:8px;align-items:center;gap:12px;width:100%;padding:10px 12px;font-size:.9rem;font-weight:500;text-decoration:none;transition:all .15s;display:flex}.nav-item:hover{background:var(--bg-card);color:var(--text-primary)}.nav-item.active{background:var(--accent-dim);color:var(--accent)}.sidebar-bottom{border-top:1px solid var(--border);padding:8px}.logout-btn{color:var(--text-muted)}.logout-btn:hover{color:var(--red);background:#9b454526}.theme-dropdown{position:relative}.theme-toggle-btn{color:var(--text-muted);justify-content:flex-start}.theme-toggle-btn:hover{color:var(--text-primary);background:var(--accent-dim)}.theme-chevron{opacity:.5;margin-left:auto;transition:transform .2s}.theme-chevron.open{transform:rotate(180deg)}.theme-icon{text-align:center;flex-shrink:0;width:20px;font-size:1.1rem;line-height:1}.theme-menu{background:var(--bg-card);border:1px solid var(--border);box-shadow:0 4px 16px var(--shadow-color);z-index:10;border-radius:8px;margin-bottom:4px;padding:4px;animation:.15s themeMenuIn;position:absolute;bottom:100%;left:0;right:0}@keyframes themeMenuIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.theme-option{width:100%;color:var(--text-secondary);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:6px;align-items:center;gap:10px;padding:8px 10px;font-size:.85rem;font-weight:500;transition:all .15s;display:flex}.theme-option:hover{background:var(--accent-dim);color:var(--text-primary)}.theme-option.active{color:var(--accent);background:var(--accent-dim)}.lang-switcher{justify-content:center;gap:4px;padding:4px 12px 8px;display:flex}.lang-btn{color:var(--text-muted);cursor:pointer;background:0 0;border-radius:6px;padding:4px 10px;font-size:.8rem;font-weight:600;transition:all .15s}.lang-btn:hover{color:var(--text-primary);background:var(--bg-card)}.lang-btn.active{color:var(--accent);background:var(--accent-dim)}.sidebar-version{color:var(--text-muted);text-align:center;-webkit-user-select:none;user-select:none;padding:10px 12px 4px;font-size:.7rem}.sidebar-close-btn{color:var(--text-muted);background:0 0;border-radius:6px;margin-left:auto;padding:4px;transition:color .15s;display:none}.sidebar-close-btn:hover{color:var(--text-primary)}.sidebar-overlay{display:none}@media (width<=1024px){.sidebar{z-index:1000;width:260px;min-width:260px;transition:transform .25s;position:fixed;top:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-close-btn{justify-content:center;align-items:center;display:flex}.sidebar-overlay{z-index:999;background:#00000080;animation:.2s fadeIn;display:block;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}}.staff-container{text-align:center;width:100%;height:100%;margin-bottom:12px;overflow:hidden}.staff-container svg{width:100%;max-height:100%;display:block}.staff-container svg text{fill:var(--staff-text)}.staff-container svg line,.staff-container svg path{stroke:var(--staff-line)}@keyframes noteShake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.note-shake{animation:.4s ease-in-out noteShake}.staff-writer{flex-direction:column;justify-content:center;align-items:center;gap:4px;width:100%;display:flex;overflow:hidden}.sw-staff-area{width:100%;position:relative;overflow:hidden}.sw-vex svg{width:100%;display:block}.sw-vex svg text{fill:var(--staff-text)}.sw-vex svg line,.sw-vex svg path{stroke:var(--staff-line)}.sw-overlay{cursor:crosshair;width:100%;height:100%;position:absolute;top:0;left:0}.sw-handle{background:var(--accent-dim,#5dade226);border:3px solid var(--accent,#5dade2);cursor:grab;-webkit-user-select:none;user-select:none;border-radius:50%;justify-content:center;align-items:center;width:70px;height:70px;margin-top:4px;transition:transform .15s,box-shadow .15s;display:flex}.sw-handle:hover{transform:scale(1.05);box-shadow:0 0 20px #5dade24d}.sw-handle.active{cursor:grabbing;border-color:var(--accent);transform:scale(.95);box-shadow:0 0 30px #5dade280}.sw-handle.hidden{opacity:0;pointer-events:none}.sw-handle-icon{color:var(--accent,#5dade2);font-size:2rem;line-height:1}.sw-correct-label{color:var(--text-secondary);margin-top:4px;font-size:.9rem}.sw-correct-label span{color:#4caf50;font-weight:600}.metrics-bar{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;gap:32px;margin-bottom:20px;padding:16px 24px;display:flex}.metric{flex-direction:column;gap:2px;display:flex}.metric-label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-size:.75rem;font-weight:600}.metric-value{font-size:1.3rem;font-weight:700;font-family:var(--font-mono);color:var(--text-primary)}.metric-value small{color:var(--text-muted);font-size:.7rem;font-weight:400}.note-circle-wrapper{justify-content:center;padding:16px 0;display:flex}.note-circle-svg{max-width:280px}.note-circle-btn circle{fill:var(--bg-input);stroke:var(--border);stroke-width:2px;cursor:pointer;transition:all .15s}.note-circle-btn text{fill:var(--text-primary);pointer-events:none;-webkit-user-select:none;user-select:none;font-size:16px;font-weight:700}.note-circle-btn:hover circle{fill:var(--accent-dim);stroke:var(--accent)}.note-circle-btn.note-correct circle{fill:#4481544d;stroke:var(--green)}.note-circle-btn.note-incorrect circle{fill:#9b45454d;stroke:var(--red)}.note-circle-btn.disabled{pointer-events:none;opacity:.5}.piano-wrapper{-webkit-user-select:none;user-select:none;border-radius:8px;width:100%;overflow:hidden}.piano-scroll{-webkit-overflow-scrolling:touch;overflow:auto hidden}.octave-labels{gap:0;display:flex}.octave-label{text-align:center;color:var(--text-muted);border-bottom:2px solid var(--accent);padding:4px 0;font-size:.75rem}.piano-keys{margin:0 auto;position:relative}.white-key{background:linear-gradient(to bottom, var(--white-key-top), var(--white-key-bottom));border:1px solid var(--white-key-border);cursor:pointer;z-index:1;border-radius:0 0 4px 4px;transition:background .1s;position:absolute;top:0}.white-key:hover{background:linear-gradient(to bottom, var(--white-key-hover-top), var(--white-key-hover-bottom))}.white-key:active{background:var(--white-key-active)}.black-key{background:linear-gradient(to bottom, var(--black-key-top), var(--black-key-bottom));border:1px solid var(--black-key-border);cursor:pointer;z-index:2;border-radius:0 0 3px 3px;transition:background .1s;position:absolute;top:0}.black-key:hover{background:linear-gradient(to bottom, var(--black-key-hover-top), var(--black-key-hover-bottom))}.black-key:active{background:var(--black-key-active)}.key-correct{background:var(--green)!important}.key-incorrect{background:var(--red)!important}.fretboard-wrapper{-webkit-user-select:none;user-select:none;border-radius:8px;width:100%;overflow:hidden}.fretboard-scroll{-webkit-overflow-scrolling:touch;overflow:auto hidden}.fretboard{margin:0 auto;display:flex;position:relative}.fretboard-labels{flex-shrink:0;position:relative}.string-label{text-align:center;width:100%;color:var(--text-muted);pointer-events:none;font-size:.7rem;font-weight:600;position:absolute;left:0;transform:translateY(-50%)}.fretboard-grid{position:absolute;top:0}.fret-line{background:var(--border);pointer-events:none;width:2px;position:absolute;top:0}.fret-line.nut{background:var(--text-secondary);border-radius:2px;width:5px}.string-line{pointer-events:none;border-radius:1px;height:2px;position:absolute;left:0}.string-line:nth-child(6n+5),.string-line:nth-child(6n+6){background:var(--text-muted);height:1px}.string-line{background:var(--text-muted);opacity:.5}.fret-marker{background:var(--text-muted);opacity:.25;pointer-events:none;border-radius:50%;width:8px;height:8px;position:absolute}.fret-note{cursor:pointer;z-index:2;border-radius:4px;transition:background .1s;position:absolute}.fret-note:hover{background:var(--accent-dim)}.fret-note:active{background:var(--accent);opacity:.5}.fret-correct{opacity:.6;background:var(--green)!important}.fret-incorrect{opacity:.6;background:var(--red)!important}.practice-page{justify-content:center;gap:24px;height:100%;display:flex}.practice-main{width:100%;max-width:750px;margin:0 auto;position:relative}.practice-sidebar{flex-shrink:0;width:340px;min-width:300px}.page-title{color:var(--text-primary);margin-bottom:20px;font-size:1.6rem;font-weight:700}.config-panel h3{color:var(--text-primary);margin-bottom:16px;font-size:1.1rem}.config-grid{flex-direction:column;gap:16px;margin-bottom:20px;display:flex}.config-group label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:6px;font-size:.8rem;font-weight:600;display:block}.toggle-group{flex-wrap:wrap;gap:6px;display:flex}.toggle-btn{background:var(--bg-input);color:var(--text-secondary);border:1px solid var(--border);border-radius:6px;align-items:center;gap:6px;padding:8px 16px;font-size:.85rem;font-weight:500;transition:all .15s;display:flex}.toggle-btn:hover{border-color:var(--accent);color:var(--text-primary)}.toggle-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.level-cards{grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px;display:grid}.level-card{background:var(--bg-input);border:2px solid var(--border);cursor:pointer;text-align:center;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;transition:all .15s;display:flex}.level-card:hover{border-color:var(--accent);background:var(--bg-card)}.level-card.active{border-color:var(--accent);background:var(--accent-dim)}.level-icon{font-size:1.5rem;line-height:1}.level-name{color:var(--text-primary);font-size:.85rem;font-weight:700}.level-card.active .level-name{color:var(--accent)}.level-desc{color:var(--text-muted);font-size:.7rem;line-height:1.3}.advanced-toggle{border:1px solid var(--border);width:100%;color:var(--text-muted);cursor:pointer;background:0 0;border-radius:8px;justify-content:center;align-items:center;gap:8px;margin:12px 0;padding:10px;font-size:.85rem;font-weight:600;transition:all .15s;display:flex}.advanced-toggle:hover{border-color:var(--accent);color:var(--text-secondary)}.advanced-toggle-arrow{font-size:.7rem}.advanced-grid{margin-top:4px}.method-icon{font-size:1rem}.start-btn{width:100%;padding:14px;font-size:1.1rem}.input-area{justify-content:center;margin-top:12px;display:flex}.practice-main.practice-running{flex-direction:column;max-width:none;height:100%;display:flex;overflow:hidden}.practice-running>.metrics-bar{flex-shrink:0}.practice-running>.staff-container,.practice-running>.staff-writer{flex:1 1 0;width:100%;min-height:80px;overflow:hidden}.practice-running>.input-area{flex-shrink:0}@media (width<=768px){.practice-main{max-width:none}.level-cards{grid-template-columns:repeat(2,1fr)}.practice-main.practice-running{flex-direction:column;height:calc(100dvh - 76px);display:flex;overflow:hidden}.practice-running>.metrics-bar{margin-bottom:8px}.input-area{flex-shrink:0;min-height:0}}@media (width<=480px){.practice-main.practice-running{height:calc(100dvh - 68px)}}@media (orientation:landscape) and (width<=1024px){.practice-main.practice-running{align-items:stretch;width:100%;max-width:none;height:100%;overflow:hidden;flex-direction:row!important}.practice-main.practice-running>.sound-toggle-btn,.practice-main.practice-running>.top-controls,.practice-main.practice-running>.metrics-bar{display:none!important}.practice-main.practice-running>.staff-container,.practice-main.practice-running>.staff-writer{align-items:center;margin-bottom:0;display:flex;overflow:hidden;flex:0 0 50%!important;width:50%!important}.practice-main.practice-running>.input-area{justify-content:center;align-items:center;margin-top:0;display:flex;flex:0 0 50%!important;width:50%!important}}.results-panel h2{margin-bottom:20px;font-size:1.4rem}.results-metrics{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px;display:grid}.result-stat{text-align:center;background:var(--bg-input);border-radius:8px;padding:16px}.result-label{text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;font-size:.75rem;font-weight:600;display:block}.result-value{font-size:1.4rem;font-weight:700;font-family:var(--font-mono)}.result-value small{color:var(--text-muted);font-size:.65rem}.rank-display{text-align:center;color:var(--text-secondary);margin-bottom:16px;font-size:1.1rem}.rank-display strong{color:var(--accent);font-size:1.3rem}.submit-score{flex-wrap:wrap;align-items:flex-start;gap:10px;margin-bottom:16px;display:flex}.guest-input{background:var(--bg-input);border:1px solid var(--border);min-width:180px;color:var(--text-primary);border-radius:8px;flex:1;padding:10px 14px;font-size:.95rem}.guest-input:focus{border-color:var(--accent)}.results-actions{gap:10px;margin-top:16px;display:flex}.midi-status{color:var(--text-muted);align-items:center;padding:0 8px;font-size:.8rem;display:flex}.midi-status.connected{color:var(--green)}.midi-active-panel{text-align:center;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:16px}.midi-badge{color:var(--red);background:#9b454533;border-radius:20px;padding:6px 16px;font-size:.85rem;font-weight:600;display:inline-block}.midi-badge.connected{color:var(--green);background:#44815433}.top-controls{z-index:5;align-items:center;gap:8px;display:flex;position:absolute;top:12px;right:12px}.midi-top-badge{padding:4px 10px;font-size:.75rem}.sound-toggle-btn{background:var(--bg-input);border:1px solid var(--border);cursor:pointer;color:var(--text-secondary);border-radius:8px;padding:6px 10px;font-size:1.2rem;line-height:1;transition:all .15s}.sound-toggle-btn:hover{border-color:var(--accent);background:var(--bg-card)}.sound-toggle-btn.muted{opacity:.5}.chord-feedback-label{justify-content:center;gap:20px;margin-bottom:8px;font-size:.9rem;font-weight:600;display:flex}.chord-wrong{color:var(--red,#e74c3c)}.chord-correct{color:var(--green,#4caf50)}.lessons-page{max-width:700px}.lessons-locked{text-align:center;padding:60px 20px}.lessons-locked h2{margin-bottom:12px}.lessons-locked p{color:var(--text-secondary);font-size:1rem}.back-btn{color:var(--accent);background:0 0;margin-bottom:16px;padding:4px 0;font-size:.9rem}.back-btn:hover{text-decoration:underline}.chapters-grid{flex-direction:column;gap:12px;display:flex}.chapter-card{cursor:pointer;justify-content:space-between;align-items:center;transition:all .15s;display:flex}.chapter-card:hover{border-color:var(--accent);transform:translate(4px)}.chapter-card-info,.chapter-header-info{flex:1}.chapter-num{text-transform:uppercase;letter-spacing:1px;color:var(--accent);font-size:.7rem;font-weight:700}.chapter-card h3{margin:4px 0;font-size:1.15rem}.chapter-card p,.chapter-header p{color:var(--text-secondary);font-size:.85rem}.chapter-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.chapter-header h2{margin:4px 0;font-size:1.4rem}.chapter-progress-ring{flex-shrink:0;width:80px;height:80px;position:relative}.chapter-progress-ring.small{width:60px;height:60px}.chapter-progress-ring svg{width:100%;height:100%}.ring-bg{fill:none;stroke:var(--border);stroke-width:4px}.ring-fill{fill:none;stroke:var(--accent);stroke-width:4px;stroke-linecap:round;transition:stroke-dasharray .5s}.ring-text{color:var(--text-primary);font-size:.85rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.chapter-progress-ring.small .ring-text{font-size:.75rem}.lesson-list{flex-direction:column;gap:8px;display:flex}.lesson-item{cursor:pointer;align-items:center;gap:14px;padding:14px 16px;transition:all .15s;display:flex}.lesson-item:hover{border-color:var(--accent)}.lesson-item.locked{opacity:.5;cursor:not-allowed}.lesson-item.locked:hover{border-color:var(--border)}.lesson-item.completed.perfect .lesson-icon{background:var(--green);color:var(--btn-primary-text)}.lesson-item.completed.imperfect .lesson-icon{background:var(--red);color:var(--btn-primary-text)}.lesson-icon{background:var(--bg-input);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:.85rem;font-weight:700;display:flex}.lesson-info{flex-direction:column;gap:2px;display:flex}.lesson-type{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-size:.7rem;font-weight:600}.lesson-title{color:var(--text-primary);font-size:.95rem;font-weight:600}.lesson-item.exam{border-left:3px solid var(--accent)}.lesson-item.exam .lesson-type{color:var(--accent)}.lock-icon{margin-left:auto;font-size:1rem}.chord-selector{flex-wrap:wrap;justify-content:center;gap:10px;padding:16px 0;display:flex}.chord-btn{background:var(--bg-input);border:2px solid var(--border);color:var(--text-primary);cursor:pointer;text-align:center;border-radius:12px;min-width:110px;padding:14px 22px;font-size:.95rem;font-weight:600;transition:all .15s}.chord-btn:hover{border-color:var(--accent);background:var(--accent-dim);color:var(--accent)}.chord-btn.chord-correct{border-color:var(--green);color:var(--green);background:#4481544d}.chord-btn.chord-incorrect{border-color:var(--red);color:var(--red);background:#9b45454d;animation:.3s ease-out chord-shake}.chord-btn.disabled{pointer-events:none;opacity:.5}@keyframes chord-shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.lesson-detail{max-width:750px;margin:0 auto;position:relative}.lesson-detail.lesson-running{flex-direction:column;max-width:none;height:100%;display:flex;overflow:hidden}.lesson-running>.staff-container,.lesson-running>.staff-writer{flex:1;width:100%;min-height:0}.lesson-running>.input-area{flex-shrink:0}.lesson-header{margin-bottom:12px}.lesson-number-label{text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-bottom:4px;font-size:.75rem;font-weight:600;display:block}.lesson-header h2{margin-bottom:4px;font-size:1.4rem}.input-selection.card{padding:16px}.input-selection h3{text-align:center;color:var(--text-secondary);margin:8px 0;font-size:.95rem}.input-selection .text-muted{margin-bottom:4px;font-size:.8rem}.input-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;min-width:0;display:grid}.input-option{background:var(--bg-input);border:2px solid var(--border);width:100%;min-width:0;color:var(--text-secondary);text-align:center;cursor:pointer;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:10px 8px;font-size:.75rem;font-weight:500;line-height:1.3;transition:all .15s;display:flex}.input-option:hover{border-color:var(--accent);color:var(--text-primary)}.input-option.active{border-color:var(--accent);background:var(--accent-dim);color:var(--accent)}.option-icon{font-size:1.2rem;line-height:1}.input-selection .sound-toggle{flex-wrap:wrap}.lesson-progress-bar{color:var(--text-muted);justify-content:space-between;align-items:center;margin-top:16px;padding:8px 0;font-size:.85rem;display:flex}.theory-card{padding:32px}.theory-content h3{color:var(--text-primary);margin:28px 0 10px;font-size:1.15rem;font-weight:600}.theory-content h4{color:var(--text-primary);margin:20px 0 8px;font-size:1rem;font-weight:600}.theory-content p,.theory-content ul{color:var(--text-secondary);margin-bottom:12px;line-height:1.7}.theory-content ul{padding-left:20px}.theory-content li{margin-bottom:6px}.theory-content strong{color:var(--text-primary)}.theory-tip{background:var(--accent-dim);border-left:3px solid var(--accent);color:var(--text-secondary);border-radius:0 8px 8px 0;margin:16px 0;padding:12px 16px;font-size:.9rem;line-height:1.6}.theory-sequence{text-align:center;letter-spacing:.05em;background:var(--bg-input);border-radius:8px;padding:10px;font-size:1rem;color:var(--text-primary)!important}.theory-table-wrap{margin:12px 0;overflow-x:auto}.theory-table{border-collapse:collapse;width:100%;font-size:.85rem}.theory-table th,.theory-table td{border:1px solid var(--border);text-align:center;color:var(--text-secondary);padding:6px 10px}.theory-table thead th{background:var(--bg-input);color:var(--text-muted);font-weight:600}.note-timer{text-align:center;color:var(--text-secondary);margin:8px 0;font-size:1.4rem;font-weight:700;transition:color .3s}.note-timer.urgent{color:#e74c3c;animation:.6s ease-in-out infinite timer-pulse}@keyframes timer-pulse{0%,to{opacity:1}50%{opacity:.5}}@media (width<=768px){.lesson-detail{max-width:none}.lesson-running{flex-direction:column;height:calc(100dvh - 68px);display:flex;overflow:hidden}.lesson-running .input-area{flex:1;align-items:flex-end;min-height:0}.input-options{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=420px){.input-options{grid-template-columns:minmax(0,1fr)}}@media (orientation:landscape) and (width<=1024px){.lesson-detail.lesson-running{align-items:stretch;max-width:none;height:calc(100dvh - 56px);overflow:hidden;flex-direction:row!important}.lesson-detail.lesson-running>.back-btn,.lesson-detail.lesson-running>.lesson-header,.lesson-detail.lesson-running>.metrics-bar,.lesson-detail.lesson-running>.note-timer,.lesson-detail.lesson-running>.sound-toggle-btn,.lesson-detail.lesson-running>.top-controls{display:none!important}.lesson-detail.lesson-running>.staff-container,.lesson-detail.lesson-running>.staff-writer{align-items:center;margin-bottom:0;display:flex;overflow:hidden;flex:0 0 50%!important;width:50%!important}.lesson-detail.lesson-running>.input-area{justify-content:center;align-items:center;margin-top:0;display:flex;flex:0 0 50%!important;width:50%!important}.lesson-detail.lesson-running>.lesson-progress-bar{padding:4px 12px;position:absolute;bottom:0;left:0;right:0}}.leaderboard{width:100%}.leaderboard-loading{text-align:center;color:var(--text-muted);padding:24px}.leaderboard-table{border-collapse:collapse;width:100%;font-size:.9rem}.leaderboard-table thead th{text-align:left;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--border);padding:10px 12px;font-size:.75rem;font-weight:600}.leaderboard-table tbody td{border-bottom:1px solid var(--border);color:var(--text-secondary);padding:10px 12px}.leaderboard-table tbody tr:hover td{background:#9f99990f}.rank-cell{width:40px;font-weight:700;font-family:var(--font-mono)}.rank-1 .rank-cell{color:gold}.rank-2 .rank-cell{color:silver}.rank-3 .rank-cell{color:#cd7f32}.player-cell{font-weight:600;color:var(--text-primary)!important}.score-cell{font-family:var(--font-mono);font-weight:700;color:var(--accent)!important}.empty-row{text-align:center;color:var(--text-muted);padding:24px!important}.leaderboard.compact .leaderboard-table{font-size:.85rem}.mode-cell{text-transform:capitalize}.leaderboard-page{max-width:800px;margin:0 auto}.lb-filters{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.lb-filter-row{flex-wrap:wrap;gap:4px;display:flex}.lb-tab{background:var(--bg-input);color:var(--text-secondary);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:8px 16px;font-size:.85rem;font-weight:500;transition:all .15s}.lb-tab:hover{border-color:var(--accent);color:var(--text-primary)}.lb-tab.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.lb-chip{background:var(--bg-input);color:var(--text-muted);border:1px solid var(--border);cursor:pointer;border-radius:20px;padding:5px 12px;font-size:.78rem;transition:all .15s}.lb-chip:hover{border-color:var(--accent);color:var(--text-primary)}.lb-chip.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.analytics-tab{flex-direction:column;gap:16px;display:flex}.analytics-insights{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;display:grid}.insight-card{align-items:center;gap:10px;padding:14px 12px;display:flex}.insight-icon{font-size:1.4rem}.insight-value{font-size:1.15rem;font-weight:700;font-family:var(--font-mono);color:var(--text-primary);display:block}.insight-label{text-transform:uppercase;letter-spacing:.3px;color:var(--text-muted);font-size:.65rem;font-weight:600;display:block}.analytics-section{padding:20px}.analytics-section h3{color:var(--text-primary);margin-bottom:14px;font-size:.95rem}.analytics-section h4{text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);margin-bottom:8px;font-size:.8rem}.section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px;display:flex}.section-header h3{margin-bottom:0}.metric-toggle{gap:4px;display:flex}.metric-toggle .lb-chip{padding:4px 10px;font-size:.7rem}.analytics-tooltip{background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-primary);box-shadow:0 4px 12px var(--shadow-color);border-radius:6px;padding:8px 12px;font-size:.8rem}.analytics-tooltip p{margin:2px 0}.tooltip-label{color:var(--text-muted);font-weight:600;margin-bottom:4px!important}.heatmap-grid{grid-template-columns:80px repeat(3,1fr);gap:4px;margin-bottom:12px;display:grid}.heatmap-header{text-align:center;text-transform:uppercase;color:var(--text-muted);padding:6px 0;font-size:.7rem;font-weight:600}.heatmap-row-label{color:var(--text-secondary);align-items:center;font-size:.8rem;font-weight:600;display:flex}.heatmap-cell{text-align:center;font-size:.85rem;font-weight:700;font-family:var(--font-mono);border-radius:6px;padding:12px 8px}.heatmap-empty{background:var(--bg-input);color:var(--text-muted)}.heatmap-good{color:var(--green);background:#44815440}.heatmap-mid{color:var(--orange);background:#fabd2f33}.heatmap-weak{color:var(--red);background:#9b454540}.heatmap-legend{color:var(--text-muted);gap:16px;font-size:.75rem;display:flex}.heatmap-legend-item{align-items:center;gap:4px;display:flex}.heatmap-dot{border-radius:2px;width:10px;height:10px;display:inline-block}.heatmap-dot.heatmap-weak{background:#9b454580}.heatmap-dot.heatmap-mid{background:#fabd2f66}.heatmap-dot.heatmap-good{background:#44815480}.distribution-row{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (width<=600px){.distribution-row{grid-template-columns:1fr}}.distribution-chart{min-height:200px}.recharts-pie-label-text{fill:var(--text-secondary)!important;font-size:.7rem!important}.recharts-legend-item-text{color:var(--text-secondary)!important;font-size:.75rem!important}.activity-calendar{overflow-x:auto}.calendar-stats{color:var(--text-secondary);gap:20px;margin-bottom:12px;font-size:.85rem;display:flex}.calendar-grid{gap:2px;display:flex}.calendar-day-labels{flex-direction:column;gap:2px;padding-right:4px;display:flex}.calendar-day-label{width:20px;height:12px;color:var(--text-muted);align-items:center;font-size:.55rem;display:flex}.calendar-weeks{gap:2px;display:flex}.calendar-week{flex-direction:column;gap:2px;display:flex}.calendar-cell{border-radius:2px;width:12px;height:12px}.calendar-empty{background:var(--bg-input)}.cal-1{background:#4481544d}.cal-2{background:#44815480}.cal-3{background:#448154b3}.cal-4{background:var(--green)}.calendar-months{color:var(--text-muted);grid-auto-flow:column;margin-bottom:4px;margin-left:24px;font-size:.6rem;display:grid}.calendar-legend{justify-content:flex-end;align-items:center;gap:3px;margin-top:8px;display:flex}.level-progression-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;display:grid}.level-card{border:1px solid var(--border);border-radius:8px;padding:14px}.level-locked{opacity:.4;background:var(--bg-input)}.level-active{background:var(--bg-input)}.level-mastered{background:#4481541f;border-color:#44815466}.level-card-header{justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.85rem;display:flex}.mastery-badge{text-transform:uppercase;color:var(--green);letter-spacing:.3px;background:#44815433;border-radius:4px;padding:2px 6px;font-size:.6rem;font-weight:700}.level-card-stats{color:var(--text-secondary);flex-direction:column;gap:2px;font-size:.75rem;display:flex}.percentile-bars{flex-direction:column;gap:14px;display:flex}.percentile-row{align-items:center;gap:12px;display:flex}.percentile-label{min-width:70px;color:var(--text-secondary);font-size:.8rem;font-weight:600}.percentile-bar-bg{background:var(--bg-input);border-radius:5px;flex:1;height:10px;position:relative;overflow:hidden}.percentile-bar-fill{background:var(--accent);border-radius:5px;height:100%;transition:width .6s}.percentile-marker{background:var(--text-primary);border-radius:1px;width:3px;height:14px;position:absolute;top:-2px;transform:translate(-50%)}.percentile-value{color:var(--text-muted);text-align:right;min-width:60px;font-size:.75rem;font-weight:600}.recommendations-section .recommendation-list{flex-direction:column;gap:8px;display:flex}.recommendation-item{color:var(--text-secondary);background:var(--bg-input);border-radius:6px;align-items:flex-start;gap:10px;padding:10px 12px;font-size:.85rem;display:flex}.recommendation-item.priority-high{border-left:3px solid var(--red)}.recommendation-item.priority-medium{border-left:3px solid var(--orange)}.recommendation-item.priority-low{border-left:3px solid var(--text-muted)}.rec-priority{text-align:center;min-width:16px;font-size:.9rem;font-weight:700}.priority-high .rec-priority{color:var(--red)}.priority-medium .rec-priority{color:var(--orange)}.priority-low .rec-priority{color:var(--text-muted)}.milestones-timeline{flex-direction:column;gap:8px;display:flex}.milestone-item{border-bottom:1px solid #2a3a5c26;align-items:center;gap:10px;padding:8px 0;display:flex}.milestone-item:last-child{border-bottom:none}.milestone-icon{text-align:center;min-width:28px;font-size:1.2rem}.milestone-content{flex:1;justify-content:space-between;align-items:center;gap:8px;display:flex}.milestone-text{color:var(--text-secondary);font-size:.85rem}.milestone-date{white-space:nowrap;font-size:.75rem}.efficiency-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;display:grid}.efficiency-item{background:var(--bg-input);border-radius:6px;flex-direction:column;gap:4px;padding:10px 12px;display:flex}.efficiency-label{text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted);font-size:.65rem;font-weight:600}.efficiency-value{font-size:1rem;font-weight:700;font-family:var(--font-mono);color:var(--text-primary)}.trend-up{color:var(--green)}.trend-down{color:var(--red)}.profile-page{max-width:900px}.profile-locked{text-align:center;padding:60px 20px}.profile-locked h2{margin-bottom:12px}.profile-header{align-items:center;gap:16px;margin-bottom:20px;display:flex}.profile-avatar{background:var(--accent-dim);width:56px;height:56px;color:var(--accent);border-radius:50%;justify-content:center;align-items:center;font-size:1.4rem;font-weight:700;display:flex}.profile-header h2{margin-bottom:2px;font-size:1.3rem}.stats-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;display:grid}.stat-card{text-align:center;padding:16px 12px}.stat-label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:6px;font-size:.7rem;font-weight:600;display:block}.stat-value{font-size:1.3rem;font-weight:700;font-family:var(--font-mono)}.chapter-progress-row{align-items:center;gap:12px;padding:8px 0;font-size:.9rem;display:flex}.progress-bar-bg{background:var(--bg-input);border-radius:4px;flex:1;height:8px;overflow:hidden}.progress-bar-fill{background:var(--accent);border-radius:4px;height:100%;transition:width .4s}.history-table{border-collapse:collapse;width:100%;font-size:.85rem}.history-table th{text-align:left;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border);padding:8px 10px;font-size:.7rem}.history-table td{color:var(--text-secondary);border-bottom:1px solid #2a3a5c4d;padding:8px 10px}.profile-tabs{gap:4px;margin-bottom:16px;display:flex}.breakdown-section{margin-bottom:24px}.breakdown-section:last-child{margin-bottom:0}.breakdown-section h4{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;font-size:.9rem}.breakdown-table{border-collapse:collapse;width:100%;margin-bottom:8px;font-size:.85rem}.breakdown-table th{text-align:left;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border);padding:6px 10px;font-size:.7rem}.breakdown-table td{color:var(--text-secondary);border-bottom:1px solid #2a3a5c4d;padding:8px 10px}.breakdown-label{color:var(--text-primary);font-weight:600}.suggestions-card .suggestion-list{margin:0;padding:0;list-style:none}.suggestions-card .suggestion-list li{color:var(--text-secondary);border-bottom:1px solid #2a3a5c33;padding:8px 0;font-size:.9rem}.suggestions-card .suggestion-list li:last-child{border-bottom:none}.suggestions-card .suggestion-list li:before{content:"→";color:var(--accent);font-weight:700}.settings-tab{flex-direction:column;gap:16px;display:flex}.settings-section h3{color:var(--text-primary);margin-bottom:12px;font-size:1rem}.settings-instrument-switcher{gap:8px;display:flex}.settings-instrument-btn{background:var(--bg-input);color:var(--text-secondary);cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:10px 20px;font-size:.9rem;font-weight:600;transition:all .15s;display:flex}.settings-instrument-btn:hover{color:var(--text-primary);background:var(--bg-card)}.settings-instrument-btn.active{color:var(--accent);background:var(--accent-dim)}.settings-instrument-icon{font-size:1.2rem;line-height:1}.settings-form{flex-direction:column;gap:8px;max-width:380px;display:flex}.settings-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;font-size:.8rem;font-weight:600}.settings-input{border:1px solid var(--border);background:var(--bg-input);color:var(--text-primary);border-radius:8px;outline:none;padding:10px 12px;font-size:.9rem;transition:border-color .15s}.settings-input:focus{border-color:var(--accent)}.settings-submit{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;align-self:flex-start;margin-top:4px;padding:10px 20px;font-size:.9rem;font-weight:600;transition:opacity .15s}.settings-submit:hover{opacity:.85}.settings-submit:disabled{opacity:.5;cursor:not-allowed}.settings-msg{border-radius:6px;padding:8px 12px;font-size:.85rem}.settings-msg.success{color:#66bb6a;background:#4caf5026}.settings-msg.error{color:#ef5350;background:#f4433626}.help-page{max-width:700px}.help-section{margin-bottom:16px}.help-section h3{color:var(--accent);margin-bottom:10px;font-size:1.1rem}.help-section p,.help-section li,.help-section dd{color:var(--text-secondary);font-size:.9rem;line-height:1.7}.help-section ol,.help-section ul{padding-left:20px}.help-section li{margin-bottom:4px}.help-section dl{margin:0}.help-section dt{color:var(--text-primary);margin-top:10px;font-size:.9rem;font-weight:700}.help-section dd{margin:4px 0 0 16px}.auth-page{justify-content:center;align-items:flex-start;padding-top:60px;display:flex}.auth-card{width:100%;max-width:420px}.auth-card h2{margin-bottom:24px;font-size:1.4rem}.auth-form{flex-direction:column;gap:16px;display:flex}.form-group label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:6px;font-size:.8rem;font-weight:600;display:block}.form-group input{background:var(--bg-input);border:1px solid var(--border);width:100%;color:var(--text-primary);border-radius:8px;padding:10px 14px;font-size:.95rem}.form-group input:focus{border-color:var(--accent)}.auth-error{color:var(--red);font-size:.85rem}.auth-submit{width:100%;margin-top:4px;padding:12px}.auth-switch{text-align:center;color:var(--text-muted);margin-top:16px;font-size:.85rem}.auth-switch button{color:var(--accent);background:0 0;font-size:.85rem;font-weight:600}.auth-switch button:hover{text-decoration:underline}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#181616;--bg-secondary:#131111;--bg-sidebar:#111010;--bg-card:#222020;--bg-input:#2a2727;--text-primary:#ccc8c8;--text-secondary:#908a8a;--text-muted:#5a5454;--accent:#7a7474;--accent-hover:#9a9494;--accent-dim:#7a747426;--green:#448154;--red:#9b4545;--orange:#fabd2f;--border:#2e2a2a;--shadow-color:#000c;--sidebar-width:220px;--font-mono:"JetBrains Mono", "Fira Code", "Consolas", monospace;--staff-text:#b0acac;--staff-line:#605a5a;--white-key-top:#d8d2d2;--white-key-bottom:#c8c2c2;--white-key-border:#706a6a;--white-key-hover-top:#c0baba;--white-key-hover-bottom:#b0aaaa;--white-key-active:#a09a9a;--black-key-top:#1e1c1c;--black-key-bottom:#121010;--black-key-border:#080808;--black-key-hover-top:#2e2c2c;--black-key-hover-bottom:#1e1c1c;--black-key-active:#3a3636;--btn-primary-text:#181616}[data-theme=grey]{--bg-primary:#333;--bg-secondary:#2e2e2e;--bg-sidebar:#2b2b2b;--bg-card:#3d3d3d;--bg-input:#404040;--text-primary:#b5b0b0;--text-secondary:#9f9999;--text-muted:#736b6b;--accent:#6c6666;--accent-hover:#868080;--accent-dim:#6c666633;--green:#448154;--red:#9b4545;--orange:#fabd2f;--border:#404040;--shadow-color:#0008;--staff-text:#d4d0d0;--staff-line:#8a8585;--white-key-top:#e8e2e2;--white-key-bottom:#d8d2d2;--white-key-border:#8a8484;--white-key-hover-top:#cfc8c8;--white-key-hover-bottom:#bfb8b8;--white-key-active:#b0a8a8;--black-key-top:#2b2828;--black-key-bottom:#1a1818;--black-key-border:#111;--black-key-hover-top:#3a3636;--black-key-hover-bottom:#2a2626;--black-key-active:#4a4444;--btn-primary-text:#2b2b2b}[data-theme=light]{--bg-primary:#f0eded;--bg-secondary:#e6e2e2;--bg-sidebar:#fff;--bg-card:#fff;--bg-input:#e8e4e4;--text-primary:#2a2424;--text-secondary:#5a5252;--text-muted:#9a9292;--accent:#6c6666;--accent-hover:#4a4545;--accent-dim:#6c66661a;--green:#2e7d46;--red:#b83a3a;--orange:#d4860a;--border:#d6d0d0;--shadow-color:#00000015;--staff-text:#3a3535;--staff-line:#8a8585;--white-key-top:#faf8f8;--white-key-bottom:#eeebeb;--white-key-border:#b5b0b0;--white-key-hover-top:#e8e4e4;--white-key-hover-bottom:#ddd9d9;--white-key-active:#d0cccc;--black-key-top:#2b2828;--black-key-bottom:#1a1818;--black-key-border:#111;--black-key-hover-top:#3a3636;--black-key-hover-bottom:#2a2626;--black-key-active:#4a4444;--btn-primary-text:#fff}[data-theme=candy]{--bg-primary:#fef6ec;--bg-secondary:#fff0e0;--bg-sidebar:#ede4ff;--bg-card:#fff;--bg-input:#fff3e8;--text-primary:#2d1b4e;--text-secondary:#6b5a8e;--text-muted:#a99bc4;--accent:#ff6b9d;--accent-hover:#ff4081;--accent-dim:#ff6b9d26;--green:#43a047;--red:#ef5350;--orange:#ffa726;--border:#e8d5f5;--shadow-color:#7850a01f;--staff-text:#4a3570;--staff-line:#c5b0e0;--white-key-top:#fffbf5;--white-key-bottom:#f5ede5;--white-key-border:#d8c0d0;--white-key-hover-top:#ffe8d8;--white-key-hover-bottom:#ffd8c8;--white-key-active:#ffd0c0;--black-key-top:#3d2060;--black-key-bottom:#2a1545;--black-key-border:#1a0d30;--black-key-hover-top:#5a3580;--black-key-hover-bottom:#3d2060;--black-key-active:#7a50a0;--btn-primary-text:#fff}[data-theme=navy]{--bg-primary:#0f1923;--bg-secondary:#0a1218;--bg-sidebar:#0d1a2a;--bg-card:#162535;--bg-input:#1a2d40;--text-primary:#d0e8f8;--text-secondary:#7a9bb8;--text-muted:#4a6a85;--accent:#00bcd4;--accent-hover:#00e5ff;--accent-dim:#00bcd426;--green:#4caf50;--red:#ff5252;--orange:#ffab40;--border:#1e3448;--shadow-color:#00142899;--staff-text:#a0c8e0;--staff-line:#3a5a75;--white-key-top:#e0eef8;--white-key-bottom:#c8dce8;--white-key-border:#6a8aa5;--white-key-hover-top:#c0d8e8;--white-key-hover-bottom:#a8c8d8;--white-key-active:#90b8c8;--black-key-top:#0a1e30;--black-key-bottom:#061420;--black-key-border:#040e18;--black-key-hover-top:#1a3050;--black-key-hover-bottom:#0a1e30;--black-key-active:#2a4060;--btn-primary-text:#0f1923}html,body,#root{width:100%;height:100%;overflow:hidden}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}button{cursor:pointer;border:none;outline:none;font-family:inherit}input,select{outline:none;font-family:inherit}.app-layout{width:100vw;height:100vh;display:flex}.main-content{background:var(--bg-primary);flex:1;padding:24px 32px;overflow-y:auto}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:4px}.btn{border-radius:8px;padding:10px 24px;font-size:.95rem;font-weight:600;transition:all .2s}.btn-primary{background:var(--accent);color:var(--btn-primary-text);font-weight:700}.btn-primary:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-secondary{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--border)}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px}.text-accent{color:var(--accent)}.text-green{color:var(--green)}.text-red{color:var(--red)}.text-muted{color:var(--text-muted)}.feedback-banner{text-align:center;border-radius:8px;margin-bottom:12px;padding:10px 16px;font-size:.95rem;font-weight:600}.feedback-banner.incorrect{color:var(--red);background:#9b454526}.hamburger-btn{z-index:998;background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);box-shadow:0 2px 8px var(--shadow-color);border-radius:8px;padding:8px;line-height:0;transition:background .15s;display:none;position:fixed;top:12px;left:12px}.hamburger-btn:hover{background:var(--bg-input)}@media (width<=1024px){.hamburger-btn{justify-content:center;align-items:center;display:flex}.main-content{padding:56px 16px 20px}.practice-page{flex-direction:column}.practice-sidebar{width:100%;min-width:0}.results-metrics{grid-template-columns:repeat(2,1fr)!important}}@media (width<=768px){.main-content{padding:56px 12px 12px}.config-grid .toggle-group{flex-wrap:wrap}.toggle-btn{padding:6px 10px;font-size:.8rem}.metrics-bar{flex-wrap:wrap;gap:16px;padding:12px 16px}}@media (width<=480px){.metrics-bar{gap:8px}.metric-value{font-size:1rem}.stats-grid{grid-template-columns:repeat(2,1fr)!important}}