:root{--primary: #1a73e8;--primary-dark: #1557b0;--accent: #00c853;--background: #121212;--surface: #1e1e1e;--surface-light: #2d2d2d;--text-primary: #ffffff;--text-secondary: #b3b3b3;--waveform: #1a73e8;--waveform-progress: #4da3ff;--marker: #ff5722;--danger: #f44336;--border-radius: 8px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:var(--text-primary);background-color:var(--background);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}a{color:var(--primary);text-decoration:none}a:hover{color:var(--waveform-progress)}button{border-radius:var(--border-radius);border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--surface-light);color:var(--text-primary);cursor:pointer;transition:all .2s ease}button:hover{background-color:var(--primary)}button:disabled{opacity:.5;cursor:not-allowed}button:focus,button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}input,select{background-color:var(--surface);border:1px solid var(--surface-light);border-radius:var(--border-radius);color:var(--text-primary);padding:.5em .75em;font-size:1em;font-family:inherit}input:focus,select:focus{outline:2px solid var(--primary);outline-offset:-2px}input::placeholder{color:var(--text-secondary)}.app{display:flex;flex-direction:column;min-height:100vh}.header{background-color:var(--surface);padding:1rem 2rem;border-bottom:1px solid var(--surface-light);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}.header-brand{display:flex;align-items:center;gap:1rem}.header-brand img{height:40px;width:auto}.header-title{margin:0;font-size:1.5rem;font-weight:600}.header-tagline{color:var(--text-secondary);font-size:.875rem}.main-content{flex:1;padding:1.5rem 2rem;max-width:1400px;width:100%;margin:0 auto}.drop-zone{border:2px dashed var(--surface-light);border-radius:var(--border-radius);padding:3rem;text-align:center;background-color:var(--surface);cursor:pointer;transition:all .2s ease}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--primary);background-color:#1a73e81a}.drop-zone-icon{font-size:3rem;margin-bottom:1rem}.drop-zone-text{font-size:1.25rem;margin-bottom:.5rem}.drop-zone-hint{color:var(--text-secondary);font-size:.875rem}.drop-zone input[type=file]{display:none}.file-info{background-color:var(--surface);border-radius:var(--border-radius);padding:1rem 1.5rem;margin-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.file-info-name{font-weight:500}.file-info-duration{color:var(--text-secondary)}.waveform-container{background-color:var(--surface);border-radius:var(--border-radius);padding:1.5rem;margin-top:1.5rem}.waveform-wrapper{border-radius:var(--border-radius);overflow:hidden;background-color:var(--background)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;gap:1rem}.spinner{width:48px;height:48px;border:4px solid var(--surface-light);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.controls{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:1.5rem;padding:1rem;background-color:var(--surface);border-radius:var(--border-radius)}.playback-controls{display:flex;align-items:center;gap:.5rem}.playback-controls button{padding:.5em 1em;font-size:1.25rem;background-color:transparent}.playback-controls button:hover{background-color:var(--surface-light)}.playback-controls .play-btn{background-color:var(--primary);padding:.6em 1.5em}.playback-controls .play-btn:hover{background-color:var(--primary-dark)}.volume-control{display:flex;align-items:center;gap:.5rem}.volume-slider{width:100px;accent-color:var(--primary)}.add-cue-btn{background-color:var(--accent);color:#000;font-weight:600}.add-cue-btn:hover{background-color:#00e65f}.current-time{font-family:monospace;font-size:1rem;background-color:var(--background);padding:.5rem 1rem;border-radius:var(--border-radius)}.track-list-section{margin-top:1.5rem}.track-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.track-list-header h2{margin:0;font-size:1.25rem}.track-table{width:100%;border-collapse:collapse;background-color:var(--surface);border-radius:var(--border-radius);overflow:hidden}.track-table th,.track-table td{padding:.75rem 1rem;text-align:left}.track-table th{background-color:var(--surface-light);font-weight:600;color:var(--text-secondary);font-size:.875rem;text-transform:uppercase}.track-table td{border-top:1px solid var(--surface-light)}.track-table input{width:100%;background-color:transparent;border:1px solid transparent;padding:.4rem .6rem}.track-table input:focus{background-color:var(--background);border-color:var(--primary)}.track-number{width:50px;text-align:center}.track-time{width:100px;font-family:monospace;cursor:pointer;color:var(--primary)}.track-time:hover{text-decoration:underline}.track-artist,.track-title{min-width:150px}.track-delete{width:50px;text-align:center}.delete-btn{background-color:transparent;color:var(--text-secondary);padding:.3em .6em;font-size:1.1rem}.delete-btn:hover{background-color:var(--danger);color:#fff}.track-hint{color:var(--text-secondary);font-size:.875rem;margin-top:1rem;padding:0 1rem}.no-tracks{text-align:center;padding:2rem;color:var(--text-secondary)}.cue-settings{background-color:var(--surface);border-radius:var(--border-radius);padding:1.5rem;margin-top:1.5rem}.cue-settings h2{margin:0 0 1rem;font-size:1.125rem}.cue-settings-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-size:.875rem;color:var(--text-secondary)}.export-section{display:flex;gap:1rem;margin-top:1.5rem;flex-wrap:wrap;justify-content:center}.export-btn{background-color:var(--primary);font-weight:600;padding:.8em 2em;font-size:1.1rem}.export-btn:hover{background-color:var(--primary-dark)}.save-btn{background-color:var(--surface-light)}.load-btn{background-color:var(--surface-light);position:relative}.load-btn input[type=file]{display:none}.footer{background-color:var(--surface);padding:1rem 2rem;border-top:1px solid var(--surface-light);text-align:center;margin-top:auto}.footer-content{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap;color:var(--text-secondary);font-size:.875rem}.footer-divider{color:var(--surface-light)}.info-panel{background-color:var(--surface);border-radius:var(--border-radius);padding:1.5rem;margin-top:1.5rem;border-left:4px solid var(--primary)}.info-panel h3{margin:0 0 .75rem;font-size:1rem}.info-panel p{margin:0;color:var(--text-secondary);font-size:.875rem;line-height:1.6}.info-panel ol{margin:.5rem 0 0;padding-left:1.25rem;color:var(--text-secondary);font-size:.875rem}.info-panel li{margin:.25rem 0}.error-message{background-color:#f443361a;border:1px solid var(--danger);border-radius:var(--border-radius);padding:1rem;color:var(--danger);margin-top:1rem}.toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);background-color:var(--surface-light);color:var(--text-primary);padding:1rem 2rem;border-radius:var(--border-radius);box-shadow:0 4px 12px #0000004d;z-index:1000;animation:slideUp .3s ease}.toast.success{border-left:4px solid var(--accent)}.toast.error{border-left:4px solid var(--danger)}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(1rem)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(max-width:768px){.header,.main-content{padding:1rem}.controls{flex-direction:column;align-items:stretch}.playback-controls{justify-content:center}.track-table{font-size:.875rem}.track-table th,.track-table td{padding:.5rem}.cue-settings-form{grid-template-columns:1fr}}.keyboard-shortcuts{background-color:var(--surface);border-radius:var(--border-radius);padding:1rem 1.5rem;margin-top:1.5rem}.keyboard-shortcuts h3{margin:0 0 .75rem;font-size:.875rem;color:var(--text-secondary)}.shortcuts-list{display:flex;flex-wrap:wrap;gap:1rem}.shortcut{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.shortcut kbd{background-color:var(--surface-light);padding:.2em .5em;border-radius:4px;font-family:monospace;font-size:.875rem}.shortcut span{color:var(--text-secondary)}