:root { --bg: #f7f3ea; --fg: #1f252e; --accent: #126da8; --panel: #ffffff; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: Georgia, "Noto Serif", serif; }
.txf-shell { max-width: 860px; margin: 40px auto; background: var(--panel); padding: 24px; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.08); }
label { display: block; margin: 10px 0; font-weight: 600; }
input, select, textarea, button { width: 100%; padding: 10px; margin-top: 6px; font: inherit; }
button { width: auto; cursor: pointer; background: var(--accent); color: #fff; border: 0; border-radius: 8px; }
.txf-editor { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.txf-editor header { grid-column: 1 / span 2; padding: 12px; background: #ece5d3; position: sticky; top: 0; z-index: 10; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.txf-editor .pane { padding: 12px; }
#post-source { min-height: 76vh; width: 100%; font-family: ui-monospace, Menlo, monospace; }
#preview-frame { width: 100%; min-height: 84vh; border: 1px solid #ddd; border-radius: 8px; background: #fff; }
@media (max-width: 900px) { .txf-editor { grid-template-columns: 1fr; } .txf-editor header { grid-column: 1; } }