:root{--bg-color:#f4f4f4;--text-color:#333;--container-bg:#fff;--border-color:#ccc;--button-bg:#0073e6;--button-hover-bg:#005bb5;--header-color:#0073e6;--input-bg:#fff;--input-border:#ccc;--quill-toolbar-bg:#f9f9f9;--quill-container-bg:#fff;--quill-border:#ccc;--codemirror-bg:#fff;--codemirror-text:#333;--codemirror-border:#ccc}.dark-mode{--bg-color:#2c2c2c;--text-color:#e0e0e0;--container-bg:#3c3c3c;--border-color:#555;--button-bg:#005bb5;--button-hover-bg:#003f80;--header-color:#4da6ff;--input-bg:#4c4c4c;--input-border:#666;--quill-toolbar-bg:#4c4c4c;--quill-container-bg:#3c3c3c;--quill-border:#555;--codemirror-bg:#2d2d2d;--codemirror-text:#e0e0e0;--codemirror-border:#555}.header-container{align-items:center;justify-content:space-between;margin-bottom:20px}.theme-toggle{background:none;border:none;color:var(--text-color);cursor:pointer;font-size:1.5em;outline:none;transition:color .3s}.theme-toggle:hover{color:var(--header-color)}.container{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.editor,.output{background:var(--container-bg);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.05);display:flex;flex:1;flex-direction:column;height:550px;min-width:300px;overflow:hidden}#quillEditor{background:var(--quill-container-bg);border-top:1px solid var(--quill-border);color:var(--text-color);flex:1;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:.95em;height:100%;padding:15px}.ql-toolbar{background:var(--quill-toolbar-bg);border-bottom:1px solid var(--quill-border)!important;border-radius:8px 8px 0 0;padding:10px!important}.ql-container.ql-snow{border:none!important}.ql-editor{height:100%;min-height:auto;overflow-y:auto}.controls input[type=checkbox]{left:auto;position:relative}.CodeMirror{background:var(--codemirror-bg);border:none;border-radius:0 0 8px 8px;border-top:1px solid var(--codemirror-border);color:var(--codemirror-text);flex:1;font-family:Consolas,Monaco,monospace;font-size:.95em;height:100%;line-height:1.5}body.dark-mode .CodeMirror.cm-s-duotone-light,body.dark-mode .CodeMirror.cm-s-material-ocean,body:not(.dark-mode) .CodeMirror{background-color:var(--codemirror-bg)}.CodeMirror-lines{padding:15px 0}.controls{background:var(--container-bg);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.05);padding:20px}.controls-grid{display:grid;gap:10px 20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:15px}.controls label{align-items:center;cursor:pointer;display:flex;margin-bottom:0;user-select:none}.controls input[type=checkbox]{accent-color:var(--button-bg);height:18px;margin-right:10px;width:18px}.btn-group{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.btn{align-items:center;background:var(--button-bg);border:none;border-radius:5px;color:#fff;cursor:pointer;display:flex;font-size:1em;gap:8px;padding:12px 25px;transition:background .2s ease-in-out,transform .1s ease;white-space:nowrap}.btn:hover{background:var(--button-hover-bg);transform:translateY(-2px)}.btn:active{transform:translateY(0)}.input-group{margin-bottom:15px;margin-top:15px}.input-group label{display:block;font-weight:700;margin-bottom:8px}.input-group input[type=text]{background:var(--input-bg);border:1px solid var(--input-border);border-radius:5px;box-sizing:border-box;color:var(--text-color);font-size:1em;padding:10px;transition:border-color .3s;width:calc(100% - 22px)}.input-group input[type=text]:focus{border-color:var(--button-bg);outline:none}@media (max-width:768px){.btn-group,.container{flex-direction:column}.controls-grid{grid-template-columns:1fr}.editor,.output{height:400px;min-width:unset}}