*,::after,::before{box-sizing:border-box}body{font-family:Arial,sans-serif;margin:0;padding:0;display:flex;flex-direction:column;min-height:100vh;background-color:#f4f4f4;color:#333;line-height:1.6}header#app-header{background-color:#333;color:#fff;padding:10px 20px;display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;left:0;width:100%;z-index:1000;box-sizing:border-box;height:70px}header#app-header .header-title{display:flex;align-items:baseline}header#app-header h1{margin:0;font-size:1.8em}header#app-header .version-info{font-size:.8em;margin-left:10px;color:#ccc}header#app-header .header-button{background-color:#555;color:#fff;padding:8px 15px;text-decoration:none;border-radius:5px;font-size:.9em;display:inline-flex;align-items:center}header#app-header .header-button:hover{background-color:#777}header#app-header .header-button .icon{margin-right:5px;font-size:1.2em}main#app-main{flex:1;padding-top:70px;padding-bottom:50px;width:90%;max-width:1600px;margin:0 auto}section.app-description{padding:8px 15px;background-color:#e9e9e9;border-bottom:1px solid #ddd;text-align:center;margin-top:8px;margin-bottom:25px}section.app-content{display:flex;gap:20px}.column{padding:20px;border:1px solid #d1d5da;border-radius:6px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);min-width:0;overflow-wrap:break-word}#controls-column{flex:1}#preview-column{flex:1;display:flex;flex-direction:column}h2,h3,h4,h5{color:#2c3e50;max-width:100%}h2{border-bottom:2px solid #e1e4e8;padding-bottom:12px;margin-bottom:20px;margin-top:0;font-size:1.6em}#preview-column h2,#preview-column p{width:100%;text-align:center}.control-group{margin-bottom:25px;padding:10px 20px 20px 20px;border-bottom:1px dashed #eee}.control-group:last-child{border-bottom:none}.control-group h3{font-size:1.3em;margin-top:0;margin-bottom:15px;padding-bottom:8px}.control-group h4{font-size:1.1em;margin-top:15px;margin-bottom:10px;color:#586069}.control-group h5{font-size:1em;margin-top:15px;margin-bottom:8px;color:#586069}.control-group label{display:block;margin-bottom:6px;font-weight:700;color:#444}#element-properties-dialog input[type=number],#element-properties-dialog input[type=text],#element-properties-dialog select,#element-properties-dialog textarea,.control-group input[type=number],.control-group input[type=text],.control-group select,.control-group textarea{padding:10px;margin-bottom:10px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;background-color:#fff;font-size:.95em;color:#333}#element-properties-dialog input[type=number]:focus,#element-properties-dialog input[type=text]:focus,#element-properties-dialog select:focus,#element-properties-dialog textarea:focus,.control-group input[type=number]:focus,.control-group input[type=text]:focus,.control-group select:focus,.control-group textarea:focus{border-color:#007bff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.control-group input[type=file],.control-group input[type=number],.control-group input[type=text],.control-group select,.control-group textarea{width:calc(100% - 22px)}#element-properties-dialog input[type=color],.control-group input[type=color]{width:60px;height:40px;padding:5px;margin-bottom:10px;border:1px solid #ccc;border-radius:5px;box-sizing:border-box;background-color:#fff;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;cursor:pointer}.control-group input[type=checkbox]{margin-right:8px;vertical-align:middle;height:16px;width:16px}#element-properties-dialog input[type=color]:focus,.control-group input[type=color]:focus{border-color:#007bff;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.control-group label[for=video-height],.control-group label[for=video-width]{display:inline-block;margin-right:8px;margin-bottom:10px;vertical-align:middle}.control-group input#video-height,.control-group input#video-width{width:80px;padding:8px 6px;display:inline-block;vertical-align:middle}.control-group input#video-width{margin-right:15px}.control-group>a.button-as-link,.control-group>button{width:calc(100% - 22px);padding:10px 15px;margin-bottom:10px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;text-align:center;text-decoration:none;display:inline-block;box-sizing:border-box;font-size:.95em;font-weight:500}.control-group>a.button-as-link:hover,.control-group>button:hover{background-color:#0056b3}#save-project-btn,.add-element-btn,button.control-button,label.control-button.button-like-label{width:auto;padding:8px 15px;margin-right:10px;margin-bottom:10px;display:inline-block;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;text-align:center;text-decoration:none;font-size:.9em;font-weight:500}#save-project-btn:hover,.add-element-btn:hover,button.control-button:hover,label.control-button.button-like-label:hover{background-color:#5a6268}#save-project-btn{background-color:#28a745}#save-project-btn:hover{background-color:#218838}label.control-button.button-like-label[for=load-project-input-ctrl]{background-color:#17a2b8}label.control-button.button-like-label[for=load-project-input-ctrl]:hover{background-color:#138496}#custom-confirm-yes-btn,#generate-video-btn,#save-element-props-btn{background-color:#28a745;color:#fff;border-color:#28a745}#custom-confirm-yes-btn:hover,#generate-video-btn:hover,#save-element-props-btn:hover{background-color:#218838;border-color:#1e7e34;color:#fff}#custom-confirm-yes-btn:active,#generate-video-btn:active,#save-element-props-btn:active{background-color:#1e7e34;box-shadow:inset 0 1px 0 rgba(0,0,0,.2);transform:translateY(1px)}.styled-download-button{background-color:#007bff;color:#fff;border-color:#007bff;padding:8px 15px;display:inline-block;text-decoration:none;border-radius:4px;margin:5px}.styled-download-button:hover{background-color:#0056b3;border-color:#0056b3;color:#fff}.styled-download-button:active{background-color:#004a99;box-shadow:inset 0 1px 0 rgba(0,0,0,.2);transform:translateY(1px)}.tab-nav{display:flex;margin-bottom:0;border-bottom:1px solid #ccc}.tab-link{padding:10px 15px;cursor:pointer;border:1px solid transparent;border-bottom:none;margin-right:2px;background-color:#e9ecef;color:#495057;border-top-left-radius:4px;border-top-right-radius:4px;font-size:.95em;width:auto;text-align:center;display:inline-block;margin-bottom:-1px;line-height:1.5}.tab-link:hover{background-color:#dee2e6;border-color:#ddd #ddd transparent}.tab-link.active{background-color:#fff;border-color:#ccc #ccc #fff;color:#007bff;font-weight:600;position:relative}.tab-content-wrapper{border:1px solid #d1d5da;border-top:none;padding:20px;background-color:#fff;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.tab-content{display:none}.tab-content.active{display:block}.screen-editor-content h4{margin-top:0;margin-bottom:15px;color:#333;font-size:1.1em}.screen-editor-content label{display:inline-block;margin-bottom:10px;font-weight:700;margin-right:10px}.screen-editor-content input[type=color]{width:50px;height:30px;padding:2px;vertical-align:middle;margin-bottom:15px;border:1px solid #ced4da}.screen-editor-content .element-controls{margin-top:10px;margin-bottom:15px}.screen-editor-content .element-controls .add-element-btn{margin-right:10px;margin-bottom:5px;padding:8px 12px;font-size:.9em;background-color:#5cb85c;color:#fff;border:none;width:auto;border-radius:4px}.screen-editor-content .element-controls .add-element-btn:hover{background-color:#4cae4c}.screen-editor-content h5{margin-top:20px;margin-bottom:10px;color:#444;font-size:1em;border-bottom:1px solid #f0f0f0;padding-bottom:8px}.elements-list{margin-top:10px;border:1px solid #e1e4e8;padding:0 0 8px 0;max-height:220px;overflow-y:auto;background-color:#f8f9fa;border-radius:3px;margin-top:5px}.element-item{background-color:#fff;border:1px solid #dee2e6;padding:8px 12px;margin-bottom:8px;border-radius:4px;display:flex;justify-content:space-between;align-items:center;font-size:.9em;box-shadow:0 1px 2px rgba(0,0,0,.05)}.element-item span{flex-grow:1;margin-right:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.element-item button{padding:5px 10px;font-size:.85em;margin-left:5px;width:auto;border-radius:3px}.element-item .edit-element-btn{background-color:#ffc107;color:#212529;border:1px solid #ffc107}.element-item .edit-element-btn:hover{background-color:#e0a800}.element-item .send-element-to-back-btn{background-color:#6c757d;color:#fff;border:1px solid #6c757d}.element-item .send-element-to-back-btn:hover{background-color:#5a6268}.element-item .remove-element-btn{background-color:#dc3545;color:#fff;border:1px solid #dc3545}.element-item .remove-element-btn:hover{background-color:#c82333}#video-canvas{border:1px solid #2c3e50;background-color:#f0f0f0;max-width:100%;height:auto;cursor:default;min-height:180px}#preview-column p{font-size:.9em;color:#586069;text-align:center;max-width:100%;margin-top:15px}dialog{border:1px solid #d1d5da;border-radius:8px;box-shadow:0 8px 24px rgba(149,157,165,.2);padding:25px;min-width:320px;max-width:550px}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background-color:rgba(0,0,0,.5)}dialog h3{margin-top:0;border-bottom:1px solid #eee;padding-bottom:12px;margin-bottom:20px;font-size:1.4em;color:#333}dialog p{margin-bottom:12px;line-height:1.5}dialog .dialog-actions{margin-top:25px;text-align:right;padding-top:15px;border-top:1px solid #eee}dialog button{margin-left:10px;padding:10px 18px;font-size:.95em;width:auto;background-color:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer}dialog button:hover{background-color:#5a6268}#element-properties-dialog{width:90%;max-width:550px;padding:25px}#element-properties-dialog p{margin-bottom:18px;display:flex;flex-wrap:wrap;align-items:center}#element-properties-dialog label{display:inline-block;min-width:140px;margin-bottom:0;margin-right:10px;font-weight:700;color:#555;font-size:.9em}#element-properties-dialog input[type=file],#element-properties-dialog input[type=number],#element-properties-dialog input[type=text],#element-properties-dialog select,#element-properties-dialog textarea{flex-grow:1;padding:8px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;font-size:.9em;max-width:300px;width:auto}#element-properties-dialog input[type=color]{width:50px;height:30px;padding:2px;border:1px solid #ccc;border-radius:4px;vertical-align:middle}#element-properties-dialog textarea{min-height:60px;vertical-align:top}#element-properties-dialog #el-image-preview{margin-top:5px;margin-left:150px;max-width:200px;max-height:100px;border:1px solid #ccc}#element-properties-dialog #el-image-preview{margin-top:5px;margin-left:142px}#element-properties-dialog .dialog-actions button#save-element-props-btn{background-color:#007bff;color:#fff}#element-properties-dialog .dialog-actions button#save-element-props-btn:hover{background-color:#0056b3}#element-properties-dialog .dialog-actions button#cancel-element-props-btn{background-color:#6c757d;color:#fff}#element-properties-dialog .dialog-actions button#cancel-element-props-btn:hover{background-color:#5a6268}#disclaimer-dialog .disclaimer-content{max-height:60vh;overflow-y:auto;border:1px solid #e1e4e8;padding:15px;margin-bottom:20px;background-color:#f6f8fa;border-radius:5px;font-size:.9em}footer#app-footer{text-align:center;padding:15px 20px;background-color:#333;color:#ccc;font-size:.9em;position:fixed;bottom:0;left:0;width:100%;height:50px;box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center}footer#app-footer p{display:inline-block;margin:0 10px}footer#app-footer a{color:#4a90e2;text-decoration:none}footer#app-footer a:hover{text-decoration:underline}#audio-info,#ffmpeg-status,#generation-status,#load-status-msg{font-size:.9em;padding:10px 15px;margin-top:10px;border-radius:5px;border:1px solid transparent;line-height:1.4}#audio-info{background-color:#f0f6fc;border-color:#c8e1ff;color:#044289}#ffmpeg-status,#generation-status{background-color:#fffbdd;border-color:#ffeb3b;color:#534000}#ffmpeg-status:empty,#generation-status:empty,#load-status-msg:empty{display:none}#load-status-msg{background-color:#dcffe4;border-color:#c3e6cb;color:#09691e}#toaster-container{position:fixed;top:20px;right:20px;z-index:9999;width:320px;display:flex;flex-direction:column;gap:12px}.toast{background-color:#2f363d;color:#fff;padding:16px 20px;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:0;transform:translateX(100%);transition:all .4s cubic-bezier(.215, .61, .355, 1);cursor:pointer;font-size:.95em;line-height:1.4}.toast.show{opacity:1;transform:translateX(0)}.toast.toast-info{background-color:#007bff}.toast.toast-success{background-color:#28a745}.toast.toast-warning{background-color:#ffc107;color:#212529}.toast.toast-error{background-color:#dc3545}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.button-like-label{display:inline-block}#convert-to-mp4-btn,#ffmpeg-status{display:none!important}#progress-bar-container{width:100%;background-color:#e0e0e0;border-radius:4px;height:22px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.1)}#progress-bar-fill{height:100%;width:0%;background-color:#28a745;border-radius:4px;transition:width .2s linear;text-align:center;line-height:22px;color:#fff;font-size:.8em}