@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap";:root{--bg-deep:#0b0b0d;--bg-surface:#131317;--bg-surface-elevated:#1b1b22;--primary:#8b5cf6;--primary-glow:#8b5cf666;--secondary:#ec4899;--secondary-glow:#ec489966;--accent:#10b981;--accent-glow:#10b98166;--text-primary:#f3f4f6;--text-secondary:#9ca3af;--text-muted:#6b7280;--border-thin:#ffffff14;--border-glow:#8b5cf633;--shadow-sm:0 2px 8px #00000080;--shadow-md:0 8px 20px #000000b3;--shadow-lg:0 16px 40px #000000e6;--neon-glow:0 0 15px var(--primary-glow);--font-sans:"Outfit", "Inter", system-ui, -apple-system, sans-serif;font-family:var(--font-sans);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background-color:var(--bg-deep);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:var(--bg-deep);justify-content:center;min-height:100dvh;margin:0;padding:0;display:flex;overflow-x:hidden}#root{background-color:var(--bg-surface);border-left:1px solid var(--border-thin);border-right:1px solid var(--border-thin);width:100%;max-width:600px;min-height:100dvh;box-shadow:var(--shadow-lg);box-sizing:border-box;flex-direction:column;display:flex;position:relative}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-deep)}::-webkit-scrollbar-thumb{background:var(--bg-surface-elevated);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-glow{0%{transform:scale(1);box-shadow:0 0 30px #ec48994d}50%{transform:scale(1.03);box-shadow:0 0 45px #ec489980}to{transform:scale(1);box-shadow:0 0 30px #ec48994d}}.animate-fade{animation:.35s cubic-bezier(.16,1,.3,1) forwards fadeIn}.app-header{-webkit-backdrop-filter:blur(12px);z-index:10;background:#131317bf;border-bottom:1px solid #8b5cf626;flex-direction:column;padding:16px 20px;display:flex;position:sticky;top:0;box-shadow:0 4px 20px #00000040}.brand{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.brand-logo{align-items:center;gap:8px;display:flex}.audio-wave-logo{align-items:flex-end;gap:3px;width:18px;height:18px;margin-right:2px;display:flex}.audio-wave-logo .bar{background:linear-gradient(to top, var(--primary), var(--secondary));transform-origin:bottom;border-radius:1.5px;width:3.5px;height:100%;animation:.9s ease-in-out infinite alternate wave-play}.audio-wave-logo .bar:nth-child(2){animation-duration:.65s;animation-delay:.15s}.audio-wave-logo .bar:nth-child(3){animation-duration:.8s;animation-delay:.3s}@keyframes wave-play{0%{transform:scaleY(.25)}to{transform:scaleY(1)}}.brand-version-badge{color:var(--primary);text-transform:uppercase;letter-spacing:.5px;background:#8b5cf61f;border:1px solid #8b5cf640;border-radius:8px;align-self:center;margin-left:6px;padding:2px 6px;font-size:.65rem;font-weight:700;box-shadow:0 0 6px #8b5cf61a}.brand-version-badge.player-version{color:var(--secondary);background:#ec48991f;border-color:#ec489940;box-shadow:0 0 6px #ec48991a}.brand h1{letter-spacing:-.5px;background:linear-gradient(135deg, var(--text-primary) 30%, var(--primary) 100%);-webkit-text-fill-color:transparent;text-shadow:0 0 15px #8b5cf626;-webkit-background-clip:text;margin:0;font-size:24px;font-weight:800}.player-title-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--secondary));color:#fff;cursor:pointer;box-shadow:var(--shadow-sm);border:none;border-radius:20px;align-items:center;gap:6px;min-height:44px;padding:10px 18px;font-size:14px;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.btn-primary:hover{box-shadow:0 0 15px var(--primary-glow);transform:translateY(-1px)}.btn-primary:active{transform:translateY(1px)}.btn-icon{background:var(--bg-surface-elevated);border:1px solid var(--border-thin);color:var(--text-primary);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:all .2s;display:flex}.btn-icon:hover{border-color:var(--text-secondary);background:#ffffff0d}.search-wrapper{width:100%;position:relative}.search-input{background-color:var(--bg-deep);border:1px solid var(--border-thin);width:100%;color:var(--text-primary);box-sizing:border-box;border-radius:24px;outline:none;min-height:44px;padding:12px 16px 12px 44px;font-size:15px;transition:all .3s}.search-input:focus{border-color:var(--primary);box-shadow:0 0 10px #8b5cf626}.search-icon{color:var(--text-muted);pointer-events:none;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.library-content{flex-direction:column;flex:1;gap:12px;padding:20px;display:flex;overflow-y:auto}.song-card{border:1px solid var(--border-thin);cursor:pointer;background-color:#ffffff05;border-radius:16px;justify-content:space-between;align-items:center;padding:16px;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden}.song-card:before{content:"";background:linear-gradient(to bottom, var(--primary), var(--secondary));opacity:0;width:4px;height:100%;transition:opacity .2s;position:absolute;top:0;left:0}.song-card:hover{box-shadow:var(--shadow-md);background-color:#ffffff0a;border-color:#8b5cf64d;transform:translateY(-2px)}.song-card:hover:before{opacity:1}.song-info{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.song-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:16px;font-weight:600;overflow:hidden}.song-artist{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:13px;overflow:hidden}.song-meta{align-items:center;gap:12px;display:flex}.track-indicators{gap:4px;display:flex}.indicator-dot{background-color:var(--bg-surface-elevated);color:var(--text-muted);border:1px solid var(--border-thin);border-radius:4px;padding:2px 6px;font-size:9px;font-weight:700}.indicator-dot.active{color:var(--primary);background-color:#8b5cf61a;border-color:#8b5cf64d}.delete-btn{opacity:0;color:var(--text-muted);border-radius:50%;justify-content:center;align-items:center;min-width:44px;min-height:44px;transition:opacity .2s;display:flex}.song-card:hover .delete-btn{opacity:1}.delete-btn:hover{color:#ef4444;background-color:#ef44441a}.empty-state{text-align:center;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:60px 20px;display:flex}.empty-icon{color:var(--text-muted);font-size:48px}.song-card-processing{opacity:.7;cursor:not-allowed!important;background-color:#ec489905!important;border-color:#ec489933!important}.song-card-processing:hover{box-shadow:none!important;transform:none!important}.song-card-processing:before{animation:1.5s ease-in-out infinite pulse-bar;opacity:1!important;background:linear-gradient(to bottom, var(--secondary), #ec48994d)!important}@keyframes pulse-bar{0%,to{opacity:.5}50%{opacity:1}}.song-card-error{opacity:.9;background-color:#ef44440d!important;border-color:#ef444466!important}.song-card-error:hover{box-shadow:none!important;transform:none!important}.song-card-error:before{opacity:1!important;background:var(--danger,#ef4444)!important}.error-message{color:var(--danger,#ef4444);word-break:break-all;font-size:13px}.clear-job-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:18px;transition:all .2s}.clear-job-btn:hover{color:var(--danger,#ef4444);background-color:#ef44441a}.song-progress-info{align-items:center;gap:6px;margin-top:4px;display:flex}.progress-emoji{font-size:14px;animation:1.5s linear infinite spin;display:inline-block}.progress-text{color:var(--secondary);letter-spacing:.3px;font-size:12px;font-weight:600}.progress-bar-wrapper{background-color:var(--bg-deep);border:1px solid var(--border-thin);border-radius:2px;width:100%;height:4px;margin-top:6px;overflow:hidden}.progress-bar-fill{background:linear-gradient(90deg, var(--primary), var(--secondary));height:100%;box-shadow:0 0 8px var(--secondary-glow);border-radius:2px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.progress-bar-fill:after{content:"";background:linear-gradient(90deg,#0000 0%,#fff3 50%,#0000 100%);animation:1.5s ease-in-out infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;box-sizing:border-box;background-color:#000000bf;justify-content:center;align-items:center;width:100%;max-width:600px;height:100%;display:flex;position:fixed;top:0;left:50%;transform:translate(-50%)}.modal-content{background-color:var(--bg-surface-elevated);border:1px solid var(--border-thin);width:calc(100% - 40px);max-width:500px;box-shadow:var(--shadow-lg);box-sizing:border-box;border-radius:20px;max-height:85vh;padding:24px 20px;animation:.35s cubic-bezier(.34,1.56,.64,1) forwards modalScaleIn;overflow-y:auto}@keyframes modalScaleIn{0%{opacity:0;transform:scale(.9)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.sync-status-badge{text-align:center;white-space:nowrap;letter-spacing:-.2px;border:1px solid #0000;border-radius:4px;padding:2px 8px;font-size:10px;font-weight:700}.sync-status-badge.sync-complete{color:#10b981;background-color:#10b98114;border-color:#10b98140;box-shadow:0 0 8px #10b9811a}.sync-status-badge.sync-custom{color:#ffb300;background-color:#ffb30014;border-color:#ffb30040;box-shadow:0 0 8px #ffb3001a}.sync-status-badge.sync-pending{color:#ef4444;background-color:#ef444414;border-color:#ef444440;box-shadow:0 0 8px #ef44441a}.modal-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.modal-title{margin:0;font-size:18px;font-weight:700}.modal-tabs{background-color:var(--bg-deep);border:1px solid var(--border-thin);border-radius:12px;margin-bottom:20px;padding:4px;display:flex}.modal-tab{text-align:center;color:var(--text-secondary);cursor:pointer;border-radius:8px;flex:1;justify-content:center;align-items:center;min-height:40px;padding:10px;font-size:13px;font-weight:600;transition:all .2s;display:flex}.modal-tab.active{background-color:var(--bg-surface-elevated);color:var(--text-primary);box-shadow:var(--shadow-sm);border:1px solid var(--border-thin)}.form-group{flex-direction:column;gap:8px;margin-bottom:16px;display:flex}.form-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:12px;font-weight:600}.form-input{background-color:var(--bg-deep);border:1px solid var(--border-thin);width:100%;color:var(--text-primary);box-sizing:border-box;border-radius:10px;outline:none;min-height:44px;padding:12px;font-size:14px;transition:border-color .2s}.form-input:focus{border-color:var(--primary)}.file-upload-row{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;display:grid}.file-input-wrapper{flex-direction:column;gap:6px;display:flex;position:relative;overflow:hidden}.file-input-label{background-color:var(--bg-deep);border:1px dashed var(--border-thin);text-align:center;color:var(--text-secondary);cursor:pointer;box-sizing:border-box;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;min-height:44px;padding:12px;font-size:13px;transition:all .2s;display:flex}.file-input-label:hover{border-color:var(--primary);color:var(--text-primary)}.file-input-label.has-file{border-color:var(--accent);color:var(--text-primary);background-color:#10b9810d}.file-input-label span{font-weight:500}.file-input-label small{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;max-width:100%;margin-top:2px;font-size:10px;display:block;overflow:hidden}.real-file-input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}.form-submit-btn{background:linear-gradient(135deg, var(--primary), var(--secondary));color:#fff;cursor:pointer;width:100%;box-shadow:var(--shadow-sm);border:none;border-radius:24px;justify-content:center;align-items:center;gap:8px;min-height:48px;margin-top:10px;padding:14px;font-size:15px;font-weight:600;transition:all .2s;display:flex}.form-submit-btn:disabled{opacity:.5;cursor:not-allowed;background:var(--text-muted)}.progress-container{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:30px 10px;display:flex}.spinner{border:4px solid var(--border-thin);border-top:4px solid var(--primary);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}.progress-status{color:var(--text-primary);font-size:15px;font-weight:600}.progress-msg{color:var(--text-secondary);font-size:13px}.skeleton-loader{flex-direction:column;gap:12px;display:flex}.skeleton-item{background:linear-gradient(90deg, var(--bg-surface-elevated) 25%, #252631 37%, var(--bg-surface-elevated) 63%);background-size:400% 100%;border-radius:16px;height:74px;animation:1.4s infinite skeleton-loading}@keyframes skeleton-loading{0%{background-position:100%}to{background-position:0%}}.player-container{box-sizing:border-box;flex-direction:column;flex:1;gap:10px;padding:12px 14px;display:flex}.player-header{-webkit-backdrop-filter:blur(12px);z-index:10;background:#131317bf;border-bottom:1px solid #ec489926;align-items:center;gap:12px;padding:14px 16px 12px;display:flex;position:sticky;top:0;box-shadow:0 4px 20px #00000040}.player-song-details{text-align:left;flex:1;min-width:0}.player-song-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;letter-spacing:-.5px;margin:0;font-size:22px;font-weight:800;overflow:hidden}.player-song-artist{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;margin:2px 0 0;font-size:12px;overflow:hidden}.player-loading-overlay{color:var(--text-secondary);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:60px 20px;display:flex}.mixer-panel{flex-direction:column;gap:8px;display:flex}.mixer-channel{border:1px solid var(--border-thin);background-color:#ffffff05;border-radius:12px;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;transition:border-color .2s,background-color .2s;display:flex}.mixer-channel:hover{background-color:#ffffff08}.mixer-channel.metronome-channel{box-shadow:0 0 15px #ec48991f,inset 0 0 12px #ec48990f;background:linear-gradient(135deg,#ec48990d 0%,#8b5cf608 100%)!important;border:1.5px solid #ec489973!important}.mixer-channel.metronome-channel:hover{background:linear-gradient(135deg,#ec489914 0%,#8b5cf60d 100%)!important;box-shadow:0 0 20px #ec489940,inset 0 0 12px #ec489914!important}.metronome-channel .channel-info{width:92px!important}.metronome-channel .channel-name{letter-spacing:.8px;color:var(--secondary)!important;text-shadow:0 0 8px #ec489999!important;font-size:13px!important;font-weight:800!important}.channel-info{text-align:left;flex-shrink:0;width:75px}.channel-name{text-transform:uppercase;letter-spacing:.5px;color:var(--text-primary);margin:0;font-size:11px;font-weight:700}.channel-type-badge{color:var(--text-muted);margin-top:1px;font-size:9px;display:block}.channel-controls{flex:1;align-items:center;gap:10px;display:flex}.volume-slider-wrapper{flex:1;align-items:center;gap:8px;display:flex}.volume-value{font-size:11px;font-family:var(--font-mono);color:var(--text-secondary);text-align:right;cursor:pointer;flex-shrink:0;width:28px;transition:color .15s,text-shadow .15s}.volume-value:hover{color:var(--primary);text-shadow:0 0 4px var(--primary-glow)}.solo-btn{background:var(--bg-deep);border:1px solid var(--border-thin);color:var(--text-secondary);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;border-radius:8px;justify-content:center;align-items:center;min-width:28px;min-height:26px;padding:4px 8px;font-size:10px;font-weight:700;transition:all .2s;display:flex}.solo-btn:hover{color:var(--text-primary);border-color:var(--text-secondary)}.solo-btn.soloed{color:#ffb300;background-color:#ffb3001f;border-color:#ffb30066;box-shadow:0 0 10px #ffb30040}.slider-input{appearance:none;background:var(--bg-deep);border:1px solid var(--border-thin);border-radius:2px;outline:none;width:100%;height:4px;transition:border-color .2s}.slider-input:focus{border-color:#8b5cf666}.slider-input::-webkit-slider-thumb{appearance:none;background:linear-gradient(135deg, var(--primary), var(--secondary));cursor:pointer;width:12px;height:12px;box-shadow:0 0 6px var(--primary-glow);border-radius:50%;transition:transform .1s}.slider-input::-webkit-slider-thumb:hover{transform:scale(1.25)}.mute-btn{background:var(--bg-deep);border:1px solid var(--border-thin);color:var(--text-secondary);cursor:pointer;box-sizing:border-box;border-radius:8px;justify-content:center;align-items:center;min-width:48px;min-height:26px;padding:4px 8px;font-size:10px;font-weight:700;transition:all .2s;display:flex}.mute-btn:hover{color:var(--text-primary);border-color:var(--text-secondary)}.mute-btn.muted{color:#f87171;background-color:#ef44441f;border-color:#ef44444d;box-shadow:0 0 10px #ef444426}.master-panel{background-color:#8b5cf608;border:1px solid #8b5cf61f;border-radius:16px;align-items:center;gap:16px;padding:16px 20px;display:flex}.master-info{text-align:left;flex-shrink:0;width:90px}.master-name{letter-spacing:.5px;color:var(--primary);margin:0;font-size:14px;font-weight:800}.playback-panel{background-color:var(--bg-surface-elevated);border:1px solid var(--border-thin);box-shadow:var(--shadow-md);border-radius:20px;justify-content:center;align-items:center;gap:16px;margin-top:auto;padding:18px 24px;display:flex}.playback-btn{cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;min-width:48px;min-height:48px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.playback-btn.play{background:linear-gradient(135deg, var(--primary), var(--secondary));color:#fff;width:58px;height:58px;box-shadow:0 0 15px var(--primary-glow)}.playback-btn.play:hover{transform:scale(1.06);box-shadow:0 0 20px #8b5cf699,0 0 10px #ec489966}.playback-btn.play:active{transform:scale(.96)}.playback-btn.control{background-color:var(--bg-deep);border:1px solid var(--border-thin);color:var(--text-primary);width:48px;height:48px}.playback-btn.control:hover{border-color:var(--text-secondary);background-color:#ffffff08}.playback-btn.control:active{transform:scale(.94)}.settings-panel{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;display:grid}.btn-settings{background:var(--bg-surface-elevated);border:1px solid var(--border-thin);color:var(--text-secondary);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:6px;min-height:34px;padding:6px 12px;font-size:12px;font-weight:600;transition:all .2s;display:flex}.btn-settings:hover:not(:disabled){color:var(--text-primary);border-color:var(--primary);background-color:#8b5cf60d}.btn-settings:disabled{opacity:.5;cursor:not-allowed}.btn-settings.save{border-color:#10b98133}.btn-settings.save:hover:not(:disabled){border-color:var(--accent);background-color:#10b9810d}.btn-settings.reset{border-color:#ec489933}.btn-settings.reset:hover:not(:disabled){border-color:var(--secondary);background-color:#ec48990d}.metronome-controls-wrapper{flex-shrink:0;align-items:center;gap:8px;display:flex}.bpm-control-group{background-color:var(--bg-deep);border:1px solid var(--border-thin);border-radius:12px;align-items:center;padding:2px;display:flex;overflow:hidden}.bpm-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;font-size:16px;font-weight:700;transition:background-color .15s;display:flex}.bpm-btn:hover{background-color:var(--bg-surface-elevated);color:var(--text-primary)}.bpm-value-display{color:var(--text-primary);text-align:center;min-width:44px;padding:0 4px;font-size:12px;font-weight:700}.offset-control-group{background-color:var(--bg-deep);border:1px solid var(--border-thin);border-radius:12px;align-items:center;padding:2px;display:flex}.offset-value-display{color:var(--text-secondary);text-align:center;min-width:44px;padding:0 6px;font-size:11px;font-weight:700}.seekbar-panel{background-color:var(--bg-surface-elevated);border:1px solid var(--border-thin);box-shadow:var(--shadow-sm);border-radius:10px;align-items:center;gap:8px;margin-top:4px;padding:6px 10px;display:flex}.time-label{font-size:12px;font-family:var(--font-mono);color:var(--text-secondary);text-align:center;flex-shrink:0;min-width:38px}.seekbar-input{appearance:none;background:var(--bg-deep);border:1px solid var(--border-thin);border-radius:3px;outline:none;flex:1;width:100%;height:6px;transition:border-color .2s}.seekbar-input::-webkit-slider-thumb{appearance:none;background:linear-gradient(135deg, var(--secondary), var(--primary));cursor:pointer;width:14px;height:14px;box-shadow:0 0 6px var(--secondary-glow);border-radius:50%;transition:transform .1s}.seekbar-input::-webkit-slider-thumb:hover{transform:scale(1.3)}.bpm-input-wrapper{align-items:center;gap:2px;padding:0 4px;display:flex}.bpm-input-field{color:var(--text-primary);text-align:center;background:0 0;border:none;outline:none;width:38px;margin:0;padding:0;font-family:inherit;font-size:13px;font-weight:700}.bpm-input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.bpm-input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.bpm-input-field[type=number]{-moz-appearance:textfield}.bpm-suffix{color:var(--text-muted);letter-spacing:.5px;font-size:9px;font-weight:600}.freebox-control-group{align-items:center;margin-left:8px;display:flex}.freebox-toggle-label{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;display:flex}.freebox-checkbox{appearance:none;border:1px solid var(--border-thin);background-color:var(--bg-deep);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;width:14px;height:14px;transition:all .2s;display:flex}.freebox-checkbox:checked{background-color:var(--secondary);border-color:var(--secondary);box-shadow:0 0 6px var(--secondary-glow)}.freebox-checkbox:checked:after{content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:4px;height:8px;margin-bottom:2px;transform:rotate(45deg)}.freebox-text{color:var(--text-secondary);font-size:11px;font-weight:600}.count-in-overlay{-webkit-backdrop-filter:blur(8px);z-index:999;pointer-events:none;background-color:#0b0b0dd9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.count-in-box{border:2px solid var(--secondary);background-color:#ec48990d;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:40px 60px;animation:1.5s ease-in-out infinite pulse-glow;display:flex;box-shadow:0 0 30px #ec48994d,inset 0 0 15px #ec48991a}.count-in-number{color:var(--secondary);font-size:96px;font-weight:900;font-family:var(--font-mono);text-shadow:0 0 20px var(--secondary-glow);line-height:1}.count-in-label{letter-spacing:2px;color:var(--text-primary);opacity:.8;font-size:14px;font-weight:800}.mixer-channel.metronome-channel{flex-direction:column;align-items:stretch;gap:14px}.metronome-strip-row-1{justify-content:space-between;align-items:center;gap:16px;width:100%;display:flex}.metronome-strip-row-2{border-top:1px dashed #ffffff14;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;width:100%;padding-top:12px;display:flex}.metronome-tempo-section{align-items:stretch;gap:8px;width:100%;display:flex}.bpm-control-box{background-color:var(--bg-deep);border:1px solid var(--border-thin);border-radius:8px;flex-direction:column;flex:1;gap:4px;padding:4px 6px;display:flex}.control-box-title{color:var(--text-secondary);text-align:center;letter-spacing:.5px;border-bottom:1px solid #ffffff0a;margin-bottom:1px;padding-bottom:2px;font-size:9px;font-weight:700}.bpm-main-controls{justify-content:center;align-items:center;gap:4px;display:flex}.bpm-fine-controls{border-top:1px solid #ffffff0a;justify-content:space-between;align-items:center;gap:8px;padding-top:4px;display:flex}.bpm-btn.fine{background-color:#ffffff05;border:1px solid #ffffff0d;border-radius:6px;width:auto;min-width:42px;height:22px;padding:0 4px;font-size:10px}.bpm-btn.fine:hover{background-color:var(--bg-surface-elevated)}.fine-label{color:var(--text-muted);letter-spacing:.5px;font-size:9px;font-weight:600}.tap-tempo-btn{background:var(--bg-deep);width:80px;color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;box-sizing:border-box;border:2px dashed #8b5cf64d;border-radius:12px;justify-content:center;align-items:center;padding:6px;transition:all .15s cubic-bezier(.4,0,.2,1);display:flex}.tap-inner-content{flex-direction:column;justify-content:center;align-items:center;gap:1px;display:flex}.tap-text-main{letter-spacing:.5px;font-size:14px;font-weight:700}.tap-text-sub{color:var(--primary);margin-top:1px;font-size:8px;font-weight:600}.tap-tempo-btn:hover{border-color:var(--primary);color:var(--text-primary);background:#8b5cf60d}.tap-tempo-btn:active{border-color:var(--primary);color:var(--text-primary);background:#8b5cf626;border-style:solid;transform:scale(.96)}.tap-tempo-btn.tap-active{border-style:solid;border-color:var(--primary);color:var(--primary);background:#8b5cf614;animation:.3s ease-out tap-pulse}@keyframes tap-pulse{0%{box-shadow:0 0 0 0 var(--primary-glow)}to{box-shadow:0 0 0 8px #0000}}.strong-beat-group{border-top:1px solid #ffffff0a;justify-content:space-between;align-items:center;gap:8px;margin-top:2px;padding-top:8px;display:flex}.strong-beat-label{color:var(--text-muted);letter-spacing:.3px;white-space:nowrap;font-size:10px;font-weight:600}.strong-beat-buttons{gap:6px;display:flex}.strong-beat-btn{border:1px solid var(--border-thin);background:var(--bg-deep);width:36px;height:32px;color:var(--text-secondary);cursor:pointer;border-radius:8px;font-size:14px;font-weight:700;transition:all .15s}.strong-beat-btn:hover{border-color:var(--primary);color:var(--text-primary)}.strong-beat-btn.selected{background:linear-gradient(135deg, var(--primary), var(--secondary));color:#fff;box-shadow:0 0 10px var(--primary-glow);border-color:#0000}.scene-list-container{flex-direction:column;gap:10px;max-height:350px;margin-top:16px;padding-right:4px;display:flex;overflow-y:auto}.scene-list-item{border:1px solid var(--border-thin);cursor:pointer;background-color:#ffffff05;border-radius:12px;justify-content:space-between;align-items:center;padding:12px 16px;transition:all .2s;display:flex}.scene-list-item:hover{border-color:var(--primary);background-color:#ffffff0a;box-shadow:0 0 10px #8b5cf61a}.scene-list-item.default-item{background-color:#8b5cf608;border-color:#8b5cf633}.scene-list-item.default-item:hover{border-color:var(--primary);box-shadow:0 0 10px var(--primary-glow);background-color:#8b5cf60f}.scene-info-block{text-align:left;flex-direction:column;gap:4px;display:flex}.scene-name-label{color:var(--text-primary);font-size:14px;font-weight:700}.scene-desc-label{color:var(--text-muted);font-size:11px}.restore-tag{color:var(--primary);background-color:#8b5cf61a;border-radius:8px;padding:2px 8px;font-size:10px;font-weight:700}.delete-scene-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:6px;transition:all .15s;display:flex}.delete-scene-btn:hover{color:#ef4444;background-color:#ef444414}.empty-scene-message{color:var(--text-muted);text-align:center;padding:30px 10px;font-size:13px}.mixdown-panel{justify-content:center;width:100%;margin-top:16px;display:flex}.mixdown-btn{background:linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);width:100%;height:52px;color:var(--text-primary);cursor:pointer;box-shadow:0 4px 12px var(--primary-glow);-webkit-user-select:none;user-select:none;touch-action:manipulation;border:none;border-radius:14px;justify-content:center;align-items:center;gap:8px;font-size:14px;font-weight:700;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.mixdown-btn:hover:not(:disabled){box-shadow:0 6px 16px var(--primary-glow);filter:brightness(1.1);transform:translateY(-2px)}.mixdown-btn:active:not(:disabled){filter:brightness(.95);transform:translateY(1px)}.mixdown-btn:disabled{background:var(--bg-deep);border:1px solid var(--border-thin);color:var(--text-muted);box-shadow:none;cursor:not-allowed}.mixdown-spinner{border:3px solid #fff3;border-top-color:var(--text-primary);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite mixdown-spin}@keyframes mixdown-spin{to{transform:rotate(360deg)}}.mixdown-btn.ready{background:linear-gradient(135deg,#059669 0%,#10b981 100%);box-shadow:0 4px 14px #10b98166}.mixdown-btn.ready:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 18px #10b98199}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite mixdown-pulse}@keyframes mixdown-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(.985)}}.playback-panel{background-color:var(--bg-surface-elevated);border:1px solid var(--border-thin);box-shadow:var(--shadow-md);border-radius:20px;flex-direction:column;gap:12px;margin-top:auto;padding:14px 20px;display:flex}.playback-row-speed{border-bottom:1px solid #ffffff0d;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;width:100%;padding-bottom:10px;display:flex}.playback-row-transport{flex-wrap:nowrap;justify-content:center;align-items:center;gap:8px;width:100%;display:flex}.playback-control-item{align-items:center;gap:6px;display:flex}.playback-label{color:var(--text-secondary);font-size:12px;font-weight:600}.playback-input-field{text-align:center;border:1px solid var(--border-thin);background-color:var(--bg-deep);width:45px;color:var(--text-primary);border-radius:6px;outline:none;padding:4px 6px;font-family:inherit;font-size:13px;font-weight:700}.playback-value-monitor{text-align:center;min-width:45px;color:var(--text-primary);background-color:var(--bg-deep);border:1px solid var(--border-thin);border-radius:6px;padding:4px 6px;font-size:13px;font-weight:700;display:inline-block}.playback-input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.playback-input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.playback-input-field[type=number]{-moz-appearance:textfield}.speed-bpm-btn{background-color:var(--bg-deep);border:1px solid var(--border-thin);color:var(--text-secondary);cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;font-weight:700;transition:all .15s;display:flex}.speed-bpm-btn:hover{background-color:var(--bg-surface-elevated);color:var(--text-primary);border-color:var(--primary)}.speed-bpm-btn:active{transform:scale(.92)}.speed-display-text{font-size:13px;font-family:var(--font-mono);color:var(--text-primary);text-align:center;cursor:pointer;border:1px solid #0000;border-radius:4px;min-width:42px;padding:2px 4px;font-weight:700;transition:all .2s}.speed-display-text.active{color:var(--secondary);border:1px dashed var(--secondary);background-color:#ec48991a}.playback-divider{background-color:var(--border-thin);width:1px;height:14px}.transport-divider{background-color:var(--border-thin);width:1px;height:32px;margin:0 4px}.playback-btn.control.marker-btn{border:1px solid var(--border-thin);background-color:var(--bg-deep);border-radius:12px;align-items:center;gap:4px;width:auto;height:42px;min-height:42px;padding:0 10px;font-size:12px;transition:all .2s;display:flex}.playback-btn.control.marker-btn.active-secondary{border-color:var(--secondary);background-color:#ec48990d}.playback-btn.control.marker-btn.active-primary{border-color:var(--primary);box-shadow:0 0 8px #8b5cf633}.playback-btn.control.marker-btn.disabled{opacity:.4;cursor:not-allowed}@media (width<=480px){.player-container{gap:4px;padding:4px 6px}.player-header{gap:4px;padding:6px 8px}.btn-icon{width:30px;height:30px}.player-song-title{font-size:15px}.player-song-artist{font-size:10px}.brand-version-badge.player-version{padding:1px 4px;font-size:.6rem}.settings-panel{gap:4px;margin-bottom:2px}.btn-settings{border-radius:6px!important;min-height:26px!important;padding:2px 6px!important;font-size:10px!important}.mixer-panel{gap:4px}.mixer-channel{border-radius:6px;gap:6px;padding:4px 8px}.channel-info{width:55px}.channel-name{font-size:9.5px}.channel-type-badge{font-size:7.5px}.channel-controls,.volume-slider-wrapper{gap:6px}.volume-value{width:24px;font-size:10px}.slider-input{border-radius:3px;height:6px}.slider-input::-webkit-slider-thumb{width:18px!important;height:18px!important}.mute-btn{border-radius:8px!important;min-width:54px!important;min-height:36px!important;padding:4px 8px!important;font-size:11px!important}.solo-btn{border-radius:8px!important;min-width:34px!important;min-height:36px!important;padding:4px 6px!important;font-size:11px!important}.mixer-channel.metronome-channel{gap:4px;padding:6px 10px;border-width:1.5px!important;box-shadow:0 0 12px #ec489926!important}.metronome-channel .channel-info{width:70px!important}.metronome-channel .channel-name{font-size:10px!important}.metronome-strip-row-1{gap:4px}.metronome-strip-row-2{gap:4px;padding-top:4px}.metronome-tempo-section{gap:4px}.bpm-control-box{border-radius:4px;padding:2px 4px}.control-box-title{margin-bottom:0;padding-bottom:1px;font-size:7.5px}.bpm-main-controls{gap:2px}.bpm-btn{border-radius:3px;width:18px;height:18px;font-size:9px}.bpm-input-wrapper{gap:1px;padding:0 2px}.bpm-input-field{width:28px;font-size:10px}.bpm-suffix{font-size:7.5px}.bpm-fine-controls{gap:2px;padding-top:1px}.bpm-btn.fine{border-radius:3px;min-width:28px;height:16px;font-size:7.5px}.fine-label{font-size:7.5px}.tap-tempo-btn{border-radius:6px;width:48px;padding:2px}.tap-text-main{font-size:10px}.tap-text-sub{font-size:6.5px}.strong-beat-group{gap:4px;margin-top:0;padding-top:2px}.strong-beat-label{font-size:7.5px}.strong-beat-buttons{gap:3px}.strong-beat-btn{border-radius:3px;width:20px;height:18px;font-size:9px}.freebox-control-group,.freebox-toggle-label{gap:3px}.freebox-checkbox{width:10px;height:10px}.freebox-text{font-size:7.5px}.master-panel{border-radius:6px;gap:6px;margin-top:1px;padding:4px 8px}.master-info{width:55px}.master-name{font-size:9.5px}.seekbar-panel{border-radius:6px;gap:4px;margin-top:1px;padding:2px 6px}.time-label{min-width:25px;font-size:9.5px}.seekbar-input{height:6px}.seekbar-input::-webkit-slider-thumb{width:20px;height:20px}.playback-panel{border-radius:12px;gap:6px;padding:8px 10px;margin-top:6px!important}.playback-row-speed{gap:8px;padding-bottom:6px}.playback-row-transport{justify-content:center;flex-wrap:nowrap!important;gap:4px!important}.playback-label{font-size:11px!important}.playback-input-field{width:38px!important;padding:2px 4px!important;font-size:12px!important}.playback-value-monitor{min-width:38px!important;padding:2px 4px!important;font-size:12px!important}.speed-bpm-btn{border-radius:6px!important;width:30px!important;height:30px!important;font-size:13px!important}.speed-display-text{min-width:38px!important;font-size:12px!important}.playback-divider{height:14px}.playback-btn.control.marker-btn{border-radius:8px!important;gap:2px!important;height:38px!important;min-height:38px!important;padding:0 6px!important;font-size:10px!important}.playback-btn.play{width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important}.playback-btn.control.stop{width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important}.transport-divider{height:24px;margin:0 2px}.lcd-display-container{border-radius:8px!important;gap:6px!important;padding:6px 10px!important}.lcd-meta h3{text-shadow:0 0 8px #ffb300!important;font-size:.8rem!important}.lcd-meta p{font-size:.65rem!important}.lcd-beats{gap:4px!important}.lcd-beats div{width:5px!important;height:5px!important}.lcd-tempo span:first-child{font-size:.55rem!important}.lcd-tempo div span:first-child{font-size:1.15rem!important}.lcd-tempo div span:last-child{font-size:.55rem!important}.mixdown-panel{margin-top:2px}.mixdown-btn{border-radius:8px;height:32px;font-size:11px}.library-content{gap:8px!important;padding:12px 10px!important}.song-card{border-radius:12px!important;padding:12px 14px!important}.song-title{letter-spacing:-.3px!important;font-size:14px!important}.song-artist{font-size:11.5px!important}.song-meta{gap:6px!important}.track-indicators{gap:2px!important}.indicator-dot{padding:1px 4px!important;font-size:8px!important}.sync-status-badge{padding:1px 5px!important;font-size:8px!important}.delete-btn{opacity:1!important;min-width:38px!important;min-height:38px!important}}.login-screen-wrapper{background-color:var(--bg-surface);box-sizing:border-box;flex:1;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{background-color:var(--bg-surface-elevated);border:1px solid var(--border-thin);width:100%;max-width:400px;box-shadow:var(--shadow-lg);box-sizing:border-box;text-align:center;border-radius:24px;padding:40px 30px}.login-brand{justify-content:center;align-items:center;gap:10px;margin-bottom:8px;display:flex}.login-brand h1{letter-spacing:-.5px;background:linear-gradient(135deg, var(--text-primary), var(--text-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:28px;font-weight:800}.login-subtitle{color:var(--text-secondary);margin:0 0 32px;font-size:13px;font-weight:500}.login-password-input{text-align:center;font-size:16px!important}.login-password-input::placeholder{font-size:14px}.login-error-msg{color:#ef4444;text-align:center;margin:8px 0 0;font-size:12px;font-weight:600}.login-btn{height:48px;margin-top:24px!important;font-size:16px!important;font-weight:700!important}.login-role-selection{flex-direction:column;gap:16px;margin-top:24px;display:flex}.login-role-btn{cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;border:1px solid var(--border-thin);border-radius:16px;justify-content:center;align-items:center;gap:10px;width:100%;height:64px;font-size:16px;font-weight:700;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex}.login-role-btn.user-btn{color:var(--text-primary);background:#8b5cf60d;border-color:#8b5cf640}.login-role-btn.user-btn:hover{border-color:var(--primary);box-shadow:0 0 15px var(--primary-glow);background:#8b5cf61f;transform:translateY(-2px)}.login-role-btn.admin-btn{color:var(--text-primary);background:#ec48990d;border-color:#ec489940}.login-role-btn.admin-btn:hover{border-color:var(--secondary);box-shadow:0 0 15px var(--secondary-glow);background:#ec48991f;transform:translateY(-2px)}.login-actions-row{gap:12px;margin-top:24px;display:flex}.login-actions-row .back-btn{cursor:pointer;border-radius:12px;flex:1;height:48px;font-size:14px;font-weight:600;transition:all .2s}.login-actions-row .back-btn:hover{border-color:var(--text-muted)!important;color:var(--text-primary)!important;background:#ffffff0a!important}.login-actions-row .login-btn{flex:2;margin-top:0!important}.admin-settings-container{box-sizing:border-box;flex-direction:column;min-height:100vh;padding:0 20px 40px;display:flex}.settings-content{box-sizing:border-box;flex:1;width:100%;max-width:900px;margin:30px auto 0}.settings-cards-grid{grid-template-columns:repeat(2,1fr);gap:24px;display:grid}@media (width<=768px){.settings-cards-grid{grid-template-columns:1fr;gap:16px}}.settings-card{background-color:var(--bg-surface-elevated);border:1px solid var(--border-thin);box-shadow:var(--shadow-md);text-align:left;box-sizing:border-box;border-radius:24px;flex-direction:column;padding:30px 24px;display:flex;position:relative;overflow:hidden}.settings-card.card-glow:before{content:"";background:linear-gradient(90deg, var(--primary), var(--secondary));height:4px;position:absolute;top:0;left:0;right:0}.card-header-icon{margin-bottom:12px;font-size:24px}.settings-card h3{color:var(--text-primary);margin:0 0 8px;font-size:18px;font-weight:800}.card-description{color:var(--text-secondary);margin:0 0 24px;font-size:13px;line-height:1.4}.settings-card .form-group{margin-bottom:16px}.settings-card .form-label{color:var(--text-muted);margin-bottom:6px;font-size:12px;font-weight:700;display:block}.settings-card .form-input{box-sizing:border-box;width:100%}.settings-error-msg{color:#ef4444;margin:0 0 12px;font-size:12px;font-weight:600}.settings-success-msg{color:#10b981;margin:0 0 12px;font-size:12px;font-weight:600}.settings-btn{border-radius:12px;width:100%;height:44px;margin-top:8px;font-size:14px;font-weight:700}.btn-auto-analyze{background:linear-gradient(135deg, var(--primary), var(--secondary));color:#fff;cursor:pointer;border:none;border-radius:12px;align-items:center;gap:8px;min-height:40px;padding:10px 16px;font-size:13px;font-weight:700;transition:all .3s;display:flex;box-shadow:0 4px 12px #8b5cf64d}.btn-auto-analyze:hover{box-shadow:0 6px 20px #8b5cf680, 0 0 10px var(--secondary-glow);transform:translateY(-2px)}.btn-auto-analyze:disabled{background:var(--text-muted);box-shadow:none;cursor:not-allowed;transform:none}.analyze-results-container{flex-direction:column;gap:16px;margin-top:16px;display:flex}.analyze-result-row{border:1px solid var(--border-thin);background-color:#ffffff08;border-radius:12px;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.analyze-result-label{color:var(--text-secondary);font-size:14px;font-weight:500}.analyze-result-value{color:var(--text-primary);font-size:16px;font-weight:700;font-family:var(--font-sans)}.analyze-result-value.confidence-high{color:var(--accent)}.analyze-result-value.confidence-medium{color:#fbbf24}.analyze-result-value.confidence-low{color:#f87171}.analyze-warning-banner{color:#fca5a5;background-color:#ef44441a;border:1px solid #ef444433;border-radius:12px;align-items:flex-start;gap:8px;margin-top:8px;padding:12px 16px;font-size:13px;line-height:1.5;display:flex}.analyze-warning-icon{flex-shrink:0;font-size:16px}.analyze-progress-container{flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:40px 20px;display:flex}.analyze-spinner{border:4px solid #8b5cf61a;border-left-color:var(--primary);border-radius:50%;width:48px;height:48px;animation:1s linear infinite analyze-spin}@keyframes analyze-spin{to{transform:rotate(360deg)}}.analyze-progress-text{color:var(--text-primary);text-align:center;font-size:15px;font-weight:600}.analyze-progress-subtext{color:var(--text-secondary);text-align:center;font-size:13px}.slider-input,.seekbar-input{touch-action:pan-y}@media (pointer:coarse) and (orientation:landscape) and (width>=1000px){#root{max-width:1240px}.player-container{grid-template-columns:1.1fr 1fr;grid-template-areas:"pheader pheader""pmixer psettings""pmixer pmaster""pmixer pseek""pmixer pplayback""pmixer pmixdown";align-items:start;gap:8px 14px;display:grid}.player-container>.player-header{grid-area:pheader}.player-container>.settings-panel{grid-area:psettings;margin-bottom:0}.player-container>.mixer-panel{grid-area:pmixer}.player-container>.master-panel{grid-area:pmaster}.player-container>.seekbar-panel{grid-area:pseek;margin-top:0}.player-container>.playback-panel{grid-area:pplayback;margin-top:0}.player-container>.mixdown-panel{grid-area:pmixdown}.player-container>.player-loading-overlay{grid-column:1/-1}.playback-panel{gap:10px;padding:12px 16px}.master-panel{padding:10px 16px}}.loading-spinner-wrapper{background:#0a0a0c;flex-direction:column;justify-content:center;align-items:center;height:100vh;display:flex}.loading-spinner-circle{border:3px solid #ffffff1a;border-top:3px solid var(--accent-color,#7000ff);border-radius:50%;width:40px;height:40px;animation:1s linear infinite loading-spinner-spin}.loading-spinner-text{color:#888;letter-spacing:-.3px;margin-top:20px;font-size:14px}@keyframes loading-spinner-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pad-mode .mode-btn,.pad-mode .btn-tool-action,.pad-mode .power-tool-group button,.pad-mode .power-tool-group select{min-width:44px;min-height:44px;padding:8px 14px;font-size:15px}.pad-mode .power-tool-group{gap:8px}.pad-mode .power-tool-label{font-size:14px}.pad-mode{-webkit-user-select:none;user-select:none}.drum-viewer-overlay{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:1000;color:#f3f4f6;background:#0a0a0fd9;justify-content:center;align-items:center;width:100vw;height:100vh;font-family:Inter,-apple-system,sans-serif;animation:.3s ease-out fadeIn;display:flex;position:fixed;top:0;left:0}.drum-viewer-window{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#16161dcc;border:1px solid #ffffff14;border-radius:20px;flex-direction:column;width:92vw;height:96vh;display:flex;overflow:hidden;box-shadow:0 20px 50px #00000080,0 0 40px #8b5cf626}.drum-viewer-header{background:#19192366;border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:12px 24px;display:flex}.drum-viewer-title-section{flex-direction:column;gap:4px;display:flex}.drum-viewer-title{background:linear-gradient(135deg,#fff 0%,#a78bfa 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:1.25rem;font-weight:700}.drum-viewer-subtitle{color:#9ca3af;margin:0;font-size:.85rem}.drum-viewer-meta{align-items:center;gap:12px;display:flex}.status-badge{letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:6px 12px;font-size:.75rem;font-weight:600}.status-badge.red{color:#ef4444;background:#ef444426;border:1px solid #ef444440;box-shadow:0 0 10px #ef44441a}.status-badge.green{color:#10b981;background:#10b98126;border:1px solid #10b98140;box-shadow:0 0 10px #10b9811a}.close-btn{color:#9ca3af;cursor:pointer;background:#ffffff0d;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.close-btn:hover{color:#ef4444;background:#ef444433;transform:rotate(90deg)}.drum-viewer-body{background:#0f0f1680;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.timeline-outer-container{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex;overflow:hidden auto}.timeline-controls-bar{background:#14141e4d;border-bottom:1px solid #ffffff0a;flex-wrap:wrap;align-items:center;gap:24px;padding:12px 24px;display:flex}.control-item{color:#d1d5db;align-items:center;gap:8px;font-size:.85rem;display:flex}.zoom-slider{accent-color:#a78bfa;cursor:pointer;height:6px}.timeline-scroll-wrapper::-webkit-scrollbar{height:14px}.timeline-scroll-wrapper::-webkit-scrollbar-track{background:#ffffff0f;border-radius:8px}.timeline-scroll-wrapper::-webkit-scrollbar-thumb{background:#a78bfa;border:3px solid #00000040;border-radius:8px}.timeline-scroll-wrapper::-webkit-scrollbar-thumb:hover{background:#c4b5fd}.timeline-scroll-wrapper{scrollbar-color:#a78bfa #ffffff0f;scrollbar-width:auto}.mode-btn{color:#fff;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;align-items:center;gap:4px;padding:6px 12px;font-size:.8rem;transition:all .2s;display:flex}.mode-btn:hover{background:#ffffff1a;border-color:#fff3}.mode-btn.active{color:#a78bfa;background:#8b5cf633;border-color:#8b5cf6;box-shadow:0 0 10px #8b5cf633}.timeline-area{align-items:stretch;display:flex}.timeline-gutter{z-index:6;background:#14141cf5;border-right:1px solid #ffffff0f;flex-direction:column;flex:0 0 84px;width:84px;display:flex}.lane-gutter{flex-direction:column;display:flex}.gutter-bar-spacer{border-bottom:1px solid #ffffff0d}.gutter-lyric-spacer{color:#9ca3af;border-top:1px solid #ffffff0f;align-items:center;padding-left:12px;font-size:.7rem;font-weight:700;display:flex}.timeline-scroll-wrapper{border-bottom:1px solid #ffffff0d;flex:1;min-width:0;height:434px;min-height:0;position:relative;overflow:auto hidden}.timeline-stack{flex-direction:column;display:flex;position:relative}.bar-strip{background:#0a0a1080;border-bottom:1px solid #ffffff0d;position:relative}.lyric-strip{background:#0a0a1080;border-top:1px solid #ffffff0f;position:relative}.lyric-syl{white-space:pre-line;color:#e5e7eb;cursor:grab;-webkit-user-select:none;user-select:none;border-left:2px solid #38bdf899;border-radius:0 3px 3px 0;padding:2px 4px;line-height:1.1;position:absolute;top:4px}.lyric-syl:hover{color:#fff;background:#38bdf82e}.lyric-syl:active{cursor:grabbing;background:#38bdf84d}.lyric-syl-edit{color:#fff;z-index:3;width:160px;font:inherit;white-space:pre-wrap;resize:both;background:#0b0b12;border:1px solid #38bdf8;border-radius:3px;outline:none;padding:2px 5px;line-height:1.25;position:absolute;top:4px;overflow:auto}.timeline-grid{min-width:100%;height:100%;position:relative}.timeline-lanes{flex-direction:column;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.timeline-lane-background{border-bottom:1px dashed #ffffff0a;flex:1;align-items:center;display:flex;position:relative}.timeline-lane-background:last-child{border-bottom:none}.timeline-labels-sticky{z-index:10;pointer-events:none;background:linear-gradient(90deg,#16161df2 80%,#16161d00 100%);border-right:1px solid #ffffff0a;flex-direction:column;width:100px;height:100%;display:flex;position:absolute;top:0;left:0}.lane-label{letter-spacing:.05em;text-transform:uppercase;flex:1;align-items:center;padding-left:16px;font-size:.8rem;font-weight:600;display:flex}.lane-label.hihat{color:#fbbf24}.lane-label.snare{color:#22d3ee}.lane-label.kick{color:#f43f5e}.timeline-svg{cursor:crosshair;width:100%;height:100%;position:absolute;top:0;left:0}.playhead-line{pointer-events:none;z-index:5;background:#8b5cf6;width:2px;height:100%;transition:left 50ms linear;position:absolute;top:0;box-shadow:0 0 10px #8b5cf6,0 0 20px #8b5cf680}.playhead-time-badge{color:#fff;white-space:nowrap;background:#8b5cf6;border-radius:4px;padding:2px 6px;font-size:.65rem;font-weight:700;position:absolute;top:4px;transform:translate(-50%);box-shadow:0 2px 6px #0000004d}.drum-viewer-loading-screen,.drum-viewer-empty-screen{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:40px;display:flex}.viewer-spinner{border:3px solid #8b5cf61a;border-top-color:#8b5cf6;border-radius:50%;width:50px;height:50px;animation:1s linear infinite spin;box-shadow:0 0 20px #8b5cf633}.generate-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8b5cf6 0%,#6d28d9 100%);border:none;border-radius:30px;padding:12px 28px;font-size:1rem;font-weight:600;transition:all .3s;box-shadow:0 4px 15px #8b5cf666}.generate-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #8b5cf699}.generate-btn:disabled{opacity:.5;cursor:not-allowed}.gen-progress{flex-direction:column;align-items:center;gap:8px;width:360px;max-width:80vw;display:flex}.gen-progress-bar{background:#8b5cf626;border-radius:6px;width:100%;height:8px;overflow:hidden}.gen-progress-fill{background:linear-gradient(90deg,#8b5cf6,#c4b5fd);border-radius:6px;width:40%;height:100%;animation:1.2s ease-in-out infinite genIndeterminate}@keyframes genIndeterminate{0%{transform:translate(-110%)}to{transform:translate(310%)}}.gen-progress-text{color:#ddd6fe;margin:2px 0 0;font-weight:600}.gen-progress-sub{color:#9ca3af;margin:0;font-size:.85rem}.gen-progress-warn{color:#fbbf24;margin:2px 0 0;font-size:.85rem}.gen-done-toast{z-index:9999;color:#fff;background:#10b981f2;border-radius:24px;padding:10px 20px;font-weight:600;animation:.25s fadeIn;position:fixed;top:18px;left:50%;transform:translate(-50%);box-shadow:0 6px 24px #10b98166}.drum-viewer-sidebar{background:#121218f2;border-left:1px solid #ffffff0f;flex-direction:column;width:320px;display:flex;overflow-y:auto}.sidebar-title{color:#9ca3af;border-bottom:1px solid #ffffff0a;margin:0;padding:16px 20px;font-size:.95rem;font-weight:600}.edit-panel-empty{text-align:center;color:#6b7280;flex-direction:column;align-items:center;gap:8px;padding:40px 20px;font-size:.85rem;display:flex}.edit-form{flex-direction:column;gap:16px;padding:20px;display:flex}.form-row{flex-direction:column;gap:6px;display:flex}.form-label-side{color:#9ca3af;text-transform:uppercase;font-size:.75rem;font-weight:600}.form-value-readonly{color:#f3f4f6;font-size:.9rem;font-weight:700}.form-select-side,.form-input-side{color:#fff;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;outline:none;padding:8px 12px;font-size:.85rem}.form-select-side:focus,.form-input-side:focus{border-color:#8b5cf6}.form-select-side option,.power-tool-select option{color:#fff;background:#1e1e28}.form-checkbox-label{color:#d1d5db;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;font-size:.85rem;display:flex}.checkbox-input{accent-color:#ef4444}.delete-event-btn{color:#f87171;cursor:pointer;background:#ef44441a;border:1px solid #ef444433;border-radius:8px;margin-top:10px;padding:10px;font-size:.85rem;font-weight:600;transition:all .2s}.delete-event-btn:hover{color:#fff;background:#ef444433;border-color:#ef4444}.drum-viewer-footer{background:#121218f2;border-top:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.audio-controls{align-items:center;gap:16px;display:flex}.to-start-btn{color:#d1d5db;cursor:pointer;background:#ffffff14;border:1px solid #ffffff1f;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;transition:all .2s;display:flex}.to-start-btn:hover{color:#fff;background:#ffffff29}.play-pause-btn{color:#fff;cursor:pointer;background:#8b5cf6;border:none;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:all .2s;display:flex;box-shadow:0 4px 10px #8b5cf64d}.play-pause-btn:hover{background:#a78bfa;transform:scale(1.05)}.time-display{color:#9ca3af;font-variant-numeric:tabular-nums;font-size:.85rem}.footer-actions{align-items:center;gap:12px;display:flex}.save-verify-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border:none;border-radius:8px;align-items:center;gap:6px;padding:10px 20px;font-size:.85rem;font-weight:600;transition:all .2s;display:flex;box-shadow:0 4px 10px #10b9814d}.save-verify-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 15px #10b98180}.save-verify-btn:disabled{opacity:.5;cursor:not-allowed}.regen-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1 0%,#4338ca 100%);border:none;border-radius:8px;align-items:center;gap:6px;padding:10px 18px;font-size:.85rem;font-weight:600;transition:all .2s;display:flex;box-shadow:0 4px 10px #6366f14d}.regen-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 15px #6366f180}.regen-btn:disabled{opacity:.5;cursor:not-allowed}.error-list{color:#f87171;background:#ef44441a;border:1px solid #ef444433;border-radius:8px;margin:16px;padding:12px 16px 12px 32px;font-size:.8rem;list-style-type:disc}.timeline-power-tools{background:#0f0f1966;border-bottom:1px solid #ffffff0d;flex-wrap:wrap;align-items:center;gap:16px;padding:8px 24px;display:flex}.power-tool-group{background:#ffffff05;border:1px solid #ffffff0d;border-radius:8px;align-items:center;gap:8px;padding:4px 10px;display:flex}.power-tool-box{background:#38bdf80a;border:1px solid #7dd3fc4d;border-radius:10px;flex-wrap:wrap;flex-basis:100%;align-items:center;gap:8px;padding:5px 8px;display:flex}.power-tool-label{color:#a78bfa;text-transform:uppercase;letter-spacing:.05em;margin-right:4px;font-size:.75rem;font-weight:700}.power-tool-input-num{color:#fff;text-align:center;background:#0000004d;border:1px solid #ffffff1a;border-radius:4px;outline:none;width:65px;padding:2px 6px;font-size:.8rem}.power-tool-input-num:focus{border-color:#8b5cf6}.power-tool-select{color:#fff;background:#0000004d;border:1px solid #ffffff1a;border-radius:4px;outline:none;padding:2px 6px;font-size:.8rem}.power-tool-select:focus{border-color:#8b5cf6}.power-tool-select.layer-on{color:#fff;background:#8b5cf673;border-color:#a855f7;font-weight:700}.power-tool-select:disabled{opacity:.4;cursor:not-allowed}.btn-tool-action{color:#c084fc;cursor:pointer;background:#8b5cf626;border:1px solid #8b5cf64d;border-radius:4px;padding:3px 8px;font-size:.75rem;font-weight:600;transition:all .2s}.btn-tool-action:hover:not(:disabled){color:#fff;background:#8b5cf64d;border-color:#a855f7}.btn-tool-action:disabled{opacity:.4;cursor:not-allowed}.btn-tool-action.layer-active{color:#fff;background:#8b5cf68c;border-color:#a855f7;box-shadow:0 0 8px #8b5cf666}.btn-tool-action.danger{color:#f87171;background:#ef44441a;border-color:#ef44444d}.btn-tool-action.danger:hover:not(:disabled){color:#fff;background:#ef444440;border-color:#ef4444}.audio-tools{flex-wrap:wrap;align-items:center;gap:18px;display:flex}.audio-tool-group{align-items:center;gap:6px;display:flex}.audio-tool-label{color:#a78bfa;text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;font-weight:700}.rate-btn{color:#d1d5db;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:6px;padding:4px 9px;font-size:.78rem;font-weight:600;transition:all .2s}.rate-btn:hover{background:#ffffff1a}.rate-btn.active{color:#a78bfa;background:#8b5cf633;border-color:#8b5cf6}.tool-toggle-btn{color:#fff;cursor:pointer;white-space:nowrap;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;padding:6px 12px;font-size:.8rem;font-weight:600;transition:all .2s}.tool-toggle-btn:hover{background:#ffffff1a;border-color:#fff3}.tool-toggle-btn.active{color:#34d399;background:#10b9812e;border-color:#10b981;box-shadow:0 0 10px #10b9812e}.tool-toggle-btn.muted{color:#f87171;background:#ef444426;border-color:#ef4444}.lyric-ribbon-viewport{background:#0a0a1099;border-bottom:1px solid #ffffff0f;height:40px;position:relative;overflow:hidden}.lyric-ribbon-content{will-change:transform;height:100%;position:absolute;top:0;left:0}.bar-mark{color:#a78bfa;pointer-events:none;white-space:nowrap;border-left:1px solid #8b5cf673;align-items:center;padding-left:3px;font-size:.64rem;font-weight:700;line-height:1;display:flex;position:absolute;top:0;bottom:0;transform:translate(-1px)}.bar-mark.bar-mark-repeat{color:#fbbf24;border-left-color:#fbbf2480}.bar-mark.bar-mark-click{pointer-events:auto;cursor:pointer;justify-content:space-between;gap:4px;padding-right:3px;overflow:hidden}.bar-mark.bar-mark-click:hover{background:#ffffff14}.bar-mark.bar-targeted{background:#3b82f652;box-shadow:inset 0 0 0 1.5px #3b82f6}.bar-mark.bar-targeted.bar-done{background:#3b82f652}.bar-mark .bar-mark-label{text-overflow:ellipsis;overflow:hidden}.bar-done-toggle{color:#9ca3af;cursor:pointer;background:#00000040;border:1.5px solid #ffffff40;border-radius:5px;flex:none;justify-content:center;align-items:center;width:20px;height:20px;font-size:15px;line-height:1;transition:all .12s;display:inline-flex}.bar-done-toggle:hover{color:#fff;background:#34d39940;border-color:#34d399;transform:scale(1.12)}.bar-mark.bar-done{background:#10b98138}.bar-mark.bar-done .bar-done-toggle{color:#34d399;background:#34d3992e;border-color:#34d399;font-weight:800}.lyric-mark{text-overflow:ellipsis;white-space:nowrap;color:#d1d5db;cursor:pointer;background:#38bdf814;border-left:2px solid #38bdf8b3;border-radius:0 4px 4px 0;max-width:220px;padding:1px 6px 1px 5px;font-size:.78rem;position:absolute;bottom:3px;overflow:hidden;transform:translate(-1px)}.lyric-mark:hover{color:#fff;background:#38bdf833}.lyric-mark.current{color:#fff;background:#38bdf859;border-left-color:#38bdf8;font-weight:700}.lyric-panel{background:#1c1c2899;border-bottom:1px solid #ffffff14;flex-direction:column;flex:none;gap:7px;padding:12px;display:flex}.lyric-panel-head{justify-content:space-between;align-items:center;display:flex}.lyric-panel-head .sidebar-title{padding:0}.lyric-panel-row{align-items:flex-start;gap:8px;display:flex}.lrc-textarea{resize:vertical;color:#fff;background:#0000004d;border:1px solid #ffffff1a;border-radius:4px;flex:1;min-height:44px;max-height:120px;padding:6px;font-family:inherit;font-size:.78rem}.lyric-lrc-details summary{color:#a78bfa;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:.74rem}.lyric-list{flex-direction:column;gap:4px;max-height:130px;display:flex;overflow-y:auto}.lyric-list-row{align-items:center;gap:6px;display:flex}.lyric-text-input{color:#fff;background:#0000004d;border:1px solid #ffffff1a;border-radius:4px;flex:1;padding:3px 8px;font-size:.8rem}.lyric-text-input:focus,.lrc-textarea:focus{border-color:#38bdf8;outline:none}.drum-viewer-overlay{height:100dvh}@media (height<=860px){.drum-viewer-window{border-radius:12px;width:98vw;height:99dvh}.drum-viewer-header{padding:8px 16px}.timeline-controls-bar{flex-shrink:0;gap:14px;padding:8px 14px}.timeline-area{flex-shrink:0}.timeline-scroll-wrapper{min-height:434px}.drum-viewer-footer{padding:8px 14px}.drum-viewer-sidebar{width:250px}.drum-viewer-title{font-size:1.05rem}.hint-tip{display:none}.timeline-controls-bar{gap:10px;padding:6px 12px}.timeline-power-tools{gap:8px;padding:4px 12px}.power-tool-group{gap:6px;padding:3px 8px}.power-tool-box{padding:3px 6px}.mode-btn,.btn-tool-action{padding:4px 8px}.audio-tools{gap:10px}.tool-toggle-btn{padding:4px 8px}.footer-actions{gap:8px}.save-verify-btn,.regen-btn{white-space:nowrap;padding:6px 10px}.audio-controls{gap:10px}}.print-editor-root{z-index:6000;color:#e2e8f0;background:#0b1220;flex-direction:column;font-family:Inter,-apple-system,sans-serif;display:flex;position:fixed;inset:0}.pe-chrome{background:#0f172a;border-bottom:1px solid #334155;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;font-size:12px;display:flex}.pe-chrome label{color:#94a3b8;align-items:center;gap:5px;display:flex}.pe-scroll{flex:1;padding:18px;overflow:auto}.pe-page{color:#111;box-sizing:border-box;background:#fff;margin:0 auto 18px;position:relative;overflow:hidden;box-shadow:0 8px 30px #00000080}.pe-pageno{color:#111;font:11px Times New Roman,serif;position:absolute;top:10px;right:16px}.pe-header{margin-bottom:12px}.pe-title{text-align:center;margin:4px 0 14px;font:700 30px Times New Roman,serif}.pe-subrow{justify-content:space-between;align-items:flex-end;gap:20px;display:flex}.pe-subtitle{white-space:pre-wrap;font:12px Times New Roman,serif}.pe-credits{text-align:right;white-space:pre-wrap;font:12px/1.6 Times New Roman,serif}.pe-tempo{margin-top:10px;font:700 13px Times New Roman,serif}.pe-row{position:relative}.pe-txt{white-space:pre;color:#111;position:absolute;transform:translateY(-50%)}.pe-txt-tools{z-index:4;white-space:nowrap;background:#0f172a;border:1px solid #334155;border-radius:4px;gap:2px;padding:1px 3px;display:flex;position:absolute;top:-22px;left:0}.pe-txt-tools button{cursor:pointer;color:#e2e8f0;background:#1e293b;border:none;border-radius:3px;width:24px;height:18px;font-size:11px}@media print{body>:not(.print-editor-root){display:none!important}.print-editor-root{background:#fff!important;position:static!important}.pe-chrome{display:none!important}.pe-scroll{padding:0!important;overflow:visible!important}.pe-fitwrap{zoom:1!important}.pe-page{break-after:page;box-shadow:none!important;margin:0!important}.pe-txt-tools{display:none!important}}@page{size:A4 portrait;margin:0}