:root{--bg: #f5f2ea;--panel: #fffdf8;--ink: #1f2a37;--ink-muted: #5d6778;--accent: #0b7285;--accent-strong: #095c6b;--danger: #b42318;--border: #d8d2c4}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Segoe UI,Tahoma,sans-serif;color:var(--ink);background:radial-gradient(circle at 20% 10%,#fff7e6 0%,var(--bg) 65%)}.app{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:.75rem;min-height:100vh;padding:1rem}.header h1{margin:0;font-size:1.35rem}.header p{margin:.25rem 0 0;color:var(--ink-muted);font-size:.9rem}.controls{display:grid;gap:.5rem;grid-template-columns:repeat(2,minmax(0,1fr))}button{border:1px solid var(--accent-strong);background:var(--accent);color:#fff;font-weight:600;border-radius:.5rem;padding:.55rem;cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}.status-row{display:flex;justify-content:space-between;gap:1rem;color:var(--ink-muted);font-size:.82rem}.editor-layout{display:grid;gap:.75rem;grid-template-columns:1fr;min-height:0}.panel{display:grid;gap:.4rem;background:var(--panel);border:1px solid var(--border);border-radius:.8rem;padding:.6rem;min-height:260px}.panel>span{font-size:.85rem;font-weight:600;color:var(--ink-muted)}#markdownEditor{width:100%;min-height:240px;resize:vertical;border:1px solid var(--border);border-radius:.45rem;font:400 .95rem/1.5 Cascadia Code,Consolas,monospace;padding:.6rem;background:#fff;color:var(--ink)}.preview{border:1px solid var(--border);border-radius:.45rem;background:#fff;padding:.6rem;min-height:240px;overflow:auto}.preview pre{background:#f4f4f4;border-radius:.35rem;padding:.5rem;overflow-x:auto}.preview code{font-family:Cascadia Code,Consolas,monospace}.footer{border-top:1px solid var(--border);padding-top:.4rem;font-size:.82rem;display:flex;justify-content:space-between;align-items:center;gap:.75rem}#status[data-state=error]{color:var(--danger)}button.secondary{background:#f8fafc;color:var(--accent-strong);border-color:var(--border);font-size:.78rem;padding:.4rem .55rem}@media(min-width:960px){.controls{grid-template-columns:repeat(4,minmax(0,1fr))}.editor-layout{grid-template-columns:1fr 1fr}#markdownEditor,.preview{min-height:62vh}}