.tool-options{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px;flex-wrap:wrap;padding:16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md)}.options-group{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.options-group label{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--text-secondary);font-size:.95em}.options-group label input[type=checkbox]{cursor:pointer;width:18px;height:18px}.file-upload-btn{display:inline-block;cursor:pointer;position:relative}.split-pane{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px;min-height:400px}@media(max-width:768px){.split-pane{grid-template-columns:1fr;min-height:auto}.tool-options{flex-direction:column;align-items:stretch}.options-group{justify-content:center}}.pane{display:flex;flex-direction:column;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}.pane-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--bg-tool);border-bottom:1px solid var(--border-color)}.pane-header h3{margin:0;font-size:.95em;color:var(--text-primary)}.tab-buttons{display:flex;gap:8px}.tab-btn{padding:6px 12px;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;font-size:.85em;border-bottom:2px solid transparent;transition:all .2s}.tab-btn.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary)}.tab-btn:hover{color:var(--text-primary)}.pane-left,.pane-right{padding:0}#markdown-input{flex:1;padding:16px;background:var(--bg-tool);border:none;color:var(--text-primary);font-family:JetBrains Mono,Fira Code,monospace;font-size:14px;resize:none;outline:none}#markdown-input::-moz-placeholder{color:var(--text-muted)}#markdown-input::placeholder{color:var(--text-muted)}.tab-content{flex:1;overflow-y:auto;display:none;padding:16px;background:var(--bg-tool)}.tab-content.active{display:block}.html-preview{font-size:14px;line-height:1.6}.html-preview h1,.html-preview h2,.html-preview h3,.html-preview h4,.html-preview h5,.html-preview h6{margin-top:1em;margin-bottom:.5em;font-weight:600;color:var(--accent-primary)}.html-preview h1{font-size:1.75em}.html-preview h2{font-size:1.5em}.html-preview h3{font-size:1.25em}.html-preview p{margin:.8em 0}.html-preview a{color:var(--accent-secondary);text-decoration:none}.html-preview a:hover{text-decoration:underline}.html-preview code{background:#6c3ce11a;padding:2px 6px;border-radius:3px;font-family:JetBrains Mono,Fira Code,monospace;font-size:.9em;color:var(--accent-secondary)}.html-preview pre{background:#0000004d;padding:12px;border-radius:6px;overflow-x:auto;margin:1em 0}.html-preview pre code{background:none;padding:0;color:var(--text-primary)}.html-preview blockquote{border-left:3px solid var(--accent-primary);padding-left:16px;margin-left:0;margin-right:0;color:var(--text-secondary);font-style:italic}.html-preview table{border-collapse:collapse;width:100%;margin:1em 0;font-size:.95em}.html-preview table td,.html-preview table th{border:1px solid var(--border-color);padding:8px 12px;text-align:left}.html-preview table th{background:#6c3ce11a;font-weight:600;color:var(--accent-primary)}.html-preview ul,.html-preview ol{margin:.8em 0;padding-left:2em}.html-preview li{margin:.4em 0}.html-preview hr{border:none;border-top:1px solid var(--border-color);margin:1.5em 0}.html-preview input[type=checkbox]{margin-right:8px;cursor:pointer}.code-wrapper{position:relative;display:flex;flex-direction:column;height:100%}.html-code{margin:0;padding:16px;background:#0000004d;border-radius:6px;font-family:JetBrains Mono,Fira Code,monospace;font-size:13px;color:var(--text-primary);overflow-x:auto;flex:1;white-space:pre-wrap;word-break:break-all}#copy-html-btn{position:absolute;top:8px;right:8px;z-index:10}.btn-icon{padding:4px 8px;background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);font-size:1.5em;cursor:pointer;border-radius:var(--radius-sm);transition:all .2s}.btn-icon:hover{background:var(--bg-tool);color:var(--text-primary);border-color:var(--accent-primary)}
