:root{--primary-color: #007bff;--primary-hover: #0056b3;--border-color: #ccc;--background-light: #f8f9fa;--text-color: #333;--correct-bg: #d4edda;--correct-border: #c3e6cb;--correct-text: #155724;--incorrect-bg: #f8d7da;--incorrect-border: #f5c6cb;--incorrect-text: #721c24;--header-height: 65px}body{font-family:Arial,sans-serif;margin:0;background-color:var(--background-light);color:var(--text-color)}.main-header{display:flex;justify-content:space-between;align-items:center;padding:0 2em;background-color:#fff;border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:1000;height:var(--header-height);box-sizing:border-box}.header-title{display:flex;align-items:center;gap:15px}.header-logo{height:40px}.main-header h1{font-size:1.5em;margin:0}.tabs{position:sticky;top:var(--header-height);z-index:999}.tabs ul{list-style:none;display:flex;padding:0;margin:0;border-bottom:1px solid var(--border-color);background-color:#fff}.tabs .tab-link{padding:1em 1.5em;display:block;text-decoration:none;color:var(--primary-color);border-bottom:3px solid transparent;cursor:pointer}.tabs .tab-link.active,.tabs .tab-link:hover{color:var(--primary-hover);border-bottom-color:var(--primary-hover)}.tab-content{padding:2em}.tab-pane{display:none}.tab-pane.active{display:block}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5em;margin-bottom:2em}.form-group{display:flex;flex-direction:column}.form-group label{margin-bottom:.5em;font-weight:700}.form-group input,.form-group textarea{padding:.8em;border:1px solid var(--border-color);border-radius:5px;font-size:16px}.actions-group{margin-top:1.5em;margin-bottom:2em;display:flex;gap:1em;align-items:center}#quill-editor-container{background-color:#fff;border-radius:5px;height:350px}#quill-editor-container .ql-editor{font-size:16px}button,.button-link{background-color:#e9ecef;color:#333;border:1px solid #ccc;padding:10px 18px;border-radius:5px;cursor:pointer;font-size:1em;text-decoration:none;transition:background-color .3s,border-color .3s}button:hover,.button-link:hover{background-color:#dee2e6;border-color:#aaa}button.primary-action,#btn-copy-prompt,#btn-load-ai-json,.button-link.primary-action{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}button.primary-action:hover,#btn-copy-prompt:hover,#btn-load-ai-json,.button-link.primary-action:hover{background-color:var(--primary-hover);border-color:var(--primary-hover)}button.secondary-action{background-color:#6c757d;color:#fff;border-color:#6c757d}button.secondary-action:hover{background-color:#5a6268;border-color:#545b62}#add-question-container{margin-bottom:2em;padding-bottom:1.5em;border-bottom:1px solid var(--border-color);text-align:right}#add-question-container #btn-add-question{padding:12px 24px;font-size:1.1em}.question-card{position:relative;background-color:#fff;border:1px solid var(--border-color);border-radius:8px;padding:1.5em;box-shadow:0 2px 5px #0000000d;margin-bottom:2em}.delete-question-btn{position:absolute;top:1.5em;right:1.5em;width:30px;height:30px;background-color:transparent;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}.delete-question-btn svg{width:24px;height:24px;stroke:#721c24;transition:stroke .2s,transform .2s}.delete-question-btn:hover svg{stroke:#e3838b;transform:scale(1.1)}.question-card h3{margin-top:0;border-bottom:1px solid #eee;padding-bottom:.5em}.form-group-editor{margin-bottom:1em}.form-group-editor label{display:block;font-weight:700;margin-bottom:.5em}.form-group-editor input[type=text],.form-group-editor input[type=number],.form-group-editor textarea{width:100%;padding:.8em;border:1px solid #ccc;border-radius:5px;box-sizing:border-box;font-size:16px}.form-group-editor textarea{min-height:80px;resize:vertical}.form-grid-editor{display:grid;grid-template-columns:1fr 1fr;gap:1em}.answer-group{display:flex;align-items:flex-start;margin-bottom:.5em;gap:10px}.answer-group input[type=radio]{flex-shrink:0;margin-top:10px}.answer-group textarea.answer-input{flex-grow:1;font-family:inherit;font-size:16px;padding:.8em;border:1px solid #ccc;border-radius:5px;box-sizing:border-box;resize:vertical;white-space:pre-wrap;overflow-wrap:break-word;line-height:1.4;min-height:42px;overflow-y:hidden}.delete-answer-btn{width:24px;height:24px;flex-shrink:0;margin-top:8px;background-color:transparent;border:none;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}.delete-answer-btn svg{width:20px;height:20px;stroke:#6c757d;transition:stroke .2s}.delete-answer-btn:hover svg{stroke:#721c24}#h5p-behavior-settings{background-color:#fff;border:1px solid var(--border-color);border-radius:8px;padding:1.5em;box-shadow:0 2px 5px #0000000d;margin-bottom:2em}.behavior-options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1em}.behavior-option{display:flex;align-items:center;gap:10px;background-color:var(--background-light);padding:.8em;border-radius:5px}.behavior-option input[type=checkbox]{width:20px;height:20px;flex-shrink:0}.behavior-option label{font-weight:400;margin-bottom:0}.advanced-options{margin-top:1.5em;border-top:1px solid #eee;padding-top:1em}.advanced-options summary{cursor:pointer;font-weight:700;color:var(--primary-color);margin-bottom:1em}.advanced-options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5em}.advanced-options-grid .form-group-editor{margin-bottom:0}#preview-message-container{text-align:center;padding:3em 1em;color:#6c757d}#preview-container{position:relative;max-width:1200px;margin:auto}#youtube-player-wrapper{position:relative;width:100%;background-color:#000;aspect-ratio:16 / 9;border-radius:8px;overflow:hidden}#youtube-player-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}.preview-controls{max-width:1200px;margin:1em auto}#timeline-container{position:relative;width:100%}#video-timeline{width:100%;display:block;margin:10px 0}#timeline-markers{position:absolute;top:50%;left:0;width:100%;height:0;pointer-events:none}.timeline-marker{position:absolute;width:14px;height:14px;background-color:#fff;border:2px solid var(--primary-color);border-radius:50%;transform:translateY(-50%);cursor:pointer;transition:transform .2s ease;pointer-events:auto}.timeline-marker:hover{transform:translateY(-50%) scale(1.3)}#question-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000000bf;display:flex;justify-content:center;align-items:center;padding:1em;box-sizing:border-box;z-index:200}#question-modal-overlay.hidden{display:none}#question-modal-content{background-color:#fff;padding:2em;border-radius:8px;width:90%;max-width:600px;box-shadow:0 5px 15px #0000004d;display:flex;flex-direction:column;max-height:90%;overflow-y:auto}#question-answers .answer-label{display:flex;align-items:center;padding:.8em;margin-bottom:.5em;border:1px solid var(--border-color);border-radius:5px;cursor:pointer;transition:background-color .2s,border-color .2s}#question-answers .answer-label:hover{background-color:#f4f4f4}#question-answers .answer-label input{margin-right:10px}#question-answers.answered .answer-label{cursor:default;pointer-events:none}#question-answers.answered .answer-label:hover{background-color:transparent}#question-answers .answer-label.correct{background-color:var(--correct-bg);border-color:var(--correct-border);color:var(--correct-text);font-weight:700}#question-answers .answer-label.incorrect{background-color:var(--incorrect-bg);border-color:var(--incorrect-border);color:var(--incorrect-text)}#question-feedback{margin-top:1em;padding:1em;background-color:#e9ecef;border-left:4px solid var(--primary-color);border-radius:4px;flex-shrink:0}#question-feedback.hidden{display:none}#question-submit-btn{margin-top:1.5em;width:100%;flex-shrink:0}#live-editor-container{max-width:1200px;margin:2em auto;padding:1.5em;background-color:#fff;border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 10px #0000001a;position:relative;z-index:10}#live-editor-container.hidden{display:none}.live-editor-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eee;padding-bottom:.5em;margin-bottom:1.5em}.live-editor-header h4{margin:0;font-size:1.2em}#live-editor-container #btn-tester{margin-top:0}.main-footer{margin-top:4em;padding:1em;background-color:#343a40;color:#f8f9fa;text-align:center;font-size:.9em}.main-footer p{margin:.5em 0}.header-nav{position:relative}.burger-menu{display:none;flex-direction:column;justify-content:space-around;width:2rem;height:2rem;background:transparent;border:none;cursor:pointer;padding:0;z-index:10}.burger-menu:focus{outline:none}.burger-menu span{width:2rem;height:.25rem;background:var(--text-color);border-radius:10px;transition:all .3s linear;position:relative;transform-origin:1px}@media(max-width:1199px){.header-actions{display:none;flex-direction:column;position:absolute;top:120%;right:0;background-color:#fff;border-radius:8px;box-shadow:0 4px 15px #00000026;padding:1em;width:250px;border:1px solid var(--border-color)}.header-actions.open{display:flex}.header-actions button{width:100%;margin:.5em 0;text-align:left}.burger-menu{display:flex}}
