@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg-primary:#09090b;--bg-secondary:#18181b73;--bg-glass:#09090ba6;--border-zinc:#27272acc;--accent-primary:#4f46e5;--accent-light:#818cf8;--accent-hover:#4338ca;--text-main:#f4f4f5;--text-muted:#71717a;--text-light:#d4d4d8;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-display:"Space Grotesk", sans-serif;--font-mono:"JetBrains Mono", monospace;--transition-smooth:all .3s cubic-bezier(.4, 0, .2, 1);--shadow-premium:0 4px 30px #0000004d}*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#09090b}::-webkit-scrollbar-thumb{background:#27272a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#3f3f46}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-main);-webkit-font-smoothing:antialiased;justify-content:center;align-items:center;height:100vh;display:flex;position:relative;overflow:hidden}body:before{content:"";opacity:.35;pointer-events:none;z-index:0;background-image:linear-gradient(90deg,#18181b 1px,#0000 1px),linear-gradient(#18181b 1px,#0000 1px);background-size:5rem 5rem;position:absolute;inset:0}body:after{content:"";filter:blur(150px);pointer-events:none;z-index:0;background-color:#6366f10f;border-radius:50%;width:700px;height:700px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#root{z-index:10;justify-content:center;align-items:center;width:100vw;height:100vh;padding:0;display:flex;position:relative;overflow:hidden}.dashboard-container{background:var(--bg-glass);-webkit-backdrop-filter:blur(12px);width:100vw;max-width:none;height:100vh;max-height:none;box-shadow:none;transition:var(--transition-smooth);border:none;border-radius:0;flex-direction:column;display:flex;position:relative;overflow:hidden}.dashboard-container:hover{border-color:#6366f159;box-shadow:0 0 45px #6366f10d}.dashboard-header{border-bottom:1px solid var(--border-zinc);z-index:20;background:#09090bd9;justify-content:space-between;align-items:center;padding:1.25rem 2rem;display:flex}.header-info{align-items:center;gap:.75rem;display:flex}.logo-wrapper{background:var(--accent-primary);width:34px;height:34px;transition:var(--transition-smooth);border-radius:8px;justify-content:center;align-items:center;display:flex;box-shadow:0 0 10px #4f46e566}.logo-wrapper svg{color:#fff}.header-title h1{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.25em;color:var(--text-light);font-size:.9rem;font-weight:700}.header-status{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);align-items:center;gap:.35rem;margin-top:.15rem;font-size:.65rem;display:flex}.status-dot{background-color:var(--accent-light);width:6px;height:6px;box-shadow:0 0 8px var(--accent-primary);border-radius:50%}.status-dot.active{background-color:#10b981;box-shadow:0 0 8px #10b981}.header-links{gap:.75rem;display:flex}.header-button{border:1px solid var(--border-zinc);color:var(--text-muted);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:var(--transition-smooth);background:0 0;border-radius:8px;align-items:center;gap:.5rem;padding:.45rem .85rem;font-size:.75rem;text-decoration:none;display:flex}.header-button:hover{color:var(--text-main);background:#18181bbf;border-color:#6366f173}.dashboard-content{flex:1;display:flex;position:relative;overflow:hidden}.sidebar-panel{border-right:1px solid var(--border-zinc);background:#0e0e11cc;flex-direction:column;gap:1.5rem;width:360px;padding:1.5rem;display:flex;overflow-y:auto}.visualizer-area{background:#09090b33;flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.canvas-wrapper{background:#020203;flex:1;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}.visualizer-canvas{object-fit:contain;width:100%;height:100%}.upload-placeholder{text-align:center;z-index:10;cursor:pointer;transition:var(--transition-smooth);background:#09090bf2;flex-direction:column;justify-content:center;align-items:center;padding:2rem;display:flex;position:absolute;inset:0}.upload-placeholder.dragover{border:2px dashed var(--accent-light);background:#4f46e526}.upload-icon-box{border:1px solid var(--border-zinc);width:80px;height:80px;transition:var(--transition-smooth);color:var(--text-muted);background:#18181bcc;border-radius:20px;justify-content:center;align-items:center;margin-bottom:1.5rem;display:flex}.upload-placeholder:hover .upload-icon-box{border-color:var(--accent-light);color:var(--accent-light);transform:translateY(-4px);box-shadow:0 10px 25px #6366f126}.upload-title{font-family:var(--font-display);color:var(--text-light);margin-bottom:.5rem;font-size:1.25rem;font-weight:600}.upload-subtitle{color:var(--text-muted);max-width:280px;margin-bottom:1.5rem;font-size:.85rem}.playback-controls{border-top:1px solid var(--border-zinc);z-index:20;background:#09090be6;flex-direction:column;gap:.75rem;padding:1.25rem 2rem;display:flex}.controls-timeline-row{align-items:center;gap:1rem;width:100%;display:flex}.time-display{font-family:var(--font-mono);color:var(--text-muted);min-width:45px;font-size:.75rem}.timeline-slider{appearance:none;cursor:pointer;height:6px;transition:var(--transition-smooth);background:#27272a;border-radius:3px;outline:none;flex:1}.timeline-slider::-webkit-slider-thumb{appearance:none;background:var(--accent-light);width:14px;height:14px;transition:var(--transition-smooth);border:2px solid #fff;border-radius:50%;box-shadow:0 0 8px #4f46e580}.timeline-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.controls-buttons-row{justify-content:space-between;align-items:center;width:100%;display:flex}.btn-group{align-items:center;gap:.75rem;display:flex}.control-btn{border:1px solid var(--border-zinc);color:var(--text-light);cursor:pointer;width:40px;height:40px;transition:var(--transition-smooth);background:#18181b99;border-radius:10px;justify-content:center;align-items:center;display:flex}.control-btn:hover{border-color:var(--text-muted);color:#fff;background:#27272acc}.control-btn.active{background:var(--accent-primary);border-color:var(--accent-light);color:#fff}.control-btn:disabled{opacity:.4;cursor:not-allowed}.export-btn{background:var(--accent-primary);border:1px solid var(--accent-light);color:#fff;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:var(--transition-smooth);border-radius:10px;align-items:center;gap:.5rem;padding:.6rem 1.25rem;font-size:.8rem;font-weight:600;display:flex;box-shadow:0 0 15px #4f46e54d}.export-btn:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 0 20px #4f46e580}.export-btn:disabled{border-color:var(--border-zinc);color:var(--text-muted);cursor:not-allowed;box-shadow:none;background:#18181b80}.settings-section{border-bottom:1px solid #27272a66;flex-direction:column;gap:.85rem;padding-bottom:1.5rem;display:flex}.settings-section:last-of-type{border-bottom:none}.section-title{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted);font-size:.7rem;font-weight:700}.form-group{flex-direction:column;gap:.45rem;display:flex}.form-label{color:var(--text-light);font-size:.8rem;font-weight:500}.select-input{border:1px solid var(--border-zinc);color:var(--text-main);font-family:var(--font-sans);cursor:pointer;transition:var(--transition-smooth);background:#0f0f13;border-radius:8px;outline:none;width:100%;padding:.55rem .75rem;font-size:.85rem}.select-input:focus{border-color:var(--accent-light);box-shadow:0 0 10px #6366f126}.slider-group{justify-content:space-between;align-items:center;display:flex}.value-bubble{font-family:var(--font-mono);color:var(--accent-light);background:#6366f11a;border-radius:4px;padding:.1rem .4rem;font-size:.75rem}.toggle-row{cursor:pointer;justify-content:space-between;align-items:center;display:flex}.toggle-switch{width:42px;height:22px;transition:var(--transition-smooth);background-color:#27272a;border-radius:11px;position:relative}.toggle-switch:after{content:"";width:16px;height:16px;transition:var(--transition-smooth);background-color:#fff;border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0006}.toggle-checkbox{display:none}.toggle-checkbox:checked+.toggle-switch{background-color:var(--accent-primary)}.toggle-checkbox:checked+.toggle-switch:after{left:23px}.file-info-box{border:1px solid var(--border-zinc);background:#18181b66;border-radius:8px;justify-content:space-between;align-items:center;gap:.5rem;padding:.75rem;display:flex}.file-name-text{color:var(--text-light);white-space:nowrap;text-overflow:ellipsis;max-width:200px;font-size:.8rem;overflow:hidden}.file-meta-text{font-family:var(--font-mono);color:var(--text-muted);margin-top:.2rem;font-size:.65rem}.btn-remove-file{color:var(--text-muted);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.btn-remove-file:hover{color:#ef4444}.export-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:50;background:#09090bd9;justify-content:center;align-items:center;animation:.3s forwards fadeIn;display:flex;position:absolute;inset:0}.export-modal{border:1px solid var(--border-zinc);text-align:center;background:#0e0e11;border-radius:16px;flex-direction:column;align-items:center;width:90%;max-width:450px;padding:2.25rem;display:flex;box-shadow:0 10px 40px #00000080}.export-spinner-box{width:70px;height:70px;margin-bottom:1.5rem;position:relative}.export-spinner{border:4px solid #4f46e51a;border-left-color:var(--accent-light);border-radius:50%;width:100%;height:100%;animation:1.2s linear infinite spin}.export-percent{font-family:var(--font-mono);color:var(--text-light);justify-content:center;align-items:center;font-size:.95rem;font-weight:600;display:flex;position:absolute;inset:0}.export-modal-title{font-family:var(--font-display);color:var(--text-main);margin-bottom:.5rem;font-size:1.15rem;font-weight:600}.export-modal-status{color:var(--text-muted);min-height:20px;margin-bottom:1.5rem;font-size:.85rem}.export-progress-bar-bg{background:#27272a;border-radius:3px;width:100%;height:6px;margin-bottom:1.5rem;overflow:hidden}.export-progress-bar-fill{background:var(--accent-light);height:100%;box-shadow:0 0 10px var(--accent-primary);width:0%;transition:width .1s linear}.btn-cancel-export{border:1px solid var(--border-zinc);color:var(--text-muted);font-family:var(--font-sans);cursor:pointer;transition:var(--transition-smooth);background:#27272a80;border-radius:8px;padding:.5rem 1.25rem;font-size:.8rem}.btn-cancel-export:hover{color:#ef4444;background:#ef44441a;border-color:#ef444466}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (width<=1024px){#root{padding:.5rem}.dashboard-container{border-radius:12px;height:98vh}.dashboard-content{flex-direction:column-reverse}.sidebar-panel{border-right:none;border-top:1px solid var(--border-zinc);gap:1rem;width:100%;height:40%;padding:1rem}.visualizer-area{height:60%}.dashboard-header,.playback-controls{padding:1rem}}