:root{--bg: #f4f5f7;--panel: #ffffff;--border: #d7dbe0;--ink: #1f2328;--muted: #6b7280;--accent: #2563eb;--ok: #15803d;--warn: #b45309;--error: #b91c1c;--editor-bg: #1e2430;--editor-ink: #e6edf3;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink)}.app-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border)}.app-header h1{font-size:16px;font-weight:600;margin:0}.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.font-picker{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}.font-picker select{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--ink)}button{font:inherit;font-size:13px;padding:6px 12px;border:1px solid var(--border);border-radius:6px;background:var(--panel);color:var(--ink);cursor:pointer}button:hover{border-color:var(--accent);color:var(--accent)}.app-main{display:grid;grid-template-columns:minmax(280px,34%) 1fr;height:calc(100vh - 53px)}.editor-pane{display:flex;flex-direction:column;border-right:1px solid var(--border);min-width:0}#editor{flex:1;min-height:0;background:var(--editor-bg);overflow:hidden}#editor .cm-editor{height:100%}#editor .cm-editor.cm-focused{outline:none}.status{padding:8px 16px;font-size:12.5px;border-top:1px solid var(--border);background:var(--panel)}.status--ok{color:var(--ok)}.status--warn{color:var(--warn)}.status--error{color:var(--error)}.preview-pane{overflow:auto;padding:24px;min-width:0}.preview-pane.drag-over{outline:2px dashed var(--accent);outline-offset:-8px;background:#2563eb0a}.preview{display:inline-block;background:#fff;border:1px solid var(--border);border-radius:8px;padding:16px;box-shadow:0 1px 3px #0000000f}.preview svg{display:block}