.project-info-panel{display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--bg-secondary, #f8f9fa);border-radius:8px;max-height:600px;overflow-y:auto}.project-info-panel::-webkit-scrollbar{width:6px}.project-info-panel::-webkit-scrollbar-track{background:transparent}.project-info-panel::-webkit-scrollbar-thumb{background:var(--border-color, #dee2e6);border-radius:3px}.project-info-panel::-webkit-scrollbar-thumb:hover{background:var(--text-muted, #6c757d)}.info-section{background:var(--bg-primary, #ffffff);border:1px solid var(--border-color, #dee2e6);border-radius:6px;padding:8px 10px}.section-title{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:11px;font-weight:700;color:#1a1a1a;text-transform:uppercase;letter-spacing:.5px}.section-title svg{opacity:.85;flex-shrink:0;color:#333}.info-content{font-size:12px;color:#333}.project-name-input{width:100%;padding:6px 10px;font-size:13px;font-weight:600;border:1px solid var(--border-color, #dee2e6);border-radius:4px;background:var(--bg-primary, #ffffff);color:#1a1a1a;transition:border-color .2s,box-shadow .2s}.project-name-input:focus{outline:none;border-color:var(--primary-color, #007bff);box-shadow:0 0 0 2px #007bff26}.project-name-input::placeholder{color:#888}.project-name{font-weight:600;color:#1a1a1a}.prompt-text{margin:0;padding:6px 10px;background:var(--bg-secondary, #f8f9fa);border-radius:4px;font-size:12px;line-height:1.4;color:#333;max-height:80px;overflow-y:auto;white-space:pre-wrap;word-break:break-word}.empty-state{color:#777;font-style:italic;font-size:11px}.stats-grid{display:flex;flex-wrap:wrap;gap:6px 12px;padding:4px 0}.stat-item{display:flex;flex-direction:row;align-items:center;gap:4px;padding:0;background:transparent}.stat-value{font-size:13px;font-weight:800;color:#111;line-height:1}.stat-label{font-size:10px;color:#555;text-transform:none;letter-spacing:0;font-weight:500}.settings-list{display:flex;flex-direction:column;gap:3px}.setting-row{display:flex;justify-content:space-between;align-items:center;padding:3px 6px;background:var(--bg-secondary, #f8f9fa);border-radius:3px}.setting-label{font-size:11px;color:#444;font-weight:500}.setting-value{font-size:11px;font-weight:600;color:#1a1a1a}.setting-value.enabled{color:#16a34a}.setting-value.disabled{color:#888}@media (max-width: 400px){.stats-grid{gap:4px 8px}}@media (prefers-color-scheme: dark){.project-info-panel{background:#1a1a1a}.info-section{background:#252525;border-color:#3a3a3a}.section-title{color:#f0f0f0}.section-title svg{color:#ccc}.info-content{color:#ddd}.project-name-input{background:#2a2a2a;border-color:#3a3a3a;color:#f0f0f0}.project-name-input::placeholder{color:#888}.project-name{color:#f0f0f0}.prompt-text,.setting-row{background:#1e1e1e}.stat-item{background:transparent}.prompt-text{color:#ddd}.stat-value{color:#fff}.stat-label{color:#aaa}.setting-label{color:#bbb}.setting-value{color:#f0f0f0}.setting-value.enabled{color:#4ade80}.setting-value.disabled,.empty-state{color:#888}}.avatar-panel{display:flex;flex-direction:column;height:100%;background:var(--surface, #ffffff);overflow:hidden;font-family:Inter,sans-serif;max-width:100%}.avatar-tabs{display:flex;background:#f8fafc;border-bottom:1px solid #e2e8f0;flex-shrink:0}.avatar-tab-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 4px;border:none;background:transparent;color:#64748b;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:all .2s;position:relative}.avatar-tab-btn:hover{background:#f1f5f9;color:#475569}.avatar-tab-btn.active{background:#fff;color:#4f46e5;box-shadow:inset 0 -2px #4f46e5}.avatar-tab-status{position:absolute;top:8px;right:8px;width:5px;height:5px;border-radius:50%}.avatar-tab-status.online{background-color:#10b981}.avatar-tab-status.offline{background-color:#ef4444}.avatar-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 12px 60px;display:flex;flex-direction:column}.avatar-content::-webkit-scrollbar{width:5px}.avatar-content::-webkit-scrollbar-track{background:transparent}.avatar-content::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.enable-section-compact{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;margin-bottom:8px;border-bottom:1px solid #f1f5f9;flex-shrink:0;width:100%}.enable-checkbox-wrapper{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.enable-checkbox{width:16px;height:16px;border:1px solid #cbd5e1;border-radius:3px;color:#4f46e5;cursor:pointer;accent-color:#4f46e5}.enable-label-text{font-size:11px;font-weight:600;color:#334155;text-transform:uppercase;letter-spacing:.5px}.status-btn-flat{font-size:11px;padding:4px 8px;border:1px solid #e2e8f0;background:#fff;color:#64748b;border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:5px}.status-btn-flat:hover{border-color:#cbd5e1;color:#334155}.sub-tabs{display:flex;margin-bottom:12px;border-bottom:1px solid #e2e8f0;width:100%}.sub-tab-btn{flex:1;text-align:center;padding:8px 4px;font-size:11px;font-weight:600;color:#64748b;background:transparent;border:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}.sub-tab-btn:hover{color:#334155;background:#f8fafc}.sub-tab-btn.active{color:#4f46e5;border-bottom-color:#4f46e5}.avatar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.rive-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:12px}.rive-grid-col-2{grid-column:span 2}.avatar-card{aspect-ratio:1;border:1px solid #e2e8f0;border-radius:6px;overflow:hidden;position:relative;cursor:pointer}.avatar-card:hover{border-color:#818cf8}.avatar-card.selected{border-color:#4f46e5;box-shadow:inset 0 0 0 2px #4f46e5}.avatar-card-image{width:100%;height:100%;object-fit:cover}.avatar-card-name{position:absolute;bottom:0;left:0;right:0;background:#000000b3;color:#fff;font-size:10px;padding:3px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{display:block;font-size:11px;font-weight:600;color:#64748b;margin-bottom:4px}input[type=text],input[type=number],select,textarea{width:100%;font-size:12px;padding:6px 8px;border:1px solid #cbd5e1;background:#fff;color:#1e293b;border-radius:4px;outline:none;box-sizing:border-box}input:focus,select:focus,textarea:focus{border-color:#6366f1;box-shadow:0 0 0 1px #6366f133}.helper-text{font-size:10px;color:#94a3b8;margin-top:4px;line-height:1.4}.hint-text{font-size:10px;color:#94a3b8;font-style:italic;margin-top:8px;line-height:1.4}.avatar-btn-primary{width:100%;padding:8px;background:#4f46e5;color:#fff;border:none;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s}.avatar-btn-primary:hover{background:#4338ca}.avatar-btn-primary:disabled{background:#94a3b8;cursor:not-allowed}.upload-area{border:1px dashed #cbd5e1;background:#f8fafc;padding:16px;text-align:center;cursor:pointer;border-radius:6px;transition:all .2s}.upload-area:hover{border-color:#6366f1;background:#f1f5f9}.upload-icon{color:#64748b;margin-bottom:8px}.upload-area:hover .upload-icon{color:#4f46e5}.upload-text-primary{font-size:12px;font-weight:600;color:#334155;margin:0 0 4px}.upload-text-secondary{font-size:10px;color:#94a3b8;margin:0}.ai-info-box{background:#eff6ff;border:1px solid #dbeafe;border-radius:6px;padding:12px;margin-bottom:16px}.ai-info-title{font-size:12px;font-weight:700;color:#1e40af;margin:0 0 6px;display:block}.ai-info-text{font-size:11px;color:#1e3a8a;margin:0;line-height:1.5}.avatar-transform-controls{margin-top:16px;padding:14px 12px;border:1px solid #e2e8f0;border-radius:8px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);box-shadow:0 1px 3px #0000000d}.transform-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #e2e8f0}.transform-header svg{color:#6366f1;flex-shrink:0}.transform-header h4{font-size:12px;text-transform:uppercase;color:#334155;font-weight:700;margin:0;letter-spacing:.5px;flex:1}.transform-header .mode-badge{font-size:9px;font-weight:700;color:#fff;background:#6366f1;padding:2px 6px;border-radius:4px;letter-spacing:.3px}.avatar-section-header{font-size:11px;text-transform:uppercase;color:#94a3b8;font-weight:700;margin:0 0 8px;letter-spacing:.5px}.avatar-transform-controls>h4{font-size:11px;text-transform:uppercase;color:#94a3b8;font-weight:700;margin:0 0 10px;letter-spacing:.5px}.control-grid-compact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.control-row{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0}.control-row label{margin-bottom:0;flex-shrink:0;width:42px;font-size:11px;color:#64748b}.value-input{flex:1;padding:4px 6px!important;text-align:right;background:#f8fafc!important;height:28px!important;font-size:12px!important;font-weight:500;min-width:0;border:1px solid #cbd5e1;border-radius:4px}.reset-transform-btn{width:100%;margin-top:10px;padding:6px;background:#fff;border:1px solid #e2e8f0;color:#64748b;font-size:11px;border-radius:4px;cursor:pointer}.reset-transform-btn:hover{background:#f8fafc;color:#334155;border-color:#cbd5e1}.prerender-progress-compact{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#f8fafc;border-top:1px solid #e2e8f0;margin-top:auto}.progress-label-inline{font-size:10px;color:#64748b;white-space:nowrap;flex-shrink:0}.progress-bar-compact{flex:1;height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden}.progress-fill-compact{height:100%;background:#4f46e5;border-radius:2px;transition:width .3s ease}.progress-percent{font-size:10px;color:#4f46e5;font-weight:600;min-width:28px;text-align:right}.avatar-visibility-section{padding:8px 0}.avatar-visibility-section label{display:block;margin-bottom:8px}.avatar-visibility-section .flex{display:flex}.avatar-visibility-section .gap-2{gap:8px}.avatar-visibility-section button{flex:1;padding:8px 12px;font-size:11px;font-weight:600;border:1px solid #e2e8f0;border-radius:6px;cursor:pointer;transition:all .2s ease;background:#f8fafc;color:#64748b}.avatar-visibility-section button:hover{border-color:#a855f7;background:#faf5ff}.avatar-visibility-section button.bg-purple-600{background:#9333ea!important;color:#fff!important;border-color:#9333ea!important}.avatar-visibility-section p{margin-top:6px;font-size:10px;color:#94a3b8;line-height:1.4}.layers-panel{background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0;margin-top:16px;overflow:hidden}.layers-panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#f1f5f9;border-bottom:1px solid #e2e8f0}.layers-panel-header h3{font-size:13px;font-weight:600;color:#334155;margin:0}.layers-count{background:#cbd5e1;color:#475569;font-size:11px;font-weight:600;padding:2px 6px;border-radius:10px}.layers-panel-empty{padding:24px 16px;text-align:center;color:#94a3b8;font-size:13px}.layers-list{max-height:280px;overflow-y:auto}.layer-item{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid #f1f5f9;cursor:pointer;transition:background-color .15s ease;-webkit-user-select:none;user-select:none}.layer-item:hover{background:#f1f5f9}.layer-item.selected{background:#e0f2fe;border-left:3px solid #0ea5e9;padding-left:7px}.layer-item.dragging{opacity:.5;background:#e2e8f0}.layer-item.drag-over{border-top:2px solid #0ea5e9}.layer-item.layer-type-avatar .layer-icon{background:#dcfce7}.layer-item.layer-type-logo .layer-icon{background:#fef3c7}.layer-item.layer-type-image .layer-icon{background:#e0e7ff}.layer-item.layer-type-text .layer-icon{background:#fce7f3}.layer-item.layer-type-background .layer-icon{background:#f3e8ff}.layer-item.layer-type-intro .layer-icon{background:#ffedd5}.layer-visibility{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:transparent;cursor:pointer;color:#64748b;border-radius:4px;flex-shrink:0}.layer-visibility:hover{background:#e2e8f0;color:#334155}.layer-visibility.hidden{color:#cbd5e1}.layer-visibility.hidden:hover{color:#64748b}.layer-lock{display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:none;background:transparent;cursor:pointer;color:#cbd5e1;border-radius:4px;flex-shrink:0}.layer-lock:hover{background:#e2e8f0;color:#64748b}.layer-lock.locked{color:#f97316}.layer-lock.locked:hover{color:#ea580c}.layer-icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;font-size:12px;border-radius:4px;flex-shrink:0}.layer-name{flex:1;font-size:12px;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-item.selected .layer-name{font-weight:500}.layer-scope{display:flex;align-items:center;justify-content:center;min-width:24px;height:16px;font-size:9px;font-weight:600;border-radius:8px;padding:0 4px;flex-shrink:0}.layer-scope.global{background:#dbeafe;color:#1d4ed8}.layer-scope.scene{background:#fef3c7;color:#b45309}.layer-drag-handle{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:#cbd5e1;cursor:grab;flex-shrink:0}.layer-drag-handle:hover{color:#94a3b8}.layer-item.dragging .layer-drag-handle{cursor:grabbing}.layers-panel-footer{padding:8px 12px;background:#f8fafc;border-top:1px solid #e2e8f0}.layers-hint{font-size:10px;color:#94a3b8;font-style:italic}.layers-list::-webkit-scrollbar{width:6px}.layers-list::-webkit-scrollbar-track{background:#f1f5f9}.layers-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.layers-list::-webkit-scrollbar-thumb:hover{background:#94a3b8}.canvas-toolbar{position:relative;width:100%;height:48px;flex-shrink:0;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--surface-secondary, #f9fafb);border-bottom:1px solid var(--border-color, #e5e7eb);z-index:200;-webkit-user-select:none;user-select:none}.canvas-toolbar.disabled{opacity:.6;pointer-events:none}.toolbar-section{display:flex;align-items:center;gap:1px;background:#0000000f;border-radius:8px;padding:3px}.board-style-section,.edit-toggles-section{gap:1px}.toolbar-divider{width:1px;height:20px;background:var(--border-color, #d1d5db);margin:0 8px;flex-shrink:0}.toolbar-spacer{flex:1}.toolbar-btn{display:flex;align-items:center;justify-content:center;gap:0;width:28px;height:28px;padding:0;border:none;border-radius:6px;background:transparent;color:var(--text-tertiary, #6b7280);font-size:10px;font-weight:500;cursor:pointer;transition:all .15s ease}.toolbar-btn span{display:none}.toolbar-btn:hover:not(:disabled){background:var(--hover-bg, #d1d5db);color:var(--text-secondary, #374151)}.toolbar-btn.active{background:#6366f11a;color:#4338ca;box-shadow:0 1px 2px #0000000d,inset 0 0 0 1px #6366f133}.toolbar-btn.active:hover:not(:disabled){background:#6366f126;color:#4338ca}.toolbar-btn:disabled{opacity:.4;cursor:not-allowed}.toolbar-btn.icon-only{width:28px;padding:0}.toolbar-btn svg{flex-shrink:0}.scene-indicator{font-size:11px;font-weight:600;color:var(--text-secondary, #64748b);min-width:36px;text-align:center;font-variant-numeric:tabular-nums}.zoom-indicator{font-size:10px;font-weight:600;color:var(--text-secondary, #64748b);min-width:40px;text-align:center;font-variant-numeric:tabular-nums}.scene-nav-section,.zoom-section{gap:4px;background:transparent;padding:0}@media (max-width: 900px){.toolbar-divider{margin:0 4px}.toolbar-section{padding:2px}.toolbar-btn{width:24px;height:24px}}.recording .canvas-toolbar,.fullscreen-recording .canvas-toolbar{display:none}.user-avatar-button{padding:0;border:none;background:none;cursor:pointer;border-radius:50%;transition:opacity .2s ease}.user-avatar-button:hover{opacity:.85}.user-avatar-button:focus{outline:2px solid #1976d2;outline-offset:2px}.user-avatar-circle{position:relative;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;overflow:hidden;border:2px solid rgba(255,255,255,.3);box-shadow:0 2px 4px #0000001a}.user-avatar-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;border-radius:50%}.user-avatar-initials{position:relative;z-index:1;-webkit-user-select:none;user-select:none;text-transform:uppercase;letter-spacing:.5px}.user-avatar-circle:has(.user-avatar-image:not([style*="display: none"])) .user-avatar-initials{opacity:0}.user-menu{position:relative;display:inline-block}.user-menu-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;z-index:1000;overflow:hidden;animation:dropdownFadeIn .15s ease-out}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.user-menu-header{padding:12px 16px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-bottom:1px solid #e0e0e0}.user-menu-name{display:block;font-weight:600;font-size:14px;color:#1a1a1a;margin-bottom:2px}.user-menu-email{display:block;font-size:12px;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-menu-divider{height:1px;background:#e0e0e0;margin:4px 0}.user-menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 16px;border:none;background:none;font-size:14px;color:#333;cursor:pointer;text-align:left;transition:background-color .15s ease}.user-menu-item:hover{background-color:#f5f5f5}.user-menu-item svg{flex-shrink:0;color:#666}.user-menu-item span{flex:1}.user-menu-item-danger{color:#d32f2f}.user-menu-item-danger svg{color:#d32f2f}.user-menu-item-danger:hover{background-color:#ffebee}@media (prefers-color-scheme: dark){.user-menu-dropdown{background:#2d2d2d;box-shadow:0 4px 20px #0006}.user-menu-header{background:linear-gradient(135deg,#3d3d3d,#2d2d2d);border-bottom-color:#444}.user-menu-name{color:#fff}.user-menu-email{color:#aaa}.user-menu-divider{background:#444}.user-menu-item{color:#e0e0e0}.user-menu-item:hover{background-color:#3d3d3d}.user-menu-item svg{color:#aaa}.user-menu-item-danger{color:#f44336}.user-menu-item-danger svg{color:#f44336}.user-menu-item-danger:hover{background-color:#f443361a}}.user-profile-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease-out}.user-profile-modal{background:#fff;border-radius:12px;width:100%;max-width:480px;max-height:90vh;overflow:hidden;box-shadow:0 20px 60px #0000004d;animation:slideUp .25s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.user-profile-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e0e0e0;background:linear-gradient(135deg,#f8f9fa,#e9ecef)}.user-profile-modal-header h2{margin:0;font-size:18px;font-weight:600;color:#1a1a1a}.user-profile-modal-header .close-btn{padding:4px;border:none;background:none;cursor:pointer;border-radius:4px;color:#666;transition:all .15s ease}.user-profile-modal-header .close-btn:hover{background:#0000000d;color:#333}.user-profile-modal-content{padding:24px 20px;overflow-y:auto;max-height:calc(90vh - 60px)}.user-profile-message{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:8px;margin-bottom:20px;font-size:14px}.user-profile-message.error{background:#ffebee;color:#c62828}.user-profile-message.success{background:#e8f5e9;color:#2e7d32}.user-profile-photo-section{display:flex;flex-direction:column;align-items:center;margin-bottom:24px}.user-profile-photo-wrapper{position:relative;cursor:pointer;border-radius:50%;overflow:hidden}.user-profile-photo-wrapper:hover .user-profile-photo-overlay{opacity:1}.user-profile-photo-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity .2s ease;border-radius:50%}.user-profile-remove-photo{margin-top:12px;padding:6px 12px;border:1px solid #d32f2f;background:none;color:#d32f2f;border-radius:4px;font-size:13px;cursor:pointer;transition:all .15s ease}.user-profile-remove-photo:hover{background:#d32f2f;color:#fff}.user-profile-form{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}.user-profile-field{display:flex;flex-direction:column;gap:6px}.user-profile-field label{font-size:13px;font-weight:600;color:#555}.user-profile-field input{padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;transition:border-color .2s ease,box-shadow .2s ease}.user-profile-field input:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 3px #1976d21a}.user-profile-field input.disabled{background:#f5f5f5;color:#888;cursor:not-allowed}.user-profile-field .field-hint{font-size:12px;color:#888}.user-profile-save-btn{width:100%;padding:12px;border:none;border-radius:8px;background:#1976d2;color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:background .2s ease}.user-profile-save-btn:hover:not(:disabled){background:#1565c0}.user-profile-save-btn:disabled{background:#90caf9;cursor:not-allowed}.user-profile-password-section{margin-top:24px;padding-top:20px;border-top:1px solid #e0e0e0}.user-profile-password-toggle{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #ddd;background:none;border-radius:6px;font-size:14px;color:#555;cursor:pointer;transition:all .15s ease}.user-profile-password-toggle:hover{background:#f5f5f5;border-color:#ccc}.user-profile-password-form{margin-top:16px;display:flex;flex-direction:column;gap:12px}.user-profile-password-btn{padding:10px 16px;border:none;border-radius:6px;background:#f57c00;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s ease}.user-profile-password-btn:hover:not(:disabled){background:#e65100}.user-profile-password-btn:disabled{background:#ffcc80;cursor:not-allowed}.user-profile-tabs{display:flex;border-bottom:1px solid #e0e0e0;background:#f8f9fa}.user-profile-tab{flex:1;padding:12px 16px;border:none;background:none;font-size:14px;font-weight:500;color:#666;cursor:pointer;transition:all .2s ease;position:relative}.user-profile-tab:hover{background:#0000000d;color:#333}.user-profile-tab.active{color:#1976d2;background:#fff}.user-profile-tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#1976d2}.user-subscription-content{padding:8px 0}.user-subscription-content h3{font-size:16px;font-weight:600;color:#333;margin:0 0 16px}.subscription-current-plan{margin-bottom:32px}.plan-card{background:linear-gradient(135deg,#e3f2fd,#bbdefb);border-radius:12px;padding:20px;border:1px solid #90caf9}.plan-name{font-size:24px;font-weight:700;color:#1565c0;margin-bottom:8px}.plan-status{margin-bottom:8px}.status-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase}.status-badge.free{background:#e0e0e0;color:#666}.status-badge.active{background:#c8e6c9;color:#2e7d32}.status-badge.past_due{background:#ffecb3;color:#f57c00}.status-badge.canceled{background:#ffcdd2;color:#c62828}.plan-price{font-size:14px;color:#555}.subscription-upgrade h3{margin-bottom:16px}.plans-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.upgrade-plan-card{background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:20px;transition:all .2s ease}.upgrade-plan-card:hover{box-shadow:0 4px 12px #0000001a}.upgrade-plan-card.featured{border-color:#1976d2;box-shadow:0 0 0 2px #1976d233}.plan-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.plan-title{font-size:18px;font-weight:700;color:#333}.plan-price-tag{font-size:16px;font-weight:600;color:#1976d2}.plan-features{list-style:none;padding:0;margin:0 0 16px}.plan-features li{font-size:13px;color:#666;padding:6px 0;border-bottom:1px solid #f0f0f0}.plan-features li:last-child{border-bottom:none}.plan-features li:before{content:"✓";color:#4caf50;margin-right:8px}.upgrade-btn{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;background:#f5f5f5;color:#666;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upgrade-btn:hover:not(:disabled){background:#e0e0e0}.upgrade-btn.primary{background:#1976d2;border-color:#1976d2;color:#fff}.upgrade-btn.primary:hover:not(:disabled){background:#1565c0}.upgrade-btn:disabled{opacity:.6;cursor:not-allowed}.upgrade-note{font-size:13px;color:#888;text-align:center;margin:0;font-style:italic}@media (prefers-color-scheme: dark){.user-profile-modal{background:#2d2d2d}.user-profile-modal-header{background:linear-gradient(135deg,#3d3d3d,#2d2d2d);border-bottom-color:#444}.user-profile-modal-header h2{color:#fff}.user-profile-modal-header .close-btn{color:#aaa}.user-profile-modal-header .close-btn:hover{background:#ffffff1a;color:#fff}.user-profile-message.error{background:#c6282833;color:#ef5350}.user-profile-message.success{background:#2e7d3233;color:#66bb6a}.user-profile-field label{color:#aaa}.user-profile-field input{background:#3d3d3d;border-color:#555;color:#fff}.user-profile-field input:focus{border-color:#42a5f5;box-shadow:0 0 0 3px #42a5f533}.user-profile-field input.disabled{background:#333;color:#777}.user-profile-field .field-hint{color:#777}.user-profile-password-section{border-top-color:#444}.user-profile-password-toggle{border-color:#555;color:#aaa}.user-profile-password-toggle:hover{background:#3d3d3d;border-color:#666}.user-profile-tabs{background:#333;border-bottom-color:#444}.user-profile-tab{color:#aaa}.user-profile-tab:hover{background:#ffffff0d;color:#fff}.user-profile-tab.active{color:#42a5f5;background:#2d2d2d}.user-profile-tab.active:after{background:#42a5f5}.user-subscription-content h3{color:#fff}.plan-card{background:linear-gradient(135deg,#1e3a5f,#0d2137);border-color:#2a4d6e}.plan-name{color:#64b5f6}.plan-price{color:#aaa}.upgrade-plan-card{background:#333;border-color:#444}.upgrade-plan-card.featured{border-color:#42a5f5;box-shadow:0 0 0 2px #42a5f54d}.plan-title{color:#fff}.plan-features li{color:#aaa;border-bottom-color:#444}.upgrade-btn{background:#444;border-color:#555;color:#aaa}.upgrade-btn:hover:not(:disabled){background:#555}.upgrade-note{color:#777}}.lipsync-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:20000;animation:lipsyncFadeIn .2s ease-out}@keyframes lipsyncFadeIn{0%{opacity:0}to{opacity:1}}.lipsync-modal{background:#fff;border-radius:16px;width:100%;max-width:420px;overflow:hidden;box-shadow:0 25px 80px #0006;animation:lipsyncSlideUp .3s ease-out}@keyframes lipsyncSlideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.lipsync-modal-header{display:flex;align-items:center;gap:12px;padding:20px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.lipsync-modal-header.progress{background:linear-gradient(135deg,#11998e,#38ef7d)}.lipsync-modal-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:#fff3;border-radius:12px}.lipsync-modal-spinner{position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px}.lipsync-modal-spinner svg{animation:lipsyncSpin 1s linear infinite}@keyframes lipsyncSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.lipsync-modal-spinner .progress-text{position:absolute;font-size:10px;font-weight:700}.lipsync-modal-header h2{margin:0;font-size:18px;font-weight:600}.lipsync-modal-content{padding:24px}.lipsync-modal-description{margin:0 0 16px;font-size:14px;color:#555;line-height:1.5}.lipsync-modal-info{background:#f8f9fa;border-radius:8px;padding:12px 16px;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;padding:6px 0}.info-row:not(:last-child){border-bottom:1px solid #e9ecef}.info-label{font-size:13px;color:#666}.info-value{font-size:13px;font-weight:600;color:#333}.lipsync-modal-warning{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fff3cd;border:1px solid #ffc107;border-radius:8px;font-size:12px;color:#856404}.lipsync-modal-warning.progress{background:#e8f5e9;border-color:#4caf50;color:#2e7d32}.lipsync-modal-actions{display:flex;gap:12px;padding:16px 24px;background:#f8f9fa;border-top:1px solid #e9ecef}.lipsync-modal-btn{flex:1;padding:12px 20px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s ease}.lipsync-modal-btn.cancel{background:#e9ecef;color:#495057}.lipsync-modal-btn.cancel:hover{background:#dee2e6}.lipsync-modal-btn.confirm{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.lipsync-modal-btn.confirm:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.lipsync-progress-bar-container{height:8px;background:#e9ecef;border-radius:4px;overflow:hidden;margin-bottom:16px}.lipsync-progress-bar{height:100%;background:linear-gradient(90deg,#11998e,#38ef7d);border-radius:4px;transition:width .3s ease}.lipsync-progress-status{margin:0 0 8px;font-size:14px;color:#333;font-weight:500;text-align:center}.lipsync-progress-detail{margin:0 0 16px;font-size:12px;color:#666;text-align:center}/*!
 * Quill Editor v1.3.7
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container.ql-disabled .ql-editor ul[data-checked]>li:before{pointer-events:none}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor ul,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol,.ql-editor ul{padding-left:1.5em}.ql-editor ol>li,.ql-editor ul>li{list-style-type:none}.ql-editor ul>li:before{content:"•"}.ql-editor ul[data-checked=true],.ql-editor ul[data-checked=false]{pointer-events:none}.ql-editor ul[data-checked=true]>li *,.ql-editor ul[data-checked=false]>li *{pointer-events:all}.ql-editor ul[data-checked=true]>li:before,.ql-editor ul[data-checked=false]>li:before{color:#777;cursor:pointer;pointer-events:all}.ql-editor ul[data-checked=true]>li:before{content:"☑"}.ql-editor ul[data-checked=false]>li:before{content:"☐"}.ql-editor li:before{display:inline-block;white-space:nowrap;width:1.2em}.ql-editor li:not(.ql-direction-rtl):before{margin-left:-1.5em;margin-right:.3em;text-align:right}.ql-editor li.ql-direction-rtl:before{margin-left:.3em;margin-right:-1.5em}.ql-editor ol li:not(.ql-direction-rtl),.ql-editor ul li:not(.ql-direction-rtl){padding-left:1.5em}.ql-editor ol li.ql-direction-rtl,.ql-editor ul li.ql-direction-rtl{padding-right:1.5em}.ql-editor ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.ql-editor ol li:before{content:counter(list-0,decimal) ". "}.ql-editor ol li.ql-indent-1{counter-increment:list-1}.ql-editor ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) ". "}.ql-editor ol li.ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-2{counter-increment:list-2}.ql-editor ol li.ql-indent-2:before{content:counter(list-2,lower-roman) ". "}.ql-editor ol li.ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-3{counter-increment:list-3}.ql-editor ol li.ql-indent-3:before{content:counter(list-3,decimal) ". "}.ql-editor ol li.ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-4{counter-increment:list-4}.ql-editor ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) ". "}.ql-editor ol li.ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-5{counter-increment:list-5}.ql-editor ol li.ql-indent-5:before{content:counter(list-5,lower-roman) ". "}.ql-editor ol li.ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-6{counter-increment:list-6}.ql-editor ol li.ql-indent-6:before{content:counter(list-6,decimal) ". "}.ql-editor ol li.ql-indent-6{counter-reset:list-7 list-8 list-9}.ql-editor ol li.ql-indent-7{counter-increment:list-7}.ql-editor ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) ". "}.ql-editor ol li.ql-indent-7{counter-reset:list-8 list-9}.ql-editor ol li.ql-indent-8{counter-increment:list-8}.ql-editor ol li.ql-indent-8:before{content:counter(list-8,lower-roman) ". "}.ql-editor ol li.ql-indent-8{counter-reset:list-9}.ql-editor ol li.ql-indent-9{counter-increment:list-9}.ql-editor ol li.ql-indent-9:before{content:counter(list-9,decimal) ". "}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:"";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer: coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:"";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor pre{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor pre{white-space:pre-wrap;margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor pre.ql-syntax{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=""]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=""]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=""]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=""]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=""]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=""]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:"Normal"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]:before{content:"Heading 1"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]:before{content:"Heading 2"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]:before{content:"Heading 3"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]:before{content:"Heading 4"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]:before{content:"Heading 5"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]:before{content:"Heading 6"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:"Sans Serif"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:"Serif"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:"Monospace"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:"Normal"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:"Small"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:"Large"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:"Huge"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0px}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:"Edit";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:"Remove";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0px;content:"Save";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:"Enter link:"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:"Enter formula:"}.ql-snow .ql-tooltip[data-mode=video]:before{content:"Enter video:"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}.richtext-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:20000;animation:richtextFadeIn .2s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes richtextFadeIn{0%{opacity:0}to{opacity:1}}.richtext-modal{background:#fff;border-radius:16px;width:90%;max-width:900px;height:85vh;max-height:700px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 25px 80px #0006;animation:richtextSlideUp .3s ease-out}@keyframes richtextSlideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.richtext-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;flex-shrink:0}.richtext-modal-title{display:flex;align-items:center;gap:12px}.richtext-modal-title svg{opacity:.9}.richtext-modal-title h2{margin:0;font-size:18px;font-weight:600}.richtext-modal-subtitle{font-size:12px;opacity:.85;margin-top:2px;display:block}.richtext-modal-actions{display:flex;gap:10px}.richtext-btn{display:flex;align-items:center;gap:6px;padding:10px 18px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s ease}.richtext-btn.cancel{background:#fff3;color:#fff}.richtext-btn.cancel:hover{background:#ffffff4d}.richtext-btn.save{background:#fff;color:#3b82f6}.richtext-btn.save:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0003}.richtext-modal-body{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:16px;background:#f8fafc}.richtext-modal-body .quill{flex:1;display:flex;flex-direction:column;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.richtext-modal-body .ql-toolbar{border:none;border-bottom:1px solid #e2e8f0;background:#f8fafc;padding:12px}.richtext-modal-body .ql-toolbar .ql-formats{margin-right:12px}.richtext-modal-body .ql-container{flex:1;border:none;font-size:16px;overflow-y:auto}.richtext-modal-body .ql-editor{padding:20px;min-height:200px;line-height:1.6}.richtext-modal-body .ql-editor.ql-blank:before{color:#94a3b8;font-style:normal;left:20px;right:20px}.richtext-modal-body .ql-editor h1{font-size:2em;font-weight:700;margin:0 0 .5em;color:#1e293b}.richtext-modal-body .ql-editor h2{font-size:1.5em;font-weight:600;margin:0 0 .4em;color:#334155}.richtext-modal-body .ql-editor h3{font-size:1.25em;font-weight:600;margin:0 0 .3em;color:#475569}.richtext-modal-body .ql-editor p{margin:0 0 .8em}.richtext-modal-body .ql-editor ul,.richtext-modal-body .ql-editor ol{margin:0 0 .8em;padding-left:1.5em}.richtext-modal-body .ql-editor li{margin:.3em 0}.richtext-loading{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#64748b}.richtext-spinner{width:32px;height:32px;border:3px solid #e2e8f0;border-top-color:#3b82f6;border-radius:50%;animation:richtextSpin .8s linear infinite}@keyframes richtextSpin{to{transform:rotate(360deg)}}.richtext-modal-footer{padding:12px 24px;background:#f1f5f9;border-top:1px solid #e2e8f0;flex-shrink:0}.richtext-tips{display:flex;align-items:center;gap:8px;font-size:12px;color:#64748b}.richtext-tips svg{flex-shrink:0;color:#3b82f6}.richtext-tips strong{color:#475569}.richtext-tips kbd{display:inline-block;padding:2px 6px;background:#fff;border:1px solid #d1d5db;border-radius:4px;font-family:monospace;font-size:11px;box-shadow:0 1px 2px #0000000d}@media (max-width: 768px){.richtext-modal{width:95%;height:90vh;max-height:none;border-radius:12px}.richtext-modal-header{padding:12px 16px}.richtext-modal-body{padding:12px}.richtext-modal-footer{padding:10px 16px}.richtext-tips{flex-wrap:wrap}}.canvas-tab-bar{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:#f5f5f5;border-bottom:1px solid #e0e0e0;min-height:40px}.canvas-tabs{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.canvas-tab{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #ddd;border-bottom:none;background:#fff;border-radius:6px 6px 0 0;font-size:13px;color:#555;cursor:pointer;transition:all .15s ease;position:relative}.canvas-tab:hover{background:#f0f0f0;color:#333}.canvas-tab.active{background:#fff;color:#1976d2;border-color:#1976d2;border-bottom:2px solid #1976d2;margin-bottom:-1px}.canvas-tab svg{flex-shrink:0;opacity:.7}.canvas-tab.active svg{opacity:1}.canvas-tab.main-tab{font-weight:600}.canvas-tab .tab-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-tab .tab-name-input{width:100px;padding:2px 4px;border:1px solid #1976d2;border-radius:3px;font-size:13px;outline:none}.canvas-tab .tab-shortcut{font-size:10px;color:#999;background:#f0f0f0;padding:1px 4px;border-radius:3px;margin-left:2px}.canvas-tab.active .tab-shortcut{background:#e3f2fd;color:#1976d2}.canvas-tab .tab-remove-btn{padding:2px;border:none;background:none;cursor:pointer;color:#999;border-radius:3px;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .15s ease}.canvas-tab:hover .tab-remove-btn{opacity:1}.canvas-tab .tab-remove-btn:hover{background:#ffebee;color:#d32f2f}.canvas-tab.add-tab-btn{padding:6px 10px;border-style:dashed;color:#888}.canvas-tab.add-tab-btn:hover:not(:disabled){background:#e3f2fd;border-color:#1976d2;color:#1976d2}.canvas-tab.add-tab-btn:disabled,.canvas-tab.add-tab-btn.disabled{opacity:.5;cursor:not-allowed}.tab-playback-hint{display:flex;align-items:center;gap:6px;font-size:12px;color:#666;padding:4px 8px;background:#fff3cd;border-radius:4px}.tab-playback-hint svg{color:#856404}@media (prefers-color-scheme: dark){.canvas-tab-bar{background:#2d2d2d;border-bottom-color:#444}.canvas-tab{background:#3d3d3d;border-color:#555;color:#ccc}.canvas-tab:hover{background:#4d4d4d;color:#fff}.canvas-tab.active{background:#3d3d3d;color:#42a5f5;border-color:#42a5f5;border-bottom-color:#42a5f5}.canvas-tab .tab-shortcut{background:#444;color:#888}.canvas-tab.active .tab-shortcut{background:#42a5f533;color:#42a5f5}.canvas-tab .tab-name-input{background:#333;border-color:#42a5f5;color:#fff}.canvas-tab .tab-remove-btn:hover{background:#f4433633;color:#f44336}.canvas-tab.add-tab-btn:hover{background:#42a5f51a;border-color:#42a5f5;color:#42a5f5}.tab-playback-hint{background:#ffc10726;color:#ffc107}.tab-playback-hint svg{color:#ffc107}}.browser-window{display:flex;flex-direction:column;width:100%;height:100%;background:var(--surface, #ffffff);border-radius:0;border:none;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.browser-window-paste-trap{position:absolute;opacity:0;width:1px;height:1px;top:0;left:0;z-index:-10}.browser-window-hidden-input{display:none}.browser-window-toolbar{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;padding:8px 12px;height:48px;flex-shrink:0;background:var(--surface-secondary, #f9fafb);border-bottom:1px solid var(--border-color, #e5e7eb);overflow-x:auto}.browser-window-toolbar-section{display:flex;align-items:center;gap:4px;flex-shrink:0}.browser-window-toolbar-section--grow{flex:1;min-width:0}.browser-window-toolbar-divider{width:1px;height:20px;background:var(--border-color, #d1d5db);flex-shrink:0}.browser-window-nav-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:6px;background:transparent;color:var(--text-tertiary, #9ca3af);cursor:pointer;transition:background-color .15s,color .15s}.browser-window-nav-btn:hover:not(:disabled){background:var(--hover-bg, #f3f4f6);color:var(--text-secondary, #6b7280)}.browser-window-nav-btn:disabled{opacity:.4;cursor:not-allowed}.browser-window-url-bar{display:flex;align-items:center;gap:4px;flex:1;min-width:0;max-width:400px;height:36px;padding:0 4px;background:var(--surface, #ffffff);border:1px solid var(--border-color, #d1d5db);border-radius:8px;box-shadow:0 1px 2px #0000000d;transition:border-color .15s,box-shadow .15s}.browser-window-url-bar:focus-within{border-color:var(--primary-color, #4f46e5);box-shadow:0 0 0 2px #4f46e51a}.browser-window-url-bar--disabled{background:var(--surface-secondary, #f9fafb);opacity:.6}.browser-window-proxy-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:6px;background:transparent;color:var(--text-tertiary, #9ca3af);cursor:pointer;transition:all .15s;flex-shrink:0}.browser-window-proxy-btn:hover{background:var(--hover-bg, #f3f4f6);color:var(--text-secondary, #6b7280)}.browser-window-proxy-btn--active{background:#22c55e1a;color:#16a34a}.browser-window-proxy-btn--active:hover{background:#22c55e26;color:#15803d}.browser-window-url-input{flex:1;min-width:0;height:28px;padding:0 4px;border:none;outline:none;background:transparent;font-size:12px;color:var(--text-primary, #374151)}.browser-window-url-input::placeholder{color:var(--text-tertiary, #9ca3af)}.browser-window-go-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:6px;background:var(--primary-color, #4f46e5);color:#fff;cursor:pointer;box-shadow:0 1px 2px #0000001a;transition:background-color .15s;flex-shrink:0}.browser-window-go-btn:hover{background:var(--primary-hover, #4338ca)}.browser-window-control-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--border-color, #d1d5db);border-radius:6px;background:var(--surface, #ffffff);color:var(--text-secondary, #6b7280);cursor:pointer;box-shadow:0 1px 2px #0000000d;transition:all .15s}.browser-window-control-btn:hover{background:var(--hover-bg, #f9fafb);color:var(--text-primary, #374151)}.browser-window-control-btn--active{background:#4f46e51a;border-color:#4f46e54d;color:var(--primary-color, #4f46e5)}.browser-window-paste-btn{position:relative}.browser-window-paste-status{position:absolute;bottom:-32px;left:50%;transform:translate(-50%);padding:4px 8px;background:var(--text-primary, #111827);color:#fff;font-size:10px;white-space:nowrap;border-radius:4px;box-shadow:0 4px 12px #00000026;z-index:50;animation:fadeInUp .2s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.browser-window-recordable{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;cursor:help;transition:background-color .15s}.browser-window-recordable--yes{background:#22c55e1a;border:1px solid rgba(34,197,94,.3);color:#16a34a}.browser-window-recordable--yes:hover{background:#22c55e26}.browser-window-recordable--no{background:#f59e0b1a;border:1px solid rgba(245,158,11,.3);color:#d97706}.browser-window-recordable--no:hover{background:#f59e0b26}.browser-window-tools-group{display:flex;background:#e5e7eb;border-radius:8px;padding:2px;gap:2px;flex-shrink:0}.browser-window-tool-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:6px;background:transparent;color:#6b7280;cursor:pointer;transition:all .15s ease}.browser-window-tool-btn:hover:not(:disabled){color:#374151;background:#d1d5db}.browser-window-tool-btn:disabled{opacity:.4;cursor:not-allowed}.browser-window-tool-btn.active{background:#6366f11a;color:#4338ca;box-shadow:0 1px 2px #0000000d,inset 0 0 0 1px #6366f133}.browser-window-tools{display:flex;gap:2px;padding:2px;background:#e5e7eb;border-radius:8px}.browser-window-tool-btn--active{background:#6366f11a;color:#4338ca;box-shadow:0 1px 2px #0000000d,inset 0 0 0 1px #6366f133}.browser-window-context-controls{display:flex;align-items:center;gap:12px;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.browser-window-shape-group{display:flex;gap:2px;padding:2px;background:var(--surface-secondary, #f3f4f6);border-radius:6px}.browser-window-shape-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:4px;background:transparent;color:var(--text-tertiary, #9ca3af);cursor:pointer;transition:all .15s}.browser-window-shape-btn:hover{color:var(--text-secondary, #6b7280)}.browser-window-shape-btn--active{background:var(--surface, #ffffff);color:var(--primary-color, #4f46e5);box-shadow:0 1px 2px #0000001a}.browser-window-size-select{height:32px;padding:0 8px;border:1px solid var(--border-color, #d1d5db);border-radius:4px;background:transparent;font-size:12px;color:var(--text-primary, #374151);outline:none;cursor:pointer}.browser-window-size-select:focus{border-color:var(--primary-color, #4f46e5)}.browser-window-draw-mode-btn{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--border-color, #d1d5db);border-radius:6px;background:var(--surface, #ffffff);font-size:12px;font-weight:500;color:var(--text-secondary, #6b7280);cursor:pointer;transition:all .15s}.browser-window-draw-mode-btn:hover{border-color:var(--border-color-hover, #9ca3af)}.browser-window-draw-mode-btn--active{background:#4f46e51a;border-color:#4f46e54d;color:var(--primary-color, #4f46e5)}.browser-window-clear-btn{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--border-color, #d1d5db);border-radius:6px;background:var(--surface, #ffffff);font-size:12px;font-weight:500;color:var(--text-secondary, #6b7280);cursor:pointer;transition:all .15s}.browser-window-clear-btn:hover:not(:disabled){background:#ef44441a;border-color:#ef44444d;color:#dc2626}.browser-window-clear-btn:disabled{opacity:.5;cursor:not-allowed}.browser-window-zoom-controls{display:flex;align-items:center;gap:4px;margin-left:auto}.browser-window-zoom-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:4px;background:transparent;color:var(--text-secondary, #6b7280);cursor:pointer;transition:background-color .15s}.browser-window-zoom-btn:hover{background:var(--hover-bg, #e5e7eb)}.browser-window-zoom-value{width:40px;font-size:12px;font-family:SF Mono,Monaco,monospace;text-align:center;color:var(--text-secondary, #6b7280)}.browser-window-reset-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:4px;background:transparent;color:var(--text-tertiary, #9ca3af);cursor:pointer;margin-left:4px;transition:all .15s}.browser-window-reset-btn:hover{background:var(--hover-bg, #f3f4f6);color:var(--primary-color, #4f46e5)}.browser-window-gallery{display:flex;align-items:center;gap:4px;width:100%;max-width:400px;height:36px;padding:0 4px;background:var(--surface, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:8px;box-shadow:0 1px 2px #0000000d}.browser-window-gallery-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:4px;background:transparent;color:var(--text-tertiary, #9ca3af);cursor:pointer;transition:all .15s}.browser-window-gallery-close:hover{background:#ef44441a;color:#dc2626}.browser-window-gallery-divider{width:1px;height:20px;background:var(--border-color, #e5e7eb);margin:0 4px}.browser-window-gallery-nav{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:4px;background:transparent;color:var(--text-tertiary, #9ca3af);cursor:pointer;flex-shrink:0;transition:color .15s}.browser-window-gallery-nav:hover:not(:disabled){color:var(--text-primary, #374151)}.browser-window-gallery-nav:disabled{opacity:.3;cursor:not-allowed}.browser-window-gallery-items{display:flex;gap:4px;flex:1;justify-content:center;align-items:center;overflow:hidden;padding:0 4px}.browser-window-gallery-item{position:relative;width:28px;height:28px;padding:0;border:1px solid var(--border-color, #e5e7eb);border-radius:4px;background:transparent;cursor:pointer;overflow:hidden;flex-shrink:0;opacity:.8;transition:all .15s}.browser-window-gallery-item:hover{opacity:1;border-color:var(--border-color-hover, #9ca3af)}.browser-window-gallery-item--selected{opacity:1;border-color:transparent;box-shadow:0 0 0 2px var(--primary-color, #4f46e5),0 0 0 4px #4f46e533}.browser-window-gallery-item img{width:100%;height:100%;object-fit:cover}.browser-window-gallery-video-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--text-primary, #1f2937);color:#fff}.browser-window-gallery-index{position:absolute;bottom:0;right:0;padding:0 2px;background:#000000b3;font-size:8px;font-weight:700;color:#fff;border-top-left-radius:2px}.browser-window-content{position:relative;flex:1;display:flex;align-items:center;justify-content:center;background:var(--surface-secondary, #f3f4f6);overflow:hidden;outline:none;-webkit-user-select:none;user-select:none;aspect-ratio:var(--canvas-aspect-ratio, 16 / 9);max-width:95%;max-height:calc(100% - 16px);margin:8px auto;border:2px solid var(--border-color, #e5e7eb);border-radius:8px}.browser-window-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;border:2px dashed var(--border-color, #d1d5db);border-radius:12px;background:#f9fafb80;pointer-events:none}.browser-window-empty-icon{display:flex;align-items:center;justify-content:center;width:80px;height:80px;margin-bottom:16px;background:var(--surface, #ffffff);border-radius:16px;box-shadow:0 1px 3px #0000001a;color:#4f46e54d}.browser-window-empty-title{margin:0 0 16px;font-size:18px;font-weight:700;color:var(--text-secondary, #6b7280)}.browser-window-empty-options{display:flex;align-items:center;gap:16px}.browser-window-empty-option{padding:12px 16px;background:var(--surface, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:8px;box-shadow:0 1px 2px #0000000d;font-size:13px;text-align:center;color:var(--text-secondary, #6b7280)}.browser-window-empty-option-label{display:block;margin-bottom:4px;font-weight:700;color:var(--primary-color, #4f46e5)}.browser-window-empty-or{font-size:13px;font-weight:700;color:var(--border-color, #d1d5db)}.browser-window-iframe-container{position:relative;width:100%;height:100%}.browser-window-iframe{width:100%;height:100%;border:none;background:var(--surface, #ffffff)}.browser-window-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--surface, #ffffff);z-index:40}.browser-window-spinner{width:32px;height:32px;border:3px solid var(--border-color, #e5e7eb);border-top-color:var(--primary-color, #4f46e5);border-radius:50%;animation:spin .8s linear infinite}.browser-window-loading span{font-size:14px;font-weight:500;color:var(--primary-color, #4f46e5)}.browser-window-lock-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none}.browser-window-lock-badge{position:absolute;top:16px;right:16px;padding:6px 12px;background:var(--primary-color, #4f46e5);border-radius:999px;font-size:12px;font-weight:500;color:#fff;box-shadow:0 4px 12px #4f46e54d;animation:pulse 2s ease-in-out infinite}.browser-window-tools-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;background:transparent}.browser-window-annotations-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:20}.browser-window-annotation{position:absolute;border:2px solid #ef4444;background:#ef44441a;box-shadow:0 1px 3px #0000001a;border-radius:2px}.browser-window-annotation--drawing{border-style:dashed;background:#ef44440d}.browser-window-media-wrapper{position:relative;width:fit-content;height:fit-content;transition:transform 75ms ease-out;transform-origin:center center}.browser-window-image{display:block;max-width:none;border-radius:4px;box-shadow:0 10px 40px #00000026;-webkit-user-select:none;user-select:none}.browser-window-video{display:block;max-width:none;border-radius:4px;box-shadow:0 10px 40px #00000026}.browser-window-lens{position:relative;pointer-events:none}.browser-window-lens-crosshair{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;opacity:.3}.browser-window-lens-crosshair-h{width:8px;height:2px;background:var(--primary-color, #4f46e5)}.browser-window-lens-crosshair-v{position:absolute;width:2px;height:8px;background:var(--primary-color, #4f46e5)}.browser-window-viewport-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;pointer-events:none;z-index:30}.browser-window-viewport-mask{background:#0009}.browser-window-viewport-mask--top,.browser-window-viewport-mask--bottom{flex:1;width:100%;min-height:0}.browser-window-viewport-mask--left,.browser-window-viewport-mask--right{flex:1;min-width:0}.browser-window-viewport-row{display:flex;width:100%;flex-shrink:0}.browser-window-viewport-window{position:relative;flex-shrink:0;border:2px solid rgba(255,255,255,.9);box-sizing:border-box}.browser-window-viewport-crosshair{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.3}.browser-window-viewport-crosshair-h{position:absolute;top:50%;left:0;right:0;height:1px;background:#ffffff80}.browser-window-viewport-crosshair-v{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#ffffff80}.phase-rail{display:flex;flex-direction:column;align-items:center;width:64px;height:100%;background:linear-gradient(180deg,#1e1b4b,#312e81);border-right:1px solid rgba(255,255,255,.1);padding:12px 0;gap:8px}.phase-rail-logo{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#ffffff1a;color:#a5b4fc;margin-bottom:8px;transition:all .2s ease}.phase-rail-logo:hover{background:#ffffff26;color:#c7d2fe}.phase-rail-logo svg{flex-shrink:0}.phase-rail-nav{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;padding:8px 0}.phase-rail-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:56px;padding:10px 4px;border:none;border-radius:10px;background:transparent;color:#fff9;cursor:pointer;transition:all .2s ease;position:relative}.phase-rail-btn:hover:not(:disabled){background:#ffffff1a;color:#ffffffe6}.phase-rail-btn.active{background:#ffffff26;color:#fff}.phase-rail-btn.active:before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:24px;background:#818cf8;border-radius:0 2px 2px 0}.phase-rail-btn:disabled{opacity:.4;cursor:not-allowed}.phase-rail-icon{display:flex;align-items:center;justify-content:center}.phase-rail-icon svg{width:20px;height:20px}.phase-rail-label{font-size:10px;font-weight:500;text-align:center;white-space:nowrap;font-family:Inter,system-ui,sans-serif}.phase-rail-footer{display:flex;align-items:center;justify-content:center;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);margin-top:auto}.phase-rail-settings{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:10px;background:transparent;color:#ffffff80;cursor:pointer;transition:all .2s ease}.phase-rail-settings:hover{background:#ffffff1a;color:#fffc}.phase-rail-settings svg{flex-shrink:0}@media (max-width: 900px){.phase-rail{display:none}}@media (prefers-color-scheme: dark){.phase-rail{background:linear-gradient(180deg,#0f0d24,#1e1b4b)}}.ai-settings-panel{display:flex;flex-direction:column;gap:12px;padding:12px;max-width:100%}.ai-settings-header{margin-bottom:6px;padding-bottom:10px;border-bottom:1px solid var(--border-color, #e5e7eb)}.ai-settings-header h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:14px;font-weight:600;color:var(--text-primary, #111827)}.ai-settings-header h3 svg{width:18px;height:18px;color:var(--primary-color, #4f46e5);filter:drop-shadow(0 1px 2px rgba(79,70,229,.2))}.ai-settings-header p{margin:0;font-size:11px;color:var(--text-secondary, #6b7280);line-height:1.4}.ai-settings-section{background:var(--surface, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:8px;padding:12px;transition:box-shadow .2s ease}.ai-settings-section:hover{box-shadow:0 2px 8px #0000000a}.section-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--text-primary, #111827);margin-bottom:10px}.section-title svg{width:16px;height:16px;color:var(--primary-color, #4f46e5);opacity:.8}.section-description{font-size:11px;color:var(--text-secondary, #6b7280);margin:0 0 10px;line-height:1.4}.toggle-row{display:flex;align-items:center;gap:10px;cursor:pointer;padding:6px 8px;margin:-6px -8px;border-radius:6px;transition:background .15s ease}.toggle-row:hover{background:#4f46e50a}.toggle-row input[type=checkbox]{width:36px;height:20px;accent-color:var(--primary-color, #4f46e5);cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;background:#e5e7eb;border-radius:10px;position:relative;transition:background .2s ease}.toggle-row input[type=checkbox]:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #00000026;transition:transform .2s ease}.toggle-row input[type=checkbox]:checked{background:var(--primary-color, #4f46e5)}.toggle-row input[type=checkbox]:checked:after{transform:translate(16px)}.toggle-label{font-size:12px;color:var(--text-primary, #111827);font-weight:500}.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-color, #e5e7eb)}.setting-field{display:flex;flex-direction:column;gap:4px}.setting-field label{font-size:10px;font-weight:600;color:var(--text-secondary, #6b7280);text-transform:uppercase;letter-spacing:.3px}.setting-field select{padding:6px 8px;border:1px solid var(--border-color, #d1d5db);border-radius:6px;font-size:12px;color:var(--text-primary, #374151);background:var(--background, #f9fafb);cursor:pointer;transition:all .15s ease}.setting-field select:hover{border-color:var(--primary-color, #4f46e5);background:var(--surface, #ffffff)}.setting-field select:focus{outline:none;border-color:var(--primary-color, #4f46e5);box-shadow:0 0 0 3px #4f46e51a;background:var(--surface, #ffffff)}.diagram-options{display:flex;flex-direction:column;gap:4px;background:var(--background, #f3f4f6);border-radius:8px;padding:4px}.diagram-option{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease;flex:1;min-width:fit-content;background:transparent}.diagram-option:hover{background:#ffffff80}.diagram-option.selected{background:var(--surface, #ffffff);box-shadow:0 1px 3px #0000001a}.option-content{display:flex;flex-direction:column;align-items:center;gap:2px}.option-title{font-size:11px;font-weight:500;color:var(--text-primary, #111827);white-space:nowrap}.diagram-option.selected .option-title{color:var(--primary-color, #4f46e5);font-weight:600}.option-desc{font-size:9px;color:var(--text-secondary, #6b7280);text-align:center;max-width:100px;line-height:1.2}.ai-settings-info{display:flex;align-items:center;gap:8px;padding:10px 12px;background:linear-gradient(135deg,#4f46e50d,#8b5cf60d);border:1px solid rgba(79,70,229,.1);border-radius:8px;font-size:11px;color:var(--text-secondary, #6b7280)}.ai-settings-info svg{flex-shrink:0;width:14px;height:14px;color:var(--primary-color, #4f46e5)}@media (max-width: 400px){.settings-grid{grid-template-columns:1fr}.diagram-options{flex-direction:column;gap:4px}.diagram-option{padding:10px}}@media (prefers-color-scheme: dark){.ai-settings-header h3{color:#f9fafb}.ai-settings-header h3 svg{color:#818cf8;filter:drop-shadow(0 1px 2px rgba(129,140,248,.2))}.ai-settings-header p{color:#9ca3af}.ai-settings-header{border-bottom-color:#374151}.ai-settings-section{background:#1f2937;border-color:#374151}.ai-settings-section:hover{box-shadow:0 2px 8px #0003}.section-title{color:#f9fafb}.section-title svg{color:#818cf8}.section-description{color:#9ca3af}.toggle-row:hover{background:#818cf814}.toggle-row input[type=checkbox]{background:#4b5563}.toggle-row input[type=checkbox]:checked{background:#818cf8}.toggle-label{color:#f9fafb}.settings-grid{border-top-color:#374151}.setting-field label{color:#9ca3af}.setting-field select{background:#374151;border-color:#4b5563;color:#f9fafb}.setting-field select:hover{border-color:#818cf8;background:#4b5563}.setting-field select:focus{border-color:#818cf8;box-shadow:0 0 0 3px #818cf826;background:#4b5563}.diagram-options{background:#374151}.diagram-option:hover{background:#ffffff0d}.diagram-option.selected{background:#4b5563;box-shadow:0 1px 3px #0000004d}.option-title{color:#f9fafb}.diagram-option.selected .option-title{color:#818cf8}.option-desc{color:#9ca3af}.ai-settings-info{background:linear-gradient(135deg,#818cf81a,#a78bfa1a);border-color:#818cf826;color:#9ca3af}.ai-settings-info svg{color:#818cf8}}.hybrid-header{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 12px;background:var(--surface, #ffffff);border-bottom:1px solid var(--border-color, #e5e7eb);box-shadow:0 1px 2px #0000000a;z-index:100;overflow:visible}.header-left{display:flex;align-items:center;gap:10px;min-width:200px;flex-shrink:0}.header-logo{display:flex;align-items:center;gap:8px;color:var(--primary-color, #4f46e5);font-weight:700;font-size:18px}.header-logo svg{flex-shrink:0}.header-logo-text{font-family:Inter,system-ui,sans-serif}.header-divider{width:1px;height:24px;background:var(--border-color, #e5e7eb)}.header-project{display:flex;align-items:center;gap:8px}.header-project-name{font-size:14px;font-weight:500;color:var(--text-primary, #111827);cursor:pointer;padding:4px 8px;border-radius:4px;transition:background .15s;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-project-name:hover{background:var(--surface-secondary, #f9fafb)}.header-project-input{font-size:14px;font-weight:500;padding:4px 8px;border:1px solid var(--primary-color, #4f46e5);border-radius:4px;outline:none;width:200px}.header-project-uuid{font-size:10px;font-weight:600;color:var(--text-secondary, #6b7280);background:var(--surface-secondary, #f9fafb);padding:2px 6px;border-radius:4px;font-family:monospace}.header-save-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:6px;background:transparent;color:var(--text-secondary, #6b7280);cursor:pointer;transition:all .15s}.header-save-btn:hover:not(:disabled){background:var(--surface-secondary, #f9fafb);color:var(--primary-color, #4f46e5)}.header-save-btn:disabled{opacity:.4;cursor:not-allowed}.header-phases{display:flex;align-items:center;gap:4px;background:var(--surface-secondary, #f9fafb);padding:4px;border-radius:10px}.phase-tab{display:flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:8px;background:transparent;color:var(--text-secondary, #6b7280);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}.phase-tab:hover{color:var(--text-primary, #111827);background:#fffc}.phase-tab.active{background:var(--surface, #ffffff);color:var(--primary-color, #4f46e5);box-shadow:0 1px 3px #0000001a}.phase-tab svg{width:16px;height:16px;flex-shrink:0}.phase-tab span{font-family:Inter,system-ui,sans-serif}.header-center-spacer{flex:1;min-width:0}.header-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.header-mode-toggle{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border-color, #e5e7eb);border-radius:6px;background:var(--surface, #ffffff);color:var(--text-secondary, #6b7280);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}.header-mode-toggle:hover{border-color:var(--primary-color, #4f46e5);color:var(--primary-color, #4f46e5)}.header-mode-toggle.hybrid{background:#4f46e514;border-color:var(--primary-color, #4f46e5);color:var(--primary-color, #4f46e5)}.header-mode-toggle svg{width:16px;height:16px;flex-shrink:0}.header-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border:none;border-radius:6px;background:transparent;color:var(--text-secondary, #6b7280);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}.header-btn:hover:not(:disabled){background:var(--surface-secondary, #f9fafb);color:var(--text-primary, #111827)}.header-btn:disabled{opacity:.4;cursor:not-allowed}.header-btn svg{width:18px;height:18px;flex-shrink:0}.subtab-bar{display:flex;align-items:center;height:44px;padding:0 16px;background:var(--surface, #ffffff);border-bottom:1px solid var(--border-color, #e5e7eb);gap:0}.subtab-phase-indicator{display:flex;align-items:center;gap:8px;padding-right:16px;flex-shrink:0}.subtab-phase-icon{display:flex;align-items:center;justify-content:center;color:var(--primary-color, #4f46e5)}.subtab-phase-icon svg{width:18px;height:18px}.subtab-phase-name{font-size:14px;font-weight:600;color:var(--text-primary, #111827);font-family:Inter,system-ui,sans-serif}.subtab-divider{width:1px;height:24px;background:var(--border-color, #e5e7eb);margin:0 16px 0 0;flex-shrink:0}.subtab-tabs{display:flex;align-items:center;gap:4px}.subtab-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border:none;border-radius:0;background:transparent;color:var(--text-secondary, #6b7280);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap;position:relative;font-family:Inter,system-ui,sans-serif}.subtab-btn:hover:not(:disabled){color:var(--text-primary, #111827)}.subtab-btn.active{color:var(--primary-color, #4f46e5)}.subtab-btn.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--primary-color, #4f46e5);border-radius:1px 1px 0 0}.subtab-btn:disabled{opacity:.4;cursor:not-allowed}.subtab-btn svg{width:16px;height:16px;flex-shrink:0}.subtab-spacer{flex:1}.phase-subnav-wrapper{display:contents}.phase-nav-row{display:flex;align-items:center;justify-content:flex-start;height:36px;padding:0 16px;background:var(--surface, #ffffff);border-bottom:1px solid var(--border-color, #e5e7eb);overflow:visible}.phase-tabs-container{display:flex;align-items:center;gap:2px;background:var(--surface-secondary, #f3f4f6);padding:3px;border-radius:8px}.phase-nav-tab{display:flex;align-items:center;gap:6px;padding:5px 14px;border:none;border-radius:6px;background:transparent;color:var(--text-secondary, #6b7280);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}.phase-nav-tab:hover:not(:disabled){color:var(--text-primary, #111827);background:#fff9}.phase-nav-tab.active{background:var(--surface, #ffffff);color:var(--primary-color, #4f46e5);box-shadow:0 1px 3px #0000001a}.phase-nav-tab:disabled{opacity:.4;cursor:not-allowed}.phase-nav-tab svg{width:16px;height:16px;flex-shrink:0}.subtab-nav-row{display:flex;align-items:center;justify-content:flex-start;height:32px;padding:0 12px;background:var(--surface-secondary, #f9fafb);border-bottom:1px solid var(--border-color, #e5e7eb);overflow-x:auto;overflow-y:hidden}.subtab-tabs-container{display:flex;align-items:center;gap:3px}.subtab-nav-tab{display:flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--text-secondary, #6b7280);font-size:11px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}.subtab-nav-tab:hover:not(:disabled){background:var(--surface, #ffffff);color:var(--text-primary, #111827)}.subtab-nav-tab.active{background:var(--surface, #ffffff);color:var(--primary-color, #4f46e5);border-color:var(--primary-color, #4f46e5);box-shadow:0 1px 2px #0000000d}.subtab-nav-tab:disabled{opacity:.4;cursor:not-allowed}.subtab-nav-tab svg{width:14px;height:14px;flex-shrink:0}.phase-subnav{display:flex;align-items:center;justify-content:flex-start;gap:0;height:40px;padding:0 16px;background:var(--surface-secondary, #f9fafb);border-bottom:1px solid var(--border-color, #e5e7eb)}.subnav-tabs{display:flex;align-items:center;gap:4px}.subnav-tab{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text-secondary, #6b7280);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}.subnav-tab:hover:not(:disabled){background:var(--surface, #ffffff);color:var(--text-primary, #111827)}.subnav-tab.active{background:var(--surface, #ffffff);color:var(--primary-color, #4f46e5);border-color:var(--primary-color, #4f46e5);box-shadow:0 1px 2px #0000000d}.subnav-tab:disabled{opacity:.4;cursor:not-allowed}.subnav-tab svg{width:14px;height:14px;flex-shrink:0}.subnav-phases{display:flex;align-items:center;gap:4px;background:var(--surface, #ffffff);padding:4px;border-radius:8px;border:1px solid var(--border-color, #e5e7eb);margin-left:16px}.subnav-phase-tab{display:flex;align-items:center;gap:6px;padding:6px 12px;border:none;border-radius:6px;background:transparent;color:var(--text-secondary, #6b7280);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}.subnav-phase-tab:hover:not(:disabled){color:var(--text-primary, #111827);background:var(--surface-secondary, #f9fafb)}.subnav-phase-tab.active{background:var(--primary-color, #4f46e5);color:#fff}.subnav-phase-tab:disabled{opacity:.4;cursor:not-allowed}.subnav-phase-tab.inactive{opacity:.5}.subnav-phase-tab.inactive:hover:not(:disabled){opacity:.8}.subnav-phase-tab svg{width:14px;height:14px;flex-shrink:0}.subnav-separator{width:1px;height:24px;background:var(--border-color, #e5e7eb);margin:0 12px;flex-shrink:0}.subnav-canvas-toolbar{display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:16px}.subnav-toolbar-group{display:flex;align-items:center;gap:2px;background:var(--surface, #ffffff);padding:2px;border-radius:6px;border:1px solid var(--border-color, #e5e7eb)}.subnav-toolbar-divider{width:1px;height:20px;background:var(--border-color, #e5e7eb);margin:0 4px}.subnav-toolbar-btn{display:flex;align-items:center;gap:4px;padding:4px 8px;border:none;border-radius:4px;background:transparent;color:var(--text-secondary, #6b7280);font-size:11px;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}.subnav-toolbar-btn:hover:not(:disabled){background:var(--surface-secondary, #f9fafb);color:var(--text-primary, #111827)}.subnav-toolbar-btn.active{background:var(--primary-color, #4f46e5);color:#fff}.subnav-toolbar-btn:disabled{opacity:.4;cursor:not-allowed}.subnav-toolbar-btn svg{width:14px;height:14px;flex-shrink:0}@media (max-width: 1200px){.header-phases{gap:2px;padding:3px}.phase-tab{padding:6px 12px}.phase-tab span{display:none}}@media (max-width: 1200px){.subnav-toolbar-btn span{display:none}.subnav-toolbar-btn{padding:4px 6px}}@media (max-width: 900px){.header-left{min-width:auto}.header-logo-text{display:none}.header-project-name{max-width:120px}.header-btn span,.header-mode-toggle span,.subnav-tab span,.subnav-phase-indicator span,.subnav-canvas-toolbar{display:none}}@media (prefers-color-scheme: dark){.hybrid-header{background:#1f2937;border-bottom-color:#374151}.header-logo{color:#818cf8}.header-divider{background:#374151}.header-project-name{color:#f9fafb}.header-project-name:hover{background:#374151}.header-project-input{background:#374151;border-color:#818cf8;color:#f9fafb}.header-project-uuid{background:#374151;color:#9ca3af}.header-save-btn:hover:not(:disabled){background:#374151;color:#818cf8}.header-phases{background:#374151}.phase-tab{color:#9ca3af}.phase-tab:hover{color:#f9fafb;background:#374151cc}.phase-tab.active{background:#1f2937;color:#818cf8;box-shadow:0 1px 3px #0000004d}.header-mode-toggle{background:#374151;border-color:#4b5563;color:#9ca3af}.header-mode-toggle:hover{border-color:#818cf8;color:#818cf8}.header-mode-toggle.hybrid{background:#818cf826;border-color:#818cf8;color:#818cf8}.header-btn{color:#9ca3af}.header-btn:hover:not(:disabled){background:#374151;color:#f9fafb}.phase-subnav{background:#111827;border-bottom-color:#374151}.subnav-tab{color:#9ca3af}.subnav-tab:hover:not(:disabled){background:#1f2937;color:#f9fafb}.subnav-tab.active{background:#1f2937;color:#818cf8;border-color:#818cf8}.subnav-phase-indicator{color:#6b7280}.subnav-toolbar-group{background:#1f2937;border-color:#374151}.subnav-toolbar-divider{background:#374151}.subnav-toolbar-btn{color:#9ca3af}.subnav-toolbar-btn:hover:not(:disabled){background:#374151;color:#f9fafb}.subnav-toolbar-btn.active{background:#818cf8;color:#fff}.subtab-bar{background:#1f2937;border-bottom-color:#374151}.subtab-phase-icon{color:#818cf8}.subtab-phase-name{color:#f9fafb}.subtab-divider{background:#374151}.subtab-btn{color:#9ca3af}.subtab-btn:hover:not(:disabled){color:#f9fafb}.subtab-btn.active{color:#818cf8}.subtab-btn.active:after{background:#818cf8}}.hybrid-layout{display:grid;grid-template-rows:44px 44px 1fr 100px;grid-template-columns:64px 280px minmax(400px,1fr);grid-template-areas:"rail header   header" "rail subtabs  subtabs" "rail panel    canvas" "rail panel    timeline";height:100vh;overflow:hidden;background:var(--background, #f3f4f6)}.hybrid-layout>.phase-rail{grid-area:rail}.hybrid-layout>.hybrid-header{grid-area:header}.hybrid-layout>.subtab-bar{grid-area:subtabs}.hybrid-layout>.phase-subnav-wrapper{grid-area:subtabs;display:contents}.hybrid-layout>.phase-subnav-wrapper>.phase-nav-row,.hybrid-layout>.phase-nav-row{display:none}.hybrid-layout>.phase-subnav-wrapper>.subtab-nav-row,.hybrid-layout>.subtab-nav-row{grid-area:subtabs}.hybrid-layout>.phase-subnav{grid-area:subtabs}.hybrid-layout>.context-panel{grid-area:panel}.hybrid-canvas-area{grid-area:canvas;display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;overflow:hidden;background:var(--surface-secondary, #f9fafb)}.hybrid-layout>.scene-timeline{grid-area:timeline}.hybrid-canvas-wrapper{flex:1;display:flex;flex-direction:column;min-height:0;height:100%;position:relative}.hybrid-canvas-toolbar{flex-shrink:0}.hybrid-canvas-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;padding:8px;overflow:hidden;height:100%}@media (max-width: 900px){.hybrid-layout{grid-template-rows:40px 40px 1fr auto 80px;grid-template-columns:1fr;grid-template-areas:"header" "subtabs" "canvas" "panel" "timeline"}.hybrid-layout>.phase-rail{display:none}.hybrid-canvas-area{grid-area:canvas}.hybrid-layout>.context-panel{grid-area:panel;max-height:40vh;border-right:none!important;border-top:1px solid var(--border-color, #e5e7eb)}.hybrid-layout>.scene-timeline{grid-area:timeline}.subtab-bar{padding:0 12px}}.hybrid-layout.fullscreen-recording{grid-template-rows:0 0 1fr 0;grid-template-columns:0 0 1fr;grid-template-areas:"rail header   header" "rail subtabs  subtabs" "rail panel    canvas" "rail panel    timeline"}.hybrid-layout.fullscreen-recording .hybrid-header,.hybrid-layout.fullscreen-recording .phase-subnav,.hybrid-layout.fullscreen-recording .subtab-bar,.hybrid-layout.fullscreen-recording .scene-timeline,.hybrid-layout.fullscreen-recording .context-panel,.hybrid-layout.fullscreen-recording .phase-rail{display:none}.hybrid-layout.fullscreen-recording .hybrid-canvas-area{background:#000}.context-panel,.hybrid-canvas-area{transition:all .2s ease-out}.context-panel{width:100%;height:100%;flex-shrink:0;display:flex;flex-direction:column;background:var(--surface, #ffffff);border-right:1px solid var(--border-color, #e5e7eb);position:relative;transition:width .2s ease-out;overflow:hidden}.context-panel.collapsed{width:40px}.context-panel-toggle{position:absolute;top:8px;right:8px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-color, #e5e7eb);border-radius:4px;background:var(--surface, #ffffff);color:var(--text-secondary, #6b7280);cursor:pointer;z-index:10;transition:all .15s}.context-panel-toggle:hover{background:var(--surface-secondary, #f9fafb);color:var(--text-primary, #111827);border-color:var(--primary-color, #4f46e5)}.context-panel-toggle svg{transition:transform .2s ease-out}.context-panel.collapsed .context-panel-toggle{right:8px;top:50%;transform:translateY(-50%)}.context-panel-content{flex:1;display:flex;flex-direction:column;min-height:0;padding-top:36px}.context-panel-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px}.context-panel-scroll::-webkit-scrollbar{width:6px}.context-panel-scroll::-webkit-scrollbar-track{background:transparent}.context-panel-scroll::-webkit-scrollbar-thumb{background:var(--border-color, #e5e7eb);border-radius:3px}.context-panel-scroll::-webkit-scrollbar-thumb:hover{background:var(--text-secondary, #6b7280)}.context-panel-collapsed-label{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);padding:16px 0}.collapsed-phase{font-size:12px;font-weight:600;color:var(--primary-color, #4f46e5);text-transform:uppercase;letter-spacing:1px}.collapsed-subtab{font-size:11px;color:var(--text-secondary, #6b7280);text-transform:capitalize}.context-section{margin-bottom:12px}.context-section-header{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:11px;font-weight:600;color:var(--text-secondary, #6b7280);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border-color, #e5e7eb);margin-bottom:8px}.context-section-header svg{width:14px;height:14px;opacity:.7}.context-section-content{padding:0}@media (prefers-color-scheme: dark){.context-panel{background:#1f2937;border-right-color:#374151}.context-panel-toggle{background:#1f2937;border-color:#374151;color:#9ca3af}.context-panel-toggle:hover{background:#374151;color:#f9fafb;border-color:#818cf8}.context-panel-scroll::-webkit-scrollbar-thumb{background:#374151}.context-panel-scroll::-webkit-scrollbar-thumb:hover{background:#4b5563}.collapsed-phase{color:#818cf8}.collapsed-subtab{color:#6b7280}.context-section-header{color:#9ca3af;border-bottom-color:#374151}}@media (max-width: 1200px){.context-panel{width:312px}}@media (max-width: 900px){.context-panel{width:100%;max-height:40vh;border-right:none;border-top:1px solid var(--border-color, #e5e7eb)}.context-panel.collapsed{width:100%;height:40px;max-height:40px}.context-panel-toggle{top:8px;right:16px}.context-panel-toggle svg{transform:rotate(90deg)}.context-panel.collapsed .context-panel-toggle svg{transform:rotate(-90deg)}.context-panel-collapsed-label{writing-mode:horizontal-tb;transform:none;flex-direction:row}}.scene-timeline{display:flex;align-items:center;height:100px;padding:8px 16px 16px;background:var(--surface, #ffffff);border-top:1px solid var(--border-color, #e5e7eb);gap:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}.timeline-playback{display:flex;align-items:center;gap:10px;flex-shrink:0;padding-right:16px;border-right:1px solid var(--border-color, #e5e7eb)}.timeline-play-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:4px;background:transparent;color:var(--text-primary, #374151);cursor:pointer;transition:all .15s}.timeline-play-btn:hover:not(:disabled){background:var(--surface-secondary, #f3f4f6);color:var(--primary-color, #4f46e5)}.timeline-play-btn:disabled{opacity:.4;cursor:not-allowed}.timeline-timer{display:flex;align-items:center;gap:4px;font-size:13px;font-family:SF Mono,Menlo,Consolas,monospace;color:var(--text-secondary, #6b7280);white-space:nowrap}.timer-separator{opacity:.5}.timeline-playback-slot{display:flex;align-items:center}.timeline-scenes-container{flex:1;overflow-x:auto;overflow-y:hidden;min-width:0;scrollbar-width:thin;scrollbar-color:var(--border-color, #e5e7eb) transparent;position:relative}.timeline-scenes-container::-webkit-scrollbar{height:5px}.timeline-scenes-container::-webkit-scrollbar-track{background:transparent}.timeline-scenes-container::-webkit-scrollbar-thumb{background:var(--border-color, #e5e7eb);border-radius:3px}.timeline-scenes-container::-webkit-scrollbar-thumb:hover{background:var(--primary-color, #4f46e5)}.timeline-scenes-container:before,.timeline-scenes-container:after{content:"";position:absolute;top:0;bottom:0;width:30px;pointer-events:none;z-index:2;opacity:0;transition:opacity .2s}.timeline-scenes-container:before{left:0;background:linear-gradient(to right,var(--surface, #ffffff),transparent)}.timeline-scenes-container:after{right:0;background:linear-gradient(to left,var(--surface, #ffffff),transparent)}.timeline-scenes-container.has-scroll-left:before,.timeline-scenes-container.has-scroll-right:after{opacity:1}.timeline-scenes{display:flex;align-items:flex-start;gap:12px;padding:4px 8px;min-width:max-content}.timeline-empty{display:flex;align-items:center;justify-content:center;padding:16px 24px;color:var(--text-secondary, #6b7280);font-size:13px;font-style:italic}.scene-card{display:flex;flex-direction:column;gap:6px;flex-shrink:0}.scene-thumbnail{width:100px;height:56px;border:2px dashed transparent;border-radius:6px;background:var(--surface, #ffffff);box-shadow:0 1px 3px #00000014;overflow:hidden;cursor:pointer;transition:all .15s ease;position:relative;display:flex;align-items:center;justify-content:center}.scene-thumbnail:hover:not(.active){border-color:var(--border-color, #d1d5db);box-shadow:0 2px 6px #0000001a}.scene-thumbnail.active{border-color:var(--primary-color, #4f46e5);border-style:dashed;box-shadow:0 2px 8px #4f46e533}.scene-thumbnail.intro{background:linear-gradient(135deg,#10b9810d,#10b9811a)}.scene-thumbnail.intro.active{border-color:var(--success-color, #10b981)}.scene-thumbnail.outro{background:linear-gradient(135deg,#f59e0b0d,#f59e0b1a)}.scene-thumbnail.outro.active{border-color:var(--warning-color, #f59e0b)}.scene-preview-content{padding:8px;font-size:10px;line-height:1.3;color:var(--text-secondary, #6b7280);text-align:center;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;word-break:break-word}.scene-playing-indicator{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--primary-color, #4f46e5);animation:scene-progress 2s linear infinite}@keyframes scene-progress{0%{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}.scene-label{display:flex;justify-content:space-between;align-items:center;padding:0 2px;gap:8px}.scene-numbered-label{font-size:11px;font-weight:500;color:var(--text-secondary, #6b7280);white-space:nowrap}.scene-duration{font-size:10px;font-family:SF Mono,Menlo,monospace;color:var(--text-tertiary, #9ca3af)}.add-scene-btn{width:50px;height:56px;border:2px dashed var(--border-color, #d1d5db);border-radius:6px;background:transparent;color:var(--text-tertiary, #9ca3af);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;flex-shrink:0}.add-scene-btn:hover:not(:disabled){border-color:var(--primary-color, #4f46e5);color:var(--primary-color, #4f46e5);background:#4f46e50d}.add-scene-btn:disabled{opacity:.4;cursor:not-allowed}@media (prefers-color-scheme: dark){.scene-timeline{background:#1f2937;border-top-color:#374151}.timeline-playback{border-right-color:#374151}.timeline-play-btn{color:#d1d5db}.timeline-play-btn:hover:not(:disabled){background:#374151;color:#818cf8}.timeline-timer{color:#9ca3af}.timeline-scenes-container::-webkit-scrollbar-thumb{background:#4b5563}.scene-thumbnail{background:#374151;box-shadow:0 1px 3px #0003}.scene-thumbnail:hover:not(.active){border-color:#4b5563}.scene-thumbnail.active{border-color:#818cf8;box-shadow:0 2px 8px #818cf84d}.scene-preview-content{color:#9ca3af}.scene-numbered-label{color:#d1d5db}.scene-duration{color:#6b7280}.add-scene-btn{border-color:#4b5563;color:#6b7280}.add-scene-btn:hover:not(:disabled){border-color:#818cf8;color:#818cf8;background:#818cf81a}.timeline-empty{color:#6b7280}}@media (max-width: 900px){.scene-timeline{height:90px;padding:6px 12px;gap:12px}.timeline-playback{padding-right:12px;gap:8px}.timeline-timer{font-size:12px}.scene-thumbnail{width:80px;height:45px}.scene-preview-content{font-size:9px;padding:6px}.scene-numbered-label{font-size:10px}.scene-duration{font-size:9px}.add-scene-btn{width:40px;height:45px}}@media (max-width: 600px){.scene-timeline{height:80px;padding:4px 8px}.timeline-playback{flex-direction:column;gap:4px;padding-right:8px}.timeline-timer{font-size:10px}.scene-thumbnail{width:70px;height:40px}.scene-label{flex-direction:column;align-items:flex-start;gap:2px}}.phase-content{display:flex;flex-direction:column;gap:12px;height:100%}.phase-divider{height:1px;background:var(--border-color, #e5e7eb);margin:8px 0}.format-phase .format-phase-header{padding:0 0 8px;border-bottom:1px solid var(--border-color, #e5e7eb);margin-bottom:8px}.format-phase .format-phase-header h3{font-size:14px;font-weight:600;color:var(--text-primary, #111827);margin:0 0 4px}.format-phase .format-phase-header p{font-size:12px;color:var(--text-secondary, #6b7280);margin:0;line-height:1.4}.preview-playback-info{padding:16px;text-align:center}.playback-status{display:flex;flex-direction:column;align-items:center;gap:12px}.status-indicator{display:inline-flex;align-items:center;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.status-indicator.stopped{background:var(--surface-secondary, #f9fafb);color:var(--text-secondary, #6b7280)}.status-indicator.playing{background:#10b9811a;color:var(--success-color, #10b981);animation:pulse 2s ease-in-out infinite}.status-indicator.paused{background:#f59e0b1a;color:var(--warning-color, #f59e0b)}.playback-hint{font-size:12px;color:var(--text-secondary, #6b7280);max-width:200px;line-height:1.5}.edit-mode-controls{padding:8px}.edit-section-title{font-size:12px;font-weight:600;color:var(--text-primary, #111827);margin:0 0 4px}.edit-hint{font-size:11px;color:var(--text-secondary, #6b7280);margin:0 0 12px;line-height:1.4}.edit-toggles{display:flex;flex-direction:column;gap:8px}.edit-toggle{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface-secondary, #f9fafb);border-radius:6px;cursor:pointer;transition:background .15s}.edit-toggle:hover{background:var(--surface, #ffffff);box-shadow:0 1px 3px #0000001a}.edit-toggle input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary-color, #4f46e5);cursor:pointer}.edit-toggle input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}.toggle-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text-primary, #111827)}.toggle-label svg{opacity:.7}.format-section,.projects-section{padding:8px}.projects-subsection{margin-bottom:16px}.subsection-title{font-size:11px;font-weight:600;color:var(--text-secondary, #6b7280);text-transform:uppercase;letter-spacing:.5px;margin:0 0 8px}.auth-hint{font-size:11px;color:var(--text-secondary, #6b7280);font-style:italic;margin:0 0 12px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media (prefers-color-scheme: dark){.phase-divider{background:#374151}.status-indicator.stopped{background:#374151;color:#9ca3af}.status-indicator.playing{background:#10b98133}.status-indicator.paused{background:#f59e0b33}.playback-hint{color:#9ca3af}.edit-section-title{color:#f9fafb}.edit-hint{color:#9ca3af}.edit-toggle{background:#374151}.edit-toggle:hover{background:#4b5563}.toggle-label{color:#f9fafb}.subsection-title{color:#9ca3af}.auth-hint{color:#6b7280}}:root{--primary-color: #4f46e5;--primary-hover: #4338ca;--secondary-color: #6b7280;--success-color: #10b981;--error-color: #ef4444;--warning-color: #f59e0b;--info-color: #3b82f6;--background: #f3f4f6;--surface: #ffffff;--surface-secondary: #f9fafb;--text-primary: #111827;--text-secondary: #6b7280;--border-color: #e5e7eb;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--header-height: 56px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--background);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased}.app{height:100vh;display:flex;flex-direction:column;overflow:hidden}.app-header{height:var(--header-height);background:var(--surface);border-bottom:1px solid var(--border-color);padding:0 1rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;box-shadow:var(--shadow-sm)}.header-left{display:flex;align-items:center;gap:1rem}.app-header h1{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:700;color:var(--primary-color)}.app-header .subtitle{color:var(--text-secondary);font-size:.75rem}.header-divider{width:1px;height:24px;background:var(--border-color);margin:0 .5rem}.header-project-title{display:flex;align-items:center;gap:.5rem}.header-project-name{font-size:.875rem;font-weight:500;color:var(--text);cursor:pointer;padding:.25rem .5rem;border-radius:var(--radius-sm);transition:background .2s,color .2s;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-project-name:hover{background:#4f46e51a;color:var(--primary-color)}.header-project-name-input{background:var(--surface);border:2px solid var(--primary-color);border-radius:var(--radius-sm);padding:.25rem .5rem;font-size:.875rem;font-weight:500;font-family:inherit;color:var(--text);min-width:150px;max-width:200px}.header-project-name-input:focus{outline:none;box-shadow:0 0 0 3px #4f46e51a}.header-save-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.header-save-btn:hover:not(:disabled){background:var(--primary-color);border-color:var(--primary-color);color:#fff}.header-save-btn:disabled{opacity:.5;cursor:not-allowed}.project-name-display{cursor:pointer;padding:.2rem .5rem;border-radius:var(--radius-sm);transition:background .2s}.project-name-display:hover{background:#4f46e51a;text-decoration:underline}.project-name-input{background:var(--surface);border:2px solid var(--primary-color);border-radius:var(--radius-sm);padding:.3rem .6rem;font-size:1.2rem;font-weight:600;font-family:inherit;color:var(--text);min-width:250px;max-width:400px}.project-name-input:focus{outline:none;box-shadow:0 0 0 3px #4f46e51a}.header-actions{display:flex;gap:.5rem}.header-btn{display:flex;align-items:center;gap:.375rem;padding:.5rem .75rem;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s}.header-btn:hover:not(:disabled){background:var(--surface);border-color:var(--primary-color);color:var(--primary-color)}.header-btn:disabled{opacity:.5;cursor:not-allowed}.admin-link{text-decoration:none;background:linear-gradient(135deg,#9f7aea,#805ad5);border:none;color:#fff}.admin-link:hover{background:linear-gradient(135deg,#b794f4,#9f7aea);border-color:transparent;color:#fff}.app-main{flex:1;display:flex;gap:1rem;padding:1rem;min-height:0;overflow:hidden}.panel{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:column;overflow:hidden}.panel-left{width:320px;flex-shrink:0}.panel-center{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}.panel-right{width:300px;flex-shrink:0}.panel-section{padding:.5rem .6rem;border-bottom:1px solid var(--border-color)}.panel-section:last-child{border-bottom:none}.panel-section.flex-grow{flex:1;min-height:0;display:flex;flex-direction:column}.panel-left .panel-section{padding:.4rem .6rem}.panel-right .panel-section{padding:.35rem .6rem}.tabbed-panel{display:flex;flex-direction:column;height:100%;overflow:hidden}.tab-bar{display:flex;background:var(--surface-secondary);border-bottom:1px solid var(--border-color);flex-shrink:0}.tab-button{flex:1;display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.6rem .5rem;background:transparent;border:none;border-bottom:2px solid transparent;font-size:.7rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .2s}.tab-button:hover{color:var(--text-primary);background:#00000005}.tab-button.active{color:var(--primary-color);border-bottom-color:var(--primary-color);background:var(--surface)}.tab-button svg{flex-shrink:0}.tab-content{flex:1;overflow-y:auto;overflow-x:hidden}.tab-panel-content{padding:.75rem}.tab-panel-content.tab-panel-fill{height:100%;display:flex;flex-direction:column}.tab-divider{height:1px;background:var(--border-color);margin:.5rem 0}.create-tab-content{display:flex;flex-direction:column;height:100%}.sub-tab-bar{display:flex;background:var(--surface-secondary);border-bottom:1px solid var(--border-color);padding:.25rem .5rem;gap:.25rem}.sub-tab-button{display:flex;align-items:center;gap:.35rem;padding:.4rem .75rem;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.sub-tab-button:hover{color:var(--text-primary);background:#00000008}.sub-tab-button.active{color:var(--primary-color);background:var(--surface);border-color:var(--primary-color)}.sub-tab-icon{font-size:.9rem}.sub-tab-label{font-size:.75rem}.sub-tab-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:.75rem}.settings-panel{display:flex;flex-direction:column;height:100%}.settings-sub-tabs{display:flex;background:var(--background);border-radius:var(--radius-md);padding:2px;margin-bottom:.75rem}.sub-tab-button{flex:1;padding:.4rem .5rem;background:transparent;border:none;border-radius:calc(var(--radius-md) - 2px);font-size:.7rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .2s}.sub-tab-button:hover{color:var(--text-primary)}.sub-tab-button.active{background:var(--surface);color:var(--primary-color);box-shadow:var(--shadow-sm)}.settings-sub-content{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;min-height:0}.project-tab-content{display:flex;flex-direction:column;gap:16px;padding:.5rem}.projects-tab-content{display:flex;flex-direction:column;gap:.75rem;padding:.5rem}.project-actions-bar{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:var(--surface);border-radius:var(--radius-md);border:1px solid var(--border-color)}.project-action-btn{display:flex;align-items:center;gap:.35rem;padding:.4rem .6rem;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.7rem;font-weight:500;color:var(--text-primary);cursor:pointer;transition:all .15s ease}.project-action-btn:hover{background:var(--background);border-color:var(--primary-color);color:var(--primary-color)}.project-action-btn:disabled{opacity:.5;cursor:not-allowed}.project-action-btn:disabled:hover{background:transparent;border-color:var(--border-color);color:var(--text-primary)}.project-action-btn.primary{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.project-action-btn.primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}.project-action-btn.primary:disabled{background:var(--primary-color);opacity:.5}.project-action-btn svg{width:14px;height:14px;flex-shrink:0}.project-actions-divider{width:1px;height:24px;background:var(--border-color);margin:0 .25rem}.projects-sub-tabs{display:flex;background:var(--background);border-radius:var(--radius-sm);padding:2px}.projects-sub-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.35rem .5rem;background:transparent;border:none;border-radius:calc(var(--radius-sm) - 2px);font-size:.65rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.projects-sub-tab:hover{color:var(--text-primary);background:rgba(var(--primary-rgb),.05)}.projects-sub-tab.active{background:var(--surface);color:var(--primary-color);box-shadow:var(--shadow-sm)}.projects-sub-tab svg{width:12px;height:12px}.projects-content{flex:1;overflow-y:auto;min-height:200px;max-height:400px}.projects-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem;color:var(--text-secondary);text-align:center}.projects-placeholder svg{width:32px;height:32px;opacity:.5}.projects-placeholder p{font-size:.8rem;font-weight:500;margin:0}.projects-placeholder span{font-size:.7rem;opacity:.7}.info-tab-content,.preferences-content{padding:.5rem}.preferences-placeholder{color:var(--text-secondary);font-size:.75rem;text-align:center;padding:1rem}.lip-sync-settings{padding:.5rem 0;border-bottom:1px solid var(--border-color);margin-bottom:.75rem}.lip-sync-settings h4{font-size:.75rem;font-weight:600;margin-bottom:.5rem;color:var(--text-primary)}.lip-sync-settings .service-status-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.lip-sync-settings .status-indicator{display:flex;align-items:center;gap:.4rem;font-size:.7rem}.lip-sync-settings .status-dot{width:8px;height:8px;border-radius:50%;background:var(--error-color)}.lip-sync-settings .status-indicator.online .status-dot{background:var(--success-color)}.lip-sync-settings .refresh-btn{padding:.25rem;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary)}.lip-sync-settings .refresh-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.lip-sync-settings .service-error{color:var(--error-color);font-size:.65rem;margin-bottom:.5rem}.lip-sync-settings .setting-row{margin-bottom:.5rem}.lip-sync-settings .setting-row label{display:flex;align-items:center;gap:.5rem;font-size:.75rem}.lip-sync-settings .toggle-label{position:relative;display:flex;align-items:center;gap:.5rem;cursor:pointer}.lip-sync-settings .toggle-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary-color)}.lip-sync-settings select{width:100%;padding:.4rem .5rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.75rem;background:var(--surface);margin-top:.25rem}.lip-sync-settings .hint-text{font-size:.65rem;color:var(--text-secondary);margin-top:.5rem;line-height:1.4}.lip-sync-settings .hint-text code{display:block;margin-top:.25rem;padding:.25rem;background:var(--background);border-radius:var(--radius-sm);font-size:.6rem;overflow-x:auto}.logo-settings{padding:.5rem 0}.logo-settings h4{font-size:.75rem;font-weight:600;margin-bottom:.5rem;color:var(--text-primary)}.logo-upload-section{margin-bottom:.75rem}.logo-upload-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.75rem;background:var(--background);border:2px dashed var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:.75rem;cursor:pointer;transition:all .2s}.logo-upload-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.logo-preview-container{position:relative;display:inline-block;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:.5rem}.logo-preview{max-width:100px;max-height:60px;display:block}.logo-remove-btn{position:absolute;top:-6px;right:-6px;width:20px;height:20px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--error-color);border:none;border-radius:50%;color:#fff;cursor:pointer;transition:transform .2s}.logo-remove-btn:hover{transform:scale(1.1)}.logo-setting-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem 0;font-size:.7rem}.logo-position-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}.position-btn{padding:.25rem .4rem;background:var(--background);border:1px solid var(--border-color);font-size:.6rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .2s}.position-btn:first-child{border-radius:var(--radius-sm) 0 0 0}.position-btn:nth-child(2){border-radius:0 var(--radius-sm) 0 0}.position-btn:nth-child(3){border-radius:0 0 0 var(--radius-sm)}.position-btn:last-child{border-radius:0 0 var(--radius-sm) 0}.position-btn:hover{background:var(--surface)}.position-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.logo-opacity-slider{flex:1;max-width:80px}.opacity-value{min-width:32px;text-align:right;color:var(--text-secondary)}.logo-overlay{transition:opacity .2s}.background-music-settings{padding:.5rem 0;margin-top:.75rem;border-top:1px solid var(--border-color)}.background-music-settings h4{font-size:.75rem;font-weight:600;margin-bottom:.5rem;color:var(--text-primary)}.music-setting-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem 0;font-size:.7rem}.music-track-select{flex:1;max-width:140px;padding:.3rem .4rem;font-size:.65rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--surface)}.music-upload-row{display:flex;align-items:center;gap:.5rem;padding:.35rem 0}.music-upload-btn{display:flex;align-items:center;gap:.35rem;padding:.35rem .5rem;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.65rem;color:var(--text-secondary);cursor:pointer;transition:all .2s}.music-upload-btn:hover:not(:disabled){border-color:var(--primary-color);color:var(--primary-color)}.music-upload-btn:disabled{opacity:.5;cursor:not-allowed}.music-remove-custom-btn{padding:.3rem;background:transparent;border:none;color:var(--error-color);cursor:pointer;display:flex;align-items:center;justify-content:center}.music-volume-slider{flex:1;max-width:80px}.volume-value{min-width:32px;text-align:right;color:var(--text-secondary);font-size:.65rem}.music-playback-controls{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;margin-top:.25rem}.music-control-btn{width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all .2s}.music-control-btn:hover{background:var(--surface);border-color:var(--primary-color);color:var(--primary-color)}.music-control-btn.playing{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.music-track-name{font-size:.65rem;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.music-error{display:flex;align-items:center;gap:.5rem;padding:.5rem;margin-top:.5rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:4px;font-size:.65rem;color:#ef4444}.music-error svg{flex-shrink:0}.music-info-note{display:flex;flex-direction:column;gap:.15rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border-color)}.music-info-note small{font-size:.6rem;color:var(--text-secondary);opacity:.8}.canvas-header{background:var(--surface);border-bottom:1px solid var(--border-color);padding:.5rem 1rem;display:flex;align-items:center;justify-content:center}.canvas-animation-name{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;color:var(--text-primary);background:#4f46e51a;padding:.4rem .75rem;border-radius:var(--radius-md);border:1px solid rgba(79,70,229,.2)}.canvas-animation-name svg{flex-shrink:0;color:var(--primary-color)}.canvas-project-name{cursor:pointer;padding:.1rem .3rem;border-radius:var(--radius-sm);transition:background .15s ease;max-width:400px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-project-name:hover{background:#4f46e526}.canvas-project-name-input{font-size:.85rem;font-weight:600;color:var(--text-primary);background:#fff;border:1px solid var(--primary-color);border-radius:var(--radius-sm);padding:.1rem .4rem;outline:none;min-width:200px;max-width:400px}.canvas-project-name-input:focus{box-shadow:0 0 0 2px #4f46e533}.project-uuid-badge{display:inline-flex;align-items:center;padding:.15rem .4rem;margin-left:.4rem;background:#4f46e51a;border:1px solid rgba(79,70,229,.25);border-radius:var(--radius-sm);font-size:.65rem;font-weight:600;font-family:SF Mono,Monaco,Consolas,monospace;color:var(--primary-color);letter-spacing:.03em;cursor:help;transition:all .15s ease}.project-uuid-badge:hover{background:#4f46e526;border-color:#4f46e566}.save-project-btn{display:flex;align-items:center;justify-content:center;padding:6px 10px;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);transition:all .15s ease;margin-left:8px}.save-project-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}.save-project-btn:disabled{opacity:.4;cursor:not-allowed}.save-project-btn svg{flex-shrink:0}.canvas-wrapper{flex:1;display:flex;align-items:center;justify-content:center;padding:.5rem;background:var(--surface-secondary);min-height:0;overflow:hidden;position:relative}.canvas-wrapper:has(.canvas-toolbar){flex-direction:column;align-items:center;justify-content:flex-start;padding:0;gap:0}.canvas-wrapper:has(.browser-canvas){align-items:flex-start;padding-top:0}.canvas-wrapper:has(.browser-window){flex-direction:column;align-items:center;justify-content:flex-start;padding:0;gap:0}.canvas-wrapper>.browser-window{width:100%;height:100%;border-radius:0;border:none}.browser-tab-container{flex:1;display:flex;flex-direction:column;width:100%;min-width:0;min-height:0;position:relative;overflow:hidden}.browser-window-content-wrapper{aspect-ratio:var(--canvas-aspect-ratio, 16 / 9);width:100%;max-width:95%;max-height:calc(100% - 16px);height:auto;margin:8px auto;min-width:0;min-height:0;position:relative;overflow:hidden;border:2px solid var(--border-color);border-radius:8px;background:var(--surface, #ffffff)}.browser-tab-avatar-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:200;display:flex;flex-direction:column;pointer-events:none}.browser-tab-avatar-toolbar-spacer{height:48px;flex-shrink:0}.browser-tab-avatar-content-area{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.browser-tab-avatar-browser-toolbar-spacer{height:48px;flex-shrink:0}.browser-tab-avatar-content-inner{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;background:var(--surface-secondary, #f3f4f6);overflow:hidden}.browser-tab-avatar-inner{position:relative;aspect-ratio:var(--canvas-aspect-ratio, 16 / 9);max-width:95%;max-height:calc(100% - 16px);width:100%;margin:8px auto}.doodle-canvas-container{border:2px solid var(--border-color);aspect-ratio:var(--canvas-aspect-ratio, 16 / 9);flex:1;max-width:95%;max-height:calc(100% - 16px);margin:8px auto;min-width:0;min-height:0;position:relative;box-shadow:0 4px 20px #00000026}.doodle-canvas-container:before{content:"";position:absolute;top:-3px;left:-3px;right:-3px;bottom:-3px;border:2px dashed rgba(239,68,68,.5);border-radius:10px;pointer-events:none;z-index:1000;opacity:0;transition:opacity .2s ease}.doodle-canvas-container:hover:before,.doodle-canvas-container.show-boundary:before{opacity:1}.ai-settings-content{padding:.5rem;display:flex!important;flex-direction:column!important;flex:1!important;overflow-y:auto!important;overflow-x:hidden!important}.ai-settings{width:100%!important;display:block!important;visibility:visible!important}.ai-settings h3{font-size:.875rem;font-weight:600;margin-bottom:.75rem;color:var(--text-primary)}.warning-banner,.info-banner{display:flex;align-items:flex-start;gap:.5rem;padding:.5rem;border-radius:var(--radius-md);margin-bottom:.75rem;font-size:.7rem}.warning-banner{background:#fef3c7;border:1px solid #fcd34d;color:#92400e}.info-banner{background:#dbeafe;border:1px solid #93c5fd;color:#1e40af}.warning-banner svg,.info-banner svg{flex-shrink:0;margin-top:1px}.env-hint{display:flex;align-items:center;gap:.25rem;color:var(--success-color);font-size:.7rem}.setting-group{margin-bottom:.75rem;display:block!important;visibility:visible!important}.setting-group label{display:block;font-size:.75rem;font-weight:500;color:var(--text-primary);margin-bottom:.25rem}.setting-group select,.setting-group input[type=password],.setting-group input[type=text]{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:.8rem;transition:border-color .2s,box-shadow .2s}.setting-group select:focus,.setting-group input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #4f46e51a}.setting-group input[readonly]{background:var(--background);cursor:not-allowed}.setting-group .hint{display:block;font-size:.65rem;color:var(--text-secondary);margin-top:.25rem}.setting-group .hint a{color:var(--primary-color);text-decoration:none}.model-warning{display:flex;align-items:flex-start;gap:.35rem;margin-top:.35rem;padding:.35rem .5rem;background:#ffc10726;border:1px solid rgba(255,193,7,.3);border-radius:var(--radius-sm);font-size:.65rem;color:#b88a00;line-height:1.3}.model-warning svg{flex-shrink:0;margin-top:1px}.test-button{padding:.375rem .75rem;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:.75rem;cursor:pointer;transition:all .2s}.test-button:hover:not(:disabled){background:var(--background)}.test-button:disabled{opacity:.5;cursor:not-allowed}.status-message{display:flex;align-items:center;gap:.5rem;padding:.375rem .5rem;border-radius:var(--radius-md);font-size:.7rem;margin-top:.5rem}.status-message.success{background:#d1fae5;color:#065f46}.status-message.error{background:#fee2e2;color:#991b1b}.config-status{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:var(--radius-md);font-size:.75rem;font-weight:500}.config-status.configured{background:#d1fae5;color:#065f46}.config-status.not-configured{background:#fef3c7;color:#92400e}.prompt-input h3{font-size:.875rem;font-weight:600;margin-bottom:.75rem}.prompt-input form{display:flex;flex-direction:column;gap:.5rem}.prompt-input textarea{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:.8rem;resize:vertical;min-height:80px;max-height:150px;font-family:inherit}.prompt-input textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #4f46e51a}.generate-button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1rem;background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-md);font-size:.8rem;font-weight:600;cursor:pointer;transition:background .2s}.generate-button:hover:not(:disabled){background:var(--primary-hover)}.generate-button:disabled{opacity:.5;cursor:not-allowed}.spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.example-prompts{margin-top:.5rem}.example-prompts .label{display:block;font-size:.65rem;color:var(--text-secondary);margin-bottom:.375rem}.example-prompts .examples{display:flex;flex-wrap:wrap;gap:.375rem}.example-chip{padding:.25rem .5rem;background:var(--background);border:1px solid var(--border-color);border-radius:999px;font-size:.65rem;cursor:pointer;transition:all .2s}.example-chip:hover:not(:disabled){background:var(--surface);border-color:var(--primary-color);color:var(--primary-color)}.ai-settings-summary{margin:.75rem 0;padding:.625rem;background:linear-gradient(135deg,#4f46e50d,#9333ea0d);border-radius:var(--radius-md);border:1px solid var(--border-color)}.ai-settings-summary .summary-header{display:flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.ai-settings-summary .summary-header svg{color:var(--primary-color)}.ai-settings-summary .ai-settings-link{margin-left:auto;background:none;border:none;font-size:.7rem;color:var(--primary-color);cursor:pointer;padding:.25rem .5rem;border-radius:var(--radius-sm);transition:background .15s}.ai-settings-summary .ai-settings-link:hover{background:#4f46e51a;text-decoration:underline}.ai-settings-summary .summary-items{display:flex;flex-wrap:wrap;gap:.75rem;font-size:.7rem;color:var(--text-secondary)}.ai-settings-summary .summary-item{display:flex;align-items:center;gap:.25rem}.ai-settings-summary .summary-item strong{color:var(--text-primary);font-weight:500}.diagram-mode-section{margin:.5rem 0;padding:.5rem;background:var(--surface-secondary);border-radius:var(--radius-md);border:1px solid var(--border-color)}.diagram-mode-header{display:flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.diagram-mode-header svg{color:var(--primary-color)}.diagram-mode-options{display:flex;flex-direction:column;gap:.25rem}.diagram-option{display:flex;flex-direction:row;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}.diagram-option:hover{border-color:var(--primary-color)}.diagram-option.selected{border-color:var(--primary-color);background:#4f46e50d}.diagram-option input[type=radio]{display:none}.diagram-option .option-label{font-size:.7rem;font-weight:600;color:var(--text-primary)}.diagram-option .option-desc{font-size:.6rem;color:var(--text-secondary);text-align:center}.diagram-option.selected .option-label{color:var(--primary-color)}.mermaid-input-section{margin-top:.5rem}.mermaid-input-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}.mermaid-input-header label{font-size:.7rem;font-weight:500;color:var(--text-secondary)}.mermaid-example-btn{padding:.2rem .5rem;background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.6rem;cursor:pointer;transition:background .2s}.mermaid-example-btn:hover:not(:disabled){background:var(--primary-hover)}.mermaid-code-input{width:100%;padding:.5rem;background:#1e1e1e;color:#d4d4d4;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.7rem;font-family:Consolas,Monaco,Courier New,monospace;resize:vertical;min-height:100px}.mermaid-code-input:focus{outline:none;border-color:var(--primary-color)}.mermaid-code-input.has-error{border-color:var(--error-color)}.mermaid-error{display:flex;align-items:flex-start;gap:.25rem;margin-top:.25rem;padding:.25rem .5rem;background:#ef44441a;border-radius:var(--radius-sm);color:var(--error-color);font-size:.65rem}.mermaid-error svg{flex-shrink:0;margin-top:1px}.mermaid-help{margin-top:.25rem}.mermaid-help small{display:block;font-size:.6rem;color:var(--text-secondary)}.mermaid-help a{color:var(--primary-color);text-decoration:none;margin-left:.25rem}.mermaid-help a:hover{text-decoration:underline}.diagram-animation-toggle{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border-color)}.diagram-animation-toggle .toggle-label{position:relative;font-size:.7rem;color:var(--text-secondary)}.playback-controls{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--surface);border-top:1px solid var(--border-color);flex-shrink:0;min-height:52px}.control-group{display:flex;align-items:center;gap:.5rem}.control-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:50%;cursor:pointer;transition:all .2s}.control-button.play{background:var(--primary-color);color:#fff}.control-button.play:hover:not(:disabled){background:var(--primary-hover);transform:scale(1.05)}.control-button.pause{background:var(--warning-color);color:#fff}.control-button.pause:hover{background:#d97706}.control-button.reset{background:var(--background);color:var(--text-secondary)}.control-button.reset:hover:not(:disabled){background:var(--border-color)}.control-button:disabled{opacity:.5;cursor:not-allowed}.board-style-toggle{display:flex;gap:.375rem}.style-button{display:flex;align-items:center;gap:.375rem;padding:.375rem .5rem;background:var(--background);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;font-size:.7rem;transition:all .2s}.style-button.active{border-color:var(--primary-color);background:#4f46e51a}.style-preview{width:16px;height:16px;border-radius:var(--radius-sm);border:1px solid var(--border-color)}.style-preview.white{background:#fff}.style-preview.chalkboard{background:#1a4a1a}.edit-mode-toggle{display:flex;gap:.375rem;margin-left:.5rem;padding-left:.5rem;border-left:1px solid var(--border-color)}.edit-button{display:flex;align-items:center;gap:.25rem;padding:.375rem .5rem;background:var(--background);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;font-size:.7rem;color:var(--text-secondary);transition:all .2s}.edit-button:hover:not(:disabled){background:var(--surface);color:var(--text-primary)}.edit-button.active{border-color:var(--primary-color);background:#4f46e51a;color:var(--primary-color)}.edit-button:disabled{opacity:.4;cursor:not-allowed}.edit-button svg{flex-shrink:0}.edit-button.logo.active{border-color:#10b981;background:#10b9811a;color:#10b981}.avatar-render-status{display:flex;align-items:center;gap:.75rem;margin-left:.5rem;padding-left:.75rem;border-left:1px solid var(--border-color)}.control-button.render-avatar{display:flex;align-items:center;gap:.375rem;width:auto;height:auto;padding:.5rem .75rem;background:linear-gradient(135deg,#10b981,#059669);color:#fff;font-size:.75rem;font-weight:500;border-radius:var(--radius-md)}.control-button.render-avatar:hover:not(:disabled){background:linear-gradient(135deg,#059669,#047857);transform:translateY(-1px);box-shadow:0 2px 8px #10b9814d}.control-button.render-avatar:disabled{background:var(--background);color:var(--text-secondary);cursor:not-allowed}.avatar-status-indicator{display:flex;align-items:center;gap:.375rem}.avatar-status-indicator .spinner-small{width:14px;height:14px;border:2px solid var(--border-color);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.avatar-status-indicator .status-icon{flex-shrink:0}.avatar-status-indicator .status-icon.ready{color:#10b981}.avatar-status-indicator .status-icon.warning{color:#f59e0b}.avatar-status-indicator .status-icon.error{color:#ef4444}.avatar-status-indicator .status-text{font-size:.7rem;white-space:nowrap}.avatar-status-indicator .status-text.rendering{color:var(--primary-color)}.avatar-status-indicator .status-text.ready{color:#10b981}.avatar-status-indicator .status-text.warning{color:#f59e0b}.avatar-status-indicator .status-text.error{color:#ef4444}.edit-button.logo:hover:not(:disabled){color:#10b981}.edit-button.background.active{border-color:#f59e0b;background:#f59e0b1a;color:#f59e0b}.edit-button.background:hover:not(:disabled){color:#f59e0b}.progress-bar{background:var(--surface);border-top:1px solid var(--border-color);padding:.5rem .75rem;flex-shrink:0;min-height:48px;margin-bottom:0}.progress-bar.empty{text-align:center;color:var(--text-secondary);font-size:.75rem}.progress-track{display:flex;height:28px;background:var(--background);border-radius:var(--radius-md);overflow:hidden}.scene-segment{position:relative;flex:1;border-right:1px solid var(--border-color);cursor:pointer;transition:background .2s}.scene-segment:last-child{border-right:none}.scene-segment:hover{background:#4f46e50d}.scene-segment.current{background:#4f46e51a}.scene-fill{position:absolute;top:0;left:0;height:100%;background:var(--primary-color);transition:width .1s linear}.scene-segment.completed .scene-fill{width:100%!important;background:var(--success-color)}.scene-number{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.65rem;font-weight:600;color:var(--text-secondary);z-index:1}.scene-segment.current .scene-number{color:var(--primary-color)}.scene-segment.intro-outro{background:#22c55e0d;border-right:2px solid rgba(34,197,94,.3)}.scene-segment.intro-outro:hover{background:#22c55e1a}.scene-segment.intro-outro.current{background:#22c55e26}.scene-segment.intro-outro .scene-number{color:var(--success-color);font-size:.55rem;font-weight:700}.scene-segment.intro-outro.current .scene-number{color:var(--success-color)}.progress-info{margin-top:.5rem;font-size:.75rem;color:var(--text-secondary);display:flex;flex-direction:column;gap:.25rem}.progress-info .current-scene{font-weight:600;font-size:.7rem}.progress-info .scene-text{font-size:.85rem;color:var(--text-primary);line-height:1.4;max-height:3.5em;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.subtitle-overlay{position:absolute;bottom:80px;left:50%;transform:translate(-50%);max-width:90%;z-index:100;pointer-events:none}.subtitle-overlay .subtitle-text{background:#000000bf;color:#fff;padding:12px 24px;border-radius:8px;font-size:1.1rem;line-height:1.5;text-align:center;max-width:800px;box-shadow:0 4px 12px #0000004d;animation:subtitle-fade-in .3s ease-out}.subtitle-overlay.chalkboard .subtitle-text{background:#ffffffe6;color:#1a1a1a}@keyframes subtitle-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.canvas-settings.compact{display:flex;flex-direction:column;gap:.4rem}.canvas-settings h4{font-size:.65rem;font-weight:600;margin-bottom:.25rem;color:var(--text-secondary)}.settings-section{margin-bottom:.4rem}.settings-section:last-child{margin-bottom:0}.canvas-settings.compact .settings-section{margin-bottom:0}.settings-section select{width:100%;padding:.25rem .35rem;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:.7rem}.settings-section-title{font-size:.75rem;font-weight:600;margin:0 0 .5rem;color:var(--text-color)}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}.settings-row label{font-size:.7rem;color:var(--text-muted)}.settings-hint{font-size:.65rem;color:var(--text-muted);margin:.25rem 0 0;opacity:.8}.color-picker-wrapper{display:flex;align-items:center;gap:.5rem}.color-picker-input{width:32px;height:24px;padding:0;border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;background:transparent}.color-picker-input::-webkit-color-swatch-wrapper{padding:2px}.color-picker-input::-webkit-color-swatch{border:none;border-radius:2px}.color-value{font-size:.65rem;font-family:monospace;color:var(--text-muted);text-transform:uppercase}.board-style-selector{display:flex;gap:.35rem}.style-option{flex:1;display:flex;flex-direction:row;align-items:center;gap:.25rem;padding:.35rem .5rem;background:var(--background);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;font-size:.65rem;transition:all .2s}.style-option:hover{background:var(--surface)}.style-option.active{border-color:var(--primary-color);background:#4f46e50d}.style-preview{width:14px;height:14px;border-radius:var(--radius-sm);border:1px solid var(--border-color)}.speed-selector{display:flex;flex-wrap:wrap;gap:.2rem}.speed-option{padding:.2rem .4rem;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.6rem;cursor:pointer;transition:all .2s}.speed-option:hover{background:var(--surface)}.speed-option.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.inline-settings{display:flex;gap:.3rem}.inline-settings .settings-section{flex:1;min-width:0}.inline-settings select{font-size:.65rem;padding:.2rem .25rem}.toggle-switch{position:relative;display:inline-block;width:36px;height:20px;cursor:pointer}.toggle-switch.compact{width:32px;height:18px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#ccc;border-radius:20px;transition:.3s}.toggle-slider:before{position:absolute;content:"";height:14px;width:14px;left:3px;bottom:3px;background-color:#fff;border-radius:50%;transition:.3s}.toggle-switch.compact .toggle-slider:before{height:12px;width:12px;left:3px;bottom:3px}.toggle-switch input:checked+.toggle-slider{background-color:var(--primary-color)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(16px)}.toggle-switch.compact input:checked+.toggle-slider:before{transform:translate(14px)}.hand-settings,.subtitle-settings{display:flex;align-items:center;gap:.5rem}.hand-settings select{flex:1;min-width:0}.subtitle-settings .setting-label{font-size:.7rem;color:var(--text-secondary)}.voice-settings h4{font-size:.75rem;font-weight:600;margin-bottom:.35rem}.voice-settings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem}.provider-selector{display:flex;gap:.25rem;margin-bottom:.25rem}.provider-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.2rem;padding:.35rem .25rem;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:.55rem;cursor:pointer;transition:all .2s;position:relative}.provider-btn:hover:not(.disabled){border-color:var(--primary-color);background:var(--primary-light, #f0f7ff)}.provider-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.provider-btn.disabled{opacity:.5;cursor:not-allowed}.provider-icon{display:flex;align-items:center}.provider-name{font-weight:500}.provider-unavailable{font-size:.45rem;opacity:.7}.provider-check{position:absolute;top:-3px;right:-3px;background:#10b981;color:#fff;border-radius:50%;width:12px;height:12px;display:flex;align-items:center;justify-content:center}.provider-badges{display:flex;gap:.25rem;margin-top:.5rem;justify-content:center}.voice-badge{display:flex;align-items:center;gap:.15rem;padding:.1rem .35rem;border-radius:999px;font-size:.5rem;font-weight:600;text-transform:uppercase;background:var(--border-color);color:var(--text-secondary);transition:all .2s}.voice-badge.active{background:var(--primary-color);color:#fff}.voice-badge.free{background:#d1fae5;color:#065f46}.voice-control{margin-bottom:.35rem}.voice-control label{display:block;font-size:.6rem;color:var(--text-secondary);margin-bottom:.15rem}.voice-select-wrapper{display:flex;gap:.25rem}.voice-select-wrapper select{flex:1;padding:.25rem .35rem;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:.7rem}.preview-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all .2s}.preview-button:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.voice-control input[type=range]{width:100%;height:3px;-webkit-appearance:none;background:var(--border-color);border-radius:2px}.voice-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;background:var(--primary-color);border-radius:50%;cursor:pointer}.voice-control .hint{font-size:.55rem;margin-top:.1rem}.range-labels{display:flex;justify-content:space-between;font-size:.55rem;color:var(--text-secondary)}.export-controls h4{font-size:.75rem;font-weight:600;margin-bottom:.35rem}.export-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem}.export-badge{display:flex;align-items:center;gap:.2rem;padding:.1rem .3rem;border-radius:999px;font-size:.5rem;font-weight:600;text-transform:uppercase;background:#e0e7ff;color:#3730a3}.export-audio-options{padding:.5rem 0;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);margin-bottom:.5rem}.export-option-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.25rem 0;font-size:.7rem}.export-audio-select{padding:.25rem .4rem;font-size:.65rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--surface);max-width:120px}.export-audio-select:disabled{opacity:.5;cursor:not-allowed}.export-status-info{display:flex;align-items:center;gap:.5rem;padding:.5rem;margin-bottom:.5rem;background:#eff6ff;border:1px solid #bfdbfe;border-radius:var(--radius-sm);font-size:.7rem;color:#1e40af}.export-status-info svg{flex-shrink:0;color:#3b82f6}.export-screen-capture-info{display:flex;align-items:flex-start;gap:.5rem;padding:.5rem;margin-bottom:.5rem;background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid #f59e0b;border-radius:var(--radius-sm);font-size:.65rem;color:#92400e;line-height:1.4}.export-screen-capture-info svg{flex-shrink:0;color:#d97706;margin-top:1px}.export-button{display:flex;align-items:center;justify-content:center;gap:.3rem;padding:.4rem .6rem;border:none;border-radius:var(--radius-md);font-size:.7rem;font-weight:600;cursor:pointer;width:100%;transition:all .2s}.export-button.start{background:var(--surface);border:1px solid var(--border-color);color:var(--text-primary)}.export-button.start:hover:not(:disabled){background:var(--background);border-color:var(--error-color);color:var(--error-color)}.export-button.start:disabled{opacity:.5;cursor:not-allowed}.export-button.recording{background:var(--error-color);color:#fff;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.recording-indicator{width:6px;height:6px;background:#fff;border-radius:50%;animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.export-hint{display:block;font-size:.55rem;color:var(--text-secondary);text-align:center;margin-top:.25rem}.export-badge.free-badge{background:#fef3c7;color:#92400e}.export-disabled-message{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1rem;background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:var(--radius-md);border:1px solid #fbbf24}.export-disabled-message .disabled-icon{color:#92400e;margin-bottom:.5rem;opacity:.7}.export-disabled-message h3{font-size:.9rem;font-weight:700;color:#92400e;margin:0 0 .25rem}.export-disabled-message p{font-size:.7rem;color:#78350f;margin:0 0 .5rem}.export-disabled-message .upgrade-hint{font-size:.65rem;font-weight:600;color:#92400e;margin-bottom:.35rem}.export-disabled-message .upgrade-features{list-style:none;padding:0;margin:0 0 .75rem;font-size:.6rem;color:#78350f}.export-disabled-message .upgrade-features li{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.15rem 0}.export-disabled-message .upgrade-features li:before{content:"✓";color:#059669;font-weight:700}.export-disabled-message .upgrade-button{display:inline-flex;align-items:center;gap:.35rem;padding:.5rem 1rem;background:linear-gradient(135deg,#059669,#047857);color:#fff;font-size:.75rem;font-weight:600;text-decoration:none;border-radius:var(--radius-md);transition:all .2s;box-shadow:0 2px 4px #0596694d}.export-disabled-message .upgrade-button:hover{background:linear-gradient(135deg,#047857,#065f46);transform:translateY(-1px);box-shadow:0 4px 8px #05966966}.export-action-section{padding:0}.export-controls-inline{background:var(--surface);border-radius:var(--radius-md);padding:1rem}.export-section-header h4{font-size:.9rem;font-weight:600;margin:0 0 1rem;color:var(--text-primary)}.export-options-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.export-option-field{display:flex;flex-direction:column;gap:.35rem}.export-option-field label{font-size:.7rem;font-weight:500;color:var(--text-secondary)}.export-option-field select{padding:.4rem .5rem;font-size:.75rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--background);color:var(--text-primary)}.export-option-field select:disabled{opacity:.5;cursor:not-allowed}.export-option-field.toggle-field{flex-direction:row;align-items:center;justify-content:space-between}.export-actions{display:flex;flex-direction:column;gap:.75rem;margin-bottom:.75rem}.popup-blocked-warning{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#fef3c7;border:1px solid #f59e0b;border-radius:var(--radius-sm);font-size:.7rem;color:#92400e}.export-progress-bar{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:var(--background);border-radius:var(--radius-sm);font-size:.75rem}.export-status-badge{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:var(--radius-sm);font-size:.75rem;font-weight:500}.export-status-badge.recording{background:#fee2e2;color:#dc2626}.rec-dot-pulse{width:8px;height:8px;background:#dc2626;border-radius:50%;animation:pulse-dot 1.5s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.export-error-message{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#fee2e2;border:1px solid #fca5a5;border-radius:var(--radius-sm);font-size:.7rem;color:#b91c1c}.export-button-group{display:flex;gap:.5rem}.export-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem 1rem;border:none;border-radius:var(--radius-md);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s;flex:1}.export-btn svg{flex-shrink:0}.export-btn .rec-dot{width:6px;height:6px;background:#dc2626;border-radius:50%;animation:blink 1s ease-in-out infinite}.export-btn.fullscreen{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff}.export-btn.fullscreen:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #4f46e54d}.export-btn.standard{background:var(--surface);border:1px solid var(--border-color);color:var(--text-primary)}.export-btn.standard:hover:not(:disabled){border-color:#dc2626;color:#dc2626}.export-btn.stop{background:#dc2626;color:#fff;animation:pulse 2s ease-in-out infinite}.export-btn.exit{background:var(--surface);border:1px solid var(--border-color);color:var(--text-primary)}.export-btn:disabled{opacity:.5;cursor:not-allowed}.export-hint-text{text-align:center;font-size:.7rem;color:var(--text-secondary)}.activity-log{display:flex;flex-direction:column;height:100%;min-height:0;border-radius:6px;overflow:hidden;background:#012456;border:1px solid #1e3a5f}.terminal-titlebar{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:linear-gradient(180deg,#2d2d30,#1e1e1e);border-bottom:1px solid #3c3c3c;flex-shrink:0}.terminal-controls{display:flex;gap:6px}.terminal-control{width:10px;height:10px;border-radius:50%;cursor:default}.terminal-control.close{background:#ff5f57}.terminal-control.minimize{background:#febc2e}.terminal-control.maximize{background:#28c840}.terminal-title{font-family:Segoe UI,system-ui,sans-serif;font-size:11px;color:#ccc;font-weight:400}.terminal-actions{display:flex;gap:4px}.terminal-actions button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:gray;cursor:pointer;border-radius:3px;transition:all .15s ease}.terminal-actions button:hover:not(:disabled){background:#ffffff1a;color:#ccc}.terminal-actions button:disabled{opacity:.3;cursor:not-allowed}.activity-log-header{display:none}.activity-log-actions{display:flex;gap:.25rem}.activity-log-actions button{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);transition:all .2s}.activity-log-actions button:hover:not(:disabled){background:var(--surface);color:var(--primary-color)}.activity-log-actions button:disabled{opacity:.3;cursor:not-allowed}.activity-log-generating{display:flex;align-items:center;gap:.4rem;padding:.2rem .5rem;background:var(--primary-color);color:#fff;border-radius:var(--radius-sm);font-size:.65rem;font-weight:500;margin-left:auto;margin-right:.5rem;max-width:200px;overflow:hidden}.activity-log-generating span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.generating-spinner{flex-shrink:0;color:currentColor}.activity-log-content{flex:1;overflow-y:auto;background:#012456;border:none;border-radius:var(--radius-md);padding:.5rem;min-height:0;scrollbar-width:thin;scrollbar-color:#444466 #1a1a2e}.activity-log-content::-webkit-scrollbar{width:6px}.activity-log-content::-webkit-scrollbar-track{background:#012456}.activity-log-content::-webkit-scrollbar-thumb{background:#2b4a7c;border-radius:3px}.activity-log-content::-webkit-scrollbar-thumb:hover{background:#3d6298}.activity-log-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#668;gap:.25rem}.activity-log-empty svg{opacity:.3}.activity-log-empty span{font-size:.7rem;font-family:Consolas,Monaco,Courier New,monospace}.log-entry{display:flex;align-items:flex-start;gap:.375rem;padding:.2rem .5rem;border-radius:0;font-size:.72rem;margin-bottom:.1rem;font-family:Cascadia Code,Consolas,Monaco,Courier New,monospace;background:transparent;border-left:none;color:#ccc}.log-prompt{color:#ff0;font-weight:600;flex-shrink:0}.log-entry:last-child{margin-bottom:0}.log-icon{flex-shrink:0;margin-top:1px;width:14px;height:14px}.log-time{flex-shrink:0;color:#668;font-size:.62rem;font-family:Consolas,Monaco,Courier New,monospace}.log-message{flex:1;word-break:break-word}.log-info{background:transparent;color:#0ff}.log-info .log-icon{color:#0ff}.log-info .log-time{color:gray}.log-info .log-prompt{color:#ff0}.log-success{background:transparent;color:#0f0}.log-success .log-icon{color:#0f0}.log-success .log-time{color:gray}.log-success .log-prompt{color:#ff0}.log-warning{background:transparent;color:#ff0}.log-warning .log-icon{color:#ff0}.log-warning .log-time{color:gray}.log-warning .log-prompt{color:#ff0}.log-error{background:transparent;color:red}.log-error .log-icon{color:red}.log-error .log-time{color:gray}.log-error .log-prompt{color:#ff0}.script-preview-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem}.script-preview-panel{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:600px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}.script-preview-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border-color)}.script-preview-header h3{font-size:1rem;font-weight:600;margin:0}.script-preview-actions{display:flex;gap:.5rem}.script-preview-actions button{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:.75rem;cursor:pointer;transition:all .2s}.script-preview-actions button:hover:not(:disabled){background:var(--surface);border-color:var(--primary-color);color:var(--primary-color)}.script-preview-actions button:disabled{opacity:.5;cursor:not-allowed}.script-preview-actions .close-btn{padding:.375rem;background:transparent;border:none}.script-preview-actions .close-btn:hover{color:var(--error-color)}.script-preview-content{flex:1;overflow-y:auto;padding:1rem}.script-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:var(--text-secondary);text-align:center}.script-empty svg{opacity:.3;margin-bottom:.5rem}.script-empty p{font-weight:500;margin-bottom:.25rem}.script-empty span{font-size:.8rem}.script-scenes{display:flex;flex-direction:column;gap:.75rem}.script-scene{padding:.75rem;background:var(--surface-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all .2s}.script-scene:hover{border-color:var(--primary-color)}.script-scene.current{border-color:var(--primary-color);background:#4f46e50d}.scene-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.scene-number{font-size:.7rem;font-weight:600;color:var(--primary-color);background:#4f46e51a;padding:.125rem .5rem;border-radius:999px}.scene-duration{font-size:.65rem;color:var(--text-secondary)}.expand-btn{margin-left:auto;padding:.25rem;background:transparent;border:none;cursor:pointer;color:var(--text-secondary);transition:transform .2s}.scene-sentence{font-size:.85rem;color:var(--text-primary);margin-bottom:.375rem}.scene-actions-summary{font-size:.7rem;color:var(--text-secondary)}.scene-actions-detail{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border-color)}.action-item{display:flex;gap:.5rem;font-size:.7rem;padding:.25rem 0}.action-type{font-weight:500;color:var(--primary-color)}.action-reveal{color:var(--text-secondary)}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.loading-content{background:var(--surface);padding:1.5rem 2rem;border-radius:var(--radius-lg);text-align:center;box-shadow:var(--shadow-lg)}.loading-spinner{color:var(--primary-color);margin-bottom:.75rem}.loading-message{font-size:.9rem;font-weight:600;color:var(--text-primary)}.loading-sub-message{font-size:.75rem;color:var(--text-secondary);margin-top:.25rem}.error-toast{position:fixed;bottom:1rem;right:1rem;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--error-color);color:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:1000;font-size:.85rem;animation:slideIn .3s ease}@keyframes slideIn{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.error-toast button{display:flex;align-items:center;justify-content:center;background:#fff3;border:none;border-radius:var(--radius-sm);padding:.25rem;cursor:pointer;transition:background .2s}.error-toast button:hover{background:#ffffff4d}.project-manager h4{font-size:.85rem;font-weight:600;color:var(--text-primary);margin-bottom:.75rem}.project-actions{display:flex;gap:.5rem}.project-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.5rem .75rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--surface);color:var(--text-primary);font-size:.75rem;font-weight:500;cursor:pointer;transition:all .2s}.project-btn:hover{background:var(--surface-hover);border-color:var(--primary-color)}.project-btn svg{flex-shrink:0}.save-btn:hover{color:var(--success-color);border-color:var(--success-color)}.load-btn:hover{color:var(--primary-color);border-color:var(--primary-color)}.drawing-settings h4{font-size:.75rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.drawing-settings.compact .setting-row{margin-bottom:.5rem}.drawing-settings.compact .setting-row:last-child{margin-bottom:0}.drawing-settings label{display:block;font-size:.65rem;color:var(--text-secondary);margin-bottom:.2rem}.drawing-settings input[type=range]{width:100%;height:3px;background:var(--border-color);border-radius:2px;-webkit-appearance:none;cursor:pointer}.drawing-settings input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--primary-color);border-radius:50%;cursor:pointer}.color-picker{display:flex;gap:.25rem;flex-wrap:wrap}.color-swatch{width:22px;height:22px;border:2px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:var(--primary-color);box-shadow:0 0 0 1px var(--surface),0 0 0 3px var(--primary-color)}.slider-row{display:flex;gap:.75rem;margin-bottom:.25rem}.slider-col{flex:1;min-width:0}.slider-col label{font-size:.6rem;color:var(--text-secondary);margin-bottom:.15rem;display:block}.slider-col input[type=range]{width:100%;height:3px;background:var(--border-color);border-radius:2px;-webkit-appearance:none;cursor:pointer}.slider-col input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;background:var(--primary-color);border-radius:50%;cursor:pointer}.slider-col .range-labels{font-size:.5rem;margin-top:.1rem}.range-labels{display:flex;justify-content:space-between;font-size:.55rem;color:var(--text-muted);margin-top:.15rem}@media (max-width: 1200px){.panel-left{width:280px}.panel-right{width:260px}}@media (max-width: 1024px){.app-main{flex-direction:column;overflow-y:auto}.panel-left,.panel-right{width:100%}.panel-center{min-height:400px}}.creation-history{display:flex;flex-direction:column;height:100%}.history-header{display:flex;align-items:center;justify-content:space-between;padding:0 0 12px;border-bottom:1px solid var(--border-color);margin-bottom:12px}.history-header h3{font-size:14px;font-weight:600;color:var(--text-primary);margin:0}.clear-history-btn{padding:6px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:all .15s ease}.clear-history-btn:hover{background:#ef44441a;color:var(--error-color)}.history-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-secondary);padding:32px 16px}.history-empty svg{margin-bottom:12px}.history-empty p{font-size:14px;font-weight:500;margin-bottom:4px}.history-empty small{font-size:12px;opacity:.7}.history-cards-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}.history-card{background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:.6rem .75rem;transition:all .15s ease}.history-card:hover{border-color:var(--primary-color);box-shadow:var(--shadow-sm)}.history-card-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.5rem}.history-card .card-name{flex:1;font-size:.8rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.history-card .card-name.editable{cursor:pointer;padding:.15rem .3rem;margin:-.15rem -.3rem;border-radius:var(--radius-sm);transition:background .15s ease}.history-card .card-name.editable:hover{background:#4f46e51a}.history-card .card-name-input{flex:1;font-size:.8rem;font-weight:600;color:var(--text-primary);background:var(--surface);border:2px solid var(--primary-color);border-radius:var(--radius-sm);padding:.15rem .3rem;min-width:0;font-family:inherit}.history-card .card-date{font-size:.7rem;color:var(--text-secondary);white-space:nowrap;flex-shrink:0}.history-card-footer{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.history-card .card-meta{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.history-card .meta-item{display:flex;align-items:center;gap:.3rem;font-size:.7rem;color:var(--text-secondary);white-space:nowrap}.history-card .meta-item svg{flex-shrink:0;opacity:.7}.history-card .card-actions{display:flex;gap:.25rem;flex-shrink:0}.history-action-btn{padding:.35rem;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:all .15s ease;display:flex;align-items:center;justify-content:center}.history-action-btn:hover{transform:scale(1.1)}.history-action-btn.load-btn:hover{background:#4f46e51a;color:var(--primary-color)}.history-action-btn.download-btn:hover{background:#0596691a;color:#059669}.history-action-btn.delete-btn:hover{background:#ef44441a;color:var(--error-color)}.history-footer{padding:12px 0 0;border-top:1px solid var(--border-color);margin-top:12px;text-align:center}.history-footer small{font-size:11px;color:var(--text-secondary)}.database-projects{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:12px;margin-bottom:16px}.db-projects-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--border-color);margin-bottom:12px}.db-projects-header h3{font-size:14px;font-weight:600;color:var(--text-primary);margin:0;display:flex;align-items:center;gap:6px}.db-projects-actions{display:flex;align-items:center;gap:8px}.user-badge{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary);background:var(--surface-secondary);padding:4px 8px;border-radius:var(--radius-sm)}.refresh-btn{padding:6px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:all .15s ease}.refresh-btn:hover{background:var(--surface-secondary);color:var(--primary-color)}.refresh-btn:disabled{opacity:.5;cursor:not-allowed}.refresh-btn .spinning{animation:spin 1s linear infinite}.save-to-cloud-btn{display:flex;align-items:center;gap:4px;padding:5px 10px;border:none;background:var(--primary-color);color:#fff;font-size:11px;font-weight:500;cursor:pointer;border-radius:var(--radius-sm);transition:all .15s ease}.save-to-cloud-btn:hover:not(:disabled){background:var(--primary-hover)}.save-to-cloud-btn:disabled{opacity:.5;cursor:not-allowed;background:var(--text-secondary)}.save-to-cloud-btn svg{width:14px;height:14px}.db-projects-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 16px;color:var(--text-secondary)}.db-projects-empty p{margin:8px 0 4px;font-size:13px}.db-projects-empty .hint{font-size:11px;opacity:.7;margin:0}.db-projects-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px;color:var(--text-secondary);font-size:13px}.db-projects-loading .spinner{width:16px;height:16px;border:2px solid var(--border-color);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.db-projects-error{display:flex;align-items:center;gap:8px;padding:12px;background:#ef44441a;border-radius:var(--radius-sm);color:var(--error-color);font-size:12px;margin-bottom:12px}.db-projects-error button{margin-left:auto;padding:4px 8px;border:none;background:var(--error-color);color:#fff;border-radius:var(--radius-sm);cursor:pointer;font-size:11px}.db-projects-list{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto}.db-project-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:var(--surface-secondary);border-radius:var(--radius-sm);transition:all .15s ease}.db-project-item:hover{background:var(--surface-hover)}.db-project-item .project-info{display:flex;flex-direction:column;gap:2px;overflow:hidden}.db-project-item .project-name{font-size:13px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.db-project-item .project-date{font-size:11px;color:var(--text-secondary)}.db-project-item .project-actions{display:flex;gap:4px;flex-shrink:0}.db-project-item .project-actions button{padding:6px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:all .15s ease}.db-project-item .load-btn:hover{background:#4f46e51a;color:var(--primary-color)}.db-project-item .delete-btn:hover{background:#ef44441a;color:var(--error-color)}.icon-library{display:flex;flex-direction:column;height:100%;max-height:600px}.icon-library-header{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border-color);margin-bottom:12px}.icon-library-header h3{font-size:16px;font-weight:600;color:var(--text-primary)}.icon-library-header .close-btn{padding:4px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm)}.icon-library-header .close-btn:hover{background:var(--surface-secondary);color:var(--text-primary)}.image-library-tabs{display:flex;flex-wrap:nowrap;gap:4px;margin-bottom:10px;padding:4px;background:var(--surface-secondary);border-radius:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;background:linear-gradient(to right,var(--surface-secondary) 20px,transparent 40px),linear-gradient(to left,var(--surface-secondary) 20px,transparent 40px),linear-gradient(to right,rgba(0,0,0,.1) 0%,transparent 30px),linear-gradient(to left,rgba(0,0,0,.1) 0%,transparent 30px),var(--surface-secondary);background-position:left center,right center,left center,right center,center;background-repeat:no-repeat;background-size:40px 100%,40px 100%,30px 100%,30px 100%,100% 100%;background-attachment:local,local,scroll,scroll,scroll}.image-library-tabs::-webkit-scrollbar{display:none}.image-library-tabs .tab-btn{flex:0 0 auto;padding:6px 12px;border:1px solid transparent;background:transparent;color:var(--text-secondary);font-size:.75rem;font-weight:500;border-radius:6px;cursor:pointer;transition:all .15s ease;white-space:nowrap;position:relative}.image-library-tabs .tab-btn:hover:not(.active){color:var(--text-primary);background:#7c3aed14;border-color:#7c3aed33}.image-library-tabs .tab-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color);box-shadow:0 2px 4px #4f46e54d}.icon-library-filters{display:flex;gap:8px;margin-bottom:12px}.icon-search{flex:1;padding:8px 12px;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:13px;background:var(--surface)}.icon-search:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.category-select{padding:8px 12px;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:13px;background:var(--surface);cursor:pointer}.icon-library-controls select{max-width:80%;overflow:hidden;text-overflow:ellipsis}.icon-library-controls{z-index:10;position:relative}.icon-library-actions{display:flex;gap:8px;margin-bottom:12px}.add-icon-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;border:1px dashed var(--border-color);background:transparent;border-radius:var(--radius-md);font-size:12px;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.add-icon-btn:hover{border-color:var(--primary-color);color:var(--primary-color);background:#4f46e50d}.add-icon-btn.ai-btn:hover{border-color:var(--success-color);color:var(--success-color);background:#10b9810d}.icon-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;overflow-y:auto;padding:4px}.icon-preview{display:flex;flex-direction:column;align-items:center;padding:8px;border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all .15s ease;background:var(--surface);position:relative}.icon-preview:hover{background:var(--surface-secondary);border-color:var(--border-color)}.icon-preview.selected{border-color:var(--primary-color);background:#4f46e50d}.icon-preview canvas{border-radius:var(--radius-sm);background:#fff}.icon-preview .icon-name{font-size:10px;color:var(--text-secondary);margin-top:4px;text-align:center;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.icon-preview .icon-actions{position:absolute;top:2px;right:2px;display:flex;gap:2px;opacity:0;transition:opacity .15s ease}.icon-preview:hover .icon-actions{opacity:1}.icon-preview .download-icon-btn,.icon-preview .delete-icon-btn{padding:2px;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.icon-preview .download-icon-btn{background:#4f46e51a;color:var(--primary-color)}.icon-preview .download-icon-btn:hover{background:var(--primary-color);color:#fff}.icon-preview .delete-icon-btn{background:#ef44441a;color:var(--error-color)}.icon-preview .delete-icon-btn:hover{background:var(--error-color);color:#fff}.no-icons{grid-column:1 / -1;text-align:center;padding:24px;color:var(--text-secondary);font-size:13px}.icon-library-footer{display:flex;justify-content:space-between;align-items:center;padding:12px 0 0;border-top:1px solid var(--border-color);margin-top:12px}.icon-library-footer .selected-info{display:flex;align-items:center;gap:8px;font-size:13px}.icon-library-footer .category-badge,.icon-library-footer .source-badge{padding:2px 6px;background:var(--surface-secondary);border-radius:var(--radius-sm);font-size:10px;color:var(--text-secondary)}.icon-library-footer .select-btn{padding:8px 16px;background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-md);font-size:13px;font-weight:500;cursor:pointer;transition:background .15s ease}.icon-library-footer .select-btn:hover{background:var(--primary-hover)}.icon-library-footer .clear-btn{padding:4px 8px;background:transparent;color:var(--text-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:11px;cursor:pointer;transition:all .15s ease}.icon-library-footer .clear-btn:hover{background:var(--surface-secondary);color:var(--text-primary)}.scene-target-toggle{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--surface-secondary);border-radius:var(--radius-sm);margin-bottom:8px;border:1px solid var(--border-color)}.scene-target-toggle .toggle-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--text-primary)}.scene-target-toggle .toggle-label input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.scene-target-toggle .toggle-slider{position:relative;width:32px;height:18px;background:var(--surface);border-radius:9px;transition:all .2s ease;border:1px solid var(--border-color)}.scene-target-toggle .toggle-slider:before{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;background:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 1px 2px #0003}.scene-target-toggle .toggle-label input:checked+.toggle-slider{background:var(--accent);border-color:var(--accent)}.scene-target-toggle .toggle-label input:checked+.toggle-slider:before{transform:translate(14px)}.scene-target-toggle .toggle-text{font-weight:500}.scene-target-toggle .hint-text{font-size:10px;color:var(--text-secondary);font-style:italic}.icon-large-preview{display:flex;align-items:center;gap:16px;padding:16px;margin-top:12px;background:var(--surface-secondary);border-radius:var(--radius-md);border:1px solid var(--border-color)}.icon-large-preview .large-preview-canvas{border-radius:var(--radius-sm);background:#fff;box-shadow:var(--shadow-sm)}.icon-large-preview .preview-info{display:flex;flex-direction:column;gap:6px}.icon-large-preview .preview-info strong{font-size:14px;color:var(--text-primary)}.icon-large-preview .preview-info .category-badge,.icon-large-preview .preview-info .source-badge{padding:2px 8px;background:var(--surface);border-radius:var(--radius-sm);font-size:11px;color:var(--text-secondary);width:fit-content}.icon-large-preview .add-to-scene-btn{margin-left:auto;padding:8px 16px;background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-md);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}.icon-large-preview .add-to-scene-btn:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 2px 8px #7c3aed4d}.icon-large-preview .add-to-scene-btn:active{transform:translateY(0)}.icon-preview.selected{border-color:var(--primary-color);background:#4f46e51a;box-shadow:0 0 0 2px var(--primary-color)}.icon-preview.previewing{border-color:var(--accent-color, #06b6d4);background:#06b6d41a}.icon-preview.selected.previewing{border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-color),inset 0 0 0 2px #06b6d44d}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:var(--surface);border-radius:var(--radius-lg);padding:24px;max-width:450px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg)}.modal h4{font-size:18px;font-weight:600;margin-bottom:16px;color:var(--text-primary)}.modal .form-group{margin-bottom:16px}.modal .form-group label{display:block;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:6px}.modal .form-group input,.modal .form-group textarea{width:100%;padding:10px 12px;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:14px;font-family:inherit}.modal .form-group input:focus,.modal .form-group textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.modal .form-group textarea{resize:vertical;font-family:monospace}.modal .form-group .format-hint{display:block;margin-top:4px;font-size:11px;color:var(--text-tertiary);font-style:italic}.modal .form-group .image-preview{margin-top:8px;padding:8px;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--surface-secondary);text-align:center}.modal .form-group .image-preview img{border-radius:var(--radius-sm)}.modal .error-message{padding:10px 12px;background:#ef44441a;color:var(--error-color);border-radius:var(--radius-md);font-size:13px;margin-bottom:16px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.modal-actions .cancel-btn{padding:10px 16px;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:14px;color:var(--text-secondary);cursor:pointer}.modal-actions .cancel-btn:hover:not(:disabled){background:var(--surface-secondary)}.modal-actions .primary-btn{padding:10px 16px;background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer}.modal-actions .primary-btn:hover:not(:disabled){background:var(--primary-hover)}.settings-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1100;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.settings-modal-container{background:var(--surface);border-radius:var(--radius-lg);width:90%;max-width:700px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 25px 50px -12px #00000040;animation:settingsModalSlideIn .2s ease-out}@keyframes settingsModalSlideIn{0%{opacity:0;transform:scale(.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.settings-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-color);flex-shrink:0}.settings-modal-header h2{font-size:18px;font-weight:600;color:var(--text-primary);margin:0}.settings-modal-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.settings-modal-close:hover{background:var(--surface-secondary);color:var(--text-primary)}.settings-modal-content{flex:1;overflow-y:auto;padding:0}.settings-modal-content .settings-panel{border:none;box-shadow:none}@media (prefers-color-scheme: dark){.settings-modal-overlay{background:#000000bf}.settings-modal-container{background:#1f2937;box-shadow:0 25px 50px -12px #00000080}.settings-modal-header{border-bottom-color:#374151}.settings-modal-header h2{color:#f9fafb}.settings-modal-close{color:#9ca3af}.settings-modal-close:hover{background:#374151;color:#f9fafb}}.settings-slide-panel{position:fixed;top:0;right:0;width:380px;height:100vh;background:var(--surface);border-left:1px solid var(--border-color);box-shadow:-4px 0 20px #00000026;z-index:1000;transform:translate(100%);transition:transform .3s ease;display:flex;flex-direction:column;overflow:hidden}.settings-slide-panel.open{transform:translate(0)}.settings-slide-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-color);flex-shrink:0;background:var(--surface)}.settings-slide-header h2{font-size:18px;font-weight:600;color:var(--text-primary);margin:0}.settings-slide-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.settings-slide-close:hover{background:var(--surface-secondary);color:var(--text-primary)}.settings-slide-content{flex:1;overflow-y:auto;overflow-x:hidden}.settings-slide-content .settings-panel{border:none;box-shadow:none;height:100%}@media (prefers-color-scheme: dark){.settings-slide-panel{background:#1f2937;border-left-color:#374151;box-shadow:-4px 0 20px #0006}.settings-slide-header{background:#1f2937;border-bottom-color:#374151}.settings-slide-header h2{color:#f9fafb}.settings-slide-close{color:#9ca3af}.settings-slide-close:hover{background:#374151;color:#f9fafb}}@media (max-width: 768px){.settings-slide-panel{width:100%;max-width:340px}}.project-name-row{display:flex;align-items:center;gap:6px}.project-uuid-badge{font-size:9px;font-family:SF Mono,Consolas,monospace;color:var(--text-secondary);background:var(--surface-secondary);padding:2px 5px;border-radius:3px;cursor:help;opacity:.8;flex-shrink:0}.project-uuid-badge:hover{opacity:1}@media (prefers-color-scheme: dark){.project-uuid-badge{background:#374151;color:#9ca3af}}.slide-illustrations-section{background:linear-gradient(135deg,#4f46e50a,#8b5cf60a);border:1px solid rgba(79,70,229,.12);border-radius:10px;padding:14px;margin-top:12px}.slide-illustrations-section .section-header{margin-bottom:12px}.slide-illustrations-section .section-header h4{font-size:13px;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:6px;margin:0 0 4px}.slide-illustrations-section .section-description{font-size:11px;color:var(--text-secondary);margin:0;line-height:1.4}.illustration-model-selection{margin-top:12px;padding-top:12px;border-top:1px solid rgba(79,70,229,.1)}.illustration-model-selection>label{display:block;font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.3px;margin-bottom:6px}.illustration-model-selection>select{width:100%;padding:8px 10px;font-size:12px;border-radius:6px;border:1px solid var(--border-color);background:var(--surface);color:var(--text-primary)}.illustration-setting{display:flex;flex-direction:column;gap:4px}.illustration-setting label{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.3px}.illustration-setting select{width:100%;padding:6px 8px;font-size:12px;border-radius:6px;border:1px solid var(--border-color);background:var(--surface);color:var(--text-primary)}.pricing-hint{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text-secondary);margin-top:8px;padding:6px 8px;background:#4f46e50f;border-radius:4px}.pricing-hint svg{flex-shrink:0;color:var(--primary-color)}@media (prefers-color-scheme: dark){.slide-illustrations-section{background:linear-gradient(135deg,#818cf814,#a78bfa14);border-color:#818cf833}.illustration-model-selection{border-top-color:#818cf826}.illustration-model-selection>select,.illustration-setting select{background:#374151;border-color:#4b5563;color:#f9fafb}.pricing-hint{background:#818cf81a}}.modal-actions button:disabled{opacity:.6;cursor:not-allowed}.ai-svg-generator-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.ai-svg-generator-modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.ai-svg-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-color);background:var(--surface-secondary)}.ai-svg-title{display:flex;align-items:center;gap:10px}.ai-svg-title svg{color:var(--primary-color)}.ai-svg-title h2{font-size:18px;font-weight:600;margin:0}.ai-svg-header .close-btn{background:none;border:none;padding:6px;cursor:pointer;border-radius:var(--radius-sm);color:var(--text-secondary);transition:all .2s}.ai-svg-header .close-btn:hover{background:var(--border-color);color:var(--text-primary)}.ai-svg-phases{display:flex;align-items:center;justify-content:center;padding:16px 20px;background:var(--surface-secondary);border-bottom:1px solid var(--border-color);gap:8px}.phase{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;background:var(--border-color);color:var(--text-secondary);font-size:13px;transition:all .2s}.phase.active{background:var(--primary-color);color:#fff}.phase.completed{background:var(--success-color);color:#fff}.phase-number{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:#fff3;border-radius:50%;font-size:11px;font-weight:600}.phase-connector{width:30px;height:2px;background:var(--border-color)}.ai-svg-content{flex:1;overflow-y:auto;padding:20px}.ai-svg-input-phase{max-width:600px;margin:0 auto}.input-section{margin-bottom:20px}.input-section label{display:block;font-weight:600;margin-bottom:6px;color:var(--text-primary)}.input-section .input-hint{font-size:13px;color:var(--text-secondary);margin-bottom:10px}.input-section textarea{width:100%;padding:12px;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:14px;resize:vertical;min-height:120px;font-family:inherit}.input-section textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.count-selector{display:flex;align-items:center;gap:8px}.count-btn{padding:8px 16px;border:1px solid var(--border-color);background:var(--surface);border-radius:var(--radius-md);cursor:pointer;font-size:14px;transition:all .2s}.count-btn:hover{border-color:var(--primary-color)}.count-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.count-input{width:60px;padding:8px;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:14px;text-align:center}.style-selector{display:flex;gap:12px}.style-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;border:2px solid var(--border-color);background:var(--surface);border-radius:var(--radius-md);cursor:pointer;transition:all .2s}.style-btn:hover{border-color:var(--primary-color);background:var(--primary-light, rgba(79, 70, 229, .05))}.style-btn.active{border-color:var(--primary-color);background:var(--primary-light, rgba(79, 70, 229, .1))}.style-btn svg{color:var(--text-secondary)}.style-btn.active svg{color:var(--primary-color)}.style-btn span{font-weight:600;font-size:14px;color:var(--text-primary)}.style-btn small{font-size:11px;color:var(--text-secondary);text-align:center}.analyze-btn{width:100%;padding:14px 20px!important;font-size:16px!important;display:flex;align-items:center;justify-content:center;gap:10px}.ai-svg-instructions-phase{display:flex;flex-direction:column;gap:16px}.instructions-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}.instructions-header p{color:var(--text-secondary);font-size:14px}.instructions-actions{display:flex;gap:8px}.select-all-btn,.add-btn{padding:6px 12px;border:1px solid var(--border-color);background:var(--surface);border-radius:var(--radius-md);cursor:pointer;font-size:13px;display:flex;align-items:center;gap:6px;transition:all .2s}.select-all-btn:hover,.add-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.instructions-list{display:flex;flex-direction:column;gap:8px;max-height:350px;overflow-y:auto;padding:4px}.instruction-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all .2s}.instruction-item.selected{border-color:var(--primary-color);background:#4f46e50d}.instruction-checkbox input{width:18px;height:18px;cursor:pointer}.instruction-number{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--border-color);border-radius:50%;font-size:12px;font-weight:600;color:var(--text-secondary)}.instruction-input{flex:1;padding:8px 10px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:14px;min-width:200px}.instruction-input:focus{outline:none;border-color:var(--primary-color)}.instruction-item .category-select{padding:8px 10px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:13px;background:var(--surface);min-width:100px}.instruction-item .remove-btn{padding:6px;border:none;background:none;cursor:pointer;color:var(--text-secondary);border-radius:var(--radius-sm);transition:all .2s}.instruction-item .remove-btn:hover{color:var(--error-color);background:#ef44441a}.phase-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:16px;border-top:1px solid var(--border-color);margin-top:10px}.secondary-btn{padding:10px 20px;border:1px solid var(--border-color);background:var(--surface);border-radius:var(--radius-md);cursor:pointer;font-size:14px;color:var(--text-primary);transition:all .2s}.secondary-btn:hover:not(:disabled){border-color:var(--text-secondary)}.primary-btn{padding:10px 20px;border:none;background:var(--primary-color);color:#fff;border-radius:var(--radius-md);cursor:pointer;font-size:14px;font-weight:500;display:flex;align-items:center;gap:8px;transition:all .2s}.primary-btn:hover:not(:disabled){background:var(--primary-hover)}.primary-btn:disabled,.secondary-btn:disabled{opacity:.6;cursor:not-allowed}.ai-svg-results-phase{display:flex;flex-direction:column;gap:16px}.results-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}.results-header p{color:var(--text-secondary);font-size:14px}.svg-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;max-height:450px;overflow-y:auto;padding:4px}.svg-result-card{background:var(--surface);border:2px solid var(--border-color);border-radius:var(--radius-md);padding:12px;display:flex;flex-direction:column;gap:10px;transition:all .2s}.svg-result-card.selected{border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e51a}.svg-result-card.success{background:#10b98108}.svg-result-card.error{background:#ef444408;border-color:var(--error-color)}.card-header{display:flex;align-items:center;gap:8px}.card-header input[type=checkbox]{width:16px;height:16px;cursor:pointer}.card-number{font-size:12px;font-weight:600;color:var(--text-secondary)}.status-badge{margin-left:auto;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}.status-badge.pending{background:var(--border-color);color:var(--text-secondary)}.status-badge.generating{background:var(--warning-color);color:#fff}.status-badge.success{background:var(--success-color);color:#fff}.status-badge.error{background:var(--error-color);color:#fff}.card-preview{width:100%;aspect-ratio:1;background:#f8f8f8;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.card-preview canvas{display:block}.card-preview .download-btn{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--border-color);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .2s;z-index:10;box-shadow:0 1px 3px #0000001a;opacity:0}.svg-result-card:hover .download-btn{opacity:1}.card-preview .download-btn:hover{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.generating-indicator,.error-indicator,.pending-indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center}.error-indicator span{font-size:11px;color:var(--error-color);max-width:80%;word-break:break-word}.spinner{width:20px;height:20px;border:2px solid var(--border-color);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}.spinner.large{width:40px;height:40px;border-width:3px}.card-description{font-size:12px;color:var(--text-primary);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}.card-category{font-size:11px;color:var(--text-secondary);background:var(--surface-secondary);padding:2px 8px;border-radius:10px;align-self:flex-start}.regenerate-btn{width:100%;padding:8px;border:1px solid var(--border-color);background:var(--surface);border-radius:var(--radius-sm);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--text-secondary);transition:all .2s}.save-btn{background:var(--success-color)!important}.save-btn:hover:not(:disabled){background:#059669!important}.ai-svg-content .error-message{background:#ef44441a;color:var(--error-color);padding:10px 14px;border-radius:var(--radius-md);font-size:13px;margin-top:10px}.background-settings{display:flex;flex-direction:column;gap:12px;padding:8px 0}.background-settings .settings-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border-color)}.background-settings .settings-header h3{font-size:14px;font-weight:600;color:var(--text-primary);margin:0}.bg-apply-mode{display:flex;flex-direction:column;gap:6px}.bg-apply-mode .mode-label{font-size:12px;color:var(--text-secondary);font-weight:500}.bg-apply-mode .mode-options{display:flex;gap:6px}.bg-apply-mode .mode-btn{flex:1;padding:8px 12px;border:1px solid var(--border-color);background:var(--surface);border-radius:var(--radius-md);font-size:12px;color:var(--text-secondary);cursor:pointer;transition:all .2s}.bg-apply-mode .mode-btn:hover{border-color:var(--primary-color);color:var(--text-primary)}.bg-apply-mode .mode-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.bg-scene-selector{display:flex;flex-direction:column;gap:4px}.bg-scene-selector label{font-size:12px;color:var(--text-secondary)}.bg-scene-selector select{padding:8px 12px;border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:12px;background:var(--surface);color:var(--text-primary);cursor:pointer}.bg-scene-selector select:focus{outline:none;border-color:var(--primary-color)}.bg-upload-section{margin:8px 0}.bg-upload-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border:2px dashed var(--border-color);background:var(--surface-secondary);border-radius:var(--radius-md);color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.bg-upload-btn:hover{border-color:var(--primary-color);color:var(--primary-color);background:#4f46e50d}.bg-upload-btn svg{flex-shrink:0}.bg-layers-list{display:flex;flex-direction:column;gap:10px;max-height:400px;overflow-y:auto}.no-layers{text-align:center;padding:20px;color:var(--text-secondary);font-size:12px;background:var(--surface-secondary);border-radius:var(--radius-md);border:1px dashed var(--border-color)}.bg-layer-item{display:flex;gap:6px;padding:6px;background:var(--surface-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:border-color .2s}.bg-layer-item:hover{border-color:var(--primary-color)}.bg-layer-item .layer-preview{width:40px;height:40px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;background:#fff;border:1px solid var(--border-color)}.bg-layer-item .layer-preview img{width:100%;height:100%;object-fit:cover}.bg-layer-item .layer-controls{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.bg-layer-item .layer-name{font-size:12px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-control-row{display:flex;align-items:center;gap:4px;font-size:10px}.layer-control-row label{color:var(--text-secondary);min-width:40px;font-size:9px}.layer-control-row input[type=range]{flex:1;height:3px;max-width:80px;background:var(--border-color);border-radius:2px;-webkit-appearance:none;cursor:pointer}.layer-control-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;background:var(--primary-color);border-radius:50%;cursor:pointer}.layer-control-row .control-value{min-width:25px;text-align:right;color:var(--text-secondary);font-size:9px}.layer-control-row select{flex:1;padding:4px 8px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:11px;background:var(--surface);cursor:pointer}.layer-control-row .fit-mode-select{max-width:100px}.bg-layer-item .layer-actions{display:flex;flex-direction:column;gap:4px}.layer-action-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--border-color);background:var(--surface);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all .2s}.layer-action-btn:hover:not(:disabled){border-color:var(--primary-color);color:var(--primary-color)}.layer-action-btn:disabled{opacity:.3;cursor:not-allowed}.layer-action-btn.danger:hover:not(:disabled){border-color:var(--error-color);color:var(--error-color);background:#ef44440d}.bg-clear-btn{width:100%;padding:10px;border:1px solid var(--error-color);background:#ef44440d;color:var(--error-color);border-radius:var(--radius-md);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;margin-top:8px}.bg-clear-btn:hover{background:var(--error-color);color:#fff}.avatar-settings{display:flex;flex-direction:column;gap:1rem;padding:.5rem}.avatar-mode-toggle.compact{background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:.6rem}.avatar-mode-toggle.compact .mode-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.avatar-mode-toggle.compact .mode-header h4{font-size:.75rem;font-weight:600;margin:0;color:var(--text)}.avatar-mode-toggle.compact .inline-status{display:flex;align-items:center;gap:.4rem}.status-dot-compact{width:10px;height:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px #ef444433;transition:all .3s}.status-dot-compact.online{background:#22c55e;box-shadow:0 0 0 2px #22c55e33,0 0 8px #22c55e80;animation:pulse-green 2s infinite}@keyframes pulse-green{0%,to{box-shadow:0 0 0 2px #22c55e33,0 0 8px #22c55e80}50%{box-shadow:0 0 0 4px #22c55e4d,0 0 12px #22c55eb3}}.refresh-status-btn-compact{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;color:var(--text-secondary)}.refresh-status-btn-compact:hover{background:var(--background);color:var(--primary-color)}.avatar-mode-toggle.compact .mode-buttons{display:flex;gap:.4rem}.avatar-mode-toggle.compact .mode-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.5rem .4rem;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}.avatar-mode-toggle.compact .mode-btn:hover{border-color:var(--primary-color);background:#4f46e50d}.avatar-mode-toggle.compact .mode-btn.active{border-color:var(--primary-color);background:#4f46e51a;color:var(--primary-color)}.avatar-mode-toggle.compact .mode-label{font-size:.7rem;font-weight:500;white-space:nowrap}.status-error-compact{font-size:.65rem;color:var(--error-color);margin-top:.4rem;padding:.3rem .5rem;background:#ef44441a;border-radius:var(--radius-sm)}.avatar-service-status{display:flex;align-items:center;gap:.5rem;padding:.75rem;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-md)}.status-indicator{display:flex;align-items:center;gap:.5rem;flex:1}.status-dot{width:8px;height:8px;border-radius:50%;background:#ef4444}.status-indicator.online .status-dot{background:#22c55e;box-shadow:0 0 8px #22c55e80}.status-text{font-size:.75rem;font-weight:500}.status-error{font-size:.65rem;color:var(--error-color);margin-top:.25rem}.refresh-status-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border-color);background:var(--surface);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}.refresh-status-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.avatar-toggle{padding:.5rem 0}.toggle-label{position:relative;display:flex;align-items:center;gap:.5rem;cursor:pointer}.toggle-label input[type=checkbox]{width:16px;height:16px;cursor:pointer}.toggle-text{font-size:.85rem;font-weight:500}.toggle-hint{font-size:.7rem;color:var(--text-secondary);margin-top:.25rem}.avatar-selection h4,.avatar-upload h4,.avatar-head-motion h4{font-size:.8rem;font-weight:600;margin:0 0 .5rem;color:var(--text-primary)}.avatar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.loading-avatars{padding:1rem;text-align:center;color:var(--text-secondary);font-size:.75rem}.avatar-card{position:relative;border:2px solid var(--border-color);border-radius:var(--radius-md);padding:.25rem;cursor:pointer;transition:all .2s;background:var(--surface)}.avatar-card:hover{border-color:var(--primary-color)}.avatar-card.selected{border-color:var(--primary-color);background:var(--primary-light)}.avatar-card .avatar-image{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--radius-sm)}.avatar-card .avatar-image img{width:100%;height:100%;object-fit:cover}.selected-badge{position:absolute;top:4px;right:4px;width:20px;height:20px;background:var(--primary-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}.avatar-card .avatar-info{padding:.25rem;text-align:center}.avatar-card .avatar-name{font-size:.65rem;font-weight:500;display:block}.builtin-badge{font-size:.55rem;color:var(--text-secondary);background:var(--bg-secondary);padding:1px 4px;border-radius:4px}.remove-avatar-btn{position:absolute;top:-6px;right:-6px;width:18px;height:18px;background:var(--error-color);color:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s}.avatar-card:hover .remove-avatar-btn{opacity:1}.avatar-upload{padding:.75rem;background:var(--bg-secondary);border-radius:var(--radius-md)}.upload-form{display:flex;gap:.5rem;flex-wrap:wrap}.upload-name-input{flex:1;min-width:100px;padding:.5rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.75rem}.upload-gender-select{padding:.5rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.75rem;background:var(--surface)}.upload-btn{padding:.5rem 1rem;background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;cursor:pointer;transition:background .2s}.upload-btn:hover:not(:disabled){background:var(--primary-dark)}.upload-btn:disabled{opacity:.5;cursor:not-allowed}.upload-hint{font-size:.65rem;color:var(--text-secondary);margin-top:.5rem}.rive-avatar-upload{padding:.75rem;background:var(--bg-secondary);border-radius:var(--radius-md)}.upload-error{padding:.5rem;margin-top:.5rem;background:rgba(var(--error-rgb, 220, 53, 69),.1);border:1px solid var(--error-color, #dc3545);border-radius:var(--radius-sm);color:var(--error-color, #dc3545);font-size:.7rem}.rive-upload-tips{margin-top:1rem;padding:.75rem;background:var(--surface);border-radius:var(--radius-sm);border:1px solid var(--border-color)}.rive-upload-tips h5{font-size:.7rem;font-weight:600;margin:0 0 .5rem;color:var(--text-primary)}.rive-upload-tips ul{margin:0;padding-left:1.25rem;font-size:.65rem;color:var(--text-secondary);line-height:1.6}.rive-upload-tips li{margin-bottom:.25rem}.rive-community-link{display:inline-block;margin-top:.75rem;font-size:.7rem;color:var(--primary-color);text-decoration:none}.rive-community-link:hover{text-decoration:underline}.rive-settings{margin-top:1rem;padding-top:.75rem;border-top:1px solid var(--border-color)}.rive-settings h4{font-size:.75rem;font-weight:600;margin:0 0 .5rem;color:var(--text-primary)}.rive-setting-row{margin-bottom:.5rem}.rive-setting-row .toggle-label{display:flex;align-items:center;gap:.5rem;font-size:.7rem;color:var(--text-secondary);cursor:pointer;position:relative}.rive-setting-row .toggle-label input[type=checkbox]{width:14px;height:14px;cursor:pointer}.custom-badge{font-size:.55rem;padding:.1rem .25rem;background:var(--success-color, #28a745);color:#fff;border-radius:2px;font-weight:500}.rive-badge{font-size:.55rem;padding:.1rem .25rem;background:#6366f1;color:#fff;border-radius:2px;font-weight:500}.rive-card .avatar-info{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center}.rive-placeholder-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--bg-secondary);color:var(--text-tertiary)}.avatar-head-motion{padding-top:.5rem}.head-motion-select{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.75rem;background:var(--surface)}.head-motion-select:disabled{opacity:.5;cursor:not-allowed}.motion-description{font-size:.65rem;color:var(--text-secondary);margin-top:.25rem}.prerender-progress{padding:.75rem;background:var(--primary-light);border-radius:var(--radius-md);border:1px solid var(--primary-color)}.progress-label{font-size:.75rem;font-weight:500;margin-bottom:.5rem}.progress-bar{height:8px;background:var(--bg-secondary);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:var(--primary-color);transition:width .3s}.progress-percent{font-size:.7rem;text-align:right;margin-top:.25rem;color:var(--primary-color);font-weight:600}.avatar-subtabs{display:flex;gap:4px;padding:4px;background:var(--surface-secondary);border-radius:var(--radius-md);margin-bottom:.75rem}.subtab-btn{flex:1;padding:6px 10px;background:transparent;border:none;border-radius:var(--radius-sm);font-size:.7rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .2s}.subtab-btn:hover{background:var(--surface);color:var(--text-primary)}.subtab-btn.active{background:var(--primary-color);color:#fff}.avatar-subtab-content{min-height:150px}.avatar-ai-generate{padding:.5rem;display:flex;flex-direction:column;gap:.75rem}.ai-generate-hint{font-size:.7rem;color:var(--text-secondary);margin:0}.ai-form-row{display:flex;flex-direction:column;gap:4px}.ai-form-row label{font-size:.7rem;font-weight:500;color:var(--text-secondary)}.style-toggle{display:flex;gap:4px}.style-btn{flex:1;padding:6px 10px;border:1px solid var(--border-color);background:var(--surface);border-radius:var(--radius-sm);font-size:.7rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .2s}.style-btn:hover{border-color:var(--primary-color);color:var(--text-primary)}.style-btn.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.ai-gender-select{padding:6px 8px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.75rem;background:var(--surface)}.ai-description-input{width:100%;padding:8px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.75rem;font-family:inherit;resize:vertical}.ai-description-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #4f46e51a}.ai-generate-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-md);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s}.ai-generate-btn:hover:not(:disabled){background:var(--primary-hover)}.ai-generate-btn:disabled{opacity:.7;cursor:not-allowed}.ai-generate-btn .spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.ai-error{padding:8px 10px;background:#ef44441a;color:var(--error-color);border-radius:var(--radius-sm);font-size:.7rem}.ai-preview{display:flex;flex-direction:column;gap:8px;padding:8px;background:var(--surface-secondary);border-radius:var(--radius-md);border:1px solid var(--border-color)}.ai-preview .preview-image{aspect-ratio:1;max-height:200px;border-radius:var(--radius-sm);overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center}.ai-preview .preview-image img{max-width:80%;max-height:100%;object-fit:contain}.preview-actions{display:flex;flex-direction:column;gap:6px}.ai-name-input{width:100%;padding:6px 8px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.75rem}.preview-buttons{display:flex;gap:6px}.regenerate-btn{flex:1;padding:6px 10px;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.7rem;color:var(--text-secondary);cursor:pointer;transition:all .2s}.regenerate-btn:hover:not(:disabled){border-color:var(--primary-color);color:var(--primary-color)}.regenerate-btn:disabled{opacity:.5;cursor:not-allowed}.save-avatar-btn{flex:1;padding:6px 10px;background:var(--success-color);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.7rem;font-weight:500;cursor:pointer;transition:all .2s}.save-avatar-btn:hover:not(:disabled){background:#059669}.save-avatar-btn:disabled{opacity:.5;cursor:not-allowed}.reference-photo-section{margin-top:4px}.reference-photo-preview{position:relative;display:inline-block;width:80px;height:80px;border-radius:var(--radius-md);overflow:hidden;border:2px solid var(--primary-color)}.reference-photo-preview img{width:100%;height:100%;object-fit:cover}.clear-photo-btn{position:absolute;top:2px;right:2px;width:22px;height:22px;border-radius:50%;background:#ef4444e6;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.clear-photo-btn:hover{background:#dc2626;transform:scale(1.1)}.reference-photo-upload{display:flex;flex-direction:column;gap:4px}.upload-photo-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--surface-secondary);border:2px dashed var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:.75rem;cursor:pointer;transition:all .2s}.upload-photo-btn:hover{border-color:var(--primary-color);color:var(--primary-color);background:#6366f10d}.upload-photo-btn svg{flex-shrink:0}.photo-hint{font-size:.65rem;color:var(--text-tertiary);font-style:italic}.slider-input-group{display:flex;align-items:center;gap:5px;flex:1}.slider-input-group .slider{flex:1;min-width:0}.slider-input-group .value-input{width:50px;padding:3px 5px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.7rem;text-align:center;background:var(--surface-primary);color:var(--text-primary)}.slider-input-group .value-input:focus{outline:none;border-color:var(--primary-color)}.slider-input-group .value-input:disabled{opacity:.5;cursor:not-allowed}.slider-input-group .unit{font-size:.7rem;color:var(--text-tertiary);min-width:20px}.control-row.with-input{display:flex;align-items:center;gap:5px;margin-bottom:.4rem}.control-row.with-input label{min-width:55px;font-size:.7rem;color:var(--text-secondary)}.avatar-transform-controls{padding:.25rem 0}.avatar-transform-controls h4{font-size:.8rem;font-weight:600;margin:0 0 .5rem;color:var(--text-primary)}.reset-transform-btn{width:100%;padding:6px 10px;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.7rem;color:var(--text-secondary);cursor:pointer;transition:all .2s;margin-top:.5rem}.reset-transform-btn:hover:not(:disabled){border-color:var(--primary-color);color:var(--primary-color)}.avatar-overlay{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;pointer-events:none}.avatar-strip{background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:8px;width:100%;height:100%;box-sizing:border-box}.avatar-strip-inner{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-height:95%}.avatar-display{width:100%;height:auto;max-height:90%;border-radius:0;overflow:visible;background:transparent;box-shadow:none;display:flex;align-items:flex-end;justify-content:center}.avatar-display.speaking{filter:drop-shadow(0 0 8px rgba(59,130,246,.4))}.avatar-display.rive-mode{width:100%;height:100%;max-height:100%}.avatar-display.fullbody{aspect-ratio:auto;max-height:90%;background:transparent;display:flex;align-items:flex-end;justify-content:center}.avatar-display.fullbody .avatar-image,.avatar-display.fullbody .avatar-video{object-fit:contain;max-width:80%;max-height:100%;height:auto}.avatar-video{width:100%;height:100%;object-fit:cover}.avatar-static{width:100%;height:100%;position:relative}.avatar-static .avatar-image{width:100%;height:100%;object-fit:cover}.avatar-static.pulsing{animation:avatar-pulse 2s ease-in-out infinite}@keyframes avatar-pulse{0%,to{opacity:1}50%{opacity:.85}}.avatar-pulse-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at center,rgba(59,130,246,.2) 0%,transparent 70%);animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{opacity:.3}50%{opacity:.7}}.avatar-name-tag{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;background:#ffffff1a;border-radius:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.avatar-name-tag .avatar-name{color:#fff;font-size:14px;font-weight:500}.speaking-indicator{display:flex;align-items:center;gap:3px}.speaking-indicator .dot{width:4px;height:4px;background:#22c55e;border-radius:50%;animation:speaking-dot 1.4s ease-in-out infinite}.speaking-indicator .dot:nth-child(2){animation-delay:.2s}.speaking-indicator .dot:nth-child(3){animation-delay:.4s}@keyframes speaking-dot{0%,60%,to{transform:scale(1);opacity:.5}30%{transform:scale(1.3);opacity:1}}.avatar-strip-preview{width:100%;aspect-ratio:3/4;max-height:200px;background:linear-gradient(to bottom,#1a1a2e,#16213e);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.avatar-strip-preview.disabled{background:var(--bg-secondary)}.avatar-strip-preview .preview-placeholder{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--text-secondary)}.avatar-strip-preview .preview-placeholder span{font-size:.7rem}.avatar-strip-preview .preview-image{width:60%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-md)}.avatar-strip-preview .preview-name{color:#fff;font-size:.75rem;margin-top:.5rem}.avatar-transform-controls{margin-top:1rem;padding:.75rem;background:var(--surface-secondary);border-radius:var(--radius-md)}.avatar-transform-controls h4{margin:0 0 .75rem;font-size:.85rem;color:var(--text-primary)}.avatar-transform-controls .control-row{display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem}.avatar-transform-controls .control-row label{width:50px;font-size:.7rem;color:var(--text-secondary);flex-shrink:0}.avatar-transform-controls .control-row input[type=range]{flex:1;height:4px;background:var(--border-color);border-radius:2px;cursor:pointer}.avatar-transform-controls .control-row input[type=range]::-webkit-slider-thumb{width:14px;height:14px;background:var(--primary-color);border-radius:50%;cursor:pointer;-webkit-appearance:none}.avatar-transform-controls .control-value{width:50px;text-align:right;font-size:.7rem;color:var(--text-secondary);flex-shrink:0}.reset-transform-btn{width:100%;margin-top:.5rem;padding:.4rem .75rem;font-size:.75rem;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.reset-transform-btn:hover:not(:disabled){background:var(--surface-secondary);color:var(--text-primary)}.reset-transform-btn:disabled{opacity:.5;cursor:not-allowed}.ai-image-thumbnails{margin-top:1rem;padding:.75rem;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-md)}.ai-image-thumbnails .thumbnails-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.ai-image-thumbnails h4{font-size:.8rem;font-weight:600;margin:0;color:var(--text-primary)}.ai-image-thumbnails .view-all-btn{font-size:.7rem;padding:.25rem .5rem;background:var(--surface-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.ai-image-thumbnails .view-all-btn:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.thumbnail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.thumbnail-item{aspect-ratio:1;border:2px solid var(--border-color);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;transition:all .2s ease;background:#fff}.thumbnail-item:hover{border-color:var(--primary-color);transform:scale(1.05);box-shadow:0 2px 8px #00000026}.thumbnail-item img{width:100%;height:100%;object-fit:cover;display:block}.image-lightbox{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:10000;cursor:pointer;animation:fadeIn .2s ease}.lightbox-content{position:relative;max-width:90vw;max-height:90vh;cursor:default;animation:scaleIn .2s ease}@keyframes scaleIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.lightbox-content img{max-width:80%;max-height:90vh;display:block;border-radius:var(--radius-md);box-shadow:0 4px 20px #00000080}.lightbox-close{position:absolute;top:-40px;right:0;background:#ffffffe6;border:none;border-radius:50%;width:32px;height:32px;font-size:24px;line-height:1;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;color:var(--text-primary)}.lightbox-close:hover{background:#fff;transform:scale(1.1)}.lightbox-info{position:absolute;bottom:-40px;left:0;right:0;text-align:center;color:#fff}.lightbox-info .image-name{font-size:.875rem;margin:0;text-shadow:0 2px 4px rgba(0,0,0,.5)}.script-editor-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--surface);z-index:9999;display:flex;flex-direction:column}.script-editor-container{width:100%;height:100%;display:flex;flex-direction:column}.script-editor-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:1px solid var(--border-color);background:var(--surface-secondary)}.script-editor-header h2{font-size:1.1rem;font-weight:600;margin:0;color:var(--text-primary)}.script-editor-header .close-btn{background:none;border:none;font-size:2rem;line-height:1;cursor:pointer;color:var(--text-secondary);transition:color .2s ease;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.script-editor-header .close-btn:hover{color:var(--text-primary)}.script-editor-toolbar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;border-bottom:1px solid var(--border-color);background:var(--surface)}.toolbar-left{display:flex;align-items:center;gap:1rem}.toolbar-left .search-input{padding:.4rem .75rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.875rem;width:300px;background:var(--surface-secondary)}.toolbar-left .match-count{font-size:.8rem;color:var(--text-secondary)}.toolbar-right{display:flex;gap:.5rem}.toolbar-btn{padding:.4rem .75rem;font-size:.875rem;background:var(--surface-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;transition:all .2s ease}.toolbar-btn:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.script-editor-error{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#fee;border-bottom:1px solid #fcc;color:#c33;font-size:.875rem}.script-editor-main{flex:1;display:flex;overflow:hidden;background:var(--surface-secondary)}.editor-gutter{width:60px;background:var(--surface);border-right:1px solid var(--border-color);overflow-y:auto;padding:.5rem 0;-webkit-user-select:none;user-select:none}.line-number{text-align:right;padding:0 .75rem;font-family:Courier New,monospace;font-size:.875rem;line-height:1.5;color:var(--text-secondary);height:21px}.editor-textarea{flex:1;padding:.5rem 1rem;font-family:Courier New,monospace;font-size:.875rem;line-height:1.5;border:none;outline:none;resize:none;background:var(--surface-secondary);color:var(--text-primary);overflow-y:auto;-moz-tab-size:2;tab-size:2}.script-editor-footer{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;border-top:1px solid var(--border-color);background:var(--surface)}.footer-stats{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-secondary)}.footer-actions{display:flex;gap:.75rem}.cancel-btn,.save-btn{padding:.5rem 1.25rem;font-size:.875rem;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease}.cancel-btn{background:var(--surface-secondary);border:1px solid var(--border-color);color:var(--text-primary)}.cancel-btn:hover{background:var(--surface)}.save-btn{background:var(--primary-color);border:1px solid var(--primary-color);color:#fff;font-weight:500}.save-btn:hover{background:#5b21b6;border-color:#5b21b6}.generation-settings-section{margin-bottom:1rem;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:.75rem}.generation-settings-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;font-weight:500;font-size:.875rem;color:var(--text)}.generation-settings-header svg{flex-shrink:0}.generation-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.generation-setting-item{display:flex;flex-direction:column;gap:.4rem}.generation-setting-item label{font-size:.75rem;font-weight:500;color:var(--text)}.input-with-hint{display:flex;flex-direction:column;gap:.25rem}.input-with-hint small{font-size:.65rem;color:var(--text-secondary)}.number-input{width:100%;padding:.5rem .75rem;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.875rem;font-family:inherit;color:var(--text);transition:all .2s}.number-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #667eea1a}.number-input:disabled{opacity:.6;cursor:not-allowed}.duration-input-group{display:flex;align-items:center;gap:.5rem}.input-suffix{font-size:.75rem;color:var(--text-secondary);white-space:nowrap}.generation-settings-compact{margin-bottom:.75rem;padding:.5rem .75rem;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-md)}.compact-settings-header{margin-bottom:.35rem;font-size:.7rem;font-weight:600;color:var(--text-primary)}.compact-settings-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}.compact-setting-item{display:flex;flex-direction:column;gap:.15rem}.compact-setting-item label{font-size:.65rem;font-weight:500;color:var(--text);white-space:nowrap}.compact-number-input{width:100%;padding:.3rem .4rem;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.7rem;font-family:inherit;color:var(--text);transition:all .2s}.compact-number-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #667eea1a}.compact-number-input:disabled{opacity:.6;cursor:not-allowed}.background-generator{display:flex;flex-direction:column;gap:1.25rem;padding:1rem}.background-generator-header h4{margin:0 0 .25rem;font-size:1rem;font-weight:600;color:var(--text)}.generator-description{margin:0;font-size:.75rem;color:var(--text-secondary);line-height:1.4}.section-label{display:block;font-size:.75rem;font-weight:600;color:var(--text);margin-bottom:.5rem}.category-selection{display:flex;flex-direction:column}.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem}.category-card{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.75rem;background:var(--surface);border:1.5px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all .2s;text-align:center}.category-card:hover:not(:disabled){border-color:var(--primary-color);background:var(--background)}.category-card.selected{border-color:var(--primary-color);background:#667eea14}.category-card:disabled{opacity:.6;cursor:not-allowed}.category-card svg{flex-shrink:0;color:var(--text-secondary)}.category-card.selected svg{color:var(--primary-color)}.category-name{font-size:.75rem;font-weight:600;color:var(--text)}.category-desc{font-size:.65rem;color:var(--text-secondary);line-height:1.3}.style-selection{display:flex;flex-direction:column}.style-list{display:flex;flex-direction:column;gap:.4rem;max-height:240px;overflow-y:auto;padding:.25rem}.style-item{display:flex;align-items:center;justify-content:space-between;padding:.6rem .75rem;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;text-align:left}.style-item:hover:not(:disabled){border-color:var(--primary-color);background:var(--background)}.style-item.selected{border-color:var(--primary-color);background:#667eea14}.style-item:disabled{opacity:.6;cursor:not-allowed}.style-info{display:flex;flex-direction:column;gap:.15rem;flex:1}.style-name{font-size:.75rem;font-weight:600;color:var(--text)}.style-description{font-size:.65rem;color:var(--text-secondary);line-height:1.3}.style-item svg{flex-shrink:0;color:var(--primary-color)}.custom-modifiers{display:flex;flex-direction:column;gap:.35rem}.modifier-input{width:100%;padding:.5rem .75rem;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.75rem;font-family:inherit;color:var(--text);transition:all .2s}.modifier-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #667eea1a}.modifier-input:disabled{opacity:.6;cursor:not-allowed}.input-hint{font-size:.65rem;color:var(--text-secondary);line-height:1.3}.generate-bg-button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-md);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.generate-bg-button:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.generate-bg-button:active:not(:disabled){transform:translateY(0)}.generate-bg-button:disabled{opacity:.6;cursor:not-allowed}.generation-error{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-sm);font-size:.75rem;color:#dc2626}.generation-error svg{flex-shrink:0}.prompt-preview{display:flex;flex-direction:column;gap:.35rem}.prompt-text{padding:.6rem .75rem;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.65rem;color:var(--text-secondary);line-height:1.5;max-height:80px;overflow-y:auto}.recent-backgrounds{display:flex;flex-direction:column;gap:.5rem}.background-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem}.background-preview{position:relative;aspect-ratio:16 / 9;border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;border:2px solid var(--border-color);transition:all .2s}.background-preview:hover{border-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.background-preview img{width:100%;height:100%;object-fit:cover}.preview-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.25rem;padding:.5rem;opacity:0;transition:opacity .2s}.background-preview:hover .preview-overlay{opacity:1}.preview-name{font-size:.65rem;font-weight:600;color:#fff;text-align:center}.use-button{padding:.25rem .75rem;background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.65rem;font-weight:600;cursor:pointer;transition:all .2s}.use-button:hover{background:var(--primary-hover)}.layer-controls-section{margin-top:1.5rem;padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:8px}.layer-controls-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;color:var(--text-primary);font-weight:500}.layer-controls-grid{display:grid;gap:1rem}.layer-control-item{display:flex;flex-direction:column;gap:.5rem}.control-label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:var(--text-secondary)}.control-label input[type=checkbox]{width:18px;height:18px;cursor:pointer}.spinner-control{display:flex;align-items:center;gap:.5rem;position:relative}.spinner-input{flex:1;padding:.5rem 2.5rem .5rem .75rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-primary);color:var(--text-primary);font-size:.875rem;font-family:Segoe UI,system-ui,sans-serif;transition:all .2s ease}.spinner-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #3b82f61a}.spinner-input:disabled{opacity:.5;cursor:not-allowed}.spinner-buttons{display:flex;flex-direction:column;gap:0;position:absolute;right:3rem;top:50%;transform:translateY(-50%)}.spinner-btn{display:flex;align-items:center;justify-content:center;width:24px;height:14px;padding:0;border:none;background:var(--surface);color:var(--text-secondary);cursor:pointer;transition:all .15s ease}.spinner-btn:first-child{border-top-right-radius:4px;border-bottom:.5px solid var(--border)}.spinner-btn:last-child{border-bottom-right-radius:4px}.spinner-btn:hover:not(:disabled){background:var(--hover);color:var(--primary)}.spinner-btn:active:not(:disabled){background:var(--active)}.spinner-btn:disabled{opacity:.3;cursor:not-allowed}.spinner-suffix{font-size:.875rem;color:var(--text-secondary);font-weight:500;min-width:2rem;text-align:left}@media (min-width: 768px){.layer-controls-grid{grid-template-columns:auto 1fr 1fr;align-items:center}.layer-control-item:first-child{grid-column:span 3}}.number-input.duration-input{min-width:100px;width:100px}.intro-outro-settings.compact{display:flex;flex-direction:column;height:100%;overflow:hidden;padding:0}.slide-selector{display:flex;gap:.4rem;padding:.5rem;background:var(--surface);border-bottom:1px solid var(--border-color)}.slide-pill{flex:1;display:flex;align-items:center;justify-content:center;gap:.3rem;padding:.35rem .5rem;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.7rem;font-weight:500;color:var(--text);cursor:pointer;transition:all .2s}.slide-pill:hover{border-color:var(--primary-color);background:var(--surface)}.slide-pill.active{border-color:var(--primary-color);background:var(--primary-color);color:#fff}.slide-pill svg{flex-shrink:0}.intro-outro-controls{flex-shrink:0;padding:.4rem .5rem;background:var(--background);border-bottom:1px solid var(--border-color);display:flex;flex-direction:column;gap:.3rem;overflow-y:auto}.intro-outro-controls .settings-section{padding:0;background:transparent;border:none;margin-bottom:0;gap:.3rem}.inline-controls{display:flex;gap:.75rem;align-items:center;flex-wrap:nowrap}.control-group{display:flex;align-items:center;gap:.3rem}.control-label{font-size:.65rem;color:var(--text);font-weight:500;white-space:nowrap}.slider-input-group.compact{display:flex;align-items:center;gap:.25rem;flex:1;max-width:180px}.slider-input-group.compact .slider{flex:1;min-width:60px;max-width:100px;height:3px}.slider-input-group.compact .value-input{width:42px;padding:.2rem .3rem;font-size:.65rem}.slider-input-group.compact .unit{font-size:.6rem;color:var(--text-secondary)}.form-grid{display:grid;grid-template-columns:1fr;gap:.5rem}.form-field{display:flex;flex-direction:column;gap:.25rem}.form-field label{font-size:.65rem;font-weight:500;color:var(--text-secondary)}.form-field.full-width{grid-column:1 / -1}.text-input.compact{width:100%;padding:.4rem .5rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-family:inherit;font-size:.7rem;background:var(--surface);color:var(--text)}.text-input.compact:focus{outline:none;border-color:var(--primary-color)}.textarea-input.compact{width:100%;padding:.4rem .5rem;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-family:inherit;font-size:.7rem;resize:vertical;background:var(--surface);color:var(--text);line-height:1.3}.textarea-input.compact:focus{outline:none;border-color:var(--primary-color)}.image-uploads-row{display:flex;gap:.5rem}.upload-group{flex:1;display:flex;flex-direction:column;gap:.25rem}.upload-group label{font-size:.65rem;font-weight:500;color:var(--text-secondary);display:flex;align-items:center;gap:.3rem}.upload-group .count{font-size:.6rem;color:var(--text-muted);font-weight:400}.upload-actions{display:flex;gap:.3rem}.file-input{display:none}.file-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.3rem;padding:.35rem .5rem;background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.65rem;font-weight:500;cursor:pointer;transition:all .2s}.file-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.file-btn svg{flex-shrink:0;width:12px;height:12px}.remove-btn{padding:.35rem;background:var(--error-color);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.remove-btn:hover{background:#c53030;transform:translateY(-1px)}.intro-outro-preview{flex:1;display:flex;align-items:center;justify-content:center;padding:.75rem;background:var(--background);overflow:hidden;min-height:0}.preview-container{position:relative;width:100%;height:100%;max-width:800px;max-height:450px;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 4px 16px #0000001a}.preview-image{width:100%;height:100%;object-fit:cover}.preview-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent 50%);display:flex;align-items:flex-end;padding:2rem}.preview-content{width:100%}.preview-title{font-size:2rem;font-weight:700;color:#fff;margin:0 0 .5rem;text-shadow:0 2px 8px rgba(0,0,0,.5)}.preview-text{font-size:1.25rem;color:#ffffffe6;margin:0;text-shadow:0 1px 4px rgba(0,0,0,.5);line-height:1.5}.preview-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;text-align:center;color:var(--text-secondary)}.preview-empty p{font-size:.875rem;margin:0;color:var(--text)}.preview-empty small{font-size:.75rem;color:var(--text-muted)}.disabled-message{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;text-align:center;padding:2rem}.disabled-message span{font-size:.875rem;color:var(--text-secondary)}.section-header{font-size:.65rem;font-weight:600;color:var(--text);margin:0 0 .35rem;padding-bottom:.25rem;border-bottom:1px solid var(--border-color)}.position-controls{display:flex;flex-direction:column;gap:.25rem}.control-row{display:flex;flex-direction:row;align-items:center;gap:.4rem}.control-row label{font-size:.6rem;font-weight:500;color:var(--text);margin-bottom:0;min-width:50px;flex-shrink:0}.reset-btn.compact{padding:.3rem .6rem;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.65rem;color:var(--text);cursor:pointer;transition:all .2s;margin-top:.15rem}.reset-btn.compact:hover{background:var(--background);border-color:var(--primary-color);color:var(--primary-color)}.spinbox-input.compact{width:50px;padding:.3rem .4rem;text-align:center;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-family:inherit;font-size:.7rem;background:var(--surface);color:var(--text)}.spinbox-input.compact:focus{outline:none;border-color:var(--primary-color)}.duration-inline{display:flex;align-items:center;gap:.3rem}.section-header-with-actions{display:flex;align-items:center;justify-content:space-between;margin-bottom:.2rem;margin-top:.2rem}.section-header-with-actions .section-header{font-size:.65rem;margin:0;font-weight:600}.reset-icon-btn{padding:.3rem;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}.reset-icon-btn svg{width:14px;height:14px}.reset-icon-btn:hover{border-color:var(--primary-color);color:var(--primary-color);background:#4f46e50d}.file-btn .btn-text-white{color:#fff;font-weight:500}.intro-outro-settings-content{padding:1rem}.settings-divider{height:1px;background:var(--border);margin:1.5rem 0}.image-preview{width:100%;max-width:400px;height:auto;margin-top:.5rem;border-radius:var(--radius-sm);border:1px solid var(--border)}.ai-images-section-divider{margin:1rem 0;height:1px;background:var(--border-color)}.current-animation-images{display:flex;flex-direction:column;gap:.75rem;padding:.75rem 0}.images-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.images-header h4{font-size:.8rem;font-weight:600;margin:0;color:var(--text)}.add-image-dropdown{position:relative}.add-image-btn{display:flex;align-items:center;gap:.4rem;padding:.35rem .6rem;background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.7rem;font-weight:500;cursor:pointer;transition:all .2s}.add-image-btn:hover{background:var(--primary-color-hover);transform:translateY(-1px)}.add-image-btn svg{flex-shrink:0}.add-options-menu{position:absolute;top:calc(100% + .25rem);right:0;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;min-width:180px;overflow:hidden;z-index:1000}.add-options-menu button{display:flex;align-items:center;gap:.5rem;padding:.6rem .75rem;background:transparent;border:none;font-size:.75rem;font-weight:500;color:var(--text);cursor:pointer;transition:background .2s;text-align:left}.add-options-menu button:hover{background:var(--background)}.add-options-menu button svg{flex-shrink:0;color:var(--primary-color)}.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.image-card{background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;transition:all .2s}.image-card:hover{border-color:var(--primary-color);box-shadow:var(--shadow-md)}.scene-label{background:var(--background);padding:.3rem .5rem;font-size:.65rem;font-weight:600;color:var(--text-secondary);text-align:center;border-bottom:1px solid var(--border-color)}.image-thumbnail{width:100%;height:100px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--background)}.image-thumbnail img{width:100%;height:100%;object-fit:cover}.image-info{padding:.4rem .5rem;border-bottom:1px solid var(--border-color)}.image-prompt{font-size:.65rem;color:var(--text);margin:0;line-height:1.3}.image-actions{display:flex;gap:.25rem;padding:.35rem;background:var(--background)}.action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.3rem;padding:.35rem .4rem;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.65rem;font-weight:500;cursor:pointer;transition:all .2s}.action-btn svg{flex-shrink:0}.action-btn.replace-btn{color:var(--primary-color)}.action-btn.replace-btn:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.action-btn.delete-btn{color:#dc2626}.action-btn.delete-btn:hover{background:#dc2626;color:#fff;border-color:#dc2626}.no-images-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;text-align:center;color:var(--text-secondary)}.no-images-state svg{margin-bottom:.75rem}.no-images-state p{margin:0 0 .25rem;font-size:.8rem;font-weight:500;color:var(--text)}.no-images-state small{font-size:.7rem;color:var(--text-secondary)}.image-thumbnail.clickable{position:relative;cursor:pointer;transition:all .2s}.image-thumbnail.clickable:hover{transform:scale(1.02)}.thumbnail-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.image-thumbnail.clickable:hover .thumbnail-overlay{opacity:1}.action-btn.preview-btn{color:var(--primary-color)}.action-btn.preview-btn:hover{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.action-btn.download-btn{color:#059669}.action-btn.download-btn:hover{background:#059669;color:#fff;border-color:#059669}.action-btn.regenerate-btn{color:#d97706}.action-btn.regenerate-btn:hover{background:#d97706;color:#fff;border-color:#d97706}.image-preview-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:2rem;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1}.modal-content{position:relative;z-index:2;background:#fff;border-radius:12px;box-shadow:0 25px 50px -12px #00000040;max-width:90vw;max-height:90vh;min-width:400px;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-close-btn{position:absolute;top:1rem;right:1rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#00000080;border:none;border-radius:50%;color:#fff;cursor:pointer;transition:all .2s;z-index:10}.modal-close-btn:hover{background:#000c;transform:scale(1.1)}.modal-image-container{display:flex;align-items:center;justify-content:center;padding:3rem 2rem 1rem;background:#f3f4f6;min-height:300px;overflow:auto}.modal-image-container img{display:block;max-width:80vw;max-height:70vh;min-width:200px;min-height:150px;width:auto;height:auto;object-fit:contain;border-radius:8px;border:1px solid #e5e7eb}.modal-image-info{padding:1rem 1.5rem;background:var(--surface);border-top:1px solid var(--border-color)}.modal-image-info h4{font-size:.75rem;font-weight:600;color:var(--text-secondary);margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.05em}.modal-image-info p{font-size:.85rem;color:var(--text);margin:0;line-height:1.5}.recent-ai-images-section{margin-top:1rem}.recent-ai-images-section h4{font-size:.75rem;font-weight:600;margin-bottom:.5rem;color:var(--text-primary)}.intro-outro-quick-toggle{margin-bottom:.75rem;padding:.75rem;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-md)}.quick-toggle-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-size:.75rem;font-weight:600;color:var(--text-primary)}.quick-toggle-header .link-button{background:none;border:none;color:var(--primary-color);font-size:.7rem;cursor:pointer;padding:0}.quick-toggle-header .link-button:hover{text-decoration:underline}.quick-toggle-controls{display:flex;flex-direction:column;gap:.5rem}.toggle-label{position:relative;display:flex;align-items:center;gap:.5rem;font-size:.75rem;cursor:pointer}.toggle-label input[type=checkbox]{cursor:pointer}.toggle-preview{font-size:.7rem;color:var(--text-secondary);font-style:italic}.background-generator-compact{display:flex;flex-direction:column;height:100%;overflow:hidden}.bg-controls-compact{flex-shrink:0;padding:.75rem;background:var(--surface);border-bottom:1px solid var(--border-color);display:flex;flex-direction:column;gap:.5rem}.category-pills{display:flex;gap:.4rem;flex-wrap:wrap}.category-pill{padding:.35rem .65rem;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.7rem;font-weight:500;color:var(--text);cursor:pointer;transition:all .15s;white-space:nowrap}.category-pill:hover:not(:disabled){border-color:var(--primary-color);background:var(--surface)}.category-pill.selected{border-color:var(--primary-color);background:var(--primary-color);color:#fff}.category-pill:disabled{opacity:.5;cursor:not-allowed}.style-generate-row{display:flex;gap:.5rem}.style-select-compact{flex:1;padding:.5rem .75rem;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.75rem;color:var(--text);cursor:pointer;transition:all .2s}.style-select-compact:hover:not(:disabled){border-color:var(--primary-color)}.style-select-compact:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #667eea1a}.style-select-compact:disabled{opacity:.5;cursor:not-allowed}.generate-btn-compact{display:flex;align-items:center;gap:.4rem;padding:.5rem 1rem;background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.generate-btn-compact:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 2px 8px #667eea4d}.generate-btn-compact:disabled{opacity:.6;cursor:not-allowed;transform:none}.generate-btn-compact svg{flex-shrink:0}.modifier-input-compact{width:100%;padding:.45rem .65rem;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:.7rem;color:var(--text);transition:all .2s}.modifier-input-compact::placeholder{color:var(--text-secondary);opacity:.6}.modifier-input-compact:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #667eea1a}.modifier-input-compact:disabled{opacity:.5;cursor:not-allowed}.generation-error-compact{display:flex;align-items:center;gap:.4rem;padding:.5rem .65rem;background:#dc26261a;border:1px solid rgba(220,38,38,.3);border-radius:var(--radius-sm);color:#dc2626;font-size:.7rem}.generation-error-compact svg{flex-shrink:0}.bg-gallery-section{flex:1;overflow-y:auto;padding:.75rem;background:var(--background)}.gallery-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:300px;text-align:center;color:var(--text-secondary)}.gallery-empty-state p{margin:.75rem 0 .25rem;font-size:.875rem;font-weight:500;color:var(--text)}.gallery-empty-state small{font-size:.7rem;color:var(--text-secondary)}.bg-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem}.bg-gallery-item{position:relative;aspect-ratio:16 / 9;border-radius:var(--radius-md);overflow:hidden;background:var(--surface);border:2px solid var(--border-color);transition:all .2s;cursor:pointer}.bg-gallery-item:hover{border-color:var(--primary-color);transform:translateY(-2px);box-shadow:0 4px 16px #00000026}.bg-gallery-item img{width:100%;height:100%;object-fit:cover;display:block}.bg-item-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(0,0,0,.85),transparent 50%);display:flex;flex-direction:column;justify-content:flex-end;padding:.75rem;opacity:0;transition:opacity .2s}.bg-gallery-item:hover .bg-item-overlay{opacity:1}.bg-item-info{margin-bottom:.5rem}.bg-item-name{font-size:.75rem;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}.bg-item-actions{display:flex;gap:.5rem}.bg-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.4rem .65rem;background:#fffffff2;border:none;border-radius:var(--radius-sm);font-size:.7rem;font-weight:600;color:var(--text);cursor:pointer;transition:all .15s}.bg-action-btn:hover{background:#fff;transform:translateY(-1px);box-shadow:0 2px 6px #0003}.bg-action-btn:active{transform:translateY(0)}.bg-action-btn svg{flex-shrink:0}.bg-action-btn:first-child{background:var(--primary-color);color:#fff}.bg-action-btn:first-child:hover{background:var(--primary-hover)}.format-selector{display:flex;flex-direction:column;gap:1rem}.format-section{display:flex;flex-direction:column;gap:.5rem}.format-label{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.aspect-ratio-buttons{display:flex;gap:.5rem}.aspect-ratio-button{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem;background:var(--background);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all .2s;color:var(--text-secondary)}.aspect-ratio-button:hover:not(:disabled){background:var(--surface);color:var(--text-primary)}.aspect-ratio-button.active{border-color:var(--primary-color);background:#4f46e51a;color:var(--primary-color)}.aspect-ratio-button:disabled{opacity:.4;cursor:not-allowed}.aspect-ratio-preview{display:block}.ratio-label{font-size:.65rem;font-weight:500}.platform-buttons{display:flex;flex-direction:column;gap:.375rem}.platform-button{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--background);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all .2s;color:var(--text-secondary);text-align:left}.platform-button:hover:not(:disabled){background:var(--surface);color:var(--text-primary)}.platform-button.active{border-color:var(--primary-color);background:#4f46e51a;color:var(--primary-color)}.platform-button:disabled{opacity:.4;cursor:not-allowed}.platform-button svg{flex-shrink:0}.platform-name{flex:1;font-size:.8rem;font-weight:500}.platform-resolution{font-size:.7rem;color:var(--text-muted)}.format-info{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:var(--surface);border-radius:var(--radius-md);font-size:.75rem}.format-info-label{color:var(--text-secondary)}.format-info-value{color:var(--text-primary);font-weight:500}.workflow-panel{display:flex;flex-direction:column;height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}.workflow-panel::-webkit-scrollbar{width:6px}.workflow-panel::-webkit-scrollbar-track{background:transparent}.workflow-panel::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px}.workflow-section{border-bottom:1px solid var(--border-color)}.workflow-section:last-child{border-bottom:none}.workflow-section.disabled{opacity:.5;pointer-events:none}.workflow-section-header{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:var(--surface);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .15s ease}.workflow-section-header:hover{background:var(--surface-hover)}.workflow-section-header:focus{outline:2px solid var(--primary-color);outline-offset:-2px}.workflow-section-icon{display:flex;align-items:center;justify-content:center;color:var(--text-secondary);flex-shrink:0}.workflow-section.expanded .workflow-section-icon{color:var(--primary-color)}.workflow-section-title{flex:1;font-size:.85rem;font-weight:600;color:var(--text-primary)}.workflow-section-badge{padding:.15rem .4rem;background:var(--primary-color);color:#fff;font-size:.65rem;font-weight:600;border-radius:var(--radius-sm);text-transform:uppercase}.workflow-section-badge:empty{display:none}.workflow-section-chevron{color:var(--text-muted);transition:transform .2s ease;flex-shrink:0}.workflow-section-chevron.rotated{transform:rotate(180deg)}.workflow-section-content{overflow:hidden;transition:max-height .25s ease,opacity .2s ease;background:var(--background)}.workflow-section-content.visible{max-height:2000px;opacity:1;padding:.75rem 1rem}.workflow-section-content.hidden{max-height:0;opacity:0;padding:0 1rem}.workflow-placeholder{display:flex;align-items:center;justify-content:center;padding:1.5rem;color:var(--text-muted);font-size:.8rem;text-align:center;background:var(--surface);border-radius:var(--radius-md);border:1px dashed var(--border-color)}.panel-left.workflow-mode{width:360px}@media (max-width: 1200px){.panel-left.workflow-mode{width:320px}}@media (max-width: 1024px){.panel-left.workflow-mode{width:100%}}.output-panel{display:flex;flex-direction:column;gap:1rem;padding:.75rem;height:100%;overflow-y:auto}.output-section{display:flex;flex-direction:column;gap:.75rem}.output-section-title{font-size:.8rem;font-weight:600;color:var(--text-secondary);margin:0;text-transform:uppercase;letter-spacing:.05em}.export-section{padding-top:.5rem;border-top:1px solid var(--border-color)}.export-button{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.75rem 1rem;background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-md);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.export-button:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px)}.export-button:disabled,.export-button.disabled{background:var(--surface);color:var(--text-muted);cursor:not-allowed;transform:none}.export-button.exporting{background:var(--info-color);cursor:wait}.export-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.export-hint{font-size:.75rem;color:var(--text-muted);text-align:center;margin:.5rem 0 0}.export-progress{padding:.5rem 0}.export-progress-bar{height:4px;background:var(--surface);border-radius:2px;overflow:hidden}.export-progress-fill{height:100%;background:var(--primary-color);transition:width .3s ease}.advanced-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.5rem;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:.8rem;cursor:pointer;transition:all .2s}.advanced-toggle:hover{background:var(--surface-hover);color:var(--text-primary)}.toggle-chevron{transition:transform .2s}.toggle-chevron.open{transform:rotate(180deg)}.advanced-options{padding:.75rem;background:var(--surface);border:1px solid var(--border-color);border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md)}.advanced-placeholder{font-size:.75rem;color:var(--text-muted);text-align:center;margin:0}.workflow-music-controls{display:flex;flex-direction:column;gap:.75rem}.workflow-toggle{display:flex;align-items:center;justify-content:space-between;padding:.5rem;background:var(--surface);border-radius:var(--radius-md);cursor:pointer}.workflow-toggle span{font-size:.85rem;color:var(--text-primary)}.workflow-toggle input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary-color);cursor:pointer}.workflow-music-options{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;background:var(--surface);border-radius:var(--radius-md)}.workflow-music-options select{width:100%;padding:.5rem;background:var(--background);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:.8rem}.workflow-music-options input[type=range]{width:100%;accent-color:var(--primary-color)}.ui-mode-toggle{display:flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:.7rem;color:var(--text-secondary);cursor:pointer;transition:all .2s}.ui-mode-toggle:hover{background:var(--surface-hover);color:var(--text-primary)}.ui-mode-toggle.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.ui-mode-toggle svg{width:14px;height:14px}.app.fullscreen-recording .app-header,.app.fullscreen-recording .panel-left,.app.fullscreen-recording .panel-right{display:none!important}.app.fullscreen-recording .app-main{padding:0;width:100vw;height:100vh}.app.fullscreen-recording .panel-center{width:100vw;height:100vh;max-width:none;flex:none;background:#000}.app.fullscreen-recording .canvas-wrapper{background:#000;width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.app.fullscreen-recording .canvas-tab-bar,.app.fullscreen-recording .playback-controls,.app.fullscreen-recording .canvas-progress-bar,.app.fullscreen-recording .subtitle-overlay,.app.fullscreen-recording .animation-name-display,.app.fullscreen-recording .canvas-zoom-controls,.app.fullscreen-recording .scene-position-display{display:none!important}.app.fullscreen-recording .doodle-canvas-wrapper{position:relative;max-width:100%;max-height:100%;width:auto;height:auto;aspect-ratio:var(--canvas-aspect-ratio, 16 / 9);display:flex;align-items:center;justify-content:center}.app.fullscreen-recording .doodle-canvas-container{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}.app.fullscreen-recording .browser-canvas{max-width:100%;max-height:100%;width:100%;height:100%}.app.fullscreen-recording .browser-toolbar,.app.fullscreen-recording .browser-info-banner,.app.fullscreen-recording .browser-notes{display:none!important}.app.fullscreen-recording .browser-iframe-container{width:100%;height:100%;border-radius:0}.app.fullscreen-recording .ai-image-overlay,.app.fullscreen-recording .avatar-overlay,.app.fullscreen-recording .intro-outro-text-overlay,.app.fullscreen-recording .scene-text-overlay{display:block}.fullscreen-record-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;border:2px solid #3b82f6;border-radius:var(--radius-md);font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;margin-bottom:12px}.fullscreen-record-btn:hover:not(:disabled){background:linear-gradient(135deg,#16213e,#1a1a2e);border-color:#60a5fa;transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.fullscreen-record-btn:disabled{opacity:.5;cursor:not-allowed}.fullscreen-record-btn svg{width:20px;height:20px}.fullscreen-record-btn .rec-dot{width:10px;height:10px;background:#ef4444;border-radius:50%;animation:pulse-dot 1.5s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.9)}}.popup-blocked-warning{display:flex;align-items:flex-start;gap:8px;padding:12px;background:#fbbf241a;border:1px solid rgba(251,191,36,.3);border-radius:var(--radius-md);margin-bottom:12px}.popup-blocked-warning svg{flex-shrink:0;width:18px;height:18px;color:#fbbf24}.popup-blocked-warning .warning-text{flex:1}.popup-blocked-warning .warning-title{font-size:.85rem;font-weight:600;color:#fbbf24;margin-bottom:4px}.popup-blocked-warning .warning-desc{font-size:.75rem;color:var(--text-secondary);line-height:1.4}.popup-blocked-warning .allow-popup-btn{padding:6px 12px;background:#fbbf24;color:#1a1a2e;border:none;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;cursor:pointer;transition:background .2s;margin-top:8px}.popup-blocked-warning .allow-popup-btn:hover{background:#f59e0b}.fullscreen-exit-hint{position:fixed;bottom:20px;right:20px;padding:8px 16px;background:#000000b3;color:#fff;border-radius:20px;font-size:12px;z-index:10000;pointer-events:none;opacity:0;animation:fadeInOut 3s ease-in-out forwards}@keyframes fadeInOut{0%{opacity:0}10%{opacity:1}80%{opacity:1}to{opacity:0}}.browser-tab-recording-boundary{position:absolute;top:48px;left:0;right:0;bottom:0;pointer-events:none;z-index:999;border:2px dashed rgba(239,68,68,.5);border-radius:4px;box-shadow:inset 0 0 0 2px #ffffff4d,0 0 0 9999px #00000026}.browser-tab-recording-boundary:before,.browser-tab-recording-boundary:after{content:"";position:absolute;background:#ef444499}.browser-tab-recording-boundary:before{top:0;left:0;width:20px;height:2px;box-shadow:0 0 #ef444499,0 18px #ef444499}.browser-tab-recording-boundary:after{top:0;left:0;width:2px;height:20px;box-shadow:0 0 #ef444499,18px 0 #ef444499}.browser-tab-recording-label{position:absolute;top:8px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;padding:4px 12px;background:#ef4444e6;color:#fff;font-size:11px;font-weight:500;border-radius:12px;white-space:nowrap;box-shadow:0 2px 8px #0003;z-index:1000}.browser-tab-recording-label .recording-dot{width:6px;height:6px;background:#fff;border-radius:50%;animation:recording-pulse 1.5s ease-in-out infinite}@keyframes recording-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.recording .browser-tab-recording-boundary{display:none}.browser-tab-container:hover .browser-tab-recording-boundary{border-color:#ef4444b3}.browser-tab-recording-boundary .corner-markers{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.browser-tab-recording-boundary .corner-markers:before{content:"";position:absolute;top:0;right:0;width:20px;height:20px;border-top:2px solid rgba(239,68,68,.6);border-right:2px solid rgba(239,68,68,.6)}.browser-tab-recording-boundary .corner-markers:after{content:"";position:absolute;bottom:0;left:0;width:20px;height:20px;border-bottom:2px solid rgba(239,68,68,.6);border-left:2px solid rgba(239,68,68,.6)}.browser-tab-recording-boundary .corner-markers{box-shadow:inset -20px -2px 0 -18px #ef444499,inset -2px -20px 0 -18px #ef444499}.ai-tools-phase{padding:16px}.ai-tools-phase .section-header{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-color)}.ai-tools-phase .section-header h3{font-size:16px;font-weight:600;color:var(--text-primary);margin:0 0 4px;display:flex;align-items:center;gap:8px}.ai-tools-phase .section-header h3:before{content:"";display:inline-block;width:4px;height:16px;background:linear-gradient(135deg,#8b5cf6,#6366f1);border-radius:2px}.ai-tools-phase .section-header p{font-size:12px;color:var(--text-secondary);margin:0;line-height:1.4}.ai-backgrounds-section,.ai-avatar-section{background:var(--surface)}.ai-tools-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}.ai-tools-welcome h3{font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 8px}.ai-tools-welcome p{font-size:13px;color:var(--text-secondary);margin:0;max-width:300px}.ai-avatar-generator{display:flex;flex-direction:column;gap:16px}.ai-generator-info{display:flex;gap:12px;padding:14px;background:linear-gradient(135deg,#8b5cf614,#4f46e514);border:1px solid rgba(139,92,246,.2);border-radius:10px}.ai-generator-info .info-icon{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#8b5cf6,#6366f1);border-radius:8px;color:#fff}.ai-generator-info .info-content h4{font-size:13px;font-weight:600;color:var(--text-primary);margin:0 0 4px}.ai-generator-info .info-content p{font-size:11px;color:var(--text-secondary);margin:0;line-height:1.4}.ai-generator-info .info-note{margin-top:6px;padding-top:6px;border-top:1px solid rgba(139,92,246,.15);font-style:italic;color:#8b5cf6}.ai-generator-field{display:flex;flex-direction:column;gap:6px}.ai-generator-field>label{font-size:11px;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:.3px}.ai-generator-field .optional{font-weight:400;text-transform:none;color:var(--text-secondary)}.ai-generator-field textarea{padding:10px 12px;font-size:12px;border:1px solid var(--border-color);border-radius:8px;resize:vertical;min-height:80px;font-family:inherit}.ai-generator-field textarea:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf626}.ai-generator-field select{padding:8px 12px;font-size:12px;border:1px solid var(--border-color);border-radius:8px;background:#fff;cursor:pointer}.ai-generator-field .field-hint{font-size:10px;color:var(--text-secondary);margin:0}.reference-upload-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border:2px dashed var(--border-color);border-radius:10px;background:var(--surface-secondary);color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.reference-upload-btn:hover{border-color:#8b5cf6;background:#8b5cf60d;color:#8b5cf6}.reference-upload-btn input{display:none}.reference-preview{position:relative;width:120px;height:120px;border-radius:10px;overflow:hidden;border:2px solid var(--border-color)}.reference-preview img{width:100%;height:100%;object-fit:cover}.clear-reference-btn{position:absolute;top:4px;right:4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#0009;border:none;border-radius:50%;color:#fff;cursor:pointer;transition:background .2s ease}.clear-reference-btn:hover{background:#ef4444cc}.ai-generator-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ai-generator-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;background:linear-gradient(135deg,#8b5cf6,#6366f1);border:none;border-radius:10px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s ease}.ai-generator-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #8b5cf659}.ai-generator-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.ai-generator-error{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:8px;color:#dc2626;font-size:12px}.ai-generator-success{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;background:#22c55e1a;border:1px solid rgba(34,197,94,.3);border-radius:8px;color:#16a34a;font-size:12px;line-height:1.4}.ai-generator-success svg{flex-shrink:0;margin-top:2px}.context-panel-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:8px}.phase-content{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto;overflow-x:hidden;padding-bottom:20px}.background-generator-container,.ai-backgrounds-section,.ai-backgrounds-section .background-generator{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding-bottom:16px}.diagram-mode-section,.mermaid-settings-section{display:flex;flex-direction:column;gap:.75rem;overflow-y:auto;overflow-x:hidden;padding:.75rem;max-height:calc(100vh - 300px)}.ai-tools-phase{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;padding-bottom:20px}.ai-avatar-generator{display:flex;flex-direction:column;gap:1rem;padding-bottom:20px}.style-options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.phase-content::-webkit-scrollbar,.diagram-mode-section::-webkit-scrollbar,.mermaid-settings-section::-webkit-scrollbar{width:6px}.phase-content::-webkit-scrollbar-track,.diagram-mode-section::-webkit-scrollbar-track,.mermaid-settings-section::-webkit-scrollbar-track{background:transparent}.phase-content::-webkit-scrollbar-thumb,.diagram-mode-section::-webkit-scrollbar-thumb,.mermaid-settings-section::-webkit-scrollbar-thumb{background:var(--border-color, #e5e7eb);border-radius:3px}.phase-content::-webkit-scrollbar-thumb:hover,.diagram-mode-section::-webkit-scrollbar-thumb:hover,.mermaid-settings-section::-webkit-scrollbar-thumb:hover{background:var(--text-secondary, #6b7280)}.admin-layout{display:flex;min-height:100vh;background:#0f1419}.admin-sidebar{width:260px;background:#1a1f26;border-right:1px solid #2d3748;display:flex;flex-direction:column;transition:width .3s ease}.admin-layout.collapsed .admin-sidebar{width:70px}.sidebar-header{padding:20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2d3748}.sidebar-title{display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden}.sidebar-logo{color:#8b5cf6}.sidebar-toggle{background:none;border:none;color:#718096;cursor:pointer;font-size:1.2rem;padding:4px 8px;border-radius:4px}.sidebar-toggle:hover{background:#2d3748;color:#fff}.sidebar-nav{flex:1;padding:12px;overflow-y:auto}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:8px;color:#a0aec0;text-decoration:none;margin-bottom:4px;transition:all .2s;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-size:.95rem}.nav-item:hover{background:#2d3748;color:#fff}.nav-item.active{background:#3b82f6;color:#fff}.nav-icon{width:18px;height:18px;flex-shrink:0}.nav-label{white-space:nowrap}.admin-layout.collapsed .nav-label{display:none}.sidebar-footer{padding:12px;border-top:1px solid #2d3748}.back-button,.logout-button{color:#718096}.logout-button:hover{background:#e53e3e20;color:#fc8181}.admin-main{flex:1;padding:24px;overflow-y:auto}.admin-page{max-width:1400px;margin:0 auto}.page-header{margin-bottom:32px}.page-header h1{font-size:2rem;font-weight:600;color:#fff;margin:0 0 8px}.page-subtitle{color:#718096;font-size:1rem;margin:0}.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:32px}.stat-card{background:#1a1f26;border:1px solid #2d3748;border-radius:12px;padding:24px;display:flex;gap:16px}.stat-card.wide{grid-column:span 2}.stat-icon{font-size:2.5rem}.stat-content h3{color:#718096;font-size:.875rem;font-weight:500;margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:2rem;font-weight:700;color:#fff;margin-bottom:4px}.stat-detail{color:#718096;font-size:.875rem}.status-indicators{display:flex;gap:24px}.status-item{display:flex;align-items:center;gap:8px;color:#a0aec0}.status-dot{width:10px;height:10px;border-radius:50%;background:#718096}.status-item.healthy .status-dot{background:#48bb78}.status-item.warning .status-dot{background:#ecc94b}.quick-actions{background:#1a1f26;border:1px solid #2d3748;border-radius:12px;padding:24px}.quick-actions h2{color:#fff;font-size:1.25rem;margin:0 0 16px}.action-buttons{display:flex;gap:12px;flex-wrap:wrap}.action-buttons button{padding:12px 20px;border-radius:8px;background:#2d3748;border:none;color:#fff;font-size:.95rem;cursor:pointer;transition:all .2s}.action-buttons button:hover{background:#3b82f6}.table-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:16px}.search-input{padding:10px 16px;border-radius:8px;border:1px solid #2d3748;background:#1a1f26;color:#fff;font-size:.95rem;width:300px}.search-input:focus{outline:none;border-color:#3b82f6}.user-count{color:#718096;font-size:.875rem}.table-container{background:#1a1f26;border:1px solid #2d3748;border-radius:12px;overflow:hidden}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:16px;text-align:left;border-bottom:1px solid #2d3748}.data-table th{background:#1a1f26;color:#718096;font-weight:500;font-size:.875rem;text-transform:uppercase;letter-spacing:.5px}.data-table td{color:#e2e8f0}.data-table tbody tr:hover{background:#2d374820}.user-cell{display:flex;flex-direction:column;gap:4px}.user-name{font-weight:500;color:#fff}.user-email{color:#718096;font-size:.875rem}.badge{padding:4px 8px;border-radius:4px;font-size:.75rem;font-weight:500;text-transform:uppercase}.badge.admin{background:#9f7aea20;color:#b794f4}.badge.user{background:#4299e120;color:#63b3ed}.badge.active{background:#48bb7820;color:#68d391}.badge.inactive{background:#f5656520;color:#fc8181}.badge.subscription{background:#ed8936;color:#fff}.badge.subscription.free{background:#718096}.badge.subscription.pro{background:#3b82f6}.badge.subscription.premium{background:#9f7aea}.action-buttons{display:flex;gap:8px}.btn-small{padding:6px 10px;border-radius:4px;border:none;background:#2d3748;color:#fff;cursor:pointer;transition:all .2s;font-size:.875rem}.btn-small:hover{background:#3b82f6}.btn-small.btn-danger:hover{background:#e53e3e}.btn-small.btn-success:hover{background:#48bb78}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.dialog-content{background:#1a1f26;border:1px solid #2d3748;border-radius:12px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #2d3748}.dialog-header h2{color:#fff;margin:0;font-size:1.25rem}.close-btn{background:none;border:none;color:#718096;font-size:1.5rem;cursor:pointer;padding:0;line-height:1}.close-btn:hover{color:#fff}.dialog-content form{padding:24px}.form-group{margin-bottom:20px}.form-group label{display:block;color:#a0aec0;font-size:.875rem;margin-bottom:8px}.form-group input,.form-group select{width:100%;padding:10px 12px;border-radius:6px;border:1px solid #2d3748;background:#0f1419;color:#fff;font-size:.95rem}.form-group input:focus,.form-group select:focus{outline:none;border-color:#3b82f6}.form-group input:disabled{opacity:.6;cursor:not-allowed}.form-group.checkbox label{display:flex;align-items:center;gap:8px;cursor:pointer}.form-group.checkbox input{width:auto}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;padding-top:16px;border-top:1px solid #2d3748;margin-top:8px}.btn-primary,.btn-secondary{padding:10px 20px;border-radius:6px;font-size:.95rem;cursor:pointer;transition:all .2s}.btn-primary{background:#3b82f6;border:none;color:#fff}.btn-primary:hover{background:#2563eb}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:none;border:1px solid #2d3748;color:#a0aec0}.btn-secondary:hover{border-color:#718096;color:#fff}.loading-spinner{display:flex;align-items:center;justify-content:center;min-height:300px;color:#718096;font-size:1.1rem}.error-message{background:#e53e3e20;border:1px solid #e53e3e40;border-radius:8px;padding:20px;color:#fc8181;text-align:center}.error-message h3{margin:0 0 8px;color:#fc8181}.error-message p{margin:0 0 16px}.error-message button{padding:8px 16px;border-radius:6px;background:#e53e3e;border:none;color:#fff;cursor:pointer}@media (max-width: 1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}.stat-card.wide{grid-column:span 1}}@media (max-width: 768px){.admin-layout{flex-direction:column}.admin-sidebar{width:100%;height:auto;border-right:none;border-bottom:1px solid #2d3748}.sidebar-nav{display:flex;flex-wrap:wrap;gap:4px;padding:8px}.nav-item{padding:8px 12px}.stats-grid,.form-row{grid-template-columns:1fr}.table-container{overflow-x:auto}}.account-layout{display:flex;min-height:100vh;background-color:#f5f5f5;position:relative;z-index:1}.account-sidebar{width:280px;background-color:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:100;overflow-y:auto}.account-sidebar .sidebar-header{padding:1rem;border-bottom:1px solid #e0e0e0}.account-sidebar .back-to-app{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:none;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;font-size:.875rem;color:#666;transition:all .2s;width:100%}.account-sidebar .back-to-app:hover{background-color:#f5f5f5;color:#333}.account-sidebar .back-icon{font-size:1rem}.account-sidebar .user-card{display:flex;align-items:center;gap:.75rem;padding:1.25rem 1rem;border-bottom:1px solid #e0e0e0}.account-sidebar .user-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:1.25rem;overflow:hidden}.account-sidebar .user-avatar img{width:100%;height:100%;object-fit:cover}.account-sidebar .user-info{flex:1;min-width:0}.account-sidebar .user-name{font-weight:600;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-sidebar .user-email{font-size:.75rem;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-nav{flex:1;padding:1rem 0;overflow-y:auto}.account-nav .nav-section{margin-bottom:1.5rem}.account-nav .nav-section-title{padding:0 1rem;margin-bottom:.5rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#999}.account-nav .nav-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;color:#666;text-decoration:none;transition:all .2s;border-left:3px solid transparent}.account-nav .nav-item:hover{background-color:#f5f5f5;color:#333}.account-nav .nav-item.active{background-color:#f0f0ff;color:#6366f1;border-left-color:#6366f1;font-weight:500}.account-nav .nav-icon{width:18px;height:18px;flex-shrink:0}.account-nav .nav-label{font-size:.9rem}.account-main{flex:1;padding:2rem;overflow-y:auto}.account-page{max-width:900px;margin:0 auto}.account-page .page-header{margin-bottom:2rem}.account-page .page-header h1{font-size:1.75rem;font-weight:600;color:#333;margin:0 0 .5rem}.account-page .page-description{color:#666;font-size:.9rem;margin:0}.account-card{background:#fff;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem;box-shadow:0 1px 3px #0000001a}.account-card .card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.account-card .card-title{font-size:1.1rem;font-weight:600;color:#333;margin:0}.account-card .card-subtitle{font-size:.8rem;color:#666;margin:.25rem 0 0}.usage-meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.usage-meter{background:#f8f9fa;border-radius:8px;padding:1rem}.usage-meter .meter-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.usage-meter .meter-label{font-weight:500;color:#333;display:flex;align-items:center;gap:.5rem}.usage-meter .meter-value{font-size:.875rem;color:#666}.usage-meter .meter-bar{height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden}.usage-meter .meter-fill{height:100%;border-radius:4px;transition:width .3s ease}.usage-meter .meter-fill.low{background:linear-gradient(90deg,#10b981,#34d399)}.usage-meter .meter-fill.medium{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.usage-meter .meter-fill.high{background:linear-gradient(90deg,#ef4444,#f87171)}.usage-meter .meter-fill.unlimited{background:linear-gradient(90deg,#6366f1,#8b5cf6);width:100%!important}.usage-meter .meter-note{font-size:.75rem;color:#999;margin-top:.5rem}.plan-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .75rem;border-radius:20px;font-size:.8rem;font-weight:600}.plan-badge.free{background:#f3f4f6;color:#6b7280}.plan-badge.creator{background:#dbeafe;color:#2563eb}.plan-badge.pro{background:#fef3c7;color:#d97706}.credit-balance-card{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:12px;color:#fff;margin-bottom:1.5rem}.credit-balance-card .balance-info{display:flex;flex-direction:column}.credit-balance-card .balance-label{font-size:.875rem;opacity:.9}.credit-balance-card .balance-value{font-size:2.5rem;font-weight:700}.credit-balance-card .balance-unit{font-size:1rem;opacity:.8;margin-left:.25rem}.credit-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.credit-pack{background:#fff;border:2px solid #e0e0e0;border-radius:12px;padding:1.5rem;text-align:center;cursor:pointer;transition:all .2s;position:relative}.credit-pack:hover{border-color:#6366f1;transform:translateY(-2px)}.credit-pack.selected{border-color:#6366f1;background:#f0f0ff}.credit-pack.popular:before{content:"Best Value";position:absolute;top:-10px;left:50%;transform:translate(-50%);background:#6366f1;color:#fff;font-size:.7rem;font-weight:600;padding:.25rem .75rem;border-radius:10px}.credit-pack .pack-name{font-weight:600;color:#333;margin-bottom:.5rem}.credit-pack .pack-credits{font-size:2rem;font-weight:700;color:#6366f1;margin-bottom:.25rem}.credit-pack .pack-credits span{font-size:1rem;font-weight:400;color:#666}.credit-pack .pack-price{font-size:1.25rem;font-weight:600;color:#333;margin-bottom:.25rem}.credit-pack .pack-rate{font-size:.8rem;color:#666}.btn{padding:.75rem 1.5rem;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;border:none}.btn-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px #6366f166}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{background:#f3f4f6;color:#374151}.btn-secondary:hover{background:#e5e7eb}.btn-outline{background:transparent;border:1px solid #e0e0e0;color:#666}.btn-outline:hover{background:#f5f5f5;color:#333}.billing-table{width:100%;border-collapse:collapse}.billing-table th,.billing-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid #e0e0e0}.billing-table th{font-weight:600;color:#666;font-size:.8rem;text-transform:uppercase}.billing-table td{color:#333}.billing-table .status-badge{display:inline-block;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:500}.billing-table .status-badge.paid{background:#dcfce7;color:#16a34a}.billing-table .status-badge.pending{background:#fef3c7;color:#d97706}.billing-table .status-badge.failed{background:#fee2e2;color:#dc2626}.plan-features{list-style:none;padding:0;margin:1rem 0}.plan-features li{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;color:#666}.plan-features li:before{content:"✓";color:#10b981;font-weight:700}@media (max-width: 768px){.account-layout{flex-direction:column}.account-sidebar{width:100%;border-right:none;border-bottom:1px solid #e0e0e0}.account-nav{display:flex;padding:.5rem;overflow-x:auto}.account-nav .nav-section{display:flex;margin-bottom:0}.account-nav .nav-section-title{display:none}.account-nav .nav-item{border-left:none;border-bottom:3px solid transparent;padding:.5rem 1rem;white-space:nowrap}.account-nav .nav-item.active{border-bottom-color:#6366f1}.account-main{padding:1rem}}