:root{--bg-app: #f1f5f9;--bg-surface: #ffffff;--bg-subtle: #f8fafc;--border-color: #e2e8f0;--border-strong: #cbd5e1;--text-primary: #0f172a;--text-secondary: #475569;--text-muted: #64748b;--brand-primary: #07c160;--brand-primary-hover: #06ad56;--tech-blue: #2563eb;--meetup-orange: #ea580c;--meetup-purple: #7c3aed;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);--shadow-md: 0 4px 12px rgba(15, 23, 42, .07);--shadow-device: 0 12px 32px -4px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .05)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:mp-quote,PingFang SC,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Arial,sans-serif;background-color:var(--bg-app);color:var(--text-primary);-webkit-font-smoothing:antialiased}.app-layout{display:flex;flex-direction:column;height:100dvh;overflow:hidden}.top-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px;background-color:var(--bg-surface);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-sm);z-index:10;flex-wrap:wrap}.brand-group{display:flex;align-items:center;gap:12px}.brand-logo{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#07c160,#059669);color:#fff;font-weight:800;font-size:18px;box-shadow:0 2px 8px #07c16040}.brand-title{margin:0;font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:-.2px}.brand-subtitle{margin:2px 0 0;font-size:12px;color:var(--text-muted)}.header-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.select-control-group{display:inline-flex;align-items:center;gap:8px;background-color:var(--bg-subtle);padding:4px 6px 4px 10px;border-radius:var(--radius-md);border:1px solid var(--border-color)}.select-control-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-muted);user-select:none;white-space:nowrap}.theme-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;transition:background-color .15s ease}.header-select,.header-select::picker(select){appearance:base-select}.header-select{min-width:164px;padding:5px 10px;border-radius:7px;border:1px solid var(--border-strong);background-color:var(--bg-surface);color:var(--text-primary);font-family:inherit;font-size:12.5px;font-weight:600;line-height:1.4;cursor:pointer;box-shadow:0 1px 3px #0f172a0f;transition:border-color .15s ease,box-shadow .15s ease}.header-select:hover{border-color:#94a3b8;box-shadow:var(--shadow-sm)}.header-select:focus-visible{outline:2px solid var(--brand-primary);outline-offset:1px;border-color:var(--brand-primary)}.header-select::picker(select){font-family:inherit;background-color:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:6px;box-shadow:var(--shadow-md)}.header-select::picker-icon{color:var(--text-secondary)}.header-select option::checkmark{color:var(--brand-primary)}.header-select optgroup{font-size:11.5px;font-weight:700;color:var(--text-muted);padding:4px 2px 2px}.header-select option{padding:6px 10px;border-radius:var(--radius-sm);color:var(--text-primary);font-size:12.5px;font-weight:500;cursor:pointer}.header-select option:hover{background-color:var(--bg-subtle)}.header-select option:checked{font-weight:600;color:var(--text-primary)}.btn-copy-primary{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;border:none;background:linear-gradient(135deg,#07c160,#059669);color:#fff;font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px #07c16040;transition:all .15s ease}.btn-copy-primary:hover{background:linear-gradient(135deg,#06ad56,#047857);transform:translateY(-1px);box-shadow:0 4px 12px #07c16052}.btn-copy-primary.copied{background:linear-gradient(135deg,#2563eb,#1d4ed8)}.workspace-split{display:grid;grid-template-columns:1fr 1fr;flex:1;min-height:0;overflow:hidden}.pane{display:flex;flex-direction:column;min-height:0;overflow:hidden}.pane-editor{background-color:var(--bg-surface);border-right:1px solid var(--border-color)}.pane-preview{background-color:var(--bg-app)}.pane-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 14px;background-color:var(--bg-subtle);border-bottom:1px solid var(--border-color);font-size:12px;flex-wrap:wrap}.snippet-bar{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.snippet-btn{padding:4px 8px;border-radius:5px;border:1px solid transparent;background:transparent;color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer;transition:all .12s ease}.snippet-btn:hover{background-color:#e2e8f0;color:var(--text-primary)}.snippet-btn.danger:hover{background-color:#fee2e2;color:#b91c1c}.snippet-dropdown-trigger{anchor-name:--quote-menu-anchor;display:inline-flex;align-items:center;gap:3px}.dropdown-caret{font-size:10px;opacity:.75}.snippet-popover-panel{position-anchor:--quote-menu-anchor;position-area:block-end span-inline-end;position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline;inset:auto;margin:4px 0 0;padding:5px;min-width:224px;background-color:var(--bg-surface);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}[popover]:is(:popover-open,.\:popover-open).snippet-popover-panel{display:flex;flex-direction:column;gap:2px}.snippet-popover-divider{height:1px;margin:4px;background-color:var(--border-color)}.snippet-popover-item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-primary);font-size:12.5px;font-weight:500;text-align:left;cursor:pointer;transition:background-color .12s ease}.snippet-popover-item:hover,.snippet-popover-item:focus-visible{background-color:var(--bg-subtle);outline:none}.alert-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;font-size:12px;flex-shrink:0}.alert-badge-quote{background-color:#f1f5f9;color:#475569;font-weight:700}.alert-badge-note{background-color:#dbeafe;color:#1d4ed8}.alert-badge-tip{background-color:#d1fae5;color:#047857}.alert-badge-important{background-color:#ede9fe;color:#6d28d9}.alert-badge-warning{background-color:#fef3c7;color:#b45309}.alert-badge-caution{background-color:#fee2e2;color:#b91c1c}.popover-item-label{flex:1}.popover-item-syntax{font-family:SFMono-Regular,Consolas,Menlo,monospace;font-size:11px;color:var(--text-muted);background-color:#f8fafc;padding:1px 5px;border-radius:4px;border:1px solid var(--border-color)}.scroller{--scrollbar-thumb: #cbd5e1;--scrollbar-track: #f8fafc;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}@supports not (scrollbar-color: auto){.scroller::-webkit-scrollbar{width:8px;height:8px}.scroller::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}.scroller::-webkit-scrollbar-track{background:var(--scrollbar-track)}}.editor-textarea{flex:1;width:100%;border:none;outline:none;resize:none;padding:20px 24px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,PingFang SC,monospace;font-size:14px;line-height:1.75;color:#1e293b;background-color:#fff;overflow-y:auto}.editor-textarea::placeholder{color:#94a3b8}.pane-statusbar{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;background-color:var(--bg-subtle);border-top:1px solid var(--border-color);font-size:12px;color:var(--text-muted)}.stats-list{display:flex;align-items:center;gap:14px}.preview-options{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.checkbox-label{display:inline-flex;align-items:center;gap:5px;color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer;user-select:none;transition:opacity .15s ease}.checkbox-label.is-disabled{opacity:.55;cursor:not-allowed}.checkbox-label input[type=checkbox]{accent-color:var(--brand-primary);cursor:pointer}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed}.preview-toolbar-right{display:inline-flex;align-items:center;gap:8px}.darkmode-toggle-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid var(--border-color);border-radius:6px;background-color:#fff;color:var(--text-secondary);font-size:11.5px;font-weight:600;cursor:pointer;transition:all .15s ease}.darkmode-toggle-btn:hover{border-color:#cbd5e1;color:var(--text-primary);background-color:#f8fafc}.darkmode-toggle-btn.active{background-color:#191919;border-color:#191919;color:#f8fafc;box-shadow:0 2px 6px #0000002e}.view-mode-switch{display:inline-flex;background-color:#e2e8f0;padding:2px;border-radius:6px}.view-btn{padding:3px 9px;border:none;border-radius:5px;background:transparent;color:var(--text-secondary);font-size:11.5px;font-weight:600;cursor:pointer}.view-btn.active{background-color:#fff;color:var(--text-primary);box-shadow:var(--shadow-sm)}.preview-scroll-area{flex:1;overflow-y:auto;padding:24px 20px 40px;display:flex;flex-direction:column;align-items:center}.preview-device{background-color:#fff;transition:width .2s ease,border-radius .2s ease,background-color .2s ease,border-color .2s ease;box-shadow:var(--shadow-device);border:1px solid var(--border-color)}.preview-device.wx-dark-mode{background-color:#191919;border-color:#2e2e2e;box-shadow:0 18px 40px #00000059}.preview-device.mobile-mode{width:390px;max-width:100%;border-radius:22px;padding:18px 18px 28px}.preview-device.desktop-mode{width:100%;max-width:720px;border-radius:12px;padding:28px 36px 36px}.wx-mock-statusbar{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid #f1f5f9;font-size:11.5px;color:#94a3b8;user-select:none}.preview-device.wx-dark-mode .wx-mock-statusbar{border-bottom-color:#2b2b2b;color:#6e6e6e}.wx-mock-dots{letter-spacing:2px;font-weight:700}#wx-output{font-family:mp-quote,PingFang SC,system-ui,-apple-system,BlinkMacSystemFont,Helvetica Neue,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Arial,sans-serif;text-align:left;color:#334155;background-color:#fff;word-break:break-word;overflow-wrap:break-word}.preview-device.wx-dark-mode #wx-output{background-color:#191919;color:#a3a3a3}.spec-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600}.spec-badge.pass{color:#065f46;background-color:#ecfdf5;border:1px solid #a7f3d0}.spec-badge.warn{color:#9a3412;background-color:#fff7ed;border:1px solid #fdba74}.toast{position:fixed;bottom:24px;right:24px;padding:12px 18px;border-radius:10px;background-color:#0f172a;color:#fff;font-size:13px;font-weight:600;box-shadow:0 10px 25px #0f172a33;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:100}.toast.show{opacity:1;transform:translateY(0)}.toast.success{border-left:4px solid #07c160}.toast.info{border-left:4px solid #3b82f6}.toast.warn{border-left:4px solid #f59e0b}@media(max-width:960px){.workspace-split{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.pane-editor{border-right:none;border-bottom:1px solid var(--border-color)}}