.tool-page{display:flex;flex-direction:column}
.md-layout{flex:1;display:flex;flex-direction:column;overflow:hidden}
.md-toolbar{display:flex;align-items:center;gap:2px;padding:8px 16px;background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);flex-wrap:wrap}
.tb-btn{background:transparent;border:1px solid transparent;color:var(--text-secondary);padding:4px 8px;border-radius:var(--radius-sm);font-size:13px;cursor:pointer;transition:var(--transition);white-space:nowrap}
.tb-btn:hover{background:var(--bg-raised);border-color:var(--border-subtle);color:var(--text-primary)}
.tb-btn.italic{font-style:italic}
.tb-sep{width:1px;height:20px;background:var(--border-subtle);margin:0 4px}
.tb-toggle{gap:6px}
.md-editor-area{flex:1;display:flex;overflow:hidden}
.md-pane{flex:1;display:flex;flex-direction:column;overflow:hidden}
.md-pane-label{padding:6px 16px;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase;background:var(--bg-surface);border-bottom:1px solid var(--border-subtle)}
.md-pane textarea{flex:1;resize:none;background:var(--bg-base);border:none;outline:none;padding:24px;color:var(--text-primary);font-family:var(--font-mono);font-size:14px;line-height:1.8;overflow-y:auto}
.md-divider{width:1px;background:var(--border-subtle)}
.md-preview{flex:1;overflow-y:auto;padding:24px 32px;line-height:1.8;color:var(--text-primary)}
.md-preview h1,.md-preview h2,.md-preview h3{font-family:var(--font-display);color:var(--text-primary);margin:1.5em 0 .5em;line-height:1.2}
.md-preview h1{font-size:2em;border-bottom:1px solid var(--border-subtle);padding-bottom:.3em}
.md-preview h2{font-size:1.5em;border-bottom:1px solid var(--border-subtle);padding-bottom:.3em}
.md-preview h3{font-size:1.2em}
.md-preview p{margin:.8em 0}
.md-preview code{background:var(--bg-raised);padding:2px 6px;border-radius:4px;font-family:var(--font-mono);font-size:.9em;color:var(--accent-cyan)}
.md-preview pre{background:var(--bg-void);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px;overflow-x:auto;margin:1em 0}
.md-preview pre code{background:none;padding:0;color:var(--text-primary)}
.md-preview blockquote{border-left:3px solid var(--accent-blue);margin:1em 0;padding:4px 16px;color:var(--text-secondary);background:var(--bg-surface);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.md-preview ul,.md-preview ol{padding-left:1.5em;margin:.5em 0}
.md-preview li{margin:.25em 0}
.md-preview table{border-collapse:collapse;width:100%;margin:1em 0}
.md-preview th,.md-preview td{border:1px solid var(--border-mid);padding:8px 12px;text-align:left}
.md-preview th{background:var(--bg-raised);font-weight:600}
.md-preview hr{border:none;border-top:1px solid var(--border-mid);margin:1.5em 0}
.md-preview a{color:var(--accent-blue);text-decoration:none}
.md-preview a:hover{text-decoration:underline}
.md-preview img{max-width:100%;border-radius:var(--radius-md)}
@media(max-width:700px){.md-editor-area{flex-direction:column}.md-divider{width:100%;height:1px}}