:root{--bg:#0a1a2f;--panel:#10233d;--text:#e7ebf5;--muted:#8aa0bd;--accent:#2fd4ff;--accent-ink:#04121f;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100vh;margin:0;padding:0}#root{min-height:100vh}button{font-family:inherit}.app{max-width:1100px;margin:0 auto;padding:2rem 1.5rem 4rem}.app-header{text-align:center;margin-bottom:2rem}.app-header h1{letter-spacing:-.02em;margin:0;font-size:2.4rem}.tagline{color:var(--muted);margin:.3rem 0 0}.upload{justify-content:center;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.upload-btn{background:var(--accent);color:var(--accent-ink);cursor:pointer;border-radius:10px;padding:.7rem 1.4rem;font-weight:600;transition:filter .15s}.upload-btn:hover{filter:brightness(1.08)}.filename{color:var(--muted);font-size:.9rem}.upload-or{color:var(--muted);font-size:.85rem}.yt-box{align-items:center;gap:.4rem;display:flex}.yt-input{color:var(--text);background:#0f1424;border:1px solid #ffffff26;border-radius:8px;min-width:220px;padding:.6rem .8rem;font-size:.9rem}.yt-input:focus{border-color:var(--accent);outline:none}.yt-btn{border:1px solid var(--accent);color:var(--accent);cursor:pointer;background:0 0;border-radius:8px;padding:.6rem 1rem;font-weight:600}.yt-btn:disabled{opacity:.5;cursor:default}.error{color:#ff9db0;text-align:center;background:#3a1620;border-radius:8px;margin-bottom:1rem;padding:.8rem 1rem}.loading,.placeholder{text-align:center;color:var(--muted);padding:3rem 1rem}.spinner{border:3px solid #ffffff26;border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;margin:0 auto 1rem;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.meta{justify-content:center;gap:2.5rem;margin-bottom:1.5rem;display:flex}.meta-item{flex-direction:column;align-items:center;display:flex}.meta-value{font-size:1.6rem;font-weight:700}.meta-key{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.75rem}.transport,.player{background:var(--panel);border-radius:12px;margin-bottom:1.5rem;padding:1rem 1.2rem;box-shadow:0 4px 20px #00000059}.player-row,.transport-row{align-items:center;gap:.9rem;display:flex}.player-row+.player-row,.transport-row+.transport-row{margin-top:.7rem}.play-btn{background:var(--accent);color:var(--accent-ink);cursor:pointer;border:none;border-radius:50%;flex-shrink:0;width:44px;height:44px;font-size:1.1rem}.seek{accent-color:var(--accent);cursor:pointer;flex:1}.time{font-variant-numeric:tabular-nums;color:var(--muted);text-align:center;min-width:42px;font-size:.85rem}.speeds{justify-content:center}.speed-label{color:var(--muted);font-size:.85rem}.speed-btn{color:var(--text);cursor:pointer;background:0 0;border:1px solid #ffffff26;border-radius:6px;padding:.25rem .6rem;font-size:.8rem}.speed-btn.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}.grid-hint{text-align:center;color:var(--muted);margin:0 0 .8rem;font-size:.8rem}.chord-grid-viewport{scrollbar-width:thin;border-radius:12px;max-height:62vh;overflow-y:auto}.chord-grid{grid-template-columns:repeat(var(--measures-per-row,4), 1fr);gap:10px;display:grid}.measure-block{grid-template-columns:repeat(var(--bpm-cells,4), 1fr);background:#ffffff0f;border-radius:8px;gap:2px;padding:2px;display:grid;overflow:hidden}.beat-cell{aspect-ratio:1;background:var(--panel);cursor:pointer;justify-content:center;align-items:center;min-height:50px;transition:background 80ms;display:flex;position:relative}.beat-cell:hover{background:#1e263f}.beat-cell.pad{cursor:default;pointer-events:none;background:0 0}.chord-label{letter-spacing:-.01em;pointer-events:none;font-size:1.2rem;font-weight:700}.beat-cell.in-active-chord{background:#2fd4ff24}.beat-cell.active{background:var(--accent);z-index:2;box-shadow:inset 0 0 0 2px #fff,0 0 14px 2px #2fd4ff99}.beat-cell.active .chord-label{color:var(--accent-ink)}.beat-cell.active:empty:after{content:"";background:var(--accent-ink);border-radius:50%;width:10px;height:10px}.chord-label sub,.chord-label .q{font-size:.7em}.trackbar{background:var(--panel);border-radius:12px;flex-direction:column;gap:.7rem;margin-bottom:1rem;padding:.9rem 1rem;display:flex}.trackbar.optin{border:1px dashed #ffffff24;flex-flow:wrap;justify-content:space-between;align-items:center;gap:1rem}.optin-text{color:var(--muted);max-width:560px;font-size:.88rem}.sep-btn{background:var(--accent);color:var(--accent-ink);cursor:pointer;white-space:nowrap;border:none;border-radius:10px;padding:.6rem 1.2rem;font-weight:600}.sep-progress-inline{flex:1;min-width:240px}.sep-progress-inline span{color:var(--muted);font-size:.85rem}.progress-bar{background:#ffffff1a;border-radius:6px;height:8px;margin-top:.4rem;overflow:hidden}.progress-fill{background:var(--accent);height:100%;transition:width .4s}.error-inline{color:#ff9db0;font-size:.85rem}.track-buttons{flex-wrap:wrap;gap:.6rem;display:flex}.track-chip{cursor:pointer;color:var(--text);background:#1b2237;border:2px solid #0000;border-radius:10px;align-items:center;gap:.5rem;padding:.55rem .9rem;font-size:.9rem;transition:all .12s;display:flex}.track-chip .chip-icon{font-size:1.2rem}.track-chip .chip-label{font-weight:600}.track-chip .chip-dot{background:var(--muted);border-radius:50%;width:10px;height:10px}.track-chip.on{border-color:var(--accent);background:#2fd4ff24}.track-chip.on .chip-dot{background:var(--accent);box-shadow:0 0 8px var(--accent)}.track-chip.off{opacity:.5}.track-chip.off .chip-dot{background:#555}.track-presets{flex-wrap:wrap;gap:.5rem;display:flex}.track-presets button{color:var(--text);cursor:pointer;background:0 0;border:1px solid #ffffff29;border-radius:8px;padding:.35rem .8rem;font-size:.8rem}.track-presets button:hover{border-color:var(--accent)}.app-boot{justify-content:center;align-items:center;min-height:100vh;display:flex}.auth-screen{justify-content:center;align-items:center;min-height:100vh;padding:1.5rem;display:flex}.auth-card{background:var(--panel);text-align:center;border-radius:16px;width:100%;max-width:380px;padding:2rem;box-shadow:0 10px 40px #0006}.auth-logo{margin:0;font-size:2rem}.auth-logo-img{border-radius:12px;width:100%;max-width:300px;height:auto;margin:0 auto .5rem;display:block}.auth-tabs{gap:.5rem;margin:1.4rem 0 1rem;display:flex}.auth-tabs button{color:var(--text);cursor:pointer;background:0 0;border:1px solid #ffffff26;border-radius:8px;flex:1;padding:.55rem}.auth-tabs button.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}.auth-form{text-align:left;flex-direction:column;gap:.9rem;display:flex}.auth-form label{color:var(--muted);flex-direction:column;gap:.35rem;font-size:.85rem;display:flex}.auth-form input{color:var(--text);background:#0f1424;border:1px solid #ffffff26;border-radius:8px;padding:.6rem .8rem;font-size:1rem}.auth-form input:focus{border-color:var(--accent);outline:none}.auth-submit{background:var(--accent);color:var(--accent-ink);cursor:pointer;border:none;border-radius:10px;margin-top:.3rem;padding:.7rem;font-weight:600}.auth-submit:disabled{opacity:.6}.app-header.with-user{text-align:left;justify-content:space-between;align-items:center;display:flex}.app-header.with-user h1{font-size:1.6rem}.brand-logo{border-radius:6px;width:auto;height:44px;display:block}.user-box{align-items:center;gap:.8rem;display:flex}.home-btn{cursor:pointer;background:0 0;border:none;padding:0}.home-link{color:var(--text);cursor:pointer;background:0 0;border:1px solid #ffffff2e;border-radius:8px;padding:.4rem .9rem;font-size:.85rem}.home-link:hover{border-color:var(--accent)}.user-email{color:var(--muted);font-size:.85rem}.logout-btn{color:var(--text);cursor:pointer;background:0 0;border:1px solid #ffffff2e;border-radius:8px;padding:.4rem .9rem;font-size:.85rem}.logout-btn:hover{border-color:var(--accent)}.info-banner{color:var(--text);background:#2fd4ff1a;border:1px solid #2fd4ff4d;border-radius:10px;margin-bottom:1rem;padding:.7rem 1rem;font-size:.88rem}.my-songs{margin-top:2.5rem}.my-songs h3{margin:0 0 .8rem}.songs-empty{color:var(--muted);text-align:center;margin-top:2rem}.songs-list{flex-direction:column;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.song-item{background:var(--panel);cursor:pointer;border-radius:10px;justify-content:space-between;align-items:center;padding:.8rem 1rem;transition:background .1s;display:flex}.song-item:hover{background:#1e263f}.song-info{flex-direction:column;gap:.2rem;display:flex}.song-name{font-weight:600}.song-meta{color:var(--muted);font-size:.8rem}.song-del{cursor:pointer;opacity:.6;background:0 0;border:none;font-size:1.1rem}.song-del:hover{opacity:1}