:root{
  --bg:#f7f8fb;--surface:#fff;--muted:#6b7280;--accent:#2563eb;--text:#111;
}
body.dark-mode { background:#0b1220; color:#dbeafe }
.formatter-controls{display:flex;gap:16px;flex-wrap:wrap;flex-direction:column}
.left-col{flex:1;min-width:320px}
.right-col{flex:1;min-width:320px}
textarea#editor{width:100%;padding:12px;border-radius:8px;border:1px solid #e6e9ef;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace}
.row{display:flex;gap:8px;align-items:center;margin-top:8px}
.options{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
.counts{display:flex;gap:18px;margin-top:12px;color:var(--muted)}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.primary{background:var(--accent);color:#fff;border:0;padding:8px 10px;border-radius:8px;cursor:pointer}
.secondary{background:#eef2ff;color:var(--accent);border:1px solid #e0e7ff;padding:8px 10px;border-radius:8px}
.editor-preview{display:flex;gap:12px;flex-direction:column}
.pane{width:100%}
pre#formatted{max-height:520px;overflow:auto;padding:12px;border-radius:8px;border:1px solid #e6e9ef;background:#fff}
.preview-pane iframe{width:100%;height:520px;border:1px solid #e6e9ef;border-radius:8px}
.message{color:var(--muted);margin-top:12px}
@media (max-width:880px){.editor-preview{flex-direction:column}.preview-pane iframe{height:320px}}