.html-editor-container{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;border:1px solid #e1e5e9;border-radius:12px;overflow:hidden;background:#fff;margin:20px 0;box-shadow:0 2px 10px rgba(0,0,0,.1);max-width:100%}.editor-toolbar{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-bottom:1px solid #dee2e6;padding:12px 15px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;box-shadow:inset 0 -1px 0 rgba(0,0,0,.1)}.toolbar-group{display:flex;gap:3px;margin-right:15px;padding-right:15px;border-right:1px solid #dee2e6;align-items:center}.toolbar-group:last-child{border-right:none;margin-right:0}.btn-toolbar{background:#fff;border:1px solid #ced4da;border-radius:6px;padding:8px 10px;cursor:pointer;transition:all 0.2s ease;font-size:14px;min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#495057;position:relative;font-family:inherit}.btn-toolbar:hover{background:#e3f2fd;border-color:#2196f3;color:#1976d2;transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.1)}.btn-toolbar.active{background:#2196f3;color:#fff;border-color:#1976d2;box-shadow:0 2px 4px rgba(33,150,243,.3)}.btn-toolbar i{font-size:14px}.font-family-select,.font-size-select{border:1px solid #ced4da;border-radius:6px;padding:8px 10px;font-size:13px;height:36px;background:#fff;color:#495057;transition:border-color 0.2s ease;font-family:inherit}.font-family-select:focus,.font-size-select:focus{outline:none;border-color:#2196f3;box-shadow:0 0 0 2px rgba(33,150,243,.2)}.font-family-select{width:140px}.font-size-select{width:70px}.color-picker{border:1px solid #ced4da;border-radius:6px;width:36px;height:36px;cursor:pointer;padding:2px;background:#fff;transition:all 0.2s ease}.color-picker:hover{border-color:#2196f3;transform:translateY(-1px)}.editor-main{display:flex;min-height:400px;background:#fff}.editor-left,.editor-right{flex:1;display:flex;flex-direction:column}.editor-left{border-right:1px solid #e1e5e9}.editor-header{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-bottom:1px solid #dee2e6;padding:12px 15px;display:flex;justify-content:space-between;align-items:center;font-weight:600;color:#495057;font-size:14px}.editor-header i{margin-right:8px;color:#6c757d}.view-toggles,.header-buttons{display:flex;gap:5px}.btn-view-toggle,.btn-refresh,.btn-fullscreen{background:#fff;border:1px solid #ced4da;border-radius:5px;padding:6px 12px;cursor:pointer;font-size:12px;transition:all 0.2s ease;color:#6c757d;font-family:inherit}.btn-view-toggle:hover,.btn-refresh:hover,.btn-fullscreen:hover{background:#e3f2fd;border-color:#2196f3;color:#1976d2}.btn-view-toggle.active{background:#2196f3;color:#fff;border-color:#1976d2}.btn-view-toggle i,.btn-refresh i,.btn-fullscreen i{margin-right:5px;font-size:11px}.btn-refresh,.btn-fullscreen{padding:6px 10px;min-width:auto}.editor-content{flex:1;position:relative;background:#fff}#wysiwyg-editor,#html-editor{width:100%;border:none;padding:20px;font-size:14px;line-height:1.6;outline:none;resize:none;font-family:inherit;background:#fff;box-sizing:border-box}#html-editor{font-family:'Monaco','Menlo','Ubuntu Mono','Consolas','source-code-pro',monospace;background:#f8f9fa;color:#495057;font-size:13px;line-height:1.5}#wysiwyg-editor:focus,#html-editor:focus{background:#fff}.editor-preview{padding:20px;overflow-y:auto;background:#fff;border:none;font-size:14px;line-height:1.6;color:#212529;box-sizing:border-box}.editor-stats{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-top:1px solid #dee2e6;padding:10px 20px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#6c757d}.stats-left{display:flex;gap:20px;flex-wrap:wrap}.stats-left span{display:flex;align-items:center;gap:5px;white-space:nowrap}.stats-left i{color:#adb5bd;font-size:11px}.stats-left strong{color:#495057;font-weight:600}.stats-right{font-style:italic}#last-modified{color:#495057;font-weight:500}#wysiwyg-editor p{margin:0 0 1em 0}#wysiwyg-editor h1,#wysiwyg-editor h2,#wysiwyg-editor h3,#wysiwyg-editor h4,#wysiwyg-editor h5,#wysiwyg-editor h6{margin:1em 0 .5em 0;font-weight:600}#wysiwyg-editor h1{font-size:2.5em;color:#2c3e50}#wysiwyg-editor h2{font-size:2em;color:#34495e}#wysiwyg-editor h3{font-size:1.75em;color:#5d6d7e}#wysiwyg-editor h4{font-size:1.5em;color:#6c757d}#wysiwyg-editor h5{font-size:1.25em;color:#6c757d}#wysiwyg-editor h6{font-size:1.1em;color:#6c757d}#wysiwyg-editor ul,#wysiwyg-editor ol{margin:.5em 0;padding-left:2em}#wysiwyg-editor li{margin:.25em 0}#wysiwyg-editor blockquote{border-left:4px solid #2196f3;margin:1em 0;padding:.5em 1em;background:#f8f9fa;font-style:italic;color:#5d6d7e}#wysiwyg-editor table{border-collapse:collapse;width:100%;margin:1em 0;border:1px solid #dee2e6}#wysiwyg-editor table td,#wysiwyg-editor table th{border:1px solid #dee2e6;padding:12px 15px;text-align:left}#wysiwyg-editor table th{background:linear-gradient(135deg,#e3f2fd 0%,#bbdefb 100%);font-weight:600;color:#1565c0}#wysiwyg-editor table tr:nth-child(even){background:#f8f9fa}#wysiwyg-editor table tr:hover{background:#e3f2fd}#wysiwyg-editor a{color:#2196f3;text-decoration:none;border-bottom:1px solid transparent;transition:border-color 0.2s ease}#wysiwyg-editor a:hover{border-bottom-color:#2196f3}#wysiwyg-editor img{max-width:100%;height:auto;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);margin:.5em 0}#wysiwyg-editor hr{border:none;height:2px;background:linear-gradient(to right,transparent,#dee2e6,transparent);margin:2em 0}.html-editor-container.fullscreen{position:fixed!important;top:0!important;left:0!important;width:100%!important;height:100%!important;z-index:9999!important;background:#fff!important;border-radius:0!important;margin:0!important}.html-editor-container.fullscreen .editor-main{min-height:calc(100vh - 140px)}@media (max-width:1024px){.editor-main{flex-direction:column}.editor-left{border-right:none;border-bottom:1px solid #e1e5e9}.editor-toolbar{padding:10px;gap:5px}.toolbar-group{margin-right:10px;padding-right:10px}}@media (max-width:768px){.editor-toolbar{justify-content:flex-start;overflow-x:auto;padding:8px;white-space:nowrap}.toolbar-group{margin-right:8px;padding-right:8px;border-right:none;flex-shrink:0}.btn-toolbar{padding:6px 8px;min-width:32px;height:32px;font-size:12px}.font-family-select{width:120px;font-size:12px}.font-size-select{width:60px;font-size:12px}.editor-stats{flex-direction:column;gap:10px;align-items:flex-start;padding:8px 15px}.stats-left{gap:15px}.editor-header{padding:10px 12px;font-size:13px}.btn-view-toggle,.btn-refresh,.btn-fullscreen{padding:4px 8px;font-size:11px}}@media (max-width:480px){.html-editor-container{margin:10px 0;border-radius:8px}.editor-toolbar{padding:6px;gap:3px}.toolbar-group{margin-right:5px;padding-right:5px}.btn-toolbar{padding:5px 6px;min-width:28px;height:28px;font-size:11px}.editor-header{padding:8px 10px;font-size:12px;flex-direction:column;gap:8px;align-items:flex-start}.view-toggles,.header-buttons{align-self:flex-end}#wysiwyg-editor,#html-editor,.editor-preview{padding:15px 12px;font-size:13px}.stats-left{gap:10px;flex-direction:column;align-items:flex-start}.stats-left span{margin-bottom:2px}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.html-editor-container{animation:fadeIn 0.3s ease-out}.btn-toolbar.active{animation:pulse 0.3s ease}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}.editor-preview::-webkit-scrollbar,#html-editor::-webkit-scrollbar,.editor-toolbar::-webkit-scrollbar{width:8px;height:8px}.editor-preview::-webkit-scrollbar-track,#html-editor::-webkit-scrollbar-track,.editor-toolbar::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.editor-preview::-webkit-scrollbar-thumb,#html-editor::-webkit-scrollbar-thumb,.editor-toolbar::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.editor-preview::-webkit-scrollbar-thumb:hover,#html-editor::-webkit-scrollbar-thumb:hover,.editor-toolbar::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.html-editor-notification{position:fixed;top:20px;right:20px;background:#4CAF50;color:#fff;padding:12px 20px;border-radius:6px;z-index:10000;font-size:14px;box-shadow:0 2px 10px rgba(0,0,0,.2);animation:slideInRight 0.3s ease}@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.html-editor-notification.error{background:#f44336}.html-editor-notification.warning{background:#ff9800}.html-editor-notification.info{background:#2196f3}