*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#1a1a1a;color:#fff;min-height:100vh}#app{width:100%;min-height:100vh}.directory-browser{max-width:800px;margin:0 auto;padding:2em}.directory-browser h1{font-size:2.5em;margin-bottom:1.5em;color:#00d4ff;text-align:center}.directory-browser h2{font-size:1.5em;margin:1.5em 0 1em;color:#0f8}.empty-state{text-align:center;padding:3em;color:#888}.loading{text-align:center;padding:2em;color:#00d4ff}.breadcrumb{display:flex;align-items:center;gap:.5em;padding:1em;background:#252525;border-radius:8px;margin-bottom:1.5em;flex-wrap:wrap}.breadcrumb-item{color:#888;cursor:pointer;transition:color .2s;font-size:.9em}.breadcrumb-item:hover{color:#00d4ff}.breadcrumb-item.active{color:#fff;cursor:default}.breadcrumb-separator{color:#555;margin:0 .25em}.directories-list,.songs-list{margin-top:2em}.list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5em}.list-header h2{margin:0}.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1em}.directory-item,.song-item{background:#2d2d2d;border:1px solid #7c7c7c;border-radius:8px;padding:1.25em;cursor:pointer;display:flex;align-items:flex-start;gap:1em;transition:all .2s}.directory-item:hover,.song-item:hover{background:#3a3a3a;border-color:#00d4ff;transform:translateY(-2px);box-shadow:0 4px 12px #00d4ff33}.item-icon{font-size:2em;flex-shrink:0}.item-info{flex:1;display:flex;flex-direction:column;gap:.5em}.item-name{font-size:1.1em;font-weight:500;color:#fff;word-break:break-word}.item-meta{color:#888;font-size:.9em}.item-tracks{display:flex;flex-wrap:wrap;gap:.5em;margin-top:.5em}.track-tag{background:#3a3a3a;color:#00d4ff;padding:.25em .5em;border-radius:4px;font-size:.75em;font-weight:500}.back-btn{background:#2d2d2d;border:1px solid #7c7c7c;color:#fff;padding:.5em 1em;border-radius:4px;cursor:pointer;margin-bottom:1em;transition:all .2s}.back-btn:hover{background:#3a3a3a;border-color:#00d4ff}.mixer-container{width:100%;min-height:100vh;background:#1a1a1a;display:flex;flex-direction:column}.mixer-header{padding:1em 2em;background:#252525;border-bottom:1px solid #7c7c7c;display:flex;justify-content:space-between;align-items:center}.mixer-header h2{color:#00d4ff;font-size:1.5em}.timeline-container{background:#252525;border-bottom:1px solid #7c7c7c;padding:.5em 0}#timeline-ruler{height:30px;background:#2d2d2d;position:relative}.global-controls{padding:1em 2em;background:#252525;border-bottom:1px solid #7c7c7c;display:flex;align-items:center;gap:1.5em;flex-wrap:wrap}.play-btn,.reset-btn,.seek-btn{background:#00d4ff;border:none;color:#1a1a1a;padding:.75em 1.5em;border-radius:4px;cursor:pointer;font-weight:600;font-size:1em;transition:all .2s}.play-btn:hover:not(:disabled),.reset-btn:hover,.seek-btn:hover:not(:disabled){background:#00b8d4;transform:scale(1.05)}.play-btn:disabled,.seek-btn:disabled{background:#555;cursor:not-allowed;opacity:.5}.time-display{color:#fff;font-family:Courier New,monospace;font-size:1.1em}.zoom-control{display:flex;align-items:center;gap:.5em;color:#fff}.zoom-control input[type=range]{width:150px}.mixer-content{display:flex;flex:1;overflow:hidden;min-height:400px}.track-controls-panel{background:#252525;border-right:1px solid #7c7c7c;padding:0;width:280px;min-width:280px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}.multitrack-container{flex:1;background:#2d2d2d;overflow-x:auto;overflow-y:auto;position:relative}.multitrack-container :deep(.wavesurfer-container){border-bottom:1px solid #7c7c7c}.multitrack-container :deep(.wavesurfer-wave){background:#2d2d2d}.multitrack-container :deep(.wavesurfer-cursor){background:#d72f21!important;width:2px!important}.multitrack-container :deep(.wavesurfer-cursor::before){content:"";position:absolute;top:0;left:-4px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid #D72F21}.track-control{width:100%;background:#2d2d2d;border-bottom:1px solid #7c7c7c;padding:1em;display:flex;flex-direction:column;gap:.75em;flex-shrink:0;min-height:120px;box-sizing:border-box}.track-control[data-track-index="0"]{border-top:1px solid #7c7c7c}.control-buttons{display:flex;gap:.5em;width:100%;justify-content:center}.control-btn{width:32px;height:32px;background:#3a3a3a;border:1px solid #7c7c7c;color:#fff;border-radius:4px;cursor:pointer;font-weight:600;font-size:.9em;transition:all .2s;display:flex;align-items:center;justify-content:center}.control-btn:hover{background:#4a4a4a;border-color:#00d4ff}.control-btn.active{background:#00d4ff;color:#1a1a1a;border-color:#00d4ff}.mute-btn.active{background:#f44;border-color:#f44}.solo-btn.active{background:#0f8;border-color:#0f8;color:#1a1a1a}.track-label{font-weight:600;color:#00d4ff;font-size:1.1em;text-align:center}.volume-control{display:flex;flex-direction:column;gap:.5em;width:100%;align-items:center}.volume-slider{width:100%;height:6px;background:#3a3a3a;border-radius:3px;outline:none;-webkit-appearance:none;position:relative}.volume-slider::-webkit-slider-runnable-track{width:100%;height:6px;background:#3a3a3a;border-radius:3px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#0f8;border-radius:50%;cursor:pointer;margin-top:-5px;box-shadow:0 2px 4px #0000004d}.volume-slider::-moz-range-track{width:100%;height:6px;background:#3a3a3a;border-radius:3px}.volume-slider::-moz-range-progress{height:6px;background:#0f8;border-radius:3px 0 0 3px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#0f8;border-radius:50%;cursor:pointer}.volume-slider::-moz-range-thumb{width:16px;height:16px;background:#0f8;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 4px #0000004d}.volume-value{text-align:center;color:#888;font-size:.9em}.pan-control{display:flex;align-items:center;gap:.5em}.pan-control label{font-size:.8em;color:#888;min-width:15px}.pan-slider{flex:1;height:4px;background:#3a3a3a;border-radius:2px;outline:none;-webkit-appearance:none}.pan-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:#00d4ff;border-radius:50%;cursor:pointer}.pan-slider::-moz-range-thumb{width:14px;height:14px;background:#00d4ff;border-radius:50%;cursor:pointer;border:none}.pan-value{min-width:40px;text-align:center;color:#888;font-size:.9em;font-family:Courier New,monospace}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#1a1a1a}::-webkit-scrollbar-thumb{background:#555;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#777}@media (max-width: 768px){.mixer-content{flex-direction:column}.track-controls-panel{width:100%;min-width:100%;border-right:none;border-bottom:1px solid #7c7c7c;flex-direction:row;overflow-x:auto;overflow-y:hidden;height:auto}.track-control{min-width:200px}.global-controls{flex-direction:column;align-items:stretch}}