:root{--bg:#f5f5f7;--panel-bg:#fff;--border:#e5e5e5;--text:#1a1a1a;--text-muted:#888;--primary:#7468d2;--primary-dark:#5f54b8;--danger:#d24848;--header-h:56px;--toolbar-h:48px}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,sans-serif}#app{flex-direction:column;height:100vh;display:flex}.app-header{height:var(--header-h);background:var(--panel-bg);border-bottom:1px solid var(--border);flex:none;justify-content:space-between;align-items:center;padding:0 16px;display:flex}.app-header__left{flex:1;align-items:center;gap:16px;min-width:0;display:flex}.app-title{white-space:nowrap;margin:0;font-size:16px;font-weight:600}.title-input{border:1px solid var(--border);border-radius:6px;flex:1;max-width:480px;padding:6px 10px;font-size:14px}.toolbar{min-height:var(--toolbar-h);background:var(--panel-bg);border-bottom:1px solid var(--border);flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:8px;padding:8px 16px;display:flex}.toolbar__group{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.paste-mode{color:var(--text-muted);align-items:center;gap:4px;font-size:13px;display:flex}.paste-mode select{border:1px solid var(--border);border-radius:6px;padding:4px 6px}.stats{color:var(--text-muted);font-size:13px}.btn{appearance:none;border:1px solid var(--border);color:var(--text);cursor:pointer;white-space:nowrap;background:#fff;border-radius:8px;padding:7px 14px;font-size:13px}.btn:hover{border-color:var(--primary);color:var(--primary)}.btn--sm{padding:5px 10px;font-size:12px}.btn--ghost{background:0 0;border-color:#0000}.btn--ghost:hover{background:#0000000a}.btn--primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn--primary:hover{background:var(--primary-dark);color:#fff}.btn--ai{color:#fff;background:linear-gradient(135deg,#7468d2,#a78bfa);border-color:#0000}.btn--ai:hover{filter:brightness(1.08);color:#fff}.btn--ai:disabled{opacity:.6;cursor:default;filter:none}.workspace{flex:1;min-height:0;display:flex}.pane{flex-direction:column;flex:1;min-width:0;display:flex}.pane--edit{border-right:1px solid var(--border)}.editor-host{background:#fff;flex:1;min-height:0;overflow:auto}.editor-host .cm-editor{height:100%;font-size:14px}.editor-host .cm-scroller{font-family:Menlo,Consolas,Courier New,monospace}.pane--preview{background:var(--bg);align-items:center;padding:16px;position:relative;overflow:auto}.preview-toolbar{flex-wrap:wrap;align-items:center;gap:8px;width:100%;max-width:500px;margin-bottom:10px;display:flex}.preview-toolbar__spacer{flex:1}.dark-toggle{color:var(--text-muted);align-items:center;gap:4px;font-size:13px;display:flex}.phone-frame{background:#fff;border:10px solid #1a1a1a;border-radius:28px;width:375px;max-width:100%;overflow:hidden;box-shadow:0 8px 24px #0000001f}.phone-screen{background:#fff;height:640px;padding:16px 16px 40px;transition:background .2s;overflow-y:auto}.phone-screen.is-dark{background:#191919}.preview-title{color:#1a1a1a;margin-bottom:12px;font-size:19px;font-weight:700;line-height:1.5}.phone-screen.is-dark .preview-title{color:#e8e8e8}.preview-content img{max-width:100%}.btn--copy-main{border-radius:10px;width:375px;max-width:100%;margin-top:14px;padding:12px;font-size:15px}.tabs-mobile{display:none}.settings-panel{border-left:1px solid var(--border);z-index:50;background:#fff;flex-direction:column;width:320px;max-width:90vw;height:100%;transition:transform .2s;display:flex;position:fixed;top:0;right:0;transform:translate(100%);box-shadow:-8px 0 24px #00000014}.settings-panel.is-open{transform:translate(0)}.settings-panel__header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.settings-panel__header h2{margin:0;font-size:15px}.settings-panel__body{flex:1;padding:8px 16px 24px;overflow-y:auto}.settings-section{border-bottom:1px solid var(--border);padding:14px 0}.settings-section h3{color:var(--text-muted);margin:0 0 10px;font-size:13px;font-weight:600}.field{justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;font-size:13px;display:flex}.field input[type=text],.field input[type=number]{border:1px solid var(--border);border-radius:6px;width:110px;padding:5px 8px}.field--checkbox{justify-content:flex-start}.field--checkbox input{order:-1;margin-right:4px}.field--select{display:block}.field--select select{border:1px solid var(--border);background:#fff;border-radius:6px;width:100%;padding:7px 8px;font-size:13px}.field-hint{color:var(--text-muted);margin:6px 0 10px;font-size:12px}.settings-actions{gap:8px;margin-top:8px;display:flex}.toast-host{z-index:100;flex-direction:column;align-items:center;gap:8px;display:flex;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.toast{color:#fff;background:#1a1a1ae6;border-radius:8px;padding:10px 18px;font-size:13px;animation:.15s toast-in;box-shadow:0 4px 12px #0003}.toast--error{background:#d24848f2}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (width<=860px){.workspace{position:relative}.tabs-mobile{border-bottom:1px solid var(--border);background:#fff;display:flex}.tab-btn{color:var(--text-muted);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:10px;font-size:14px}.tab-btn.is-active{color:var(--primary);border-bottom-color:var(--primary)}.workspace{flex-direction:column}.pane{display:none}.pane.is-active{display:flex}.pane--edit{border-right:none}.phone-frame{width:100%;box-shadow:none;border-width:0;border-radius:0}.btn--copy-main{width:100%}}