.html-editor-container{display:flex;flex-direction:column;height:calc(100vh - 100px);min-height:700px;background:#f8fafc;position:relative;transition:all 0.3s ease}.html-editor-container.fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100vh;z-index:9999;margin:0;border-radius:0}.top-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:white;flex-wrap:wrap;gap:10px;box-shadow:0 2px 8px rgba(0,0,0,0.1)}.toolbar-group{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.toolbar-btn{background:rgba(255,255,255,0.2);border:none;color:white;padding:8px 14px;border-radius:6px;cursor:pointer;font-size:13px;transition:all 0.3s;white-space:nowrap}.toolbar-btn:hover{background:rgba(255,255,255,0.3);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.2)}.toolbar-btn-small{background:rgba(255,255,255,0.2);border:none;color:white;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:13px;transition:all 0.3s}.toolbar-btn-small:hover{background:rgba(255,255,255,0.3);transform:scale(1.05)}.editor-main{display:flex;flex:1;overflow:hidden;gap:0}.left-sidebar{width:200px;background:linear-gradient(135deg,rgba(102,126,234,0.05) 0,rgba(118,75,162,0.05) 100%);border-right:2px solid rgba(102,126,234,0.2);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}.sidebar-header{padding:16px;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:white}.sidebar-header h3{margin:0;font-size:14px;font-weight:600}.file-tree{flex:1;overflow-y:auto;padding:8px}.file-item{display:flex;align-items:center;padding:10px 12px;margin-bottom:4px;background:white;border:2px solid rgba(102,126,234,0.1);border-radius:6px;cursor:pointer;transition:all 0.3s;gap:8px}.file-item:hover{background:rgba(102,126,234,0.1);border-color:rgba(102,126,234,0.3)}.file-item.active{background:linear-gradient(135deg,rgba(102,126,234,0.15) 0,rgba(118,75,162,0.15) 100%);border-color:#667eea;font-weight:600}.file-icon{font-size:16px;flex-shrink:0}.file-name{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-resize-divider{width:6px;background:rgba(102,126,234,0.1);cursor:col-resize;display:flex;align-items:center;justify-content:center;transition:background 0.3s;flex-shrink:0}.sidebar-resize-divider:hover{background:rgba(102,126,234,0.2)}.resize-handle{color:rgba(102,126,234,0.5);font-size:12px;user-select:none}.center-panel{flex:1;display:flex;flex-direction:column;background:white;overflow:hidden;min-width:300px}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#f8fafc;border-bottom:2px solid rgba(102,126,234,0.1)}.editor-tabs{display:flex;gap:4px;overflow-x:auto;flex:1}.editor-tab{display:flex;align-items:center;gap:6px;padding:6px 12px;background:white;border:1px solid rgba(102,126,234,0.2);border-radius:6px 6px 0 0;cursor:pointer;transition:all 0.3s;white-space:nowrap}.editor-tab:hover{background:rgba(102,126,234,0.05)}.editor-tab.active{background:linear-gradient(135deg,rgba(102,126,234,0.1) 0,rgba(118,75,162,0.1) 100%);border-color:#667eea;font-weight:600}.tab-icon{font-size:14px}.tab-name{font-size:13px}.tab-close{background:none;border:none;color:#94a3b8;font-size:18px;cursor:pointer;padding:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:all 0.2s}.tab-close:hover{background:rgba(239,68,68,0.1);color:#ef4444}.editor-actions{display:flex;gap:8px;margin-left:12px}.btn-format,.btn-run{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border:none;color:white;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;transition:all 0.3s;white-space:nowrap}.btn-format:hover,.btn-run:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,0.4)}.editor-content{flex:1;display:flex;overflow:hidden;position:relative}.line-numbers{width:50px;background:#f8fafc;color:#94a3b8;padding:12px 8px 12px 0;text-align:right;font-family:'Consolas','Monaco','Courier New',monospace;font-size:13px;line-height:1.6;user-select:none;border-right:2px solid rgba(102,126,234,0.1);overflow:hidden;white-space:pre}.code-editor{flex:1;padding:12px;border:none;outline:none;font-family:'Consolas','Monaco','Courier New',monospace;font-size:13px;line-height:1.6;resize:none;background:white;color:#1e293b;overflow-y:auto}.code-editor::placeholder{color:#94a3b8}.resize-divider{width:6px;background:rgba(102,126,234,0.1);cursor:col-resize;display:flex;align-items:center;justify-content:center;transition:background 0.3s;flex-shrink:0}.resize-divider:hover{background:rgba(102,126,234,0.2)}.right-panel{width:50%;display:flex;flex-direction:column;background:white;border-left:2px solid rgba(102,126,234,0.1);overflow:hidden;min-width:300px}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f8fafc;border-bottom:2px solid rgba(102,126,234,0.1)}.preview-header h3{margin:0;font-size:14px;font-weight:600;color:#1e293b}.preview-actions{display:flex;gap:8px;align-items:center}.viewport-select{padding:6px 10px;border:1px solid rgba(102,126,234,0.2);border-radius:6px;font-size:12px;background:white;color:#1e293b;cursor:pointer;outline:none;transition:all 0.3s}.viewport-select:hover{border-color:#667eea}.btn-refresh,.btn-open-new{background:rgba(102,126,234,0.1);border:1px solid rgba(102,126,234,0.2);color:#667eea;padding:6px 10px;border-radius:6px;cursor:pointer;font-size:12px;transition:all 0.3s}.btn-refresh:hover,.btn-open-new:hover{background:rgba(102,126,234,0.2);border-color:#667eea}.preview-content{flex:1;overflow:hidden;background:white;position:relative}#previewFrame{width:100%;height:100%;border:none;background:white}.status-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 20px;background:linear-gradient(135deg,rgba(102,126,234,0.05) 0,rgba(118,75,162,0.05) 100%);border-top:2px solid rgba(102,126,234,0.1);font-size:12px;flex-wrap:wrap;gap:16px}.status-item{display:flex;align-items:center;gap:6px}.status-label{color:#64748b;font-weight:500}.status-value{color:#1e293b;font-weight:600}.status-indicator{color:#22c55e;font-size:14px}.modal-panel{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px}.modal-content{background:white;border-radius:12px;max-width:600px;width:100%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,0.3);animation:modalSlideIn 0.3s ease-out}.template-modal{max-width:900px}@keyframes modalSlideIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:white}.modal-header h3{margin:0;font-size:16px;font-weight:600}.btn-close{background:rgba(255,255,255,0.2);border:none;color:white;width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:16px;transition:all 0.3s;display:flex;align-items:center;justify-content:center}.btn-close:hover{background:rgba(255,255,255,0.3)}.modal-body{flex:1;overflow-y:auto;padding:20px}.template-modal{max-width:900px;max-height:85vh}.template-categories{display:flex;flex-direction:column;gap:30px}.template-category h4{margin:0 0 15px 0;font-size:16px;font-weight:700;color:#1e293b;padding-bottom:10px;border-bottom:2px solid rgba(102,126,234,0.2)}.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px}.template-card{padding:20px;background:linear-gradient(135deg,rgba(102,126,234,0.05) 0,rgba(118,75,162,0.05) 100%);border:2px solid rgba(102,126,234,0.15);border-radius:12px;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);text-align:center;position:relative;overflow:hidden}.template-card::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left 0.5s}.template-card:hover::before{left:100%}.template-card:hover{background:linear-gradient(135deg,rgba(102,126,234,0.15) 0,rgba(118,75,162,0.15) 100%);border-color:#667eea;transform:translateY(-5px);box-shadow:0 8px 25px rgba(102,126,234,0.25)}.template-card.ai-template{background:linear-gradient(135deg,rgba(255,215,0,0.1) 0,rgba(255,165,0,0.1) 100%);border-color:rgba(255,215,0,0.3)}.template-card.ai-template:hover{background:linear-gradient(135deg,rgba(255,215,0,0.2) 0,rgba(255,165,0,0.2) 100%);border-color:#ffd700;box-shadow:0 8px 25px rgba(255,215,0,0.3)}.template-icon{font-size:40px;margin-bottom:12px;display:block;animation:iconFloat 3s ease-in-out infinite}@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}.template-card:hover .template-icon{animation:iconBounce 0.6s ease}@keyframes iconBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}.template-name{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:6px}.template-desc{font-size:12px;color:#64748b;line-height:1.4}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:8px;font-size:13px;font-weight:600;color:#1e293b}.ai-prompt-textarea{width:100%;padding:10px 12px;border:2px solid rgba(102,126,234,0.2);border-radius:6px;font-size:13px;font-family:inherit;resize:vertical;outline:none;transition:all 0.3s;box-sizing:border-box}.ai-prompt-textarea:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.1)}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}.btn-primary{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border:none;color:white;padding:10px 20px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;transition:all 0.3s}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,0.4)}.btn-secondary{background:#f8fafc;border:2px solid rgba(102,126,234,0.2);color:#1e293b;padding:10px 20px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;transition:all 0.3s}.btn-secondary:hover{background:rgba(102,126,234,0.05);border-color:#667eea}.shortcut-list{display:flex;flex-direction:column;gap:8px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#f8fafc;border-radius:6px;font-size:13px}.shortcut-key{background:white;padding:4px 10px;border-radius:4px;border:1px solid rgba(102,126,234,0.2);font-family:'Consolas','Monaco','Courier New',monospace;font-size:12px;color:#667eea;font-weight:600}.history-list{display:flex;flex-direction:column;gap:8px}.history-item{padding:12px;background:#f8fafc;border:2px solid rgba(102,126,234,0.1);border-radius:6px;cursor:pointer;transition:all 0.3s}.history-item:hover{background:rgba(102,126,234,0.05);border-color:#667eea}.history-time{font-size:11px;color:#64748b;margin-bottom:4px}.history-preview{font-size:12px;color:#1e293b;font-family:'Consolas','Monaco','Courier New',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.guide-content{display:flex;flex-direction:column;gap:16px}.guide-step{padding:16px;background:#f8fafc;border-left:4px solid #667eea;border-radius:6px}.guide-step h4{margin:0 0 8px 0;font-size:14px;font-weight:600;color:#1e293b}.guide-step p{margin:0;font-size:13px;color:#64748b}.guide-footer{margin-top:16px;padding-top:16px;border-top:2px solid rgba(102,126,234,0.1);font-size:13px}body.dark-mode .html-editor-container{background:#1e293b}body.dark-mode .left-sidebar,body.dark-mode .center-panel,body.dark-mode .right-panel{background:#0f172a;border-color:rgba(148,163,184,0.2)}body.dark-mode .file-item,body.dark-mode .editor-tab{background:#1e293b;color:#e2e8f0;border-color:rgba(148,163,184,0.2)}body.dark-mode .file-item:hover,body.dark-mode .editor-tab:hover{background:rgba(148,163,184,0.1)}body.dark-mode .code-editor{background:#0f172a;color:#e2e8f0}body.dark-mode .line-numbers{background:#1e293b;color:#64748b}body.dark-mode .modal-content{background:#0f172a;color:#e2e8f0}body.dark-mode .template-card,body.dark-mode .shortcut-item,body.dark-mode .history-item{background:#1e293b;color:#e2e8f0}@media (max-width:768px){.editor-main{flex-direction:column}.left-sidebar{width:100%;max-height:150px}.right-panel{width:100%;min-height:300px}.toolbar-group{flex-wrap:wrap}.template-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}.toolbar-btn:focus,.toolbar-btn-small:focus,.btn-format:focus,.btn-run:focus,.btn-primary:focus,.btn-secondary:focus{outline:3px solid #fbbf24;outline-offset:2px}.code-editor:focus{outline:2px solid #667eea;outline-offset:-2px}@media (prefers-contrast:high){.toolbar-btn,.toolbar-btn-small{border:2px solid white}.file-item,.editor-tab,.template-card{border-width:3px}}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.loading{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}.toast-notification{position:fixed;bottom:-100px;right:20px;padding:12px 20px;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:white;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.3);font-size:13px;font-weight:600;z-index:10000;transition:all 0.3s ease-out}.toast-notification.show{bottom:20px}.toast-notification.success{background:linear-gradient(135deg,#22c55e 0,#16a34a 100%)}.toast-notification.error{background:linear-gradient(135deg,#ef4444 0,#dc2626 100%)}.toast-notification.warning{background:linear-gradient(135deg,#f59e0b 0,#d97706 100%)}.toast-notification.info{background:linear-gradient(135deg,#3b82f6 0,#2563eb 100%)}.search-input{width:100%;padding:10px 12px;border:2px solid rgba(102,126,234,0.2);border-radius:6px;font-size:13px;outline:none;transition:all 0.3s;box-sizing:border-box}.search-input:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.1)}.btn-loading{opacity:0.6;cursor:not-allowed;pointer-events:none;position:relative}.btn-loading::after{content:'';position:absolute;right:10px;top:50%;transform:translateY(-50%);width:12px;height:12px;border:2px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 0.8s linear infinite}