:root{--bg:#f5f5f5;--surface:#fff;--border:#e5e5e5;--text:#333;--text-secondary:#666;--accent:#c41d35;--accent-hover:#a01828;--header-bg:#fff;--editor-bg:#fafafa}.dark{--bg:#1a1a1a;--surface:#2a2a2a;--border:#333;--text:#e0e0e0;--text-secondary:#999;--header-bg:#222;--editor-bg:#1e1e1e}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}.app{flex-direction:column;height:100vh;display:flex;overflow:hidden}.header{background:var(--header-bg);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.header-left{align-items:center;gap:12px;display:flex}.logo{color:var(--accent);font-size:18px;font-weight:700}.tagline{color:var(--text-secondary);font-size:13px}.header-right{align-items:center;gap:8px;display:flex}.style-select{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:6px;outline:none;padding:6px 12px;font-size:13px}.btn{cursor:pointer;white-space:nowrap;border:none;border-radius:6px;padding:6px 14px;font-size:13px;transition:all .2s}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-ghost{color:var(--text);border:1px solid var(--border);background:0 0}.btn-ghost:hover{background:var(--border)}.main{flex:1;display:flex;overflow:hidden}.editor-pane{border-right:1px solid var(--border);flex:1;display:flex}.editor-pane.full{border-right:none}.editor{resize:none;background:var(--editor-bg);width:100%;height:100%;color:var(--text);tab-size:2;border:none;outline:none;padding:20px;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:14px;line-height:1.6}.preview-pane{flex-direction:column;flex:1;display:flex;overflow:hidden}.preview-header{color:var(--text-secondary);background:var(--surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:8px 16px;font-size:12px;display:flex}.char-count{font-variant-numeric:tabular-nums}.preview-content{background:#fff;flex:1;padding:20px;overflow-y:auto}.footer{color:var(--text-secondary);background:var(--header-bg);border-top:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 20px;font-size:12px;display:flex}@media (width<=768px){.header{flex-direction:column;gap:8px}.header-right{flex-wrap:wrap;justify-content:center}.main{flex-direction:column}.editor-pane{border-right:none;border-bottom:1px solid var(--border)}.tagline{display:none}}