:root{--bg-dark: #050505;--bg-panel: #000000;--text-main: #FFFFFF;--text-dim: #666666;--accent-cyan: #FFFFFF;--accent-glow: 0 0 12px rgba(255, 255, 255, .8), 0 0 20px rgba(255, 255, 255, .4);--border-light: #222222}body{margin:0;padding:0;background-color:var(--bg-dark);color:var(--text-main);font-family:Futura,Trebuchet MS,Arial,sans-serif;font-weight:700;text-transform:uppercase;display:flex;justify-content:center;align-items:center;min-height:100vh;-webkit-font-smoothing:antialiased}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}#root{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center}.app-container{width:100%;max-width:1000px;height:100vh;max-height:900px;display:flex;flex-direction:column;background:var(--bg-dark);background:linear-gradient(#12101000 50%,#00000040 50%),linear-gradient(90deg,#ff00000f,#00ff0005,#0000ff0f);background-size:100% 2px,3px 100%}.header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--border-light)}.logo{font-size:24px;font-weight:900;letter-spacing:4px;color:var(--accent-cyan);text-shadow:var(--accent-glow)}.tabs,.playback-mode-tabs{display:flex;gap:20px}.tab-btn{background:transparent;border:none;color:var(--text-dim);padding:8px 16px;font-family:inherit;font-size:14px;cursor:pointer;transition:all .2s;letter-spacing:2px;font-weight:700}.tab-btn:hover{color:var(--text-main);text-shadow:var(--accent-glow)}.tab-btn.active{color:var(--text-main);background:transparent;text-shadow:var(--accent-glow);border-bottom:2px solid var(--text-main);box-shadow:none}.main-content{flex:1;padding:40px;display:flex;flex-direction:column;align-items:center;overflow-y:auto}.upload-zone{border:2px dashed var(--border-light);border-radius:4px;width:100%;max-width:500px;height:300px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--text-dim);transition:border-color .3s}.upload-zone:hover{border-color:var(--accent-cyan);color:var(--accent-cyan);cursor:pointer}.mobile-menu-toggle{display:none;background:none;border:none;color:var(--accent-cyan);font-size:24px;cursor:pointer}.track-list{width:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}.track-item{background:#000;padding:0;border:1px solid #111;display:flex;flex-direction:column;justify-content:center;align-items:center;aspect-ratio:1 / 1;cursor:pointer;transition:all .2s;text-align:center;position:relative}.track-item:hover{border-color:var(--text-main);box-shadow:var(--accent-glow);transform:scale(1.02)}.track-name{font-size:16px;color:var(--text-main)}.playback-container{width:100%;display:flex;flex-direction:column;gap:30px}.now-playing{text-align:center;font-size:20px;color:var(--accent-cyan);text-transform:uppercase;margin-bottom:10px;letter-spacing:2px}.playback-header{display:flex;justify-content:space-between;align-items:center;width:100%}.stems-grid{display:flex;justify-content:center;gap:40px;height:400px;align-items:flex-end}.stem-control{display:flex;flex-direction:column;align-items:center;height:100%}.slider-track{width:60px;height:100%;background:var(--bg-panel);border:1px solid var(--border-light);position:relative;border-radius:4px;overflow:hidden}input[type=range].cyber-slider{-webkit-appearance:none;appearance:none;width:300px;height:60px;background:transparent;transform:rotate(-90deg);transform-origin:center;position:absolute;top:120px;left:-120px;cursor:pointer}input[type=range].cyber-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:60px;background:var(--accent-cyan);box-shadow:0 0 10px var(--accent-cyan);border:none;border-radius:2px}.stem-label{margin-top:15px;font-size:14px;font-weight:700;letter-spacing:1px;color:var(--text-dim)}.transport-bar{display:flex;align-items:center;gap:20px;background:#000;padding:15px;border:none;border-top:1px solid #222;border-radius:0}.play-btn{background:transparent;border:2px solid var(--text-main);border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-main);font-weight:700;font-size:20px;transition:.2s}.play-btn:hover{background:var(--text-main);color:#000;box-shadow:var(--accent-glow)}.progress-container{flex:1;height:4px;background:#222;position:relative;cursor:pointer;transition:height .2s}.progress-container:hover{height:8px}.progress-fill{height:100%;background:var(--text-main);box-shadow:var(--accent-glow);width:0%}.loading-overlay{position:fixed;inset:0;background:#000c;display:flex;justify-content:center;align-items:center;color:var(--accent-cyan);z-index:1000}.album-container{width:100%;max-width:1000px;display:flex;gap:40px;padding:20px;animation:fadeIn .5s ease-out}.album-info{width:300px;flex-shrink:0}.album-art-large{width:300px;height:300px;border:1px solid var(--border-light);object-fit:cover;cursor:pointer}.album-title{margin-top:20px;color:var(--accent-cyan);font-size:24px;letter-spacing:2px}.album-subtitle{color:var(--text-dim)}.album-stats{margin-top:20px;font-size:12px;color:#555}.album-tracks{flex:1;display:flex;flex-direction:column;gap:10px;height:500px;overflow-y:auto}.track-item-row{display:flex;justify-content:space-between;align-items:center;padding:15px;height:60px;border:1px dashed #333;opacity:.3;pointer-events:none;transition:all .2s}.track-item-row.ready{border:1px solid var(--border-light);opacity:1;cursor:pointer;pointer-events:auto}.track-item-row.ready:hover{background:#4169e11a;border-color:var(--accent-cyan)}.track-left{display:flex;align-items:center;gap:15px}.track-index{color:#555}.track-item-row.ready .track-index{color:var(--accent-cyan)}.track-name{color:#555}.track-item-row.ready .track-name{color:var(--text-main)}.track-status{font-size:12px;color:#333}.track-item-row.ready .track-status{color:var(--text-dim)}@media(max-width:768px){.app-container{height:100dvh;max-height:none;overflow-y:auto;background-size:100% 2px,3px 100%}.header{padding:15px;position:relative;background:var(--bg-dark);z-index:200}.mobile-menu-toggle{display:block!important}.tabs{display:none!important;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#242321fa;border-bottom:1px solid var(--border-light);padding:10px 0;z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.tabs.open{display:flex!important}.tab-btn{width:100%;text-align:left;padding:20px;border-bottom:1px solid rgba(255,255,255,.05);font-size:16px}.main-content{padding:15px 15px 100px;width:100%;overflow-x:hidden}.album-container{flex-direction:column;padding:0;gap:20px}.album-info,.album-tracks,.album-art-large{width:100%!important;height:auto!important}.album-art-large{aspect-ratio:1/1}.track-list{grid-template-columns:repeat(2,1fr);gap:10px}.track-item{padding:10px}.stems-grid{height:350px;width:100%;overflow-x:auto;justify-content:flex-start;padding-bottom:20px;gap:20px;-webkit-overflow-scrolling:touch}.stem-control{flex-shrink:0;width:80px}.playback-container{gap:20px}.stem-sub-tabs{display:flex;flex-direction:row!important;overflow-x:auto;gap:10px;padding-bottom:5px;width:100%;-webkit-overflow-scrolling:touch;margin-bottom:10px!important}.stem-sub-tabs .tab-btn{width:auto!important;flex-shrink:0;border-bottom:1px solid transparent;padding:8px 15px;font-size:12px}.panel-scroll-container{flex-wrap:nowrap!important;overflow-x:auto;justify-content:flex-start!important;width:100%;height:350px!important;gap:30px!important;padding-bottom:20px;-webkit-overflow-scrolling:touch}.playback-container>div>div[style*="display: flex"]{flex-wrap:nowrap}.transport-bar{position:fixed;bottom:30px;left:10px;right:10px;z-index:50;padding:20px;box-shadow:0 0 30px #000000e6;background:#000000e6;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid #333;border-radius:30px}.play-btn{width:60px;height:60px;font-size:24px;border:2px solid white}.progress-container{height:6px}.playback-header{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:20px;margin-bottom:20px;width:100%}.playback-mode-tabs{width:100%;display:flex;flex-direction:row;justify-content:space-between;flex-wrap:nowrap!important;overflow-x:auto;gap:5px!important;padding-bottom:5px}.playback-mode-tabs .tab-btn{font-size:11px;padding:5px 8px;white-space:nowrap}.now-playing{justify-content:center;width:100%}.stems-grid,.panel-scroll-container,div[style*="flex-direction: column"]{margin-top:20px}}