:root{--color-primary: #0052CC;--color-primary-hover: #0065FF;--color-secondary: #091E42;--color-text: #172B4D;--color-text-subtle: #6B778C;--color-background: #F4F5F7;--color-surface: #FFFFFF;--color-border: #DFE1E6;--color-success: #36B37E;--color-warning: #FFAB00;--color-danger: #DE350B;--waveform-bg: #1E1E1E;--waveform-color: #0052CC;--waveform-selection: rgba(0, 82, 204, .3);--playhead-color: #DE350B;--border-radius: 4px;--shadow-sm: 0 1px 2px rgba(9, 30, 66, .25);--shadow-md: 0 4px 8px rgba(9, 30, 66, .25);--transition: .2s ease;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.5;font-weight:400;color:var(--color-text);background-color:var(--color-background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh}#app{width:100%;max-width:1200px;margin:0 auto;padding:24px}.app-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--color-border)}.app-title{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:600;color:var(--color-secondary)}.app-title-icon{width:40px;height:40px}.drop-zone{border:2px dashed var(--color-border);border-radius:var(--border-radius);padding:48px;text-align:center;background-color:var(--color-surface);transition:all var(--transition);cursor:pointer}.drop-zone:hover,.drop-zone.dragover{border-color:var(--color-primary);background-color:#0052cc0d}.drop-zone-icon{font-size:48px;margin-bottom:16px}.drop-zone-text{font-size:16px;color:var(--color-text);margin-bottom:8px}.drop-zone-hint{font-size:14px;color:var(--color-text-subtle)}.editor-container{display:none;flex-direction:column;gap:16px}.editor-container.active{display:flex}.file-info{display:flex;align-items:center;justify-content:space-between;background-color:var(--color-surface);padding:16px;border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}.file-name{font-weight:600;color:var(--color-secondary)}.file-details{color:var(--color-text-subtle);font-size:14px}.waveform-container{position:relative;background-color:var(--waveform-bg);border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow-md)}.waveform-canvas{display:block;width:100%;height:200px;cursor:crosshair}.selection-overlay{position:absolute;top:0;height:100%;background-color:var(--waveform-selection);border-left:2px solid var(--color-primary);border-right:2px solid var(--color-primary);pointer-events:none}.playhead{position:absolute;top:0;width:2px;height:100%;background-color:var(--playhead-color);pointer-events:none;display:none}.playhead.active{display:block}.time-display{display:flex;justify-content:space-between;padding:8px 16px;background-color:var(--color-surface);border-radius:var(--border-radius);font-family:Monaco,Consolas,monospace;font-size:14px}.time-label{color:var(--color-text-subtle);margin-right:8px}.time-value{color:var(--color-secondary);font-weight:600}.controls-panel{display:flex;flex-wrap:wrap;gap:16px;padding:16px;background-color:var(--color-surface);border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}.control-group{display:flex;align-items:center;gap:8px}.control-label{font-size:14px;font-weight:500;color:var(--color-text);white-space:nowrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;font-size:14px;font-weight:500;border:none;border-radius:var(--border-radius);cursor:pointer;transition:all var(--transition)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-hover)}.btn-secondary{background-color:var(--color-background);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background-color:var(--color-border)}.btn-success{background-color:var(--color-success);color:#fff}.btn-success:hover:not(:disabled){background-color:#2d9d6a}.btn-danger{background-color:var(--color-danger);color:#fff}.btn-danger:hover:not(:disabled){background-color:#c92f05}.btn-icon{padding:8px;min-width:36px}.slider-container{display:flex;align-items:center;gap:8px}.slider{-webkit-appearance:none;appearance:none;width:120px;height:6px;border-radius:3px;background:var(--color-border);outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-primary);cursor:pointer;transition:all var(--transition)}.slider::-webkit-slider-thumb:hover{background:var(--color-primary-hover);transform:scale(1.1)}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none}.slider-value{min-width:45px;text-align:right;font-weight:500;color:var(--color-secondary)}.effects-panel{display:flex;flex-wrap:wrap;gap:12px;padding:16px;background-color:var(--color-surface);border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}.effect-card{flex:1;min-width:200px;padding:16px;background-color:var(--color-background);border-radius:var(--border-radius);border:1px solid var(--color-border)}.effect-title{font-size:14px;font-weight:600;color:var(--color-secondary);margin-bottom:12px}.effect-controls{display:flex;flex-direction:column;gap:8px}.export-panel{display:flex;align-items:center;justify-content:space-between;padding:16px;background-color:var(--color-surface);border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}.export-info{color:var(--color-text-subtle);font-size:14px}.select{padding:8px 12px;font-size:14px;border:1px solid var(--color-border);border-radius:var(--border-radius);background-color:var(--color-surface);color:var(--color-text);cursor:pointer;outline:none}.select:focus{border-color:var(--color-primary)}.loading-overlay{position:fixed;inset:0;background-color:#ffffffe6;display:none;align-items:center;justify-content:center;z-index:1000}.loading-overlay.active{display:flex}.loading-spinner{width:48px;height:48px;border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{margin-left:16px;font-size:16px;color:var(--color-text)}@media(max-width:768px){#app{padding:16px}.app-header{flex-direction:column;align-items:flex-start;gap:12px}.controls-panel,.effects-panel{flex-direction:column}.control-group{width:100%;justify-content:space-between}.export-panel{flex-direction:column;gap:12px;text-align:center}}