*{margin:0;padding:0;box-sizing:border-box}[hidden]{display:none!important}.play-icon[hidden],.pause-icon[hidden]{display:none!important;visibility:hidden!important;opacity:0!important}.play-icon:not([hidden]):not([style*="display: none"]),.pause-icon:not([hidden]):not([style*="display: none"]){display:block!important;visibility:visible!important;opacity:1!important}.play-icon[style*="display: none"],.pause-icon[style*="display: none"]{display:none!important}:root{--color-primary: #5e4bb6;--color-primary-dark: #4a3c91;--color-secondary: #e74c3c;--color-bg: #0f0f23;--color-surface: rgba(255, 255, 255, .05);--color-surface-hover: rgba(255, 255, 255, .08);--color-glass: rgba(255, 255, 255, .1);--color-glass-border: rgba(255, 255, 255, .2);--color-text: #eee;--color-text-dim: #aaa;--radius: 12px;--shadow: 0 8px 32px rgba(0, 0, 0, .5);--shadow-glass: 0 4px 16px rgba(0, 0, 0, .2);--blur: 10px}@supports not (backdrop-filter: blur(10px)){:root{--color-glass: rgba(45, 45, 68, .95);--color-surface: rgba(45, 45, 68, .9)}}body{font-family:system-ui,-apple-system,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}.app-container{display:flex;flex-direction:column;min-height:100vh}.visualizer-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:.8}.app-header{background:var(--color-glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--color-glass-border);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-glass)}.app-header h1{font-size:1.5rem;font-weight:600}.settings-btn{background:none;border:none;color:var(--color-text);cursor:pointer;padding:.5rem;border-radius:var(--radius);transition:background .2s}.settings-btn:hover{background:var(--color-surface-hover)}.app-main{flex:1;padding:2rem;max-width:800px;margin:0 auto;width:100%}.app-footer{background:var(--color-glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border-top:1px solid var(--color-glass-border);padding:1rem;text-align:center;color:var(--color-text-dim);font-size:.9rem}.app-footer a{color:var(--color-primary);text-decoration:none}.app-footer a:hover{text-decoration:underline}.file-section{margin-bottom:2rem}.file-drop-zone{display:flex;align-items:center;justify-content:center;background:var(--color-glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:2px dashed var(--color-glass-border);border-radius:var(--radius);padding:1.75rem;cursor:pointer;transition:all .3s;box-shadow:var(--shadow-glass)}.file-drop-zone.dragover{background:#5e4bb633;border-color:var(--color-primary);box-shadow:0 0 20px #5e4bb64d}.file-drop-content{display:flex;align-items:center;gap:1.5rem}.file-drop-icon{display:flex;align-items:center;justify-content:center}.upload-icon{opacity:.7}.file-drop-text{color:var(--color-text-dim);line-height:1.5;font-size:.95rem}.file-select-btn{background:#5e4bb6cc;backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));color:#fff;border:1px solid rgba(94,75,182,.5);padding:.5rem 1rem;border-radius:var(--radius);cursor:pointer;margin-left:.5rem;transition:all .2s;box-shadow:0 2px 8px #5e4bb64d}.file-select-btn:hover{background:#5e4bb6e6;box-shadow:0 4px 12px #5e4bb666}.file-info{display:flex;justify-content:flex-start;align-items:center;gap:.75rem;min-width:0}.file-name{color:var(--color-text-dim);font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-clear-btn{background:none;border:none;color:var(--color-text-dim);font-size:1.2rem;cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:all .2s;opacity:.7}.file-clear-btn:hover{opacity:1;color:var(--color-text)}.error-toast{position:fixed;bottom:2rem;right:2rem;background:#e74c3ce6;backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid rgba(231,76,60,.5);color:#fff;padding:1rem 1.5rem;border-radius:var(--radius);box-shadow:0 8px 32px #e74c3c4d;animation:slideIn .3s ease-out}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-out}.modal-content{background:var(--color-glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--color-glass-border);border-radius:var(--radius);max-width:600px;max-height:80vh;width:90%;box-shadow:var(--shadow-glass);overflow:hidden}.modal-header{padding:1.5rem;border-bottom:1px solid var(--color-glass-border);display:flex;justify-content:space-between;align-items:center}.modal-header h2{color:var(--color-text);font-size:1.5rem;margin:0}.modal-close-btn{background:none;border:none;color:var(--color-text-dim);font-size:2rem;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}.modal-close-btn:hover{background:var(--color-surface-hover);color:var(--color-text)}.modal-body{padding:1.5rem;overflow-y:auto;max-height:calc(80vh - 100px)}.license-info h3{color:var(--color-text);margin-bottom:1rem;font-size:1.25rem}.license-item{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:1rem;margin-bottom:1rem}.license-item h4{color:var(--color-primary);margin-bottom:.5rem;font-size:1.1rem}.license-item p{color:var(--color-text-dim);margin-bottom:.25rem;font-size:.9rem}.license-item a{color:var(--color-primary);text-decoration:none;transition:color .2s}.license-item a:hover{color:var(--color-primary-dark);text-decoration:underline}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.player-section{background:var(--color-glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--color-glass-border);padding:2rem;border-radius:var(--radius);box-shadow:var(--shadow-glass)}.player-top-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.player-top-row .file-info{flex:1 1 220px}.player-top-row .time-display{min-width:110px;text-align:center}.play-btn{background:#5e4bb6cc;backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid rgba(94,75,182,.5);width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:#fff;box-shadow:0 4px 16px #5e4bb666}.play-btn:hover{background:#5e4bb6e6;transform:scale(1.05);box-shadow:0 6px 20px #5e4bb680}.play-icon,.pause-icon{position:absolute;pointer-events:none}.play-icon{color:#fff}.pause-icon{color:#fff;display:none}.time-display{font-variant-numeric:tabular-nums;color:var(--color-text-dim)}.volume-control{display:flex;align-items:center;gap:.5rem;margin-left:auto}.mute-btn{background:none;border:none;color:var(--color-text);cursor:pointer;padding:.5rem;border-radius:var(--radius);transition:background .2s}.mute-btn:hover{background:var(--color-surface-hover)}.progress-container{margin-bottom:2rem}.progress-bar{background:#ffffff1a;backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));height:6px;border-radius:3px;cursor:pointer;position:relative;box-shadow:inset 0 1px 3px #0000004d;border:1px solid rgba(255,255,255,.05)}.progress-fill{background:linear-gradient(135deg,var(--color-primary),#7c6fc7);height:100%;border-radius:3px;width:0;transition:width .1s;box-shadow:0 0 8px #5e4bb64d;position:relative}.progress-fill:after{content:"";position:absolute;top:0;right:0;width:2px;height:100%;background:#fffc;border-radius:0 3px 3px 0;box-shadow:0 0 4px #fff6}.volume-slider{width:100px;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-primary) var(--slider-progress, 50%),rgba(255,255,255,.1) var(--slider-progress, 50%));height:4px;cursor:pointer;outline:none;border-radius:2px;box-shadow:0 0 4px #5e4bb633}.volume-slider::-webkit-slider-track{-webkit-appearance:none;background:transparent;height:4px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:linear-gradient(135deg,#fffffff2,#ffffffd9,#e0dcffe6);width:16px;height:16px;border-radius:4px;border:2px solid rgba(255,255,255,.6);margin-top:0;cursor:grab;transform:rotate(45deg);transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 3px 8px #00000040,inset 0 1px #fffc,0 0 0 1px #5e4bb633;position:relative}.volume-slider::-webkit-slider-thumb:hover{background:linear-gradient(135deg,#fff,#fffffff2,#f0ebfff2);transform:rotate(45deg) scale(1.1);box-shadow:0 4px 12px #0000004d,inset 0 1px #ffffffe6,0 0 0 2px #5e4bb64d,0 0 8px #5e4bb633;border-color:#fffc}.volume-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:rotate(45deg) scale(.95);transition:all .1s cubic-bezier(.4,0,.2,1)}.volume-slider::-moz-range-track{background:#ffffff1a;height:4px;border-radius:2px}.volume-slider::-moz-range-progress{background:linear-gradient(135deg,var(--color-primary),#7c6fc7);height:4px;border-radius:2px}.volume-slider::-moz-range-thumb{background:linear-gradient(135deg,#fffffff2,#ffffffd9,#e0dcffe6);width:16px;height:16px;border-radius:4px;border:2px solid rgba(255,255,255,.6);cursor:grab;transform:rotate(45deg);transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 3px 8px #00000040,0 0 0 1px #5e4bb633}.volume-slider::-moz-range-thumb:hover{background:linear-gradient(135deg,#fff,#fffffff2,#f0ebfff2);transform:rotate(45deg) scale(1.1);box-shadow:0 4px 12px #0000004d,0 0 0 2px #5e4bb64d,0 0 8px #5e4bb633;border-color:#fffc}.volume-slider::-moz-range-thumb:active{cursor:grabbing;transform:rotate(45deg) scale(.95);transition:all .1s cubic-bezier(.4,0,.2,1)}.loop-controls{margin-top:1rem}.loop-controls h3{font-size:1.1rem;margin-bottom:3rem}.loop-slider-container{margin-bottom:1rem}.loop-info{display:flex;justify-content:space-between;align-items:center;color:var(--color-text-dim);font-size:.9rem}.loop-reset-btn{background:var(--color-glass);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid var(--color-glass-border);color:var(--color-text);padding:.25rem .75rem;border-radius:var(--radius);cursor:pointer;transition:all .2s}.loop-reset-btn:hover{background:var(--color-surface-hover);border-color:#ffffff4d}.noUi-target{background:#ffffff1a;backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 1px 3px #0000004d;height:10px;border-radius:5px}#loopSlider{height:10px;margin:2rem 0}.noUi-connect{background:linear-gradient(135deg,var(--color-primary),#7c6fc7);box-shadow:0 0 8px #5e4bb64d}div.noUi-handle.noUi-handle-upper,div.noUi-handle.noUi-handle-lower{background:linear-gradient(180deg,#fffffffa,#f8f8fff2 30%,#ebebffeb 70%,#dcdcffe6);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));border:2px solid rgba(255,255,255,.7);box-shadow:0 4px 12px #00000040,inset 0 1px #ffffffe6,inset 0 -1px #0000001a,0 0 0 1px #5e4bb633;width:14px;height:24px;right:-8px;top:-8px;cursor:grab;border-radius:8px;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:10}.noUi-handle:first-child{background:linear-gradient(135deg,#fff,#dcdcfff2,#c8c8ffe6)}.noUi-handle:before,.noUi-handle:after{display:none!important}.noUi-handle:hover{background:linear-gradient(180deg,#fff,#fafafffa 30%,#f5f5fff2 70%,#ebebffed);box-shadow:0 6px 20px #0000004d,inset 0 2px #fffffff2,inset 0 -1px #00000026,0 0 0 2px #5e4bb666,0 0 12px #5e4bb64d;transform:scale(1.05);border-color:#ffffffe6}.noUi-handle:hover:before{box-shadow:0 0 8px #5e4bb699}.noUi-handle:active{cursor:grabbing;transform:scale(.98);transition:all .1s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0006,inset 0 1px #ffffffe6,inset 0 -1px #0003,0 0 0 2px #5e4bb680}.noUi-tooltip{background:linear-gradient(135deg,#0f0f23f2,#141428fa);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));color:var(--color-text);border:1px solid rgba(94,75,182,.4);border-radius:6px;padding:.4rem .7rem;font-size:.8rem;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em;box-shadow:0 4px 12px #0006,inset 0 1px #ffffff1a,0 0 0 1px #5e4bb633;z-index:1000;transform:translateY(-.8rem);white-space:nowrap}.waveform-container{position:relative;height:120px;margin:1.5rem 0 2rem;background:#ffffff0d;border-radius:var(--radius);overflow:hidden;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.waveform-canvas{width:100%;height:100%;display:block;cursor:pointer}.waveform-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.waveform-playhead{position:absolute;top:0;width:2px;height:100%;background:var(--color-primary);box-shadow:0 0 8px var(--color-primary);transform:translate(-50%);opacity:0;transition:opacity .2s}.waveform-playhead.active{opacity:1}.waveform-loop-region{position:absolute;top:0;height:100%;background:#5e4bb633;border-left:2px solid var(--color-primary);border-right:2px solid var(--color-primary);opacity:0;transition:opacity .2s}.waveform-loop-region.active{opacity:1}@media (max-width: 640px){.app-main{padding:1rem}.file-section{margin-bottom:1.5rem}.file-drop-zone{padding:1.25rem}.file-drop-content{flex-direction:column;text-align:center;gap:1rem}.file-select-btn{margin-left:0;margin-top:.75rem}.player-section{padding:1.5rem}.player-top-row{flex-wrap:wrap;gap:1rem;margin-bottom:1rem}.player-top-row .volume-control,.volume-control{width:100%;margin-left:0;margin-top:.75rem}.volume-slider{flex:1;max-width:200px}.progress-container{margin-bottom:1.5rem}.waveform-container{margin:1rem 0 1.5rem}.loop-controls{margin-top:.75rem}.loop-controls h3{margin-bottom:2.5rem}.loop-slider-container{margin-bottom:.75rem}}@media (min-width: 641px) and (max-width: 1024px){.app-main{padding:1.5rem}.player-section{padding:1.75rem}}@media (min-width: 1025px){.app-main{max-width:900px}}