.site-header{position:sticky;top:0;z-index:100;background:#f7f7f5d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border)}.header-container{max-width:1400px;margin:0 auto;padding:var(--space-md) var(--space-xl);display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg)}.header-logo{font-size:20px;font-weight:700;color:var(--color-text);text-decoration:none;letter-spacing:-.02em;transition:var(--transition-fast)}.header-logo:hover{color:var(--color-accent)}.header-nav{display:flex;align-items:center;gap:var(--space-lg);flex:1;justify-content:center}.nav-link{font-size:14px;font-weight:500;color:var(--color-text-secondary);text-decoration:none;transition:var(--transition-fast);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm)}.nav-link:hover{color:var(--color-text);background:var(--color-bg-hover)}.header-actions{display:flex;align-items:center;gap:var(--space-sm)}.header-user-email{font-size:13px;color:var(--color-text-secondary);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-menu-toggle{display:none;padding:var(--space-xs);background:none;border:none;color:var(--color-text);cursor:pointer;border-radius:var(--radius-sm)}.header-menu-toggle:hover{background:var(--color-bg-hover)}@media(max-width:768px){.header-container{padding:var(--space-sm) var(--space-md)}.header-nav,.header-actions .btn-ghost{display:none}.header-menu-toggle{display:flex;align-items:center;justify-content:center}.header-logo{font-size:18px}}@media(max-width:375px){.header-container{padding:var(--space-xs) var(--space-sm);gap:var(--space-sm)}}.landing-page{min-height:100vh;background:var(--color-bg)}.hero-section{min-height:80vh;display:flex;flex-direction:column;justify-content:center;padding:var(--space-3xl) var(--space-xl);position:relative;overflow:hidden;background:var(--color-bg)}.hero-section:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(212,137,26,.08),transparent),radial-gradient(ellipse 60% 40% at 80% 80%,rgba(37,99,235,.05),transparent);pointer-events:none}.hero-content{max-width:900px;margin:0 auto;text-align:center;position:relative;z-index:1}.hero-badge{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md);background:var(--color-accent-subtle);border:1px solid rgba(212,137,26,.3);border-radius:var(--radius-full);font-size:13px;font-weight:500;color:var(--color-accent);margin-bottom:var(--space-lg);text-transform:uppercase;letter-spacing:.05em}.hero-title{font-size:clamp(40px,7vw,72px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:var(--space-lg);color:var(--color-text)}.hero-title .highlight{background:linear-gradient(135deg,var(--color-accent) 0%,#c47a10 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:20px;color:var(--color-text-secondary);max-width:600px;margin:0 auto var(--space-xl);line-height:1.7}.hero-cta{display:flex;gap:var(--space-md);justify-content:center}.hero-cta .btn{transition:all var(--transition-fast)}.hero-cta .btn-primary:hover{transform:scale(1.02)}.hero-cta .btn-secondary:hover{border-color:var(--color-accent)}.guitar-strings{position:absolute;bottom:0;left:0;right:0;height:200px;opacity:.1;pointer-events:none;z-index:0}.guitar-string{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent)}.methodology-section{padding:var(--space-3xl) var(--space-xl);background:var(--color-bg)}.methodology-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);max-width:1000px;margin:0 auto;padding:var(--space-xl);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl)}.methodology-step{text-align:center;padding:var(--space-md);position:relative;transition:var(--transition-base);cursor:pointer;border-radius:var(--radius-lg)}.methodology-step:hover{transform:translateY(-2px);background:#00000005}.methodology-step:after{content:"";position:absolute;right:-8px;top:50%;transform:translateY(-50%);width:16px;height:2px;background:var(--color-border)}.methodology-step:last-child:after{display:none}.methodology-number{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-sm);border-radius:var(--radius-full);font-size:18px;font-weight:700;transition:var(--transition-base)}.methodology-step:hover .methodology-number{transform:scale(1.1);box-shadow:0 0 20px currentColor}.methodology-number.methodology-melody{background:var(--color-melody-bg);color:var(--color-melody);border:2px solid var(--color-melody)}.methodology-number.methodology-chords{background:var(--color-chords-bg);color:var(--color-chords);border:2px solid var(--color-chords)}.methodology-number.methodology-bass{background:var(--color-bass-bg);color:var(--color-bass);border:2px solid var(--color-bass)}.methodology-number.methodology-fills{background:var(--color-fills-bg);color:var(--color-fills);border:2px solid var(--color-fills)}.methodology-label{font-size:16px;font-weight:600;margin-bottom:4px;color:var(--color-text)}.methodology-desc{font-size:13px;color:var(--color-text-muted);line-height:1.5}.features-section{padding:var(--space-3xl) var(--space-xl);background:var(--color-bg)}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);max-width:1200px;margin:0 auto}.feature-card{padding:var(--space-xl);background:#ffffffb3;border:1px solid var(--color-border);border-radius:var(--radius-lg);text-align:left;transition:var(--transition-base);cursor:default;display:flex;flex-direction:column}.feature-card:hover{background:var(--color-bg-card);border-color:var(--color-text-muted);transform:translateY(-4px);box-shadow:var(--shadow-md)}.feature-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--color-accent-subtle);border-radius:var(--radius-md);margin-bottom:var(--space-md)}.feature-icon svg{width:28px;height:28px}.feature-title{font-size:18px;font-weight:600;margin-bottom:var(--space-sm);color:var(--color-text)}.feature-desc{font-size:14px;color:var(--color-text-secondary);line-height:1.6;flex:1}.demo-player-section{padding:var(--space-3xl) var(--space-xl);background:var(--color-bg)}.demo-player-placeholder{max-width:800px;margin:0 auto;padding:var(--space-3xl) var(--space-xl);background:var(--color-bg-card);border:2px dashed var(--color-border);border-radius:var(--radius-xl);text-align:center}.demo-player-icon{margin-bottom:var(--space-lg);opacity:.5}.demo-player-placeholder h3{font-size:24px;font-weight:600;margin-bottom:var(--space-sm);color:var(--color-text)}.demo-player-placeholder p{font-size:16px;color:var(--color-text-secondary)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.methodology-step{animation:fadeInUp .6s ease-out backwards}.methodology-step:nth-child(1){animation-delay:0ms}.methodology-step:nth-child(2){animation-delay:.1s}.methodology-step:nth-child(3){animation-delay:.2s}.methodology-step:nth-child(4){animation-delay:.3s}.feature-card{animation:fadeInUp .6s ease-out backwards}.feature-card:nth-child(1){animation-delay:0ms}.feature-card:nth-child(2){animation-delay:.15s}.feature-card:nth-child(3){animation-delay:.3s}@media(max-width:1024px){.methodology-preview{grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}.methodology-step:after{display:none}.features-grid{grid-template-columns:1fr;gap:var(--space-md)}}@media(max-width:768px){.hero-cta{flex-direction:column;width:100%}.hero-cta .btn{width:100%}.methodology-preview{grid-template-columns:1fr;padding:var(--space-lg)}.methodology-number{width:40px;height:40px;font-size:16px}.features-section{padding:var(--space-2xl) var(--space-md)}.feature-card{padding:var(--space-lg)}}.intro-view{display:flex;flex-direction:column;gap:var(--space-lg);padding:var(--space-xl);max-width:800px;margin:0 auto;width:100%;overflow-y:auto;flex:1}.intro-video{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);aspect-ratio:16 / 9;max-height:400px}.intro-meta{display:flex;flex-direction:column;gap:var(--space-sm)}.intro-title{font-size:28px;font-weight:700;line-height:1.2;color:var(--color-text);margin:0}.intro-artist{font-size:16px;color:var(--color-text-secondary)}.intro-arranger{font-size:14px;color:var(--color-text-muted)}.intro-difficulty{display:flex;align-items:center;gap:var(--space-xs);margin-top:var(--space-xs)}.intro-difficulty-label{font-size:13px;color:var(--color-text-muted);margin-right:var(--space-xs)}.intro-star{font-size:16px;color:var(--color-border)}.intro-star--filled{color:var(--color-accent)}.intro-tags{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-xs)}.intro-tag{display:inline-flex;align-items:center;padding:3px 10px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:12px;font-weight:500;color:var(--color-text-secondary)}.intro-description{font-size:15px;line-height:1.6;color:var(--color-text-secondary);white-space:pre-wrap}.intro-layers{display:flex;flex-direction:column;gap:var(--space-sm)}.intro-layers-title{font-size:14px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.intro-layers-list{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.intro-layer-chip{display:inline-flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:13px;font-weight:500;color:var(--color-text-secondary)}.intro-layer-chip-dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent)}.intro-actions{margin-top:var(--space-sm);padding-top:var(--space-lg);border-top:1px solid var(--color-border)}.intro-start-btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);font-family:var(--font-sans);font-size:16px;font-weight:600;background:var(--color-accent);color:var(--color-bg);border:none;border-radius:var(--radius-lg);cursor:pointer;transition:var(--transition-fast)}.intro-start-btn:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-glow)}.intro-start-btn svg{transition:transform var(--transition-fast)}.intro-start-btn:hover svg{transform:translate(2px)}@media(max-width:768px){.intro-view{padding:var(--space-md);gap:var(--space-md)}.intro-title{font-size:22px}.intro-video{max-height:220px;border-radius:var(--radius-md)}.intro-meta{gap:var(--space-xs)}.intro-artist,.intro-description{font-size:14px}.intro-layers-list{flex-direction:column}.intro-layer-chip{width:100%}.intro-start-btn{width:100%;justify-content:center;padding:var(--space-md)}.intro-actions{padding-top:var(--space-md)}}@media(max-width:375px){.intro-view{padding:var(--space-sm)}.intro-title{font-size:20px}.intro-video{max-height:180px}}.recording-overlay{padding:var(--space-md) var(--space-xl);background:var(--color-bg-card);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}.recording-indicator{display:flex;align-items:center;gap:var(--space-xs);font-size:13px;color:var(--color-text-secondary)}.recording-dot{width:10px;height:10px;border-radius:50%;background:#ef4444;animation:recording-pulse 1s ease-in-out infinite}@keyframes recording-pulse{0%,to{opacity:1}50%{opacity:.3}}.recording-timer{font-variant-numeric:tabular-nums;font-size:14px;font-weight:600;color:#ef4444;min-width:48px}.recording-review{display:flex;align-items:center;gap:var(--space-sm)}.recording-review audio{height:32px;max-width:200px}.recording-upload-progress{font-size:12px;color:var(--color-text-muted)}.recording-error{font-size:12px;color:var(--color-error, #ef4444)}.capsule-btn--submit{background:#16a34a;color:#fff;border:none}.capsule-btn--submit:hover{background:#15803d}.capsule-btn--submit:disabled{background:#86efac;cursor:not-allowed}.capsule-btn--record{background:#ef4444;color:#fff;border:none}.capsule-btn--record:hover{background:#dc2626}@media(max-width:768px){.recording-overlay{padding:var(--space-sm) var(--space-md);gap:var(--space-sm)}.recording-review audio{max-width:150px}}.layer-tabs{display:flex;gap:2px;background:var(--color-bg-card);padding:4px;border-radius:var(--radius-md);overflow-x:auto}.layer-tabs--vertical{flex-direction:column;align-items:stretch;gap:var(--space-sm);overflow-x:hidden}.layer-tabs--vertical .layer-tab{justify-content:flex-start;text-align:left;width:100%}.layer-tab{display:flex;align-items:center;gap:var(--space-xs);padding:8px 16px;background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text-secondary);font-size:14px;white-space:nowrap;transition:background .15s,color .15s}.layer-tab:hover{background:var(--color-bg-hover);color:var(--color-text)}.layer-tab.active{background:var(--color-bg);color:var(--color-text);font-weight:500;box-shadow:0 1px 3px #0000001a}.layer-tab-number{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:11px;font-weight:600;background:var(--color-bg-elevated);border-radius:50%}.layer-tab.active .layer-tab-number{background:var(--color-accent);color:var(--color-bg)}.layer-tab-audio-badge{font-size:12px;color:var(--color-correct)}.layer-tab.disabled{opacity:.4;cursor:not-allowed}.layer-tab.disabled:hover{background:transparent;color:var(--color-text-secondary)}.layer-tab.disabled .layer-tab-number{background:var(--color-bg-elevated)}@media(max-width:768px){.layer-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:1px;padding:2px}.layer-tabs::-webkit-scrollbar{display:none}.layer-tab{padding:6px 10px;font-size:12px;flex-shrink:0}.layer-tab-number{width:18px;height:18px;font-size:10px}}.metronome-leds{display:flex;align-items:center;gap:8px}.metronome-led{width:12px;height:12px;border-radius:50%;background:#d1d5db;transition:background-color .1s ease-out,box-shadow .1s ease-out}.metronome-led.measure.active{background:#ef4444;box-shadow:0 0 6px #ef4444}.metronome-led.beat.active{background:#f59e0b;box-shadow:0 0 6px #f59e0b}.metronome-led.disabled{opacity:.3}.metronome-controls{display:flex;align-items:center;gap:var(--space-xs)}.metronome-toggle{display:flex;align-items:center;gap:var(--space-xs);padding:4px 12px;font-size:13px;font-weight:500;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-fast)}.metronome-toggle:hover{background:var(--color-bg-elevated)}.metronome-toggle.active{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.metronome-icon{font-size:16px}.metronome-mute{width:28px;height:28px;display:flex;align-items:center;justify-content:center;padding:0;font-size:14px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-fast)}.metronome-mute:hover{background:var(--color-bg-elevated)}.metronome-mute.muted{background:var(--color-accent-subtle);border-color:var(--color-accent)}.tempo-control{display:flex;align-items:center;gap:var(--space-xs)}.tempo-label{font-size:13px;color:var(--color-text-muted)}.tempo-button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;padding:0;font-size:14px;font-weight:500;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-fast)}.tempo-button:hover:not(:disabled){background:var(--color-bg-elevated)}.tempo-button:disabled{opacity:.5;cursor:not-allowed}.tempo-value{display:flex;align-items:baseline;gap:2px;min-width:60px;justify-content:center}.tempo-number{font-size:14px;font-weight:600;color:var(--color-text)}.tempo-unit{font-size:11px;color:var(--color-text-muted)}.tempo-value.below-original .tempo-number{color:var(--color-accent)}.capsule-viewer{min-height:100vh;display:flex;flex-direction:column}.capsule-viewer--video{height:100vh;overflow:hidden}.capsule-viewer--audio{overflow:auto}.capsule-layout{display:flex;flex:1;min-height:0}.capsule-sidebar{width:200px;min-width:200px;border-right:1px solid var(--color-border);background:var(--color-bg-card);display:flex;flex-direction:column;overflow-y:auto}.capsule-sidebar-title{padding:var(--space-md) var(--space-md) var(--space-sm);border-bottom:1px solid var(--color-border)}.capsule-sidebar-title .capsule-title{font-size:16px;margin:0 0 2px}.capsule-sidebar-title .capsule-artist{font-size:13px;margin:0}.capsule-sidebar .layer-tabs{padding:var(--space-sm);flex:1}.capsule-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.capsule-viewer-status{padding:var(--space-3xl);text-align:center;color:var(--color-text-secondary)}.capsule-viewer-status--error{color:var(--color-error, #ef4444)}.capsule-viewer-error-actions{display:flex;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-xl)}.capsule-title{font-size:18px;margin:0}.capsule-artist{font-size:14px;color:var(--color-text-secondary)}.capsule-controls{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-xs) var(--space-xl);background:var(--color-bg-card);border-bottom:1px solid var(--color-border);flex-shrink:0;flex-wrap:wrap}.capsule-controls-divider{width:1px;height:24px;background:var(--color-border)}.capsule-btn{padding:4px 12px;font-size:13px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:var(--transition-fast)}.capsule-btn--primary{background:var(--color-accent);color:#fff;border:none}.capsule-btn--warning{background:var(--color-warning);color:#fff;border:none}.capsule-btn--ghost{background:var(--color-bg-card);color:var(--color-text-secondary);border:1px solid var(--color-border)}.capsule-btn--compact{padding:2px 8px;font-size:12px}.capsule-btn--active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.capsule-btn--outline{background:var(--color-bg-card);border:1px solid var(--color-border);color:var(--color-text-muted)}.capsule-btn--outline-active{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.capsule-btn:disabled{cursor:not-allowed;opacity:.5}.capsule-controls-text{font-size:12px;color:var(--color-text-muted)}.capsule-video{height:var(--capsule-video-height, auto);min-height:150px;padding:0 var(--space-xl);flex-shrink:1}.capsule-audio-controls{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-xl)}.capsule-score{flex-shrink:0;overflow:hidden}.capsule-score--video{height:var(--capsule-alphatab-min, 280px);min-height:var(--capsule-alphatab-min, 280px);max-height:var(--capsule-alphatab-min, 280px);padding:0 var(--space-xl)}.capsule-score--audio{flex:1;padding:0 var(--space-xl) var(--space-xl)}.capsule-video-overlay-wrapper{position:relative;flex:1;min-height:0}.capsule-video-overlay-wrapper .capsule-video{height:100%}.capsule-score--overlay{position:absolute;bottom:0;left:0;right:0;height:var(--capsule-alphatab-min, 280px);z-index:10;background:#ffffffe0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-top:1px solid rgba(0,0,0,.1);padding:0 var(--space-xl)}.capsule-volume{display:flex;align-items:center;gap:var(--space-xs)}.capsule-volume-slider{width:80px;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-border);border-radius:2px;outline:none;cursor:pointer}.capsule-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-accent);cursor:pointer;border:none}.capsule-volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--color-accent);cursor:pointer;border:none}.capsule-zoom{display:flex;align-items:center;gap:var(--space-xs)}.capsule-zoom-label{font-size:13px;color:var(--color-text-muted)}@media(max-width:768px){.capsule-layout{flex-direction:column}.capsule-sidebar{width:100%;min-width:100%;border-right:none;border-bottom:1px solid var(--color-border);flex-direction:row;align-items:center;overflow-y:visible;overflow-x:auto}.capsule-sidebar-title{border-bottom:none;border-right:1px solid var(--color-border);padding:var(--space-sm) var(--space-md);white-space:nowrap}.capsule-sidebar .layer-tabs{flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch}.capsule-sidebar .layer-tabs .layer-tab{white-space:nowrap}.capsule-controls{gap:var(--space-sm);padding:var(--space-xs) var(--space-md);overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}.capsule-video{padding:0;min-height:120px}.capsule-score--video{padding:0 var(--space-sm);overflow-x:auto;-webkit-overflow-scrolling:touch}.capsule-score--audio{padding:0 var(--space-sm) var(--space-md);overflow-x:auto;-webkit-overflow-scrolling:touch}.capsule-audio-controls{padding:var(--space-sm) var(--space-md)}.capsule-volume-slider{width:60px}.capsule-zoom,.capsule-controls-divider{display:none}}.capsule-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md);transition:var(--transition-fast)}.capsule-card:hover{border-color:var(--color-text-muted);box-shadow:0 4px 12px #0000001a}.capsule-card-header{min-height:60px}.capsule-card-title{font-size:18px;font-weight:600;color:var(--color-text);margin:0 0 var(--space-xs) 0;line-height:1.3}.capsule-card-artist{font-size:14px;color:var(--color-text-secondary);margin:0}.capsule-card-difficulty{display:flex;align-items:center;gap:var(--space-sm)}.difficulty-stars{color:var(--color-accent);font-size:14px;letter-spacing:2px}.difficulty-label{font-size:12px;color:var(--color-text-muted)}.capsule-card-layers{display:flex;gap:var(--space-xs)}.layer-dot{width:10px;height:10px;border-radius:50%;transition:var(--transition-fast)}.layer-dot.filled{background:var(--color-accent)}.layer-dot.empty{background:var(--color-bg-elevated);border:1px solid var(--color-border)}.capsule-card-date{font-size:12px;color:var(--color-text-muted)}.capsule-card-actions{display:flex;gap:var(--space-sm);margin-top:auto;padding-top:var(--space-md);border-top:1px solid var(--color-border)}.capsule-card-actions .btn{flex:1}.btn-danger{background:transparent;border:1px solid var(--color-incorrect);color:var(--color-incorrect)}.btn-danger:hover{background:var(--color-incorrect);color:#fff}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .15s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.dialog-content{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:100%;max-width:420px;margin:var(--space-lg);animation:slideIn .2s ease-out}@keyframes slideIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg);border-bottom:1px solid var(--color-border)}.dialog-title{font-size:18px;font-weight:600;color:var(--color-text);margin:0}.dialog-close{background:none;border:none;font-size:24px;color:var(--color-text-muted);cursor:pointer;padding:0;line-height:1}.dialog-close:hover{color:var(--color-text)}.dialog-body{padding:var(--space-lg)}.dialog-body p{margin:0 0 var(--space-md) 0;font-size:14px;color:var(--color-text)}.dialog-body .dialog-warning{color:var(--color-text-secondary);font-size:13px}.dialog-actions{display:flex;justify-content:flex-end;gap:var(--space-sm);padding:var(--space-lg);border-top:1px solid var(--color-border)}.toast{position:fixed;bottom:var(--space-xl);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 4px 20px #0000001a;z-index:1100;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.toast-success{border-color:var(--color-correct)}.toast-error{border-color:var(--color-incorrect)}.toast-icon{font-size:16px;font-weight:600}.toast-success .toast-icon{color:var(--color-correct)}.toast-error .toast-icon{color:var(--color-incorrect)}.toast-message{font-size:14px;color:var(--color-text)}.toast-close{background:none;border:none;font-size:18px;color:var(--color-text-muted);cursor:pointer;padding:0;margin-left:var(--space-sm)}.toast-close:hover{color:var(--color-text)}.capsule-list-page{padding:var(--space-lg);max-width:1400px;margin:0 auto}.capsule-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-lg);gap:var(--space-sm)}.capsule-list-title{margin:0;font-size:var(--font-size-2xl);font-weight:600;color:var(--color-text-primary)}.capsule-list-controls{display:flex;align-items:center;gap:var(--space-md)}.sort-control{display:flex;align-items:center;gap:var(--space-xs);font-size:13px;color:var(--color-text-secondary)}.sort-select{padding:var(--space-xs) var(--space-sm);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:13px;cursor:pointer}.sort-select:focus{outline:none;border-color:var(--color-accent)}.capsule-list-loading,.capsule-list-error{text-align:center;padding:var(--space-2xl);color:var(--color-text-secondary);font-size:var(--font-size-lg)}.capsule-list-error{color:var(--color-danger)}.capsule-list-empty{text-align:center;padding:var(--space-2xl)}.empty-message{font-size:var(--font-size-xl);font-weight:500;color:var(--color-text-primary);margin:0 0 var(--space-sm)}.empty-hint{font-size:var(--font-size-base);color:var(--color-text-secondary);margin:0}.capsule-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-md);margin-top:var(--space-lg)}@media(max-width:768px){.capsule-list-page{padding:var(--space-md)}.capsule-list-header,.capsule-list-controls{flex-direction:column;align-items:stretch}.sort-control{justify-content:space-between}.sort-select{flex:1}.capsule-list-title{font-size:var(--font-size-xl);margin-bottom:var(--space-sm)}.capsule-grid{grid-template-columns:1fr;gap:var(--space-sm)}}@media(min-width:769px)and (max-width:1024px){.capsule-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}@media(min-width:1025px){.capsule-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}.curation-tool{min-height:100vh;background:var(--color-bg);padding:var(--space-xl)}.curation-header{text-align:center;margin-bottom:var(--space-2xl);padding-bottom:var(--space-xl);border-bottom:1px solid var(--color-border)}.back-link{display:inline-flex;align-items:center;gap:var(--space-xs);background:none;border:none;color:var(--color-accent);font-size:14px;cursor:pointer;padding:0;margin-bottom:var(--space-md)}.back-link:hover{text-decoration:underline}.curation-title{font-size:32px;font-weight:700;color:var(--color-text);margin-bottom:var(--space-sm)}.curation-subtitle{font-size:16px;color:var(--color-text-secondary)}.curation-steps{display:flex;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-2xl);max-width:800px;margin-left:auto;margin-right:auto}.curation-step-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-fast);position:relative;font-size:14px;font-weight:500}.curation-step-btn:hover:not(:disabled){background:var(--color-bg-hover);border-color:var(--color-text-muted)}.curation-step-btn.active{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.curation-step-btn.completed:not(.active){border-color:var(--color-correct);color:var(--color-correct)}.curation-step-btn:disabled{opacity:.5;cursor:not-allowed}.step-number{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-elevated);border-radius:var(--radius-full);font-size:12px;font-weight:600}.curation-step-btn.active .step-number{background:var(--color-accent);color:var(--color-bg)}.curation-step-btn.completed:not(.active) .step-number{background:var(--color-correct);color:#fff}.step-check{margin-left:var(--space-xs)}.step-connector{position:absolute;right:-20px;width:24px;height:2px;background:var(--color-border)}.curation-content{max-width:1200px;margin:0 auto}.step-content{animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.step-content h2{font-size:24px;font-weight:600;color:var(--color-text);margin-bottom:var(--space-sm)}.section-description{font-size:14px;color:var(--color-text-secondary);margin-bottom:var(--space-xl)}.files-layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl)}.file-upload-section,.mapped-layers-section{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl)}.file-input{display:none}.file-input-wrapper{margin-bottom:var(--space-lg)}.file-input-label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-xl);background:var(--color-bg-elevated);border:2px dashed var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);color:var(--color-text-secondary)}.file-input-label:hover{background:var(--color-bg-hover);border-color:var(--color-accent);color:var(--color-accent)}.selected-file{background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg)}.selected-file-info{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--color-border);color:var(--color-text)}.file-name{font-weight:500;word-break:break-all}.assignment-label{font-size:13px;color:var(--color-text-secondary);margin-bottom:var(--space-sm)}.layer-buttons{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.layer-assign-btn{padding:var(--space-xs) var(--space-md);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;font-size:13px;font-weight:500;transition:var(--transition-fast);display:flex;align-items:center;gap:var(--space-xs)}.layer-assign-btn:hover:not(:disabled){background:var(--color-bg-hover)}.layer-assign-btn:disabled{opacity:.5;cursor:not-allowed}.layer-assign-btn .already-assigned{font-size:11px;color:var(--color-text-muted)}.layer-assign-btn.layer-melody:hover:not(:disabled),.layer-assign-btn.layer-chords:hover:not(:disabled),.layer-assign-btn.layer-melodyBass:hover:not(:disabled),.layer-assign-btn.layer-beginners:hover:not(:disabled),.layer-assign-btn.layer-intermediate:hover:not(:disabled),.layer-assign-btn.layer-advanced:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent)}.mapped-layers-list{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-lg)}.mapped-layer-item{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-md);padding:var(--space-md);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:var(--transition-fast)}.mapped-layer-item.assigned{border-color:var(--color-text-muted)}.mapped-layer-item.empty{opacity:.5}.layer-indicator{width:8px;height:8px;border-radius:50%;background:var(--color-text-muted)}.mapped-layer-item.layer-melody .layer-indicator{background:var(--color-melody)}.mapped-layer-item.layer-chords .layer-indicator{background:var(--color-chords)}.mapped-layer-item.layer-melodyBass .layer-indicator{background:var(--color-fills)}.mapped-layer-item.layer-beginners .layer-indicator{background:var(--color-correct)}.mapped-layer-item.layer-intermediate .layer-indicator{background:var(--color-warning)}.mapped-layer-item.layer-advanced .layer-indicator{background:var(--color-bass)}.layer-info{flex:1;display:flex;flex-direction:column;gap:2px}.layer-name{font-size:14px;font-weight:500;color:var(--color-text)}.layer-file{font-size:12px;color:var(--color-text-muted);word-break:break-all}.remove-layer-btn{padding:var(--space-xs);background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-fast)}.remove-layer-btn:hover{background:var(--color-bg-hover);color:var(--color-incorrect)}.layer-audio-section{margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px dashed var(--color-border);width:100%}.layer-audio-info{display:flex;align-items:center;gap:var(--space-sm)}.audio-icon{font-size:14px}.audio-filename{flex:1;font-size:12px;color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.audio-offset{font-size:11px;color:var(--color-accent);font-family:monospace}.audio-action-btn{padding:var(--space-xs) var(--space-sm);background:var(--color-accent-subtle);border:1px solid var(--color-accent);border-radius:var(--radius-sm);color:var(--color-accent);cursor:pointer;font-size:12px;font-weight:500;transition:var(--transition-fast)}.audio-action-btn:hover{background:var(--color-accent);color:var(--color-bg)}.audio-remove-btn{padding:2px 6px;background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;font-size:16px;line-height:1;border-radius:var(--radius-sm);transition:var(--transition-fast)}.audio-remove-btn:hover{background:var(--color-bg-hover);color:var(--color-incorrect)}.add-audio-btn{width:100%;padding:var(--space-xs) var(--space-sm);background:transparent;border:1px dashed var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;font-size:12px;transition:var(--transition-fast)}.add-audio-btn:hover{background:var(--color-bg-hover);border-color:var(--color-accent);color:var(--color-accent)}.next-step-btn{width:100%;margin-top:var(--space-md)}.files-step-actions{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);margin-top:var(--space-md)}.metadata-form{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);max-width:800px;margin:0 auto}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);margin-bottom:var(--space-lg)}.form-group{display:flex;flex-direction:column;gap:var(--space-xs)}.form-group.full-width{grid-column:1 / -1}.form-group label{font-size:13px;font-weight:500;color:var(--color-text)}.field-hint{font-size:11px;color:var(--color-text-muted)}.textarea{resize:vertical;min-height:80px;font-family:inherit}.difficulty-selector{display:flex;gap:var(--space-xs)}.difficulty-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;font-weight:600;transition:var(--transition-fast)}.difficulty-btn:hover{background:var(--color-bg-hover);border-color:var(--color-text-muted)}.difficulty-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg)}.slug-input-wrapper{position:relative;display:flex;align-items:center}.slug-input-wrapper.locked .input{padding-left:calc(var(--space-lg) + 20px);background:var(--color-bg-elevated);color:var(--color-text-muted);cursor:not-allowed}.slug-lock-icon{position:absolute;left:var(--space-md);font-size:14px;z-index:1}.form-actions{display:flex;justify-content:space-between;gap:var(--space-md);margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--color-border)}.preview-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);max-width:800px;margin:0 auto var(--space-xl)}.preview-header{display:flex;align-items:baseline;gap:var(--space-md);margin-bottom:var(--space-lg);padding-bottom:var(--space-lg);border-bottom:1px solid var(--color-border)}.preview-title{font-size:28px;font-weight:700;color:var(--color-text);margin:0}.preview-slug{font-size:14px;color:var(--color-text-muted);font-family:var(--font-mono)}.preview-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);margin-bottom:var(--space-lg)}.meta-item{display:flex;gap:var(--space-sm)}.meta-label{font-size:13px;color:var(--color-text-muted)}.meta-value{font-size:14px;color:var(--color-text);font-weight:500}.difficulty-badge{color:var(--color-accent);letter-spacing:2px}.preview-tags{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-lg)}.preview-tag{padding:var(--space-xs) var(--space-sm);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:12px;color:var(--color-text-secondary)}.preview-notes{padding:var(--space-md);background:var(--color-bg-elevated);border-radius:var(--radius-md);margin-bottom:var(--space-lg)}.preview-notes p{font-size:14px;color:var(--color-text-secondary);line-height:1.6;margin-top:var(--space-xs)}.preview-layers{border-top:1px solid var(--color-border);padding-top:var(--space-lg)}.preview-layers h4{font-size:16px;font-weight:600;color:var(--color-text);margin-bottom:var(--space-md)}.preview-layers-list{display:flex;flex-direction:column;gap:var(--space-sm)}.preview-layer{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-bg-elevated);border-radius:var(--radius-md)}.preview-layer .layer-indicator{width:10px;height:10px;border-radius:50%}.preview-layer.layer-melody .layer-indicator{background:var(--color-melody)}.preview-layer.layer-chords .layer-indicator{background:var(--color-chords)}.preview-layer.layer-melodyBass .layer-indicator{background:var(--color-fills)}.preview-layer.layer-beginners .layer-indicator{background:var(--color-correct)}.preview-layer.layer-intermediate .layer-indicator{background:var(--color-warning)}.preview-layer.layer-advanced .layer-indicator{background:var(--color-bass)}.preview-layer .layer-name{font-weight:500;color:var(--color-text)}.preview-layer .layer-file{margin-left:auto;font-size:12px;color:var(--color-text-muted);font-family:var(--font-mono)}.layer-file-row{display:flex;align-items:center;gap:var(--space-sm);flex:1}.layer-file-row .layer-file{flex:1}.replacing-text{color:var(--color-warning);font-style:italic;font-size:11px}.btn-small{padding:var(--space-xs) var(--space-sm);font-size:12px;border-radius:var(--radius-sm);white-space:nowrap}.preview-intro-section{max-width:800px;margin:0 auto var(--space-xl)}.preview-intro-section h4{font-size:16px;font-weight:600;color:var(--color-text);margin-bottom:var(--space-xs)}.preview-intro-frame{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;max-height:600px;overflow-y:auto}.preview-intro-frame .intro-view{max-width:100%}.draft-banner{display:flex;align-items:center;justify-content:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--color-accent-subtle);border:1px solid var(--color-accent);border-radius:var(--radius-md);margin-bottom:var(--space-xl);max-width:800px;margin-left:auto;margin-right:auto;animation:fadeIn .3s ease-out}.draft-banner-text{font-size:14px;font-weight:500;color:var(--color-text)}.input-error{border-color:var(--color-incorrect)!important}.validation-error{font-size:12px;color:var(--color-incorrect);margin-top:2px}.validation-error-block{padding:var(--space-sm) var(--space-md);background:#dc354514;border:1px solid var(--color-incorrect);border-radius:var(--radius-md);color:var(--color-incorrect);font-size:13px;margin-bottom:var(--space-md)}.form-actions-column{display:flex;flex-direction:column;gap:var(--space-lg);margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--color-border)}.upload-progress-area{display:flex;flex-direction:column;gap:var(--space-sm);padding:var(--space-md);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md)}.upload-progress-status{font-size:13px;color:var(--color-accent);font-weight:500}.upload-retry-status{font-size:13px;color:var(--color-warning);font-weight:500}.upload-progress-item{display:flex;align-items:center;gap:var(--space-sm)}.upload-progress-label{font-size:12px;color:var(--color-text-secondary);min-width:100px;text-transform:capitalize}.upload-progress-bar-track{flex:1;height:8px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);overflow:hidden}.upload-progress-bar-fill{height:100%;background:var(--color-accent);border-radius:var(--radius-full);transition:width .3s ease}.upload-progress-percent{font-size:12px;color:var(--color-text-muted);font-family:var(--font-mono);min-width:36px;text-align:right}.save-error{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:#dc354514;border:1px solid var(--color-incorrect);border-radius:var(--radius-md)}.save-error-text{flex:1;font-size:13px;color:var(--color-incorrect)}.upload-progress{font-size:13px;color:var(--color-accent);padding:var(--space-sm) var(--space-md);background:var(--color-accent-subtle);border-radius:var(--radius-md)}@media(max-width:1024px){.files-layout{grid-template-columns:1fr}}@media(max-width:768px){.curation-tool{padding:var(--space-md)}.curation-steps{flex-direction:column;align-items:stretch}.step-connector{display:none}.form-row{grid-template-columns:1fr}.form-group.full-width{grid-column:1}.preview-meta{grid-template-columns:1fr}.form-actions{flex-direction:column}.form-actions .btn{width:100%}.curation-title{font-size:22px}.curation-subtitle{font-size:14px}.preview-card,.metadata-form,.file-upload-section,.mapped-layers-section{padding:var(--space-md)}.preview-header{flex-direction:column;gap:var(--space-xs)}.preview-intro-frame{max-height:450px}}.sync-view{min-height:100vh;background:var(--color-bg);padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-lg)}.sync-header{display:flex;align-items:center;gap:var(--space-lg);padding-bottom:var(--space-lg);border-bottom:1px solid var(--color-border)}.sync-back-btn{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;font-size:14px;font-weight:500;transition:var(--transition-fast)}.sync-back-btn:hover{background:var(--color-bg-hover);color:var(--color-text);border-color:var(--color-text-muted)}.sync-title{font-size:24px;font-weight:600;color:var(--color-text);margin:0}.sync-score-section{flex:1;min-height:300px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.sync-audio-section{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg)}.audio-info{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg)}.audio-label{font-size:14px;color:var(--color-text-muted)}.audio-filename{flex:1;font-size:14px;font-weight:500;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.audio-duration{font-family:var(--font-mono);font-size:13px;color:var(--color-text-secondary)}.playback-bpm{font-family:var(--font-mono);font-size:14px;color:var(--color-primary);background:var(--color-bg);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);border:1px solid var(--color-primary)}.playback-bpm .bpm-adjusted{font-size:12px;color:var(--color-text-muted);font-weight:400}.playback-controls-row{display:flex;align-items:center;gap:var(--space-md)}.playback-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background:var(--color-accent);border:none;border-radius:var(--radius-md);color:var(--color-bg);cursor:pointer;font-size:14px;font-weight:600;transition:var(--transition-fast)}.playback-btn:hover:not(:disabled){background:var(--color-accent-hover);box-shadow:var(--shadow-glow)}.playback-btn:disabled{opacity:.5;cursor:not-allowed}.playback-btn.playing{background:var(--color-bg-hover);color:var(--color-text);border:1px solid var(--color-border)}.stop-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;font-size:14px;font-weight:500;transition:var(--transition-fast)}.stop-btn:hover:not(:disabled){background:var(--color-bg-hover);color:var(--color-text)}.stop-btn:disabled{opacity:.5;cursor:not-allowed}.loading-indicator{font-size:13px;color:var(--color-text-muted);margin-left:auto}.error-indicator{font-size:13px;color:var(--color-incorrect);margin-left:auto}.sync-tempo-section{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg)}.tempo-header{margin-bottom:var(--space-md)}.tempo-label{font-size:16px;font-weight:600;color:var(--color-text)}.tempo-controls{display:flex;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-md)}.tempo-field{display:flex;align-items:center;gap:var(--space-sm)}.tempo-field label{font-size:14px;color:var(--color-text-secondary);white-space:nowrap}.tempo-input{width:80px;padding:var(--space-sm) var(--space-md);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-family:var(--font-mono);font-size:14px;text-align:center}.tempo-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-subtle)}.tempo-input:disabled{background:var(--color-bg);color:var(--color-text-muted);cursor:not-allowed}.tempo-ratio{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--color-accent);background:var(--color-accent-subtle);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm)}.tempo-tip{text-align:center;font-size:13px;color:var(--color-text-muted);margin:0}.sync-offset-section{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg)}.offset-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg)}.offset-label{font-size:16px;font-weight:600;color:var(--color-text)}.offset-value{font-family:var(--font-mono);font-size:18px;font-weight:600;color:var(--color-accent);background:var(--color-accent-subtle);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-md)}.nudge-buttons{display:flex;justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-lg)}.nudge-btn{padding:var(--space-sm) var(--space-lg);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);cursor:pointer;font-family:var(--font-mono);font-size:14px;font-weight:500;transition:var(--transition-fast)}.nudge-btn:hover:not(:disabled){background:var(--color-bg-hover);border-color:var(--color-text-muted)}.nudge-btn:disabled{opacity:.5;cursor:not-allowed}.nudge-btn.nudge-large{background:var(--color-bg-card)}.nudge-btn.nudge-large:hover:not(:disabled){background:var(--color-bg-hover);border-color:var(--color-accent);color:var(--color-accent)}.nudge-btn.nudge-small{padding:var(--space-sm) var(--space-md)}.nudge-btn.reset-btn{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.nudge-btn.reset-btn:hover:not(:disabled){background:var(--color-accent);color:var(--color-bg)}.offset-tip{text-align:center;font-size:13px;color:var(--color-text-muted);margin:0}.sync-actions{display:flex;justify-content:flex-end;gap:var(--space-md);padding-top:var(--space-lg);border-top:1px solid var(--color-border)}.sync-view-error{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-lg);min-height:50vh;text-align:center}.sync-view-error h2{font-size:24px;font-weight:600;color:var(--color-incorrect);margin:0}.sync-view-error p{font-size:16px;color:var(--color-text-secondary);max-width:400px}.sync-view-loading{display:flex;align-items:center;justify-content:center;min-height:50vh}.sync-view-loading p{font-size:16px;color:var(--color-text-muted)}@media(max-width:768px){.sync-view{padding:var(--space-md)}.sync-header,.tempo-controls{flex-direction:column;align-items:flex-start;gap:var(--space-md)}.nudge-buttons{flex-wrap:wrap}.nudge-btn{flex:1;min-width:70px;padding:var(--space-sm);font-size:12px}.sync-actions{flex-direction:column}.sync-actions .btn{width:100%}}.sync-video-section{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;position:relative}.zoom-region-editor{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.zoom-region-editor>div:first-child{pointer-events:auto}.zoom-region-editor .zoom-region-controls{display:none}.zoom-region-controls-standalone{padding:var(--space-sm) var(--space-md);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md)}.zoom-region-cards{display:flex;gap:var(--space-lg)}.zoom-region-card{flex:1;padding:var(--space-md);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md)}.zoom-region-card.editing{border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-subtle)}.zoom-region-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md);font-weight:600}.region-status{font-size:12px;font-weight:500;padding:2px 8px;border-radius:var(--radius-sm)}.region-status.defined{background:var(--color-correct-subtle);color:var(--color-correct)}.region-status.default{background:var(--color-bg);color:var(--color-text-muted)}.edit-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap}.zoom-selection-rect{position:absolute;border:2px dashed var(--color-accent);background-color:var(--color-accent-subtle);pointer-events:none}.sync-view-video-mode{min-height:100vh;max-height:100vh;overflow:hidden;gap:var(--space-sm);padding:var(--space-sm) var(--space-md)}.sync-view-video-mode .sync-header{padding-bottom:var(--space-xs);flex-shrink:0}.sync-view-video-mode .sync-video-section{flex:0 0 40vh;position:relative;border-radius:var(--radius-lg);overflow:hidden;background:#000}.sync-view-video-mode .sync-score-horizontal{flex:1 1 auto;min-height:200px;overflow:hidden}.sync-view-video-mode .sync-score-horizontal>div{height:100%}.sync-view-video-mode .sync-actions{flex-shrink:0;padding-top:var(--space-xs)}.video-filename-overlay{position:absolute;top:8px;left:8px;background:#0009;color:#fff;padding:4px 10px;border-radius:var(--radius-sm);font-size:12px;z-index:10;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-controls-row{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);flex-shrink:0;flex-wrap:nowrap;overflow-x:auto;min-height:50px}.video-controls-row .playback-btn,.video-controls-row .stop-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text);cursor:pointer;transition:var(--transition-fast)}.video-controls-row .playback-btn:hover,.video-controls-row .stop-btn:hover{background:var(--color-bg-hover);border-color:var(--color-accent)}.video-controls-row .playback-btn.playing{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.controls-separator{width:1px;height:24px;background:var(--color-border);margin:0 var(--space-xs)}.control-label{font-size:13px;color:var(--color-text-muted);white-space:nowrap}.control-value{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--color-text);min-width:40px;text-align:center}.control-value.offset-display{min-width:60px;color:var(--color-accent)}.control-value.bpm-display{color:var(--color-correct);font-weight:700}.control-hint{font-size:11px;color:var(--color-text-muted);white-space:nowrap}.nudge-btn-small,.reset-btn-small{padding:4px 8px;font-size:12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);cursor:pointer;transition:var(--transition-fast)}.nudge-btn-small:hover,.reset-btn-small:hover{background:var(--color-bg-hover);border-color:var(--color-text-muted)}.nudge-btn-small:disabled,.reset-btn-small:disabled{opacity:.5;cursor:not-allowed}.zoom-btn{padding:4px 10px;font-size:12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-text);cursor:pointer;transition:var(--transition-fast)}.zoom-btn:hover:not(:disabled){background:var(--color-bg-hover);border-color:var(--color-accent)}.zoom-btn:disabled{opacity:.5;cursor:not-allowed}.zoom-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.editing-label{color:var(--color-accent);font-weight:600}.editing-hint{font-size:12px;color:var(--color-text-muted);font-style:italic;margin-right:var(--space-sm)}.zoom-btn.set-btn{background:var(--color-bg-elevated);border-color:var(--color-text-muted)}.zoom-btn.set-btn:hover{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.zoom-btn.clear-btn{background:var(--color-bg);border-color:var(--color-incorrect);color:var(--color-incorrect)}.zoom-btn.clear-btn:hover{background:#ff64641a}.zoom-btn.done-btn{background:var(--color-accent);border-color:var(--color-accent);color:#fff;font-weight:600}.zoom-btn.done-btn:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-glow)}.search-bar{position:relative;width:100%;max-width:400px}.search-bar-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--color-text-muted);pointer-events:none}.search-bar-input{width:100%;padding:var(--space-sm) var(--space-md);padding-left:40px;font-family:var(--font-sans);font-size:14px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);transition:var(--transition-fast)}.search-bar-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-subtle)}.search-bar-input::placeholder{color:var(--color-text-muted)}.search-bar-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;padding:var(--space-xs);cursor:pointer;color:var(--color-text-muted);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}.search-bar-clear:hover{color:var(--color-text);background:var(--color-bg-hover)}.filter-chips{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.filter-chips-section{display:contents}.filter-chips-divider{width:1px;height:24px;background:var(--color-border);margin:0 var(--space-xs);align-self:center}.library-capsule-card{display:block;text-decoration:none;color:inherit;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition-fast)}.library-capsule-card:hover{border-color:var(--color-text-muted);transform:translateY(-2px);box-shadow:var(--shadow-md)}.library-capsule-card.bookmarked{border-color:var(--color-accent)}.card-thumbnail{height:120px;background:linear-gradient(135deg,var(--color-bg-elevated) 0%,var(--color-bg-hover) 100%);position:relative}.card-lock-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center}.card-lock-icon{width:32px;height:32px;color:var(--color-text-muted)}.card-body{padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm)}.card-title{font-size:16px;font-weight:600;color:var(--color-text);margin:0;line-height:1.3}.card-artist{font-size:14px;color:var(--color-text-secondary);margin:0}.card-difficulty{display:flex;align-items:center;gap:var(--space-sm)}.card-stars{color:var(--color-accent);font-size:14px;letter-spacing:1px}.card-difficulty-label{font-size:12px;color:var(--color-text-muted)}.card-tags{display:flex;gap:var(--space-xs);flex-wrap:wrap}.card-tag{padding:2px 8px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:11px;color:var(--color-text-secondary)}.card-layers{display:flex;gap:4px}.card-layer-dot{width:8px;height:8px;border-radius:50%}.card-layer-dot.filled{background:var(--color-accent)}.card-layer-dot.empty{background:var(--color-bg-elevated);border:1px solid var(--color-border)}.card-footer{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-sm);border-top:1px solid var(--color-border-subtle)}.bookmark-button{background:none;border:none;padding:var(--space-xs);cursor:pointer;color:var(--color-text-muted);transition:var(--transition-fast);border-radius:var(--radius-sm)}.bookmark-button:hover{color:var(--color-accent);background:var(--color-accent-subtle)}.bookmark-button.bookmarked{color:var(--color-accent)}.bookmark-icon{width:20px;height:20px}.library-page{min-height:100vh}.library-content{max-width:1400px;margin:0 auto;padding:var(--space-xl)}.library-controls{display:flex;flex-direction:column;gap:var(--space-md);margin-bottom:var(--space-xl)}.library-section{margin-bottom:var(--space-xl)}.library-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.library-section-title{font-size:18px;font-weight:600;color:var(--color-text);margin:0;display:flex;align-items:center;gap:var(--space-sm)}.library-section-title .icon{color:var(--color-accent)}.library-section-count{color:var(--color-text-muted);font-weight:400}.library-section-action{font-size:13px;color:var(--color-text-secondary);background:none;border:none;cursor:pointer;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm)}.library-section-action:hover{color:var(--color-accent);background:var(--color-accent-subtle)}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-md)}.library-empty{text-align:center;padding:var(--space-3xl) var(--space-xl);color:var(--color-text-secondary)}.library-empty-icon{width:64px;height:64px;margin:0 auto var(--space-lg);color:var(--color-text-muted)}.library-empty-title{font-size:18px;font-weight:600;color:var(--color-text);margin:0 0 var(--space-sm)}.library-empty-message{font-size:14px;margin:0 0 var(--space-lg)}.library-loading{text-align:center;padding:var(--space-3xl);color:var(--color-text-secondary)}.library-error{text-align:center;padding:var(--space-3xl);color:var(--color-incorrect)}@media(max-width:1024px){.library-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.library-content{padding:var(--space-md)}.library-grid{grid-template-columns:1fr}.library-controls .input-with-icon,.library-controls .input{width:100%}.library-controls .filter-chips{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:var(--space-sm);padding-bottom:var(--space-xs);scrollbar-width:none}.library-controls .filter-chips::-webkit-scrollbar{display:none}.library-controls .filter-chip{flex-shrink:0}.library-section-title{font-size:16px}.library-empty{padding:var(--space-xl) var(--space-md)}}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--space-xl);background:var(--color-bg)}.login-card{width:100%;max-width:400px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-2xl) var(--space-xl);box-shadow:var(--shadow-md)}.login-header{text-align:center;margin-bottom:var(--space-xl)}.login-title{font-size:24px;font-weight:700;color:var(--color-text);margin-bottom:var(--space-sm)}.login-subtitle{font-size:14px;color:var(--color-text-secondary);line-height:1.5}.login-form{display:flex;flex-direction:column;gap:var(--space-md)}.login-label{font-size:13px;font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-xs);display:block}.login-input{width:100%;padding:10px var(--space-md);font-family:var(--font-sans);font-size:14px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);transition:var(--transition-fast)}.login-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-subtle)}.login-input::placeholder{color:var(--color-text-muted)}.login-submit{width:100%;padding:10px var(--space-lg);font-family:var(--font-sans);font-size:14px;font-weight:600;background:var(--color-accent);color:var(--color-bg);border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast)}.login-submit:hover:not(:disabled){background:var(--color-accent-hover);box-shadow:var(--shadow-glow)}.login-submit:disabled{opacity:.6;cursor:not-allowed}.login-success{text-align:center;padding:var(--space-lg);background:var(--color-correct-subtle);border-radius:var(--radius-md);border:1px solid var(--color-correct)}.login-success-title{font-size:16px;font-weight:600;color:var(--color-correct);margin-bottom:var(--space-sm)}.login-success-text{font-size:14px;color:var(--color-text-secondary);line-height:1.5}.login-error{padding:var(--space-md);background:#dc262614;border:1px solid var(--color-incorrect);border-radius:var(--radius-md);font-size:13px;color:var(--color-incorrect)}.login-back{text-align:center;margin-top:var(--space-lg)}.login-back a{font-size:13px;color:var(--color-text-muted);text-decoration:none;transition:var(--transition-fast)}.login-back a:hover{color:var(--color-accent)}@media(max-width:480px){.login-page{padding:var(--space-md)}.login-card{padding:var(--space-xl) var(--space-md)}}.recording-player{display:flex;flex-direction:column;gap:var(--space-sm)}.recording-player-controls{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--color-bg);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md)}.recording-player-play{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-full);cursor:pointer;flex-shrink:0;transition:var(--transition-fast)}.recording-player-play:hover{opacity:.9}.recording-player-time{font-size:12px;font-family:var(--font-mono);color:var(--color-text-muted);flex-shrink:0;min-width:36px;text-align:center}.recording-player-progress{flex:1;height:6px;background:var(--color-border);border-radius:var(--radius-full);cursor:pointer;position:relative;min-width:0}.recording-player-progress-fill{height:100%;background:var(--color-accent);border-radius:var(--radius-full);transition:width .1s linear;pointer-events:none}.recording-player-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;background:var(--color-warning);border:2px solid var(--color-bg-card);border-radius:var(--radius-full);cursor:pointer;padding:0;z-index:1}.recording-player-marker:hover,.recording-player-marker.active{background:var(--color-accent);transform:translate(-50%,-50%) scale(1.3)}.recording-player-timestamps{display:flex;flex-direction:column;gap:2px}.recording-player-timestamp{display:flex;align-items:baseline;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;text-align:left;transition:var(--transition-fast)}.recording-player-timestamp:hover{background:var(--color-bg)}.recording-player-timestamp.active{background:var(--color-accent-subtle)}.recording-player-timestamp-time{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--color-accent);flex-shrink:0}.recording-player-timestamp-comment{font-size:13px;color:var(--color-text-secondary)}@media(max-width:768px){.recording-player-controls{padding:var(--space-xs) var(--space-sm)}}.submissions-page{min-height:100vh}.submissions-content{max-width:900px;margin:0 auto;padding:var(--space-xl)}.submissions-header{margin-bottom:var(--space-xl)}.submissions-header h1{font-size:24px;font-weight:700;color:var(--color-text);margin:0 0 var(--space-xs)}.submissions-header p{font-size:14px;color:var(--color-text-secondary);margin:0}.submissions-list{display:flex;flex-direction:column;gap:var(--space-md)}.submission-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition-base)}.submission-card:hover{border-color:var(--color-text-muted);box-shadow:var(--shadow-sm)}.submission-card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);cursor:pointer;gap:var(--space-md)}.submission-card-info{flex:1;min-width:0}.submission-card-title{font-size:15px;font-weight:600;color:var(--color-text);margin:0 0 var(--space-xs)}.submission-card-meta{display:flex;align-items:center;gap:var(--space-md);font-size:13px;color:var(--color-text-secondary)}.submission-card-layer{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:600;border-radius:var(--radius-full);background:var(--color-accent-subtle);color:var(--color-accent)}.submission-card-date{font-size:12px;color:var(--color-text-muted)}.submission-status{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;font-size:11px;font-weight:600;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em;flex-shrink:0}.submission-status-pending{background:#eab30826;color:var(--color-warning)}.submission-status-reviewed{background:var(--color-correct-subtle);color:var(--color-correct)}.submission-card-expand{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);transition:var(--transition-fast);flex-shrink:0}.submission-card-expand.expanded{transform:rotate(180deg)}.submission-card-detail{border-top:1px solid var(--color-border-subtle);padding:var(--space-lg)}.submission-card-detail audio{width:100%;margin-bottom:var(--space-md)}.submission-note{font-size:13px;color:var(--color-text-secondary);line-height:1.5;margin-bottom:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-bg);border-radius:var(--radius-md)}.submission-note-label{font-size:11px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-xs)}.submission-feedback{padding:var(--space-md);background:var(--color-correct-subtle);border-radius:var(--radius-md);border-left:3px solid var(--color-correct)}.submission-feedback-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.submission-feedback-title{font-size:13px;font-weight:600;color:var(--color-correct)}.submission-feedback-reviewer{font-size:12px;color:var(--color-text-muted)}.submission-feedback-text{font-size:13px;color:var(--color-text);line-height:1.6}.submission-feedback-timestamps{margin-top:var(--space-sm);display:flex;flex-direction:column;gap:var(--space-xs)}.submission-timestamp{display:flex;align-items:baseline;gap:var(--space-sm);font-size:12px}.submission-timestamp-time{font-family:var(--font-mono);font-weight:600;color:var(--color-accent);flex-shrink:0}.submission-timestamp-comment{color:var(--color-text-secondary)}.submission-card-actions{display:flex;gap:var(--space-sm);margin-top:var(--space-md)}.submissions-empty{text-align:center;padding:var(--space-3xl) var(--space-xl);color:var(--color-text-secondary)}.submissions-empty-title{font-size:18px;font-weight:600;color:var(--color-text);margin:0 0 var(--space-sm)}.submissions-empty-message{font-size:14px;margin:0 0 var(--space-lg)}.submissions-loading{text-align:center;padding:var(--space-3xl);color:var(--color-text-secondary)}.submissions-error{text-align:center;padding:var(--space-3xl);color:var(--color-incorrect)}@media(max-width:768px){.submissions-content{padding:var(--space-md)}.submission-card-header{padding:var(--space-sm) var(--space-md);flex-wrap:wrap}.submission-card-meta{flex-wrap:wrap;gap:var(--space-sm)}.submission-card-detail{padding:var(--space-md)}.submissions-header h1{font-size:20px}}.review-page{min-height:100vh}.review-content{max-width:900px;margin:0 auto;padding:var(--space-xl)}.review-header{margin-bottom:var(--space-lg)}.review-header h1{font-size:24px;font-weight:700;color:var(--color-text);margin:0 0 var(--space-xs)}.review-header p{font-size:14px;color:var(--color-text-secondary);margin:0}.review-tabs{display:flex;gap:var(--space-xs);margin-bottom:var(--space-lg);border-bottom:1px solid var(--color-border);padding-bottom:var(--space-xs)}.review-tab{padding:var(--space-xs) var(--space-md);font-size:13px;font-weight:500;color:var(--color-text-secondary);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:var(--transition-fast);margin-bottom:-1px}.review-tab:hover{color:var(--color-text)}.review-tab.active{color:var(--color-accent);border-bottom-color:var(--color-accent)}.review-list{display:flex;flex-direction:column;gap:var(--space-md)}.review-card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition-base)}.review-card:hover{border-color:var(--color-text-muted);box-shadow:var(--shadow-sm)}.review-card-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);cursor:pointer;gap:var(--space-md)}.review-card-info{flex:1;min-width:0}.review-card-student{font-size:15px;font-weight:600;color:var(--color-text);margin:0 0 var(--space-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.review-card-meta{display:flex;align-items:center;gap:var(--space-md);font-size:13px;color:var(--color-text-secondary)}.review-card-capsule{font-weight:500;color:var(--color-text)}.review-card-layer{display:inline-flex;align-items:center;padding:2px 8px;font-size:11px;font-weight:600;border-radius:var(--radius-full);background:var(--color-accent-subtle);color:var(--color-accent)}.review-card-date{font-size:12px;color:var(--color-text-muted)}.review-card-expand{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);transition:var(--transition-fast);flex-shrink:0}.review-card-expand.expanded{transform:rotate(180deg)}.review-card-detail{border-top:1px solid var(--color-border-subtle);padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md)}.review-student-note{font-size:13px;color:var(--color-text-secondary);line-height:1.5;padding:var(--space-sm) var(--space-md);background:var(--color-bg);border-radius:var(--radius-md)}.review-student-note-label{font-size:11px;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-xs)}.review-feedback-form{display:flex;flex-direction:column;gap:var(--space-md)}.review-feedback-label{font-size:12px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}.review-feedback-textarea{width:100%;padding:var(--space-sm) var(--space-md);font-size:14px;font-family:inherit;line-height:1.5;color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);resize:vertical}.review-feedback-textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-subtle)}.review-feedback-ts-section{display:flex;flex-direction:column;gap:var(--space-sm)}.review-feedback-ts-list{display:flex;flex-direction:column;gap:2px}.review-feedback-ts-entry{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);background:var(--color-bg);border-radius:var(--radius-sm);font-size:13px}.review-feedback-ts-entry .review-feedback-ts-time{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--color-accent);flex-shrink:0}.review-feedback-ts-entry .review-feedback-ts-comment{flex:1;color:var(--color-text-secondary)}.review-feedback-ts-remove{background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:var(--radius-sm)}.review-feedback-ts-remove:hover{background:#ef44441a;color:var(--color-incorrect)}.review-feedback-ts-add{display:flex;align-items:center;gap:var(--space-sm)}.review-feedback-ts-current{font-size:12px;font-family:var(--font-mono);color:var(--color-text-muted);flex-shrink:0}.review-feedback-ts-input{flex:1;padding:var(--space-xs) var(--space-sm);font-size:13px;font-family:inherit;color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.review-feedback-ts-input:focus{outline:none;border-color:var(--color-accent)}.review-feedback-error{font-size:13px;color:var(--color-incorrect)}.review-feedback-success{padding:var(--space-md);background:var(--color-correct-subtle);border-radius:var(--radius-md);color:var(--color-correct);font-size:14px;font-weight:500}.review-feedback-display{padding:var(--space-md);background:var(--color-correct-subtle);border-radius:var(--radius-md);border-left:3px solid var(--color-correct)}.review-feedback-display-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm);flex-wrap:wrap;gap:var(--space-xs)}.review-feedback-display-title{font-size:13px;font-weight:600;color:var(--color-correct)}.review-feedback-display-reviewer{font-size:12px;color:var(--color-text-muted)}.review-feedback-display-text{font-size:13px;color:var(--color-text);line-height:1.6}.review-feedback-display-timestamps{margin-top:var(--space-sm);display:flex;flex-direction:column;gap:var(--space-xs)}.review-feedback-ts-item{display:flex;align-items:baseline;gap:var(--space-sm);font-size:12px}.review-feedback-ts-item .review-feedback-ts-time{font-family:var(--font-mono);font-weight:600;color:var(--color-accent);flex-shrink:0}.review-feedback-ts-item .review-feedback-ts-comment{color:var(--color-text-secondary)}.review-loading{text-align:center;padding:var(--space-3xl);color:var(--color-text-secondary)}.review-error{text-align:center;padding:var(--space-3xl);color:var(--color-incorrect)}.review-empty{text-align:center;padding:var(--space-3xl);color:var(--color-text-secondary);font-size:14px}@media(max-width:768px){.review-content{padding:var(--space-md)}.review-card-header{padding:var(--space-sm) var(--space-md);flex-wrap:wrap}.review-card-meta{flex-wrap:wrap;gap:var(--space-sm)}.review-card-detail{padding:var(--space-md)}.review-header h1{font-size:20px}.review-feedback-ts-add{flex-wrap:wrap}.review-feedback-display-header{flex-direction:column;align-items:flex-start}}:root{--color-bg: #f7f7f5;--color-bg-elevated: #ffffff;--color-bg-card: #ffffff;--color-bg-hover: #ededeb;--color-border: #d8d8d2;--color-border-subtle: #e8e8e2;--color-text: #1a1a1a;--color-text-secondary: #555550;--color-text-muted: #8a8a80;--color-accent: #d4891a;--color-accent-hover: #b8740f;--color-accent-subtle: rgba(212, 137, 26, .12);--color-melody: #2563eb;--color-melody-bg: rgba(37, 99, 235, .1);--color-bass: #dc2626;--color-bass-bg: rgba(220, 38, 38, .1);--color-fills: #16a34a;--color-fills-bg: rgba(22, 163, 74, .1);--color-chords: #9333ea;--color-chords-bg: rgba(147, 51, 234, .1);--color-correct: #16a34a;--color-correct-subtle: rgba(22, 163, 74, .1);--color-incorrect: #dc2626;--color-missed: #9ca3af;--color-warning: #ca8a04;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--space-3xl: 64px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", monospace;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--shadow-glow: 0 0 20px rgba(212, 137, 26, .2);--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.chip-container{min-height:100vh;padding:var(--space-xl);display:flex;flex-direction:column}.chip-header{margin-bottom:var(--space-xl);padding-bottom:var(--space-lg);border-bottom:1px solid var(--color-border)}.chip-header h1{font-size:24px;font-weight:700;margin-bottom:var(--space-sm)}.chip-header p{font-size:14px;color:var(--color-text-secondary)}.chip-breadcrumb{font-size:12px;color:var(--color-text-muted);margin-bottom:var(--space-md)}.chip-breadcrumb a{color:var(--color-accent);text-decoration:none}.chip-breadcrumb a:hover{text-decoration:underline}.chip-content{flex:1;display:flex;align-items:center;justify-content:center}.chip-mockup{width:100%;max-width:1200px}.chip-notes{margin-top:var(--space-xl);padding:var(--space-lg);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.chip-notes h3{font-size:14px;font-weight:600;margin-bottom:var(--space-md);color:var(--color-accent)}.chip-notes ul{font-size:13px;color:var(--color-text-secondary);padding-left:var(--space-lg)}.chip-notes li{margin-bottom:var(--space-xs)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);font-family:var(--font-sans);font-size:14px;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast);text-decoration:none}.btn-primary{background:var(--color-accent);color:var(--color-bg)}.btn-primary:hover{background:var(--color-accent-hover);box-shadow:var(--shadow-glow)}.btn-secondary{background:var(--color-bg-card);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-bg-hover);border-color:var(--color-text-muted)}.btn-ghost{background:transparent;color:var(--color-text-secondary)}.btn-ghost:hover{color:var(--color-text);background:var(--color-bg-hover)}.btn-lg{padding:var(--space-md) var(--space-xl);font-size:16px;border-radius:var(--radius-lg)}.btn-sm{padding:var(--space-xs) var(--space-md);font-size:13px}.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-md)}.btn-icon-sm{width:32px;height:32px}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition-base)}.card:hover{border-color:var(--color-text-muted);transform:translateY(-2px);box-shadow:var(--shadow-md)}.card-header{padding:var(--space-lg);border-bottom:1px solid var(--color-border-subtle)}.card-body{padding:var(--space-lg)}.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:11px;font-weight:600;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.05em}.badge-approved{background:var(--color-correct);color:#fff}.badge-yolo{background:var(--color-warning);color:var(--color-bg)}.badge-layer-melody{background:var(--color-melody-bg);color:var(--color-melody)}.badge-layer-bass{background:var(--color-bass-bg);color:var(--color-bass)}.badge-layer-fills{background:var(--color-fills-bg);color:var(--color-fills)}.badge-layer-chords{background:var(--color-chords-bg);color:var(--color-chords)}.input{width:100%;padding:var(--space-sm) var(--space-md);font-family:var(--font-sans);font-size:14px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);transition:var(--transition-fast)}.input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-subtle)}.input::placeholder{color:var(--color-text-muted)}.input-with-icon{position:relative}.input-with-icon .input{padding-left:40px}.input-with-icon .input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-text-muted)}.progress-bar{height:8px;background:var(--color-bg-hover);border-radius:var(--radius-full);overflow:hidden}.progress-bar-fill{height:100%;border-radius:var(--radius-full);transition:width var(--transition-slow)}.progress-bar-fill.melody{background:var(--color-melody)}.progress-bar-fill.bass{background:var(--color-bass)}.progress-bar-fill.fills{background:var(--color-fills)}.progress-bar-fill.chords{background:var(--color-chords)}.progress-bar-fill.accent{background:var(--color-accent)}.filter-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:13px;font-weight:500;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-fast)}.filter-chip:hover{background:var(--color-bg-hover);color:var(--color-text)}.filter-chip.active{background:var(--color-accent-subtle);border-color:var(--color-accent);color:var(--color-accent)}.tabs{display:flex;gap:var(--space-sm);border-bottom:1px solid var(--color-border);padding-bottom:var(--space-sm)}.tab{padding:var(--space-sm) var(--space-md);font-size:14px;font-weight:500;color:var(--color-text-secondary);background:none;border:none;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-fast)}.tab:hover{color:var(--color-text);background:var(--color-bg-hover)}.tab.active{color:var(--color-accent);background:var(--color-accent-subtle)}.toggle{display:inline-flex;align-items:center;gap:var(--space-sm);cursor:pointer}.toggle-switch{width:44px;height:24px;background:var(--color-bg-hover);border-radius:var(--radius-full);position:relative;transition:var(--transition-fast)}.toggle-switch:after{content:"";position:absolute;width:18px;height:18px;background:var(--color-text);border-radius:50%;top:3px;left:3px;transition:var(--transition-fast)}.toggle.active .toggle-switch{background:var(--color-accent)}.toggle.active .toggle-switch:after{left:23px}.toggle-label{font-size:14px;color:var(--color-text-secondary)}.tablature{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);overflow-x:auto}.tablature-staff{position:relative;height:120px;min-width:600px}.tablature-string{position:absolute;left:0;right:0;height:1px;background:var(--color-border)}.tablature-string:nth-child(1){top:0}.tablature-string:nth-child(2){top:20%}.tablature-string:nth-child(3){top:40%}.tablature-string:nth-child(4){top:60%}.tablature-string:nth-child(5){top:80%}.tablature-string:nth-child(6){top:100%}.tablature-note{position:absolute;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:600;border-radius:var(--radius-sm);transform:translate(-50%,-50%)}.tablature-note.melody{background:var(--color-melody-bg);color:var(--color-melody);border:1px solid var(--color-melody)}.tablature-note.bass{background:var(--color-bass-bg);color:var(--color-bass);border:1px solid var(--color-bass)}.tablature-note.fills{background:var(--color-fills-bg);color:var(--color-fills);border:1px solid var(--color-fills)}.tablature-note.chords{background:var(--color-chords-bg);color:var(--color-chords);border:1px solid var(--color-chords)}.tablature-note.correct{background:var(--color-correct);color:#fff;border-color:var(--color-correct)}.tablature-note.incorrect{background:var(--color-incorrect);color:#fff;border-color:var(--color-incorrect)}.tablature-note.missed{background:var(--color-missed);color:#fff;border-color:var(--color-missed);opacity:.5}.tablature-cursor{position:absolute;width:2px;top:0;bottom:0;background:var(--color-accent);animation:cursor-blink 1s ease-in-out infinite}@keyframes cursor-blink{0%,to{opacity:1}50%{opacity:.3}}.container{max-width:1400px;margin:0 auto;padding:0 var(--space-xl)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}.grid{display:grid}.grid-cols-2{grid-template-columns:repeat(2,1fr)}.grid-cols-3{grid-template-columns:repeat(3,1fr)}.grid-cols-4{grid-template-columns:repeat(4,1fr)}.w-full{width:100%}.h-full{height:100%}.mt-xs{margin-top:var(--space-xs)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mt-2xl{margin-top:var(--space-2xl)}.mb-xs{margin-bottom:var(--space-xs)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.opacity-50{opacity:.5}.opacity-70{opacity:.7}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon{width:20px;height:20px;display:inline-block}.icon-sm{width:16px;height:16px}.icon-lg{width:24px;height:24px}.icon-xl{width:32px;height:32px}.playback-bar{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.playback-controls{display:flex;align-items:center;gap:var(--space-sm)}.playback-timeline{flex:1;height:6px;background:var(--color-bg-hover);border-radius:var(--radius-full);position:relative;cursor:pointer}.playback-timeline-progress{position:absolute;left:0;top:0;height:100%;background:var(--color-accent);border-radius:var(--radius-full)}.playback-timeline-scrubber{position:absolute;width:14px;height:14px;background:var(--color-accent);border:2px solid var(--color-bg);border-radius:50%;top:50%;transform:translate(-50%,-50%);cursor:grab}.playback-time{font-family:var(--font-mono);font-size:12px;color:var(--color-text-secondary);min-width:100px;text-align:center}.playback-tempo{display:flex;align-items:center;gap:var(--space-sm);font-size:13px;color:var(--color-text-secondary)}.playback-tempo input{width:50px;padding:4px 8px;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-family:var(--font-mono);font-size:12px;text-align:center}.layer-toggles{display:flex;gap:var(--space-sm)}.layer-toggle{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-fast)}.layer-toggle.melody.active{background:var(--color-melody-bg);border-color:var(--color-melody)}.layer-toggle.bass.active{background:var(--color-bass-bg);border-color:var(--color-bass)}.layer-toggle.fills.active{background:var(--color-fills-bg);border-color:var(--color-fills)}.layer-toggle.chords.active{background:var(--color-chords-bg);border-color:var(--color-chords)}.layer-dot{width:8px;height:8px;border-radius:50%}.layer-dot.melody{background:var(--color-melody)}.layer-dot.bass{background:var(--color-bass)}.layer-dot.fills{background:var(--color-fills)}.layer-dot.chords{background:var(--color-chords)}.layer-label{font-size:12px;font-weight:500}.stats-bar{display:flex;gap:var(--space-lg);padding:var(--space-lg);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.stat-item{display:flex;flex-direction:column;align-items:center;text-align:center}.stat-value{font-size:24px;font-weight:700;color:var(--color-text)}.stat-label{font-size:12px;color:var(--color-text-muted);margin-top:var(--space-xs)}.stat-value.accent{color:var(--color-accent)}.stat-value.correct{color:var(--color-correct)}.stat-value.incorrect{color:var(--color-incorrect)}.chat-container{display:flex;flex-direction:column;height:400px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.chat-messages{flex:1;overflow-y:auto;padding:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md)}.chat-message{max-width:80%;padding:var(--space-md);border-radius:var(--radius-lg)}.chat-message.user{align-self:flex-end;background:var(--color-accent);color:var(--color-bg);border-bottom-right-radius:var(--radius-sm)}.chat-message.assistant{align-self:flex-start;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-bottom-left-radius:var(--radius-sm)}.chat-input-container{padding:var(--space-md);border-top:1px solid var(--color-border);display:flex;gap:var(--space-sm)}.chat-input{flex:1;padding:var(--space-sm) var(--space-md);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:14px}.quick-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.quick-action{padding:var(--space-xs) var(--space-md);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:12px;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-fast)}.quick-action:hover{background:var(--color-bg-hover);color:var(--color-text);border-color:var(--color-accent)}.callout{padding:var(--space-md);border-radius:var(--radius-md);border-left:3px solid}.callout-info{background:var(--color-melody-bg);border-color:var(--color-melody)}.callout-warning{background:#eab30826;border-color:var(--color-warning)}.callout-success{background:var(--color-fills-bg);border-color:var(--color-correct)}.callout-title{font-size:13px;font-weight:600;margin-bottom:var(--space-xs)}.callout-text{font-size:13px;color:var(--color-text-secondary);line-height:1.5}.fretboard{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg)}.fretboard-grid{display:grid;grid-template-columns:30px repeat(12,1fr);gap:2px}.fretboard-label{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--color-text-muted)}.fret-cell{height:24px;background:var(--color-bg-elevated);border:1px solid var(--color-border-subtle);cursor:pointer;transition:var(--transition-fast)}.fret-cell:hover{background:var(--color-bg-hover)}.fret-cell.active{background:var(--color-accent-subtle);border-color:var(--color-accent)}.fret-marker{background:var(--color-bg-hover)}@media(max-width:1024px){.grid-cols-4,.grid-cols-3{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.grid-cols-4,.grid-cols-3,.grid-cols-2{grid-template-columns:1fr}.chip-container{padding:var(--space-md)}.playback-bar{flex-wrap:wrap}}