*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f5f5f5;color:#333;line-height:1.6}.container{max-width:1400px;margin:0 auto;padding:20px}h1{text-align:center;color:#2c3e50;margin-bottom:30px;font-size:2.5rem;font-weight:300}.editor-container{display:flex;gap:20px;height:80vh;background:#fff;border-radius:10px;box-shadow:0 4px 20px #0000001a;overflow:hidden}.editor-panel{flex:1;display:flex;flex-direction:column;border-right:1px solid #e0e0e0}.toolbar{display:flex;align-items:center;padding:15px;background:#f8f9fa;border-bottom:1px solid #e0e0e0;flex-wrap:wrap;gap:8px}.toolbar-btn{background:#fff;border:1px solid #ddd;border-radius:4px;padding:8px 12px;cursor:pointer;transition:all .2s ease;color:#555;font-size:14px;min-width:36px;height:36px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:#e9ecef;border-color:#adb5bd}.toolbar-btn.active{background:#007bff;color:#fff;border-color:#007bff}.toolbar-select{padding:8px;border:1px solid #ddd;border-radius:4px;background:#fff;cursor:pointer;font-size:14px;height:36px}.toolbar-color{width:36px;height:36px;border:1px solid #ddd;border-radius:4px;cursor:pointer;background:none;padding:2px}.separator{width:1px;height:24px;background:#ddd;margin:0 4px}.editor{flex:1;padding:20px;outline:none;font-size:16px;line-height:1.6;overflow-y:auto;background:#fff}.editor:focus{outline:none}.editor p{margin-bottom:16px}.editor ul,.editor ol{margin-left:20px;margin-bottom:16px}.editor li{margin-bottom:8px}.editor img{max-width:100%;height:auto;border-radius:4px}.editor a{color:#007bff;text-decoration:underline}.html-panel{flex:1;display:flex;flex-direction:column;background:#2d3748}.html-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#1a202c;color:#fff;border-bottom:1px solid #4a5568}.html-header h3{margin:0;font-size:16px;font-weight:500}.copy-btn{background:#4299e1;color:#fff;border:none;border-radius:4px;padding:6px 12px;cursor:pointer;font-size:12px;transition:background .2s ease}.copy-btn:hover{background:#3182ce}.html-code{flex:1;padding:20px;background:#2d3748;color:#e2e8f0;font-family:Courier New,monospace;font-size:14px;line-height:1.5;overflow:auto;white-space:pre-wrap;word-wrap:break-word}@media (max-width: 768px){.editor-container{flex-direction:column;height:auto}.editor-panel{border-right:none;border-bottom:1px solid #e0e0e0}.toolbar{flex-wrap:wrap}.editor,.html-panel{min-height:300px}}.editor::-webkit-scrollbar,.html-code::-webkit-scrollbar{width:8px}.editor::-webkit-scrollbar-track{background:#f1f1f1}.editor::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.editor::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.html-code::-webkit-scrollbar-track{background:#1a202c}.html-code::-webkit-scrollbar-thumb{background:#4a5568;border-radius:4px}.html-code::-webkit-scrollbar-thumb:hover{background:#718096}