.app-description{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--gray-100);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);text-align:center;margin-bottom:var(--spacing-lg)}.app-description p{margin:0;color:var(--text-muted)}.app-content{display:flex;gap:var(--spacing-lg)}.column{padding:var(--spacing-lg);border:1px solid var(--border-color);border-radius:var(--border-radius);background-color:var(--card-bg);box-shadow:var(--box-shadow-sm);min-width:0;overflow-wrap:break-word}#controls-column{flex:1}#preview-column{flex:1;display:flex;flex-direction:column}#preview-column h2,#preview-column>p{width:100%;text-align:center}.control-group{margin-bottom:var(--spacing-lg);padding:var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);border-bottom:1px dashed var(--border-color)}.control-group:last-child{border-bottom:none}.control-group h3{font-size:1.2em;margin-top:0;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm)}.control-group h4{font-size:1.05em;margin-top:var(--spacing-md);margin-bottom:var(--spacing-sm);color:var(--text-muted)}.control-group h5{font-size:.95em;margin-top:var(--spacing-md);margin-bottom:var(--spacing-sm);color:var(--text-muted)}.control-group label{display:block;margin-bottom:var(--spacing-xs);font-weight:500;color:var(--gray-700)}.control-group input[type=number],.control-group input[type=text],.control-group select,.control-group textarea{width:100%;margin-bottom:var(--spacing-sm)}.control-group input[type=color]{width:60px;height:40px;padding:4px;margin-bottom:var(--spacing-sm);border:1px solid var(--input-border-color);border-radius:var(--border-radius-sm);background-color:var(--input-bg-color);cursor:pointer}.control-group input[type=color]:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 2px #4361ee33}.control-group input[type=checkbox]{margin-right:var(--spacing-sm);vertical-align:middle;width:16px;height:16px}.control-group label[for=video-width],.control-group label[for=video-height]{display:inline-block;margin-right:var(--spacing-sm);margin-bottom:var(--spacing-sm);vertical-align:middle}.control-group input#video-width,.control-group input#video-height{width:80px;padding:6px;display:inline-block;vertical-align:middle}.control-group input#video-width{margin-right:var(--spacing-md)}.control-group>button:not(.add-element-btn):not(.tab-link){width:100%;margin-bottom:var(--spacing-sm)}#generate-video-btn{background-color:var(--success);color:#fff;border-color:var(--success)}#generate-video-btn:hover:not(:disabled){background-color:#05b386;border-color:#05b386}.add-element-btn,#save-project-btn,.button-like-label{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);margin-right:var(--spacing-sm);margin-bottom:var(--spacing-sm);font-size:.9rem;font-weight:500;border-radius:var(--border-radius-sm);cursor:pointer;transition:var(--transition);text-decoration:none;border:none;color:#fff}.button-like-label{line-height:1.5;font-family:inherit}#save-project-btn{background-color:var(--success);border:1px solid var(--success)}#save-project-btn:hover{background-color:#05b386;border-color:#05b386}label.button-like-label[for=mp3-file-input],label.button-like-label[for=load-project-input-ctrl]{background-color:var(--secondary);border:1px solid var(--secondary)}label.button-like-label[for=mp3-file-input]:hover,label.button-like-label[for=load-project-input-ctrl]:hover{background-color:#43b4d8;border-color:#43b4d8}.styled-download-button{background-color:var(--primary);color:#fff;border:1px solid var(--primary);padding:var(--spacing-sm) var(--spacing-md);display:inline-block;text-decoration:none;border-radius:var(--border-radius-sm);margin:var(--spacing-xs);font-size:.9rem;transition:var(--transition)}.styled-download-button:hover{background-color:var(--primary-dark);border-color:var(--primary-dark);color:#fff;text-decoration:none}#convert-to-mp4-btn,#ffmpeg-status{display:none!important}.tab-nav{display:flex;margin-bottom:0;border-bottom:1px solid var(--border-color)}.tab-link{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;border:1px solid transparent;border-bottom:none;margin-right:2px;background-color:var(--gray-200);color:var(--text-muted);border-top-left-radius:var(--border-radius-sm);border-top-right-radius:var(--border-radius-sm);font-size:.95em;width:auto;text-align:center;display:inline-block;margin-bottom:-1px;line-height:1.5}.tab-link:hover{background-color:var(--gray-300);border-color:var(--gray-300) var(--gray-300) transparent}.tab-link.active{background-color:var(--card-bg);border-color:var(--border-color) var(--border-color) var(--card-bg);color:var(--primary);font-weight:600;position:relative}.tab-content-wrapper{border:1px solid var(--border-color);border-top:none;padding:var(--spacing-lg);background-color:var(--card-bg);border-bottom-left-radius:var(--border-radius-sm);border-bottom-right-radius:var(--border-radius-sm)}.tab-content{display:none}.tab-content.active{display:block}.screen-editor-content h4{margin-top:0;margin-bottom:var(--spacing-md);color:var(--text-color);font-size:1.05em}.screen-editor-content label{display:inline-block;margin-bottom:var(--spacing-sm);font-weight:500;margin-right:var(--spacing-sm)}.screen-editor-content input[type=color]{width:50px;height:30px;padding:2px;vertical-align:middle;margin-bottom:var(--spacing-md);border:1px solid var(--input-border-color)}.screen-editor-content .element-controls{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-md)}.screen-editor-content .element-controls .add-element-btn{margin-right:var(--spacing-sm);margin-bottom:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);font-size:.9em;background-color:var(--success);color:#fff;border:1px solid var(--success);border-radius:var(--border-radius-sm);width:auto}.screen-editor-content .element-controls .add-element-btn:hover{background-color:#05b386;border-color:#05b386}.screen-editor-content h5{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm);color:var(--text-muted);font-size:.95em;border-bottom:1px solid var(--gray-200);padding-bottom:var(--spacing-sm)}.elements-list{margin-top:var(--spacing-sm);border:1px solid var(--border-color);padding:0 0 var(--spacing-sm) 0;max-height:220px;overflow-y:auto;background-color:var(--gray-100);border-radius:var(--border-radius-sm)}.element-item{background-color:var(--card-bg);border:1px solid var(--gray-300);padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-sm);border-radius:var(--border-radius-sm);display:flex;justify-content:space-between;align-items:center;font-size:.9em;box-shadow:var(--box-shadow-sm)}.element-item span{flex-grow:1;margin-right:var(--spacing-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.element-item button{padding:var(--spacing-xs) var(--spacing-sm);font-size:.85em;margin-left:var(--spacing-xs);width:auto;border-radius:var(--border-radius-sm)}.element-item .edit-element-btn{background-color:var(--warning);color:var(--gray-800);border:1px solid var(--warning)}.element-item .edit-element-btn:hover{background-color:#e6bc5c}.element-item .send-element-to-back-btn{background-color:var(--gray-600);color:#fff;border:1px solid var(--gray-600)}.element-item .send-element-to-back-btn:hover{background-color:var(--gray-700)}.element-item .remove-element-btn{background-color:var(--danger);color:#fff;border:1px solid var(--danger)}.element-item .remove-element-btn:hover{background-color:#d63e60}#video-canvas{border:2px solid var(--gray-800);background-color:var(--gray-200);max-width:100%;height:auto;cursor:default;min-height:180px;border-radius:var(--border-radius-sm)}#preview-column>p{font-size:.9em;color:var(--text-muted);text-align:center;max-width:100%;margin-top:var(--spacing-md)}#element-properties-modal .modal-content{max-width:550px}#element-properties-modal .form-row-prop{margin-bottom:var(--spacing-md);display:flex;flex-wrap:wrap;align-items:center}#element-properties-modal .form-row-prop label{display:inline-block;min-width:140px;margin-bottom:0;margin-right:var(--spacing-sm);font-weight:500;color:var(--text-muted);font-size:.9em}#element-properties-modal .form-row-prop input[type=number],#element-properties-modal .form-row-prop input[type=text],#element-properties-modal .form-row-prop select,#element-properties-modal .form-row-prop textarea,#element-properties-modal .form-row-prop input[type=file]{flex-grow:1;max-width:300px;width:auto}#element-properties-modal .form-row-prop input[type=color]{width:50px;height:30px;padding:2px;border:1px solid var(--input-border-color);border-radius:var(--border-radius-sm);vertical-align:middle}#element-properties-modal .form-row-prop textarea{min-height:60px;vertical-align:top}#el-image-preview{margin-top:var(--spacing-xs);margin-left:150px;max-width:200px;max-height:100px;border:1px solid var(--border-color)}#audio-info,#generation-status,#ffmpeg-status,#load-status-msg{font-size:.9em;padding:var(--spacing-sm) var(--spacing-md);margin-top:var(--spacing-sm);border-radius:var(--border-radius-sm);border:1px solid transparent;line-height:1.4}#audio-info{background-color:#e7f3ff;color:#0c5dad;border-color:#b6d7f8}#generation-status{background-color:#fff3cd;color:#856404;border-color:#ffeaa7}#generation-status:empty,#ffmpeg-status:empty,#load-status-msg:empty{display:none}#load-status-msg{background-color:#d1f7e5;color:#0a6b3d;border-color:#a4e6c3}#progress-bar-container{width:100%;background-color:var(--gray-200);border-radius:var(--border-radius-sm);height:22px;overflow:hidden;box-shadow:inset 0 1px 3px #0000001a}#progress-bar-fill{height:100%;width:0%;background-color:var(--success);border-radius:var(--border-radius-sm);transition:width .2s linear;text-align:center;line-height:22px;color:#fff;font-size:.8em}body.dark-theme .app-description{background-color:var(--gray-100);border-color:var(--border-color)}body.dark-theme .column{background-color:var(--card-bg);border-color:var(--border-color)}body.dark-theme .tab-link{background-color:var(--gray-200);color:var(--text-muted)}body.dark-theme .tab-link.active{background-color:var(--card-bg);color:var(--primary);border-color:var(--border-color) var(--border-color) var(--card-bg)}body.dark-theme .tab-content-wrapper{border-color:var(--border-color);background-color:var(--card-bg)}body.dark-theme .elements-list{background-color:var(--gray-100);border-color:var(--border-color)}body.dark-theme .element-item{background-color:var(--card-bg);border-color:var(--gray-300)}body.dark-theme #video-canvas{border-color:var(--gray-600);background-color:var(--gray-200)}body.dark-theme #audio-info{background-color:#1a2f4a;color:#8cc4ff;border-color:#2a4a6e}body.dark-theme #generation-status{background-color:#3a3020;color:#ffd166;border-color:#5a4a30}body.dark-theme #load-status-msg{background-color:#1a3a2a;color:#7edba7;border-color:#2a5a3e}body.dark-theme .control-group input[type=color]{border-color:var(--input-border-color);background-color:var(--input-bg-color)}body.dark-theme .screen-editor-content input[type=color]{border-color:var(--input-border-color)}@media (max-width: 1050px){.app-content{flex-direction:column}}@media (max-width: 768px){.column{padding:var(--spacing-md)}.control-group{padding:var(--spacing-sm) var(--spacing-md) var(--spacing-md)}.tab-nav{flex-wrap:wrap}.tab-link{flex:1;text-align:center}#element-properties-modal .form-row-prop{flex-direction:column;align-items:flex-start}#element-properties-modal .form-row-prop label{min-width:auto;margin-bottom:var(--spacing-xs)}#element-properties-modal .form-row-prop input[type=number],#element-properties-modal .form-row-prop input[type=text],#element-properties-modal .form-row-prop select,#element-properties-modal .form-row-prop textarea,#element-properties-modal .form-row-prop input[type=file]{max-width:100%;width:100%}#el-image-preview{margin-left:0}}