*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#1a1a1a;color:#fff;overflow:hidden}.app-container{display:flex;height:calc(100vh - 40px);width:100vw}.left-pane{display:flex;flex-direction:row;background:linear-gradient(135deg,#2a2a2a,#1f1f1f);border-right:1px solid #333;z-index:100}.script-editor-panel{width:450px;min-width:300px;display:flex;flex-direction:column;background:linear-gradient(135deg,#1f1f1f,#1a1a1a);overflow:hidden;position:relative;height:100%}.script-editor-container{height:100%;display:flex;flex-direction:column;position:relative}.resize-handle{width:6px;background:#2a2a2a;cursor:col-resize;position:relative;transition:background .2s;border-left:1px solid #333;border-right:1px solid #333}.resize-handle:hover,.resize-handle.dragging{background:#3a3a3a}#main-container{display:flex;width:100%;height:100vh;overflow:hidden;background:#0a0a0a}.script-editor-header{padding:20px;border-bottom:1px solid #333;background:#0003}.script-editor-title{color:#4caf50;font-size:18px;font-weight:600;margin:0 0 10px}.script-editor-session{font-size:11px;color:#888;font-family:monospace}.script-editor-status-bar,.events-status-bar,.visemes-status-bar{padding:12px 20px;background:#ffffff05;border-bottom:1px solid #222;display:flex;align-items:center;gap:12px;font-size:13px;color:#888}.status-text{color:#aaa}.separator{color:#555}.auto-save-status{margin-left:auto;color:#4caf50;font-weight:500}.auto-save-status.saving{color:#ff9800}.script-editor-content{flex:1;display:flex;flex-direction:column;padding:12px 20px 90px;gap:8px;overflow-y:auto;overflow-x:hidden;min-height:0}.script-textarea-container{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}.script-textarea{height:350px;background:#0000004d;border:1px solid #444;color:#e0e0e0;padding:15px;border-radius:6px;resize:vertical;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.6;min-height:50px}.script-textarea:focus{outline:none;border-color:#4caf50;box-shadow:0 0 0 2px #4caf5033}.script-editor-bottom-bar{position:absolute;bottom:10px;left:10px;right:10px;display:flex;justify-content:flex-end;align-items:center;gap:8px;pointer-events:none}.script-editor-bottom-bar>*{pointer-events:auto}.script-character-counter{font-size:12px;color:#666;background:#00000080;padding:4px 8px;border-radius:4px}.script-rich-text-toggle{background:#00000080;border:1px solid #444;padding:4px;border-radius:4px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;width:32px;height:24px}.script-rich-text-toggle:hover{background:#000000b3;border-color:#666}.script-rich-text-toggle.active{border-color:#4caf50;background:#4caf501a}.script-rich-text-toggle .toggle-icon{width:20px;height:auto;filter:brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%)}.script-rich-text-toggle:hover .toggle-icon{filter:brightness(0) saturate(100%) invert(80%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(95%)}.script-rich-text-toggle.active .toggle-icon{filter:brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(500%) hue-rotate(75deg) brightness(95%) contrast(95%)}.script-character-counter.warning{color:#ff9800}.script-character-counter.error{color:#f44336}.script-controls{display:flex;gap:10px;flex-wrap:wrap}.script-btn{padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.script-btn-secondary{background:#2a2a2a;color:#fff}.script-btn-secondary:hover:not(:disabled){background:#333}.script-btn-preview{background:#2196f3;color:#fff}.script-btn-preview:hover:not(:disabled){background:#1976d2}.script-btn-preview:disabled{background:#333;color:#666}.script-btn-generate{background:#4caf50;color:#fff}.script-btn-generate:hover{background:#45a049}.script-btn-generate:disabled{background:#333;color:#666;cursor:not-allowed}.script-btn-cancel{background:#ff9800;color:#fff;display:none}.script-btn-cancel:hover{background:#f57c00}.script-playback-controls{display:flex;gap:10px}.script-playback-inline{display:flex;gap:5px}.script-actions{position:absolute;bottom:0;left:0;right:0;padding:20px;background:#1a1a1a;border-top:1px solid #333;display:flex;justify-content:space-between;gap:10px}.script-actions-left,.script-actions-right{display:flex;gap:10px}.script-btn-download{background:#2a2a2a;color:#fff;border:1px solid #444;padding:10px;display:inline-flex;align-items:center;justify-content:center}.script-btn-download:hover:not(:disabled){background:#333;border-color:#4caf50}.script-btn-download svg{width:20px;height:18px}.script-btn-icon-small{background:#2a2a2a;color:#fff;border:1px solid #444;border-radius:4px;padding:5px 6px;display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px}.script-btn-icon-small:hover:not(:disabled){background:#333;border-color:#4caf50}.script-btn-icon-img-small{width:12px;height:12px;filter:brightness(0) invert(1)}.script-btn-icon-small:hover:not(:disabled) .script-btn-icon-img-small{filter:brightness(0) saturate(100%) invert(63%) sepia(98%) saturate(478%) hue-rotate(74deg) brightness(103%) contrast(103%)}.script-btn-icon-small:disabled .script-btn-icon-img-small{filter:brightness(0) invert(.3)}.script-btn-download-small{background:#2a2a2a;color:#fff;border:1px solid #444;border-radius:4px;padding:5px 8px;display:inline-flex;align-items:center;justify-content:center;height:30px;font-size:10px}.script-btn-download-small:hover:not(:disabled){background:#333;border-color:#4caf50}.script-btn-download-small svg{width:12px;height:11px}.script-btn-download-small:disabled{opacity:.5}.script-btn:disabled{opacity:.5;cursor:not-allowed}.script-input-mode-selector{display:flex;gap:2px;background:#0003;border-radius:8px;padding:4px;margin-bottom:16px}.mode-btn{flex:1;padding:10px 16px;background:transparent;border:none;color:#fff9;cursor:pointer;border-radius:6px;transition:all .3s ease;font-size:13px;font-weight:500;text-align:center}.mode-btn:hover{background:#ffffff0d;color:#fffc}.mode-btn.active{background:#4a90e233;color:#4a90e2;font-weight:600}.script-input-mode{display:none;flex-direction:column;flex:1;min-height:0}.script-input-mode.active{display:flex}.script-audio-upload-container{padding:20px}.audio-upload-area{border:2px dashed #444;border-radius:12px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .3s ease;background:#ffffff05}.audio-upload-area:hover{border-color:#4caf50;background:#4caf500d}.audio-upload-area.drag-over{border-color:#4caf50;background:#4caf501a;transform:scale(1.02)}.upload-icon{font-size:48px;margin-bottom:16px;opacity:.7}.upload-title{font-size:18px;font-weight:600;color:#fff;margin-bottom:8px}.upload-subtitle{font-size:14px;color:#aaa;margin-bottom:8px}.upload-formats{font-size:12px;color:#666}.audio-upload-progress{padding:20px;text-align:center}.progress-bar{width:100%;height:8px;background:#333;border-radius:4px;overflow:hidden;margin-bottom:16px}.progress-fill{height:100%;background:linear-gradient(90deg,#4caf50,#66bb6a);width:0%;transition:width .3s ease}.progress-text{font-size:14px;color:#aaa}.audio-upload-result{padding:20px;text-align:center;background:#4caf501a;border:1px solid rgba(76,175,80,.3);border-radius:12px}.result-icon{font-size:48px;margin-bottom:16px}.result-title{font-size:18px;font-weight:600;color:#4caf50;margin-bottom:8px}.result-subtitle{font-size:14px;color:#aaa;margin-bottom:20px}.result-action-btn{padding:12px 24px;background:#4caf50;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.result-action-btn:hover{background:#45a049;transform:translateY(-1px)}.voice-selector{margin-bottom:8px}.voice-selector-label{display:block;font-size:12px;color:#888;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.voice-dropdown{position:relative}.voice-dropdown-button{width:100%;padding:10px 40px 10px 12px;background:#2a2a2a;border:1px solid #444;border-radius:8px;color:#fff;font-size:14px;cursor:pointer;text-align:left;transition:all .2s;position:relative}.voice-dropdown-button:hover{background:#333;border-color:#4caf50}.voice-dropdown-button.voice-dropdown-open{border-color:#4caf50;border-bottom-left-radius:0;border-bottom-right-radius:0}.voice-dropdown-content{display:flex;flex-direction:column;gap:2px}.voice-dropdown-name{font-weight:500;display:block}.voice-dropdown-description{font-size:11px;color:#888;display:block}.voice-dropdown-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);transition:transform .2s;color:#888}.voice-dropdown-open .voice-dropdown-arrow{transform:translateY(-50%) rotate(180deg)}.voice-dropdown-menu{position:absolute;top:100%;left:0;right:0;background:#2a2a2a;border:1px solid #4CAF50;border-top:none;border-bottom-left-radius:8px;border-bottom-right-radius:8px;max-height:400px;overflow:hidden;z-index:1000;box-shadow:0 4px 6px #0000004d}.voice-search{padding:12px;border-bottom:1px solid #333;background:#0003}.voice-search-input{width:100%;padding:8px 12px;background:#1f1f1f;border:1px solid #444;border-radius:6px;color:#fff;font-size:13px}.voice-search-input:focus{outline:none;border-color:#4caf50}.voice-list{max-height:320px;overflow-y:auto}.voice-item{padding:12px;cursor:pointer;transition:background .2s;border-bottom:1px solid rgba(255,255,255,.05)}.voice-item:hover{background:#4caf501a}.voice-item-selected{background:#4caf5033!important}.voice-item-veronica{background:linear-gradient(90deg,#8a2be20d,#9333ea0d)}.voice-item-boomeo{background:linear-gradient(90deg,#ffd7000d,#ffc1070d)}.voice-item-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.voice-item-info{flex:1}.voice-item-name{font-size:14px;font-weight:500;color:#fff;margin-bottom:4px;display:flex;align-items:center;gap:8px}.voice-badge-veronica{background:linear-gradient(90deg,#8a2be2,#9333ea);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.voice-badge-boomeo{background:linear-gradient(90deg,gold,#ffc107);color:#000;font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.voice-item-description{font-size:11px;color:#888;margin-bottom:4px;line-height:1.3}.voice-item-labels{display:flex;gap:6px;flex-wrap:wrap}.voice-label{font-size:10px;background:#ffffff1a;color:#ffffffb3;padding:2px 6px;border-radius:3px}.voice-preview-button{width:32px;height:32px;border-radius:6px;background:#4caf501a;border:1px solid rgba(76,175,80,.3);color:#4caf50;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}.voice-preview-button:hover{background:#4caf5033;border-color:#4caf50;transform:scale(1.1)}.voice-preview-button img{width:16px;height:16px;filter:brightness(0) saturate(100%) invert(53%) sepia(92%) saturate(364%) hue-rotate(76deg) brightness(97%) contrast(87%)}.voice-preview-button:hover img{filter:brightness(0) saturate(100%) invert(53%) sepia(92%) saturate(364%) hue-rotate(76deg) brightness(110%) contrast(87%)}.voice-preview-button.voice-preview-playing{background:#ef44441a;border:1px solid rgba(239,68,68,.3)}.voice-preview-button.voice-preview-playing img{filter:brightness(0) saturate(100%) invert(37%) sepia(93%) saturate(2351%) hue-rotate(341deg) brightness(95%) contrast(91%)}.voice-preview-button.voice-preview-playing:hover{background:#ef444433;border-color:#ef4444}.voice-no-results{padding:20px;text-align:center;color:#888;font-size:13px}.generation-settings{margin-bottom:8px}.generation-settings-label{display:block;font-size:12px;color:#aaa;text-transform:uppercase;margin-bottom:8px;font-weight:600;letter-spacing:.5px}.generation-dropdown{position:relative}.generation-dropdown-button{width:100%;padding:10px 40px 10px 12px;background:#2a2a2a;border:1px solid #444;border-radius:8px;color:#fff;font-size:14px;cursor:pointer;text-align:left;transition:all .2s;position:relative}.generation-dropdown-button:hover{background:#333;border-color:#4caf50}.generation-dropdown-button.generation-dropdown-open{border-color:#4caf50;border-bottom-left-radius:0;border-bottom-right-radius:0}.generation-dropdown-content{display:flex;flex-direction:column;gap:2px}.generation-dropdown-name{font-weight:500;display:block}.generation-dropdown-description{font-size:12px;color:#888;display:block}.generation-dropdown-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#888;transition:transform .2s}.generation-dropdown-open .generation-dropdown-arrow{transform:translateY(-50%) rotate(180deg)}.generation-dropdown-menu{position:absolute;top:100%;left:0;right:0;background:#2a2a2a;border:1px solid #4CAF50;border-top:0;border-radius:0 0 8px 8px;max-height:400px;overflow-y:auto;z-index:100;box-shadow:0 8px 16px #0000004d}.generation-settings-content{padding:20px}.generation-slider-group{margin-bottom:24px}.generation-slider-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.generation-slider-title{font-size:14px;font-weight:500;color:#fff}.generation-slider-value{font-size:14px;color:#4caf50;font-weight:500;min-width:50px;text-align:right}.generation-slider-container{display:flex;align-items:center;gap:12px}.generation-slider-label-left,.generation-slider-label-right{font-size:12px;color:#888;white-space:nowrap}.generation-slider-label-left{min-width:80px;text-align:right}.generation-slider-label-right{min-width:80px;text-align:left}.generation-slider{-webkit-appearance:none;appearance:none;flex:1;height:6px;background:#444;border-radius:3px;outline:none;transition:background .2s}.generation-slider:hover{background:#555}.generation-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:#fff;border-radius:50%;cursor:pointer;transition:all .2s;box-shadow:0 2px 4px #0003}.generation-slider::-moz-range-thumb{width:18px;height:18px;background:#fff;border-radius:50%;cursor:pointer;transition:all .2s;box-shadow:0 2px 4px #0003}.generation-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 2px 8px #0000004d}.generation-slider::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 2px 8px #0000004d}.generation-slider::-webkit-slider-thumb:active{transform:scale(.95)}.generation-slider::-moz-range-thumb:active{transform:scale(.95)}.generation-settings-footer{margin-top:20px;padding-top:20px;border-top:1px solid #444;display:flex;justify-content:space-between;align-items:center}.generation-reset-button,.generation-close-button{padding:8px 16px;background:#333;border:1px solid #555;border-radius:6px;color:#aaa;font-size:13px;cursor:pointer;transition:all .2s}.generation-reset-button:hover,.generation-close-button:hover{background:#444;border-color:#666;color:#fff}.generation-reset-button:active,.generation-close-button:active{transform:scale(.98)}.center-area{flex:1;position:relative;background:#0a0a0a;display:flex;flex-direction:column;min-width:0;width:100%}.right-pane{position:absolute;right:0;top:40px;height:auto;max-height:100%;width:300px;padding:20px;background:transparent;border-left:none;box-shadow:none;display:flex;flex-direction:column;overflow-y:auto;z-index:150;box-sizing:border-box}.right-pane:has(#audio-queue:empty){padding:0;width:0;overflow:hidden}#recording-container{position:relative;flex:1;width:100%;height:100%;overflow:hidden;z-index:0}#background-layer{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0a0a0a;z-index:0}#canvas-overlays{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000}#canvas-overlays>*{pointer-events:auto}.recording-area-indicator{animation:none}.recording-area-indicator.recording{animation:recordingActivePulse 1s ease-in-out infinite}.recording-area-indicator.preview{animation:previewActivePulse 1s ease-in-out infinite}@keyframes recordingActivePulse{0%,to{opacity:.7}50%{opacity:1}}@keyframes previewActivePulse{0%,to{opacity:.7}50%{opacity:1}}#viseme-buttons{position:absolute;bottom:0;left:50%;transform:translate(-50%);display:flex;flex-wrap:nowrap;gap:.5rem;justify-content:center;padding:1rem;width:auto;max-width:95%}.pane-section{padding:20px;border-bottom:none;background:transparent}.pane-section:last-child{border-bottom:none;flex:1}.pane-section h3{margin-bottom:16px;font-size:16px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #4a90e2;padding-bottom:8px}.pane-section h4{margin-bottom:12px;font-size:14px;font-weight:500;color:#ccc;text-transform:uppercase;letter-spacing:.3px}.loading-indicator{display:none;color:#fff9;font-size:12px;text-align:center;margin-top:8px}.loading-indicator.show{display:block}.recording-controls-section{background:#ffffff05}.recording-controls{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.recording-button{padding:12px 16px;background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:14px;font-weight:500;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}.recording-button:hover:not(:disabled){background:linear-gradient(135deg,#34495e,#2c3e50);transform:translateY(-1px);box-shadow:0 4px 12px #0000004d}.recording-button:disabled{opacity:.5;cursor:not-allowed}.recording-button.start-recording{background:linear-gradient(135deg,#e74c3c,#c0392b)}.recording-button.start-recording:hover:not(:disabled){background:linear-gradient(135deg,#c0392b,#e74c3c);box-shadow:0 4px 12px #e74c3c66}.recording-button.area-selection{background:linear-gradient(135deg,#3498db,#2980b9)}.recording-button.area-selection:hover:not(:disabled){background:linear-gradient(135deg,#2980b9,#3498db);box-shadow:0 4px 12px #3498db66}.recording-button.area-selection.active{background:linear-gradient(135deg,#f39c12,#e67e22);box-shadow:0 0 10px #f39c1280}.recording-status{padding:12px;background:#ffffff0d;border-radius:6px;margin-bottom:16px;text-align:center;font-size:14px;border-left:3px solid #4a90e2}.recording-status.recording{background:#e74c3c1a;border-left-color:#e74c3c}.recording-error{margin-bottom:16px;padding:12px;background:#f871711a;border-radius:6px;font-size:13px;color:#ff6b6b;border-left:3px solid #ff6b6b}.preset-section{margin-bottom:20px}.preset-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.preset-header h4{margin:0}.area-toggle-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:transform .2s ease}.area-toggle-button:hover{transform:scale(1.1)}.area-toggle-button img{width:24px;height:18px;transition:filter .2s ease;filter:brightness(0) invert(1)}.area-toggle-button.active img{filter:brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(186deg) brightness(104%) contrast(91%)}.preset-dropdown-container{margin-bottom:16px}.custom-select-wrapper{position:relative;width:100%}.custom-select{position:relative;padding:10px 40px 10px 12px;background:#333;color:#fff;border:2px solid #444;border-radius:6px;cursor:pointer;transition:all .2s ease;min-height:52px}.custom-select:hover{background-color:#3a3a3a;border-color:#4a90e2;transform:translateY(-1px)}.custom-select:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e233}.custom-select.active{border-color:#4a90e2;border-bottom-left-radius:0;border-bottom-right-radius:0}.select-selected{display:flex;flex-direction:column;gap:2px}.select-name{font-size:14px;font-weight:600;color:#fff}.select-info{font-size:11px;color:#888;font-family:monospace}.select-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:center;background-size:16px;transition:transform .2s ease}.custom-select.active .select-arrow{transform:translateY(-50%) rotate(180deg)}.select-items{position:absolute;top:100%;left:0;right:0;z-index:99;background:#333;border:2px solid #4a90e2;border-top:none;border-bottom-left-radius:6px;border-bottom-right-radius:6px;max-height:240px;overflow-y:auto}#resolution-preset-overlay .select-items{border-radius:0}.select-hide{display:none}.select-option{padding:10px 12px;cursor:pointer;transition:background-color .2s ease;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid rgba(255,255,255,.1)}.select-option:last-child{border-bottom:none}.select-option:hover{background-color:#4a90e233}.select-option.selected{background-color:#4a90e24d}.option-name{font-size:13px;font-weight:500;color:#fff}.option-info{font-size:11px;color:#aaa;font-family:monospace}.select-items::-webkit-scrollbar{width:6px}.select-items::-webkit-scrollbar-track{background:#ffffff1a;border-radius:3px}.select-items::-webkit-scrollbar-thumb{background:#555;border-radius:3px}.select-items::-webkit-scrollbar-thumb:hover{background:#666}.canvas-overlay{background:#1d1d1d8c;border:1px solid rgba(255,255,255,.2)}#recording-controls-overlay{position:absolute;bottom:20px;left:20px;z-index:100}.recording-overlay-container{display:flex;align-items:center;gap:8px}.record-toggle-button{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#e74c3c;border:1px solid #e74c3c;border-radius:6px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;height:36px}.record-toggle-button:hover{background:#c0392b;border-color:#c0392b}.record-toggle-button.recording{background:#e74c3c;border-color:#e74c3c;color:#fff}.record-toggle-button.recording:hover{background:#c0392b;border-color:#c0392b}.record-toggle-button .record-icon{width:14px;height:14px;filter:brightness(0) invert(1)}.record-toggle-button .record-icon.start{display:inline-block}.record-toggle-button .record-icon.stop{display:none}.record-toggle-button.recording .record-icon.start{display:none!important}.record-toggle-button.recording .record-icon.stop{display:inline-block!important}.controls-toggle-button{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:all .2s ease;padding:0}.controls-toggle-button:hover{border-color:#ffffff4d}.controls-toggle-button.active{border-color:#fff6}.controls-toggle-button img{width:18px;height:18px;filter:brightness(0) invert(1);opacity:.8}.controls-toggle-button:hover img{opacity:1}.quality-settings-button{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:all .2s ease;padding:0}.quality-settings-button:hover{border-color:#ffffff4d}.quality-settings-button.active{border-color:#fff6}.quality-settings-button img{width:18px;height:18px;filter:brightness(0) invert(1);opacity:.8}.quality-settings-button:hover img{opacity:1}.quality-popup{position:absolute;bottom:calc(100% + 10px);left:0;border-radius:8px;padding:12px;min-width:200px;box-shadow:0 4px 12px #0003}.quality-popup-content{display:flex;flex-direction:column;gap:12px}.quality-popup .quality-control-group{display:flex;flex-direction:column;gap:6px}.quality-popup .quality-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.quality-popup .frame-rate-select{padding:6px 8px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:12px;cursor:pointer}.quality-popup .frame-rate-select:hover{background:#ffffff26;border-color:#ffffff4d}.quality-popup .bitrate-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.quality-popup .bitrate-button{padding:6px 8px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:11px;cursor:pointer;transition:all .2s ease}.quality-popup .bitrate-button:hover{background:#ffffff26;border-color:#ffffff4d}.quality-popup .bitrate-button.active{background:#fff3;border-color:#fff6;font-weight:600}.color-presets-container{display:flex;gap:6px;margin-top:8px;align-items:center;position:relative}.color-preset{width:26px;height:26px;min-width:26px;min-height:26px;border:2px solid rgba(255,255,255,.3);border-radius:50%;cursor:pointer;padding:0;transition:all .2s ease;position:relative;flex-shrink:0}.color-preset:hover{border-color:#fff9;transform:scale(1.15)}.color-preset.active{border-color:#4caf50;box-shadow:0 0 8px #4caf5099}.hex-input-container{display:flex;align-items:center;margin-top:10px}.hex-input{flex:1;padding:6px 10px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff;font-size:12px;font-family:Monaco,Courier New,monospace}.hex-input:hover{background:#ffffff26;border-color:#ffffff4d}.hex-input:focus{outline:none;background:#ffffff26;border-color:#4caf50}.quality-control-group.disabled{opacity:.5;pointer-events:none}#recording-controls-overlay .recording-error{position:absolute;top:calc(100% + 5px);left:0;padding:6px 10px;background:#e74c3c33;border:1px solid rgba(231,76,60,.4);border-radius:4px;font-size:11px;color:#ffffffe6;white-space:nowrap}.export-modal{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-out}.export-modal-content{background:#1a1a1a;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:32px;max-width:1400px;width:90%;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease-out}.export-modal-header{margin-bottom:24px;text-align:center}.export-modal-header h3{margin:0 0 8px;color:#fff;font-size:20px;font-weight:600}.export-modal-header .file-info{margin:0;color:#fff9;font-size:14px}.video-preview-container{margin:24px 0;border-radius:8px;overflow:hidden;background:#0a0a0a;position:relative;max-height:800px;display:flex;justify-content:center;align-items:center}.video-preview-container.transparent-bg{background-image:linear-gradient(45deg,#1a1a1a 25%,transparent 25%),linear-gradient(-45deg,#1a1a1a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1a1a1a 75%),linear-gradient(-45deg,transparent 75%,#1a1a1a 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}#export-video-preview{width:100%;max-height:800px;display:block}.export-actions{display:flex;gap:12px;margin:20px 0;justify-content:center}.export-action-button{flex:1;max-width:250px;background:linear-gradient(135deg,#4a90e2,#357abd);border:none;border-radius:6px;padding:14px 20px;color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:10px}.export-action-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4a90e266;background:linear-gradient(135deg,#357abd,#4a90e2)}.export-action-button.secondary{background:#ffffff1a;border:1px solid rgba(255,255,255,.2)}.export-action-button.secondary:hover{background:#ffffff26;box-shadow:0 4px 12px #ffffff1a}.button-icon{font-size:18px}.button-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.button-title{font-size:15px;font-weight:600;line-height:1.2}.button-subtitle{font-size:11px;opacity:.9;margin-top:2px;font-weight:400}.skip-button{width:100%;padding:10px;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:#fff9;cursor:pointer;transition:all .2s;font-size:14px}.skip-button:hover{background:#ffffff0d;color:#fffc}.conversion-overlay{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:10001}.conversion-content{background:#1a1a1a;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:32px;max-width:400px;width:90%;text-align:center}.conversion-content h4{margin:0 0 20px;color:#fff;font-size:18px;font-weight:600}.progress-bar{width:100%;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden;margin-bottom:16px}.progress-fill{height:100%;background:linear-gradient(90deg,#e74c3c,#f39c12);border-radius:3px;transition:width .3s ease;width:0%}.progress-text{margin:0 0 20px;color:#ffffffb3;font-size:14px}.cancel-conversion{padding:8px 24px;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:4px;color:#fffc;cursor:pointer;transition:all .2s;font-size:14px}.cancel-conversion:hover{background:#ffffff0d;border-color:#ffffff80}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}#resolution-preset-overlay{position:absolute;bottom:20px;right:20px;z-index:100}.preset-overlay-container{display:flex;align-items:center;gap:8px}#resolution-preset-overlay .custom-select{min-height:36px;padding:6px 32px 6px 10px}#resolution-preset-overlay .custom-select:hover{border-color:#ffffff4d;transform:none}#resolution-preset-overlay .custom-select:focus{border-color:#fff6;box-shadow:0 0 0 2px #ffffff1a}#resolution-preset-overlay .custom-select.active{border-color:#fff6;border-radius:0 0 6px 6px}#resolution-preset-overlay .select-name{font-size:12px;font-weight:500;color:#fffffff2;line-height:1.2}#resolution-preset-overlay .select-info{font-size:9px;color:#ffffffb3;line-height:1.2}#resolution-preset-overlay .select-arrow{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")}#resolution-preset-overlay .select-items{border-bottom:none;bottom:100%;top:auto;border-radius:6px 6px 0 0;box-shadow:0 -4px 12px #0000001a}#resolution-preset-overlay .select-option{border-bottom:1px solid rgba(255,255,255,.1);padding:6px 10px}#resolution-preset-overlay .select-option:hover{background-color:#ffffff26}#resolution-preset-overlay .select-option.selected{background-color:#fff3}#resolution-preset-overlay .option-name{color:#fffffff2;font-size:12px;line-height:1.2}#resolution-preset-overlay .option-info{color:#fff9;font-size:9px;line-height:1.2}#resolution-preset-overlay .area-toggle-button{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease}#resolution-preset-overlay .area-toggle-button:hover{border-color:#ffffff4d}#resolution-preset-overlay .area-toggle-button.active{border-color:#fff6}#resolution-preset-overlay .area-toggle-button img{width:20px;height:15px;filter:brightness(0) invert(1);opacity:.8}#resolution-preset-overlay .area-toggle-button:hover img{opacity:1}#resolution-preset-overlay .area-toggle-button.active img{filter:brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(186deg) brightness(104%) contrast(91%);opacity:1}.preset-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.preset-button{padding:10px;background:#333;color:#fff;border:2px solid #444;border-radius:6px;cursor:pointer;transition:all .2s ease;text-align:center;font-size:11px;min-height:65px;display:flex;flex-direction:column;justify-content:center;align-items:center}.preset-button:hover{background:#3a3a3a;border-color:#4a90e2;transform:translateY(-1px)}.preset-button.active{background:#4a90e2;border-color:#4a90e2;color:#fff}.preset-button .preset-name{font-size:12px;font-weight:700;display:block;margin-bottom:2px}.preset-button .preset-ratio{font-size:10px;color:#aaa;display:block;margin-bottom:2px}.preset-button.active .preset-ratio{color:#ddd}.preset-button .preset-dims{font-size:9px;color:#888;font-family:monospace;display:block}.preset-button.active .preset-dims{color:#fff;font-weight:700}.quality-section{background:#ffffff0d;border-radius:8px;padding:16px;margin-bottom:20px}.quality-control-group{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.quality-control-group:last-child{margin-bottom:0}.quality-label{font-size:12px;color:#ccc;font-weight:500;text-transform:uppercase;letter-spacing:.3px}.frame-rate-select{width:100%;padding:10px 12px;background-color:#333;color:#fff;border:1px solid #444;border-radius:6px;cursor:pointer;font-size:13px;outline:none;transition:all .2s ease}.frame-rate-select:hover{background-color:#3a3a3a;border-color:#4a90e2}.frame-rate-select:focus{border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e233}.frame-rate-select option{background-color:#333;color:#fff;padding:10px}.bitrate-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bitrate-button{padding:10px;background:#333;color:#fff;border:2px solid #444;border-radius:6px;cursor:pointer;transition:all .2s ease;font-size:10px;text-align:center;min-height:50px;display:flex;flex-direction:column;justify-content:center;align-items:center}.bitrate-button:hover{background-color:#3a3a3a;border-color:#4a90e2;transform:translateY(-1px)}.bitrate-button.active{background-color:#4a90e2;border-color:#4a90e2;color:#fff;font-weight:700}.generator-config-section{background:#ffffff05;display:flex;flex-direction:column;flex:0 0 auto}#generator-tabs{flex:1;display:flex;flex-direction:column;min-height:200px}.generator-controls-row{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.generator-select,.language-select{padding:12px 16px;font-size:14px;border-radius:8px;border:1px solid #444;background:#333;color:#fff;cursor:pointer;transition:all .3s ease;outline:none}.generator-select:hover,.language-select:hover{background:#3a3a3a;border-color:#4a90e2}.generator-select:focus,.language-select:focus{border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e233}.generator-select:disabled,.language-select:disabled{opacity:.6;cursor:not-allowed}.generator-select option,.language-select option{background:#333;color:#fff;padding:12px}.generator-info{padding:12px;background:#4a90e21a;border-radius:6px;border-left:3px solid #4a90e2}.generator-description{color:#ffffffe6;font-size:13px;line-height:1.4;margin:0}.assets-management-section,.audio-management-section{background:transparent;flex:1;display:flex;flex-direction:column}.asset-list{position:relative}.drop-zone{background:linear-gradient(135deg,#4a90e214,#3498db0d);border:3px dashed rgba(74,144,226,.4);border-radius:12px;padding:32px 24px;text-align:center;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);margin-bottom:20px;min-height:140px;display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;overflow:hidden}.drop-zone:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(74,144,226,.03) 8px,rgba(74,144,226,.03) 16px);opacity:0;transition:opacity .3s ease;pointer-events:none}.drop-zone:hover{border-color:#4a90e2b3;background:linear-gradient(135deg,#4a90e21f,#3498db14);transform:translateY(-2px);box-shadow:0 8px 25px #4a90e226}.drop-zone:hover:before{opacity:1}.drop-zone.dragging{border-color:#2ecc71cc;background:linear-gradient(135deg,#2ecc7126,#27ae601a);transform:scale(1.02);box-shadow:0 0 0 4px #2ecc7133,0 12px 30px #2ecc7140,inset 0 1px #ffffff1a;border-style:solid}.drop-zone.dragging:before{background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(46,204,113,.05) 8px,rgba(46,204,113,.05) 16px);opacity:1}.drop-zone.disabled{opacity:.4;cursor:not-allowed;background:#ffffff05;border-color:#ffffff1a}.drop-zone-content{color:#fff;position:relative;z-index:1}.drop-zone-icon{font-size:48px;margin-bottom:16px;opacity:.8;transition:all .3s ease;background:linear-gradient(135deg,#4a90e2,#357abd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 4px rgba(74,144,226,.3))}.drop-zone:hover .drop-zone-icon{transform:scale(1.1);opacity:1}.drop-zone.dragging .drop-zone-icon{transform:scale(1.2) rotate(5deg);background:linear-gradient(135deg,#2ecc71,#27ae60);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 4px rgba(46,204,113,.4))}.drop-zone-text{font-size:16px;margin-bottom:8px;line-height:1.4;font-weight:500}.drop-zone-text strong{font-weight:700;color:#4a90e2}.drop-zone.dragging .drop-zone-text strong{color:#2ecc71}.drop-zone-hint{font-size:13px;color:#ffffffb3;line-height:1.4;font-style:italic}.drop-zone-formats{margin-top:12px;padding:8px 16px;background:#4a90e21a;border-radius:20px;border:1px solid rgba(74,144,226,.2);display:inline-block}.drop-zone-formats-text{font-size:11px;color:#fffc;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.audio-queue-section{flex:1;display:flex;flex-direction:column}.file-count{color:#fff9;font-size:12px}.audio-file-list{overflow-y:visible;height:auto;min-height:0}.audio-file-item{display:flex;align-items:flex-start;padding:12px;margin-bottom:8px;background:#ffffff0d;border-radius:8px;border-left:3px solid transparent;transition:all .2s ease}.audio-file-item:hover{background:#ffffff14}.audio-file-item.status-pending{border-left-color:#f39c12}.audio-file-item.status-processing{border-left-color:#4a90e2}.audio-file-item.status-completed{border-left-color:#2ecc71}.audio-file-item.status-error{border-left-color:#e74c3c}.audio-file-item.type-video{border-left-color:#9b59b6}.audio-file-item.type-image{border-left-color:#f39c12}.audio-file-item.type-audio{border-left-color:#3498db}.file-icon{font-size:18px;margin-right:12px;margin-top:2px;opacity:.8}.file-info{flex:1;min-width:0;margin-right:8px}.file-name{color:#fff;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}.file-metadata{display:flex;gap:8px;margin-bottom:4px}.file-size,.file-time{color:#fff9;font-size:11px}.progress-bar{width:100%;height:3px;background:#ffffff1a;border-radius:2px;overflow:hidden;margin-top:4px}.progress-fill{height:100%;background:#4a90e2;transition:width .3s ease;border-radius:2px}.error-message{color:#e74c3c;font-size:11px;margin-top:4px;line-height:1.3}.file-status{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.status-text{font-size:10px;padding:4px 8px;border-radius:4px;font-weight:500;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}.audio-file-item.status-pending .status-text{background:#f39c1233;color:#f39c12}.audio-file-item.status-processing .status-text{background:#4a90e233;color:#4a90e2}.audio-file-item.status-completed .status-text{background:#2ecc7133;color:#2ecc71}.audio-file-item.status-error .status-text{background:#e74c3c33;color:#e74c3c}.empty-state{text-align:center;padding:40px 20px;color:#fff9}.empty-state p{margin:0 0 8px;font-size:14px}.empty-state small{font-size:12px;opacity:.7}.playback-controls{margin-top:8px;padding:12px;background:#0000004d;border:1px solid rgba(255,255,255,.1);border-radius:6px}.playback-buttons{display:flex;align-items:center;gap:12px;margin-bottom:8px}.play-pause-btn{background:linear-gradient(135deg,#4a90e2,#357abd);border:none;color:#fff;padding:8px 16px;min-width:70px;height:32px;border-radius:6px;cursor:pointer;font-size:11px;font-weight:600;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.play-pause-btn:hover{background:linear-gradient(135deg,#357abd,#4a90e2);transform:scale(1.05)}.play-pause-btn:active{transform:scale(.95)}.playback-time{color:#fffc;font-size:11px;font-family:Courier New,monospace;flex-shrink:0;white-space:nowrap;margin-left:auto}.seek-bar-container{flex:1;margin:0 12px}.seek-bar{width:100%;height:4px;background:#fff3;border-radius:2px;outline:none;appearance:none;cursor:pointer}.seek-bar::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:#4a90e2;border-radius:50%;cursor:pointer;transition:all .2s ease}.seek-bar::-webkit-slider-thumb:hover{transform:scale(1.2)}.seek-bar::-moz-range-thumb{width:12px;height:12px;background:#4a90e2;border-radius:50%;cursor:pointer;border:none}.layer-assets-list{position:relative}.asset-row{display:flex;align-items:flex-start;padding:12px;margin-bottom:8px;border-radius:12px;transition:all .2s ease;position:relative}.asset-row:hover{border-color:#ffffff4d}.asset-row.selected{background-color:#4a90e226;border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e266}.asset-row.selected:hover{border-color:#4a90e2;background-color:#4a90e233}.asset-thumbnail{width:60px;height:60px;background:#ffffff1a;border-radius:8px;margin-right:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden}.asset-thumbnail img{width:100%;height:100%;object-fit:cover;border-radius:8px}.asset-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}.asset-name{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}.asset-metadata{display:flex;gap:6px;align-items:center}.asset-type-label{background:#ffffff1a;color:#fffc;padding:2px 6px;border-radius:4px;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.asset-actions{display:flex;gap:6px;margin-top:2px}.asset-status-line{display:flex;align-items:center;margin-top:2px;min-height:24px}.asset-progress-label{background:#ffffff1a;color:#fffc;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.asset-action-btn{background:#ffffff1a;border:none;color:#ffffffe6;width:24px;height:24px;min-width:24px;padding:0;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.asset-action-btn:hover{background:#fff3;transform:translateY(-1px)}.asset-action-btn:active{transform:translateY(0)}.add-to-canvas-btn{background:#64c8ff33;border:1px solid rgba(100,200,255,.3)}.add-to-canvas-btn:hover{background:#64c8ff4d;border-color:#64c8ff80}.asset-tag-button{padding:4px 8px;width:auto;min-width:auto;font-size:11px;border:1px solid rgba(255,255,255,.2);background:#ffffff1a;margin-right:4px}.asset-tag-button:hover{background:#ffffff26;border-color:#ffffff4d}.asset-tag-button .tag-icon{font-family:monospace;font-weight:700;color:#ffffffb3;margin-right:2px;font-size:10px}.asset-dropdown-menu{position:fixed;background:#2a2a2a;border:1px solid #444;border-radius:6px;padding:4px 0;min-width:160px;z-index:10000;box-shadow:0 4px 12px #0000004d}.asset-dropdown-item{padding:8px 12px;cursor:pointer;color:#ffffffe6;font-size:13px;display:flex;align-items:center;transition:background .15s ease}.asset-dropdown-item:hover{background:#ffffff1a}.asset-dropdown-item.destructive{color:#ff6b6b}.asset-dropdown-item.destructive:hover{background:#ff6b6b26}.asset-dropdown-separator{height:1px;background:#444;margin:4px 0}.asset-more-btn{opacity:.7}.asset-more-btn:hover{opacity:1}.metadata-item{display:inline-flex;align-items:center;font-size:11px;color:#fffc;background:#ffffff1a;padding:2px 6px;border-radius:3px;border:1px solid rgba(255,255,255,.15);line-height:1}.thumbnail-action-btn{position:absolute;top:4px;right:4px;width:20px;height:20px;background:#000000b3;border:1px solid rgba(255,255,255,.3);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;cursor:pointer;transition:all .2s ease;opacity:0}.asset-thumbnail:hover .thumbnail-action-btn,.asset-icon:hover .thumbnail-action-btn{opacity:1}.thumbnail-action-btn:hover{background:#000000e6;border-color:#ffffff80;transform:scale(1.1)}.asset-remove-btn{background:#e74c3ccc;border:none;color:#fff;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;transition:all .2s ease;opacity:0}.asset-row:hover .asset-remove-btn{opacity:1}.asset-remove-btn:hover{background:#e74c3c;transform:scale(1.1)}.asset-thumbnail.loading{background:#4a90e233;animation:pulse 1.5s infinite}.status-pending{opacity:.7}.status-processing .asset-thumbnail,.status-processing .asset-icon{border-color:#f39c1280}.status-error{border-color:#e74c3c4d}.asset-progress{display:flex;align-items:center;gap:6px;margin-top:2px}.progress-bar{flex:1;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:#4a90e2;border-radius:2px;transition:width .3s ease}.progress-text{font-size:10px;color:#ffffffb3;min-width:30px;text-align:right}.asset-error{font-size:12px;color:#e74c3c;margin-top:8px;padding:6px 10px;background:#e74c3c1a;border:1px solid rgba(231,76,60,.3);border-radius:6px;line-height:1.4}.thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff9;font-size:20px}.thumbnail-play-overlay{position:absolute;bottom:2px;right:2px;width:14px;height:14px;background:#000c;color:#fff;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:8px}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.asset-preview-btn{background:linear-gradient(135deg,#4a90e2,#357abd);border:none;color:#fff;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:11px;font-weight:500;transition:all .2s ease;margin-right:8px}.asset-preview-btn:hover{background:linear-gradient(135deg,#357abd,#4a90e2);transform:scale(1.05)}.asset-preview-btn.video{background:linear-gradient(135deg,#9b59b6,#8e44ad)}.asset-preview-btn.video:hover{background:linear-gradient(135deg,#8e44ad,#9b59b6)}.asset-preview-btn.image{background:linear-gradient(135deg,#f39c12,#e67e22)}.asset-preview-btn.image:hover{background:linear-gradient(135deg,#e67e22,#f39c12)}.audio-controls{display:flex;gap:6px;align-items:center}.asset-play-btn,.asset-stop-btn{background:linear-gradient(135deg,#4a90e2,#357abd);border:none;color:#fff;padding:6px 10px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s ease;min-width:32px;display:flex;align-items:center;justify-content:center}.asset-play-btn:hover,.asset-stop-btn:hover{background:linear-gradient(135deg,#357abd,#4a90e2);transform:scale(1.05)}.asset-stop-btn{background:linear-gradient(135deg,#e74c3c,#c0392b)}.asset-stop-btn:hover{background:linear-gradient(135deg,#c0392b,#e74c3c);transform:scale(1.05)}.asset-play-btn:active,.asset-stop-btn:active{transform:scale(.95)}button{padding:12px 16px;font-size:14px;font-weight:500;border-radius:8px;border:none;cursor:pointer;transition:all .2s ease;outline:none;min-width:40px}button:hover{transform:translateY(-1px)}button:active{transform:translateY(0)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}.viseme-buttons-group{display:flex;gap:8px;flex-wrap:nowrap;justify-content:center;align-items:center;flex-direction:row}#viseme-buttons button,.viseme-button{padding:6px 10px;font-size:11px;color:#fff;border-radius:6px;min-width:45px;cursor:pointer;flex-shrink:0}#viseme-buttons button:hover,.viseme-button:hover{border-color:#ffffff4d}#viseme-buttons button.active,.viseme-button.active{border-color:#fff6}.trigger-category-section{text-align:left}.trigger-category-header{font-size:12px;font-weight:600;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px;opacity:.9;display:flex;align-items:center;gap:6px}.category-color-badge{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}.trigger-buttons-group{display:flex!important;flex-wrap:wrap;gap:6px;align-items:center}.trigger-button{padding:6px 10px;font-size:11px;color:#fff;border-radius:6px;cursor:pointer;flex-shrink:0;outline:none;white-space:nowrap;position:relative}.trigger-plus-indicator{position:absolute;left:3px;top:50%;transform:translateY(-50%);font-size:11px;color:#ffffff80;pointer-events:none;z-index:1;opacity:0;transition:opacity .15s ease}.trigger-plus-indicator.visible{opacity:1}.trigger-button:hover{border-color:#ffffff4d}.trigger-button.active{border-color:#fff6;animation:triggerPulse .3s ease}.trigger-button.idle-button:hover,.trigger-button.body-idle-button:hover{border-color:#ffffff4d}.trigger-button.idle-button.active,.trigger-button.body-idle-button.active{background:#fff6;border-color:#ffffffb3}@keyframes triggerPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.character-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s ease}.character-modal.visible{opacity:1;visibility:visible}.character-modal-content{background:linear-gradient(135deg,#2a2a2a,#1f1f1f);border-radius:12px;padding:24px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #00000080;border:1px solid #333;transform:scale(.9) translateY(20px);transition:all .3s ease}.character-modal.visible .character-modal-content{transform:scale(1) translateY(0)}.character-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;border-bottom:1px solid #333;padding-bottom:16px}.character-modal-title{font-size:20px;font-weight:600;color:#fff;margin:0}.character-modal-close{background:none;border:none;font-size:24px;color:#fff9;cursor:pointer;padding:8px;border-radius:50%;transition:all .2s ease;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.character-modal-close:hover{background:#ffffff1a;color:#fff}.character-modal-section{margin-bottom:24px}.character-modal-section h4{font-size:16px;font-weight:600;color:#4a90e2;margin:0 0 12px;text-transform:uppercase;letter-spacing:.5px}.character-modal-section p{color:#fffc;line-height:1.6;margin:0 0 8px}.character-modal-section .value{color:#fff;font-family:monospace;background:#ffffff0d;padding:4px 8px;border-radius:4px;font-size:13px}.character-modal-tabs{display:flex;border-bottom:1px solid #333;margin-bottom:24px;gap:2px}.tab-button{background:none;border:none;padding:12px 24px;color:#fff9;cursor:pointer;border-radius:8px 8px 0 0;transition:all .3s ease;font-size:14px;font-weight:500;flex:1}.tab-button:hover{background:#ffffff0d;color:#fffc}.tab-button.active{background:#4a90e233;color:#4a90e2;border-bottom:2px solid #4a90e2}.tab-content{display:none}.tab-content.active{display:block}.viseme-mapping-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:8px;margin-top:12px}.viseme-mapping-item{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:8px;text-align:center;transition:all .2s ease}.viseme-mapping-item:hover{background:#ffffff14;border-color:#4a90e280}.viseme-mapping-item .viseme-key{font-weight:600;color:#4a90e2;font-size:12px;margin-bottom:4px}.viseme-mapping-item .viseme-value{font-family:monospace;color:#fffc;font-size:11px}.timeline-editor-container{width:100%;margin-top:10px;background:#1a1a1a;border-radius:4px;overflow:hidden;box-shadow:0 2px 4px #0000004d}.timeline-editor-canvas{width:100%;display:block;cursor:default;-webkit-user-select:none;user-select:none}.timeline-editor-canvas:focus{outline:1px solid rgba(59,130,246,.5);outline-offset:-1px}.asset-timeline-btn{background:#3b82f61a;color:#3b82f6;border:1px solid rgba(59,130,246,.3)}.asset-timeline-btn:hover{background:#3b82f633;border-color:#3b82f680}.timeline-context-menu{border-radius:4px;padding:4px 0;box-shadow:0 2px 8px #0000004d;min-width:120px}.timeline-context-menu-option{padding:8px 16px;cursor:pointer;color:#fff;font-size:12px;transition:background .2s ease}.timeline-context-menu-option:hover{background:#ffffff1a}.timeline-context-menu-option[disabled]{opacity:.5;cursor:default}.video-preview-modal,.image-preview-modal,.timeline-preview-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s ease}.video-preview-modal.visible,.image-preview-modal.visible,.timeline-preview-modal.visible{opacity:1;visibility:visible}.modal-content{background:linear-gradient(135deg,#2a2a2a,#1f1f1f);border-radius:12px;padding:24px;max-width:90vw;max-height:90vh;overflow:auto;box-shadow:0 20px 60px #00000080;border:1px solid #333;position:relative}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:1px solid #333;padding-bottom:16px}.modal-title{font-size:18px;font-weight:600;color:#fff;margin:0}.modal-close{background:none;border:none;font-size:24px;color:#fff9;cursor:pointer;padding:8px;border-radius:50%;transition:all .2s ease;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.modal-close:hover{background:#ffffff1a;color:#fff}.modal-controls{display:flex;gap:12px;align-items:center}.video-container,.image-container{text-align:center;margin-bottom:20px}.preview-video,.preview-image{max-width:100%;max-height:70vh;border-radius:8px;box-shadow:0 4px 20px #0000004d}.preview-image{cursor:pointer;transition:transform .3s ease}.preview-image.zoomed{transform:scale(1.5);cursor:grab}.preview-image.zoomed:active{cursor:grabbing}.zoom-btn{background:none;border:1px solid rgba(255,255,255,.3);color:#fffc;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s ease}.zoom-btn:hover{background:#ffffff1a;border-color:#ffffff80;color:#fff}.info-row{display:flex;justify-content:space-between;margin-bottom:8px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.1)}.info-label{color:#ffffffb3;font-size:13px}.info-value{color:#fff;font-size:13px;font-weight:500}.modal-open{overflow:hidden}.session-selector-modal{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000;opacity:0;visibility:hidden;transition:all .3s ease}.session-selector-modal.visible{opacity:1;visibility:visible}.session-selector-modal .modal-content{width:800px;max-width:90vw;max-height:600px;display:flex;flex-direction:column}.sessions-table-container{flex:1;overflow-y:auto;margin-bottom:0}.sessions-table{width:100%;border-collapse:collapse;font-size:14px}.sessions-table thead{position:sticky;top:0;background:#2a2a2a;z-index:1}.sessions-table th{text-align:left;padding:12px 16px;color:#ffffffb3;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #333}.sessions-table th.id-column{width:100px}.sessions-table th.name-column{width:auto}.sessions-table th.modified-column{width:180px}.sessions-table th.actions-column{width:60px;text-align:center}.sessions-table tbody tr{border-bottom:1px solid rgba(255,255,255,.1);transition:background-color .2s ease;cursor:pointer}.sessions-table tbody tr:hover{background:#ffffff0d}.sessions-table td{padding:14px 16px;color:#ffffffe6}.session-id-cell{font-family:Courier New,monospace;color:#fff9;font-size:13px}.session-name-cell{font-weight:500;color:#fff}.session-modified-cell{color:#ffffffb3;font-size:13px}.session-actions-cell{text-align:center}.session-delete-btn{background:none;border:none;cursor:pointer;padding:6px 10px;border-radius:4px;transition:all .2s ease;opacity:.7;display:flex;align-items:center;justify-content:center}.session-delete-btn .delete-icon{width:16px;height:16px;filter:brightness(.7) sepia(1) saturate(5) hue-rotate(330deg);transition:filter .2s ease}.session-delete-btn:hover{background:#e74c3c33;opacity:1}.session-delete-btn:hover .delete-icon{filter:brightness(1) sepia(1) saturate(5) hue-rotate(330deg)}.sessions-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.sessions-empty-state .empty-icon{font-size:48px;margin-bottom:16px;opacity:.5}.sessions-empty-state .empty-message{font-size:18px;font-weight:600;color:#ffffffe6;margin-bottom:8px}.sessions-empty-state .empty-hint{font-size:14px;color:#ffffff80}.sessions-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.sessions-loading-state .loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#fff9;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:16px}.sessions-loading-state .loading-message{font-size:14px;color:#ffffffb3}.sessions-error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.sessions-error-state .error-icon{font-size:48px;margin-bottom:16px;opacity:.7}.sessions-error-state .error-message{font-size:16px;color:#e74c3ce6;margin-bottom:16px}.sessions-error-state .retry-btn{padding:8px 24px;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:6px;color:#fffc;cursor:pointer;font-size:14px;transition:all .2s ease}.sessions-error-state .retry-btn:hover{background:#ffffff26;border-color:#ffffff80;color:#fff}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.timeline-modal-content{width:90%;max-width:1200px;height:auto;max-height:90vh;display:flex;flex-direction:column}.timeline-editor-modal-container{flex:1;min-height:500px;max-height:600px;overflow:auto}.modal-header-buttons{display:flex;gap:10px;align-items:center}.modal-action-btn{background:#3b82f633;color:#3b82f6;border:1px solid rgba(59,130,246,.3);padding:6px 12px;border-radius:6px;font-size:13px;cursor:pointer;transition:all .2s ease}.modal-action-btn:hover{background:#3b82f64d;border-color:#3b82f680}.timeline-playback-controls{display:flex;align-items:center;gap:15px;padding:15px 0;border-top:1px solid rgba(255,255,255,.1)}.playback-btn{width:40px;height:40px;border-radius:50%;background:#3b82f633;border:1px solid rgba(59,130,246,.3);color:#3b82f6;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.playback-btn:hover{background:#3b82f64d;transform:scale(1.05)}.playback-time-display{color:#fffc;font-size:13px;font-family:monospace;min-width:80px}.playback-seek-bar{flex:1;height:6px;-webkit-appearance:none;appearance:none;background:#ffffff1a;border-radius:3px;outline:none;cursor:pointer}.playback-seek-bar::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#3b82f6;border-radius:50%;cursor:pointer;transition:transform .2s ease}.playback-seek-bar::-webkit-slider-thumb:hover{transform:scale(1.2)}.playback-seek-bar::-moz-range-thumb{width:16px;height:16px;background:#3b82f6;border-radius:50%;cursor:pointer;border:none}.modal-footer{padding-top:15px;border-top:1px solid rgba(255,255,255,.1)}.timeline-help{text-align:center;color:#ffffff80;font-size:12px}@media(max-width:1024px){.left-pane,.right-pane{width:280px}}@media(max-width:768px){.app-container{flex-direction:column}.left-pane{width:100%;height:auto;max-height:40vh}.right-pane{position:relative;width:100%;height:auto;max-height:40vh;top:auto;right:auto}.center-area{flex:1;min-height:60vh}.pane-section{padding:16px}#viseme-buttons{bottom:10px;padding:8px}#viseme-buttons button{padding:6px 10px;font-size:11px;min-width:50px}.character-modal-content{width:95%;padding:20px;max-height:90vh}.character-modal-title{font-size:18px}.viseme-mapping-grid{grid-template-columns:repeat(auto-fit,minmax(60px,1fr))}}.asset-row[draggable=true]{cursor:grab}.asset-row[draggable=true]:active{cursor:grabbing}.asset-row.dragging{opacity:.9!important}.asset-row.processing{opacity:.7;cursor:wait}.asset-row.processing:hover{background:linear-gradient(135deg,#ffffff14,#ffffff05)}.asset-row.error{border-color:#e74c3c80}.asset-row.error:hover{background:linear-gradient(135deg,#e74c3c26,#e74c3c0d);border-color:#e74c3cb3}.asset-row.draggable[draggable=true]{cursor:grab}.asset-row.draggable[draggable=true]:hover{border-color:#63b3ed80}.asset-row[draggable=true] .asset-thumbnail,.asset-row[draggable=true] .asset-thumbnail *,.asset-row[draggable=true] .asset-info,.asset-row[draggable=true] .asset-info *{pointer-events:none}.asset-row:not(.dragging) .asset-actions,.asset-row:not(.dragging) .asset-actions *{pointer-events:auto}.drop-placeholder{position:absolute;left:0;right:0;height:4px;z-index:1000;pointer-events:none}.placeholder-line{height:100%;background:#63b3ed;border-radius:2px}.generator-config-container{margin-top:16px}.generator-config-options{display:flex;flex-direction:column;gap:12px}.config-option{display:flex;align-items:center;gap:8px}.config-option label{font-size:13px;color:#ccc;min-width:120px}.config-checkbox{display:flex;align-items:center}.config-checkbox .checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer}.config-checkbox input[type=checkbox]{width:16px;height:16px;cursor:pointer}.config-select{flex-direction:column;align-items:flex-start}.config-select label{margin-bottom:4px;min-width:unset}.config-select-input{width:100%;padding:8px 12px;font-size:13px;border-radius:6px;border:1px solid #444;background:#333;color:#fff;cursor:pointer;transition:all .3s ease}.config-select-input:hover{background:#3a3a3a;border-color:#4a90e2}.config-select-input:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e233}.config-number,.config-text{flex-direction:column;align-items:flex-start}.config-number label,.config-text label{margin-bottom:4px;min-width:unset}.config-number-input,.config-text-input{width:100%;padding:8px 12px;font-size:13px;border-radius:6px;border:1px solid #444;background:#333;color:#fff;transition:all .3s ease}.config-number-input:hover,.config-text-input:hover{background:#3a3a3a;border-color:#4a90e2}.config-number-input:focus,.config-text-input:focus{outline:none;border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e233}.top-bar{position:fixed;top:0;left:0;right:0;height:40px;background:#2a2a2a;border-bottom:1px solid #444;z-index:1000;display:flex;align-items:center;padding:0 16px}.top-bar-content{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}.top-bar-left,.top-bar-center,.top-bar-right{display:flex;align-items:center;gap:12px}.top-bar-center{flex:1;justify-content:center}.session-name-editor{display:flex;align-items:center;gap:0px;border-radius:4px;transition:background .2s}.session-name-editor:hover{background:#ffffff1a}.session-name-display{font-size:16px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;padding-left:4px;transition:text-decoration .2s}.session-name-display:hover{text-decoration:underline}.session-name-input{font-size:16px;font-weight:600;color:#fff;background:#ffffff1a;border:1px solid #555;border-radius:4px;outline:none}.session-name-input:focus{border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e233}.session-name-edit-btn{background:transparent;border:none;cursor:pointer;padding:0!important;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease}.session-name-edit-icon{width:20px;height:20px;display:block}.session-name-editor:hover .session-name-edit-btn,.session-name-edit-btn:focus-visible{opacity:1;pointer-events:auto}.session-name-edit-btn:focus-visible{outline:2px solid #4a90e2;outline-offset:2px}.session-menu{position:relative}.session-text-button{background:transparent;border:none;color:#ffffffb3;font-size:14px;font-weight:400;padding:6px 10px;cursor:pointer;transition:color .15s ease;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:inline-flex;align-items:center;gap:4px;letter-spacing:.01em}.session-text-button svg{transition:opacity .15s ease}.session-text-button:hover{color:#fffffff2}.session-text-button:hover svg{opacity:.9!important}.session-text-button:focus{outline:none}.session-text-button:active{color:#fff}.session-text-button:active svg{opacity:1!important}.session-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:160px;background:#2a2a2a;border:1px solid #444;border-radius:6px;padding:4px 0;box-shadow:0 4px 12px #0006;z-index:1001;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px}.session-dropdown-item{width:100%;background:transparent;border:none;color:#fff;padding:8px 16px;text-align:left;cursor:pointer;font-size:13px;transition:background-color .2s;-webkit-user-select:none;user-select:none;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.session-dropdown-item:hover{background:#3a3a3a}.session-dropdown-item[data-action=delete]:hover{color:#ff6b6b}.session-dropdown-separator{height:1px;background:#444;margin:4px 0}.app-container{margin-top:40px}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.app-loading-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#1a1a1a;display:flex;align-items:center;justify-content:center;z-index:10000}.loading-content{text-align:center}.loading-spinner{width:50px;height:50px;border:4px solid #333;border-top-color:#4caf50;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{to{transform:rotate(360deg)}}.loading-title{color:#fff;font-size:24px;margin:0 0 10px;font-weight:500}.loading-message{color:#888;font-size:14px;margin:0;font-family:Monaco,Consolas,monospace}