@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:100vh;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:100vh;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;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@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{border-bottom:1px solid var(--border-thin);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background:linear-gradient(#131317cc,#13131700);flex-direction:column;padding:24px 20px;display:flex;position:sticky;top:0}.brand{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.brand-logo{align-items:center;gap:8px;display:flex}.brand-dot{background-color:var(--secondary);width:10px;height:10px;box-shadow:0 0 10px var(--secondary);border-radius:50%}.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:24px;font-weight:800}.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-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;background-color:#000000bf;justify-content:center;align-items:flex-end;display:flex;position:absolute;inset:0}.modal-content{background-color:var(--bg-surface-elevated);border-top:1px solid var(--border-thin);width:100%;box-shadow:var(--shadow-lg);box-sizing:border-box;border-top-left-radius:24px;border-top-right-radius:24px;max-height:90vh;padding:24px 20px;animation:.3s cubic-bezier(.16,1,.3,1) forwards slideUp;overflow-y:auto}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.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{border-bottom:1px solid var(--border-thin);background:var(--bg-surface);z-index:10;align-items:center;gap:12px;padding-bottom:8px;display:flex;position:sticky;top:0}.player-song-details{text-align:left;flex:1;min-width:0}.player-song-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:16px;font-weight:700;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{background-color:#ec489903;border-color:#ec489933}.mixer-channel.metronome-channel:hover{background-color:#ec489905}.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;flex-shrink:0;width:28px}.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}.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:wrap;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-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:6px;padding:8px 10px}.player-header{gap:8px;padding:12px 10px 8px}.btn-icon{width:34px;height:34px}.player-song-title{font-size:14px}.player-song-artist{font-size:11px}.settings-panel{gap:6px;margin-bottom:4px}.btn-settings{border-radius:6px;min-height:28px;padding:4px 8px;font-size:11px}.mixer-panel{gap:5px}.mixer-channel{border-radius:8px;gap:8px;padding:6px 10px}.channel-info{width:65px}.channel-name{font-size:10px}.channel-type-badge{font-size:8px}.channel-controls,.volume-slider-wrapper{gap:6px}.volume-value{width:24px;font-size:10px}.slider-input{height:3px}.slider-input::-webkit-slider-thumb{width:10px;height:10px}.mute-btn{border-radius:6px;min-width:44px;min-height:22px;padding:2px 6px;font-size:9px}.mixer-channel.metronome-channel{gap:8px;padding:6px 10px}.metronome-strip-row-1{gap:8px}.metronome-strip-row-2{gap:6px;padding-top:6px}.metronome-tempo-section{gap:4px}.bpm-control-box{border-radius:6px;padding:3px 5px}.control-box-title{margin-bottom:0;padding-bottom:1px;font-size:8px}.bpm-main-controls{gap:2px}.bpm-btn{border-radius:4px;width:20px;height:20px;font-size:10px}.bpm-input-wrapper{gap:1px;padding:0 2px}.bpm-input-field{width:32px;font-size:11px}.bpm-suffix{font-size:8px}.bpm-fine-controls{gap:4px;padding-top:2px}.bpm-btn.fine{border-radius:4px;min-width:32px;height:18px;font-size:8px}.fine-label{font-size:8px}.tap-tempo-btn{border-radius:8px;width:54px;padding:4px}.tap-text-main{font-size:11px}.tap-text-sub{font-size:7px}.strong-beat-group{gap:6px;margin-top:0;padding-top:4px}.strong-beat-label{font-size:8px}.strong-beat-buttons{gap:4px}.strong-beat-btn{border-radius:4px;width:24px;height:20px;font-size:10px}.freebox-control-group,.freebox-toggle-label{gap:4px}.freebox-checkbox{width:11px;height:11px}.freebox-text{font-size:8px}.master-panel{border-radius:8px;gap:8px;padding:6px 10px}.master-info{width:65px}.master-name{font-size:10px}.seekbar-panel{border-radius:8px;gap:6px;margin-top:2px;padding:4px 8px}.time-label{min-width:30px;font-size:10px}.seekbar-input{height:4px}.seekbar-input::-webkit-slider-thumb{width:11px;height:11px}.playback-panel{border-radius:14px;gap:8px;padding:8px 10px}.playback-row-speed{gap:8px;padding-bottom:6px}.playback-row-transport{gap:6px}.playback-label{font-size:11px}.playback-input-field{width:38px;padding:2px 4px;font-size:12px}.speed-bpm-btn{border-radius:6px;width:24px;height:24px;font-size:11px}.speed-display-text{min-width:36px;font-size:11px}.playback-divider{height:12px}.playback-btn.control.marker-btn{border-radius:8px;gap:2px;height:36px;min-height:36px;padding:0 6px;font-size:10px}.playback-btn.play{width:48px;min-width:48px;height:48px;min-height:48px}.playback-btn.control.stop{width:38px;min-width:38px;height:38px;min-height:38px}.transport-divider{height:24px;margin:0 2px}.mixdown-panel{margin-top:4px}.mixdown-btn{border-radius:10px;height:36px;font-size:12px}}.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}