:root{--bg-primary: #0f1117;--bg-secondary: #1a1d27;--bg-card: #222635;--bg-card-hover: #2a2f3f;--accent: #6c63ff;--accent-hover: #5a52d5;--accent-glow: rgba(108, 99, 255, .3);--text-primary: #f0f0f5;--text-secondary: #9ba1b0;--text-muted: #6b7280;--danger: #ef4444;--danger-hover: #dc2626;--success: #10b981;--warning: #f59e0b;--border: #2d3344;--radius: 12px;--shadow: 0 4px 20px rgba(0, 0, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6}#root{min-height:100vh}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.app{max-width:min(1800px,90vw);margin:0 auto;padding:2rem 8rem}.nav-title-link{text-decoration:none;color:inherit}.nav-title-link:hover{opacity:.85}.app-header h1{font-size:1.5rem;font-weight:600;color:var(--text-primary);letter-spacing:.01em}.app-header p{color:var(--text-secondary);font-size:.9rem}.app-footer{display:flex;justify-content:space-between;align-items:center;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border);color:var(--text-muted);font-size:.85rem}.app-footer-tagline{color:var(--text-muted)}.add-card-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 10px var(--accent-glow)}.add-card-btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 15px var(--accent-glow)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;width:90%;max-width:450px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow);animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal h2{margin-bottom:1.5rem;font-size:1.3rem;font-weight:600}.form-group{margin-bottom:1.25rem}.form-group label{display:block;margin-bottom:.5rem;font-size:.85rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.form-group input,.form-group textarea,.form-group select{width:100%;padding:.75rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:.95rem;font-family:inherit;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.form-group textarea{resize:vertical;min-height:80px}.modal-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem}.btn-cancel{padding:.65rem 1.25rem;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);font-size:.9rem;cursor:pointer;transition:all .2s}.btn-cancel:hover{background:var(--bg-card);color:var(--text-primary)}.btn-submit{padding:.65rem 1.25rem;background:var(--accent);border:none;border-radius:8px;color:#fff;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-submit:hover{background:var(--accent-hover)}.search-bar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1.5rem;transition:border-color .2s}.search-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.search-icon{font-size:1rem;opacity:.6}.search-bar input{flex:1;background:none;border:none;outline:none;color:var(--text-primary);font-size:.95rem;font-family:inherit}.search-bar input::placeholder{color:var(--text-muted)}.search-clear{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1rem;padding:.2rem .4rem;border-radius:4px;transition:all .2s}.search-clear:hover{color:var(--text-primary);background:var(--bg-secondary)}.toolbar-row{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}.toolbar-row .search-bar{flex:1;margin-bottom:0}.filter-group{display:flex;gap:.4rem;flex-shrink:0}.filter-btn{display:flex;align-items:center;gap:.4rem;padding:.65rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-secondary);font-size:.85rem;cursor:pointer;transition:all .2s;white-space:nowrap}.filter-btn:hover{background:var(--bg-card-hover);color:var(--text-primary)}.filter-btn.active{background:#6c63ff26;border-color:var(--accent);color:var(--accent)}.filter-btn.type-filter.active{background:var(--type-tint, rgba(108, 99, 255, .15));border-color:var(--type-color, var(--accent));color:var(--type-color, var(--accent))}.contribution-graph{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem;margin-bottom:1.5rem}.contribution-graph-header{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.6rem;flex-wrap:wrap}.contribution-graph-header h2{font-size:1.1rem;font-weight:600;color:var(--text-primary)}.contribution-graph-subtitle{font-size:.8rem;color:var(--text-muted)}.contribution-graph-stats{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;padding:.5rem 1rem;margin-bottom:.75rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:calc(var(--radius) - 4px)}.contribution-stat{display:flex;align-items:baseline;gap:.35rem;min-width:90px}.contribution-stat-value{font-size:1rem;font-weight:700;color:var(--text-primary);line-height:1.1}.contribution-stat-label{font-size:.72rem;color:var(--text-muted);white-space:nowrap}.contribution-graph-scroll{overflow-x:auto;padding-bottom:.25rem}.contribution-graph-body{display:flex;gap:.5rem;width:100%;min-width:640px}.contribution-graph-weekdays{display:flex;flex-direction:column;gap:2px;margin-top:13px;flex:0 0 auto}.contribution-graph-weekdays span{height:11px;line-height:11px;font-size:.65rem;color:var(--text-muted)}.contribution-graph-main{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}.contribution-graph-months{display:flex;gap:2px;margin-bottom:3px;height:11px}.contribution-graph-month{flex:1 1 0;width:0;font-size:.65rem;color:var(--text-muted);white-space:nowrap;overflow:visible}.contribution-graph-weeks{display:flex;gap:2px;flex:1 1 auto}.contribution-graph-week{display:flex;flex-direction:column;gap:2px;flex:1 1 0}.contribution-day{width:100%;max-width:13px;aspect-ratio:1 / 1;border-radius:2px;background:var(--bg-secondary);border:1px solid var(--border);position:relative;cursor:default}.contribution-day.empty{background:transparent;border-color:transparent}.contribution-day.level-1{background:#6c63ff47;border-color:#6c63ff47}.contribution-day.level-2{background:#6c63ff80;border-color:#6c63ff80}.contribution-day.level-3{background:#6c63ffbf;border-color:#6c63ffbf}.contribution-day.level-4{background:var(--accent);border-color:var(--accent)}.contribution-day:not(.empty):hover{outline:1px solid var(--text-primary);outline-offset:-1px}.contribution-graph-legend{display:flex;align-items:center;gap:4px;margin-top:.5rem;font-size:.7rem;color:var(--text-muted)}.contribution-graph-legend .contribution-day{width:11px;height:11px}.contribution-tooltip{position:fixed;transform:translate(-50%,calc(-100% - 10px));z-index:3000;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:.55rem .75rem;box-shadow:var(--shadow);pointer-events:none;animation:fadeIn .1s ease;min-width:140px}.contribution-tooltip-date{font-size:.72rem;font-weight:600;color:var(--text-primary);white-space:nowrap}.contribution-tooltip-total{font-size:.7rem;color:var(--text-muted);margin-bottom:.35rem}.contribution-tooltip-breakdown{display:flex;flex-direction:column;gap:.2rem;border-top:1px solid var(--border);padding-top:.35rem}.contribution-tooltip-row{display:flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--text-secondary)}.contribution-tooltip-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.contribution-tooltip-label{flex:1;white-space:nowrap}.contribution-tooltip-count{font-weight:700;color:var(--text-primary)}.suggestions-section{margin-bottom:2rem}.suggestions-header{display:flex;align-items:baseline;gap:.6rem;margin-bottom:1rem}.suggestions-header .icon{font-size:1.1rem}.suggestions-header h2{font-size:1.1rem;font-weight:600;color:var(--text-primary)}.suggestions-subtitle{font-size:.8rem;color:var(--text-muted)}.suggestions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}.suggestion-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--warning);border-radius:var(--radius);padding:1rem 1.25rem;transition:all .2s ease}.suggestion-card:hover{background:var(--bg-card-hover);transform:translateY(-1px)}.suggestion-card.card-typed{border-left-color:var(--type-color, var(--warning));background:linear-gradient(90deg,var(--type-surface, rgba(108, 99, 255, .22)),var(--bg-card) 60%)}.suggestion-info{display:flex;align-items:center;gap:.75rem;min-width:0}.suggestion-text{min-width:0}.suggestion-title{font-size:.95rem;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggestion-last-used{font-size:.78rem;color:var(--text-muted);margin-top:.15rem}.btn-suggestion{flex:0 0 auto;padding:.5rem 1rem;font-size:.85rem}.today-practice-widget{display:flex;flex-direction:column;gap:.75rem;background:linear-gradient(135deg,rgba(168,85,247,.16),var(--bg-card) 65%);border:1px solid var(--border);border-left:3px solid #a855f7;border-radius:var(--radius);padding:.9rem 1.25rem;margin-bottom:1.5rem}.today-practice-header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.today-practice-header-text{display:flex;align-items:baseline;gap:.6rem;min-width:0}.today-practice-header .icon{font-size:1rem}.today-practice-header h2{font-size:1rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.today-practice-empty{color:var(--text-secondary);font-size:.9rem}.today-practice-empty a{color:#a855f7;font-weight:500}.today-practice-list{display:flex;flex-wrap:wrap;gap:.6rem}.today-practice-item{display:flex;align-items:center;gap:.5rem;background:var(--type-surface, rgba(168, 85, 247, .18));border:1px solid var(--type-border, rgba(168, 85, 247, .4));border-radius:999px;padding:.4rem .9rem .4rem .6rem;font-size:.85rem;color:var(--text-primary)}.today-practice-item-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.today-practice-header .today-practice-start{flex:0 0 auto;padding:.45rem .9rem;font-size:.85rem}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}.cards-empty{grid-column:1 / -1;text-align:center;padding:4rem 2rem;color:var(--text-muted)}.cards-empty .empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.5}.cards-empty p{font-size:1.1rem;margin-bottom:.5rem}.cards-empty span{font-size:.85rem}.card{background:linear-gradient(160deg,rgba(108,99,255,.22),var(--bg-card) 50%);border:1px solid rgba(108,99,255,.6);border-radius:var(--radius);padding:1.1rem;transition:all .3s ease;position:relative;overflow:hidden;display:flex;flex-direction:column}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),#a78bfa);opacity:1}.card.card-typed{background:linear-gradient(160deg,var(--type-surface, rgba(108, 99, 255, .22)),var(--bg-card) 50%);border-color:var(--type-border, rgba(108, 99, 255, .6))}.card.card-typed:before{background:linear-gradient(90deg,var(--type-color, var(--accent)),var(--type-color-strong, #a78bfa))}.card.card-typed:hover{border-color:var(--type-color, var(--accent))}.card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.card.playing{border-color:var(--success);box-shadow:0 0 20px #10b98133}.card.playing:before{background:linear-gradient(90deg,var(--success),#34d399);opacity:1}.card.just-finished{border-color:var(--warning);box-shadow:0 0 20px #f59e0b33;animation:pulse 2s ease-in-out 3}@keyframes pulse{0%,to{box-shadow:0 0 20px #f59e0b33}50%{box-shadow:0 0 30px #f59e0b66}}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem}.card-title-row{display:flex;align-items:center;gap:.5rem;flex:1;margin-right:.5rem}.card-type-badge{font-size:.85rem;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:#6c63ff26}.card-type-badge.typed{background:var(--type-tint, rgba(108, 99, 255, .15));color:var(--type-color, var(--text-primary))}.card-title{font-size:.95rem;font-weight:600;color:var(--text-primary)}.card-description-text{font-size:.8rem;color:var(--text-secondary);margin-bottom:.6rem;line-height:1.4}.card-header-actions{display:flex;gap:.25rem}.card-edit,.card-delete{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:.25rem;border-radius:4px;transition:all .2s;font-size:1.1rem;line-height:1}.card-edit:hover{color:var(--accent);background:#6c63ff1a}.card-delete:hover{color:var(--danger);background:#ef44441a}.card-meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.75rem}.card-meta-item{display:flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--text-secondary)}.card-meta-item .icon{font-size:.9rem}.card-last-used{font-size:.75rem;color:var(--text-muted);margin-bottom:.75rem;font-style:italic}.stats-type-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.stats-type-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border-radius:999px;background:var(--type-tint, rgba(108, 99, 255, .15));border:1px solid var(--type-border, rgba(108, 99, 255, .6));color:var(--type-color, var(--text-primary));font-size:.8rem}.card-timer{text-align:center;margin:.75rem 0;font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--success);letter-spacing:2px;display:flex;align-items:center;justify-content:center;gap:.75rem}.card-timer.paused{color:var(--warning);animation:blink 1.2s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.4}}.paused-label{font-size:.7rem;padding:.2rem .5rem;background:var(--warning);color:#1a1d27;border-radius:4px;font-weight:600;letter-spacing:1px}.card-actions{display:flex;gap:.5rem;margin-top:auto;padding-top:.75rem}.btn-start{flex:1;padding:.5rem .8rem;background:var(--type-tint, rgba(108, 99, 255, .15));color:var(--type-color-strong, var(--accent));border:1px solid var(--type-border, rgba(108, 99, 255, .5));border-radius:8px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.4rem}.btn-start:hover{background:var(--type-surface, rgba(108, 99, 255, .25))}.btn-stop{flex:1;padding:.5rem .8rem;background:#ef44441f;color:var(--danger);border:1px solid rgba(239,68,68,.4);border-radius:8px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.4rem}.btn-stop:hover{background:#ef444433}.btn-pause{flex:1;padding:.5rem .8rem;background:#f59e0b1f;color:var(--warning);border:1px solid rgba(245,158,11,.4);border-radius:8px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.4rem}.btn-pause:hover{background:#f59e0b33}.btn-complete{flex:1;padding:.5rem .8rem;background:#10b9811f;color:var(--success);border:1px solid rgba(16,185,129,.4);border-radius:8px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.4rem}.btn-complete:hover{background:#10b98133}.btn-restart{flex:1;padding:.5rem .8rem;background:var(--type-tint, rgba(108, 99, 255, .15));color:var(--type-color-strong, var(--accent));border:1px solid var(--type-border, rgba(108, 99, 255, .5));border-radius:8px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.4rem}.btn-restart:hover{background:var(--type-surface, rgba(108, 99, 255, .25))}.btn-expand{padding:.6rem .8rem;background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border);border-radius:8px;font-size:.8rem;cursor:pointer;transition:all .2s}.btn-expand:hover{background:var(--bg-card-hover);color:var(--text-primary)}.practice-history{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.practice-history h4{font-size:.85rem;color:var(--text-secondary);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.5px}.practice-list{max-height:200px;overflow-y:auto;padding-right:.5rem}.practice-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;background:var(--bg-secondary);border-radius:6px;margin-bottom:.4rem;font-size:.8rem}.practice-item .date{color:var(--text-secondary)}.practice-item .duration{color:var(--accent);font-weight:500}.no-practices{color:var(--text-muted);font-size:.85rem;font-style:italic}.volume-control{display:flex;align-items:center;gap:.4rem;flex-wrap:nowrap}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:80px;height:4px;background:var(--border);border-radius:2px;outline:none;cursor:pointer;flex-shrink:0}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-secondary);box-shadow:0 0 4px #0000004d;transition:transform .15s}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg-secondary);box-shadow:0 0 4px #0000004d}.volume-value{font-size:.8rem;color:var(--text-muted);min-width:2.5rem;text-align:right;font-variant-numeric:tabular-nums}.fullscreen-volume-control{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;max-width:300px;padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px}.fullscreen-volume-control .icon{font-size:1rem}.fullscreen-volume-control .volume-slider{width:140px}.fullscreen-volume-control .volume-value{color:var(--text-secondary);font-size:.85rem}.progress-bar{width:100%;height:4px;background:var(--border);border-radius:2px;margin-top:.75rem;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--success),#34d399);border-radius:2px;transition:width 1s linear}@media (max-width: 768px){.app{padding:1rem 1.5rem}.app-header{flex-direction:column;gap:1rem;align-items:flex-start}.cards-grid,.suggestions-grid{grid-template-columns:1fr}.suggestion-card{flex-direction:column;align-items:stretch}.btn-suggestion{width:100%}.toolbar-row{flex-wrap:wrap}.toolbar-row .search-bar{flex:1 1 100%}.filter-group{flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.15rem}.toolbar-row .add-card-btn{flex:1 1 100%;justify-content:center}.today-practice-header{flex-wrap:wrap}.today-practice-header .today-practice-start{flex:1 1 100%;justify-content:center}}.fullscreen-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-primary);z-index:900;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease;overflow-y:auto;padding:2rem 0}.fullscreen-layout{display:flex;align-items:flex-start;justify-content:center;gap:2rem;width:100%;margin:0 auto}.fullscreen-layout.with-chords{max-width:1600px}.fullscreen-layout.with-chords .fullscreen-card{flex:1.15 1 650px;max-width:720px}.fullscreen-layout.with-chords .youtube-container{max-width:720px;max-height:42vh}.fullscreen-chords-panel{flex:1 1 600px;max-width:640px;height:calc(100vh - 4rem);max-height:calc(100vh - 4rem);display:flex;flex-direction:column;overflow:hidden;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow);position:sticky;top:2rem}.fullscreen-chords-header{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:1rem;color:var(--text-secondary);margin-bottom:1.25rem;text-transform:uppercase;letter-spacing:.5px;font-weight:600;flex:0 0 auto}.lyrics-font-controls{display:flex;gap:.4rem}.lyrics-font-btn{display:flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;background:var(--bg-primary);border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);font-size:.75rem;font-weight:700;text-transform:none;letter-spacing:normal;cursor:pointer;transition:all .15s}.lyrics-font-btn:hover:not(:disabled){color:var(--text-primary);border-color:var(--accent)}.lyrics-font-btn:disabled{opacity:.4;cursor:default}.all-chords-btn{width:auto;gap:.35rem;padding:0 .65rem;font-size:.7rem}.fullscreen-chords-pre{flex:1 1 auto;min-height:0;overflow-y:auto;scroll-behavior:smooth;font-size:calc(1.1rem * var(--lyrics-scale, 1));line-height:1.55;padding:1.25rem 1.5rem}.chord-token{cursor:pointer;color:var(--accent);font-weight:700;border-radius:3px;transition:background .15s ease,color .15s ease}.chord-token:hover,.chord-token:focus-visible{background:var(--accent-glow);color:var(--text-primary);outline:none}.fullscreen-inline-chords{width:100%;display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius)}.fullscreen-inline-chords-header{font-size:.85rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-weight:600}.fullscreen-inline-chords .selected-chords-list{flex-wrap:nowrap;justify-content:flex-start;gap:.6rem;width:100%;max-height:none;overflow-x:auto;overflow-y:hidden;padding-bottom:.4rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch}.fullscreen-inline-chords .selected-chord-item{flex:0 0 auto;padding:.5rem .6rem}.fullscreen-inline-chords .selected-chord-label{font-size:.7rem}.fullscreen-inline-chords.focused{max-width:1400px;background:none;border:none;padding:0}.fullscreen-inline-chords.focused .fullscreen-inline-chords-header{font-size:1.1rem}.fullscreen-focus-toggle{position:fixed;top:1.25rem;right:1.25rem;z-index:30;display:flex;gap:.5rem}.focus-toggle-btn{display:flex;align-items:center;gap:.4rem;padding:.5rem .9rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);font-size:.85rem;font-weight:600;cursor:pointer;box-shadow:var(--shadow);transition:all .15s}.focus-toggle-btn:hover{color:var(--text-primary);border-color:var(--accent)}.focus-toggle-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-close-fullscreen{padding:.5rem .65rem;font-size:1rem;line-height:1}.btn-close-fullscreen:hover{color:#fff;background:var(--danger-hover);border-color:var(--danger-hover)}.fullscreen-layout.focus-diagrams{max-width:1400px;margin:0 auto}.fullscreen-layout.focus-diagrams .fullscreen-card{flex:1 1 auto;max-width:1400px}.fullscreen-layout.focus-diagrams .fullscreen-card .video-stage-header,.fullscreen-layout.focus-diagrams .fullscreen-card .youtube-container,.fullscreen-layout.focus-diagrams .fullscreen-chords-panel{display:none}.fullscreen-inline-chords.focused .selected-chords-list{flex-wrap:wrap;gap:1.25rem;max-height:none;overflow-x:visible;overflow-y:visible;justify-content:center;align-items:flex-start}.fullscreen-inline-chords.focused .selected-chord-item{flex:0 0 calc((100% - 3.75rem)/4);max-width:calc((100% - 3.75rem)/4);width:calc((100% - 3.75rem)/4);padding:1rem;align-items:stretch}.fullscreen-inline-chords.focused .chord-diagram{width:100%}.fullscreen-inline-chords.focused .chord-diagram-svg{width:100%;max-width:100%}.fullscreen-inline-chords.focused .chord-diagram-svg svg{width:100%!important;height:auto!important;max-width:100%}.fullscreen-inline-chords.focused .selected-chord-label{font-size:1.1rem;font-weight:600;color:var(--text-primary)}.fullscreen-layout.focus-lyrics{max-width:1692px;margin:0 auto}.fullscreen-layout.focus-lyrics .fullscreen-card{flex:0 0 260px;max-width:260px;padding:1.5rem 1rem}.fullscreen-layout.focus-lyrics .fullscreen-card .video-stage-header,.fullscreen-layout.focus-lyrics .fullscreen-card .youtube-container,.fullscreen-layout.focus-lyrics .fullscreen-card .fullscreen-inline-chords{display:none}.fullscreen-layout.focus-lyrics .fullscreen-chords-panel{flex:1 1 auto;max-width:1400px;overflow-y:auto}.fullscreen-layout.focus-lyrics .fullscreen-chords-pre{flex:0 0 auto;overflow:visible;max-height:none;font-size:calc(1rem * var(--lyrics-scale, 1));line-height:1.5;column-count:2;column-gap:3rem;column-rule:1px solid var(--border)}.chords-pre.fullscreen-chords-pre{max-height:none;font-size:calc(1.1rem * var(--lyrics-scale, 1));line-height:1.55}@media (max-width: 1100px){.fullscreen-layout.with-chords{flex-direction:column;align-items:center}.fullscreen-layout.with-chords .fullscreen-card,.fullscreen-layout.with-chords .youtube-container{max-width:600px}.fullscreen-layout.with-chords .fullscreen-card{flex:0 1 auto}.fullscreen-chords-panel{position:static;width:100%;max-width:800px;height:auto;max-height:70vh}}.fullscreen-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:3rem;width:100%;max-width:600px;position:relative;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.fullscreen-description{font-size:1.8rem;font-weight:700;color:var(--text-primary);text-align:center}.fullscreen-subdescription{font-size:1rem;color:var(--text-secondary);text-align:center;max-width:400px}.fullscreen-meta{display:flex;gap:1.5rem;font-size:1.1rem;color:var(--text-secondary)}.fullscreen-timer{font-size:8rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--success);letter-spacing:4px;line-height:1}.fullscreen-timer.paused{color:var(--warning);animation:blink 1.2s ease-in-out infinite}.fullscreen-paused-label{font-size:1.2rem;padding:.4rem 1rem;background:var(--warning);color:#1a1d27;border-radius:6px;font-weight:600;letter-spacing:2px}.fullscreen-progress{width:100%;max-width:500px;height:6px}.loop-progress-wrap{width:100%;max-width:500px;display:flex;flex-direction:column;align-items:center;gap:.5rem}.loop-progress-bar{width:100%;height:6px;background:var(--border);border-radius:3px;overflow:hidden}.loop-progress-fill{height:100%;background:linear-gradient(90deg,var(--type-color, var(--accent)),var(--type-color-strong, #a78bfa));border-radius:3px;transition:width 1s linear}.loop-progress-label{font-size:.8rem;color:var(--text-secondary);letter-spacing:1px;text-transform:uppercase}.fullscreen-actions{display:flex;gap:1rem;margin-top:1rem;padding-top:1.5rem;border-top:1px solid var(--border);width:100%;justify-content:center;flex-wrap:wrap}.song-transpose-controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;width:100%;justify-content:center}.song-transpose-key-info{font-size:.85rem;color:var(--text-secondary)}.song-transpose-volume-control{display:flex;align-items:center;gap:.5rem}.song-transpose-volume-label{font-size:.8rem;color:var(--text-secondary)}.song-transpose-error{width:100%;text-align:center;margin:0}.song-key-picker{display:flex;flex-direction:column;gap:1rem}.song-key-picker-row{display:flex;align-items:center;gap:.5rem}.song-key-picker-hint{font-size:.78rem;color:var(--text-muted);margin:.4rem 0 0}.song-key-picker-error{color:var(--danger)}.btn-lg{padding:1rem 2.5rem;font-size:1.1rem;border-radius:12px}@media (max-width: 768px){.fullscreen-timer{font-size:5rem}.fullscreen-description{font-size:1.3rem}}.countdown-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:#0f1117e6;z-index:50;cursor:pointer;border-radius:var(--radius)}.countdown-display{font-size:10rem;font-weight:800;color:var(--accent);line-height:1;animation:countPulse 1s ease-in-out infinite;text-shadow:0 0 40px var(--accent-glow)}.countdown-next-label{font-size:1.1rem;font-weight:600;color:var(--text-secondary)}.countdown-overlay-analyzing{cursor:default}.key-change-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:#0f1117e6;z-index:3100}.countdown-analyzing-spinner{width:2.75rem;height:2.75rem;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--type-color, var(--accent));animation:spin .85s linear infinite}.countdown-analyzing-text{font-size:1.1rem;font-weight:600;color:var(--text-secondary)}@keyframes countPulse{0%{transform:scale(.8);opacity:.5}50%{transform:scale(1.1);opacity:1}to{transform:scale(.8);opacity:.5}}.video-stage-header{display:flex;align-items:center;gap:.6rem;width:100%}.video-stage-title{flex:1;min-width:0;font-size:1rem;line-height:1.6;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-stage-subtitle{font-weight:400;color:var(--text-secondary)}.video-stage-loop-pill{flex-shrink:0;display:inline-flex;align-items:center;line-height:1;gap:.3rem;padding:.3rem .7rem;border-radius:999px;background:var(--type-tint, rgba(251, 146, 60, .18));border:1px solid var(--type-border, rgba(251, 146, 60, .6));color:var(--type-color-strong, var(--type-color));font-size:.7rem;font-weight:600;white-space:nowrap}.youtube-container{width:100%;max-width:1100px;max-height:58vh;aspect-ratio:16 / 9;border-radius:8px;overflow:hidden;position:relative;background:#000}.youtube-container iframe{width:100%;height:100%;border:none}.video-loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:radial-gradient(circle at center,#222635f2,#0a0b0ffa)}.video-loading-spinner{width:2.75rem;height:2.75rem;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--type-color, var(--accent));animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.video-loading-bar{width:min(220px,60%);height:4px;border-radius:2px;background:#ffffff1f;overflow:hidden}.video-loading-bar-fill{height:100%;width:40%;border-radius:2px;background:linear-gradient(90deg,transparent,var(--type-color, var(--accent)),transparent);animation:loadingSlide 1.1s ease-in-out infinite}@keyframes loadingSlide{0%{transform:translate(-120%)}to{transform:translate(280%)}}.video-loading-text{font-size:.85rem;color:var(--text-secondary);letter-spacing:.4px}.video-progress-row{width:100%;max-width:640px;display:flex;flex-direction:column;align-items:center;gap:.4rem}.video-progress-track{width:100%;display:flex;align-items:center;gap:.75rem}.video-progress-time{font-size:.85rem;color:var(--text-secondary);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:2.6rem}.video-progress-time:last-child{text-align:right}.video-progress-bar{margin-top:0;flex:1;height:5px}.fullscreen-overlay.video-mode .fullscreen-card{max-width:1150px;border-color:var(--type-border, rgba(251, 146, 60, .4));gap:1.25rem;padding:2rem}.fullscreen-overlay.video-mode .fullscreen-chords-panel{border-color:var(--type-border, rgba(251, 146, 60, .4))}.fullscreen-overlay.video-mode .fullscreen-actions{margin-top:.25rem;padding-top:0;border-top:none;gap:.75rem}.fullscreen-overlay.video-mode .btn-lg{padding:.7rem 1.6rem;font-size:.95rem;border-radius:999px;box-shadow:0 2px 12px #0000004d}.fullscreen-overlay.video-mode .btn-lg:hover{transform:translateY(-2px)}@media (max-width: 768px){.video-stage-title,.video-stage-subtitle{white-space:normal}}.type-picker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem}.type-btn{padding:.7rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);font-size:.9rem;cursor:pointer;transition:all .2s}.type-btn:hover{background:var(--bg-card-hover);color:var(--text-primary)}.type-btn.type-option{display:flex;align-items:flex-start;gap:.75rem;text-align:left;min-height:86px}.type-btn.active.type-option{background:var(--type-tint, rgba(108, 99, 255, .15));border-color:var(--type-color, var(--accent));color:var(--type-color, var(--accent))}.type-btn-icon{font-size:1.35rem;line-height:1}.type-btn-copy{display:flex;flex-direction:column;gap:.2rem}.type-btn-label{font-size:.95rem;font-weight:600}.type-btn-hint{font-size:.75rem;color:var(--text-muted);line-height:1.4}.type-btn.active.type-option .type-btn-hint{color:inherit;opacity:.8}.form-row{display:flex;gap:1rem}.form-row .form-group{flex:1}.chords-textarea{width:100%;min-height:140px;padding:.75rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:.85rem;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;line-height:1.5;white-space:pre;resize:vertical}.chords-textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.chords-display{margin-bottom:1.25rem}.chords-display h4{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--text-secondary);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.5px}.chords-key-badge{padding:.15rem .5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--accent);font-size:.75rem;text-transform:none;letter-spacing:0}.chords-pre{max-height:260px;overflow-y:auto;padding:.85rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.85rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:var(--text-primary)}.header-left{display:flex;align-items:center;gap:.65rem}.brand-mark{flex-shrink:0;filter:drop-shadow(0 1px 2px var(--accent-glow))}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}.app-header h1{font-size:1.5rem;font-weight:600;color:var(--text-primary);letter-spacing:.01em;white-space:nowrap}.header-right{display:flex;align-items:center;gap:.9rem}.nav-user-email{font-size:.85rem;color:var(--text-secondary)}.nav-logout{background:none;border:none;padding:0;font-size:.85rem;font-weight:500;color:var(--text-secondary);cursor:pointer;text-decoration:underline}.nav-logout:hover{color:var(--text-primary)}.app-nav{display:flex;gap:.25rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:.25rem}.nav-link{padding:.55rem 1.25rem;border-radius:8px;font-size:.9rem;font-weight:500;color:var(--text-secondary);text-decoration:none;transition:all .2s ease;cursor:pointer}.nav-link:hover{color:var(--text-primary);background:var(--bg-card)}.nav-link.active{background:var(--accent);color:#fff;box-shadow:0 2px 10px var(--accent-glow)}.stats-summary{margin-bottom:1.5rem;font-size:.9rem;color:var(--text-secondary)}.apps-page{animation:fadeIn .3s ease}.apps-page-title{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.apps-page-subtitle{color:var(--text-secondary);margin-bottom:2rem;font-size:.95rem}.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:1.25rem}.app-tile{display:flex;align-items:center;gap:1.25rem;height:220px;padding:1.75rem;background:var(--bg-card);border:1px solid var(--border);border-left:4px solid var(--app-color, var(--accent));border-radius:var(--radius);cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.app-tile:hover{background:var(--bg-card-hover);transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.app-tile-icon{font-size:2.75rem;flex-shrink:0;width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;background:#6c63ff1a;border-radius:var(--radius)}.app-tile-content{flex:1;min-width:0}.app-tile-title{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:.4rem}.app-tile-description{font-size:.88rem;color:var(--text-secondary);line-height:1.55;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}.app-tile-arrow{font-size:1.3rem;color:var(--text-muted);flex-shrink:0;transition:transform .2s ease}.app-tile:hover .app-tile-arrow{transform:translate(4px);color:var(--accent)}.app-tile-description-popup{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;padding:1.75rem;background:var(--bg-card-hover);border-radius:var(--radius);opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease;pointer-events:none;z-index:1}.app-tile:hover .app-tile-description-popup{opacity:1;visibility:visible}.app-tile-description-popup-text{font-size:.88rem;color:var(--text-primary);line-height:1.6;max-height:100%;overflow-y:auto}.fretboard-page{animation:fadeIn .3s ease;max-width:1100px;margin:0 auto}.bpm-sync-brand-header{margin-bottom:1.25rem}.bpm-sync-brand-header h1{font-size:1.2rem;font-weight:600;color:var(--text-primary);letter-spacing:.01em}.fretboard-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;margin-bottom:1rem}.fretboard-header .btn-back{justify-self:start}.fretboard-header h2{font-size:1.2rem;font-weight:600;text-align:center}.fretboard-header-right{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;justify-self:end}.sp-page-title{color:#fff}.sp-page-title-btn{background:none;border:none;padding:0;margin:0;font-size:1.2rem;font-weight:600;text-align:center;cursor:pointer}.fretboard-score{font-size:1.05rem;font-weight:700;color:var(--accent);background:#6c63ff1a;padding:.35rem .9rem;border-radius:8px;font-variant-numeric:tabular-nums}.btn-helper{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0}.btn-helper:hover{border-color:var(--accent);color:#fff;background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}.btn-back{padding:.45rem .9rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);font-size:.85rem;cursor:pointer;transition:all .2s}.btn-back:hover{background:var(--bg-card-hover);color:var(--text-primary)}.btn-share{display:flex;align-items:center;gap:.4rem}.btn-share:hover{border-color:var(--accent);color:var(--text-primary)}.string-select{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;flex-wrap:wrap}.string-select-label{font-size:.85rem;color:var(--text-secondary)}.string-select-options{display:flex;gap:.4rem}.string-select-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);font-size:.8rem;font-weight:700;cursor:pointer;transition:all .2s}.string-select-btn:hover{border-color:var(--accent);color:var(--text-primary)}.string-select-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 12px var(--accent-glow)}.fret-range-label{margin-left:.5rem}.fret-range-options{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}.fret-range-btn{padding:.4rem .8rem;border:none;background:var(--bg-card);color:var(--text-muted);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s}.fret-range-btn:not(:first-child){border-left:1px solid var(--border)}.fret-range-btn:hover{color:var(--text-primary)}.fret-range-btn.active{background:var(--accent);color:#fff}.fretboard-container{background:linear-gradient(180deg,var(--bg-card) 0%,var(--bg-primary) 100%);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem .9rem .6rem;position:relative;box-shadow:var(--shadow),inset 0 0 40px #00000059;margin-bottom:1rem;overflow-x:auto}.fbd-wrap{width:100%}.fbd-board{position:relative;width:100%;border-radius:6px}.fbd-marker-col{position:absolute;top:0;bottom:0;background:#6c63ff0d;pointer-events:none}.fbd-strings{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}.fbd-string-line{stroke:#b7bdd6;stroke-linecap:round}.fbd-string-line.fbd-string-muted{stroke:#7a7a85;opacity:.3}.fbd-fretline{position:absolute;top:0;bottom:0;width:2px;background:#9ba5c84d;pointer-events:none}.fbd-fretline.fbd-edge{width:1px;background:#9ba5c824}.fbd-fretline.fbd-nut{width:5px;background:#f0f0fae6}.fbd-inlay{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent-glow);transform:translate(-50%,-50%);pointer-events:none}.fbd-dot{position:absolute;width:30px;height:30px;border-radius:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #00000080,0 0 0 2px #ffffff40 inset;transition:background .25s ease,transform .2s ease;z-index:2}.fbd-dot-big{width:40px;height:40px;box-shadow:0 3px 10px #0000008c,0 0 0 2px #ffffff4d inset}.fbd-dot-root{box-shadow:0 2px 6px #00000080,0 0 0 3px #ffd60a8c}.fbd-dot-root .fbd-dot-label{color:#2b1d00;text-shadow:none}.fbd-dot-pending{animation:fbdPulse 1.1s ease-in-out infinite}.fbd-dot-dim{opacity:.35}.fbd-dot-label{display:flex;flex-direction:column;align-items:center;line-height:1;color:#fff;font-weight:700;font-size:.7rem;text-shadow:0 1px 2px rgba(0,0,0,.6)}.fbd-dot-big .fbd-dot-label{font-size:.85rem}.fbd-reference .fbd-dot-label{font-size:.62rem}@keyframes fbdPulse{0%,to{box-shadow:0 2px 6px #00000080,0 0 0 2px #ffffff40 inset,0 0 0 0 var(--accent-glow)}50%{box-shadow:0 2px 6px #00000080,0 0 0 2px #ffffff40 inset,0 0 0 8px #6c63ff00}}.fbd-fretnums{position:relative;height:1.1rem;margin-top:.35rem}.fbd-fretnum{position:absolute;transform:translate(-50%);font-size:.7rem;color:var(--text-muted);white-space:nowrap}.fbd-fretnum-marker{color:var(--text-secondary);font-weight:700}.fbd-fretnum-active{color:#fff;font-weight:800;font-size:.78rem;background:var(--accent, #6c63ff);padding:.05rem .4rem;border-radius:999px;box-shadow:0 0 0 2px #6c63ff59}.fretboard-controls{display:flex;flex-direction:column;align-items:center;gap:.85rem;padding:1rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1rem}.fretboard-timer{font-size:2.1rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:2px;transition:color .3s ease}.fretboard-timer.urgent{color:var(--danger);animation:blink .5s ease-in-out infinite}.fretboard-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.btn-know{padding:.65rem 1.6rem;background:var(--success);color:#fff;border:none;border-radius:var(--radius);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-know:hover{background:#059669;transform:translateY(-1px)}.btn-dont-know{padding:.65rem 1.6rem;background:var(--danger);color:#fff;border:none;border-radius:var(--radius);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-dont-know:hover{background:var(--danger-hover);transform:translateY(-1px)}.fretboard-reveal{display:flex;flex-direction:column;align-items:center;gap:.85rem;animation:fadeIn .3s ease}.reveal-note{display:flex;align-items:center;font-size:1.2rem;color:var(--text-primary)}.reveal-note strong{font-size:1.5rem;color:var(--accent);margin-left:.5rem}.btn-play-sound{width:32px;height:32px;margin-left:.6rem;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);font-size:.9rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.btn-play-sound:hover{border-color:var(--accent);background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}.btn-next{padding:.65rem 1.8rem;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-next:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 15px var(--accent-glow)}.fretboard-helper-modal{max-width:1400px;width:96%}.fbd-reference-scroll{overflow-x:auto;padding-bottom:.5rem}.helper-frets-toggle{display:flex;align-items:center;gap:.4rem;margin:.5rem 0 .75rem;font-size:.9rem;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none}.helper-frets-toggle input{cursor:pointer}@media (max-width: 768px){.header-left{flex-direction:row;align-items:center;gap:.65rem}.app-header{flex-direction:column;gap:1rem;align-items:flex-start}.app-footer{flex-direction:column;gap:.35rem;align-items:flex-start}.fretboard-header{display:flex;flex-direction:column;gap:.75rem;text-align:center}.fretboard-header .btn-back,.fretboard-header-right{justify-self:unset}.fretboard-container{padding:1rem .75rem}.fretboard-timer{font-size:2.5rem}.apps-grid{grid-template-columns:1fr;gap:1.5rem}.app-tile{flex-direction:column;height:auto;padding:1.5rem;gap:.9rem}.app-tile-icon{width:3.25rem;height:3.25rem;font-size:2rem}.app-tile-arrow{position:absolute;top:1.5rem;right:1.5rem}.app-tile-description{-webkit-line-clamp:4}}.chord-practice-page{animation:fadeIn .3s ease;max-width:1200px;margin:0 auto}.chord-practice-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}.chord-practice-header h2{font-size:1.5rem;font-weight:700;flex:1}.chord-practice-subtitle{color:var(--text-secondary);font-size:.9rem;width:100%;margin-top:-.5rem}.chord-practice-setup{display:flex;flex-direction:column;gap:2rem}.setup-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}.setup-section h3{font-size:1.1rem;font-weight:600;margin-bottom:.5rem;color:var(--text-primary)}.setup-hint{font-size:.85rem;color:var(--text-muted);margin-bottom:1rem}.chord-selection{display:flex;flex-direction:column;gap:1.5rem}.chord-group h4{font-size:.9rem;font-weight:600;color:var(--text-secondary);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.5px}.chord-grid{display:flex;flex-wrap:wrap;gap:.5rem}.chord-select-btn{padding:.5rem .85rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;min-width:3rem;text-align:center}.chord-select-btn:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--accent)}.chord-select-btn.selected{background:#10b98126;border-color:var(--success);color:var(--success);font-weight:600}.chord-select-btn.has-suggestions{border-color:var(--accent);background:#6c63ff1a}.voicing-count{display:inline-flex;align-items:center;justify-content:center;margin-left:.4rem;padding:.15rem .4rem;background:var(--accent);color:#fff;border-radius:4px;font-size:.7rem;font-weight:700;line-height:1}.selected-chords-preview{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}.selected-chords-preview h4{font-size:.9rem;font-weight:600;color:var(--text-secondary);margin-bottom:1rem;text-transform:uppercase;letter-spacing:.5px}.selected-chords-list{display:flex;flex-wrap:wrap;gap:1rem}.selected-chord-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1rem 1.1rem .9rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;transition:all .2s}.selected-chord-item:hover{border-color:var(--text-muted)}.selected-chord-item.clickable{cursor:pointer}.selected-chord-item.clickable:hover{border-color:var(--accent);background:var(--bg-card-hover);box-shadow:0 0 0 3px var(--accent-glow)}.remove-chord-btn{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--danger);color:#fff;border:2px solid var(--bg-card);font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0;line-height:1;opacity:.85}.remove-chord-btn:hover{background:var(--danger-hover);opacity:1;transform:scale(1.1)}.btn-start-practice{padding:1rem 2rem;background:var(--success);color:#fff;border:none;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 15px #10b9814d}.btn-start-practice:hover:not(:disabled){background:#059669;transform:translateY(-2px);box-shadow:0 6px 20px #10b98166}.btn-start-practice:disabled{opacity:.5;cursor:not-allowed}.chord-practice-active{display:flex;flex-direction:column;gap:2rem}.practice-main{display:flex;flex-direction:column;align-items:center;gap:2rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}.current-chord-display{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.chord-counter{font-size:.9rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;font-weight:500}.chord-diagram{display:flex;flex-direction:column;align-items:center;gap:.25rem}.chord-diagram-missing{padding:1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;min-width:60px;min-height:60px;display:flex;align-items:center;justify-content:center}.chord-diagram-name{font-size:.75rem;font-weight:600;color:var(--text-muted);text-align:center;white-space:nowrap}.chord-diagram-missing-label{font-size:.7rem;color:var(--danger)}.chord-diagram-svg{width:100%;display:flex;align-items:center;justify-content:center}.chord-diagram-sm .chord-diagram-svg{max-width:110px}.chord-diagram-md .chord-diagram-svg{max-width:170px}.chord-diagram-lg .chord-diagram-svg{max-width:280px}.chord-diagram-lg .chord-diagram-name{font-size:1.15rem}.chord-diagram-xl .chord-diagram-svg{max-width:420px}.chord-diagram-xl .chord-diagram-name{font-size:1.5rem}.chord-shape-nut{stroke:var(--text-primary);stroke-width:3.5;stroke-linecap:round}.chord-shape-fretline,.chord-shape-string{stroke:var(--border);stroke-width:1}.chord-shape-basefret{font-size:8px;font-weight:700;fill:var(--accent)}.chord-shape-open{fill:none;stroke:var(--text-secondary);stroke-width:1.4}.chord-shape-muted{font-size:8px;font-weight:600;fill:var(--text-muted);text-anchor:middle}.chord-shape-dot,.chord-shape-barre{fill:var(--accent)}.chord-shape-finger{font-size:7.5px;font-weight:700;fill:#fff;text-anchor:middle}.chord-shape-stringname{font-size:6.5px;font-weight:600;fill:var(--text-secondary)}.chord-shape-stringname.is-muted{fill:var(--text-muted);opacity:.45}.current-chord-diagram{padding:2rem;background:var(--bg-secondary);border-radius:var(--radius);border:2px solid var(--success);box-shadow:0 0 30px #10b98133}.current-chord-name{font-size:2rem;font-weight:700;color:var(--success)}.practice-timer{font-size:4rem;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:2px}.practice-controls{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.btn-nav{padding:.75rem 1.5rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-nav:hover:not(:disabled){background:var(--bg-card-hover);border-color:var(--accent)}.btn-nav:disabled{opacity:.4;cursor:not-allowed}.btn-stop-practice{padding:.75rem 1.5rem;background:var(--danger);color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-stop-practice:hover{background:var(--danger-hover)}.btn-complete-practice{padding:.75rem 1.5rem;background:#10b981;color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-complete-practice:hover{background:#059669}.loop-badge{display:inline-block;margin-left:.5rem;font-size:.75rem;background:#10b98126;color:#10b981;padding:.15rem .5rem;border-radius:4px;vertical-align:middle}.checkbox-label{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--text-secondary);cursor:pointer}.checkbox-label input[type=checkbox]{width:1rem;height:1rem;accent-color:#10b981}.triad-picker{display:flex;flex-direction:column;gap:.75rem}.triad-picker-group{display:flex;flex-direction:column;gap:.35rem}.triad-picker-label{font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}.triad-picker-grid{display:flex;flex-wrap:wrap;gap:.3rem}.triad-btn{padding:.3rem .6rem;font-size:.8rem;font-weight:500;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;color:var(--text-secondary);cursor:pointer;transition:all .15s}.triad-btn:hover{border-color:#10b981;color:#10b981}.triad-btn.selected{background:#10b98126;border-color:#10b981;color:#10b981;font-weight:600}.triad-picker-selected{font-size:.8rem;color:var(--text-muted);margin-top:.25rem}@media (max-width: 768px){.chord-practice-header{flex-direction:column;align-items:flex-start}.practice-timer{font-size:3rem}.current-chord-name{font-size:1.5rem}.practice-controls{width:100%}.btn-nav,.btn-stop-practice{flex:1}}.position-selector-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease;padding:1rem}.enlarged-chord-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2500;animation:fadeIn .2s ease;padding:1rem}.enlarged-chord-modal{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:3rem;box-shadow:var(--shadow);animation:slideUp .3s ease}.enlarged-chord-modal .btn-close-modal{position:absolute;top:.75rem;right:.75rem}.enlarged-chord-label{font-size:1.1rem;color:var(--text-secondary)}.chord-hover-tooltip{position:fixed;transform:translate(-50%,calc(-100% - 10px));z-index:3000;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:.5rem .75rem;box-shadow:var(--shadow);pointer-events:none;animation:fadeIn .1s ease}.all-chords-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2600;animation:fadeIn .2s ease;padding:1.5rem}.all-chords-modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;width:100%;max-width:1200px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow);animation:slideUp .3s ease}.all-chords-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.all-chords-modal-header h3{font-size:1.3rem;font-weight:600;color:var(--text-primary)}.all-chords-grid{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}.all-chords-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:border-color .15s ease}.all-chords-item:hover{border-color:var(--accent)}.position-selector-modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;width:100%;max-width:900px;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow);animation:slideUp .3s ease}.position-selector-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.position-selector-header h3{font-size:1.3rem;font-weight:600;color:var(--text-primary)}.btn-close-modal{background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;padding:.25rem;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s;line-height:1}.btn-close-modal:hover{color:var(--text-primary);background:var(--bg-card)}.position-selector-hint{font-size:.85rem;color:var(--text-secondary);margin-bottom:1.5rem}.position-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.5rem}.position-item{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1.5rem;background:var(--bg-card);border:2px solid var(--border);border-radius:calc(var(--radius) - 4px);transition:all .2s ease}.position-item:hover{border-color:var(--text-muted);transform:translateY(-2px)}.position-item.selected{border-color:var(--accent);background:#6c63ff1a;box-shadow:0 0 15px var(--accent-glow)}.btn-select-position{width:100%;padding:.5rem .75rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-select-position:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--accent)}.btn-select-position.active{background:var(--accent);border-color:var(--accent);color:#fff}.btn-select-position.active:hover{background:var(--accent-hover)}.chord-item-controls{display:flex;gap:.25rem;position:absolute;bottom:.25rem;right:.25rem}.btn-select-positions{padding:.3rem .5rem;background:var(--accent);border:none;border-radius:4px;color:#fff;font-size:.7rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.btn-select-positions:hover{background:var(--accent-hover);transform:scale(1.05)}.position-label{font-size:.75rem;color:var(--text-muted);font-weight:500;text-align:center}.inversion-label{font-size:.75em;color:var(--text-muted);font-weight:400}.selected-chord-label{font-size:.65rem;color:var(--text-muted);text-align:center;white-space:nowrap}.no-positions{color:var(--text-muted);font-size:.9rem;text-align:center;padding:2rem}.links-input-group{display:flex;flex-direction:column;gap:.5rem}.link-input-row{display:flex;gap:.5rem;align-items:center}.link-label-input{flex:0 0 140px}.link-url-input{flex:1}.link-remove-btn{padding:.3rem .5rem;background:var(--danger);border:none;border-radius:4px;color:#fff;font-size:.75rem;cursor:pointer;transition:all .2s;line-height:1;flex-shrink:0}.link-remove-btn:hover{background:var(--danger-hover);transform:scale(1.05)}.link-add-btn{padding:.4rem .8rem;background:var(--bg-card);border:1px dashed var(--border);border-radius:6px;color:var(--text-secondary);font-size:.85rem;cursor:pointer;transition:all .2s;align-self:flex-start}.link-add-btn:hover{background:var(--bg-card-hover);border-color:var(--accent);color:var(--accent)}.links-display{margin-bottom:1rem}.links-display h4{margin-bottom:.5rem}.links-list{display:flex;flex-direction:column;gap:.4rem}.link-item{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--accent);text-decoration:none;font-size:.85rem;transition:all .2s}.link-item:hover{background:var(--bg-card-hover);border-color:var(--accent);color:var(--accent-hover)}.link-icon{font-size:1rem;flex-shrink:0}.link-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fullscreen-links{width:100%;text-align:center}.fullscreen-links-label{font-size:.85rem;font-weight:600;color:var(--text-secondary);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.fullscreen-links-list{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.fullscreen-link-item{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--type-color);border-radius:8px;color:var(--type-color-strong);text-decoration:none;font-size:.85rem;font-weight:500;transition:all .2s}.fullscreen-link-item:hover{background:var(--type-surface);transform:translateY(-1px);box-shadow:0 4px 12px #0000004d}.key-transpose-page{animation:fadeIn .3s ease;max-width:700px;margin:0 auto}.key-transpose-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2rem}.key-transpose-header h2{font-size:1.3rem;font-weight:600;white-space:nowrap}.key-transpose-header .btn-back{flex-shrink:0;white-space:nowrap}.btn-key-helper{flex-shrink:0;white-space:nowrap;padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--accent);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-key-helper:hover{background:var(--bg-card-hover);border-color:var(--accent)}.key-transpose-setup{display:flex;flex-direction:column;gap:1.75rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem;box-shadow:var(--shadow)}.setup-field-row{display:flex;gap:1.75rem}.setup-field-row .setup-field{flex:1}.setup-field{display:flex;flex-direction:column;gap:.6rem}.setup-field label{font-size:.8rem;color:var(--text-secondary);font-weight:700;text-transform:uppercase;letter-spacing:.5px}.setup-field input[type=number]{width:120px;padding:.55rem .8rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:.95rem;transition:border-color .2s,box-shadow .2s}.setup-field input[type=number]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.mode-select-options{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.mode-select-btn{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;text-align:left;padding:1rem 1.1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:all .2s}.mode-select-btn:hover{border-color:var(--accent);background:var(--bg-card-hover)}.mode-select-btn.active{border-color:var(--accent);background:linear-gradient(135deg,#6c63ff29,#a78bfa0f);box-shadow:0 0 0 1px var(--accent),0 8px 20px var(--accent-glow)}.mode-select-title{font-size:.95rem;font-weight:700;color:var(--text-primary)}.mode-select-desc{font-size:.78rem;color:var(--text-secondary);line-height:1.4}.key-select-options{display:flex;flex-wrap:wrap;gap:.5rem}.key-select-btn{padding:.5rem .9rem;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);font-size:.85rem;font-weight:700;cursor:pointer;transition:all .2s}.key-select-btn:hover{border-color:var(--accent);color:var(--text-primary)}.key-select-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 12px var(--accent-glow)}.btn-start-practice{align-self:center;margin-top:.5rem}.key-transpose-play{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.key-transpose-progress{font-size:.9rem;font-weight:600;color:var(--text-secondary);font-variant-numeric:tabular-nums;letter-spacing:.3px}.key-transpose-card{width:100%;display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:3rem 1.5rem;background:linear-gradient(160deg,#1e2035,#181a2b);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow),inset 0 1px #ffffff08}.key-transpose-key-wrap{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.6rem 1.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:999px;box-shadow:inset 0 1px #ffffff0a}.key-transpose-key-label{font-size:.75rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--text-secondary)}.key-transpose-key{font-size:3rem;font-weight:800;line-height:1;letter-spacing:1px;background:linear-gradient(135deg,var(--accent),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.key-transpose-number{font-size:5.5rem;font-weight:800;color:var(--accent);line-height:1}.key-transpose-answer{font-size:5.5rem;font-weight:800;color:var(--success);line-height:1;animation:fadeIn .2s ease}.progression-row{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap}.progression-slot{display:flex;align-items:center;justify-content:center;min-width:3.4rem;padding:.5rem .4rem;font-size:2.4rem;font-weight:800;color:var(--accent);line-height:1;border-radius:10px;transition:all .2s ease}.progression-slot.revealed{color:var(--success);font-size:1.9rem;animation:fadeIn .2s ease}.progression-slot.playing{background:#10b98124;box-shadow:0 0 0 2px var(--success),0 0 18px #10b98159;transform:translateY(-3px)}.key-transpose-timer{font-size:2rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:2px;transition:color .3s ease}.key-transpose-timer.urgent{color:var(--danger);animation:blink .5s ease-in-out infinite}.key-transpose-timer.reveal{color:var(--success);font-size:1.3rem;letter-spacing:1px}.key-transpose-timer-bar{width:100%;max-width:320px;height:6px;background:var(--bg-card);border-radius:999px;overflow:hidden;margin-top:-.75rem}.key-transpose-timer-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),#a78bfa);border-radius:999px;transition:width 1s linear}.key-transpose-timer-bar-fill.urgent{background:var(--danger)}.key-transpose-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.key-transpose-finished{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:3rem 1.5rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);animation:fadeIn .3s ease}.finished-title{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.finished-summary{font-size:.95rem;color:var(--text-secondary)}.key-ref-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:100;animation:fadeIn .2s ease}.key-ref-modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);max-width:640px;width:100%;max-height:80vh;display:flex;flex-direction:column}.key-ref-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border)}.key-ref-header h3{font-size:1.1rem;font-weight:600}.key-ref-close{background:none;border:none;color:var(--text-secondary);font-size:1.5rem;line-height:1;cursor:pointer;padding:.25rem .5rem}.key-ref-close:hover{color:var(--text-primary)}.key-ref-accidentals-toggle{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem 0;font-size:.85rem;color:var(--text-secondary);cursor:pointer}.key-ref-accidentals-toggle input{cursor:pointer}.key-ref-table-wrap{overflow:auto;padding:1rem 1.25rem 1.25rem}.key-ref-table{width:100%;border-collapse:collapse;font-size:.9rem}.key-ref-table th,.key-ref-table td{padding:.5rem .6rem;text-align:center;border-bottom:1px solid var(--border)}.key-ref-table th{color:var(--text-secondary);font-weight:600}.key-ref-key{font-weight:700;color:var(--text-primary);text-align:left!important}.key-ref-table tr.row-color-0{background:#6c63ff1a}.key-ref-table tr.row-color-1{background:#10b9811a}.key-ref-table tr.row-color-2{background:#f59e0b1a}.key-ref-table tr.row-color-3{background:#ef44441a}.key-ref-table tr.row-color-4{background:#38bdf81a}.key-ref-table tr.row-color-5{background:#ec48991a}.key-ref-table tr.active-row{outline:2px solid var(--accent);outline-offset:-1px}.key-ref-table td.quality-maj{color:var(--text-primary)}.key-ref-table td.quality-min{color:var(--text-secondary)}.key-ref-table td.quality-dim{color:var(--text-muted);font-style:italic}@media (max-width: 768px){.key-transpose-header{flex-direction:column;gap:.75rem;text-align:center}.key-transpose-number,.key-transpose-answer{font-size:4.5rem}.key-transpose-card{padding:2rem 1rem}.mode-select-options{grid-template-columns:1fr}.progression-slot{font-size:1.8rem;min-width:2.6rem}.progression-slot.revealed{font-size:1.4rem}}.pv-controls{display:flex;flex-wrap:wrap;gap:1.25rem;margin-bottom:1rem}.pv-control-group{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}.pv-positions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.75rem}.pv-position-options{display:flex;gap:.5rem;flex-wrap:wrap}.pv-position-btn{display:flex;align-items:center;gap:.5rem;padding:.45rem .8rem .45rem .6rem;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s}.pv-position-btn:hover{color:var(--text-primary);border-color:var(--pos-color)}.pv-position-btn.active{background:color-mix(in srgb,var(--pos-color) 18%,var(--bg-card));border-color:var(--pos-color);color:var(--text-primary);box-shadow:0 0 10px color-mix(in srgb,var(--pos-color) 45%,transparent)}.pv-position-swatch{width:10px;height:10px;border-radius:50%;background:var(--pos-color);flex-shrink:0;box-shadow:0 0 0 2px #ffffff26}.pv-position-btn:not(.active) .pv-position-swatch{opacity:.4}.pv-position-actions{display:flex;gap:.4rem;margin-left:.25rem}.pv-position-actions .btn-back{padding:.35rem .7rem;font-size:.78rem}.pv-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;padding:.85rem 1rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius)}.pv-legend-item{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--text-secondary);transition:opacity .2s}.pv-legend-item-inactive{opacity:.4}.pv-legend-swatch{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px #ffffff26;flex-shrink:0}.pv-legend-degree{color:var(--text-muted);font-size:.76rem}@media (max-width: 768px){.pv-controls{flex-direction:column;align-items:flex-start;gap:.75rem}}.chords-library{display:grid;grid-template-columns:200px 1fr 280px;gap:1.5rem;align-items:start;animation:fadeIn .3s ease}.chl-section-nav{display:flex;flex-direction:column;gap:.6rem;position:sticky;top:1rem}.chl-back-btn{text-align:left}.chl-section-nav-btn{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);font-size:.9rem;font-weight:500;cursor:pointer;text-align:left;transition:all .2s ease}.chl-section-nav-btn:hover{background:var(--bg-card-hover);color:var(--text-primary)}.chl-section-nav-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 10px var(--accent-glow)}.chl-section-nav-cta{border-style:dashed}.chords-library-main{min-width:0}.chords-library-error{color:var(--danger);background:#ef44441a;border:1px solid var(--danger);border-radius:8px;padding:.75rem 1rem;margin-bottom:1rem;font-size:.9rem}.chords-library-loading{color:var(--text-secondary)}.chord-filter-panel{display:flex;flex-direction:column;gap:1.1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.25rem;margin-bottom:1.25rem}.chord-filter-section{display:flex;flex-direction:column;gap:.6rem}.chord-filter-label{font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.7px}.category-chip-row,.root-filter-row{display:flex;flex-wrap:wrap;gap:.5rem}.category-chip,.root-chip{padding:.4rem .85rem;background:var(--bg-card);border:1px solid var(--border);border-radius:999px;color:var(--text-secondary);font-size:.82rem;font-weight:500;cursor:pointer;transition:all .15s ease}.category-chip:hover,.root-chip:hover{border-color:var(--text-muted);color:var(--text-primary)}.category-chip.active,.root-chip.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 10px var(--accent-glow)}.root-chip{min-width:2.6rem;text-align:center;font-weight:600}.chip-all{align-self:flex-start;padding:.4rem .85rem;background:transparent;border:1px dashed var(--text-muted);border-radius:999px;color:var(--text-secondary);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s ease}.chip-all:hover{color:var(--text-primary);border-color:var(--text-primary)}.chip-all.active{background:var(--accent);border-style:solid;border-color:var(--accent);color:#fff;box-shadow:0 2px 10px var(--accent-glow)}.chord-browse-empty{padding:2.5rem 1.5rem;text-align:center;color:var(--text-secondary);background:var(--bg-card);border:1px dashed var(--border);border-radius:var(--radius)}.chord-browse-empty p{margin-bottom:1rem}.add-chord-btn{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;border:2px solid var(--bg-card);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0;opacity:.9}.add-chord-btn:hover{background:var(--accent-hover);opacity:1;transform:scale(1.1)}.custom-chord-item{padding-bottom:.6rem}.custom-chord-actions{display:flex;gap:.4rem}.custom-chord-actions button{width:26px;height:26px;border-radius:6px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.custom-chord-actions button:hover{color:var(--text-primary);border-color:var(--accent)}.my-custom-chords-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}.my-custom-chords-header h3{font-size:1.2rem;font-weight:600}.collection-reorder-actions{display:flex;gap:.4rem}.collection-reorder-actions button{width:22px;height:22px;border-radius:4px;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;font-size:.75rem;display:flex;align-items:center;justify-content:center}.collection-reorder-actions button:hover:not(:disabled){color:var(--text-primary);border-color:var(--accent)}.collection-reorder-actions button:disabled{opacity:.3;cursor:default}.collection-view-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;gap:1rem}.collection-view-header h3{font-size:1.3rem;font-weight:600;cursor:text}.collection-rename-input{font-size:1.3rem;font-weight:600;background:var(--bg-card);border:1px solid var(--accent);border-radius:6px;padding:.2rem .5rem;color:var(--text-primary);flex:1}.collection-delete-btn{display:flex;align-items:center;gap:.4rem;padding:.5rem .85rem;background:transparent;border:1px solid var(--danger);border-radius:8px;color:var(--danger);font-size:.82rem;cursor:pointer;transition:all .2s;flex-shrink:0}.collection-delete-btn:hover{background:var(--danger);color:#fff}.collections-sidebar{position:sticky;top:1rem}.collections-sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.collections-sidebar-header h3{display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:600}.collections-add-btn{width:26px;height:26px;border-radius:6px;background:var(--accent);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.collections-add-btn:hover{background:var(--accent-hover)}.collection-create-row{margin-bottom:.75rem}.collection-create-row input,.add-to-collection-create-row input{width:100%;padding:.5rem .75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:.85rem}.collections-empty-hint{color:var(--text-muted);font-size:.85rem}.collection-list{display:flex;flex-direction:column;gap:.4rem}.collection-list-item{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s ease}.collection-list-item:hover{background:var(--bg-card-hover)}.collection-list-item.active{background:var(--accent);border-color:var(--accent);color:#fff}.collection-list-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem;font-weight:500}.collection-list-item-count{font-size:.75rem;color:var(--text-muted);background:var(--bg-secondary);border-radius:999px;padding:.1rem .5rem;flex-shrink:0}.collection-list-item.active .collection-list-item-count{background:#fff3;color:#fff}.collection-list-item-delete{width:20px;height:20px;border-radius:4px;background:none;border:none;color:inherit;opacity:.6;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.collection-list-item-delete:hover{opacity:1;color:var(--danger)}.add-to-collection-list{display:flex;flex-direction:column;gap:.5rem;max-height:240px;overflow-y:auto;margin-bottom:1rem}.add-to-collection-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:.88rem}.add-to-collection-row span:first-of-type{flex:1}.add-to-collection-create-row{display:flex;gap:.5rem;margin-bottom:.5rem}.shape-editor-modal{max-width:640px}.shape-editor-fields{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.25rem}.shape-editor-name-input{flex:1;min-width:180px;padding:.6rem .85rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:.9rem}.shape-editor-root-select{padding:.6rem .75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:.9rem}.shape-editor-basefret{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--text-secondary)}.shape-editor-basefret input{width:3.5rem;padding:.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--text-primary)}.shape-editor-body{display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:wrap}.shape-editor-grid{display:flex;flex-direction:column;gap:2px}.shape-editor-row{display:grid;grid-template-columns:24px repeat(6,32px);gap:2px;align-items:center}.shape-editor-row-label{width:24px;height:24px;border-radius:4px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.shape-editor-row-label.active{background:var(--accent);border-color:var(--accent);color:#fff}.shape-editor-toggles{display:flex;flex-direction:column;gap:2px;align-items:center}.shape-editor-toggle-open,.shape-editor-toggle-mute{width:26px;height:18px;border-radius:4px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-muted);font-size:.7rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.shape-editor-toggle-open.active,.shape-editor-toggle-mute.active{background:var(--accent);border-color:var(--accent);color:#fff}.shape-editor-cell{width:32px;height:32px;border-radius:6px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);font-size:.8rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.shape-editor-cell:hover{border-color:var(--text-muted)}.shape-editor-cell.played{background:var(--accent);border-color:var(--accent);color:#fff}.shape-editor-preview{min-width:140px}.shape-editor-error{color:var(--danger);font-size:.85rem;margin-top:.75rem}.chords-library .selected-chords-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,210px));gap:1.75rem 1.25rem;padding:1rem .25rem;justify-items:center}.chords-library .selected-chord-item{transition:transform .2s cubic-bezier(.2,0,.2,1),box-shadow .2s ease,border-color .2s ease;transform-origin:center}.chords-library .selected-chord-item:hover{transform:scale(2.1);border-color:var(--accent);background:var(--bg-card-hover);box-shadow:0 20px 50px #0009;z-index:5}.chords-library .selected-chord-item:hover .chord-shape-fretline,.chords-library .selected-chord-item:hover .chord-shape-string{stroke:var(--text-muted)}.chord-category-badge{font-size:.62rem;color:var(--accent);background:#6c63ff1f;border-radius:999px;padding:.1rem .55rem;text-transform:uppercase;letter-spacing:.4px}.shape-editor-category-select{padding:.6rem .75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:.9rem}.shape-editor-hint{font-size:.78rem;color:var(--text-muted);margin:-.75rem 0 1rem}@media (max-width: 900px){.chords-library{grid-template-columns:1fr}.chl-section-nav{flex-direction:row;flex-wrap:wrap;position:static}.collections-sidebar{position:static}}.bpm-sync-page{padding:2.5rem 1.5rem 3rem}@media (max-width: 768px){.bpm-sync-page{padding:1.5rem 1rem 2rem}}.bpm-sync-form{display:flex;gap:.75rem;margin-bottom:1rem}.bpm-sync-url-input{flex:1;min-width:0;padding:.65rem .9rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:.9rem}.bpm-sync-status{color:var(--text-secondary);font-size:.85rem;margin-bottom:1rem}.bpm-sync-error{color:var(--danger);font-size:.85rem;margin-bottom:1rem}.bpm-sync-analyzing{display:flex;flex-direction:column;align-items:center;gap:.85rem;margin-bottom:1.25rem;padding:1.5rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:10px}.bpm-sync-beat-grid{display:flex;align-items:flex-end;gap:5px;height:34px}.bpm-sync-beat-grid span{width:5px;border-radius:3px;background:var(--accent);animation:bpm-beat-pulse 1.1s ease-in-out infinite}.bpm-sync-beat-grid span:nth-child(1){animation-delay:0s}.bpm-sync-beat-grid span:nth-child(2){animation-delay:.11s}.bpm-sync-beat-grid span:nth-child(3){animation-delay:.22s}.bpm-sync-beat-grid span:nth-child(4){animation-delay:.33s}.bpm-sync-beat-grid span:nth-child(5){animation-delay:.44s}.bpm-sync-beat-grid span:nth-child(6){animation-delay:.33s}.bpm-sync-beat-grid span:nth-child(7){animation-delay:.22s}.bpm-sync-beat-grid span:nth-child(8){animation-delay:.11s}@keyframes bpm-beat-pulse{0%,to{height:8px;opacity:.45}50%{height:34px;opacity:1}}.bpm-sync-analyzing .bpm-sync-status{margin-bottom:0;text-align:center}.bpm-sync-empty{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;padding:4rem 2rem;background:var(--bg-card);border:1px dashed var(--border);border-radius:10px}.bpm-sync-empty p{font-size:1.05rem;color:var(--text-secondary);margin:0}.bpm-sync-empty span{font-size:.85rem;color:var(--text-muted);max-width:380px}.bpm-sync-beat-grid-idle span{animation:none;opacity:.35}.bpm-sync-beat-grid-idle span:nth-child(1){height:14px}.bpm-sync-beat-grid-idle span:nth-child(2){height:24px}.bpm-sync-beat-grid-idle span:nth-child(3){height:10px}.bpm-sync-beat-grid-idle span:nth-child(4){height:32px}.bpm-sync-beat-grid-idle span:nth-child(5){height:18px}.bpm-sync-beat-grid-idle span:nth-child(6){height:28px}.bpm-sync-beat-grid-idle span:nth-child(7){height:12px}.bpm-sync-beat-grid-idle span:nth-child(8){height:20px}.sp-howto{margin:2rem auto 0}.sp-howto-title{text-align:center;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0 0 1.1rem}.sp-howto-steps{display:flex;align-items:stretch;gap:.5rem}.sp-howto-step{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;padding:1.5rem 1rem 1.25rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}.sp-howto-num{position:absolute;top:-10px;left:-10px;width:22px;height:22px;border-radius:999px;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center}.sp-howto-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;background:var(--accent-glow);color:var(--accent);margin-bottom:.15rem}.sp-howto-step h4{margin:0;font-size:.9rem;color:var(--text-primary)}.sp-howto-step p{margin:0;font-size:.78rem;line-height:1.4;color:var(--text-secondary)}.sp-howto-arrow{flex-shrink:0;align-self:center;color:var(--text-muted);margin-top:-1rem}@media (max-width: 640px){.sp-howto-steps{flex-direction:column}.sp-howto-arrow{align-self:center;margin-top:0;transform:rotate(90deg)}}.bpm-sync-video{margin:0 auto 1.5rem}.bpm-sync-controls{display:flex;flex-direction:column;gap:1rem;max-width:560px;margin:0 auto}.bpm-sync-panel{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.bpm-sync-correction-row{display:flex;align-items:center;gap:1rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--border)}.bpm-sync-correction-row:last-child{border-bottom:none}.bpm-sync-correction-row label{font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);min-width:84px;flex-shrink:0}.bpm-sync-correction-row input[type=range]{flex:1}.bpm-sync-rate-group,.bpm-sync-volume-group{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.bpm-sync-rate-group{background:var(--bg-secondary);border-radius:999px;padding:.25rem;gap:.25rem;width:fit-content}.bpm-sync-rate-group .btn-helper{width:30px;height:30px;background:transparent;border-color:transparent}.bpm-sync-rate-value{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text-primary);min-width:44px;text-align:center}.bpm-sync-key-group{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;flex:1}.bpm-sync-key-arrow{color:var(--text-muted);font-size:.9rem}.bpm-sync-key-value{padding:.45rem .9rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:999px;color:var(--text-primary);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.bpm-sync-key-value:hover{border-color:var(--accent);color:var(--accent)}.bpm-sync-mute-btn.active{border-color:var(--danger);color:var(--danger);background:var(--bg-secondary)}.bpm-sync-mute-btn.active:hover{background:var(--danger);color:#fff}.bpm-sync-key-select{padding:.4rem .6rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:.85rem}@media (max-width: 480px){.bpm-sync-correction-row{flex-wrap:wrap;gap:.6rem}.bpm-sync-correction-row label{min-width:100%}.bpm-sync-key-group,.bpm-sync-rate-group,.bpm-sync-volume-group{width:100%}}.btn-helper-text{width:auto;height:34px;border-radius:8px;padding:0 .75rem;font-size:.85rem;font-weight:500}.bpm-sync-history-title{font-size:.95rem;color:var(--text-secondary);margin:0 0 .75rem}.bpm-sync-history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}.bpm-sync-history-item{position:relative;display:flex;flex-direction:column;width:100%;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:0;overflow:hidden;cursor:pointer;text-align:left;transition:border-color .2s,transform .2s}.bpm-sync-history-item:hover{border-color:var(--accent);transform:translateY(-2px)}.bpm-sync-history-thumb{width:100%;aspect-ratio:16 / 9;height:auto;object-fit:cover;background:var(--bg-secondary)}.bpm-sync-history-info{display:flex;flex-direction:column;gap:.3rem;min-width:0;padding:.85rem 1rem 1rem}.bpm-sync-history-name{color:var(--text-primary);font-size:.95rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bpm-sync-history-meta{color:var(--text-muted);font-size:.8rem}.bpm-sync-history-delete{position:absolute;top:.5rem;right:.5rem;z-index:1;flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#0f1117b3;color:var(--text-secondary);font-size:1.2rem;line-height:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.bpm-sync-history-delete:hover{background:var(--danger);color:#fff}.sp-stage{display:flex;flex-direction:column;gap:1.1rem;max-width:760px;margin:0 auto;animation:fadeIn .35s ease}.sp-nowplaying{display:flex;align-items:center;justify-content:space-between;gap:1rem}.sp-nowplaying-info{display:flex;flex-direction:column;gap:.25rem;min-width:0}.sp-nowplaying-eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}.sp-live-dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 #10b98180;animation:sp-pulse 1.8s ease-in-out infinite}@keyframes sp-pulse{0%{box-shadow:0 0 #10b98173}70%{box-shadow:0 0 0 7px #10b98100}to{box-shadow:0 0 #10b98100}}.sp-nowplaying-title{font-size:1.15rem;font-weight:650;color:var(--text-primary);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sp-change-btn{display:inline-flex;align-items:center;gap:.5rem;flex-shrink:0;padding:.55rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:999px;color:var(--text-secondary);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.sp-change-btn svg{color:var(--text-muted);transition:color .2s,transform .4s}.sp-change-btn:hover{border-color:var(--accent);color:var(--text-primary);background:var(--bg-card-hover)}.sp-change-btn:hover svg{color:var(--accent);transform:rotate(-120deg)}.sp-video{margin:0;box-shadow:0 18px 50px -20px #000000b3;border:1px solid var(--border)}.sp-deck{position:relative;display:flex;flex-direction:column;gap:1.1rem;padding:1.4rem;background:radial-gradient(120% 140% at 0% 0%,rgba(108,99,255,.1),transparent 55%),var(--bg-card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}.sp-stats{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}.sp-stat{display:flex;flex-direction:column;gap:.15rem;padding:.9rem 1.1rem;background:linear-gradient(160deg,var(--bg-secondary),rgba(26,29,39,.4));border:1px solid var(--border);border-radius:14px}.sp-stat-value{display:flex;align-items:baseline;gap:.35rem;font-size:2rem;font-weight:750;line-height:1;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:-.01em}.sp-stat-value-sub{font-size:.9rem;font-weight:600;color:var(--text-secondary);text-transform:none}.sp-stat-label{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}.sp-deck-note{font-size:.8rem;color:var(--text-muted);line-height:1.5;margin:-.2rem 0 0}.sp-controls{display:flex;flex-direction:column}.sp-row{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:1rem;padding:.85rem 0;border-top:1px solid var(--border)}.sp-row:first-child{border-top:none;padding-top:.35rem}.sp-row-label{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;font-size:.75rem;font-weight:650;letter-spacing:.03em;color:var(--text-secondary)}.sp-metronome-countdown{position:relative;display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--accent);font-variant-numeric:tabular-nums}.sp-info-btn{display:flex;align-items:center;justify-content:center;width:15px;height:15px;flex-shrink:0;padding:0;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;font-size:.6rem;font-weight:700;line-height:1;cursor:pointer}.sp-info-btn:hover{background:#6c63ff2e}.sp-info-popup{position:absolute;top:calc(100% + .4rem);left:0;z-index:5;width:220px;max-width:calc(100vw - 3rem);padding:.6rem .7rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px #0000004d;color:var(--text-secondary);font-size:.72rem;font-weight:500;line-height:1.45;letter-spacing:0;text-transform:none}.sp-row-control{display:flex;align-items:center;gap:.6rem;min-width:0}.sp-segment{display:inline-flex;align-items:center;gap:.2rem;padding:.28rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:999px}.sp-segment-btn{display:flex;align-items:center;justify-content:center;width:34px;height:30px;border:none;border-radius:999px;background:transparent;color:var(--text-secondary);font-size:.85rem;font-weight:700;cursor:pointer;transition:all .18s}.sp-segment-btn:hover:not(:disabled){background:var(--accent);color:#fff}.sp-segment-btn:disabled{opacity:.35;cursor:default}.sp-segment-value{min-width:46px;text-align:center;font-size:.9rem;font-weight:700;color:var(--text-primary);font-variant-numeric:tabular-nums}.sp-key-group{flex-wrap:wrap}.sp-key-chip{padding:.45rem .9rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:999px;color:var(--text-primary);font-size:.88rem;font-weight:650;cursor:pointer;transition:all .2s}.sp-key-chip:hover{border-color:var(--accent);color:var(--accent)}.sp-key-arrow{color:var(--text-muted);font-size:1rem}.sp-select{padding:.42rem .6rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:.85rem;font-weight:600;cursor:pointer}.sp-select:focus-visible{outline:none;border-color:var(--accent)}.sp-select-target{border-color:var(--accent);color:var(--accent)}.sp-text-btn{padding:.42rem .8rem;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--accent);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .18s}.sp-text-btn:hover:not(:disabled){background:#6c63ff1f}.sp-text-btn:disabled{opacity:.4;cursor:default}.sp-mix-control{gap:.75rem}.sp-metronome-control{flex-wrap:wrap;gap:.6rem .75rem}.sp-metronome-control .sp-slider{min-width:110px}.sp-mute-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;background:var(--bg-secondary);border:1px solid var(--border);border-radius:10px;color:var(--text-secondary);cursor:pointer;transition:all .18s}.sp-mute-btn:hover{color:var(--text-primary);border-color:var(--text-muted)}.sp-mute-btn.active{border-color:var(--danger);color:var(--danger);background:#ef44441a}.sp-mix-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;color:var(--text-muted)}.sp-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;height:6px;border-radius:999px;background:linear-gradient(to right,var(--accent) 0%,var(--accent) var(--sp-fill, 50%),var(--bg-secondary) var(--sp-fill, 50%),var(--bg-secondary) 100%);cursor:pointer;outline:none}.sp-slider:disabled{opacity:.5;cursor:default}.sp-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 6px #00000059;cursor:pointer;transition:transform .15s}.sp-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.sp-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 6px #00000059;cursor:pointer}.sp-deck-status{font-size:.82rem;color:var(--text-secondary);margin:0}@media (max-width: 560px){.sp-nowplaying-title{font-size:1.02rem}.sp-change-btn{padding:.5rem .75rem;font-size:0;gap:0}.sp-change-btn svg{width:17px;height:17px}.sp-deck{padding:1.1rem;border-radius:16px}.sp-row{grid-template-columns:1fr;gap:.55rem;padding:.9rem 0}.sp-stat-value{font-size:1.7rem}}.sunday-set-layout{grid-template-columns:1fr 280px}@media (max-width: 900px){.sunday-set-layout{grid-template-columns:1fr}}@media (max-width: 640px){.set-song-item{flex-wrap:wrap;row-gap:.35rem}.set-song-item-title{flex:1 1 100%;order:1}.set-song-item-key-slot{order:2}.set-song-item-delay-slot{order:3}.set-song-item .remove-chord-btn{order:4;margin-left:auto}}.schedule-practice-page{max-width:1400px}.schedule-practice-page .sunday-set-layout{grid-template-columns:1fr}.set-editor-header-actions{display:flex;align-items:center;gap:.6rem;flex-shrink:0}.set-editor-header-actions .btn-start{padding:.5rem .85rem;font-size:.82rem}.song-picker-heading{margin:2rem 0 1rem;font-size:1.05rem;font-weight:600;color:var(--text-secondary)}.set-song-list{display:flex;flex-direction:column;gap:.5rem}.set-song-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .9rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;border-top:2px solid transparent;transition:opacity .15s ease,border-color .15s ease}.set-song-item .remove-chord-btn{position:static;flex-shrink:0}.set-song-item.is-dragging{opacity:.4}.set-song-item.is-drag-over{border-top-color:var(--accent)}.set-song-item-drag{flex-shrink:0;cursor:grab;color:var(--text-secondary);font-size:.95rem;line-height:1;-webkit-user-select:none;user-select:none}.set-song-item-drag:active{cursor:grabbing}.set-song-item-number{flex-shrink:0;min-width:1.4rem;text-align:center;font-size:.8rem;font-weight:600;color:var(--text-secondary)}.set-song-item-title{flex:1;min-width:0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.set-song-item-delay-slot{display:flex;align-items:center;flex-shrink:0;width:6.4rem}.set-song-item-delay{display:flex;align-items:center;gap:.35rem;flex-shrink:0;color:var(--text-secondary);font-size:.8rem}.set-song-item-delay input{width:3.4rem;padding:.25rem .3rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:.8rem;text-align:center}.set-song-item-delay input:focus{outline:none;border-color:var(--accent)}.set-song-item-key-slot{display:flex;align-items:center;flex-shrink:0;width:3.6rem}.set-song-item-key{display:flex;align-items:center;gap:.3rem;flex-shrink:0;color:var(--text-secondary);font-size:.8rem}.set-song-item-key .bpm-sync-key-arrow{font-size:.8rem}.set-song-item-key-value{font-weight:600;color:var(--accent)}.set-song-item-key.is-calculated .set-song-item-key-value{color:var(--text-primary)}.set-song-item-key-mode{color:var(--text-muted)}.song-picker-card .card-actions{margin-top:auto}.set-playback-sidebar{width:100%;flex:0 0 auto;padding:0 2rem;position:static}.set-playback-sidebar .collections-sidebar-header{margin-bottom:.5rem}.set-playback-sidebar .collection-list{flex-direction:row;flex-wrap:wrap}.set-playback-sidebar .set-playback-item,.set-playback-sidebar .collection-list-item-name{flex:0 1 auto}.set-playback-sidebar .collection-list-item-name{max-width:220px}.set-playback-item{display:flex;align-items:center;gap:.6rem;cursor:pointer}.set-playback-item-marker{display:flex;align-items:center;justify-content:center;width:1.4rem;flex-shrink:0;font-size:.8rem;color:var(--text-muted)}.set-playback-item.playing{border-color:var(--accent);background:var(--accent-glow)}.set-playback-item.playing .set-playback-item-marker{color:var(--accent)}.set-playback-item.playing .collection-list-item-name{color:var(--text-primary);font-weight:600}.set-playback-item-delay{flex-shrink:0;font-size:.72rem;color:var(--text-muted)}.fullscreen-layout.with-set-sidebar{flex-direction:column;align-items:stretch;height:calc(100vh - 4rem)}.fullscreen-layout-main{display:flex;align-items:flex-start;justify-content:center;gap:2rem;width:100%;flex:1 1 auto;min-height:0}.fullscreen-layout.with-chords .fullscreen-layout-main{align-items:stretch}.fullscreen-layout.with-set-sidebar .fullscreen-chords-panel{position:static;height:100%;max-height:100%}@media (max-width: 1100px){.fullscreen-layout.with-set-sidebar{height:auto}.fullscreen-layout-main{flex-direction:column;align-items:center;flex:0 1 auto;min-height:auto}.fullscreen-layout.with-set-sidebar .fullscreen-chords-panel{height:auto;max-height:70vh}}.video-visibility-toggle{display:none}@media (max-width: 1100px){.video-visibility-toggle{display:inline-flex}.fullscreen-layout.with-set-sidebar.video-collapsed .fullscreen-layout-main{flex-direction:column;align-items:stretch}.fullscreen-layout.with-set-sidebar.video-collapsed .fullscreen-card{flex:0 0 auto;width:100%;max-width:none;padding:1.25rem 1.5rem;gap:.6rem}.fullscreen-layout.with-set-sidebar .fullscreen-card{padding-bottom:1.25rem;gap:.75rem}.fullscreen-layout.with-set-sidebar.video-collapsed .youtube-container{max-height:0;overflow:hidden;border-radius:0}.fullscreen-layout.with-set-sidebar.video-collapsed .fullscreen-chords-panel{flex:1 1 auto;width:100%;max-width:none;height:auto;max-height:none}.fullscreen-layout.with-set-sidebar{padding-bottom:11rem}.fullscreen-layout.with-set-sidebar .fullscreen-actions{position:fixed;left:50%;bottom:1rem;transform:translate(-50%);z-index:35;width:auto;max-width:calc(100vw - 2rem);margin:0;padding:.5rem .6rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow)}.fullscreen-layout.with-set-sidebar .fullscreen-actions .btn-lg{padding:.4rem .8rem;font-size:.72rem;gap:.3rem}.fullscreen-layout.with-set-sidebar .fullscreen-actions .song-transpose-controls{width:auto}}.day-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.day-tab{display:flex;align-items:center;gap:.4rem;padding:.55rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:999px;color:var(--text-secondary);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s ease}.day-tab:hover{background:var(--bg-card-hover);color:var(--text-primary)}.day-tab.active{background:#a855f738;border-color:#a855f7;color:var(--text-primary)}.day-tab.is-today{border-style:solid}.day-tab-today-dot{width:6px;height:6px;border-radius:50%;background:#a855f7;flex-shrink:0}.day-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.2rem;height:1.2rem;padding:0 .35rem;background:var(--bg-secondary);border-radius:999px;font-size:.72rem;color:var(--text-muted)}.day-tab.active .day-tab-count{background:#a855f759;color:var(--text-primary)}.practice-session-widget{position:fixed;bottom:1.5rem;right:1.5rem;z-index:800;display:flex;flex-direction:column;gap:.6rem;padding:1rem 1.25rem;min-width:220px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 30px #00000059}.practice-session-widget.paused{border-color:var(--warning)}.practice-session-widget-title{font-size:.85rem;font-weight:500;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.practice-session-widget-timer{display:flex;align-items:baseline;gap:.6rem;font-size:1.75rem;font-weight:700;color:var(--success);font-variant-numeric:tabular-nums}.practice-session-widget.paused .practice-session-widget-timer{color:var(--warning)}.practice-session-widget-paused-label{font-size:.7rem;font-weight:600;letter-spacing:.05em;color:var(--warning)}.practice-session-widget-actions{display:flex;gap:.5rem}.shared-set-page{animation:fadeIn .3s ease;max-width:1100px;margin:0 auto;padding:1.5rem 1rem}.shared-set-header{display:flex;align-items:center;gap:.7rem;margin-bottom:1.5rem}.shared-set-header h1{font-size:1.3rem;font-weight:600}.shared-set-body{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}.shared-set-song-list{width:100%}.login-page{position:relative;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1.5rem;overflow:hidden}.login-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden;pointer-events:none}.login-blob{position:absolute;width:44vmax;height:44vmax;border-radius:50%;filter:blur(90px);opacity:.35}.login-blob-a{top:-14vmax;left:-10vmax;background:radial-gradient(circle,var(--accent),transparent 70%);animation:loginBlobDrift 22s ease-in-out infinite}.login-blob-b{bottom:-16vmax;right:-12vmax;background:radial-gradient(circle,#38bdf8,transparent 70%);animation:loginBlobDrift 26s ease-in-out infinite reverse}@keyframes loginBlobDrift{0%,to{transform:translate(0) scale(1)}50%{transform:translate(4vmax,3vmax) scale(1.08)}}.login-card{position:relative;z-index:1;width:100%;max-width:380px;background:var(--bg-card);border:1px solid var(--border);border-radius:20px;padding:2.5rem 2.25rem;box-shadow:var(--shadow),0 0 90px var(--accent-glow);animation:slideUp .4s ease}.login-brand{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:.4rem}.login-brand h1{font-size:1.4rem;font-weight:600;color:var(--text-primary);letter-spacing:.01em}.login-subtitle{text-align:center;color:var(--text-secondary);font-size:.85rem;margin-bottom:1.75rem}.login-form{display:flex;flex-direction:column;gap:1.1rem;width:100%}.login-field{display:flex;flex-direction:column;gap:.4rem;font-size:.8rem;font-weight:500;color:var(--text-secondary)}.login-input{width:100%;padding:.7rem .9rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:.95rem;font-family:inherit;transition:border-color .2s,box-shadow .2s}.login-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.login-error{color:var(--danger);font-size:.85rem;margin:-.3rem 0 0}.login-submit{width:100%;margin-top:.4rem;text-align:center}