:root{--color-primary:#10b981;--color-primary-light:#34d399;--color-primary-dark:#059669;--color-primary-glow:#10b98140;--color-primary-subtle:#ecfdf5;--color-accent:#f59e0b;--color-accent-light:#fbbf24;--color-bg:#f0f2f5;--color-bg-alt:#f8fafb;--color-surface:#fff;--color-surface-raised:#fcfcfd;--color-overlay:#0f172a73;--color-border:#e2e8f0;--color-border-light:#f1f5f9;--color-border-focus:#10b981;--color-text:#0f172a;--color-text-secondary:#475569;--color-text-muted:#94a3b8;--color-text-inverse:#fff;--color-editor-bg:#fafbfc;--color-editor-line:#cbd5e1;--color-editor-text:#1e293b;--shadow-xs:0 1px 2px #0f172a0a;--shadow-sm:0 1px 3px #0f172a0f, 0 1px 2px #0f172a0a;--shadow-md:0 4px 12px #0f172a14, 0 2px 4px #0f172a0a;--shadow-lg:0 12px 28px #0f172a1a, 0 4px 8px #0f172a0a;--shadow-xl:0 20px 40px #0f172a1f, 0 8px 16px #0f172a0f;--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--duration-fast:.15s;--duration-normal:.25s;--duration-slow:.4s;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--font-mono:"JetBrains Mono", "SF Mono", "Fira Code", "Monaco", "Consolas", "Ubuntu Mono", monospace}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.5;overflow:hidden}::selection{color:var(--color-text);background:#10b9812e}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.app{flex-direction:column;height:100vh;max-height:100vh;display:flex;overflow:hidden}.app-header{-webkit-backdrop-filter:blur(20px)saturate(180%);border-bottom:1px solid var(--color-border);height:56px;box-shadow:var(--shadow-sm);z-index:100;background:linear-gradient(135deg,#fffffff2,#f8fafbf2);flex-shrink:0;justify-content:space-between;align-items:center;gap:16px;padding:0 20px;display:flex}.app-header-left{flex-shrink:0;align-items:center;gap:12px;display:flex}.app-logo{color:var(--color-text);white-space:nowrap;cursor:default;letter-spacing:-.01em;align-items:center;gap:10px;font-size:15px;font-weight:700;display:flex}.app-logo-icon{background:linear-gradient(135deg, var(--color-primary), var(--color-primary-light));border-radius:var(--radius-sm);color:#fff;width:32px;height:32px;box-shadow:0 2px 8px var(--color-primary-glow);justify-content:center;align-items:center;font-size:16px;font-weight:800;display:flex}.app-logo-text{background:linear-gradient(135deg, var(--color-text), var(--color-text-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:15px;font-weight:700}.app-header-center{flex:1;justify-content:center;display:flex;overflow:auto hidden}.app-header-right{flex-shrink:0;align-items:center;gap:10px;display:flex}.app-main{background:var(--color-bg);flex:1;min-height:0;display:flex;overflow:hidden}.app-main.view-preview .preview-panel{border-radius:var(--radius-lg);max-width:860px;box-shadow:var(--shadow-lg);margin:20px auto;overflow:hidden}.panel-divider{background:var(--color-border);width:1px;transition:background var(--duration-fast) var(--ease-out);flex-shrink:0;position:relative}.panel-divider:after{content:"";background:linear-gradient(180deg, var(--color-primary) 0%, transparent 50%, var(--color-primary) 100%);opacity:0;transition:opacity var(--duration-fast);position:absolute;inset:0}.panel-divider:hover:after{opacity:1}.panel-divider:hover{background:var(--color-primary)}.toolbar{background:var(--color-bg-alt);border:1px solid var(--color-border-light);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);align-items:center;gap:2px;padding:4px 8px;display:flex}.toolbar-group{align-items:center;gap:1px;display:flex}.toolbar-group:not(:last-child){border-right:1px solid var(--color-border-light);margin-right:6px;padding-right:6px}.toolbar-btn{border-radius:var(--radius-xs);width:30px;height:30px;color:var(--color-text-secondary);cursor:pointer;transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);background:0 0;border:none;justify-content:center;align-items:center;display:flex;position:relative}.toolbar-btn:hover{background:var(--color-primary-subtle);color:var(--color-primary);transform:translateY(-1.5px)}.toolbar-btn:active{transition:transform 80ms;transform:translateY(0)scale(.95)}.toolbar-btn[data-shortcut]:after{content:attr(data-shortcut);color:var(--color-text-muted);white-space:nowrap;opacity:0;background:var(--color-surface);border:1px solid var(--color-border-light);transition:opacity var(--duration-fast);pointer-events:none;border-radius:3px;padding:1px 5px;font-size:9px;font-weight:600;position:absolute;bottom:-16px;left:50%;transform:translate(-50%)}.toolbar-btn:hover[data-shortcut]:after{opacity:1}.theme-switcher{position:relative}.theme-switcher-btn{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;white-space:nowrap;transition:border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);align-items:center;gap:6px;padding:6px 12px;font-size:12.5px;font-weight:500;display:flex}.theme-switcher-btn:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-subtle);box-shadow:0 0 0 3px var(--color-primary-glow)}.theme-switcher-label{font-size:12px}.theme-dropdown{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:260px;box-shadow:var(--shadow-xl);z-index:200;animation:dropdownIn var(--duration-normal) var(--ease-spring);position:absolute;top:calc(100% + 10px);right:0;overflow:hidden}@keyframes dropdownIn{0%{opacity:0;transform:translateY(-12px)scale(.94)}to{opacity:1;transform:translateY(0)scale(1)}}.theme-dropdown-title{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--color-border-light);background:var(--color-bg-alt);padding:12px 16px;font-size:11px;font-weight:700}.theme-option{cursor:pointer;text-align:left;width:100%;transition:background var(--duration-fast) var(--ease-out), padding-left var(--duration-fast) var(--ease-out);background:0 0;border:none;align-items:center;gap:12px;padding:11px 16px;display:flex}.theme-option:hover{background:var(--color-bg-alt);padding-left:20px}.theme-option.active{background:var(--color-primary-subtle)}.theme-option-icon{background:var(--color-primary-subtle);width:26px;height:26px;color:var(--color-primary);text-transform:uppercase;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:800;display:flex}.theme-option-info{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.theme-option-name{color:var(--color-text);font-size:13px;font-weight:600}.theme-option-desc{color:var(--color-text-muted);font-size:11px}.theme-option-check{color:var(--color-primary);flex-shrink:0}.image-uploader{position:relative}.image-uploader-trigger{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);align-items:center;gap:6px;padding:6px 12px;font-size:12.5px;font-weight:500;display:flex}.image-uploader-trigger:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-subtle);box-shadow:0 0 0 3px var(--color-primary-glow)}.image-uploader-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);width:340px;box-shadow:var(--shadow-xl);z-index:200;animation:dropdownIn var(--duration-normal) var(--ease-spring);position:absolute;top:calc(100% + 10px);right:0}.image-uploader-header{border-bottom:1px solid var(--color-border-light);color:var(--color-text);justify-content:space-between;align-items:center;padding:14px 16px;font-size:14px;font-weight:700;display:flex}.image-uploader-close{border-radius:var(--radius-xs);width:28px;height:28px;color:var(--color-text-muted);cursor:pointer;transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.image-uploader-close:hover{color:#ef4444;background:#fee2e2}.image-uploader-tabs{border-bottom:1px solid var(--color-border-light);display:flex}.image-uploader-tab{color:var(--color-text-muted);cursor:pointer;transition:color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px;font-size:12.5px;font-weight:500;display:flex}.image-uploader-tab:hover{color:var(--color-text)}.image-uploader-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.image-uploader-body{flex-direction:column;gap:14px;padding:16px;display:flex}.image-uploader-dropzone{border:2px dashed var(--color-border);border-radius:var(--radius-md);cursor:pointer;min-height:130px;transition:border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);background:var(--color-bg-alt);justify-content:center;align-items:center;display:flex;overflow:hidden}.image-uploader-dropzone:hover{border-color:var(--color-primary);background:var(--color-primary-subtle)}.image-uploader-placeholder{color:var(--color-text-muted);text-align:center;flex-direction:column;align-items:center;gap:8px;padding:24px;display:flex}.image-uploader-placeholder>:first-child{background:var(--color-primary-subtle);color:var(--color-primary);border-radius:50%;padding:12px}.image-uploader-hint{opacity:.7;font-size:11px!important}.image-uploader-input{display:none}.image-uploader-converting{color:var(--color-primary);flex-direction:column;align-items:center;gap:10px;font-size:13px;display:flex}.image-uploader-preview-wrap{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex;position:relative}.image-uploader-preview{border-radius:var(--radius-sm);object-fit:contain;max-width:100%;max-height:160px;box-shadow:var(--shadow-sm)}.image-uploader-reselect{color:var(--color-primary);cursor:pointer;border-radius:var(--radius-xs);transition:background var(--duration-fast);background:0 0;border:none;padding:4px 10px;font-size:12px;font-weight:500}.image-uploader-reselect:hover{background:var(--color-primary-subtle)}.image-uploader-url,.image-uploader-alt{flex-direction:column;gap:6px;display:flex}.image-uploader-url label,.image-uploader-alt label{color:var(--color-text-secondary);font-size:12px;font-weight:600}.image-uploader-url input,.image-uploader-alt input{border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);background:var(--color-bg-alt);transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);outline:none;padding:9px 12px;font-size:13px}.image-uploader-url input:focus,.image-uploader-alt input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}.image-uploader-actions{padding:0 16px 16px}.image-uploader-insert{border-radius:var(--radius-sm);background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));color:#fff;cursor:pointer;width:100%;transition:transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out);border:none;padding:10px 20px;font-size:13px;font-weight:600}.image-uploader-insert:hover:not(:disabled){box-shadow:0 4px 14px var(--color-primary-glow);filter:brightness(1.05);transform:translateY(-1px)}.image-uploader-insert:active:not(:disabled){transform:translateY(0)scale(.98)}.image-uploader-insert:disabled{background:var(--color-border);color:var(--color-text-muted);cursor:not-allowed;box-shadow:none}.copy-html-btn{border-radius:var(--radius-sm);background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));color:#fff;cursor:pointer;white-space:nowrap;box-shadow:0 2px 8px var(--color-primary-glow);transition:transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out);border:none;align-items:center;gap:7px;padding:7px 16px;font-size:13px;font-weight:600;display:flex}.copy-html-btn:hover:not(:disabled){box-shadow:0 6px 20px var(--color-primary-glow);filter:brightness(1.08);transform:translateY(-1.5px)}.copy-html-btn:active:not(:disabled){transition:transform 80ms;transform:translateY(0)scale(.97)}.copy-html-btn:disabled{opacity:.65;cursor:not-allowed;box-shadow:none}@keyframes copyPulse{0%{transform:scale(1)}40%{transform:scale(1.04)}to{transform:scale(1)}}.copy-html-btn.success{animation:copyPulse .35s var(--ease-spring);background:linear-gradient(135deg,#059669,#047857)}.animate-spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.editor-panel{background:var(--color-surface);flex-direction:column;flex:1;min-width:0;display:flex}.editor-header{border-bottom:1px solid var(--color-border-light);background:var(--color-surface);flex-shrink:0;justify-content:space-between;align-items:center;padding:10px 20px;display:flex}.editor-header-title{color:var(--color-text);letter-spacing:-.01em;align-items:center;gap:6px;font-size:13px;font-weight:700;display:flex}.editor-header-title:before{content:"";background:var(--color-primary);width:8px;height:8px;box-shadow:0 0 0 3px var(--color-primary-glow);border-radius:50%;display:inline-block}.editor-header-hint{color:var(--color-text-muted);background:var(--color-bg-alt);border:1px solid var(--color-border-light);border-radius:10px;padding:2px 8px;font-size:11px}.editor-body{background:var(--color-surface);flex:1;display:flex;position:relative;overflow:hidden}.editor-line-numbers{background:var(--color-editor-bg);border-right:1px solid var(--color-border-light);-webkit-user-select:none;user-select:none;flex-shrink:0;width:50px;padding:14px 0;overflow:hidden}.line-number{height:23px;font-size:11px;font-family:var(--font-mono);color:var(--color-editor-line);justify-content:flex-end;align-items:center;padding-right:12px;line-height:23px;display:flex}.editor-textarea{resize:none;font-size:14px;font-family:var(--font-mono);color:var(--color-editor-text);background:var(--color-surface);tab-size:2;border:none;outline:none;flex:1;padding:14px 20px;line-height:23px;overflow-y:auto}.editor-textarea::placeholder{color:var(--color-text-muted);font-style:italic}.editor-textarea:focus{box-shadow:inset 0 0 0 2px var(--color-primary)}.preview-panel{background:linear-gradient(#e5e7eb 0%,#d1d5db 100%);flex-direction:column;flex:1;min-width:0;display:flex}.preview-header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffeb;border-bottom:1px solid #0000000f;flex-shrink:0;justify-content:space-between;align-items:center;padding:10px 20px;display:flex}.preview-header-title{color:var(--color-text);letter-spacing:-.01em;align-items:center;gap:6px;font-size:13px;font-weight:700;display:flex}.preview-header-title:before{content:"";background:var(--color-accent);border-radius:50%;width:8px;height:8px;display:inline-block;box-shadow:0 0 0 3px #f59e0b33}.preview-header-label{background:var(--color-primary-subtle);color:var(--color-primary);border:1px solid #10b98126;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600}.preview-body{flex:1;justify-content:center;padding:28px 24px 48px;display:flex;overflow-y:auto}.wechat-preview-container{border-radius:var(--radius-md);align-self:flex-start;width:100%;max-width:677px;min-height:320px;box-shadow:0 1px 3px #0000000f,0 4px 16px #00000014,0 8px 32px #0000000a}.wechat-preview-container img{transition:opacity .3s}.wechat-preview-container img[loading]{opacity:0}.preview-empty{height:320px;color:var(--color-text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.preview-empty-icon{opacity:.4;color:var(--color-text-muted);margin-bottom:20px}.preview-empty p{color:var(--color-text-secondary);margin-bottom:6px;font-size:15px;font-weight:500}.preview-empty-hint{color:var(--color-text-muted);opacity:.7;font-size:13px!important;font-weight:400!important}.app-footer{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--color-border-light);background:linear-gradient(135deg,#fffffff2,#f8fafbf2);flex-shrink:0;height:34px}.status-bar{justify-content:space-between;align-items:center;height:100%;padding:0 20px;display:flex}.status-bar-left{align-items:center;gap:20px;display:flex}.status-bar-right{align-items:center;display:flex}.status-item{color:var(--color-text-muted);align-items:center;gap:5px;font-size:11.5px;font-weight:500;display:flex}.status-item svg{opacity:.5}.status-saved{color:var(--color-primary)}.status-saved svg{opacity:1}.status-view-toggle{border-radius:var(--radius-xs);background:var(--color-border-light);color:var(--color-text-muted);cursor:pointer;transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);border:none;padding:3px 10px;font-size:11px;font-weight:600}.status-view-toggle:hover{background:var(--color-primary-subtle);color:var(--color-primary)}@media (width<=1200px){.app-header{gap:10px;padding:0 14px}.app-header-center{-webkit-overflow-scrolling:touch;overflow-x:auto}.toolbar-group:not(:last-child){margin-right:3px;padding-right:4px}}@media (width<=900px){.app-header{flex-wrap:wrap;gap:8px;height:auto;padding:10px 12px}.app-header-center{flex-basis:100%;order:3;justify-content:flex-start}.app-header-right{flex-wrap:wrap;gap:6px}.toolbar-btn{width:28px;height:28px}.copy-html-btn{padding:6px 12px}.copy-html-btn span{font-size:12px}.preview-body{padding:16px 12px 36px}.app-main.view-preview .preview-panel{border-radius:var(--radius-md);margin:12px}}@media (width<=640px){.app-header{padding:8px 10px}.app-main.view-split{flex-direction:column}.panel-divider{cursor:row-resize;width:100%;height:2px}.panel-divider:after{background:linear-gradient(90deg, var(--color-primary) 0%, transparent 50%, var(--color-primary) 100%)}.editor-panel,.preview-panel{flex:none;height:50%}.toolbar{gap:0;padding:3px 6px}.toolbar-group:not(:last-child){border-right:none;margin-right:0;padding-right:2px}.toolbar-btn{width:26px;height:26px}.editor-line-numbers{width:38px}.line-number{padding-right:6px;font-size:10px}.editor-textarea{padding:10px 12px;font-size:13px}.editor-header,.preview-header{padding:8px 12px}.status-bar{padding:0 12px}.status-bar-left{gap:12px}.wechat-preview-container{border-radius:var(--radius-sm)}.image-uploader-panel{border-radius:var(--radius-md);width:300px;right:-60px}.theme-dropdown{border-radius:var(--radius-md);width:240px}}