@pomelolabs/leads 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/client/bundle.js +3 -3
- package/package.json +1 -1
package/client/bundle.js
CHANGED
|
@@ -342,7 +342,7 @@
|
|
|
342
342
|
"button",
|
|
343
343
|
{
|
|
344
344
|
type: "button",
|
|
345
|
-
className: cx("pm-
|
|
345
|
+
className: cx("pm-iconbtn", danger && "pm-iconbtn--danger", className),
|
|
346
346
|
"aria-label": label,
|
|
347
347
|
title: label,
|
|
348
348
|
...rest
|
|
@@ -516,7 +516,7 @@
|
|
|
516
516
|
return next;
|
|
517
517
|
});
|
|
518
518
|
}
|
|
519
|
-
return /* @__PURE__ */ React.createElement("aside", { className: cx("pm-sidebar", collapsed && "is-collapsed") }, /* @__PURE__ */ React.createElement("div", { className: "pm-brand" }, /* @__PURE__ */ React.createElement("span", { className: "pm-brand-mark" }, /* @__PURE__ */ React.createElement(PomeloMark, { size: collapsed ? 28 : 32 })), /* @__PURE__ */ React.createElement("span", { className: "pm-brand-text" }, /* @__PURE__ */ React.createElement("span", { className: "pm-brand-name" }, "\u67DA\u5BA2"), /* @__PURE__ */ React.createElement("span", { className: "pm-brand-sub" }, "Pomelo")), /* @__PURE__ */ React.createElement("button", { type: "button", className: "pm-sidebar-toggle", onClick: toggle, "aria-label": collapsed ? "\u5C55\u5F00\u4FA7\u8FB9\u680F" : "\u6536\u8D77\u4FA7\u8FB9\u680F", title: collapsed ? "\u5C55\u5F00\u4FA7\u8FB9\u680F" : "\u6536\u8D77\u4FA7\u8FB9\u680F" }, /* @__PURE__ */ React.createElement(SidebarToggleIcon, { size: 17 }))), /* @__PURE__ */ React.createElement("nav", { className: "pm-nav" }, nav.map((item) => /* @__PURE__ */ React.createElement("button", { key: item.id, type: "button", title: collapsed ? item.label : item.alert ? "\u83B7\u5BA2\u65B9\u6848 \xB7 \u8D44\u6599\u6709\u66F4\u65B0" : void 0, "aria-label": item.label, className: cx("pm-nav-btn", page === item.id && "is-on"), onClick: () => onNavigate(item.id) }, /* @__PURE__ */ React.createElement("span", { className: "pm-nav-icon" }, /* @__PURE__ */ React.createElement(Icon, { name: item.icon, size: 22 })), /* @__PURE__ */ React.createElement("span", { className: "pm-nav-label" }, item.label), /* @__PURE__ */ React.createElement("span", { className: "pm-nav-tail" }, item.count > 0 && /* @__PURE__ */ React.createElement("span", { className: cx("pm-nav-count", item.countTone && `pm-nav-count--${item.countTone}`) }, item.count), item.alert && /* @__PURE__ */ React.createElement("span", { className: "pm-nav-flag" }, "\u5F85\u66F4\u65B0"))))), /* @__PURE__ */ React.createElement("div", { className: "pm-sidebar-spacer" }), !collapsed && /* @__PURE__ */ React.createElement("div", { className: "pm-ai-card" }, /* @__PURE__ */ React.createElement("div", { className: "pm-ai-head" }, /* @__PURE__ */ React.createElement("span", { className: cx("pm-ai-orb", aiActivity && "is-live") }), /* @__PURE__ */ React.createElement("span", null, model?.model ? "\u5728\u7EBF" : "\u79BB\u7EBF")), /* @__PURE__ */ React.createElement("div", { className: "pm-ai-modelline" }, model?.model || "\u672A\u9009\u62E9\u6A21\u578B"), /* @__PURE__ */ React.createElement("div", { className: "pm-pet-row" }, /* @__PURE__ */ React.createElement("div", { className: cx("pm-pet", `is-${family.id}`, `is-task-${task}`, aiActivity && "is-working"), "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("span", { className: "pm-pet-orbit" }, /* @__PURE__ */ React.createElement("i", null), /* @__PURE__ */ React.createElement("i", null), /* @__PURE__ */ React.createElement("i", null)), /* @__PURE__ */ React.createElement("span", { className: "pm-pet-antenna" }), /* @__PURE__ */ React.createElement("span", { className: "pm-pet-head" }, /* @__PURE__ */ React.createElement("i", { className: "pm-pet-eye" }), /* @__PURE__ */ React.createElement("i", { className: "pm-pet-eye" })), /* @__PURE__ */ React.createElement("span", { className: "pm-pet-base" })), /* @__PURE__ */ React.createElement("div", { className: "pm-pet-info" }, /* @__PURE__ */ React.createElement("div", { className: "pm-ai-activity" }, aiActivity || (model?.model ? "\u5F85\u673A\u4E2D" : "\u7B49\u5F85\u6A21\u578B")), /* @__PURE__ */ React.createElement("div", { className: "pm-pet-hint" }, aiActivity ? "\u5904\u7406\u4E2D \xB7 \u8BF7\u7A0D\u5019" : model?.model ? "\u5C31\u7EEA \xB7 \u7B49\u5F85\u6307\u4EE4" : "\u5230\u8BBE\u7F6E\u91CC\u9009\u62E9\u6A21\u578B"))), /* @__PURE__ */ React.createElement("div", { className: cx("pm-ecg", `is-${family.id}`, `is-task-${task}`, aiActivity && "is-working"), "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 220 40", preserveAspectRatio: "none" }, /* @__PURE__ */ React.createElement("path", { className: "pm-ecg-base", d: "M0 23 H18 L23 23 L27 12 L31 33 L35 18 L40 23 H64 L69 23 L73 8 L78 37 L83 16 L88 23 H116 L121 23 L125 15 L129 30 L133 21 L138 23 H166 L171 23 L175 10 L180 35 L185 18 L190 23 H220" }), /* @__PURE__ */ React.createElement("path", { className: "pm-ecg-pulse", d: "M0 23 H18 L23 23 L27 12 L31 33 L35 18 L40 23 H64 L69 23 L73 8 L78 37 L83 16 L88 23 H116 L121 23 L125 15 L129 30 L133 21 L138 23 H166 L171 23 L175 10 L180 35 L185 18 L190 23 H220" }), /* @__PURE__ */ React.createElement("g", { className: "pm-ecg-arcs" }, /* @__PURE__ */ React.createElement("path", { className: "pm-ecg-arc is-a", d: "M73 32 L81 21 L76 22 L89 3" }), /* @__PURE__ */ React.createElement("path", { className: "pm-ecg-arc is-b", d: "M177 33 L168 24 L173 22 L161 7" }), /* @__PURE__ */ React.createElement("path", { className: "pm-ecg-arc is-c", d: "M120 29 L127 19 L122 20 L134 5" }), /* @__PURE__ */ React.createElement("circle", { className: "pm-ecg-spark is-a", cx: "81", cy: "21", r: "1.7" }), /* @__PURE__ */ React.createElement("circle", { className: "pm-ecg-spark is-b", cx: "168", cy: "24", r: "1.5" })))), /* @__PURE__ */ React.createElement("div", { className: "pm-side-note" }, model?.model ? "DSH \u5DF2\u8FDE\u63A5 \xB7 \u4E91\u7AEF\u6388\u6743" : "DSH \u5DF2\u8FDE\u63A5 \xB7 \u6A21\u578B\u672A\u914D\u7F6E")), collapsed && /* @__PURE__ */ React.createElement("div", { className: "pm-side-compact", title: "DSH \u5DF2\u8FDE\u63A5" }, /* @__PURE__ */ React.createElement("span", { className: "pm-ai-orb" })), !collapsed && /* @__PURE__ */ React.createElement("div", { className: "pm-version" }, "\u67DA\u5BA2 v0.1.
|
|
519
|
+
return /* @__PURE__ */ React.createElement("aside", { className: cx("pm-sidebar", collapsed && "is-collapsed") }, /* @__PURE__ */ React.createElement("div", { className: "pm-brand" }, /* @__PURE__ */ React.createElement("span", { className: "pm-brand-mark" }, /* @__PURE__ */ React.createElement(PomeloMark, { size: collapsed ? 28 : 32 })), /* @__PURE__ */ React.createElement("span", { className: "pm-brand-text" }, /* @__PURE__ */ React.createElement("span", { className: "pm-brand-name" }, "\u67DA\u5BA2"), /* @__PURE__ */ React.createElement("span", { className: "pm-brand-sub" }, "Pomelo")), /* @__PURE__ */ React.createElement("button", { type: "button", className: "pm-sidebar-toggle", onClick: toggle, "aria-label": collapsed ? "\u5C55\u5F00\u4FA7\u8FB9\u680F" : "\u6536\u8D77\u4FA7\u8FB9\u680F", title: collapsed ? "\u5C55\u5F00\u4FA7\u8FB9\u680F" : "\u6536\u8D77\u4FA7\u8FB9\u680F" }, /* @__PURE__ */ React.createElement(SidebarToggleIcon, { size: 17 }))), /* @__PURE__ */ React.createElement("nav", { className: "pm-nav" }, nav.map((item) => /* @__PURE__ */ React.createElement("button", { key: item.id, type: "button", title: collapsed ? item.label : item.alert ? "\u83B7\u5BA2\u65B9\u6848 \xB7 \u8D44\u6599\u6709\u66F4\u65B0" : void 0, "aria-label": item.label, className: cx("pm-nav-btn", page === item.id && "is-on"), onClick: () => onNavigate(item.id) }, /* @__PURE__ */ React.createElement("span", { className: "pm-nav-icon" }, /* @__PURE__ */ React.createElement(Icon, { name: item.icon, size: 22 })), /* @__PURE__ */ React.createElement("span", { className: "pm-nav-label" }, item.label), /* @__PURE__ */ React.createElement("span", { className: "pm-nav-tail" }, item.count > 0 && /* @__PURE__ */ React.createElement("span", { className: cx("pm-nav-count", item.countTone && `pm-nav-count--${item.countTone}`) }, item.count), item.alert && /* @__PURE__ */ React.createElement("span", { className: "pm-nav-flag" }, "\u5F85\u66F4\u65B0"))))), /* @__PURE__ */ React.createElement("div", { className: "pm-sidebar-spacer" }), !collapsed && /* @__PURE__ */ React.createElement("div", { className: "pm-ai-card" }, /* @__PURE__ */ React.createElement("div", { className: "pm-ai-head" }, /* @__PURE__ */ React.createElement("span", { className: cx("pm-ai-orb", aiActivity && "is-live") }), /* @__PURE__ */ React.createElement("span", null, model?.model ? "\u5728\u7EBF" : "\u79BB\u7EBF")), /* @__PURE__ */ React.createElement("div", { className: "pm-ai-modelline" }, model?.model || "\u672A\u9009\u62E9\u6A21\u578B"), /* @__PURE__ */ React.createElement("div", { className: "pm-pet-row" }, /* @__PURE__ */ React.createElement("div", { className: cx("pm-pet", `is-${family.id}`, `is-task-${task}`, aiActivity && "is-working"), "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("span", { className: "pm-pet-orbit" }, /* @__PURE__ */ React.createElement("i", null), /* @__PURE__ */ React.createElement("i", null), /* @__PURE__ */ React.createElement("i", null)), /* @__PURE__ */ React.createElement("span", { className: "pm-pet-antenna" }), /* @__PURE__ */ React.createElement("span", { className: "pm-pet-head" }, /* @__PURE__ */ React.createElement("i", { className: "pm-pet-eye" }), /* @__PURE__ */ React.createElement("i", { className: "pm-pet-eye" })), /* @__PURE__ */ React.createElement("span", { className: "pm-pet-base" })), /* @__PURE__ */ React.createElement("div", { className: "pm-pet-info" }, /* @__PURE__ */ React.createElement("div", { className: "pm-ai-activity" }, aiActivity || (model?.model ? "\u5F85\u673A\u4E2D" : "\u7B49\u5F85\u6A21\u578B")), /* @__PURE__ */ React.createElement("div", { className: "pm-pet-hint" }, aiActivity ? "\u5904\u7406\u4E2D \xB7 \u8BF7\u7A0D\u5019" : model?.model ? "\u5C31\u7EEA \xB7 \u7B49\u5F85\u6307\u4EE4" : "\u5230\u8BBE\u7F6E\u91CC\u9009\u62E9\u6A21\u578B"))), /* @__PURE__ */ React.createElement("div", { className: cx("pm-ecg", `is-${family.id}`, `is-task-${task}`, aiActivity && "is-working"), "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 220 40", preserveAspectRatio: "none" }, /* @__PURE__ */ React.createElement("path", { className: "pm-ecg-base", d: "M0 23 H18 L23 23 L27 12 L31 33 L35 18 L40 23 H64 L69 23 L73 8 L78 37 L83 16 L88 23 H116 L121 23 L125 15 L129 30 L133 21 L138 23 H166 L171 23 L175 10 L180 35 L185 18 L190 23 H220" }), /* @__PURE__ */ React.createElement("path", { className: "pm-ecg-pulse", d: "M0 23 H18 L23 23 L27 12 L31 33 L35 18 L40 23 H64 L69 23 L73 8 L78 37 L83 16 L88 23 H116 L121 23 L125 15 L129 30 L133 21 L138 23 H166 L171 23 L175 10 L180 35 L185 18 L190 23 H220" }), /* @__PURE__ */ React.createElement("g", { className: "pm-ecg-arcs" }, /* @__PURE__ */ React.createElement("path", { className: "pm-ecg-arc is-a", d: "M73 32 L81 21 L76 22 L89 3" }), /* @__PURE__ */ React.createElement("path", { className: "pm-ecg-arc is-b", d: "M177 33 L168 24 L173 22 L161 7" }), /* @__PURE__ */ React.createElement("path", { className: "pm-ecg-arc is-c", d: "M120 29 L127 19 L122 20 L134 5" }), /* @__PURE__ */ React.createElement("circle", { className: "pm-ecg-spark is-a", cx: "81", cy: "21", r: "1.7" }), /* @__PURE__ */ React.createElement("circle", { className: "pm-ecg-spark is-b", cx: "168", cy: "24", r: "1.5" })))), /* @__PURE__ */ React.createElement("div", { className: "pm-side-note" }, model?.model ? "DSH \u5DF2\u8FDE\u63A5 \xB7 \u4E91\u7AEF\u6388\u6743" : "DSH \u5DF2\u8FDE\u63A5 \xB7 \u6A21\u578B\u672A\u914D\u7F6E")), collapsed && /* @__PURE__ */ React.createElement("div", { className: "pm-side-compact", title: "DSH \u5DF2\u8FDE\u63A5" }, /* @__PURE__ */ React.createElement("span", { className: "pm-ai-orb" })), !collapsed && /* @__PURE__ */ React.createElement("div", { className: "pm-version" }, "\u67DA\u5BA2 v0.1.3"));
|
|
520
520
|
}
|
|
521
521
|
function rpcEndpoint() {
|
|
522
522
|
if (window.location.protocol === "dsh-app:") {
|
|
@@ -2033,7 +2033,7 @@ ${section.bullets.map((b) => `- ${b}`).join("\n")}`).join("\n\n");
|
|
|
2033
2033
|
}
|
|
2034
2034
|
|
|
2035
2035
|
// client/src/styles.css
|
|
2036
|
-
var styles_default = '/* \u67DA\u5BA2 Pomelo \u2014 scoped visual system. All selectors stay under .pm-root. */\n\n.pm-root {\n --pm-bg: #f5f5f7;\n --pm-surface: #ffffff;\n --pm-surface-2: #f2f2f7;\n --pm-surface-3: #e5e5ea;\n --pm-ink: #1d1d1f;\n --pm-ink-2: #6e6e73;\n --pm-ink-3: #86868b;\n --pm-line: rgba(0, 0, 0, 0.07);\n --pm-line-2: rgba(0, 0, 0, 0.13);\n --pm-accent: #f37021;\n --pm-accent-2: #ff8433;\n --pm-accent-text: #c4500a;\n --pm-accent-soft: rgba(243, 112, 33, 0.11);\n --pm-accent-ink: #1d1d1f;\n --pm-gold: #f37021;\n --pm-gold-soft: rgba(243, 112, 33, 0.11);\n --pm-gold-text: #c4500a;\n --pm-ok: #6e56cf;\n --pm-ok-soft: rgba(110, 86, 207, 0.12);\n --pm-danger: #d70015;\n --pm-danger-soft: rgba(255, 59, 48, 0.1);\n --pm-warn: #b45309;\n --pm-warn-soft: rgba(245, 158, 11, 0.14);\n --pm-violet: #c4500a;\n --pm-violet-soft: rgba(196, 80, 10, 0.12);\n --pm-blue: #f37021;\n --pm-blue-soft: rgba(243, 112, 33, 0.1);\n --pm-shadow-1: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04),\n 0 8px 24px -12px rgba(0, 0, 0, 0.08);\n --pm-shadow-2: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 12px 40px -12px rgba(0, 0, 0, 0.18);\n --pm-r-s: 8px;\n --pm-r-m: 12px;\n --pm-r-l: 20px;\n --pm-r-xl: 24px;\n --pm-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",\n "Helvetica Neue", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;\n --pm-num: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue",\n "Segoe UI", var(--pm-font);\n color-scheme: light;\n height: 100%;\n min-height: 0;\n background: var(--pm-bg);\n color: var(--pm-ink);\n font-family: var(--pm-font);\n font-size: 15px;\n line-height: 1.55;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n}\n\n:root[data-theme="dark"] .pm-root,\n.dark .pm-root,\n[data-theme="dark"] .pm-root {\n color-scheme: dark;\n --pm-bg: #000000;\n --pm-surface: #1c1c1e;\n --pm-surface-2: #2c2c2e;\n --pm-surface-3: #3a3a3c;\n --pm-ink: #f5f5f7;\n --pm-ink-2: #a1a1a6;\n --pm-ink-3: #8e8e93;\n --pm-line: rgba(255, 255, 255, 0.08);\n --pm-line-2: rgba(255, 255, 255, 0.15);\n --pm-accent: #ff8a3d;\n --pm-accent-2: #ff9f5a;\n --pm-accent-text: #ff9f5a;\n --pm-accent-soft: rgba(255, 138, 61, 0.16);\n --pm-accent-ink: #1a0e05;\n --pm-gold: #ff8a3d;\n --pm-gold-soft: rgba(255, 138, 61, 0.16);\n --pm-gold-text: #ff9f5a;\n --pm-ok: #b39bff;\n --pm-ok-soft: rgba(179, 155, 255, 0.16);\n --pm-danger: #ff6961;\n --pm-danger-soft: rgba(255, 105, 97, 0.16);\n --pm-warn: #ffb020;\n --pm-warn-soft: rgba(255, 176, 32, 0.16);\n --pm-violet: #ff9f5a;\n --pm-violet-soft: rgba(255, 159, 90, 0.14);\n --pm-blue: #ff8a3d;\n --pm-blue-soft: rgba(255, 138, 61, 0.14);\n --pm-shadow-1: 0 0 0 0.5px rgba(255, 255, 255, 0.06);\n --pm-shadow-2: 0 0 0 0.5px rgba(255, 255, 255, 0.08),\n 0 20px 50px -16px rgba(0, 0, 0, 0.8);\n}\n\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme="light"]) .pm-root {\n color-scheme: dark;\n --pm-bg: #000000;\n --pm-surface: #1c1c1e;\n --pm-surface-2: #2c2c2e;\n --pm-surface-3: #3a3a3c;\n --pm-ink: #f5f5f7;\n --pm-ink-2: #a1a1a6;\n --pm-ink-3: #8e8e93;\n --pm-line: rgba(255, 255, 255, 0.08);\n --pm-line-2: rgba(255, 255, 255, 0.15);\n --pm-accent: #ff8a3d;\n --pm-accent-2: #ff9f5a;\n --pm-accent-text: #ff9f5a;\n --pm-accent-soft: rgba(255, 138, 61, 0.16);\n --pm-accent-ink: #1a0e05;\n --pm-gold: #ff8a3d;\n --pm-gold-soft: rgba(255, 138, 61, 0.16);\n --pm-gold-text: #ff9f5a;\n --pm-ok: #b39bff;\n --pm-ok-soft: rgba(179, 155, 255, 0.16);\n --pm-danger: #ff6961;\n --pm-danger-soft: rgba(255, 105, 97, 0.16);\n --pm-warn: #ffb020;\n --pm-warn-soft: rgba(255, 176, 32, 0.16);\n --pm-violet: #ff9f5a;\n --pm-violet-soft: rgba(255, 159, 90, 0.14);\n --pm-blue: #ff8a3d;\n --pm-blue-soft: rgba(255, 138, 61, 0.14);\n --pm-shadow-1: 0 0 0 0.5px rgba(255, 255, 255, 0.06);\n --pm-shadow-2: 0 0 0 0.5px rgba(255, 255, 255, 0.08),\n 0 20px 50px -16px rgba(0, 0, 0, 0.8);\n }\n}\n\n.pm-root *,\n.pm-root *::before,\n.pm-root *::after {\n box-sizing: border-box;\n}\n\n.pm-shell {\n position: relative;\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n padding-top: var(--dsh-frame-top-clearance, 0px);\n background: var(--pm-bg);\n overflow: hidden;\n}\n\n.pm-drag {\n position: absolute;\n inset: 0 0 auto 0;\n height: max(var(--dsh-frame-top-clearance, 0px), 12px);\n -webkit-app-region: drag;\n z-index: 4;\n}\n\n.pm-app {\n display: flex;\n flex: 1;\n min-height: 0;\n min-width: 0;\n background: var(--pm-bg);\n}\n\n.pm-sidebar {\n display: flex;\n flex-direction: column;\n flex: 0 0 264px;\n width: 264px;\n min-height: 0;\n padding: 26px 18px 16px;\n background: var(--pm-surface);\n border-right: 1px solid var(--pm-line);\n}\n\n.pm-brand {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 8px 24px;\n}\n\n.pm-brand-mark {\n display: grid;\n flex: 0 0 auto;\n width: 40px;\n height: 40px;\n place-items: center;\n filter: none;\n}\n\n.pm-logo {\n display: block;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n\n.pm-brand-text {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.pm-brand-name {\n font-size: 21px;\n font-weight: 650;\n letter-spacing: -0.025em;\n line-height: 1.2;\n}\n\n.pm-brand-sub {\n margin-top: 1px;\n color: var(--pm-ink-3);\n font-size: 11.2px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.pm-nav {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.pm-nav-btn {\n position: relative;\n display: flex;\n align-items: center;\n gap: 11px;\n width: 100%;\n height: 40px;\n padding: 0 11px;\n border: 0;\n border-radius: 10px;\n background: transparent;\n color: var(--pm-ink-2);\n font-family: inherit;\n font-size: 14.6px;\n font-weight: 500;\n text-align: left;\n cursor: pointer;\n transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n\n.pm-nav-btn:hover {\n background: color-mix(in srgb, var(--pm-surface-2) 50%, transparent);\n color: var(--pm-ink);\n}\n\n.pm-nav-btn.is-on {\n background: var(--pm-surface-2);\n color: var(--pm-ink);\n box-shadow: inset 0 0 0 0.5px var(--pm-line);\n}\n\n\n.pm-nav-icon {\n display: grid;\n flex: 0 0 20px;\n place-items: center;\n color: var(--pm-ink-3);\n}\n\n.pm-nav-label {\n flex: 1;\n min-width: 0;\n}\n\n.pm-nav-count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 19px;\n height: 19px;\n padding: 0 5px;\n border-radius: 999px;\n background: var(--pm-accent);\n color: #1d1d1f;\n font-size: 11.2px;\n font-weight: 700;\n}\n\n.pm-sidebar-spacer {\n flex: 1;\n}\n\n.pm-side-card {\n margin: 18px 2px 12px;\n padding: 15px 15px 13px;\n border: 1px solid var(--pm-line);\n border-radius: 16px;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-1);\n}\n\n.pm-side-head {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--pm-ink);\n font-size: 14.6px;\n font-weight: 600;\n}\n\n.pm-status-dot {\n display: inline-block;\n flex: 0 0 auto;\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: var(--pm-gold);\n box-shadow: 0 0 0 4px var(--pm-accent-soft);\n}\n\n.pm-side-stat {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n margin-top: 11px;\n color: var(--pm-ink-3);\n font-size: 13.4px;\n}\n\n.pm-side-stat b {\n color: var(--pm-ink);\n font-family: var(--pm-num);\n font-size: 14px;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n}\n\n.pm-side-note {\n margin-top: 12px;\n padding-top: 10px;\n border-top: 1px solid var(--pm-line);\n color: var(--pm-ink-3);\n font-size: 11.8px;\n line-height: 1.5;\n}\n\n.pm-version {\n padding: 0 4px;\n color: var(--pm-ink-3);\n font-size: 11.8px;\n text-align: center;\n}\n\n.pm-main {\n flex: 1;\n min-width: 0;\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n scrollbar-width: thin;\n scrollbar-color: var(--pm-line-2) transparent;\n}\n\n.pm-main::-webkit-scrollbar { width: 8px; height: 8px; }\n.pm-main::-webkit-scrollbar-thumb {\n border: 2px solid transparent;\n border-radius: 999px;\n background: var(--pm-line-2);\n background-clip: content-box;\n}\n\n.pm-hero {\n position: relative;\n padding: 54px 44px 30px;\n background:\n radial-gradient(120% 150% at 15% 0%, #fbd3b4 0%, rgba(251, 211, 180, 0) 58%),\n radial-gradient(120% 160% at 62% 0%, #fde7d6 0%, rgba(253, 231, 214, 0) 62%),\n var(--pm-bg);\n}\n\n:root[data-theme="dark"] .pm-hero,\n.dark .pm-hero,\n[data-theme="dark"] .pm-hero {\n background:\n radial-gradient(120% 150% at 15% 0%, #4a2415 0%, rgba(74, 36, 21, 0) 58%),\n radial-gradient(120% 160% at 62% 0%, #2e160d 0%, rgba(46, 22, 13, 0) 62%),\n var(--pm-bg);\n}\n\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme="light"]) .pm-hero {\n background:\n radial-gradient(120% 150% at 15% 0%, #4a2415 0%, rgba(74, 36, 21, 0) 58%),\n radial-gradient(120% 160% at 62% 0%, #2e160d 0%, rgba(46, 22, 13, 0) 62%),\n var(--pm-bg);\n }\n}\n\n.pm-hero--page { padding: 44px 44px 26px; }\n\n.pm-hero-inner {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 24px;\n max-width: 1180px;\n margin: 0 auto;\n}\n\n.pm-eyebrow {\n margin-bottom: 8px;\n color: var(--pm-ink-3);\n font-size: 13.4px;\n letter-spacing: 0.02em;\n}\n\n.pm-hero h1 {\n margin: 0;\n color: var(--pm-ink);\n font-family: var(--pm-num);\n font-size: 38px;\n font-weight: 700;\n letter-spacing: -0.04em;\n line-height: 1.14;\n}\n\n.pm-hero h1 em {\n color: var(--pm-accent);\n font-style: normal;\n}\n\n.pm-hero p {\n max-width: 680px;\n margin: 9px 0 0;\n color: var(--pm-ink-2);\n font-size: 15.1px;\n line-height: 1.6;\n}\n\n.pm-hero--page h1 { font-size: 34px; letter-spacing: -0.04em; }\n\n.pm-hero-actions {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: 8px;\n padding-bottom: 2px;\n}\n\n.pm-ai-pill {\n display: inline-flex;\n align-items: center;\n gap: 7px;\n height: 32px;\n padding: 0 11px;\n border: 1px solid var(--pm-line);\n border-radius: 999px;\n background: color-mix(in srgb, var(--pm-surface) 72%, transparent);\n color: var(--pm-ink-2);\n font-size: 12.9px;\n backdrop-filter: blur(12px);\n}\n\n\n.pm-content {\n max-width: 1180px;\n margin: 0 auto;\n padding: 0 44px 64px;\n}\n\n.pm-kpis {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 16px;\n}\n\n.pm-card {\n border: 1px solid var(--pm-line);\n border-radius: var(--pm-r-l);\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-1);\n}\n\n.pm-kpi {\n display: flex;\n align-items: stretch;\n justify-content: space-between;\n gap: 10px;\n min-height: 122px;\n padding: 20px 22px;\n}\n\n.pm-kpi-main { min-width: 0; }\n.pm-kpi-label { color: var(--pm-ink-2); font-size: 13.4px; font-weight: 500; white-space: nowrap; }\n.pm-kpi-value {\n margin-top: 5px;\n color: var(--pm-ink);\n font-family: var(--pm-num);\n font-size: 32px;\n font-weight: 650;\n letter-spacing: -0.03em;\n line-height: 1.1;\n font-variant-numeric: tabular-nums;\n}\n.pm-kpi-value small {\n margin-left: 3px;\n color: var(--pm-ink-3);\n font-family: var(--pm-font);\n font-size: 12.3px;\n font-weight: 400;\n letter-spacing: 0;\n}\n.pm-kpi-sub {\n margin-top: 7px;\n color: var(--pm-ink-3);\n font-size: 11.8px;\n line-height: 1.4;\n}\n.pm-kpi-sub b { color: var(--pm-ok); font-weight: 600; }\n.pm-kpi-chart {\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n width: 66px;\n min-width: 52px;\n opacity: 0.95;\n}\n\n.pm-notice {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-top: 18px;\n padding: 15px 18px;\n border: 1px solid var(--pm-line);\n border-radius: 16px;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-1);\n}\n.pm-notice-ic {\n display: grid;\n flex: 0 0 42px;\n width: 42px;\n height: 42px;\n place-items: center;\n border-radius: 13px;\n background: var(--pm-ok-soft);\n color: var(--pm-ok);\n}\n.pm-notice-main { flex: 1; min-width: 0; }\n.pm-notice-title {\n display: flex;\n align-items: center;\n gap: 7px;\n color: var(--pm-ink);\n font-size: 14px;\n font-weight: 600;\n}\n.pm-notice-desc { margin-top: 2px; color: var(--pm-ink-3); font-size: 12.3px; }\n.pm-notice-actions { display: flex; align-items: center; gap: 8px; }\n\n.pm-tabbar {\n display: inline-flex;\n gap: 2px;\n margin-top: 22px;\n padding: 4px;\n border: 1px solid var(--pm-line);\n border-radius: 14px;\n background: var(--pm-surface-2);\n}\n\n.pm-tab {\n display: inline-flex;\n align-items: center;\n gap: 7px;\n height: 36px;\n padding: 0 17px;\n border: 0;\n border-radius: 10px;\n background: transparent;\n color: var(--pm-ink-2);\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.pm-tab:hover { color: var(--pm-ink); }\n.pm-tab.is-on {\n background: var(--pm-surface);\n color: var(--pm-ink);\n box-shadow: var(--pm-shadow-1);\n}\n.pm-tab .pm-badge { height: 18px; padding: 0 6px; font-size: 11.2px; }\n\n.pm-section-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin: 26px 0 14px;\n}\n.pm-section-title { color: var(--pm-ink); font-size: 16.5px; font-weight: 620; letter-spacing: -0.015em; }\n.pm-section-sub { margin-top: 2px; color: var(--pm-ink-3); font-size: 12.9px; }\n.pm-section-actions { display: flex; align-items: center; gap: 8px; }\n\n.pm-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n height: 38px;\n padding: 0 15px;\n border: 0;\n border-radius: 12px;\n font-family: inherit;\n font-size: 14px;\n font-weight: 550;\n line-height: 1;\n white-space: nowrap;\n cursor: pointer;\n transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.pm-btn:active { transform: translateY(0.5px); }\n.pm-btn:disabled { cursor: default; opacity: 0.5; }\n.pm-btn svg { flex: 0 0 auto; }\n.pm-btn--primary { background: var(--pm-accent); color: var(--pm-accent-ink); }\n.pm-btn--primary:hover { background: var(--pm-accent-2); }\n.pm-btn--secondary {\n background: var(--pm-surface-2);\n color: var(--pm-ink);\n box-shadow: inset 0 0 0 0.5px var(--pm-line);\n}\n.pm-btn--secondary:hover { background: var(--pm-surface-3); }\n.pm-btn--ghost { background: transparent; color: var(--pm-ink-2); }\n.pm-btn--ghost:hover { background: var(--pm-surface-2); color: var(--pm-ink); }\n.pm-btn--soft { background: var(--pm-accent-soft); color: var(--pm-accent-text); }\n.pm-btn--soft:hover { background: color-mix(in srgb, var(--pm-accent-soft) 75%, var(--pm-accent) 10%); }\n.pm-btn--danger { background: var(--pm-danger-soft); color: var(--pm-danger); }\n.pm-btn--sm { height: 32px; padding: 0 11px; border-radius: 9px; font-size: 13px; }\n.pm-btn--lg { height: 46px; padding: 0 20px; border-radius: 13px; font-size: 15px; }\n.pm-btn--block { width: 100%; }\n\n.pm-iconbtn {\n display: inline-grid;\n flex: 0 0 auto;\n width: 32px;\n height: 32px;\n place-items: center;\n border: 0;\n border-radius: 9px;\n background: transparent;\n color: var(--pm-ink-3);\n cursor: pointer;\n transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.pm-iconbtn:hover { background: var(--pm-surface-2); color: var(--pm-ink); }\n.pm-iconbtn--danger:hover { background: var(--pm-danger-soft); color: var(--pm-danger); }\n\n.pm-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n height: 22px;\n padding: 0 7px;\n border-radius: 999px;\n font-size: 11.8px;\n font-weight: 550;\n line-height: 1;\n white-space: nowrap;\n}\n.pm-badge--neutral { background: var(--pm-surface-2); color: var(--pm-ink-2); }\n.pm-badge--orange { background: var(--pm-accent-soft); color: var(--pm-accent-text); }\n.pm-badge--green { background: var(--pm-ok-soft); color: var(--pm-ok); }\n.pm-badge--violet { background: var(--pm-violet-soft); color: var(--pm-violet); }\n.pm-badge--red { background: var(--pm-danger-soft); color: var(--pm-danger); }\n.pm-badge--blue { background: var(--pm-blue-soft); color: var(--pm-blue); }\n.pm-badge--dark { background: var(--pm-ink); color: var(--pm-surface); }\n.pm-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }\n\n.pm-topic-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 14px;\n}\n.pm-topic {\n display: flex;\n flex-direction: column;\n min-height: 194px;\n padding: 18px 20px 16px;\n border: 1px solid var(--pm-line);\n border-radius: 18px;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-1);\n transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.pm-topic:hover {\n transform: translateY(-1px);\n border-color: var(--pm-line-2);\n box-shadow: var(--pm-shadow-1);\n}\n.pm-topic-top { display: flex; align-items: center; gap: 8px; }\n.pm-topic-index {\n display: grid;\n flex: 0 0 25px;\n width: 25px;\n height: 25px;\n place-items: center;\n border-radius: 8px;\n background: var(--pm-accent-soft);\n color: var(--pm-accent-text);\n font-family: var(--pm-num);\n font-size: 11.8px;\n font-weight: 650;\n}\n.pm-topic-top .pm-badge { height: 20px; font-size: 11.2px; }\n.pm-topic-top .pm-iconbtn { margin-left: auto; width: 26px; height: 26px; }\n.pm-topic h3 {\n margin: 12px 0 7px;\n color: var(--pm-ink);\n font-size: 16px;\n font-weight: 600;\n letter-spacing: -0.01em;\n line-height: 1.45;\n}\n.pm-topic-reason {\n flex: 1;\n margin: 0;\n color: var(--pm-ink-2);\n font-size: 12.9px;\n line-height: 1.6;\n}\n.pm-topic-source {\n display: flex;\n align-items: center;\n gap: 5px;\n margin: 10px 0 0;\n color: var(--pm-ink-3);\n font-size: 11.8px;\n line-height: 1.4;\n}\n.pm-topic-actions { display: flex; gap: 6px; margin-top: 11px; }\n.pm-topic-actions .pm-btn { flex: 1; }\n\n.pm-form-card { padding: 24px; }\n.pm-form-head { margin-bottom: 16px; }\n.pm-form-head h2 { margin: 0; font-size: 19px; font-weight: 620; letter-spacing: -0.02em; }\n.pm-form-head p { margin: 4px 0 0; color: var(--pm-ink-3); font-size: 12.9px; }\n.pm-form-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }\n.pm-form-col { flex: 1; min-width: 180px; }\n.pm-form-actions { display: flex; align-items: center; gap: 8px; }\n.pm-label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n margin-bottom: 6px;\n color: var(--pm-ink-2);\n font-size: 12.9px;\n font-weight: 550;\n}\n.pm-label span { color: var(--pm-ink-3); font-weight: 400; }\n.pm-input,\n.pm-textarea,\n.pm-select {\n width: 100%;\n border: 1px solid transparent;\n border-radius: 11px;\n background: var(--pm-surface-2);\n color: var(--pm-ink);\n font-family: inherit;\n font-size: 14px;\n outline: none;\n transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.pm-input { height: 42px; padding: 0 13px; }\n.pm-textarea { min-height: 92px; padding: 10px 12px; line-height: 1.65; resize: vertical; }\n.pm-select { height: 42px; padding: 0 32px 0 12px; appearance: none; cursor: pointer; }\n.pm-input::placeholder,\n.pm-textarea::placeholder { color: var(--pm-ink-3); }\n.pm-input:focus,\n.pm-textarea:focus,\n.pm-select:focus {\n border-color: var(--pm-accent);\n background: var(--pm-surface);\n box-shadow: 0 0 0 3px var(--pm-accent-soft);\n}\n.pm-select-wrap { position: relative; }\n.pm-select-wrap::after {\n position: absolute;\n top: 50%;\n right: 11px;\n width: 6px;\n height: 6px;\n border-right: 1.5px solid var(--pm-ink-3);\n border-bottom: 1.5px solid var(--pm-ink-3);\n content: "";\n pointer-events: none;\n transform: translateY(-65%) rotate(45deg);\n}\n\n.pm-seg {\n display: inline-flex;\n gap: 2px;\n padding: 3px;\n border-radius: 10px;\n background: var(--pm-surface-2);\n}\n.pm-seg-btn {\n height: 30px;\n padding: 0 11px;\n border: 0;\n border-radius: 8px;\n background: transparent;\n color: var(--pm-ink-2);\n font-family: inherit;\n font-size: 12.9px;\n font-weight: 500;\n cursor: pointer;\n}\n.pm-seg-btn.is-on {\n background: var(--pm-surface);\n color: var(--pm-ink);\n box-shadow: var(--pm-shadow-1);\n}\n\n.pm-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.pm-chip {\n height: 26px;\n padding: 0 9px;\n border: 1px solid var(--pm-line);\n border-radius: 999px;\n background: var(--pm-surface);\n color: var(--pm-ink-2);\n font-family: inherit;\n font-size: 11.8px;\n cursor: pointer;\n}\n.pm-chip:hover { border-color: var(--pm-line-2); color: var(--pm-ink); }\n\n.pm-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }\n.pm-filters .pm-select-wrap { min-width: 112px; }\n\n.pm-progress-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }\n.pm-progress-main { flex: 1; min-width: 0; }\n.pm-progress-title { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }\n.pm-progress-desc { margin-top: 3px; color: var(--pm-ink-3); font-size: 12.3px; }\n.pm-progress-track {\n height: 6px;\n margin-top: 9px;\n overflow: hidden;\n border-radius: 999px;\n background: var(--pm-surface-2);\n}\n.pm-progress-fill {\n height: 100%;\n border-radius: inherit;\n background: var(--pm-accent);\n transition: width 0.3s ease;\n}\n\n.pm-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 230px;\n padding: 34px 20px;\n border: 1px dashed var(--pm-line-2);\n border-radius: 18px;\n background: color-mix(in srgb, var(--pm-surface) 65%, transparent);\n text-align: center;\n}\n.pm-empty-ic {\n display: grid;\n width: 46px;\n height: 46px;\n margin-bottom: 12px;\n place-items: center;\n border-radius: 50%;\n background: var(--pm-surface-2);\n color: var(--pm-ink-3);\n}\n.pm-empty h3 { margin: 0; font-size: 16px; font-weight: 600; }\n.pm-empty p { max-width: 360px; margin: 5px 0 0; color: var(--pm-ink-3); font-size: 12.9px; line-height: 1.6; }\n.pm-empty .pm-btn { margin-top: 14px; }\n\n.pm-report { padding: 20px; }\n.pm-report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }\n.pm-report-head h3 { margin: 0; font-size: 15px; font-weight: 620; }\n.pm-report-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px; }\n.pm-report-block { padding: 14px; border-radius: 13px; background: var(--pm-surface-2); }\n.pm-report-block h4 { margin: 0 0 7px; color: var(--pm-ink-2); font-size: 12.3px; font-weight: 600; letter-spacing: 0.02em; }\n.pm-report-block p,\n.pm-report-block li { color: var(--pm-ink-2); font-size: 12.9px; line-height: 1.65; }\n.pm-report-block p { margin: 0; }\n.pm-report-block ul { margin: 0; padding-left: 16px; }\n.pm-report-block li + li { margin-top: 4px; }\n\n.pm-peer-account { display: flex; align-items: center; gap: 12px; }\n.pm-avatar {\n display: grid;\n flex: 0 0 auto;\n width: 42px;\n height: 42px;\n place-items: center;\n border-radius: 50%;\n background: linear-gradient(140deg, #f7a35c, #f37021 65%, #c4500a);\n color: #fff7ef;\n font-size: 14.6px;\n font-weight: 650;\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);\n}\n.pm-avatar--sm { width: 34px; height: 34px; font-size: 12.3px; }\n.pm-avatar--soft { background: var(--pm-accent-soft); color: var(--pm-accent-text); box-shadow: none; }\n.pm-account-name { font-size: 14.6px; font-weight: 600; }\n.pm-account-meta { margin-top: 2px; color: var(--pm-ink-3); font-size: 11.8px; }\n\n.pm-peer-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }\n.pm-peer-row {\n display: flex;\n align-items: center;\n gap: 11px;\n padding: 10px 11px;\n border-radius: 13px;\n background: var(--pm-surface-2);\n}\n.pm-peer-rank {\n display: grid;\n flex: 0 0 24px;\n width: 24px;\n height: 24px;\n place-items: center;\n border-radius: 7px;\n background: var(--pm-surface);\n color: var(--pm-accent-text);\n font-family: var(--pm-num);\n font-size: 11.2px;\n font-weight: 700;\n}\n.pm-peer-cover {\n position: relative;\n display: flex;\n flex: 0 0 44px;\n align-items: flex-end;\n width: 44px;\n height: 44px;\n padding: 5px;\n overflow: hidden;\n border-radius: 9px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-size: 9px;\n line-height: 1.2;\n}\n.pm-peer-cover span { position: relative; z-index: 1; }\n.pm-peer-body { flex: 1; min-width: 0; }\n.pm-peer-title {\n overflow: hidden;\n color: var(--pm-ink);\n font-size: 13.4px;\n font-weight: 550;\n line-height: 1.4;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pm-peer-meta { display: flex; gap: 8px; margin-top: 3px; color: var(--pm-ink-3); font-size: 11.2px; }\n.pm-peer-score {\n flex: 0 0 auto;\n color: var(--pm-accent-text);\n font-family: var(--pm-num);\n font-size: 13.4px;\n font-weight: 650;\n}\n.pm-peer-score small { color: var(--pm-ink-3); font-family: var(--pm-font); font-size: 10.1px; font-weight: 400; }\n\n.pm-search-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.95fr); gap: 14px; align-items: start; }\n.pm-post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }\n.pm-post {\n display: flex;\n gap: 10px;\n padding: 10px;\n border: 1px solid var(--pm-line);\n border-radius: 14px;\n background: var(--pm-surface);\n}\n.pm-post-cover {\n position: relative;\n display: flex;\n flex: 0 0 54px;\n align-items: flex-end;\n width: 54px;\n height: 68px;\n padding: 6px;\n overflow: hidden;\n border-radius: 10px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-size: 9px;\n line-height: 1.25;\n}\n.pm-post-cover.is-violet { background: linear-gradient(150deg, #c0a8ff, #7754e8); }\n.pm-post-cover.is-blue { background: linear-gradient(150deg, #9ebdff, #4c7ee8); }\n.pm-post-cover.is-green { background: linear-gradient(150deg, #c4b5fd, #7c5cff); }\n.pm-post-cover.is-sand { background: linear-gradient(150deg, #e8d1b0, #b58a55); }\n.pm-post-cover span { position: relative; z-index: 1; }\n.pm-post-body { flex: 1; min-width: 0; }\n.pm-post-title {\n display: -webkit-box;\n overflow: hidden;\n color: var(--pm-ink);\n font-size: 12.9px;\n font-weight: 550;\n line-height: 1.45;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n.pm-post-meta { margin-top: 4px; color: var(--pm-ink-3); font-size: 10.6px; }\n.pm-post-stats { display: flex; gap: 7px; margin-top: 5px; color: var(--pm-ink-2); font-size: 10.6px; }\n.pm-post-stats b { color: var(--pm-ink); font-weight: 600; }\n\n.pm-review-layout { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 16px; align-items: start; }\n.pm-detail { padding: 28px; }\n.pm-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }\n.pm-detail h2 { margin: 8px 0 4px; font-size: 23px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.3; }\n.pm-detail-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--pm-ink-3); font-size: 11.8px; }\n.pm-detail-body { margin-top: 20px; }\n.pm-detail-section { margin-top: 18px; }\n.pm-detail-section h3 { margin: 0 0 7px; color: var(--pm-ink); font-size: 14.6px; font-weight: 600; }\n.pm-detail-section p,\n.pm-detail-section li { margin: 0; color: var(--pm-ink-2); font-size: 14px; line-height: 1.75; }\n.pm-detail-section ul { margin: 0; padding-left: 17px; }\n.pm-detail-section li + li { margin-top: 4px; }\n.pm-detail-foot { display: flex; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--pm-line); }\n\n.pm-chat {\n position: sticky;\n top: 16px;\n display: flex;\n flex-direction: column;\n height: 600px;\n overflow: hidden;\n}\n.pm-chat-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--pm-line); }\n.pm-chat-head-title { flex: 1; font-size: 13.4px; font-weight: 600; }\n.pm-chat-body {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 15px;\n padding: 16px;\n overflow: auto;\n scroll-behavior: smooth;\n}\n.pm-msg {\n max-width: 92%;\n margin: 0;\n padding: 12px 14px;\n border-radius: 14px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-size: 14px;\n line-height: 1.78;\n letter-spacing: -0.005em;\n}\n.pm-msg.is-ai {\n align-self: flex-start;\n border-bottom-left-radius: 5px;\n animation: pm-msg-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n.pm-msg.is-user {\n align-self: flex-end;\n margin-left: auto;\n border-bottom-right-radius: 5px;\n background: var(--pm-accent);\n color: var(--pm-accent-ink);\n font-size: 14px;\n line-height: 1.65;\n}\n.pm-msg.is-thinking {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n width: fit-content;\n color: var(--pm-ink-3);\n}\n.pm-thinking-dots { display: inline-flex; align-items: center; gap: 3px; }\n.pm-thinking-dots i {\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: var(--pm-accent);\n animation: pm-thinking 1.1s ease-in-out infinite;\n}\n.pm-thinking-dots i:nth-child(2) { animation-delay: 0.14s; }\n.pm-thinking-dots i:nth-child(3) { animation-delay: 0.28s; }\n.pm-msg-suggestions { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }\n.pm-suggestion {\n padding: 8px 10px;\n border: 1px solid var(--pm-line);\n border-radius: 9px;\n background: var(--pm-surface);\n color: var(--pm-ink-2);\n font-family: inherit;\n font-size: 12.2px;\n line-height: 1.4;\n text-align: left;\n cursor: pointer;\n transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;\n}\n.pm-suggestion:hover { border-color: var(--pm-accent); color: var(--pm-ink); background: var(--pm-surface-2); }\n.pm-chat-input { display: flex; gap: 7px; padding: 11px; border-top: 1px solid var(--pm-line); }\n.pm-chat-input .pm-input { flex: 1; min-width: 0; height: 38px; font-size: 13.5px; }\n@keyframes pm-msg-in {\n from { opacity: 0; transform: translateY(7px); filter: blur(2px); }\n to { opacity: 1; transform: translateY(0); filter: blur(0); }\n}\n@keyframes pm-thinking {\n 0%, 100% { opacity: 0.35; transform: translateY(0); }\n 50% { opacity: 1; transform: translateY(-2px); }\n}\n\n.pm-settings-wrap { max-width: 960px; margin: 0 auto; }\n.pm-settings-stack { display: flex; flex-direction: column; gap: 16px; }\n.pm-settings-card { padding: 24px; }\n.pm-settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }\n.pm-settings-head h2 { margin: 0; font-size: 18px; font-weight: 620; letter-spacing: -0.025em; }\n.pm-settings-head p { margin: 5px 0 0; color: var(--pm-ink-3); font-size: 13px; line-height: 1.55; }\n.pm-settings-head .pm-badge { flex: 0 0 auto; }\n\n.pm-member-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }\n.pm-member-expiry { color: var(--pm-ink-2); font-size: 13.5px; }\n.pm-member-expiry b { color: var(--pm-ink); font-weight: 600; }\n.pm-device-row {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 10px;\n padding: 9px 11px;\n border-radius: 10px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-size: 12.3px;\n}\n.pm-device-row .pm-badge { margin-left: auto; }\n.pm-code-box { margin-top: 14px; }\n.pm-code-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }\n.pm-code-actions .pm-btn--primary { margin-left: auto; }\n\n.pm-qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }\n.pm-qcard {\n padding: 18px;\n border: 1px solid var(--pm-line);\n border-radius: 15px;\n background: var(--pm-surface);\n}\n.pm-qhead { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 5px; }\n.pm-qno {\n display: grid;\n flex: 0 0 20px;\n width: 20px;\n height: 20px;\n place-items: center;\n border-radius: 6px;\n background: var(--pm-accent-soft);\n color: var(--pm-accent-text);\n font-family: var(--pm-num);\n font-size: 10.6px;\n font-weight: 650;\n}\n.pm-qtitle { color: var(--pm-ink); font-size: 14px; font-weight: 600; line-height: 1.45; }\n.pm-qhint { margin: 0 0 9px 28px; color: var(--pm-ink-3); font-size: 12px; line-height: 1.55; }\n.pm-qcard .pm-textarea { min-height: 96px; font-size: 14px; }\n.pm-qfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; color: var(--pm-ink-3); font-size: 10.5px; }\n.pm-qfoot .is-saved { color: var(--pm-ok); }\n.pm-profile-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }\n.pm-profile-actions .pm-btn--primary { margin-left: auto; }\n\n.pm-platform-row {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 0;\n border-bottom: 1px solid var(--pm-line);\n}\n.pm-platform-row:last-child { border-bottom: 0; }\n.pm-platform-ic {\n display: grid;\n flex: 0 0 32px;\n width: 32px;\n height: 32px;\n place-items: center;\n border-radius: 9px;\n background: var(--pm-surface-2);\n color: var(--pm-ink);\n font-size: 13.4px;\n font-weight: 700;\n}\n.pm-platform-main { flex: 1; min-width: 0; }\n.pm-platform-name { font-size: 13.5px; font-weight: 600; }\n.pm-platform-sub { margin-top: 3px; color: var(--pm-ink-3); font-size: 11.5px; }\n.pm-platform-row .pm-btn { margin-left: 4px; }\n\n.pm-model-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }\n.pm-model-name { font-size: 14px; font-weight: 600; }\n.pm-model-sub { margin-top: 3px; color: var(--pm-ink-3); font-size: 11.8px; line-height: 1.5; }\n.pm-switch {\n position: relative;\n flex: 0 0 auto;\n width: 38px;\n height: 22px;\n padding: 0;\n border: 0;\n border-radius: 999px;\n background: var(--pm-surface-3);\n cursor: pointer;\n transition: background 0.16s ease;\n}\n.pm-switch::after {\n position: absolute;\n top: 3px;\n left: 3px;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #fff;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);\n content: "";\n transition: transform 0.16s ease;\n}\n.pm-switch.is-on { background: var(--pm-accent); }\n.pm-switch.is-on::after { transform: translateX(16px); }\n.pm-model-form { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }\n.pm-model-form .pm-form-col:last-child { grid-column: 1 / -1; }\n\n.pm-data-path {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 11px 13px;\n border-radius: 10px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-family: "SF Mono", Menlo, Consolas, monospace;\n font-size: 12px;\n word-break: break-all;\n}\n.pm-data-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }\n.pm-data-actions .pm-btn:last-child { margin-left: auto; }\n\n.pm-account-card { padding: 18px; }\n.pm-account-card.is-empty { border-style: dashed; box-shadow: none; background: color-mix(in srgb, var(--pm-surface) 65%, transparent); }\n.pm-account-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 12px; }\n.pm-account-form .pm-form-col { flex: 1; min-width: 190px; }\n\n.pm-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }\n.pm-plan-card { padding: 20px; }\n.pm-plan-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }\n.pm-plan-no {\n display: grid;\n width: 24px;\n height: 24px;\n place-items: center;\n border-radius: 7px;\n background: var(--pm-accent-soft);\n color: var(--pm-accent-text);\n font-family: var(--pm-num);\n font-size: 11.2px;\n font-weight: 650;\n}\n.pm-plan-card h3 { margin: 0; font-size: 16px; font-weight: 620; letter-spacing: -0.015em; }\n.pm-plan-lead { margin: 0 0 10px; color: var(--pm-ink-3); font-size: 12.3px; line-height: 1.6; }\n.pm-plan-card ul { margin: 0; padding-left: 16px; }\n.pm-plan-card li { color: var(--pm-ink-2); font-size: 12.9px; line-height: 1.7; }\n.pm-plan-card li + li { margin-top: 5px; }\n\n.pm-sheet-overlay,\n.pm-modal-overlay {\n position: fixed;\n inset: 0;\n z-index: 70;\n background: rgba(0, 0, 0, 0.28);\n backdrop-filter: blur(5px);\n animation: pm-fade 0.18s ease both;\n}\n.pm-sheet-overlay { display: flex; justify-content: flex-end; }\n.pm-sheet {\n display: flex;\n flex-direction: column;\n width: 760px;\n max-width: calc(100vw - 20px);\n height: 100%;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-2);\n animation: pm-slide 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) both;\n}\n.pm-sheet-head {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 20px 22px 16px;\n border-bottom: 1px solid var(--pm-line);\n}\n.pm-sheet-head-main { flex: 1; min-width: 0; }\n.pm-sheet-head h2 { margin: 7px 0 0; font-size: 21px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.35; }\n.pm-sheet-body { flex: 1; padding: 20px 22px 28px; overflow: auto; }\n.pm-sheet-foot {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 13px 22px;\n border-top: 1px solid var(--pm-line);\n background: var(--pm-surface);\n}\n.pm-sheet-foot .pm-btn--primary { margin-left: auto; }\n.pm-script-section { margin-bottom: 20px; }\n.pm-script-section:last-child { margin-bottom: 0; }\n.pm-script-label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n margin-bottom: 6px;\n color: var(--pm-ink-3);\n font-size: 11.8px;\n font-weight: 600;\n letter-spacing: 0.02em;\n}\n.pm-script-text { color: var(--pm-ink); font-size: 14.6px; line-height: 1.8; white-space: pre-wrap; }\n.pm-script-title { color: var(--pm-ink); font-family: var(--pm-num); font-size: 20px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.35; }\n.pm-image-list { display: flex; flex-direction: column; gap: 7px; }\n.pm-image-item {\n display: flex;\n gap: 9px;\n padding: 9px 10px;\n border-radius: 10px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-size: 12.9px;\n line-height: 1.6;\n}\n.pm-image-no {\n flex: 0 0 20px;\n color: var(--pm-accent-text);\n font-family: var(--pm-num);\n font-size: 11.2px;\n font-weight: 650;\n}\n.pm-shot-table { width: 100%; border-collapse: collapse; font-size: 12.3px; }\n.pm-shot-table th {\n padding: 7px 6px;\n border-bottom: 1px solid var(--pm-line-2);\n color: var(--pm-ink-3);\n font-weight: 500;\n text-align: left;\n}\n.pm-shot-table td { padding: 8px 6px; border-bottom: 1px solid var(--pm-line); color: var(--pm-ink-2); line-height: 1.55; vertical-align: top; }\n.pm-shot-table td:first-child { color: var(--pm-accent-text); font-family: var(--pm-num); font-weight: 650; }\n.pm-tags { display: flex; gap: 5px; flex-wrap: wrap; }\n.pm-tag {\n padding: 4px 8px;\n border-radius: 7px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-size: 11.8px;\n}\n.pm-skeleton {\n margin-bottom: 9px;\n border-radius: 8px;\n background: var(--pm-surface-2);\n animation: pm-skeleton-pulse 1.4s ease-in-out infinite;\n}\n\n.pm-modal-overlay { display: grid; place-items: center; padding: 20px; }\n.pm-modal {\n width: 420px;\n max-width: 100%;\n padding: 22px;\n border: 1px solid var(--pm-line);\n border-radius: 24px;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-2);\n animation: pm-pop 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) both;\n}\n.pm-modal h3 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }\n.pm-modal p { margin: 8px 0 0; color: var(--pm-ink-2); font-size: 13.4px; line-height: 1.65; }\n.pm-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }\n\n.pm-toast-wrap {\n position: fixed;\n bottom: 24px;\n left: 50%;\n z-index: 90;\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: min(410px, calc(100vw - 32px));\n pointer-events: none;\n transform: translateX(-50%);\n}\n.pm-toast {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 11px 12px;\n border: 1px solid var(--pm-line-2);\n border-radius: 16px;\n background: color-mix(in srgb, var(--pm-surface) 94%, transparent);\n box-shadow: var(--pm-shadow-2);\n backdrop-filter: blur(18px);\n animation: pm-toast 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both;\n pointer-events: auto;\n}\n.pm-toast-ic {\n display: grid;\n flex: 0 0 30px;\n width: 32px;\n height: 32px;\n place-items: center;\n border-radius: 50%;\n background: var(--pm-ok-soft);\n color: var(--pm-ok);\n}\n.pm-toast--loading .pm-toast-ic { background: var(--pm-accent-soft); color: var(--pm-accent-text); }\n.pm-toast--error .pm-toast-ic { background: var(--pm-danger-soft); color: var(--pm-danger); }\n.pm-toast--info .pm-toast-ic { background: var(--pm-violet-soft); color: var(--pm-violet); }\n.pm-toast-main { flex: 1; min-width: 0; }\n.pm-toast-title { color: var(--pm-ink); font-size: 13.4px; font-weight: 600; line-height: 1.4; }\n.pm-toast-desc { margin-top: 2px; color: var(--pm-ink-3); font-size: 11.8px; line-height: 1.45; }\n.pm-toast .pm-iconbtn { width: 24px; height: 24px; }\n\n@keyframes pm-fade { from { opacity: 0; } to { opacity: 1; } }\n@keyframes pm-slide { from { transform: translateX(40px); opacity: 0.7; } to { transform: translateX(0); opacity: 1; } }\n@keyframes pm-pop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n@keyframes pm-toast { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }\n@keyframes pm-skeleton-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }\n\n@media (prefers-reduced-motion: reduce) {\n .pm-root *,\n .pm-root *::before,\n .pm-root *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n@media (max-width: 1180px) {\n .pm-sidebar { flex-basis: 212px; width: 212px; }\n .pm-hero { padding: 28px 28px 22px; }\n .pm-hero--page { padding: 24px 28px 20px; }\n .pm-content { padding: 0 28px 44px; }\n .pm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .pm-topic-grid { grid-template-columns: 1fr; }\n .pm-search-layout { grid-template-columns: 1fr; }\n .pm-review-layout { grid-template-columns: 1fr; }\n .pm-chat { position: static; height: 420px; }\n .pm-plan-grid { grid-template-columns: 1fr; }\n}\n\n@media (max-width: 900px) {\n .pm-sidebar { flex-basis: 76px; width: 76px; padding: 16px 10px 12px; }\n .pm-brand { justify-content: center; padding: 0 0 18px; }\n .pm-brand-text,\n .pm-nav-label,\n .pm-nav-count,\n .pm-side-card,\n .pm-ai-card,\n .pm-version { display: none; }\n .pm-nav { gap: 6px; }\n .pm-nav-btn { justify-content: center; height: 42px; padding: 0; }\n .pm-nav-icon { flex-basis: auto; }\n .pm-hero-inner { align-items: flex-start; }\n .pm-hero h1 { font-size: 27px; }\n .pm-hero--page h1 { font-size: 23px; }\n .pm-hero p { font-size: 13.4px; }\n .pm-hero-actions { display: none; }\n .pm-qgrid { grid-template-columns: 1fr; }\n .pm-model-form { grid-template-columns: 1fr; }\n .pm-model-form .pm-form-col:last-child { grid-column: auto; }\n .pm-post-grid { grid-template-columns: 1fr; }\n}\n\n@media (max-width: 640px) {\n .pm-hero { padding: 22px 18px 18px; }\n .pm-hero--page { padding: 20px 18px 16px; }\n .pm-content { padding: 0 18px 36px; }\n .pm-kpis { grid-template-columns: 1fr; }\n .pm-kpi { min-height: 92px; }\n .pm-notice { align-items: flex-start; }\n .pm-notice-actions { flex-direction: column; align-items: flex-end; }\n .pm-tabbar { width: 100%; }\n .pm-tab { flex: 1; justify-content: center; padding: 0 6px; }\n .pm-section-head { align-items: flex-start; }\n .pm-sheet { max-width: 100vw; width: 100vw; }\n .pm-sheet-head, .pm-sheet-body, .pm-sheet-foot { padding-left: 16px; padding-right: 16px; }\n .pm-toast-wrap { bottom: 16px; }\n .pm-report-grid { grid-template-columns: 1fr; }\n}\n\n/* Review list rows */\n.pm-list {\n overflow: hidden;\n}\n.pm-row {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border-bottom: 1px solid var(--pm-line);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n.pm-row:last-child {\n border-bottom: 0;\n}\n.pm-row:hover {\n background: var(--pm-surface-2);\n}\n.pm-row-icon {\n display: grid;\n flex: 0 0 38px;\n width: 38px;\n height: 38px;\n place-items: center;\n border-radius: 11px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n}\n.pm-row-main {\n flex: 1;\n min-width: 0;\n}\n.pm-row-main .pm-detail-meta {\n overflow: hidden;\n}\n.pm-row-main .pm-detail-meta span:first-child {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Host boot and connection notice */\n.pm-boot {\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 100%;\n padding: 40px;\n background: var(--pm-bg);\n text-align: center;\n}\n.pm-boot h2 {\n margin: 10px 0 0;\n color: var(--pm-ink);\n font-size: 18px;\n font-weight: 620;\n letter-spacing: -0.02em;\n}\n.pm-boot p {\n margin: 0;\n color: var(--pm-ink-3);\n font-size: 12.9px;\n}\n.pm-host-error {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 9px 18px;\n border-bottom: 1px solid var(--pm-line);\n background: var(--pm-danger-soft);\n color: var(--pm-danger);\n font-size: 12.3px;\n}\n.pm-host-error span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Transitions: page, tab, toast exit */\n.pm-main {\n scroll-behavior: smooth;\n}\n.pm-page {\n min-height: 100%;\n animation: pm-page-in 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both;\n}\n.pm-tabpanel {\n animation: pm-tab-in 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both;\n}\n.pm-toast.is-leaving {\n animation: pm-toast-out 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) both;\n pointer-events: none;\n}\n.pm-settings-card,\n.pm-topic,\n.pm-kpi {\n transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.pm-settings-card:hover {\n border-color: var(--pm-line-2);\n}\n@keyframes pm-page-in {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n@keyframes pm-tab-in {\n from { opacity: 0; transform: translateY(6px); }\n to { opacity: 1; transform: translateY(0); }\n}\n@keyframes pm-toast-out {\n from { opacity: 1; transform: translateY(0) scale(1); }\n to { opacity: 0; transform: translateY(8px) scale(0.98); }\n}\n\n/* Phosphor icon wrapper: SVG assets keep currentColor */\n.pm-icon {\n display: inline-grid;\n flex: 0 0 auto;\n place-items: center;\n line-height: 0;\n color: currentColor;\n}\n.pm-icon svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* Orange is the primary accent; purple and red are status accents. */\n.pm-badge--gold {\n background: var(--pm-gold-soft);\n color: var(--pm-gold-text);\n}\n.pm-btn--gold {\n background: var(--pm-gold);\n color: var(--pm-accent-ink);\n}\n.pm-btn--gold:hover {\n background: var(--pm-accent-2);\n}\n.pm-empty-ic--gold {\n background: var(--pm-gold-soft);\n color: var(--pm-gold-text);\n}\n\n/* Secondary colors: red is for counts/urgent, blue/violet for content type. */\n.pm-root {\n --pm-warn: #b45309;\n --pm-warn-soft: rgba(245, 158, 11, 0.14);\n}\n:root[data-theme="dark"] .pm-root,\n.dark .pm-root,\n[data-theme="dark"] .pm-root {\n --pm-warn: #ffb020;\n --pm-warn-soft: rgba(255, 176, 32, 0.16);\n}\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme="light"]) .pm-root {\n --pm-warn: #ffb020;\n --pm-warn-soft: rgba(255, 176, 32, 0.16);\n }\n}\n\n.pm-nav-btn.is-on .pm-nav-icon {\n color: var(--pm-ink);\n}\n\n.pm-nav-count {\n background: #e0352b;\n color: #ffffff;\n}\n.pm-nav-count--muted {\n background: var(--pm-surface-3);\n color: var(--pm-ink-2);\n}\n\n.pm-badge--amber {\n background: var(--pm-warn-soft);\n color: var(--pm-warn);\n}\n\n/* Apple-style interaction and type polish */\n.pm-hero h1,\n.pm-hero--page h1,\n.pm-detail h2,\n.pm-sheet-head h2,\n.pm-brand-name {\n font-weight: 600;\n letter-spacing: -0.03em;\n}\n\n.pm-btn,\n.pm-topic,\n.pm-row,\n.pm-chip,\n.pm-tab,\n.pm-nav-btn,\n.pm-iconbtn,\n.pm-seg-btn {\n -webkit-tap-highlight-color: transparent;\n}\n.pm-btn:active,\n.pm-topic:active,\n.pm-row:active,\n.pm-chip:active,\n.pm-tab:active,\n.pm-nav-btn:active,\n.pm-iconbtn:active,\n.pm-seg-btn:active {\n transform: scale(0.98);\n}\n\n.pm-topic-index,\n.pm-peer-cover,\n.pm-post-cover {\n transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.pm-topic:hover .pm-topic-index,\n.pm-peer-row:hover .pm-peer-cover,\n.pm-post:hover .pm-post-cover {\n transform: scale(1.06);\n}\n\n.pm-root a {\n color: var(--pm-accent);\n text-decoration: none;\n}\n.pm-root a:hover {\n text-decoration: underline;\n}\n\n.pm-toast {\n backdrop-filter: blur(12px);\n}\n\n/* Original Pomelo motion and reference-style sidebar states */\n.pm-logo-fruit {\n transform-box: fill-box;\n transform-origin: 50% 92%;\n animation: pm-fruit-bounce 1.9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;\n}\n\n@keyframes pm-fruit-bounce {\n 0%, 100% { transform: translateY(0) scale(1, 1); }\n 14% { transform: translateY(1px) scale(1.025, 0.975); }\n 34% { transform: translateY(-3px) scale(0.99, 1.01); }\n 52% { transform: translateY(0) scale(1.02, 0.98); }\n 68% { transform: translateY(-1px) scale(1, 1); }\n 82% { transform: translateY(0) scale(1.01, 0.99); }\n}\n\n.pm-brand-mark {\n filter: drop-shadow(0 3px 8px rgba(140, 190, 45, 0.16));\n}\n\n.pm-nav-btn.is-on {\n background: #ffffff;\n color: var(--pm-ink);\n box-shadow: 0 0 0 0.5px var(--pm-line), 0 4px 14px -8px rgba(0, 0, 0, 0.16);\n}\n\n:root[data-theme="dark"] .pm-nav-btn.is-on,\n.dark .pm-nav-btn.is-on,\n[data-theme="dark"] .pm-nav-btn.is-on {\n background: var(--pm-surface-2);\n box-shadow: inset 0 0 0 0.5px var(--pm-line);\n}\n\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme="light"]) .pm-nav-btn.is-on {\n background: var(--pm-surface-2);\n box-shadow: inset 0 0 0 0.5px var(--pm-line);\n }\n}\n\n/* Sidebar AI card, adapted from the reference layout */\n.pm-ai-card {\n margin-top: auto;\n padding: 14px;\n border: 1px solid var(--pm-line);\n border-radius: 16px;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-1);\n}\n.pm-ai-head {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--pm-ink);\n font-size: 13.5px;\n font-weight: 600;\n}\n.pm-ai-orb {\n width: 9px;\n height: 9px;\n border-radius: 50%;\n background: conic-gradient(from 210deg, var(--pm-accent), var(--pm-violet), var(--pm-accent));\n box-shadow: 0 0 0 3px var(--pm-accent-soft);\n}\n.pm-eq {\n display: flex;\n align-items: flex-end;\n gap: 3px;\n height: 22px;\n margin: 14px 0 8px;\n}\n.pm-eq i {\n flex: 1;\n min-width: 2px;\n border-radius: 2px 2px 1px 1px;\n background: linear-gradient(180deg, var(--pm-violet), var(--pm-accent));\n transform-origin: bottom;\n animation: pm-eq 1.15s ease-in-out infinite;\n}\n@keyframes pm-eq {\n 0%, 100% { transform: scaleY(0.55); opacity: 0.55; }\n 35% { transform: scaleY(1); opacity: 1; }\n 68% { transform: scaleY(0.72); opacity: 0.8; }\n}\n\n/* Page entrance */\n.pm-app { animation: pm-app-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }\n.pm-sidebar { animation: pm-side-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; }\n@keyframes pm-app-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n@keyframes pm-side-in {\n from { opacity: 0; transform: translateX(-10px); }\n to { opacity: 1; transform: translateX(0); }\n}\n.pm-kpi {\n animation: pm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n.pm-kpi:nth-child(2) { animation-delay: 0.06s; }\n.pm-kpi:nth-child(3) { animation-delay: 0.12s; }\n.pm-kpi:nth-child(4) { animation-delay: 0.18s; }\n.pm-topic {\n animation: pm-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n.pm-topic:nth-child(2) { animation-delay: 0.04s; }\n.pm-topic:nth-child(3) { animation-delay: 0.08s; }\n.pm-topic:nth-child(4) { animation-delay: 0.12s; }\n.pm-topic:nth-child(5) { animation-delay: 0.16s; }\n.pm-topic:nth-child(6) { animation-delay: 0.2s; }\n.pm-topic:nth-child(7) { animation-delay: 0.24s; }\n.pm-topic:nth-child(8) { animation-delay: 0.28s; }\n.pm-topic:nth-child(9) { animation-delay: 0.32s; }\n.pm-topic:nth-child(10) { animation-delay: 0.36s; }\n@keyframes pm-rise {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .pm-app, .pm-sidebar, .pm-kpi, .pm-topic, .pm-logo-fruit, .pm-eq i { animation: none !important; }\n}\n\n/* Reference workbench refinements */\n.pm-brand-mark { width: 44px; height: 44px; }\n.pm-brand-name { font-size: 22px; }\n\n.pm-nav-btn:hover {\n background: color-mix(in srgb, var(--pm-surface-2) 22%, transparent);\n color: var(--pm-ink);\n}\n.pm-nav-btn.is-on:hover { background: #ffffff; }\n:root[data-theme="dark"] .pm-nav-btn.is-on:hover,\n.dark .pm-nav-btn.is-on:hover,\n[data-theme="dark"] .pm-nav-btn.is-on:hover {\n background: var(--pm-surface-2);\n}\n\n.pm-kpi {\n gap: 6px;\n min-height: 118px;\n padding: 18px 20px;\n}\n.pm-kpi-main { flex: 1 1 auto; min-width: 0; }\n.pm-kpi-label { font-size: 13px; }\n.pm-kpi-value { font-size: 30px; }\n.pm-kpi-sub {\n margin-top: 6px;\n overflow: hidden;\n font-size: 11.2px;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.pm-kpi-chart { width: 44px; min-width: 40px; opacity: 0.85; }\n\n.pm-notice { position: relative; overflow: hidden; padding-bottom: 18px; }\n.pm-notice-stats {\n display: flex;\n align-items: center;\n gap: 18px;\n padding: 0 4px;\n}\n.pm-notice-stats div { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }\n.pm-notice-stats b {\n color: var(--pm-ink);\n font-family: var(--pm-num);\n font-size: 19px;\n font-weight: 600;\n line-height: 1.15;\n font-variant-numeric: tabular-nums;\n}\n.pm-notice-stats span { color: var(--pm-ink-3); font-size: 10.5px; white-space: nowrap; }\n.pm-notice-progress {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n height: 2px;\n background: linear-gradient(90deg, var(--pm-accent), var(--pm-violet));\n}\n\n.pm-renew {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n margin-top: 12px;\n padding: 12px 16px;\n border: 1px solid color-mix(in srgb, var(--pm-accent) 14%, var(--pm-line));\n border-radius: 16px;\n background: color-mix(in srgb, var(--pm-accent-soft) 55%, var(--pm-surface));\n}\n.pm-renew p { margin: 0; color: var(--pm-ink-2); font-size: 12.2px; line-height: 1.5; }\n.pm-renew p b { color: var(--pm-ink); font-weight: 600; }\n.pm-renew .pm-btn { flex: 0 0 auto; background: var(--pm-surface); }\n\n.pm-empty {\n border: 1px solid var(--pm-line);\n border-radius: 18px;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-1);\n}\n\n.pm-settings-wrap { max-width: 880px; }\n\n.pm-eq {\n height: 11px;\n gap: 2px;\n margin: 14px 0 9px;\n}\n.pm-eq i {\n flex: 1;\n min-width: 2px;\n border-radius: 2px;\n background: color-mix(in srgb, var(--pm-accent) 28%, var(--pm-surface-3));\n animation: pm-eq 1.35s ease-in-out infinite;\n}\n.pm-eq i:nth-child(3n) { background: color-mix(in srgb, var(--pm-accent) 55%, var(--pm-surface-3)); }\n.pm-eq i:nth-child(5n) { background: color-mix(in srgb, var(--pm-violet) 45%, var(--pm-surface-3)); }\n@keyframes pm-eq {\n 0%, 100% { transform: scaleY(0.7); opacity: 0.6; }\n 35% { transform: scaleY(1); opacity: 1; }\n 68% { transform: scaleY(0.82); opacity: 0.8; }\n}\n\n@media (max-width: 1120px) {\n .pm-notice-stats { display: none; }\n}\n\n/* Reference-style pipeline empty state */\n.pm-pipeline {\n padding: 20px 22px 18px;\n border: 1px solid var(--pm-line);\n border-radius: 18px;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-1);\n}\n.pm-pipeline-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }\n.pm-pipeline-head h3 { margin: 0; color: var(--pm-ink); font-size: 14px; font-weight: 600; }\n.pm-pipeline-head p { margin: 3px 0 0; color: var(--pm-ink-3); font-size: 11.5px; }\n.pm-pipeline-legend { display: flex; align-items: center; gap: 14px; padding-top: 2px; color: var(--pm-ink-3); font-size: 10.5px; }\n.pm-pipeline-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }\n.pm-pipeline-legend i { width: 7px; height: 7px; border-radius: 2px; }\n.pm-pipeline-legend .is-idle { background: var(--pm-surface-3); }\n.pm-pipeline-legend .is-run { background: var(--pm-violet); }\n.pm-pipeline-legend .is-done { background: var(--pm-accent); }\n.pm-pipeline-body {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 34px;\n min-height: 154px;\n padding: 14px 0 8px;\n}\n.pm-pipeline-bot {\n display: grid;\n width: 66px;\n height: 66px;\n place-items: center;\n border-radius: 50%;\n background: var(--pm-surface-2);\n color: var(--pm-ink-3);\n}\n.pm-pipeline-copy { max-width: 400px; text-align: center; }\n.pm-pipeline-copy h4 { margin: 0; color: var(--pm-ink); font-size: 16px; font-weight: 600; }\n.pm-pipeline-copy p { margin: 5px 0 0; color: var(--pm-ink-3); font-size: 12.5px; line-height: 1.6; }\n.pm-pipeline-copy .pm-btn { margin-top: 12px; }\n.pm-pipeline-jar {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 68px;\n height: 68px;\n border: 1px solid var(--pm-line);\n border-radius: 14px;\n background: var(--pm-surface-2);\n color: var(--pm-ink);\n}\n.pm-pipeline-jar b { font-family: var(--pm-num); font-size: 22px; font-weight: 600; line-height: 1.1; }\n.pm-pipeline-jar span { margin-top: 2px; color: var(--pm-ink-3); font-size: 10px; }\n.pm-pipeline-track { display: flex; gap: 4px; margin-top: 10px; }\n.pm-pipeline-track i { flex: 1; height: 4px; border-radius: 2px; background: var(--pm-surface-3); }\n.pm-pipeline-track i:nth-child(4n) { background: color-mix(in srgb, var(--pm-violet) 45%, var(--pm-surface-3)); }\n.pm-pipeline-track i:nth-child(7n) { background: color-mix(in srgb, var(--pm-accent) 55%, var(--pm-surface-3)); }\n\n.pm-notice { animation: pm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }\n.pm-renew { animation: pm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both; }\n.pm-tabbar { animation: pm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }\n.pm-pipeline { animation: pm-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both; }\n@media (prefers-reduced-motion: reduce) {\n .pm-notice, .pm-renew, .pm-tabbar, .pm-pipeline { animation: none !important; }\n}\n\n/* KPI cards lift on hover */\n.pm-kpi {\n animation: pm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;\n transition:\n translate 0.35s cubic-bezier(0.22, 1, 0.36, 1),\n scale 0.35s cubic-bezier(0.22, 1, 0.36, 1),\n box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),\n border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);\n will-change: translate, scale;\n}\n@media (hover: hover) {\n .pm-kpi:hover {\n translate: 0 -3px;\n scale: 1.007;\n border-color: color-mix(in srgb, var(--pm-accent) 16%, var(--pm-line));\n box-shadow:\n 0 12px 24px -18px rgba(0, 0, 0, 0.18),\n 0 3px 8px rgba(0, 0, 0, 0.05);\n }\n :root[data-theme="dark"] .pm-kpi:hover,\n .dark .pm-kpi:hover,\n [data-theme="dark"] .pm-kpi:hover {\n box-shadow:\n 0 14px 28px -18px rgba(0, 0, 0, 0.55),\n 0 3px 8px rgba(0, 0, 0, 0.16);\n }\n .pm-kpi:hover .pm-kpi-chart {\n transform: translateY(-1px) scale(1.02);\n }\n}\n.pm-kpi:active {\n translate: 0 -1px;\n scale: 0.997;\n}\n.pm-kpi-chart {\n transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n/* Real browser / platform logos */\n.pm-platform-brand {\n display: block;\n flex: 0 0 auto;\n}\n.pm-platform-brand svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* Platform rows use real app icons, not letter tiles */\n.pm-platform-ic {\n width: 34px;\n height: 34px;\n background: transparent;\n border-radius: 0;\n}\n\n.pm-qfoot .is-empty,\n.pm-qfoot .is-saving { color: var(--pm-ink-3); }\n.pm-qfoot .is-error { color: var(--pm-danger); }\n\n/* License gate */\n.pm-gate-root {\n display: grid;\n min-height: 100vh;\n place-items: center;\n padding: 32px;\n background: var(--pm-bg);\n}\n.pm-gate {\n width: min(460px, 100%);\n text-align: center;\n}\n.pm-gate-brand {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 30px;\n text-align: left;\n}\n.pm-gate-brand .pm-brand-mark {\n width: 48px;\n height: 48px;\n}\n.pm-gate-name {\n color: var(--pm-ink);\n font-size: 22px;\n font-weight: 650;\n letter-spacing: -0.02em;\n line-height: 1.1;\n}\n.pm-gate-sub {\n margin-top: 3px;\n color: var(--pm-ink-3);\n font-size: 10px;\n letter-spacing: 0.14em;\n}\n.pm-gate h1 {\n margin: 0;\n color: var(--pm-ink);\n font-size: 34px;\n font-weight: 650;\n letter-spacing: -0.035em;\n line-height: 1.15;\n}\n.pm-gate-desc {\n max-width: 360px;\n margin: 10px auto 24px;\n color: var(--pm-ink-2);\n font-size: 13px;\n line-height: 1.65;\n}\n.pm-gate-form {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.pm-gate-form .pm-input {\n height: 44px;\n flex: 1;\n background: var(--pm-surface);\n border: 1px solid var(--pm-line);\n text-align: center;\n font-family: "SF Mono", Menlo, monospace;\n font-size: 13px;\n letter-spacing: 0.04em;\n}\n.pm-gate-form .pm-btn {\n height: 44px;\n flex: 0 0 auto;\n}\n.pm-gate-error {\n margin-top: 12px;\n color: var(--pm-danger);\n font-size: 12px;\n}\n.pm-gate-foot {\n margin: 24px 0 0;\n color: var(--pm-ink-3);\n font-size: 11.5px;\n line-height: 1.6;\n}\n.pm-gate-foot a {\n color: var(--pm-accent-text);\n text-decoration: none;\n}\n.pm-gate-foot a:hover { text-decoration: underline; }\n\n/* Animated topic pipeline while generating */\n.pm-run-pipeline {\n padding: 22px 24px 16px;\n border: 1px solid var(--pm-line);\n border-radius: 18px;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-1);\n}\n.pm-run-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }\n.pm-run-title { display: flex; align-items: center; gap: 14px; }\n.pm-run-head h3 { margin: 0; color: var(--pm-ink); font-size: 14px; font-weight: 600; }\n.pm-run-head p { margin: 4px 0 0; color: var(--pm-ink-3); font-size: 11.5px; }\n.pm-run-live {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 9px;\n border-radius: 999px;\n background: var(--pm-accent-soft);\n color: var(--pm-accent-text);\n font-size: 10.5px;\n white-space: nowrap;\n}\n.pm-run-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--pm-accent); animation: pm-run-blink 1.2s ease-in-out infinite; }\n\n.pm-run-robot { position: relative; flex: 0 0 70px; width: 70px; height: 76px; }\n.pm-run-halo {\n position: absolute;\n inset: 8px 0 0;\n border-radius: 50%;\n background: var(--pm-accent-soft);\n filter: blur(10px);\n animation: pm-run-halo 3.2s ease-in-out infinite;\n}\n.pm-run-head-face {\n position: absolute;\n top: 20px;\n left: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 9px;\n width: 48px;\n height: 38px;\n border: 1px solid rgba(255, 255, 255, 0.14);\n border-radius: 14px;\n background: linear-gradient(145deg, #4b4b50 0%, #2a2a2e 62%, #202024 100%);\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.18),\n 0 10px 22px -12px rgba(0, 0, 0, 0.9);\n transform: translateX(-50%);\n z-index: 2;\n}\n.pm-run-head-face i {\n width: 6px;\n height: 9px;\n border-radius: 3px;\n background: #ffb45e;\n box-shadow: 0 0 10px rgba(255, 150, 60, 0.85);\n animation: pm-run-eyes 2.4s ease-in-out infinite;\n}\n.pm-run-head-face i:nth-child(2) { animation-delay: 0.15s; }\n.pm-run-ear {\n position: absolute;\n top: 29px;\n width: 7px;\n height: 15px;\n border-radius: 4px;\n background: #333338;\n z-index: 1;\n}\n.pm-run-ear.is-left { left: 6px; }\n.pm-run-ear.is-right { right: 6px; }\n.pm-run-antenna {\n position: absolute;\n top: 6px;\n left: 50%;\n width: 2px;\n height: 14px;\n border-radius: 2px;\n background: #7a7a80;\n transform: translateX(-50%);\n z-index: 3;\n}\n.pm-run-antenna::after {\n position: absolute;\n top: -3px;\n left: -2px;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--pm-accent);\n box-shadow: 0 0 8px color-mix(in srgb, var(--pm-accent) 65%, transparent);\n content: "";\n animation: pm-run-blink 1.5s ease-in-out infinite;\n}\n.pm-run-body {\n position: absolute;\n bottom: 3px;\n left: 50%;\n width: 36px;\n height: 13px;\n border-radius: 6px 6px 11px 11px;\n background: linear-gradient(180deg, #3b3b40, #242428);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);\n transform: translateX(-50%);\n z-index: 2;\n}\n.pm-run-steps {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 0;\n margin-top: 20px;\n}\n.pm-run-step { min-width: 0; padding-right: 16px; opacity: 0.42; transition: opacity 0.4s ease; }\n.pm-run-step.is-active { opacity: 1; }\n.pm-run-step.is-done { opacity: 0.78; }\n.pm-run-step-line { position: relative; height: 20px; margin-bottom: 8px; }\n.pm-run-step-line::before {\n position: absolute;\n top: 9px;\n right: 0;\n left: 22px;\n height: 1px;\n background: var(--pm-line);\n content: "";\n}\n.pm-run-step:last-child .pm-run-step-line::before { display: none; }\n.pm-run-step.is-done .pm-run-step-line::before,\n.pm-run-step.is-active .pm-run-step-line::before {\n background: color-mix(in srgb, var(--pm-accent) 38%, var(--pm-line));\n}\n.pm-run-step-dot {\n position: relative;\n z-index: 1;\n display: grid;\n width: 19px;\n height: 19px;\n place-items: center;\n border-radius: 50%;\n background: var(--pm-surface-2);\n color: var(--pm-ink-3);\n font-family: var(--pm-num);\n font-size: 8.5px;\n font-weight: 600;\n}\n.pm-run-step.is-active .pm-run-step-dot { background: var(--pm-accent); color: var(--pm-accent-ink); box-shadow: 0 0 0 4px var(--pm-accent-soft); }\n.pm-run-step.is-done .pm-run-step-dot { background: var(--pm-ok-soft); color: var(--pm-ok); }\n.pm-run-step b { display: block; color: var(--pm-ink); font-size: 12px; font-weight: 600; white-space: nowrap; }\n.pm-run-step small { display: block; margin-top: 2px; overflow: hidden; color: var(--pm-ink-3); font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }\n.pm-run-track { height: 2px; margin-top: 16px; overflow: hidden; border-radius: 999px; background: var(--pm-surface-3); }\n.pm-run-track span { display: block; height: 100%; border-radius: inherit; background: var(--pm-accent); transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }\n@keyframes pm-run-halo { 0%, 100% { opacity: 0.5; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.06); } }\n@keyframes pm-run-blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }\n@keyframes pm-run-eyes { 0%, 88%, 100% { transform: scaleY(1); } 92% { transform: scaleY(0.15); } }\n@media (max-width: 760px) {\n .pm-run-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }\n .pm-run-step-line::before { display: none; }\n}\n.pm-progress-track.is-indeterminate { overflow: hidden; }\n.pm-progress-track.is-indeterminate .pm-progress-fill {\n width: 38% !important;\n animation: pm-indeterminate 1.4s cubic-bezier(.4,0,.2,1) infinite;\n}\n@keyframes pm-indeterminate {\n 0% { transform: translateX(-110%); }\n 100% { transform: translateX(310%); }\n}\n.pm-post-cover { position: relative; overflow: hidden; }\n.pm-post-cover img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.9;\n}\n.pm-post-cover > span { position: relative; z-index: 1; }\n.pm-post-title { display: block; color: var(--pm-ink); text-decoration: none; }\n.pm-post-title:hover { color: var(--pm-accent-text); text-decoration: underline; }\n\n.pm-peer-cover img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.pm-peer-cover { position: relative; overflow: hidden; }\n.pm-peer-title { color: var(--pm-ink); text-decoration: none; }\n.pm-peer-title:hover { color: var(--pm-accent-text); text-decoration: underline; }\n\n/* KPI chart entrance: draw, grow, sweep */\n.pm-spark-line {\n stroke-dasharray: 1;\n stroke-dashoffset: 1;\n animation: pm-spark-draw 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;\n}\n.pm-spark-area {\n animation: pm-spark-area 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;\n}\n@keyframes pm-spark-draw {\n from { stroke-dashoffset: 1; }\n to { stroke-dashoffset: 0; }\n}\n@keyframes pm-spark-area {\n from { opacity: 0; }\n to { opacity: 0.08; }\n}\n.pm-spark-dot {\n transform-box: fill-box;\n transform-origin: center;\n animation: pm-chart-dot 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both;\n}\n@keyframes pm-chart-dot {\n from { opacity: 0; transform: scale(0); }\n to { opacity: 1; transform: scale(1); }\n}\n\n.pm-mini-bar {\n transform-box: fill-box;\n transform-origin: bottom;\n animation: pm-bar-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n@keyframes pm-bar-grow {\n from { transform: scaleY(0); opacity: 0; }\n to { transform: scaleY(1); }\n}\n\n.pm-ring-progress {\n animation: pm-ring-draw 1s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;\n}\n@keyframes pm-ring-draw {\n from { stroke-dashoffset: var(--pm-ring-full); }\n to { stroke-dashoffset: var(--pm-ring-offset); }\n}\n.pm-ring-dot {\n transform-box: fill-box;\n transform-origin: center;\n animation: pm-chart-dot 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.62s both;\n}\n@media (prefers-reduced-motion: reduce) {\n .pm-spark-line, .pm-spark-area, .pm-spark-dot, .pm-mini-bar, .pm-ring-progress, .pm-ring-dot { animation: none !important; }\n}\n\n.pm-model-picker { margin-top: 14px; }\n.pm-model-picker .pm-select { max-width: 520px; }\n.pm-model-error { margin-top: 6px; color: var(--pm-danger); font-size: 11.5px; }\n\n/* Peer profile + card layout */\n.pm-peer-profile { padding: 20px 22px; }\n.pm-peer-profile-head { display: flex; align-items: center; gap: 14px; }\n.pm-peer-avatar { width: 54px; height: 54px; border-radius: 16px; object-fit: cover; background: var(--pm-surface-2); }\n.pm-peer-avatar--fallback { display: grid; place-items: center; color: var(--pm-ink-2); font-size: 20px; font-weight: 600; }\n.pm-peer-profile-main { flex: 1; min-width: 0; }\n.pm-peer-profile-name { display: flex; align-items: center; gap: 8px; color: var(--pm-ink); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }\n.pm-peer-profile-meta { margin-top: 4px; color: var(--pm-ink-3); font-size: 11.5px; }\n.pm-peer-profile-actions { display: flex; align-items: center; gap: 8px; }\n.pm-platform-chip {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 2px 7px 2px 3px;\n border-radius: 999px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-size: 10.5px;\n font-weight: 500;\n}\n.pm-platform-chip .pm-platform-brand { width: 14px; height: 14px; }\n.pm-peer-insight { margin-top: 16px; padding: 18px 20px; }\n.pm-peer-summary { margin: 0; padding-left: 16px; color: var(--pm-ink-2); font-size: 12.5px; line-height: 1.75; }\n.pm-peer-summary li + li { margin-top: 4px; }\n.pm-peer-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }\n.pm-post-platform {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 6px 2px 2px;\n border-radius: 999px;\n background: rgba(0, 0, 0, 0.38);\n color: #fff;\n font-size: 9.5px;\n font-weight: 500;\n}\n.pm-post-platform .pm-platform-brand { width: 14px; height: 14px; }\n.pm-post-meta { display: flex; align-items: center; gap: 6px; }\n.pm-post-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: var(--pm-surface-2); }\n.pm-post-title { cursor: pointer; }\n\n/* Platform identity uses the real app logo everywhere. */\n.pm-platform-badge {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 3px 8px 3px 5px;\n border-radius: 999px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-size: 10.5px;\n font-weight: 500;\n line-height: 1.2;\n white-space: nowrap;\n}\n.pm-platform-badge-item { display: inline-flex; align-items: center; gap: 4px; }\n.pm-platform-badge .pm-platform-brand { width: 14px; height: 14px; }\n.pm-platform-badge.is-plain { padding: 0; background: transparent; color: inherit; font-size: 13px; }\n.pm-platform-badge.is-plain .pm-platform-brand { width: 15px; height: 15px; }\n.pm-platform-badge.is-plain .pm-platform-badge-item + .pm-platform-badge-item { margin-left: 3px; }\n\n/* Peer search history and update comparison */\n.pm-peer-history { margin-top: 12px; padding: 18px 20px; }\n.pm-peer-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }\n.pm-peer-history-list { display: grid; gap: 2px; }\n.pm-peer-history-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; cursor: pointer; transition: background 0.2s ease; }\n.pm-peer-history-row:hover { background: var(--pm-surface-2); }\n.pm-peer-history-avatar { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; background: var(--pm-surface-2); flex: 0 0 32px; }\n.pm-peer-history-avatar--fallback { display: grid; place-items: center; color: var(--pm-ink-2); font-size: 12px; font-weight: 600; }\n.pm-peer-history-main { flex: 1; min-width: 0; }\n.pm-peer-history-name { display: flex; align-items: center; gap: 6px; color: var(--pm-ink); font-size: 12px; font-weight: 600; }\n.pm-peer-history-meta { margin-top: 2px; color: var(--pm-ink-3); font-size: 10.5px; }\n.pm-peer-history-update { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--pm-line); border-radius: 8px; background: transparent; color: var(--pm-ink-2); font-size: 10.5px; cursor: pointer; }\n.pm-peer-history-update:hover { color: var(--pm-ink); border-color: var(--pm-ink-3); }\n.pm-peer-history-update:disabled { opacity: 0.45; cursor: default; }\n.pm-peer-compare { margin-top: 12px; padding: 16px 18px; }\n.pm-peer-compare-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }\n.pm-peer-compare-stats { display: flex; gap: 28px; margin-top: 14px; }\n.pm-peer-compare-stats div { display: flex; flex-direction: column; gap: 2px; }\n.pm-peer-compare-stats b { color: var(--pm-ink); font-family: var(--pm-num); font-size: 20px; font-weight: 650; line-height: 1; }\n.pm-peer-compare-stats span { color: var(--pm-ink-3); font-size: 10.5px; }\n.pm-peer-new-list { display: grid; gap: 5px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pm-line); }\n.pm-peer-new-item { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--pm-ink-2); font-size: 11.5px; }\n.pm-peer-new-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.pm-peer-new-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--pm-accent); }\n\n.pm-plan-generating {\n display: flex;\n align-items: center;\n gap: 9px;\n padding: 18px 20px;\n border: 1px solid var(--pm-line);\n border-radius: 14px;\n background: var(--pm-surface);\n color: var(--pm-ink-2);\n font-size: 12px;\n}\n.pm-plan-generating-dot {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: var(--pm-accent);\n animation: pm-run-blink 1.2s ease-in-out infinite;\n}\n\n.pm-back-link {\n display: inline-flex;\n align-items: center;\n gap: 7px;\n height: 34px;\n padding: 0 13px 0 11px;\n margin: 0 0 13px;\n border: 1px solid color-mix(in srgb, var(--pm-ink) 9%, transparent);\n border-radius: 10px;\n background: color-mix(in srgb, var(--pm-surface) 88%, transparent);\n color: var(--pm-ink-2);\n font-size: 12.5px;\n font-weight: 500;\n letter-spacing: -0.01em;\n cursor: pointer;\n box-shadow:\n 0 1px 0 rgba(255, 255, 255, 0.55) inset,\n 0 2px 6px color-mix(in srgb, var(--pm-ink) 5%, transparent);\n backdrop-filter: blur(8px);\n transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n}\n.pm-back-link .pm-ic { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }\n.pm-back-link:hover {\n color: var(--pm-ink);\n border-color: color-mix(in srgb, var(--pm-accent) 26%, transparent);\n background: var(--pm-surface);\n box-shadow:\n 0 1px 0 rgba(255, 255, 255, 0.65) inset,\n 0 4px 12px color-mix(in srgb, var(--pm-ink) 7%, transparent);\n}\n.pm-back-link:hover .pm-ic { transform: translateX(-2px); }\n\n.pm-save-done { opacity: 0.72; }\n.pm-save-done:hover { opacity: 0.9; }\n\n/* Review split screen */\n.pm-review-layout { gap: 0; align-items: stretch; }\n.pm-review-layout.is-detail-full,\n.pm-review-layout.is-chat-full { grid-template-columns: minmax(0, 1fr); }\n.pm-review-layout.is-detail-full .pm-detail { width: 100%; max-width: none; }\n.pm-review-layout.is-chat-full .pm-chat {\n position: static;\n width: 100%;\n height: calc(100vh - 245px);\n min-height: 620px;\n}\n.pm-split-handle {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n width: 8px;\n cursor: col-resize;\n touch-action: none;\n}\n.pm-split-handle::before {\n position: absolute;\n top: 14px;\n bottom: 14px;\n width: 1px;\n border-radius: 1px;\n background: var(--pm-line);\n content: "";\n transition: background 0.18s ease, width 0.18s ease;\n}\n.pm-split-handle span {\n position: relative;\n z-index: 1;\n width: 3px;\n height: 30px;\n border-radius: 999px;\n background: var(--pm-ink-3);\n opacity: 0;\n transition: opacity 0.18s ease;\n}\n.pm-split-handle:hover::before,\n.pm-review-layout.is-resizing .pm-split-handle::before {\n width: 2px;\n background: color-mix(in srgb, var(--pm-accent) 58%, var(--pm-line));\n}\n.pm-split-handle:hover span,\n.pm-review-layout.is-resizing .pm-split-handle span { opacity: 0.75; }\n.pm-review-layout.is-resizing { cursor: col-resize; user-select: none; }\n.pm-panel-actions { display: flex; align-items: center; gap: 4px; }\n\n@media (max-width: 920px) {\n .pm-review-layout,\n .pm-review-layout.is-detail-full,\n .pm-review-layout.is-chat-full { grid-template-columns: minmax(0, 1fr); }\n .pm-split-handle { display: none; }\n .pm-review-layout.is-chat-full .pm-chat { height: 620px; }\n}\n\n/* Collapsible Pomelo sidebar */\n.pm-sidebar { transition: width 0.26s cubic-bezier(0.22, 1, 0.36, 1), flex-basis 0.26s cubic-bezier(0.22, 1, 0.36, 1), padding 0.26s ease; }\n.pm-sidebar.is-collapsed { flex-basis: 76px; width: 76px; padding: 22px 12px 14px; overflow: hidden; }\n.pm-sidebar-toggle {\n display: grid;\n flex: 0 0 auto;\n width: 28px;\n height: 28px;\n margin-left: auto;\n place-items: center;\n border: 1px solid var(--pm-line);\n border-radius: 8px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-3);\n cursor: pointer;\n transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;\n}\n.pm-sidebar-toggle:hover { color: var(--pm-ink); border-color: var(--pm-ink-3); background: var(--pm-surface-3); }\n.pm-sidebar.is-collapsed .pm-brand { flex-direction: column; gap: 9px; padding: 0 0 17px; }\n.pm-sidebar.is-collapsed .pm-brand-text { display: none; }\n.pm-sidebar.is-collapsed .pm-sidebar-toggle { margin-left: 0; }\n.pm-sidebar.is-collapsed .pm-nav { width: 100%; }\n.pm-sidebar.is-collapsed .pm-nav-btn { justify-content: center; padding: 10px 8px; }\n.pm-sidebar.is-collapsed .pm-nav-label { display: none; }\n.pm-sidebar.is-collapsed .pm-nav-count {\n position: absolute;\n top: 3px;\n right: 5px;\n min-width: 15px;\n height: 15px;\n padding: 0 4px;\n border-radius: 999px;\n font-size: 8.5px;\n}\n.pm-sidebar.is-collapsed .pm-sidebar-spacer { min-height: 16px; }\n.pm-side-compact {\n display: grid;\n width: 38px;\n height: 38px;\n margin: 0 auto;\n place-items: center;\n border: 1px solid var(--pm-line);\n border-radius: 12px;\n background: var(--pm-surface);\n}\n.pm-sidebar.is-collapsed .pm-ai-card { display: none; }\n.pm-sidebar.is-collapsed .pm-version { display: none; }\n@media (max-width: 900px) {\n .pm-sidebar.is-collapsed { flex-basis: 68px; width: 68px; padding-right: 8px; padding-left: 8px; }\n}\n\n.pm-ai-model {\n margin-top: 3px;\n overflow: hidden;\n color: var(--pm-ink-3);\n font-family: var(--pm-num);\n font-size: 10.5px;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pm-ai-activity {\n margin-bottom: 2px;\n color: var(--pm-ink-2);\n font-size: 11px;\n line-height: 1.45;\n}\n.pm-ai-orb.is-live { animation: pm-ai-live 1.4s ease-in-out infinite; }\n.pm-eq.is-idle i { animation-play-state: paused; opacity: 0.38; }\n.pm-ai-card { cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease; }\n.pm-ai-card:hover { border-color: var(--pm-line-2); background: var(--pm-surface-2); }\n@keyframes pm-ai-live {\n 0%, 100% { box-shadow: 0 0 0 3px var(--pm-accent-soft); transform: scale(1); }\n 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pm-accent) 12%, transparent); transform: scale(1.12); }\n}\n\n/* Model-aware electronic pet */\n.pm-pet-row { display: flex; align-items: center; gap: 11px; margin: 10px 0 8px; min-height: 62px; }\n.pm-pet-info { flex: 1; min-width: 0; }\n.pm-pet {\n --pet-a: var(--pm-accent);\n --pet-b: var(--pm-violet);\n --pet-eye: #ffb45e;\n position: relative;\n display: grid;\n flex: 0 0 64px;\n width: 64px;\n height: 58px;\n place-items: center;\n}\n.pm-pet.is-deepseek { --pet-a: #f37021; --pet-b: #b39bff; --pet-eye: #ffb45e; }\n.pm-pet.is-openai { --pet-a: #7aa2ff; --pet-b: #a78bfa; --pet-eye: #a9c6ff; }\n.pm-pet.is-claude { --pet-a: #d97757; --pet-b: #f0b38a; --pet-eye: #ffc9a8; }\n.pm-pet.is-gemini { --pet-a: #8ab4f8; --pet-b: #c58af9; --pet-eye: #b9d2ff; }\n.pm-pet.is-qwen { --pet-a: #a78bfa; --pet-b: #f0abfc; --pet-eye: #d8c4ff; }\n.pm-pet-orbit { position: absolute; inset: 0; opacity: 0.5; }\n.pm-pet-orbit i {\n position: absolute;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: var(--pet-a);\n box-shadow: 0 0 6px color-mix(in srgb, var(--pet-a) 55%, transparent);\n opacity: 0.55;\n}\n.pm-pet-orbit i:nth-child(1) { top: 8px; left: 7px; }\n.pm-pet-orbit i:nth-child(2) { top: 4px; right: 12px; background: var(--pet-b); }\n.pm-pet-orbit i:nth-child(3) { bottom: 9px; right: 5px; }\n.pm-pet.is-working .pm-pet-orbit { opacity: 1; animation: pm-pet-orbit 5s linear infinite; }\n.pm-pet-head {\n position: relative;\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n width: 38px;\n height: 31px;\n border: 1px solid rgba(255, 255, 255, 0.13);\n border-radius: 11px;\n background: linear-gradient(145deg, #46464b, #252529 72%);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 7px 14px -9px rgba(0, 0, 0, 0.9);\n animation: pm-pet-float 3.4s ease-in-out infinite;\n}\n.pm-pet-eye {\n width: 5px;\n height: 8px;\n border-radius: 3px;\n background: var(--pet-eye);\n box-shadow: 0 0 8px color-mix(in srgb, var(--pet-eye) 70%, transparent);\n animation: pm-pet-blink 4.6s ease-in-out infinite;\n}\n.pm-pet-antenna {\n position: absolute;\n z-index: 1;\n top: 7px;\n left: 50%;\n width: 2px;\n height: 9px;\n border-radius: 2px;\n background: var(--pet-b);\n transform: translateX(-50%);\n}\n.pm-pet-antenna::after {\n position: absolute;\n top: -3px;\n left: -2px;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--pet-a);\n box-shadow: 0 0 7px color-mix(in srgb, var(--pet-a) 60%, transparent);\n content: "";\n}\n.pm-pet-base {\n position: absolute;\n z-index: 1;\n bottom: 5px;\n width: 27px;\n height: 7px;\n border-radius: 5px 5px 9px 9px;\n background: #303035;\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);\n}\n.pm-pet-info { min-width: 0; }\n.pm-pet-model {\n overflow: hidden;\n color: var(--pm-ink-2);\n font-family: var(--pm-num);\n font-size: 10.5px;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pm-pet-row .pm-ai-activity { margin-top: 3px; margin-bottom: 0; overflow: hidden; color: var(--pm-ink-3); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }\n.pm-pet.is-working .pm-pet-head { animation: pm-pet-bounce 0.85s cubic-bezier(0.45, 0, 0.55, 1) infinite; }\n.pm-pet.is-openai.is-working .pm-pet-head { animation: pm-pet-tilt 1.15s ease-in-out infinite; }\n.pm-pet.is-claude.is-working .pm-pet-head { animation: pm-pet-breathe 1.7s ease-in-out infinite; }\n.pm-pet.is-gemini.is-working .pm-pet-head { animation: pm-pet-pop 1.05s ease-in-out infinite; }\n.pm-pet.is-qwen.is-working .pm-pet-head { animation: pm-pet-wobble 1.2s ease-in-out infinite; }\n.pm-pet.is-openai.is-working .pm-pet-orbit { animation-direction: reverse; animation-duration: 7s; }\n.pm-pet.is-claude.is-working .pm-pet-orbit { animation-duration: 9s; }\n.pm-pet.is-gemini.is-working .pm-pet-orbit i { animation: pm-pet-spark 1.2s ease-in-out infinite; }\n.pm-pet.is-gemini.is-working .pm-pet-orbit i:nth-child(2) { animation-delay: 0.3s; }\n.pm-pet.is-gemini.is-working .pm-pet-orbit i:nth-child(3) { animation-delay: 0.6s; }\n@keyframes pm-pet-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }\n@keyframes pm-pet-bounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-1.5deg); } }\n@keyframes pm-pet-tilt { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-2px); } }\n@keyframes pm-pet-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }\n@keyframes pm-pet-pop { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-3px) scale(1.04); } 70% { transform: translateY(0) scale(0.99); } }\n@keyframes pm-pet-wobble { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-2px) rotate(-2deg); } 75% { transform: translateX(2px) rotate(2deg); } }\n@keyframes pm-pet-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n@keyframes pm-pet-blink { 0%, 42%, 46%, 100% { transform: scaleY(1); } 44% { transform: scaleY(0.12); } }\n@keyframes pm-pet-spark { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.5); } }\n\n/* AI state stage */\n.pm-ai-family {\n margin-left: auto;\n color: var(--pm-ink-3);\n font-family: var(--pm-num);\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.01em;\n}\n.pm-ai-modelline {\n margin-top: 2px;\n overflow-wrap: anywhere;\n color: var(--pm-ink-2);\n font-family: var(--pm-num);\n font-size: 11.5px;\n line-height: 1.4;\n}\n.pm-ai-stage {\n --stage-a: var(--pm-accent);\n --stage-b: var(--pm-violet);\n position: relative;\n display: grid;\n height: 118px;\n margin: 11px -4px 1px;\n place-items: center;\n overflow: hidden;\n border: 1px solid color-mix(in srgb, var(--pm-ink) 7%, transparent);\n border-radius: 13px;\n background:\n radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--stage-a) 13%, transparent), transparent 64%),\n linear-gradient(180deg, var(--pm-surface-2), color-mix(in srgb, var(--pm-surface-2) 60%, transparent));\n}\n.pm-ai-stage.is-deepseek { --stage-a: #f37021; --stage-b: #b39bff; }\n.pm-ai-stage.is-openai { --stage-a: #7aa2ff; --stage-b: #a78bfa; }\n.pm-ai-stage.is-claude { --stage-a: #d97757; --stage-b: #f0b38a; }\n.pm-ai-stage.is-gemini { --stage-a: #8ab4f8; --stage-b: #c58af9; }\n.pm-ai-stage.is-qwen { --stage-a: #a78bfa; --stage-b: #f0abfc; }\n.pm-stage-ring {\n position: absolute;\n inset: 0;\n margin: auto;\n border: 1px solid color-mix(in srgb, var(--stage-a) 25%, transparent);\n border-radius: 50%;\n animation: pm-stage-spin 22s linear infinite;\n}\n.pm-stage-ring.is-one { width: 86px; height: 86px; }\n.pm-stage-ring.is-two { width: 116px; height: 116px; border-color: color-mix(in srgb, var(--stage-b) 18%, transparent); animation-direction: reverse; animation-duration: 30s; }\n.pm-stage-ring.is-two::after {\n position: absolute;\n top: 9px;\n left: 14px;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: var(--stage-b);\n box-shadow: 0 0 8px color-mix(in srgb, var(--stage-b) 60%, transparent);\n content: "";\n}\n.pm-ai-stage.is-openai .pm-stage-ring.is-one { border-style: dashed; }\n.pm-ai-stage.is-claude .pm-stage-ring { border-color: color-mix(in srgb, var(--stage-a) 15%, transparent); filter: blur(0.6px); }\n.pm-ai-stage.is-gemini .pm-stage-ring.is-one { border-color: color-mix(in srgb, var(--stage-a) 35%, transparent); }\n.pm-ai-stage.is-qwen .pm-stage-ring.is-two { border-style: dotted; }\n.pm-stage-spark {\n position: absolute;\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background: var(--stage-a);\n opacity: 0.35;\n animation: pm-stage-spark 5.5s ease-in-out infinite;\n}\n.pm-stage-spark.is-a { top: 22px; left: 34px; }\n.pm-stage-spark.is-b { top: 34px; right: 36px; animation-delay: 1.7s; background: var(--stage-b); }\n.pm-stage-spark.is-c { bottom: 24px; left: 74px; animation-delay: 3.1s; }\n.pm-ai-stage.is-gemini .pm-stage-spark { animation-duration: 2.4s; }\n.pm-ai-stage .pm-pet { z-index: 2; transform: scale(1.02); }\n.pm-stage-state {\n position: absolute;\n right: 0;\n bottom: 8px;\n left: 0;\n overflow: hidden;\n color: var(--pm-ink-3);\n font-size: 9.5px;\n line-height: 1.3;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pm-ai-stage.is-working { background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--stage-a) 21%, transparent), transparent 68%), linear-gradient(180deg, var(--pm-surface-2), var(--pm-surface-2)); }\n.pm-ai-stage.is-working .pm-stage-ring { animation-duration: 6s; border-color: color-mix(in srgb, var(--stage-a) 44%, transparent); }\n.pm-ai-stage.is-working .pm-stage-ring.is-two { animation-duration: 8s; }\n.pm-ai-stage.is-working .pm-stage-spark { animation-duration: 2.2s; opacity: 0.8; }\n.pm-ai-stage.is-working .pm-stage-state { color: var(--pm-ink-2); }\n@keyframes pm-stage-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }\n@keyframes pm-stage-spark { 0%, 100% { opacity: 0.15; transform: scale(0.7); } 50% { opacity: 0.9; transform: scale(1.35); } }\n\n.pm-nav-alert {\n width: 6px;\n height: 6px;\n margin-left: auto;\n border-radius: 50%;\n background: var(--pm-danger, #e5484d);\n box-shadow: 0 0 0 3px color-mix(in srgb, #e5484d 14%, transparent);\n}\n.pm-sidebar.is-collapsed .pm-nav-alert { position: absolute; top: 7px; right: 8px; margin: 0; }\n.pm-plan-stale {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 14px;\n padding: 14px 16px;\n border-color: color-mix(in srgb, var(--pm-accent) 26%, var(--pm-line));\n background: color-mix(in srgb, var(--pm-accent-soft) 42%, var(--pm-surface));\n}\n.pm-plan-stale-ic {\n display: grid;\n flex: 0 0 32px;\n width: 32px;\n height: 32px;\n place-items: center;\n border-radius: 10px;\n background: var(--pm-accent-soft);\n color: var(--pm-accent-text);\n}\n.pm-plan-stale-main { flex: 1; min-width: 0; }\n.pm-plan-stale-title { color: var(--pm-ink); font-size: 13px; font-weight: 600; }\n.pm-plan-stale-desc { margin-top: 2px; color: var(--pm-ink-3); font-size: 11.5px; line-height: 1.5; }\n\n.pm-pet-hint { margin-top: 2px; color: var(--pm-ink-3); font-size: 9.5px; }\n.pm-ai-stage { height: 92px; margin-top: 8px; }\n.pm-ai-stage .pm-stage-ring.is-one { width: 72px; height: 72px; }\n.pm-ai-stage .pm-stage-ring.is-two { width: 98px; height: 98px; }\n.pm-stage-core {\n position: absolute;\n inset: 0;\n margin: auto;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--stage-a);\n box-shadow: 0 0 18px color-mix(in srgb, var(--stage-a) 60%, transparent);\n opacity: 0.55;\n animation: pm-stage-core 2.8s ease-in-out infinite;\n}\n@keyframes pm-stage-core {\n 0%, 100% { transform: scale(0.7); opacity: 0.28; }\n 50% { transform: scale(1.5); opacity: 0.8; }\n}\n.pm-ai-stage.is-working .pm-stage-core { animation-duration: 1.2s; }\n\n/* Effects follow the AI task, not the model vendor. */\n.pm-stage-scan {\n position: absolute;\n right: 12px;\n left: 12px;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--stage-a), transparent);\n opacity: 0;\n}\n.pm-stage-typing {\n position: absolute;\n bottom: 15px;\n left: 50%;\n display: flex;\n transform: translateX(-50%);\n gap: 4px;\n opacity: 0;\n}\n.pm-stage-typing i {\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: var(--stage-a);\n}\n.pm-ai-stage.is-task-topics .pm-stage-scan { opacity: 0.7; animation: pm-task-scan 2.2s ease-in-out infinite; }\n.pm-ai-stage.is-task-topics .pm-stage-ring.is-one { animation: pm-task-pulse 2.2s ease-out infinite; }\n.pm-ai-stage.is-task-topics .pm-stage-ring.is-two { animation: pm-task-pulse 2.2s ease-out 0.7s infinite; }\n.pm-ai-stage.is-task-topics .pm-stage-core { animation: pm-task-blink 1.1s ease-in-out infinite; }\n.pm-ai-stage.is-task-plan .pm-stage-ring.is-one { animation: pm-task-plan-ring 3.2s ease-in-out infinite; }\n.pm-ai-stage.is-task-plan .pm-stage-ring.is-two { animation: pm-task-plan-ring 3.2s ease-in-out 0.5s infinite; }\n.pm-ai-stage.is-task-plan .pm-stage-core { animation: pm-task-plan-core 3.2s ease-in-out infinite; }\n.pm-ai-stage.is-task-script .pm-stage-scan { opacity: 0.7; animation: pm-task-type-line 1.6s linear infinite; }\n.pm-ai-stage.is-task-script .pm-stage-ring { animation: pm-task-drift 6s ease-in-out infinite; }\n.pm-ai-stage.is-task-script .pm-stage-typing { opacity: 1; }\n.pm-ai-stage.is-task-script .pm-stage-typing i { animation: pm-task-dot 1.1s ease-in-out infinite; }\n.pm-ai-stage.is-task-script .pm-stage-typing i:nth-child(2) { animation-delay: 0.16s; }\n.pm-ai-stage.is-task-script .pm-stage-typing i:nth-child(3) { animation-delay: 0.32s; }\n.pm-ai-stage.is-task-review .pm-stage-typing { opacity: 1; bottom: 16px; }\n.pm-ai-stage.is-task-review .pm-stage-typing i { animation: pm-task-dot 1.4s ease-in-out infinite; }\n.pm-ai-stage.is-task-review .pm-stage-typing i:nth-child(2) { animation-delay: 0.22s; }\n.pm-ai-stage.is-task-review .pm-stage-typing i:nth-child(3) { animation-delay: 0.44s; }\n.pm-ai-stage.is-task-review .pm-stage-ring { animation: pm-task-review-ring 4s ease-in-out infinite; }\n.pm-ai-stage.is-task-review .pm-stage-spark { animation: pm-task-review-dot 2.4s ease-in-out infinite; }\n.pm-ai-stage.is-task-review .pm-stage-core { opacity: 0.25; animation: none; }\n.pm-pet.is-task-topics.is-working .pm-pet-head { animation: pm-pet-bounce 0.85s cubic-bezier(0.45, 0, 0.55, 1) infinite; }\n.pm-pet.is-task-plan.is-working .pm-pet-head { animation: pm-pet-breathe 1.6s ease-in-out infinite; }\n.pm-pet.is-task-script.is-working .pm-pet-head { animation: pm-pet-tilt 1.1s ease-in-out infinite; }\n.pm-pet.is-task-review.is-working .pm-pet-head { animation: pm-pet-wobble 1.25s ease-in-out infinite; }\n@keyframes pm-task-scan { 0% { top: 14%; opacity: 0; } 15% { opacity: 0.7; } 85% { opacity: 0.7; } 100% { top: 86%; opacity: 0; } }\n@keyframes pm-task-pulse { 0% { transform: scale(0.72); opacity: 0; } 35% { opacity: 0.9; } 100% { transform: scale(1.16); opacity: 0; } }\n@keyframes pm-task-blink { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.5); } }\n@keyframes pm-task-plan-ring { 0%, 100% { transform: scale(0.92); opacity: 0.25; } 50% { transform: scale(1.05); opacity: 0.7; } }\n@keyframes pm-task-plan-core { 0%, 100% { transform: scale(0.9); opacity: 0.35; } 50% { transform: scale(1.8); opacity: 0.9; } }\n@keyframes pm-task-type-line { 0% { top: 18%; opacity: 0; } 12% { opacity: 0.7; } 88% { opacity: 0.7; } 100% { top: 82%; opacity: 0; } }\n@keyframes pm-task-drift { 0%, 100% { transform: rotate(-4deg) scale(0.95); } 50% { transform: rotate(4deg) scale(1.03); } }\n@keyframes pm-task-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }\n@keyframes pm-task-review-ring { 0%, 100% { transform: scale(0.94); opacity: 0.3; } 50% { transform: scale(1.06); opacity: 0.65; } }\n@keyframes pm-task-review-dot { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 0.9; transform: scale(1.4); } }\n\n.pm-ai-card { cursor: default; }\n.pm-ai-card:hover { border-color: var(--pm-line); background: var(--pm-surface); }\n.pm-ecg {\n --ecg-a: #f37021;\n --ecg-b: #b39bff;\n position: relative;\n height: 38px;\n margin: 9px -2px 2px;\n overflow: hidden;\n border-radius: 8px;\n background: linear-gradient(180deg, color-mix(in srgb, var(--pm-surface-2) 55%, transparent), transparent 78%);\n}\n.pm-ecg.is-deepseek { --ecg-a: #f37021; --ecg-b: #b39bff; }\n.pm-ecg.is-openai { --ecg-a: #7aa2ff; --ecg-b: #a78bfa; }\n.pm-ecg.is-claude { --ecg-a: #d97757; --ecg-b: #f0b38a; }\n.pm-ecg.is-gemini { --ecg-a: #8ab4f8; --ecg-b: #c58af9; }\n.pm-ecg.is-qwen { --ecg-a: #a78bfa; --ecg-b: #f0abfc; }\n.pm-ecg svg { display: block; width: 100%; height: 100%; overflow: visible; }\n.pm-ecg-base, .pm-ecg-pulse { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }\n.pm-ecg-base { stroke: color-mix(in srgb, var(--ecg-a) 17%, transparent); stroke-width: 1; }\n.pm-ecg-pulse {\n stroke: var(--ecg-a);\n stroke-width: 1.5;\n stroke-dasharray: 30 220;\n stroke-dashoffset: 0;\n filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ecg-a) 65%, transparent));\n animation: pm-ecg-run 3s linear infinite;\n}\n.pm-ecg.is-task-idle .pm-ecg-pulse { stroke-dasharray: 16 220; animation-duration: 6.5s; opacity: 0.45; }\n.pm-ecg.is-task-topics .pm-ecg-pulse { stroke-dasharray: 38 220; animation-duration: 1.8s; }\n.pm-ecg.is-task-plan .pm-ecg-pulse { stroke-dasharray: 54 220; animation-duration: 3.4s; stroke: var(--ecg-b); }\n.pm-ecg.is-task-script .pm-ecg-pulse { stroke-dasharray: 20 220; animation-duration: 2.1s; }\n.pm-ecg.is-task-review .pm-ecg-pulse { stroke-dasharray: 26 220; animation-duration: 4.2s; stroke: var(--ecg-b); }\n.pm-ecg.is-working { background: linear-gradient(180deg, color-mix(in srgb, var(--ecg-a) 8%, transparent), transparent 82%); }\n@keyframes pm-ecg-run { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -250; } }\n\n.pm-nav-tail { display: flex; align-items: center; justify-content: flex-end; min-width: 34px; margin-left: auto; gap: 4px; }\n.pm-nav-count { min-width: 24px; height: 20px; font-size: 10.5px; }\n.pm-nav-count--violet { background: color-mix(in srgb, var(--pm-ok) 18%, transparent); color: var(--pm-ok); }\n.pm-nav-state { color: #ff7a7a; font-size: 9px; font-weight: 500; white-space: nowrap; }\n.pm-sidebar.is-collapsed .pm-nav-tail { position: absolute; top: 3px; right: 4px; min-width: 0; margin: 0; }\n.pm-sidebar.is-collapsed .pm-nav-state { display: none; }\n\n.pm-plan-card { padding: 22px; }\n.pm-plan-card h3 { font-size: 17px; }\n.pm-plan-lead { font-size: 13.8px; line-height: 1.7; }\n.pm-plan-card li { font-size: 14px; line-height: 1.78; }\n.pm-plan-card li + li { margin-top: 7px; }\n.pm-plan-card.is-placeholder { background: color-mix(in srgb, var(--pm-surface) 72%, transparent); box-shadow: none; }\n.pm-plan-card.is-placeholder h3 { color: var(--pm-ink-2); }\n.pm-plan-placeholder { margin: 0; color: var(--pm-ink-3); font-size: 13.2px; line-height: 1.7; }\n\n.pm-nav-dot {\n width: 6px;\n height: 6px;\n margin-right: 9px;\n border-radius: 50%;\n background: var(--pm-accent);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-accent) 13%, transparent);\n}\n.pm-sidebar.is-collapsed .pm-nav-dot { margin: 0; }\n\n.pm-nav-flag {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 22px;\n padding: 0 8px;\n border: 1px solid color-mix(in srgb, var(--pm-accent) 26%, transparent);\n border-radius: 7px;\n background: color-mix(in srgb, var(--pm-accent) 7%, transparent);\n color: var(--pm-accent-text);\n font-size: 10.5px;\n font-weight: 600;\n letter-spacing: 0.02em;\n white-space: nowrap;\n}\n.pm-sidebar.is-collapsed .pm-nav-flag { display: none; }\n\n/* Give the collapsed rail more breathing room. */\n.pm-sidebar.is-collapsed {\n flex-basis: 84px;\n width: 84px;\n padding: 20px 13px 16px;\n}\n.pm-sidebar.is-collapsed .pm-brand {\n gap: 10px;\n padding: 0 0 20px;\n}\n.pm-sidebar.is-collapsed .pm-nav {\n gap: 8px;\n}\n.pm-sidebar.is-collapsed .pm-nav-btn {\n height: 46px;\n padding: 0;\n border-radius: 12px;\n}\n.pm-sidebar.is-collapsed .pm-nav-count,\n.pm-sidebar.is-collapsed .pm-nav-flag {\n display: none;\n}\n.pm-sidebar.is-collapsed .pm-side-compact {\n width: 40px;\n height: 40px;\n}\n@media (max-width: 900px) {\n .pm-sidebar.is-collapsed { flex-basis: 80px; width: 80px; padding-right: 11px; padding-left: 11px; }\n}\n\n/* Collapsed logo and toggle should read as one block, not two islands. */\n.pm-sidebar.is-collapsed .pm-brand {\n gap: 4px;\n padding-bottom: 18px;\n}\n\n.pm-sidebar.is-collapsed .pm-brand {\n gap: 16px;\n padding-bottom: 20px;\n}\n\n/* Working state is faster and carries a small electric arc. */\n.pm-ecg.is-working.is-task-topics .pm-ecg-pulse { animation-duration: 0.9s; stroke-dasharray: 44 220; }\n.pm-ecg.is-working.is-task-plan .pm-ecg-pulse { animation-duration: 1.15s; stroke-dasharray: 60 220; }\n.pm-ecg.is-working.is-task-script .pm-ecg-pulse { animation-duration: 0.95s; stroke-dasharray: 26 220; }\n.pm-ecg.is-working.is-task-review .pm-ecg-pulse { animation-duration: 1.5s; stroke-dasharray: 32 220; }\n.pm-ecg.is-working .pm-ecg-pulse { stroke-width: 1.8; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--ecg-a) 80%, transparent)); }\n.pm-ecg.is-working .pm-ecg-base { stroke: color-mix(in srgb, var(--ecg-a) 30%, transparent); }\n.pm-ecg-bolt {\n position: absolute;\n z-index: 2;\n width: 12px;\n height: 25px;\n background: linear-gradient(180deg, #fff, var(--ecg-b));\n clip-path: polygon(58% 0%, 28% 48%, 50% 48%, 34% 100%, 80% 38%, 56% 38%, 78% 0%);\n filter: drop-shadow(0 0 6px var(--ecg-a));\n opacity: 0;\n pointer-events: none;\n will-change: opacity, transform;\n}\n.pm-ecg-bolt.is-a { top: 0; right: 23%; }\n.pm-ecg-bolt.is-b { right: 63%; bottom: 0; width: 8px; height: 17px; transform: scaleX(-1); }\n.pm-ecg.is-working .pm-ecg-bolt.is-a { animation: pm-ecg-bolt 1.1s steps(1, end) infinite; }\n.pm-ecg.is-working .pm-ecg-bolt.is-b { animation: pm-ecg-bolt 1.35s steps(1, end) 0.32s infinite; }\n@keyframes pm-ecg-bolt {\n 0%, 8% { opacity: 0; transform: scale(0.6) translateY(2px); }\n 10% { opacity: 1; transform: scale(1.1) translateY(0); }\n 16% { opacity: 0.15; }\n 20% { opacity: 0.95; }\n 30% { opacity: 0; }\n 100% { opacity: 0; }\n}\n\n/* Real electric arcs, not a static bolt icon. */\n.pm-ecg-arc {\n fill: none;\n stroke: color-mix(in srgb, #fff 38%, var(--ecg-a));\n stroke-width: 1.35;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 26 26;\n stroke-dashoffset: 26;\n opacity: 0;\n filter: drop-shadow(0 0 4px var(--ecg-a));\n}\n.pm-ecg-spark {\n fill: #fff;\n opacity: 0;\n filter: drop-shadow(0 0 4px var(--ecg-a));\n}\n.pm-ecg.is-working .pm-ecg-arc.is-a { animation: pm-ecg-arc 0.62s steps(1, end) infinite; }\n.pm-ecg.is-working .pm-ecg-arc.is-b { animation: pm-ecg-arc 0.74s steps(1, end) 0.18s infinite; }\n.pm-ecg.is-working .pm-ecg-arc.is-c { animation: pm-ecg-arc 0.86s steps(1, end) 0.36s infinite; }\n.pm-ecg.is-working .pm-ecg-spark.is-a { animation: pm-ecg-spark 0.62s steps(1, end) infinite; }\n.pm-ecg.is-working .pm-ecg-spark.is-b { animation: pm-ecg-spark 0.74s steps(1, end) 0.18s infinite; }\n@keyframes pm-ecg-arc {\n 0%, 62%, 100% { opacity: 0; stroke-dashoffset: 26; }\n 4% { opacity: 1; stroke-dashoffset: 0; }\n 10% { opacity: 0.12; }\n 14% { opacity: 1; }\n 26% { opacity: 0; }\n}\n@keyframes pm-ecg-spark {\n 0%, 60%, 100% { opacity: 0; transform: scale(0.5); transform-origin: center; }\n 5% { opacity: 1; transform: scale(1.8); }\n 16% { opacity: 0; transform: scale(0.8); }\n}\n\n.pm-ecg::after {\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at 42% 34%, rgba(255, 255, 255, 0.16), transparent 32%);\n opacity: 0;\n content: "";\n pointer-events: none;\n}\n.pm-ecg.is-working::after { animation: pm-ecg-screenflash 1.1s steps(1, end) infinite; }\n@keyframes pm-ecg-screenflash {\n 0%, 12%, 100% { opacity: 0; }\n 4% { opacity: 0.7; }\n 8% { opacity: 0.15; }\n}\n\n.pm-avatar--img { object-fit: cover; border-radius: 12px; }\n\n.pm-version {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n margin-top: 16px;\n padding: 0;\n color: var(--pm-ink-3);\n font-size: 10.5px;\n line-height: 1.4;\n text-align: center;\n}\n';
|
|
2036
|
+
var styles_default = '/* \u67DA\u5BA2 Pomelo \u2014 scoped visual system. All selectors stay under .pm-root. */\n\n.pm-root {\n --pm-bg: #f5f5f7;\n --pm-surface: #ffffff;\n --pm-surface-2: #f2f2f7;\n --pm-surface-3: #e5e5ea;\n --pm-ink: #1d1d1f;\n --pm-ink-2: #6e6e73;\n --pm-ink-3: #86868b;\n --pm-line: rgba(0, 0, 0, 0.07);\n --pm-line-2: rgba(0, 0, 0, 0.13);\n --pm-accent: #f37021;\n --pm-accent-2: #ff8433;\n --pm-accent-text: #c4500a;\n --pm-accent-soft: rgba(243, 112, 33, 0.11);\n --pm-accent-ink: #1d1d1f;\n --pm-gold: #f37021;\n --pm-gold-soft: rgba(243, 112, 33, 0.11);\n --pm-gold-text: #c4500a;\n --pm-ok: #6e56cf;\n --pm-ok-soft: rgba(110, 86, 207, 0.12);\n --pm-danger: #d70015;\n --pm-danger-soft: rgba(255, 59, 48, 0.1);\n --pm-warn: #b45309;\n --pm-warn-soft: rgba(245, 158, 11, 0.14);\n --pm-violet: #c4500a;\n --pm-violet-soft: rgba(196, 80, 10, 0.12);\n --pm-blue: #f37021;\n --pm-blue-soft: rgba(243, 112, 33, 0.1);\n --pm-shadow-1: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04),\n 0 8px 24px -12px rgba(0, 0, 0, 0.08);\n --pm-shadow-2: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 12px 40px -12px rgba(0, 0, 0, 0.18);\n --pm-r-s: 8px;\n --pm-r-m: 12px;\n --pm-r-l: 20px;\n --pm-r-xl: 24px;\n --pm-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",\n "Helvetica Neue", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;\n --pm-num: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue",\n "Segoe UI", var(--pm-font);\n color-scheme: light;\n height: 100%;\n min-height: 0;\n background: var(--pm-bg);\n color: var(--pm-ink);\n font-family: var(--pm-font);\n font-size: 15px;\n line-height: 1.55;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n}\n\n:root[data-theme="dark"] .pm-root,\n.dark .pm-root,\n[data-theme="dark"] .pm-root {\n color-scheme: dark;\n --pm-bg: #000000;\n --pm-surface: #1c1c1e;\n --pm-surface-2: #2c2c2e;\n --pm-surface-3: #3a3a3c;\n --pm-ink: #f5f5f7;\n --pm-ink-2: #a1a1a6;\n --pm-ink-3: #8e8e93;\n --pm-line: rgba(255, 255, 255, 0.08);\n --pm-line-2: rgba(255, 255, 255, 0.15);\n --pm-accent: #ff8a3d;\n --pm-accent-2: #ff9f5a;\n --pm-accent-text: #ff9f5a;\n --pm-accent-soft: rgba(255, 138, 61, 0.16);\n --pm-accent-ink: #1a0e05;\n --pm-gold: #ff8a3d;\n --pm-gold-soft: rgba(255, 138, 61, 0.16);\n --pm-gold-text: #ff9f5a;\n --pm-ok: #b39bff;\n --pm-ok-soft: rgba(179, 155, 255, 0.16);\n --pm-danger: #ff6961;\n --pm-danger-soft: rgba(255, 105, 97, 0.16);\n --pm-warn: #ffb020;\n --pm-warn-soft: rgba(255, 176, 32, 0.16);\n --pm-violet: #ff9f5a;\n --pm-violet-soft: rgba(255, 159, 90, 0.14);\n --pm-blue: #ff8a3d;\n --pm-blue-soft: rgba(255, 138, 61, 0.14);\n --pm-shadow-1: 0 0 0 0.5px rgba(255, 255, 255, 0.06);\n --pm-shadow-2: 0 0 0 0.5px rgba(255, 255, 255, 0.08),\n 0 20px 50px -16px rgba(0, 0, 0, 0.8);\n}\n\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme="light"]) .pm-root {\n color-scheme: dark;\n --pm-bg: #000000;\n --pm-surface: #1c1c1e;\n --pm-surface-2: #2c2c2e;\n --pm-surface-3: #3a3a3c;\n --pm-ink: #f5f5f7;\n --pm-ink-2: #a1a1a6;\n --pm-ink-3: #8e8e93;\n --pm-line: rgba(255, 255, 255, 0.08);\n --pm-line-2: rgba(255, 255, 255, 0.15);\n --pm-accent: #ff8a3d;\n --pm-accent-2: #ff9f5a;\n --pm-accent-text: #ff9f5a;\n --pm-accent-soft: rgba(255, 138, 61, 0.16);\n --pm-accent-ink: #1a0e05;\n --pm-gold: #ff8a3d;\n --pm-gold-soft: rgba(255, 138, 61, 0.16);\n --pm-gold-text: #ff9f5a;\n --pm-ok: #b39bff;\n --pm-ok-soft: rgba(179, 155, 255, 0.16);\n --pm-danger: #ff6961;\n --pm-danger-soft: rgba(255, 105, 97, 0.16);\n --pm-warn: #ffb020;\n --pm-warn-soft: rgba(255, 176, 32, 0.16);\n --pm-violet: #ff9f5a;\n --pm-violet-soft: rgba(255, 159, 90, 0.14);\n --pm-blue: #ff8a3d;\n --pm-blue-soft: rgba(255, 138, 61, 0.14);\n --pm-shadow-1: 0 0 0 0.5px rgba(255, 255, 255, 0.06);\n --pm-shadow-2: 0 0 0 0.5px rgba(255, 255, 255, 0.08),\n 0 20px 50px -16px rgba(0, 0, 0, 0.8);\n }\n}\n\n.pm-root *,\n.pm-root *::before,\n.pm-root *::after {\n box-sizing: border-box;\n}\n\n.pm-shell {\n position: relative;\n display: flex;\n flex-direction: column;\n height: 100%;\n min-height: 0;\n padding-top: var(--dsh-frame-top-clearance, 0px);\n background: var(--pm-bg);\n overflow: hidden;\n}\n\n.pm-drag {\n position: absolute;\n inset: 0 0 auto 0;\n height: max(var(--dsh-frame-top-clearance, 0px), 12px);\n -webkit-app-region: drag;\n z-index: 4;\n}\n\n.pm-app {\n display: flex;\n flex: 1;\n min-height: 0;\n min-width: 0;\n background: var(--pm-bg);\n}\n\n.pm-sidebar {\n display: flex;\n flex-direction: column;\n flex: 0 0 264px;\n width: 264px;\n min-height: 0;\n padding: 26px 18px 16px;\n background: var(--pm-surface);\n border-right: 1px solid var(--pm-line);\n}\n\n.pm-brand {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 8px 24px;\n}\n\n.pm-brand-mark {\n display: grid;\n flex: 0 0 auto;\n width: 40px;\n height: 40px;\n place-items: center;\n filter: none;\n}\n\n.pm-logo {\n display: block;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n\n.pm-brand-text {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.pm-brand-name {\n font-size: 21px;\n font-weight: 650;\n letter-spacing: -0.025em;\n line-height: 1.2;\n}\n\n.pm-brand-sub {\n margin-top: 1px;\n color: var(--pm-ink-3);\n font-size: 11.2px;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.pm-nav {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.pm-nav-btn {\n position: relative;\n display: flex;\n align-items: center;\n gap: 11px;\n width: 100%;\n height: 40px;\n padding: 0 11px;\n border: 0;\n border-radius: 10px;\n background: transparent;\n color: var(--pm-ink-2);\n font-family: inherit;\n font-size: 14.6px;\n font-weight: 500;\n text-align: left;\n cursor: pointer;\n transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n\n.pm-nav-btn:hover {\n background: color-mix(in srgb, var(--pm-surface-2) 50%, transparent);\n color: var(--pm-ink);\n}\n\n.pm-nav-btn.is-on {\n background: var(--pm-surface-2);\n color: var(--pm-ink);\n box-shadow: inset 0 0 0 0.5px var(--pm-line);\n}\n\n\n.pm-nav-icon {\n display: grid;\n flex: 0 0 20px;\n place-items: center;\n color: var(--pm-ink-3);\n}\n\n.pm-nav-label {\n flex: 1;\n min-width: 0;\n}\n\n.pm-nav-count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 19px;\n height: 19px;\n padding: 0 5px;\n border-radius: 999px;\n background: var(--pm-accent);\n color: #1d1d1f;\n font-size: 11.2px;\n font-weight: 700;\n}\n\n.pm-sidebar-spacer {\n flex: 1;\n}\n\n.pm-side-card {\n margin: 18px 2px 12px;\n padding: 15px 15px 13px;\n border: 1px solid var(--pm-line);\n border-radius: 16px;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-1);\n}\n\n.pm-side-head {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--pm-ink);\n font-size: 14.6px;\n font-weight: 600;\n}\n\n.pm-status-dot {\n display: inline-block;\n flex: 0 0 auto;\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: var(--pm-gold);\n box-shadow: 0 0 0 4px var(--pm-accent-soft);\n}\n\n.pm-side-stat {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n margin-top: 11px;\n color: var(--pm-ink-3);\n font-size: 13.4px;\n}\n\n.pm-side-stat b {\n color: var(--pm-ink);\n font-family: var(--pm-num);\n font-size: 14px;\n font-weight: 600;\n font-variant-numeric: tabular-nums;\n}\n\n.pm-side-note {\n margin-top: 12px;\n padding-top: 10px;\n border-top: 1px solid var(--pm-line);\n color: var(--pm-ink-3);\n font-size: 11.8px;\n line-height: 1.5;\n}\n\n.pm-version {\n padding: 0 4px;\n color: var(--pm-ink-3);\n font-size: 11.8px;\n text-align: center;\n}\n\n.pm-main {\n flex: 1;\n min-width: 0;\n min-height: 0;\n overflow: auto;\n overscroll-behavior: contain;\n scrollbar-width: thin;\n scrollbar-color: var(--pm-line-2) transparent;\n}\n\n.pm-main::-webkit-scrollbar { width: 8px; height: 8px; }\n.pm-main::-webkit-scrollbar-thumb {\n border: 2px solid transparent;\n border-radius: 999px;\n background: var(--pm-line-2);\n background-clip: content-box;\n}\n\n.pm-hero {\n position: relative;\n padding: 54px 44px 30px;\n background:\n radial-gradient(120% 150% at 15% 0%, #fbd3b4 0%, rgba(251, 211, 180, 0) 58%),\n radial-gradient(120% 160% at 62% 0%, #fde7d6 0%, rgba(253, 231, 214, 0) 62%),\n var(--pm-bg);\n}\n\n:root[data-theme="dark"] .pm-hero,\n.dark .pm-hero,\n[data-theme="dark"] .pm-hero {\n background:\n radial-gradient(120% 150% at 15% 0%, #4a2415 0%, rgba(74, 36, 21, 0) 58%),\n radial-gradient(120% 160% at 62% 0%, #2e160d 0%, rgba(46, 22, 13, 0) 62%),\n var(--pm-bg);\n}\n\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme="light"]) .pm-hero {\n background:\n radial-gradient(120% 150% at 15% 0%, #4a2415 0%, rgba(74, 36, 21, 0) 58%),\n radial-gradient(120% 160% at 62% 0%, #2e160d 0%, rgba(46, 22, 13, 0) 62%),\n var(--pm-bg);\n }\n}\n\n.pm-hero--page { padding: 44px 44px 26px; }\n\n.pm-hero-inner {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 24px;\n max-width: 1180px;\n margin: 0 auto;\n}\n\n.pm-eyebrow {\n margin-bottom: 8px;\n color: var(--pm-ink-3);\n font-size: 13.4px;\n letter-spacing: 0.02em;\n}\n\n.pm-hero h1 {\n margin: 0;\n color: var(--pm-ink);\n font-family: var(--pm-num);\n font-size: 38px;\n font-weight: 700;\n letter-spacing: -0.04em;\n line-height: 1.14;\n}\n\n.pm-hero h1 em {\n color: var(--pm-accent);\n font-style: normal;\n}\n\n.pm-hero p {\n max-width: 680px;\n margin: 9px 0 0;\n color: var(--pm-ink-2);\n font-size: 15.1px;\n line-height: 1.6;\n}\n\n.pm-hero--page h1 { font-size: 34px; letter-spacing: -0.04em; }\n\n.pm-hero-actions {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: 8px;\n padding-bottom: 2px;\n}\n\n.pm-ai-pill {\n display: inline-flex;\n align-items: center;\n gap: 7px;\n height: 32px;\n padding: 0 11px;\n border: 1px solid var(--pm-line);\n border-radius: 999px;\n background: color-mix(in srgb, var(--pm-surface) 72%, transparent);\n color: var(--pm-ink-2);\n font-size: 12.9px;\n backdrop-filter: blur(12px);\n}\n\n\n.pm-content {\n max-width: 1180px;\n margin: 0 auto;\n padding: 0 44px 64px;\n}\n\n.pm-kpis {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 16px;\n}\n\n.pm-card {\n border: 1px solid var(--pm-line);\n border-radius: var(--pm-r-l);\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-1);\n}\n\n.pm-kpi {\n display: flex;\n align-items: stretch;\n justify-content: space-between;\n gap: 10px;\n min-height: 122px;\n padding: 20px 22px;\n}\n\n.pm-kpi-main { min-width: 0; }\n.pm-kpi-label { color: var(--pm-ink-2); font-size: 13.4px; font-weight: 500; white-space: nowrap; }\n.pm-kpi-value {\n margin-top: 5px;\n color: var(--pm-ink);\n font-family: var(--pm-num);\n font-size: 32px;\n font-weight: 650;\n letter-spacing: -0.03em;\n line-height: 1.1;\n font-variant-numeric: tabular-nums;\n}\n.pm-kpi-value small {\n margin-left: 3px;\n color: var(--pm-ink-3);\n font-family: var(--pm-font);\n font-size: 12.3px;\n font-weight: 400;\n letter-spacing: 0;\n}\n.pm-kpi-sub {\n margin-top: 7px;\n color: var(--pm-ink-3);\n font-size: 11.8px;\n line-height: 1.4;\n}\n.pm-kpi-sub b { color: var(--pm-ok); font-weight: 600; }\n.pm-kpi-chart {\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n width: 66px;\n min-width: 52px;\n opacity: 0.95;\n}\n\n.pm-notice {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-top: 18px;\n padding: 15px 18px;\n border: 1px solid var(--pm-line);\n border-radius: 16px;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-1);\n}\n.pm-notice-ic {\n display: grid;\n flex: 0 0 42px;\n width: 42px;\n height: 42px;\n place-items: center;\n border-radius: 13px;\n background: var(--pm-ok-soft);\n color: var(--pm-ok);\n}\n.pm-notice-main { flex: 1; min-width: 0; }\n.pm-notice-title {\n display: flex;\n align-items: center;\n gap: 7px;\n color: var(--pm-ink);\n font-size: 14px;\n font-weight: 600;\n}\n.pm-notice-desc { margin-top: 2px; color: var(--pm-ink-3); font-size: 12.3px; }\n.pm-notice-actions { display: flex; align-items: center; gap: 8px; }\n\n.pm-tabbar {\n display: inline-flex;\n gap: 2px;\n margin-top: 22px;\n padding: 4px;\n border: 1px solid var(--pm-line);\n border-radius: 14px;\n background: var(--pm-surface-2);\n}\n\n.pm-tab {\n display: inline-flex;\n align-items: center;\n gap: 7px;\n height: 36px;\n padding: 0 17px;\n border: 0;\n border-radius: 10px;\n background: transparent;\n color: var(--pm-ink-2);\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.pm-tab:hover { color: var(--pm-ink); }\n.pm-tab.is-on {\n background: var(--pm-surface);\n color: var(--pm-ink);\n box-shadow: var(--pm-shadow-1);\n}\n.pm-tab .pm-badge { height: 18px; padding: 0 6px; font-size: 11.2px; }\n\n.pm-section-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin: 26px 0 14px;\n}\n.pm-section-title { color: var(--pm-ink); font-size: 16.5px; font-weight: 620; letter-spacing: -0.015em; }\n.pm-section-sub { margin-top: 2px; color: var(--pm-ink-3); font-size: 12.9px; }\n.pm-section-actions { display: flex; align-items: center; gap: 8px; }\n\n.pm-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n height: 38px;\n padding: 0 15px;\n border: 0;\n border-radius: 12px;\n font-family: inherit;\n font-size: 14px;\n font-weight: 550;\n line-height: 1;\n white-space: nowrap;\n cursor: pointer;\n transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.pm-btn:active { transform: translateY(0.5px); }\n.pm-btn:disabled { cursor: default; opacity: 0.5; }\n.pm-btn svg { flex: 0 0 auto; }\n.pm-btn--primary { background: var(--pm-accent); color: var(--pm-accent-ink); }\n.pm-btn--primary:hover { background: var(--pm-accent-2); }\n.pm-btn--secondary {\n background: var(--pm-surface-2);\n color: var(--pm-ink);\n box-shadow: inset 0 0 0 0.5px var(--pm-line);\n}\n.pm-btn--secondary:hover { background: var(--pm-surface-3); }\n.pm-btn--ghost { background: transparent; color: var(--pm-ink-2); }\n.pm-btn--ghost:hover { background: var(--pm-surface-2); color: var(--pm-ink); }\n.pm-btn--soft { background: var(--pm-accent-soft); color: var(--pm-accent-text); }\n.pm-btn--soft:hover { background: color-mix(in srgb, var(--pm-accent-soft) 75%, var(--pm-accent) 10%); }\n.pm-btn--danger { background: var(--pm-danger-soft); color: var(--pm-danger); }\n.pm-btn--sm { height: 32px; padding: 0 11px; border-radius: 9px; font-size: 13px; }\n.pm-btn--lg { height: 46px; padding: 0 20px; border-radius: 13px; font-size: 15px; }\n.pm-btn--block { width: 100%; }\n\n.pm-iconbtn {\n display: inline-grid;\n flex: 0 0 auto;\n width: 32px;\n height: 32px;\n place-items: center;\n border: 0;\n border-radius: 9px;\n background: transparent;\n color: var(--pm-ink-3);\n cursor: pointer;\n transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.pm-iconbtn:hover { background: var(--pm-surface-2); color: var(--pm-ink); }\n.pm-iconbtn--danger:hover { background: var(--pm-danger-soft); color: var(--pm-danger); }\n\n.pm-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n height: 22px;\n padding: 0 7px;\n border-radius: 999px;\n font-size: 11.8px;\n font-weight: 550;\n line-height: 1;\n white-space: nowrap;\n}\n.pm-badge--neutral { background: var(--pm-surface-2); color: var(--pm-ink-2); }\n.pm-badge--orange { background: var(--pm-accent-soft); color: var(--pm-accent-text); }\n.pm-badge--green { background: var(--pm-ok-soft); color: var(--pm-ok); }\n.pm-badge--violet { background: var(--pm-violet-soft); color: var(--pm-violet); }\n.pm-badge--red { background: var(--pm-danger-soft); color: var(--pm-danger); }\n.pm-badge--blue { background: var(--pm-blue-soft); color: var(--pm-blue); }\n.pm-badge--dark { background: var(--pm-ink); color: var(--pm-surface); }\n.pm-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }\n\n.pm-topic-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 14px;\n}\n.pm-topic {\n display: flex;\n flex-direction: column;\n min-height: 194px;\n padding: 18px 20px 16px;\n border: 1px solid var(--pm-line);\n border-radius: 18px;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-1);\n transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.pm-topic:hover {\n transform: translateY(-1px);\n border-color: var(--pm-line-2);\n box-shadow: var(--pm-shadow-1);\n}\n.pm-topic-top { display: flex; align-items: center; gap: 8px; }\n.pm-topic-index {\n display: grid;\n flex: 0 0 25px;\n width: 25px;\n height: 25px;\n place-items: center;\n border-radius: 8px;\n background: var(--pm-accent-soft);\n color: var(--pm-accent-text);\n font-family: var(--pm-num);\n font-size: 11.8px;\n font-weight: 650;\n}\n.pm-topic-top .pm-badge { height: 20px; font-size: 11.2px; }\n.pm-topic-top .pm-iconbtn { margin-left: auto; width: 26px; height: 26px; }\n.pm-topic h3 {\n margin: 12px 0 7px;\n color: var(--pm-ink);\n font-size: 16px;\n font-weight: 600;\n letter-spacing: -0.01em;\n line-height: 1.45;\n}\n.pm-topic-reason {\n flex: 1;\n margin: 0;\n color: var(--pm-ink-2);\n font-size: 12.9px;\n line-height: 1.6;\n}\n.pm-topic-source {\n display: flex;\n align-items: center;\n gap: 5px;\n margin: 10px 0 0;\n color: var(--pm-ink-3);\n font-size: 11.8px;\n line-height: 1.4;\n}\n.pm-topic-actions { display: flex; gap: 6px; margin-top: 11px; }\n.pm-topic-actions .pm-btn { flex: 1; }\n\n.pm-form-card { padding: 24px; }\n.pm-form-head { margin-bottom: 16px; }\n.pm-form-head h2 { margin: 0; font-size: 19px; font-weight: 620; letter-spacing: -0.02em; }\n.pm-form-head p { margin: 4px 0 0; color: var(--pm-ink-3); font-size: 12.9px; }\n.pm-form-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }\n.pm-form-col { flex: 1; min-width: 180px; }\n.pm-form-actions { display: flex; align-items: center; gap: 8px; }\n.pm-label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n margin-bottom: 6px;\n color: var(--pm-ink-2);\n font-size: 12.9px;\n font-weight: 550;\n}\n.pm-label span { color: var(--pm-ink-3); font-weight: 400; }\n.pm-input,\n.pm-textarea,\n.pm-select {\n width: 100%;\n border: 1px solid transparent;\n border-radius: 11px;\n background: var(--pm-surface-2);\n color: var(--pm-ink);\n font-family: inherit;\n font-size: 14px;\n outline: none;\n transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.pm-input { height: 42px; padding: 0 13px; }\n.pm-textarea { min-height: 92px; padding: 10px 12px; line-height: 1.65; resize: vertical; }\n.pm-select { height: 42px; padding: 0 32px 0 12px; appearance: none; cursor: pointer; }\n.pm-input::placeholder,\n.pm-textarea::placeholder { color: var(--pm-ink-3); }\n.pm-input:focus,\n.pm-textarea:focus,\n.pm-select:focus {\n border-color: var(--pm-accent);\n background: var(--pm-surface);\n box-shadow: 0 0 0 3px var(--pm-accent-soft);\n}\n.pm-select-wrap { position: relative; }\n.pm-select-wrap::after {\n position: absolute;\n top: 50%;\n right: 11px;\n width: 6px;\n height: 6px;\n border-right: 1.5px solid var(--pm-ink-3);\n border-bottom: 1.5px solid var(--pm-ink-3);\n content: "";\n pointer-events: none;\n transform: translateY(-65%) rotate(45deg);\n}\n\n.pm-seg {\n display: inline-flex;\n gap: 2px;\n padding: 3px;\n border-radius: 10px;\n background: var(--pm-surface-2);\n}\n.pm-seg-btn {\n height: 30px;\n padding: 0 11px;\n border: 0;\n border-radius: 8px;\n background: transparent;\n color: var(--pm-ink-2);\n font-family: inherit;\n font-size: 12.9px;\n font-weight: 500;\n cursor: pointer;\n}\n.pm-seg-btn.is-on {\n background: var(--pm-surface);\n color: var(--pm-ink);\n box-shadow: var(--pm-shadow-1);\n}\n\n.pm-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.pm-chip {\n height: 26px;\n padding: 0 9px;\n border: 1px solid var(--pm-line);\n border-radius: 999px;\n background: var(--pm-surface);\n color: var(--pm-ink-2);\n font-family: inherit;\n font-size: 11.8px;\n cursor: pointer;\n}\n.pm-chip:hover { border-color: var(--pm-line-2); color: var(--pm-ink); }\n\n.pm-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }\n.pm-filters .pm-select-wrap { min-width: 112px; }\n\n.pm-progress-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }\n.pm-progress-main { flex: 1; min-width: 0; }\n.pm-progress-title { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }\n.pm-progress-desc { margin-top: 3px; color: var(--pm-ink-3); font-size: 12.3px; }\n.pm-progress-track {\n height: 6px;\n margin-top: 9px;\n overflow: hidden;\n border-radius: 999px;\n background: var(--pm-surface-2);\n}\n.pm-progress-fill {\n height: 100%;\n border-radius: inherit;\n background: var(--pm-accent);\n transition: width 0.3s ease;\n}\n\n.pm-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 230px;\n padding: 34px 20px;\n border: 1px dashed var(--pm-line-2);\n border-radius: 18px;\n background: color-mix(in srgb, var(--pm-surface) 65%, transparent);\n text-align: center;\n}\n.pm-empty-ic {\n display: grid;\n width: 46px;\n height: 46px;\n margin-bottom: 12px;\n place-items: center;\n border-radius: 50%;\n background: var(--pm-surface-2);\n color: var(--pm-ink-3);\n}\n.pm-empty h3 { margin: 0; font-size: 16px; font-weight: 600; }\n.pm-empty p { max-width: 360px; margin: 5px 0 0; color: var(--pm-ink-3); font-size: 12.9px; line-height: 1.6; }\n.pm-empty .pm-btn { margin-top: 14px; }\n\n.pm-report { padding: 20px; }\n.pm-report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }\n.pm-report-head h3 { margin: 0; font-size: 15px; font-weight: 620; }\n.pm-report-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px; }\n.pm-report-block { padding: 14px; border-radius: 13px; background: var(--pm-surface-2); }\n.pm-report-block h4 { margin: 0 0 7px; color: var(--pm-ink-2); font-size: 12.3px; font-weight: 600; letter-spacing: 0.02em; }\n.pm-report-block p,\n.pm-report-block li { color: var(--pm-ink-2); font-size: 12.9px; line-height: 1.65; }\n.pm-report-block p { margin: 0; }\n.pm-report-block ul { margin: 0; padding-left: 16px; }\n.pm-report-block li + li { margin-top: 4px; }\n\n.pm-peer-account { display: flex; align-items: center; gap: 12px; }\n.pm-avatar {\n display: grid;\n flex: 0 0 auto;\n width: 42px;\n height: 42px;\n place-items: center;\n border-radius: 50%;\n background: linear-gradient(140deg, #f7a35c, #f37021 65%, #c4500a);\n color: #fff7ef;\n font-size: 14.6px;\n font-weight: 650;\n box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);\n}\n.pm-avatar--sm { width: 34px; height: 34px; font-size: 12.3px; }\n.pm-avatar--soft { background: var(--pm-accent-soft); color: var(--pm-accent-text); box-shadow: none; }\n.pm-account-name { font-size: 14.6px; font-weight: 600; }\n.pm-account-meta { margin-top: 2px; color: var(--pm-ink-3); font-size: 11.8px; }\n\n.pm-peer-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }\n.pm-peer-row {\n display: flex;\n align-items: center;\n gap: 11px;\n padding: 10px 11px;\n border-radius: 13px;\n background: var(--pm-surface-2);\n}\n.pm-peer-rank {\n display: grid;\n flex: 0 0 24px;\n width: 24px;\n height: 24px;\n place-items: center;\n border-radius: 7px;\n background: var(--pm-surface);\n color: var(--pm-accent-text);\n font-family: var(--pm-num);\n font-size: 11.2px;\n font-weight: 700;\n}\n.pm-peer-cover {\n position: relative;\n display: flex;\n flex: 0 0 44px;\n align-items: flex-end;\n width: 44px;\n height: 44px;\n padding: 5px;\n overflow: hidden;\n border-radius: 9px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-size: 9px;\n line-height: 1.2;\n}\n.pm-peer-cover span { position: relative; z-index: 1; }\n.pm-peer-body { flex: 1; min-width: 0; }\n.pm-peer-title {\n overflow: hidden;\n color: var(--pm-ink);\n font-size: 13.4px;\n font-weight: 550;\n line-height: 1.4;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pm-peer-meta { display: flex; gap: 8px; margin-top: 3px; color: var(--pm-ink-3); font-size: 11.2px; }\n.pm-peer-score {\n flex: 0 0 auto;\n color: var(--pm-accent-text);\n font-family: var(--pm-num);\n font-size: 13.4px;\n font-weight: 650;\n}\n.pm-peer-score small { color: var(--pm-ink-3); font-family: var(--pm-font); font-size: 10.1px; font-weight: 400; }\n\n.pm-search-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.95fr); gap: 14px; align-items: start; }\n.pm-post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }\n.pm-post {\n display: flex;\n gap: 10px;\n padding: 10px;\n border: 1px solid var(--pm-line);\n border-radius: 14px;\n background: var(--pm-surface);\n}\n.pm-post-cover {\n position: relative;\n display: flex;\n flex: 0 0 54px;\n align-items: flex-end;\n width: 54px;\n height: 68px;\n padding: 6px;\n overflow: hidden;\n border-radius: 10px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-size: 9px;\n line-height: 1.25;\n}\n.pm-post-cover.is-violet { background: linear-gradient(150deg, #c0a8ff, #7754e8); }\n.pm-post-cover.is-blue { background: linear-gradient(150deg, #9ebdff, #4c7ee8); }\n.pm-post-cover.is-green { background: linear-gradient(150deg, #c4b5fd, #7c5cff); }\n.pm-post-cover.is-sand { background: linear-gradient(150deg, #e8d1b0, #b58a55); }\n.pm-post-cover span { position: relative; z-index: 1; }\n.pm-post-body { flex: 1; min-width: 0; }\n.pm-post-title {\n display: -webkit-box;\n overflow: hidden;\n color: var(--pm-ink);\n font-size: 12.9px;\n font-weight: 550;\n line-height: 1.45;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n}\n.pm-post-meta { margin-top: 4px; color: var(--pm-ink-3); font-size: 10.6px; }\n.pm-post-stats { display: flex; gap: 7px; margin-top: 5px; color: var(--pm-ink-2); font-size: 10.6px; }\n.pm-post-stats b { color: var(--pm-ink); font-weight: 600; }\n\n.pm-review-layout { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 16px; align-items: start; }\n.pm-detail { padding: 28px; }\n.pm-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }\n.pm-detail h2 { margin: 8px 0 4px; font-size: 23px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.3; }\n.pm-detail-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--pm-ink-3); font-size: 11.8px; }\n.pm-detail-body { margin-top: 20px; }\n.pm-detail-section { margin-top: 18px; }\n.pm-detail-section h3 { margin: 0 0 7px; color: var(--pm-ink); font-size: 14.6px; font-weight: 600; }\n.pm-detail-section p,\n.pm-detail-section li { margin: 0; color: var(--pm-ink-2); font-size: 14px; line-height: 1.75; }\n.pm-detail-section ul { margin: 0; padding-left: 17px; }\n.pm-detail-section li + li { margin-top: 4px; }\n.pm-detail-foot { display: flex; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--pm-line); }\n\n.pm-chat {\n position: sticky;\n top: 16px;\n display: flex;\n flex-direction: column;\n height: 600px;\n overflow: hidden;\n}\n.pm-chat-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--pm-line); }\n.pm-chat-head-title { flex: 1; font-size: 13.4px; font-weight: 600; }\n.pm-chat-body {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: 15px;\n padding: 16px;\n overflow: auto;\n scroll-behavior: smooth;\n}\n.pm-msg {\n max-width: 92%;\n margin: 0;\n padding: 12px 14px;\n border-radius: 14px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-size: 14px;\n line-height: 1.78;\n letter-spacing: -0.005em;\n}\n.pm-msg.is-ai {\n align-self: flex-start;\n border-bottom-left-radius: 5px;\n animation: pm-msg-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n.pm-msg.is-user {\n align-self: flex-end;\n margin-left: auto;\n border-bottom-right-radius: 5px;\n background: var(--pm-accent);\n color: var(--pm-accent-ink);\n font-size: 14px;\n line-height: 1.65;\n}\n.pm-msg.is-thinking {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n width: fit-content;\n color: var(--pm-ink-3);\n}\n.pm-thinking-dots { display: inline-flex; align-items: center; gap: 3px; }\n.pm-thinking-dots i {\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: var(--pm-accent);\n animation: pm-thinking 1.1s ease-in-out infinite;\n}\n.pm-thinking-dots i:nth-child(2) { animation-delay: 0.14s; }\n.pm-thinking-dots i:nth-child(3) { animation-delay: 0.28s; }\n.pm-msg-suggestions { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }\n.pm-suggestion {\n padding: 8px 10px;\n border: 1px solid var(--pm-line);\n border-radius: 9px;\n background: var(--pm-surface);\n color: var(--pm-ink-2);\n font-family: inherit;\n font-size: 12.2px;\n line-height: 1.4;\n text-align: left;\n cursor: pointer;\n transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;\n}\n.pm-suggestion:hover { border-color: var(--pm-accent); color: var(--pm-ink); background: var(--pm-surface-2); }\n.pm-chat-input { display: flex; gap: 7px; padding: 11px; border-top: 1px solid var(--pm-line); }\n.pm-chat-input .pm-input { flex: 1; min-width: 0; height: 38px; font-size: 13.5px; }\n@keyframes pm-msg-in {\n from { opacity: 0; transform: translateY(7px); filter: blur(2px); }\n to { opacity: 1; transform: translateY(0); filter: blur(0); }\n}\n@keyframes pm-thinking {\n 0%, 100% { opacity: 0.35; transform: translateY(0); }\n 50% { opacity: 1; transform: translateY(-2px); }\n}\n\n.pm-settings-wrap { max-width: 960px; margin: 0 auto; }\n.pm-settings-stack { display: flex; flex-direction: column; gap: 16px; }\n.pm-settings-card { padding: 24px; }\n.pm-settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }\n.pm-settings-head h2 { margin: 0; font-size: 18px; font-weight: 620; letter-spacing: -0.025em; }\n.pm-settings-head p { margin: 5px 0 0; color: var(--pm-ink-3); font-size: 13px; line-height: 1.55; }\n.pm-settings-head .pm-badge { flex: 0 0 auto; }\n\n.pm-member-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }\n.pm-member-expiry { color: var(--pm-ink-2); font-size: 13.5px; }\n.pm-member-expiry b { color: var(--pm-ink); font-weight: 600; }\n.pm-device-row {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 10px;\n padding: 9px 11px;\n border-radius: 10px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-size: 12.3px;\n}\n.pm-device-row .pm-badge { margin-left: auto; }\n.pm-code-box { margin-top: 14px; }\n.pm-code-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }\n.pm-code-actions .pm-btn--primary { margin-left: auto; }\n\n.pm-qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }\n.pm-qcard {\n padding: 18px;\n border: 1px solid var(--pm-line);\n border-radius: 15px;\n background: var(--pm-surface);\n}\n.pm-qhead { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 5px; }\n.pm-qno {\n display: grid;\n flex: 0 0 20px;\n width: 20px;\n height: 20px;\n place-items: center;\n border-radius: 6px;\n background: var(--pm-accent-soft);\n color: var(--pm-accent-text);\n font-family: var(--pm-num);\n font-size: 10.6px;\n font-weight: 650;\n}\n.pm-qtitle { color: var(--pm-ink); font-size: 14px; font-weight: 600; line-height: 1.45; }\n.pm-qhint { margin: 0 0 9px 28px; color: var(--pm-ink-3); font-size: 12px; line-height: 1.55; }\n.pm-qcard .pm-textarea { min-height: 96px; font-size: 14px; }\n.pm-qfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; color: var(--pm-ink-3); font-size: 10.5px; }\n.pm-qfoot .is-saved { color: var(--pm-ok); }\n.pm-profile-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }\n.pm-profile-actions .pm-btn--primary { margin-left: auto; }\n\n.pm-platform-row {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 0;\n border-bottom: 1px solid var(--pm-line);\n}\n.pm-platform-row:last-child { border-bottom: 0; }\n.pm-platform-ic {\n display: grid;\n flex: 0 0 32px;\n width: 32px;\n height: 32px;\n place-items: center;\n border-radius: 9px;\n background: var(--pm-surface-2);\n color: var(--pm-ink);\n font-size: 13.4px;\n font-weight: 700;\n}\n.pm-platform-main { flex: 1; min-width: 0; }\n.pm-platform-name { font-size: 13.5px; font-weight: 600; }\n.pm-platform-sub { margin-top: 3px; color: var(--pm-ink-3); font-size: 11.5px; }\n.pm-platform-row .pm-btn { margin-left: 4px; }\n\n.pm-model-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }\n.pm-model-name { font-size: 14px; font-weight: 600; }\n.pm-model-sub { margin-top: 3px; color: var(--pm-ink-3); font-size: 11.8px; line-height: 1.5; }\n.pm-switch {\n position: relative;\n flex: 0 0 auto;\n width: 38px;\n height: 22px;\n padding: 0;\n border: 0;\n border-radius: 999px;\n background: var(--pm-surface-3);\n cursor: pointer;\n transition: background 0.16s ease;\n}\n.pm-switch::after {\n position: absolute;\n top: 3px;\n left: 3px;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #fff;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);\n content: "";\n transition: transform 0.16s ease;\n}\n.pm-switch.is-on { background: var(--pm-accent); }\n.pm-switch.is-on::after { transform: translateX(16px); }\n.pm-model-form { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }\n.pm-model-form .pm-form-col:last-child { grid-column: 1 / -1; }\n\n.pm-data-path {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 11px 13px;\n border-radius: 10px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-family: "SF Mono", Menlo, Consolas, monospace;\n font-size: 12px;\n word-break: break-all;\n}\n.pm-data-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }\n.pm-data-actions .pm-btn:last-child { margin-left: auto; }\n\n.pm-account-card { padding: 18px; }\n.pm-account-card.is-empty { border-style: dashed; box-shadow: none; background: color-mix(in srgb, var(--pm-surface) 65%, transparent); }\n.pm-account-form { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 12px; }\n.pm-account-form .pm-form-col { flex: 1; min-width: 190px; }\n\n.pm-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }\n.pm-plan-card { padding: 20px; }\n.pm-plan-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }\n.pm-plan-no {\n display: grid;\n width: 24px;\n height: 24px;\n place-items: center;\n border-radius: 7px;\n background: var(--pm-accent-soft);\n color: var(--pm-accent-text);\n font-family: var(--pm-num);\n font-size: 11.2px;\n font-weight: 650;\n}\n.pm-plan-card h3 { margin: 0; font-size: 16px; font-weight: 620; letter-spacing: -0.015em; }\n.pm-plan-lead { margin: 0 0 10px; color: var(--pm-ink-3); font-size: 12.3px; line-height: 1.6; }\n.pm-plan-card ul { margin: 0; padding-left: 16px; }\n.pm-plan-card li { color: var(--pm-ink-2); font-size: 12.9px; line-height: 1.7; }\n.pm-plan-card li + li { margin-top: 5px; }\n\n.pm-sheet-overlay,\n.pm-modal-overlay {\n position: fixed;\n inset: 0;\n z-index: 70;\n background: rgba(0, 0, 0, 0.28);\n backdrop-filter: blur(5px);\n animation: pm-fade 0.18s ease both;\n}\n.pm-sheet-overlay { display: flex; justify-content: flex-end; }\n.pm-sheet {\n display: flex;\n flex-direction: column;\n width: 760px;\n max-width: calc(100vw - 20px);\n height: 100%;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-2);\n animation: pm-slide 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) both;\n}\n.pm-sheet-head {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 20px 22px 16px;\n border-bottom: 1px solid var(--pm-line);\n}\n.pm-sheet-head-main { flex: 1; min-width: 0; }\n.pm-sheet-head h2 { margin: 7px 0 0; font-size: 21px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.35; }\n.pm-sheet-body { flex: 1; padding: 20px 22px 28px; overflow: auto; }\n.pm-sheet-foot {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 13px 22px;\n border-top: 1px solid var(--pm-line);\n background: var(--pm-surface);\n}\n.pm-sheet-foot .pm-btn--primary { margin-left: auto; }\n.pm-script-section { margin-bottom: 20px; }\n.pm-script-section:last-child { margin-bottom: 0; }\n.pm-script-label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n margin-bottom: 6px;\n color: var(--pm-ink-3);\n font-size: 11.8px;\n font-weight: 600;\n letter-spacing: 0.02em;\n}\n.pm-script-text { color: var(--pm-ink); font-size: 14.6px; line-height: 1.8; white-space: pre-wrap; }\n.pm-script-title { color: var(--pm-ink); font-family: var(--pm-num); font-size: 20px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.35; }\n.pm-image-list { display: flex; flex-direction: column; gap: 7px; }\n.pm-image-item {\n display: flex;\n gap: 9px;\n padding: 9px 10px;\n border-radius: 10px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-size: 12.9px;\n line-height: 1.6;\n}\n.pm-image-no {\n flex: 0 0 20px;\n color: var(--pm-accent-text);\n font-family: var(--pm-num);\n font-size: 11.2px;\n font-weight: 650;\n}\n.pm-shot-table { width: 100%; border-collapse: collapse; font-size: 12.3px; }\n.pm-shot-table th {\n padding: 7px 6px;\n border-bottom: 1px solid var(--pm-line-2);\n color: var(--pm-ink-3);\n font-weight: 500;\n text-align: left;\n}\n.pm-shot-table td { padding: 8px 6px; border-bottom: 1px solid var(--pm-line); color: var(--pm-ink-2); line-height: 1.55; vertical-align: top; }\n.pm-shot-table td:first-child { color: var(--pm-accent-text); font-family: var(--pm-num); font-weight: 650; }\n.pm-tags { display: flex; gap: 5px; flex-wrap: wrap; }\n.pm-tag {\n padding: 4px 8px;\n border-radius: 7px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-size: 11.8px;\n}\n.pm-skeleton {\n margin-bottom: 9px;\n border-radius: 8px;\n background: var(--pm-surface-2);\n animation: pm-skeleton-pulse 1.4s ease-in-out infinite;\n}\n\n.pm-modal-overlay { display: grid; place-items: center; padding: 20px; }\n.pm-modal {\n width: 420px;\n max-width: 100%;\n padding: 22px;\n border: 1px solid var(--pm-line);\n border-radius: 24px;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-2);\n animation: pm-pop 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) both;\n}\n.pm-modal h3 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }\n.pm-modal p { margin: 8px 0 0; color: var(--pm-ink-2); font-size: 13.4px; line-height: 1.65; }\n.pm-modal-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }\n\n.pm-toast-wrap {\n position: fixed;\n bottom: 24px;\n left: 50%;\n z-index: 90;\n display: flex;\n flex-direction: column;\n gap: 8px;\n width: min(410px, calc(100vw - 32px));\n pointer-events: none;\n transform: translateX(-50%);\n}\n.pm-toast {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 11px 12px;\n border: 1px solid var(--pm-line-2);\n border-radius: 16px;\n background: color-mix(in srgb, var(--pm-surface) 94%, transparent);\n box-shadow: var(--pm-shadow-2);\n backdrop-filter: blur(18px);\n animation: pm-toast 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both;\n pointer-events: auto;\n}\n.pm-toast-ic {\n display: grid;\n flex: 0 0 30px;\n width: 32px;\n height: 32px;\n place-items: center;\n border-radius: 50%;\n background: var(--pm-ok-soft);\n color: var(--pm-ok);\n}\n.pm-toast--loading .pm-toast-ic { background: var(--pm-accent-soft); color: var(--pm-accent-text); }\n.pm-toast--error .pm-toast-ic { background: var(--pm-danger-soft); color: var(--pm-danger); }\n.pm-toast--info .pm-toast-ic { background: var(--pm-violet-soft); color: var(--pm-violet); }\n.pm-toast-main { flex: 1; min-width: 0; }\n.pm-toast-title { color: var(--pm-ink); font-size: 13.4px; font-weight: 600; line-height: 1.4; }\n.pm-toast-desc { margin-top: 2px; color: var(--pm-ink-3); font-size: 11.8px; line-height: 1.45; }\n.pm-toast .pm-iconbtn { width: 24px; height: 24px; }\n\n@keyframes pm-fade { from { opacity: 0; } to { opacity: 1; } }\n@keyframes pm-slide { from { transform: translateX(40px); opacity: 0.7; } to { transform: translateX(0); opacity: 1; } }\n@keyframes pm-pop { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n@keyframes pm-toast { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }\n@keyframes pm-skeleton-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }\n\n@media (prefers-reduced-motion: reduce) {\n .pm-root *,\n .pm-root *::before,\n .pm-root *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n@media (max-width: 1180px) {\n .pm-sidebar { flex-basis: 212px; width: 212px; }\n .pm-hero { padding: 28px 28px 22px; }\n .pm-hero--page { padding: 24px 28px 20px; }\n .pm-content { padding: 0 28px 44px; }\n .pm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .pm-topic-grid { grid-template-columns: 1fr; }\n .pm-search-layout { grid-template-columns: 1fr; }\n .pm-review-layout { grid-template-columns: 1fr; }\n .pm-chat { position: static; height: 420px; }\n .pm-plan-grid { grid-template-columns: 1fr; }\n}\n\n@media (max-width: 900px) {\n .pm-sidebar { flex-basis: 76px; width: 76px; padding: 16px 10px 12px; }\n .pm-brand { justify-content: center; padding: 0 0 18px; }\n .pm-brand-text,\n .pm-nav-label,\n .pm-nav-count,\n .pm-side-card,\n .pm-ai-card,\n .pm-version { display: none; }\n .pm-nav { gap: 6px; }\n .pm-nav-btn { justify-content: center; height: 42px; padding: 0; }\n .pm-nav-icon { flex-basis: auto; }\n .pm-hero-inner { align-items: flex-start; }\n .pm-hero h1 { font-size: 27px; }\n .pm-hero--page h1 { font-size: 23px; }\n .pm-hero p { font-size: 13.4px; }\n .pm-hero-actions { display: none; }\n .pm-qgrid { grid-template-columns: 1fr; }\n .pm-model-form { grid-template-columns: 1fr; }\n .pm-model-form .pm-form-col:last-child { grid-column: auto; }\n .pm-post-grid { grid-template-columns: 1fr; }\n}\n\n@media (max-width: 640px) {\n .pm-hero { padding: 22px 18px 18px; }\n .pm-hero--page { padding: 20px 18px 16px; }\n .pm-content { padding: 0 18px 36px; }\n .pm-kpis { grid-template-columns: 1fr; }\n .pm-kpi { min-height: 92px; }\n .pm-notice { align-items: flex-start; }\n .pm-notice-actions { flex-direction: column; align-items: flex-end; }\n .pm-tabbar { width: 100%; }\n .pm-tab { flex: 1; justify-content: center; padding: 0 6px; }\n .pm-section-head { align-items: flex-start; }\n .pm-sheet { max-width: 100vw; width: 100vw; }\n .pm-sheet-head, .pm-sheet-body, .pm-sheet-foot { padding-left: 16px; padding-right: 16px; }\n .pm-toast-wrap { bottom: 16px; }\n .pm-report-grid { grid-template-columns: 1fr; }\n}\n\n/* Review list rows */\n.pm-list {\n overflow: hidden;\n}\n.pm-row {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n border-bottom: 1px solid var(--pm-line);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n.pm-row:last-child {\n border-bottom: 0;\n}\n.pm-row:hover {\n background: var(--pm-surface-2);\n}\n.pm-row-icon {\n display: grid;\n flex: 0 0 38px;\n width: 38px;\n height: 38px;\n place-items: center;\n border-radius: 11px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n}\n.pm-row-main {\n flex: 1;\n min-width: 0;\n}\n.pm-row-main .pm-detail-meta {\n overflow: hidden;\n}\n.pm-row-main .pm-detail-meta span:first-child {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Host boot and connection notice */\n.pm-boot {\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 100%;\n padding: 40px;\n background: var(--pm-bg);\n text-align: center;\n}\n.pm-boot h2 {\n margin: 10px 0 0;\n color: var(--pm-ink);\n font-size: 18px;\n font-weight: 620;\n letter-spacing: -0.02em;\n}\n.pm-boot p {\n margin: 0;\n color: var(--pm-ink-3);\n font-size: 12.9px;\n}\n.pm-host-error {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 9px 18px;\n border-bottom: 1px solid var(--pm-line);\n background: var(--pm-danger-soft);\n color: var(--pm-danger);\n font-size: 12.3px;\n}\n.pm-host-error span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Transitions: page, tab, toast exit */\n.pm-main {\n scroll-behavior: smooth;\n}\n.pm-page {\n min-height: 100%;\n animation: pm-page-in 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both;\n}\n.pm-tabpanel {\n animation: pm-tab-in 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both;\n}\n.pm-toast.is-leaving {\n animation: pm-toast-out 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) both;\n pointer-events: none;\n}\n.pm-settings-card,\n.pm-topic,\n.pm-kpi {\n transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.pm-settings-card:hover {\n border-color: var(--pm-line-2);\n}\n@keyframes pm-page-in {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n@keyframes pm-tab-in {\n from { opacity: 0; transform: translateY(6px); }\n to { opacity: 1; transform: translateY(0); }\n}\n@keyframes pm-toast-out {\n from { opacity: 1; transform: translateY(0) scale(1); }\n to { opacity: 0; transform: translateY(8px) scale(0.98); }\n}\n\n/* Phosphor icon wrapper: SVG assets keep currentColor */\n.pm-icon {\n display: inline-grid;\n flex: 0 0 auto;\n place-items: center;\n line-height: 0;\n color: currentColor;\n}\n.pm-icon svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* Orange is the primary accent; purple and red are status accents. */\n.pm-badge--gold {\n background: var(--pm-gold-soft);\n color: var(--pm-gold-text);\n}\n.pm-btn--gold {\n background: var(--pm-gold);\n color: var(--pm-accent-ink);\n}\n.pm-btn--gold:hover {\n background: var(--pm-accent-2);\n}\n.pm-empty-ic--gold {\n background: var(--pm-gold-soft);\n color: var(--pm-gold-text);\n}\n\n/* Secondary colors: red is for counts/urgent, blue/violet for content type. */\n.pm-root {\n --pm-warn: #b45309;\n --pm-warn-soft: rgba(245, 158, 11, 0.14);\n}\n:root[data-theme="dark"] .pm-root,\n.dark .pm-root,\n[data-theme="dark"] .pm-root {\n --pm-warn: #ffb020;\n --pm-warn-soft: rgba(255, 176, 32, 0.16);\n}\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme="light"]) .pm-root {\n --pm-warn: #ffb020;\n --pm-warn-soft: rgba(255, 176, 32, 0.16);\n }\n}\n\n.pm-nav-btn.is-on .pm-nav-icon {\n color: var(--pm-ink);\n}\n\n.pm-nav-count {\n background: #e0352b;\n color: #ffffff;\n}\n.pm-nav-count--muted {\n background: var(--pm-surface-3);\n color: var(--pm-ink-2);\n}\n\n.pm-badge--amber {\n background: var(--pm-warn-soft);\n color: var(--pm-warn);\n}\n\n/* Apple-style interaction and type polish */\n.pm-hero h1,\n.pm-hero--page h1,\n.pm-detail h2,\n.pm-sheet-head h2,\n.pm-brand-name {\n font-weight: 600;\n letter-spacing: -0.03em;\n}\n\n.pm-btn,\n.pm-topic,\n.pm-row,\n.pm-chip,\n.pm-tab,\n.pm-nav-btn,\n.pm-iconbtn,\n.pm-seg-btn {\n -webkit-tap-highlight-color: transparent;\n}\n.pm-btn:active,\n.pm-topic:active,\n.pm-row:active,\n.pm-chip:active,\n.pm-tab:active,\n.pm-nav-btn:active,\n.pm-iconbtn:active,\n.pm-seg-btn:active {\n transform: scale(0.98);\n}\n\n.pm-topic-index,\n.pm-peer-cover,\n.pm-post-cover {\n transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);\n}\n.pm-topic:hover .pm-topic-index,\n.pm-peer-row:hover .pm-peer-cover,\n.pm-post:hover .pm-post-cover {\n transform: scale(1.06);\n}\n\n.pm-root a {\n color: var(--pm-accent);\n text-decoration: none;\n}\n.pm-root a:hover {\n text-decoration: underline;\n}\n\n.pm-toast {\n backdrop-filter: blur(12px);\n}\n\n/* Original Pomelo motion and reference-style sidebar states */\n.pm-logo-fruit {\n transform-box: fill-box;\n transform-origin: 50% 92%;\n animation: pm-fruit-bounce 1.9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;\n}\n\n@keyframes pm-fruit-bounce {\n 0%, 100% { transform: translateY(0) scale(1, 1); }\n 14% { transform: translateY(1px) scale(1.025, 0.975); }\n 34% { transform: translateY(-3px) scale(0.99, 1.01); }\n 52% { transform: translateY(0) scale(1.02, 0.98); }\n 68% { transform: translateY(-1px) scale(1, 1); }\n 82% { transform: translateY(0) scale(1.01, 0.99); }\n}\n\n.pm-brand-mark {\n filter: drop-shadow(0 3px 8px rgba(140, 190, 45, 0.16));\n}\n\n.pm-nav-btn.is-on {\n background: #ffffff;\n color: var(--pm-ink);\n box-shadow: 0 0 0 0.5px var(--pm-line), 0 4px 14px -8px rgba(0, 0, 0, 0.16);\n}\n\n:root[data-theme="dark"] .pm-nav-btn.is-on,\n.dark .pm-nav-btn.is-on,\n[data-theme="dark"] .pm-nav-btn.is-on {\n background: var(--pm-surface-2);\n box-shadow: inset 0 0 0 0.5px var(--pm-line);\n}\n\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme="light"]) .pm-nav-btn.is-on {\n background: var(--pm-surface-2);\n box-shadow: inset 0 0 0 0.5px var(--pm-line);\n }\n}\n\n/* Sidebar AI card, adapted from the reference layout */\n.pm-ai-card {\n margin-top: auto;\n padding: 14px;\n border: 1px solid var(--pm-line);\n border-radius: 16px;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-1);\n}\n.pm-ai-head {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--pm-ink);\n font-size: 13.5px;\n font-weight: 600;\n}\n.pm-ai-orb {\n width: 9px;\n height: 9px;\n border-radius: 50%;\n background: conic-gradient(from 210deg, var(--pm-accent), var(--pm-violet), var(--pm-accent));\n box-shadow: 0 0 0 3px var(--pm-accent-soft);\n}\n.pm-eq {\n display: flex;\n align-items: flex-end;\n gap: 3px;\n height: 22px;\n margin: 14px 0 8px;\n}\n.pm-eq i {\n flex: 1;\n min-width: 2px;\n border-radius: 2px 2px 1px 1px;\n background: linear-gradient(180deg, var(--pm-violet), var(--pm-accent));\n transform-origin: bottom;\n animation: pm-eq 1.15s ease-in-out infinite;\n}\n@keyframes pm-eq {\n 0%, 100% { transform: scaleY(0.55); opacity: 0.55; }\n 35% { transform: scaleY(1); opacity: 1; }\n 68% { transform: scaleY(0.72); opacity: 0.8; }\n}\n\n/* Page entrance */\n.pm-app { animation: pm-app-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }\n.pm-sidebar { animation: pm-side-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both; }\n@keyframes pm-app-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n@keyframes pm-side-in {\n from { opacity: 0; transform: translateX(-10px); }\n to { opacity: 1; transform: translateX(0); }\n}\n.pm-kpi {\n animation: pm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n.pm-kpi:nth-child(2) { animation-delay: 0.06s; }\n.pm-kpi:nth-child(3) { animation-delay: 0.12s; }\n.pm-kpi:nth-child(4) { animation-delay: 0.18s; }\n.pm-topic {\n animation: pm-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n.pm-topic:nth-child(2) { animation-delay: 0.04s; }\n.pm-topic:nth-child(3) { animation-delay: 0.08s; }\n.pm-topic:nth-child(4) { animation-delay: 0.12s; }\n.pm-topic:nth-child(5) { animation-delay: 0.16s; }\n.pm-topic:nth-child(6) { animation-delay: 0.2s; }\n.pm-topic:nth-child(7) { animation-delay: 0.24s; }\n.pm-topic:nth-child(8) { animation-delay: 0.28s; }\n.pm-topic:nth-child(9) { animation-delay: 0.32s; }\n.pm-topic:nth-child(10) { animation-delay: 0.36s; }\n@keyframes pm-rise {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .pm-app, .pm-sidebar, .pm-kpi, .pm-topic, .pm-logo-fruit, .pm-eq i { animation: none !important; }\n}\n\n/* Reference workbench refinements */\n.pm-brand-mark { width: 44px; height: 44px; }\n.pm-brand-name { font-size: 22px; }\n\n.pm-nav-btn:hover {\n background: color-mix(in srgb, var(--pm-surface-2) 22%, transparent);\n color: var(--pm-ink);\n}\n.pm-nav-btn.is-on:hover { background: #ffffff; }\n:root[data-theme="dark"] .pm-nav-btn.is-on:hover,\n.dark .pm-nav-btn.is-on:hover,\n[data-theme="dark"] .pm-nav-btn.is-on:hover {\n background: var(--pm-surface-2);\n}\n\n.pm-kpi {\n gap: 6px;\n min-height: 118px;\n padding: 18px 20px;\n}\n.pm-kpi-main { flex: 1 1 auto; min-width: 0; }\n.pm-kpi-label { font-size: 13px; }\n.pm-kpi-value { font-size: 30px; }\n.pm-kpi-sub {\n margin-top: 6px;\n overflow: hidden;\n font-size: 11.2px;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n.pm-kpi-chart { width: 44px; min-width: 40px; opacity: 0.85; }\n\n.pm-notice { position: relative; overflow: hidden; padding-bottom: 18px; }\n.pm-notice-stats {\n display: flex;\n align-items: center;\n gap: 18px;\n padding: 0 4px;\n}\n.pm-notice-stats div { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }\n.pm-notice-stats b {\n color: var(--pm-ink);\n font-family: var(--pm-num);\n font-size: 19px;\n font-weight: 600;\n line-height: 1.15;\n font-variant-numeric: tabular-nums;\n}\n.pm-notice-stats span { color: var(--pm-ink-3); font-size: 10.5px; white-space: nowrap; }\n.pm-notice-progress {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n height: 2px;\n background: linear-gradient(90deg, var(--pm-accent), var(--pm-violet));\n}\n\n.pm-renew {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n margin-top: 12px;\n padding: 12px 16px;\n border: 1px solid color-mix(in srgb, var(--pm-accent) 14%, var(--pm-line));\n border-radius: 16px;\n background: color-mix(in srgb, var(--pm-accent-soft) 55%, var(--pm-surface));\n}\n.pm-renew p { margin: 0; color: var(--pm-ink-2); font-size: 12.2px; line-height: 1.5; }\n.pm-renew p b { color: var(--pm-ink); font-weight: 600; }\n.pm-renew .pm-btn { flex: 0 0 auto; background: var(--pm-surface); }\n\n.pm-empty {\n border: 1px solid var(--pm-line);\n border-radius: 18px;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-1);\n}\n\n.pm-settings-wrap { max-width: 880px; }\n\n.pm-eq {\n height: 11px;\n gap: 2px;\n margin: 14px 0 9px;\n}\n.pm-eq i {\n flex: 1;\n min-width: 2px;\n border-radius: 2px;\n background: color-mix(in srgb, var(--pm-accent) 28%, var(--pm-surface-3));\n animation: pm-eq 1.35s ease-in-out infinite;\n}\n.pm-eq i:nth-child(3n) { background: color-mix(in srgb, var(--pm-accent) 55%, var(--pm-surface-3)); }\n.pm-eq i:nth-child(5n) { background: color-mix(in srgb, var(--pm-violet) 45%, var(--pm-surface-3)); }\n@keyframes pm-eq {\n 0%, 100% { transform: scaleY(0.7); opacity: 0.6; }\n 35% { transform: scaleY(1); opacity: 1; }\n 68% { transform: scaleY(0.82); opacity: 0.8; }\n}\n\n@media (max-width: 1120px) {\n .pm-notice-stats { display: none; }\n}\n\n/* Reference-style pipeline empty state */\n.pm-pipeline {\n padding: 20px 22px 18px;\n border: 1px solid var(--pm-line);\n border-radius: 18px;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-1);\n}\n.pm-pipeline-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }\n.pm-pipeline-head h3 { margin: 0; color: var(--pm-ink); font-size: 14px; font-weight: 600; }\n.pm-pipeline-head p { margin: 3px 0 0; color: var(--pm-ink-3); font-size: 11.5px; }\n.pm-pipeline-legend { display: flex; align-items: center; gap: 14px; padding-top: 2px; color: var(--pm-ink-3); font-size: 10.5px; }\n.pm-pipeline-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }\n.pm-pipeline-legend i { width: 7px; height: 7px; border-radius: 2px; }\n.pm-pipeline-legend .is-idle { background: var(--pm-surface-3); }\n.pm-pipeline-legend .is-run { background: var(--pm-violet); }\n.pm-pipeline-legend .is-done { background: var(--pm-accent); }\n.pm-pipeline-body {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 34px;\n min-height: 154px;\n padding: 14px 0 8px;\n}\n.pm-pipeline-bot {\n display: grid;\n width: 66px;\n height: 66px;\n place-items: center;\n border-radius: 50%;\n background: var(--pm-surface-2);\n color: var(--pm-ink-3);\n}\n.pm-pipeline-copy { max-width: 400px; text-align: center; }\n.pm-pipeline-copy h4 { margin: 0; color: var(--pm-ink); font-size: 16px; font-weight: 600; }\n.pm-pipeline-copy p { margin: 5px 0 0; color: var(--pm-ink-3); font-size: 12.5px; line-height: 1.6; }\n.pm-pipeline-copy .pm-btn { margin-top: 12px; }\n.pm-pipeline-jar {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 68px;\n height: 68px;\n border: 1px solid var(--pm-line);\n border-radius: 14px;\n background: var(--pm-surface-2);\n color: var(--pm-ink);\n}\n.pm-pipeline-jar b { font-family: var(--pm-num); font-size: 22px; font-weight: 600; line-height: 1.1; }\n.pm-pipeline-jar span { margin-top: 2px; color: var(--pm-ink-3); font-size: 10px; }\n.pm-pipeline-track { display: flex; gap: 4px; margin-top: 10px; }\n.pm-pipeline-track i { flex: 1; height: 4px; border-radius: 2px; background: var(--pm-surface-3); }\n.pm-pipeline-track i:nth-child(4n) { background: color-mix(in srgb, var(--pm-violet) 45%, var(--pm-surface-3)); }\n.pm-pipeline-track i:nth-child(7n) { background: color-mix(in srgb, var(--pm-accent) 55%, var(--pm-surface-3)); }\n\n.pm-notice { animation: pm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }\n.pm-renew { animation: pm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both; }\n.pm-tabbar { animation: pm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }\n.pm-pipeline { animation: pm-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both; }\n@media (prefers-reduced-motion: reduce) {\n .pm-notice, .pm-renew, .pm-tabbar, .pm-pipeline { animation: none !important; }\n}\n\n/* KPI cards lift on hover */\n.pm-kpi {\n animation: pm-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;\n transition:\n translate 0.35s cubic-bezier(0.22, 1, 0.36, 1),\n scale 0.35s cubic-bezier(0.22, 1, 0.36, 1),\n box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),\n border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);\n will-change: translate, scale;\n}\n@media (hover: hover) {\n .pm-kpi:hover {\n translate: 0 -3px;\n scale: 1.007;\n border-color: color-mix(in srgb, var(--pm-accent) 16%, var(--pm-line));\n box-shadow:\n 0 12px 24px -18px rgba(0, 0, 0, 0.18),\n 0 3px 8px rgba(0, 0, 0, 0.05);\n }\n :root[data-theme="dark"] .pm-kpi:hover,\n .dark .pm-kpi:hover,\n [data-theme="dark"] .pm-kpi:hover {\n box-shadow:\n 0 14px 28px -18px rgba(0, 0, 0, 0.55),\n 0 3px 8px rgba(0, 0, 0, 0.16);\n }\n .pm-kpi:hover .pm-kpi-chart {\n transform: translateY(-1px) scale(1.02);\n }\n}\n.pm-kpi:active {\n translate: 0 -1px;\n scale: 0.997;\n}\n.pm-kpi-chart {\n transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n/* Real browser / platform logos */\n.pm-platform-brand {\n display: block;\n flex: 0 0 auto;\n}\n.pm-platform-brand svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n/* Platform rows use real app icons, not letter tiles */\n.pm-platform-ic {\n width: 34px;\n height: 34px;\n background: transparent;\n border-radius: 0;\n}\n\n.pm-qfoot .is-empty,\n.pm-qfoot .is-saving { color: var(--pm-ink-3); }\n.pm-qfoot .is-error { color: var(--pm-danger); }\n\n/* License gate */\n.pm-gate-root {\n display: grid;\n min-height: 100vh;\n place-items: center;\n padding: 32px;\n background: var(--pm-bg);\n}\n.pm-gate {\n width: min(460px, 100%);\n text-align: center;\n}\n.pm-gate-brand {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 30px;\n text-align: left;\n}\n.pm-gate-brand .pm-brand-mark {\n width: 48px;\n height: 48px;\n}\n.pm-gate-name {\n color: var(--pm-ink);\n font-size: 22px;\n font-weight: 650;\n letter-spacing: -0.02em;\n line-height: 1.1;\n}\n.pm-gate-sub {\n margin-top: 3px;\n color: var(--pm-ink-3);\n font-size: 10px;\n letter-spacing: 0.14em;\n}\n.pm-gate h1 {\n margin: 0;\n color: var(--pm-ink);\n font-size: 34px;\n font-weight: 650;\n letter-spacing: -0.035em;\n line-height: 1.15;\n}\n.pm-gate-desc {\n max-width: 360px;\n margin: 10px auto 24px;\n color: var(--pm-ink-2);\n font-size: 13px;\n line-height: 1.65;\n}\n.pm-gate-form {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.pm-gate-form .pm-input {\n height: 44px;\n flex: 1;\n background: var(--pm-surface);\n border: 1px solid var(--pm-line);\n text-align: center;\n font-family: "SF Mono", Menlo, monospace;\n font-size: 13px;\n letter-spacing: 0.04em;\n}\n.pm-gate-form .pm-btn {\n height: 44px;\n flex: 0 0 auto;\n}\n.pm-gate-error {\n margin-top: 12px;\n color: var(--pm-danger);\n font-size: 12px;\n}\n.pm-gate-foot {\n margin: 24px 0 0;\n color: var(--pm-ink-3);\n font-size: 11.5px;\n line-height: 1.6;\n}\n.pm-gate-foot a {\n color: var(--pm-accent-text);\n text-decoration: none;\n}\n.pm-gate-foot a:hover { text-decoration: underline; }\n\n/* Animated topic pipeline while generating */\n.pm-run-pipeline {\n padding: 22px 24px 16px;\n border: 1px solid var(--pm-line);\n border-radius: 18px;\n background: var(--pm-surface);\n box-shadow: var(--pm-shadow-1);\n}\n.pm-run-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }\n.pm-run-title { display: flex; align-items: center; gap: 14px; }\n.pm-run-head h3 { margin: 0; color: var(--pm-ink); font-size: 14px; font-weight: 600; }\n.pm-run-head p { margin: 4px 0 0; color: var(--pm-ink-3); font-size: 11.5px; }\n.pm-run-live {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 4px 9px;\n border-radius: 999px;\n background: var(--pm-accent-soft);\n color: var(--pm-accent-text);\n font-size: 10.5px;\n white-space: nowrap;\n}\n.pm-run-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--pm-accent); animation: pm-run-blink 1.2s ease-in-out infinite; }\n\n.pm-run-robot { position: relative; flex: 0 0 70px; width: 70px; height: 76px; }\n.pm-run-halo {\n position: absolute;\n inset: 8px 0 0;\n border-radius: 50%;\n background: var(--pm-accent-soft);\n filter: blur(10px);\n animation: pm-run-halo 3.2s ease-in-out infinite;\n}\n.pm-run-head-face {\n position: absolute;\n top: 20px;\n left: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 9px;\n width: 48px;\n height: 38px;\n border: 1px solid rgba(255, 255, 255, 0.14);\n border-radius: 14px;\n background: linear-gradient(145deg, #4b4b50 0%, #2a2a2e 62%, #202024 100%);\n box-shadow:\n inset 0 1px 0 rgba(255, 255, 255, 0.18),\n 0 10px 22px -12px rgba(0, 0, 0, 0.9);\n transform: translateX(-50%);\n z-index: 2;\n}\n.pm-run-head-face i {\n width: 6px;\n height: 9px;\n border-radius: 3px;\n background: #ffb45e;\n box-shadow: 0 0 10px rgba(255, 150, 60, 0.85);\n animation: pm-run-eyes 2.4s ease-in-out infinite;\n}\n.pm-run-head-face i:nth-child(2) { animation-delay: 0.15s; }\n.pm-run-ear {\n position: absolute;\n top: 29px;\n width: 7px;\n height: 15px;\n border-radius: 4px;\n background: #333338;\n z-index: 1;\n}\n.pm-run-ear.is-left { left: 6px; }\n.pm-run-ear.is-right { right: 6px; }\n.pm-run-antenna {\n position: absolute;\n top: 6px;\n left: 50%;\n width: 2px;\n height: 14px;\n border-radius: 2px;\n background: #7a7a80;\n transform: translateX(-50%);\n z-index: 3;\n}\n.pm-run-antenna::after {\n position: absolute;\n top: -3px;\n left: -2px;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--pm-accent);\n box-shadow: 0 0 8px color-mix(in srgb, var(--pm-accent) 65%, transparent);\n content: "";\n animation: pm-run-blink 1.5s ease-in-out infinite;\n}\n.pm-run-body {\n position: absolute;\n bottom: 3px;\n left: 50%;\n width: 36px;\n height: 13px;\n border-radius: 6px 6px 11px 11px;\n background: linear-gradient(180deg, #3b3b40, #242428);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);\n transform: translateX(-50%);\n z-index: 2;\n}\n.pm-run-steps {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 0;\n margin-top: 20px;\n}\n.pm-run-step { min-width: 0; padding-right: 16px; opacity: 0.42; transition: opacity 0.4s ease; }\n.pm-run-step.is-active { opacity: 1; }\n.pm-run-step.is-done { opacity: 0.78; }\n.pm-run-step-line { position: relative; height: 20px; margin-bottom: 8px; }\n.pm-run-step-line::before {\n position: absolute;\n top: 9px;\n right: 0;\n left: 22px;\n height: 1px;\n background: var(--pm-line);\n content: "";\n}\n.pm-run-step:last-child .pm-run-step-line::before { display: none; }\n.pm-run-step.is-done .pm-run-step-line::before,\n.pm-run-step.is-active .pm-run-step-line::before {\n background: color-mix(in srgb, var(--pm-accent) 38%, var(--pm-line));\n}\n.pm-run-step-dot {\n position: relative;\n z-index: 1;\n display: grid;\n width: 19px;\n height: 19px;\n place-items: center;\n border-radius: 50%;\n background: var(--pm-surface-2);\n color: var(--pm-ink-3);\n font-family: var(--pm-num);\n font-size: 8.5px;\n font-weight: 600;\n}\n.pm-run-step.is-active .pm-run-step-dot { background: var(--pm-accent); color: var(--pm-accent-ink); box-shadow: 0 0 0 4px var(--pm-accent-soft); }\n.pm-run-step.is-done .pm-run-step-dot { background: var(--pm-ok-soft); color: var(--pm-ok); }\n.pm-run-step b { display: block; color: var(--pm-ink); font-size: 12px; font-weight: 600; white-space: nowrap; }\n.pm-run-step small { display: block; margin-top: 2px; overflow: hidden; color: var(--pm-ink-3); font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }\n.pm-run-track { height: 2px; margin-top: 16px; overflow: hidden; border-radius: 999px; background: var(--pm-surface-3); }\n.pm-run-track span { display: block; height: 100%; border-radius: inherit; background: var(--pm-accent); transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }\n@keyframes pm-run-halo { 0%, 100% { opacity: 0.5; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.06); } }\n@keyframes pm-run-blink { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }\n@keyframes pm-run-eyes { 0%, 88%, 100% { transform: scaleY(1); } 92% { transform: scaleY(0.15); } }\n@media (max-width: 760px) {\n .pm-run-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }\n .pm-run-step-line::before { display: none; }\n}\n.pm-progress-track.is-indeterminate { overflow: hidden; }\n.pm-progress-track.is-indeterminate .pm-progress-fill {\n width: 38% !important;\n animation: pm-indeterminate 1.4s cubic-bezier(.4,0,.2,1) infinite;\n}\n@keyframes pm-indeterminate {\n 0% { transform: translateX(-110%); }\n 100% { transform: translateX(310%); }\n}\n.pm-post-cover { position: relative; overflow: hidden; }\n.pm-post-cover img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.9;\n}\n.pm-post-cover > span { position: relative; z-index: 1; }\n.pm-post-title { display: block; color: var(--pm-ink); text-decoration: none; }\n.pm-post-title:hover { color: var(--pm-accent-text); text-decoration: underline; }\n\n.pm-peer-cover img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.pm-peer-cover { position: relative; overflow: hidden; }\n.pm-peer-title { color: var(--pm-ink); text-decoration: none; }\n.pm-peer-title:hover { color: var(--pm-accent-text); text-decoration: underline; }\n\n/* KPI chart entrance: draw, grow, sweep */\n.pm-spark-line {\n stroke-dasharray: 1;\n stroke-dashoffset: 1;\n animation: pm-spark-draw 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;\n}\n.pm-spark-area {\n animation: pm-spark-area 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;\n}\n@keyframes pm-spark-draw {\n from { stroke-dashoffset: 1; }\n to { stroke-dashoffset: 0; }\n}\n@keyframes pm-spark-area {\n from { opacity: 0; }\n to { opacity: 0.08; }\n}\n.pm-spark-dot {\n transform-box: fill-box;\n transform-origin: center;\n animation: pm-chart-dot 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both;\n}\n@keyframes pm-chart-dot {\n from { opacity: 0; transform: scale(0); }\n to { opacity: 1; transform: scale(1); }\n}\n\n.pm-mini-bar {\n transform-box: fill-box;\n transform-origin: bottom;\n animation: pm-bar-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;\n}\n@keyframes pm-bar-grow {\n from { transform: scaleY(0); opacity: 0; }\n to { transform: scaleY(1); }\n}\n\n.pm-ring-progress {\n animation: pm-ring-draw 1s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;\n}\n@keyframes pm-ring-draw {\n from { stroke-dashoffset: var(--pm-ring-full); }\n to { stroke-dashoffset: var(--pm-ring-offset); }\n}\n.pm-ring-dot {\n transform-box: fill-box;\n transform-origin: center;\n animation: pm-chart-dot 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.62s both;\n}\n@media (prefers-reduced-motion: reduce) {\n .pm-spark-line, .pm-spark-area, .pm-spark-dot, .pm-mini-bar, .pm-ring-progress, .pm-ring-dot { animation: none !important; }\n}\n\n.pm-model-picker { margin-top: 14px; }\n.pm-model-picker .pm-select { max-width: 520px; }\n.pm-model-error { margin-top: 6px; color: var(--pm-danger); font-size: 11.5px; }\n\n/* Peer profile + card layout */\n.pm-peer-profile { padding: 20px 22px; }\n.pm-peer-profile-head { display: flex; align-items: center; gap: 14px; }\n.pm-peer-avatar { width: 54px; height: 54px; border-radius: 16px; object-fit: cover; background: var(--pm-surface-2); }\n.pm-peer-avatar--fallback { display: grid; place-items: center; color: var(--pm-ink-2); font-size: 20px; font-weight: 600; }\n.pm-peer-profile-main { flex: 1; min-width: 0; }\n.pm-peer-profile-name { display: flex; align-items: center; gap: 8px; color: var(--pm-ink); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }\n.pm-peer-profile-meta { margin-top: 4px; color: var(--pm-ink-3); font-size: 11.5px; }\n.pm-peer-profile-actions { display: flex; align-items: center; gap: 8px; }\n.pm-platform-chip {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 2px 7px 2px 3px;\n border-radius: 999px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-size: 10.5px;\n font-weight: 500;\n}\n.pm-platform-chip .pm-platform-brand { width: 14px; height: 14px; }\n.pm-peer-insight { margin-top: 16px; padding: 18px 20px; }\n.pm-peer-summary { margin: 0; padding-left: 16px; color: var(--pm-ink-2); font-size: 12.5px; line-height: 1.75; }\n.pm-peer-summary li + li { margin-top: 4px; }\n.pm-peer-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }\n.pm-post-platform {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 6px 2px 2px;\n border-radius: 999px;\n background: rgba(0, 0, 0, 0.38);\n color: #fff;\n font-size: 9.5px;\n font-weight: 500;\n}\n.pm-post-platform .pm-platform-brand { width: 14px; height: 14px; }\n.pm-post-meta { display: flex; align-items: center; gap: 6px; }\n.pm-post-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: var(--pm-surface-2); }\n.pm-post-title { cursor: pointer; }\n\n/* Platform identity uses the real app logo everywhere. */\n.pm-platform-badge {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 3px 8px 3px 5px;\n border-radius: 999px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-2);\n font-size: 10.5px;\n font-weight: 500;\n line-height: 1.2;\n white-space: nowrap;\n}\n.pm-platform-badge-item { display: inline-flex; align-items: center; gap: 4px; }\n.pm-platform-badge .pm-platform-brand { width: 14px; height: 14px; }\n.pm-platform-badge.is-plain { padding: 0; background: transparent; color: inherit; font-size: 13px; }\n.pm-platform-badge.is-plain .pm-platform-brand { width: 15px; height: 15px; }\n.pm-platform-badge.is-plain .pm-platform-badge-item + .pm-platform-badge-item { margin-left: 3px; }\n\n/* Peer search history and update comparison */\n.pm-peer-history { margin-top: 12px; padding: 18px 20px; }\n.pm-peer-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }\n.pm-peer-history-list { display: grid; gap: 2px; }\n.pm-peer-history-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; cursor: pointer; transition: background 0.2s ease; }\n.pm-peer-history-row:hover { background: var(--pm-surface-2); }\n.pm-peer-history-avatar { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; background: var(--pm-surface-2); flex: 0 0 32px; }\n.pm-peer-history-avatar--fallback { display: grid; place-items: center; color: var(--pm-ink-2); font-size: 12px; font-weight: 600; }\n.pm-peer-history-main { flex: 1; min-width: 0; }\n.pm-peer-history-name { display: flex; align-items: center; gap: 6px; color: var(--pm-ink); font-size: 12px; font-weight: 600; }\n.pm-peer-history-meta { margin-top: 2px; color: var(--pm-ink-3); font-size: 10.5px; }\n.pm-peer-history-update { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid var(--pm-line); border-radius: 8px; background: transparent; color: var(--pm-ink-2); font-size: 10.5px; cursor: pointer; }\n.pm-peer-history-update:hover { color: var(--pm-ink); border-color: var(--pm-ink-3); }\n.pm-peer-history-update:disabled { opacity: 0.45; cursor: default; }\n.pm-peer-compare { margin-top: 12px; padding: 16px 18px; }\n.pm-peer-compare-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }\n.pm-peer-compare-stats { display: flex; gap: 28px; margin-top: 14px; }\n.pm-peer-compare-stats div { display: flex; flex-direction: column; gap: 2px; }\n.pm-peer-compare-stats b { color: var(--pm-ink); font-family: var(--pm-num); font-size: 20px; font-weight: 650; line-height: 1; }\n.pm-peer-compare-stats span { color: var(--pm-ink-3); font-size: 10.5px; }\n.pm-peer-new-list { display: grid; gap: 5px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--pm-line); }\n.pm-peer-new-item { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--pm-ink-2); font-size: 11.5px; }\n.pm-peer-new-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.pm-peer-new-dot { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--pm-accent); }\n\n.pm-plan-generating {\n display: flex;\n align-items: center;\n gap: 9px;\n padding: 18px 20px;\n border: 1px solid var(--pm-line);\n border-radius: 14px;\n background: var(--pm-surface);\n color: var(--pm-ink-2);\n font-size: 12px;\n}\n.pm-plan-generating-dot {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: var(--pm-accent);\n animation: pm-run-blink 1.2s ease-in-out infinite;\n}\n\n.pm-back-link {\n display: inline-flex;\n align-items: center;\n gap: 7px;\n height: 34px;\n padding: 0 13px 0 11px;\n margin: 0 0 13px;\n border: 1px solid color-mix(in srgb, var(--pm-ink) 9%, transparent);\n border-radius: 10px;\n background: color-mix(in srgb, var(--pm-surface) 88%, transparent);\n color: var(--pm-ink-2);\n font-size: 12.5px;\n font-weight: 500;\n letter-spacing: -0.01em;\n cursor: pointer;\n box-shadow:\n 0 1px 0 rgba(255, 255, 255, 0.55) inset,\n 0 2px 6px color-mix(in srgb, var(--pm-ink) 5%, transparent);\n backdrop-filter: blur(8px);\n transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;\n}\n.pm-back-link .pm-ic { transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }\n.pm-back-link:hover {\n color: var(--pm-ink);\n border-color: color-mix(in srgb, var(--pm-accent) 26%, transparent);\n background: var(--pm-surface);\n box-shadow:\n 0 1px 0 rgba(255, 255, 255, 0.65) inset,\n 0 4px 12px color-mix(in srgb, var(--pm-ink) 7%, transparent);\n}\n.pm-back-link:hover .pm-ic { transform: translateX(-2px); }\n\n.pm-save-done { opacity: 0.72; }\n.pm-save-done:hover { opacity: 0.9; }\n\n/* Review split screen */\n.pm-review-layout { gap: 0; align-items: stretch; }\n.pm-review-layout.is-detail-full,\n.pm-review-layout.is-chat-full { grid-template-columns: minmax(0, 1fr); }\n.pm-review-layout.is-detail-full .pm-detail { width: 100%; max-width: none; }\n.pm-review-layout.is-chat-full .pm-chat {\n position: static;\n width: 100%;\n height: calc(100vh - 245px);\n min-height: 620px;\n}\n.pm-split-handle {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n width: 8px;\n cursor: col-resize;\n touch-action: none;\n}\n.pm-split-handle::before {\n position: absolute;\n top: 14px;\n bottom: 14px;\n width: 1px;\n border-radius: 1px;\n background: var(--pm-line);\n content: "";\n transition: background 0.18s ease, width 0.18s ease;\n}\n.pm-split-handle span {\n position: relative;\n z-index: 1;\n width: 3px;\n height: 30px;\n border-radius: 999px;\n background: var(--pm-ink-3);\n opacity: 0;\n transition: opacity 0.18s ease;\n}\n.pm-split-handle:hover::before,\n.pm-review-layout.is-resizing .pm-split-handle::before {\n width: 2px;\n background: color-mix(in srgb, var(--pm-accent) 58%, var(--pm-line));\n}\n.pm-split-handle:hover span,\n.pm-review-layout.is-resizing .pm-split-handle span { opacity: 0.75; }\n.pm-review-layout.is-resizing { cursor: col-resize; user-select: none; }\n.pm-panel-actions { display: flex; align-items: center; gap: 4px; }\n\n@media (max-width: 920px) {\n .pm-review-layout,\n .pm-review-layout.is-detail-full,\n .pm-review-layout.is-chat-full { grid-template-columns: minmax(0, 1fr); }\n .pm-split-handle { display: none; }\n .pm-review-layout.is-chat-full .pm-chat { height: 620px; }\n}\n\n/* Collapsible Pomelo sidebar */\n.pm-sidebar { transition: width 0.26s cubic-bezier(0.22, 1, 0.36, 1), flex-basis 0.26s cubic-bezier(0.22, 1, 0.36, 1), padding 0.26s ease; }\n.pm-sidebar.is-collapsed { flex-basis: 76px; width: 76px; padding: 22px 12px 14px; overflow: hidden; }\n.pm-sidebar-toggle {\n display: grid;\n flex: 0 0 auto;\n width: 28px;\n height: 28px;\n margin-left: auto;\n place-items: center;\n border: 1px solid var(--pm-line);\n border-radius: 8px;\n background: var(--pm-surface-2);\n color: var(--pm-ink-3);\n cursor: pointer;\n transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;\n}\n.pm-sidebar-toggle:hover { color: var(--pm-ink); border-color: var(--pm-ink-3); background: var(--pm-surface-3); }\n.pm-sidebar.is-collapsed .pm-brand { flex-direction: column; gap: 9px; padding: 0 0 17px; }\n.pm-sidebar.is-collapsed .pm-brand-text { display: none; }\n.pm-sidebar.is-collapsed .pm-sidebar-toggle { margin-left: 0; }\n.pm-sidebar.is-collapsed .pm-nav { width: 100%; }\n.pm-sidebar.is-collapsed .pm-nav-btn { justify-content: center; padding: 10px 8px; }\n.pm-sidebar.is-collapsed .pm-nav-label { display: none; }\n.pm-sidebar.is-collapsed .pm-nav-count {\n position: absolute;\n top: 3px;\n right: 5px;\n min-width: 15px;\n height: 15px;\n padding: 0 4px;\n border-radius: 999px;\n font-size: 8.5px;\n}\n.pm-sidebar.is-collapsed .pm-sidebar-spacer { min-height: 16px; }\n.pm-side-compact {\n display: grid;\n width: 38px;\n height: 38px;\n margin: 0 auto;\n place-items: center;\n border: 1px solid var(--pm-line);\n border-radius: 12px;\n background: var(--pm-surface);\n}\n.pm-sidebar.is-collapsed .pm-ai-card { display: none; }\n.pm-sidebar.is-collapsed .pm-version { display: none; }\n@media (max-width: 900px) {\n .pm-sidebar.is-collapsed { flex-basis: 68px; width: 68px; padding-right: 8px; padding-left: 8px; }\n}\n\n.pm-ai-model {\n margin-top: 3px;\n overflow: hidden;\n color: var(--pm-ink-3);\n font-family: var(--pm-num);\n font-size: 10.5px;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pm-ai-activity {\n margin-bottom: 2px;\n color: var(--pm-ink-2);\n font-size: 11px;\n line-height: 1.45;\n}\n.pm-ai-orb.is-live { animation: pm-ai-live 1.4s ease-in-out infinite; }\n.pm-eq.is-idle i { animation-play-state: paused; opacity: 0.38; }\n.pm-ai-card { cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease; }\n.pm-ai-card:hover { border-color: var(--pm-line-2); background: var(--pm-surface-2); }\n@keyframes pm-ai-live {\n 0%, 100% { box-shadow: 0 0 0 3px var(--pm-accent-soft); transform: scale(1); }\n 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--pm-accent) 12%, transparent); transform: scale(1.12); }\n}\n\n/* Model-aware electronic pet */\n.pm-pet-row { display: flex; align-items: center; gap: 11px; margin: 10px 0 8px; min-height: 62px; }\n.pm-pet-info { flex: 1; min-width: 0; }\n.pm-pet {\n --pet-a: var(--pm-accent);\n --pet-b: var(--pm-violet);\n --pet-eye: #ffb45e;\n position: relative;\n display: grid;\n flex: 0 0 64px;\n width: 64px;\n height: 58px;\n place-items: center;\n}\n.pm-pet.is-deepseek { --pet-a: #f37021; --pet-b: #b39bff; --pet-eye: #ffb45e; }\n.pm-pet.is-openai { --pet-a: #7aa2ff; --pet-b: #a78bfa; --pet-eye: #a9c6ff; }\n.pm-pet.is-claude { --pet-a: #d97757; --pet-b: #f0b38a; --pet-eye: #ffc9a8; }\n.pm-pet.is-gemini { --pet-a: #8ab4f8; --pet-b: #c58af9; --pet-eye: #b9d2ff; }\n.pm-pet.is-qwen { --pet-a: #a78bfa; --pet-b: #f0abfc; --pet-eye: #d8c4ff; }\n.pm-pet-orbit { position: absolute; inset: 0; opacity: 0.5; }\n.pm-pet-orbit i {\n position: absolute;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: var(--pet-a);\n box-shadow: 0 0 6px color-mix(in srgb, var(--pet-a) 55%, transparent);\n opacity: 0.55;\n}\n.pm-pet-orbit i:nth-child(1) { top: 8px; left: 7px; }\n.pm-pet-orbit i:nth-child(2) { top: 4px; right: 12px; background: var(--pet-b); }\n.pm-pet-orbit i:nth-child(3) { bottom: 9px; right: 5px; }\n.pm-pet.is-working .pm-pet-orbit { opacity: 1; animation: pm-pet-orbit 5s linear infinite; }\n.pm-pet-head {\n position: relative;\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n width: 38px;\n height: 31px;\n border: 1px solid rgba(255, 255, 255, 0.13);\n border-radius: 11px;\n background: linear-gradient(145deg, #46464b, #252529 72%);\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 7px 14px -9px rgba(0, 0, 0, 0.9);\n animation: pm-pet-float 3.4s ease-in-out infinite;\n}\n.pm-pet-eye {\n width: 5px;\n height: 8px;\n border-radius: 3px;\n background: var(--pet-eye);\n box-shadow: 0 0 8px color-mix(in srgb, var(--pet-eye) 70%, transparent);\n animation: pm-pet-blink 4.6s ease-in-out infinite;\n}\n.pm-pet-antenna {\n position: absolute;\n z-index: 1;\n top: 7px;\n left: 50%;\n width: 2px;\n height: 9px;\n border-radius: 2px;\n background: var(--pet-b);\n transform: translateX(-50%);\n}\n.pm-pet-antenna::after {\n position: absolute;\n top: -3px;\n left: -2px;\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--pet-a);\n box-shadow: 0 0 7px color-mix(in srgb, var(--pet-a) 60%, transparent);\n content: "";\n}\n.pm-pet-base {\n position: absolute;\n z-index: 1;\n bottom: 5px;\n width: 27px;\n height: 7px;\n border-radius: 5px 5px 9px 9px;\n background: #303035;\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);\n}\n.pm-pet-info { min-width: 0; }\n.pm-pet-model {\n overflow: hidden;\n color: var(--pm-ink-2);\n font-family: var(--pm-num);\n font-size: 10.5px;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pm-pet-row .pm-ai-activity { margin-top: 3px; margin-bottom: 0; overflow: hidden; color: var(--pm-ink-3); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }\n.pm-pet.is-working .pm-pet-head { animation: pm-pet-bounce 0.85s cubic-bezier(0.45, 0, 0.55, 1) infinite; }\n.pm-pet.is-openai.is-working .pm-pet-head { animation: pm-pet-tilt 1.15s ease-in-out infinite; }\n.pm-pet.is-claude.is-working .pm-pet-head { animation: pm-pet-breathe 1.7s ease-in-out infinite; }\n.pm-pet.is-gemini.is-working .pm-pet-head { animation: pm-pet-pop 1.05s ease-in-out infinite; }\n.pm-pet.is-qwen.is-working .pm-pet-head { animation: pm-pet-wobble 1.2s ease-in-out infinite; }\n.pm-pet.is-openai.is-working .pm-pet-orbit { animation-direction: reverse; animation-duration: 7s; }\n.pm-pet.is-claude.is-working .pm-pet-orbit { animation-duration: 9s; }\n.pm-pet.is-gemini.is-working .pm-pet-orbit i { animation: pm-pet-spark 1.2s ease-in-out infinite; }\n.pm-pet.is-gemini.is-working .pm-pet-orbit i:nth-child(2) { animation-delay: 0.3s; }\n.pm-pet.is-gemini.is-working .pm-pet-orbit i:nth-child(3) { animation-delay: 0.6s; }\n@keyframes pm-pet-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }\n@keyframes pm-pet-bounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-1.5deg); } }\n@keyframes pm-pet-tilt { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-2px); } }\n@keyframes pm-pet-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }\n@keyframes pm-pet-pop { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-3px) scale(1.04); } 70% { transform: translateY(0) scale(0.99); } }\n@keyframes pm-pet-wobble { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-2px) rotate(-2deg); } 75% { transform: translateX(2px) rotate(2deg); } }\n@keyframes pm-pet-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }\n@keyframes pm-pet-blink { 0%, 42%, 46%, 100% { transform: scaleY(1); } 44% { transform: scaleY(0.12); } }\n@keyframes pm-pet-spark { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.5); } }\n\n/* AI state stage */\n.pm-ai-family {\n margin-left: auto;\n color: var(--pm-ink-3);\n font-family: var(--pm-num);\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.01em;\n}\n.pm-ai-modelline {\n margin-top: 2px;\n overflow-wrap: anywhere;\n color: var(--pm-ink-2);\n font-family: var(--pm-num);\n font-size: 11.5px;\n line-height: 1.4;\n}\n.pm-ai-stage {\n --stage-a: var(--pm-accent);\n --stage-b: var(--pm-violet);\n position: relative;\n display: grid;\n height: 118px;\n margin: 11px -4px 1px;\n place-items: center;\n overflow: hidden;\n border: 1px solid color-mix(in srgb, var(--pm-ink) 7%, transparent);\n border-radius: 13px;\n background:\n radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--stage-a) 13%, transparent), transparent 64%),\n linear-gradient(180deg, var(--pm-surface-2), color-mix(in srgb, var(--pm-surface-2) 60%, transparent));\n}\n.pm-ai-stage.is-deepseek { --stage-a: #f37021; --stage-b: #b39bff; }\n.pm-ai-stage.is-openai { --stage-a: #7aa2ff; --stage-b: #a78bfa; }\n.pm-ai-stage.is-claude { --stage-a: #d97757; --stage-b: #f0b38a; }\n.pm-ai-stage.is-gemini { --stage-a: #8ab4f8; --stage-b: #c58af9; }\n.pm-ai-stage.is-qwen { --stage-a: #a78bfa; --stage-b: #f0abfc; }\n.pm-stage-ring {\n position: absolute;\n inset: 0;\n margin: auto;\n border: 1px solid color-mix(in srgb, var(--stage-a) 25%, transparent);\n border-radius: 50%;\n animation: pm-stage-spin 22s linear infinite;\n}\n.pm-stage-ring.is-one { width: 86px; height: 86px; }\n.pm-stage-ring.is-two { width: 116px; height: 116px; border-color: color-mix(in srgb, var(--stage-b) 18%, transparent); animation-direction: reverse; animation-duration: 30s; }\n.pm-stage-ring.is-two::after {\n position: absolute;\n top: 9px;\n left: 14px;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: var(--stage-b);\n box-shadow: 0 0 8px color-mix(in srgb, var(--stage-b) 60%, transparent);\n content: "";\n}\n.pm-ai-stage.is-openai .pm-stage-ring.is-one { border-style: dashed; }\n.pm-ai-stage.is-claude .pm-stage-ring { border-color: color-mix(in srgb, var(--stage-a) 15%, transparent); filter: blur(0.6px); }\n.pm-ai-stage.is-gemini .pm-stage-ring.is-one { border-color: color-mix(in srgb, var(--stage-a) 35%, transparent); }\n.pm-ai-stage.is-qwen .pm-stage-ring.is-two { border-style: dotted; }\n.pm-stage-spark {\n position: absolute;\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background: var(--stage-a);\n opacity: 0.35;\n animation: pm-stage-spark 5.5s ease-in-out infinite;\n}\n.pm-stage-spark.is-a { top: 22px; left: 34px; }\n.pm-stage-spark.is-b { top: 34px; right: 36px; animation-delay: 1.7s; background: var(--stage-b); }\n.pm-stage-spark.is-c { bottom: 24px; left: 74px; animation-delay: 3.1s; }\n.pm-ai-stage.is-gemini .pm-stage-spark { animation-duration: 2.4s; }\n.pm-ai-stage .pm-pet { z-index: 2; transform: scale(1.02); }\n.pm-stage-state {\n position: absolute;\n right: 0;\n bottom: 8px;\n left: 0;\n overflow: hidden;\n color: var(--pm-ink-3);\n font-size: 9.5px;\n line-height: 1.3;\n text-align: center;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pm-ai-stage.is-working { background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--stage-a) 21%, transparent), transparent 68%), linear-gradient(180deg, var(--pm-surface-2), var(--pm-surface-2)); }\n.pm-ai-stage.is-working .pm-stage-ring { animation-duration: 6s; border-color: color-mix(in srgb, var(--stage-a) 44%, transparent); }\n.pm-ai-stage.is-working .pm-stage-ring.is-two { animation-duration: 8s; }\n.pm-ai-stage.is-working .pm-stage-spark { animation-duration: 2.2s; opacity: 0.8; }\n.pm-ai-stage.is-working .pm-stage-state { color: var(--pm-ink-2); }\n@keyframes pm-stage-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }\n@keyframes pm-stage-spark { 0%, 100% { opacity: 0.15; transform: scale(0.7); } 50% { opacity: 0.9; transform: scale(1.35); } }\n\n.pm-nav-alert {\n width: 6px;\n height: 6px;\n margin-left: auto;\n border-radius: 50%;\n background: var(--pm-danger, #e5484d);\n box-shadow: 0 0 0 3px color-mix(in srgb, #e5484d 14%, transparent);\n}\n.pm-sidebar.is-collapsed .pm-nav-alert { position: absolute; top: 7px; right: 8px; margin: 0; }\n.pm-plan-stale {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 14px;\n padding: 14px 16px;\n border-color: color-mix(in srgb, var(--pm-accent) 26%, var(--pm-line));\n background: color-mix(in srgb, var(--pm-accent-soft) 42%, var(--pm-surface));\n}\n.pm-plan-stale-ic {\n display: grid;\n flex: 0 0 32px;\n width: 32px;\n height: 32px;\n place-items: center;\n border-radius: 10px;\n background: var(--pm-accent-soft);\n color: var(--pm-accent-text);\n}\n.pm-plan-stale-main { flex: 1; min-width: 0; }\n.pm-plan-stale-title { color: var(--pm-ink); font-size: 13px; font-weight: 600; }\n.pm-plan-stale-desc { margin-top: 2px; color: var(--pm-ink-3); font-size: 11.5px; line-height: 1.5; }\n\n.pm-pet-hint { margin-top: 2px; color: var(--pm-ink-3); font-size: 9.5px; }\n.pm-ai-stage { height: 92px; margin-top: 8px; }\n.pm-ai-stage .pm-stage-ring.is-one { width: 72px; height: 72px; }\n.pm-ai-stage .pm-stage-ring.is-two { width: 98px; height: 98px; }\n.pm-stage-core {\n position: absolute;\n inset: 0;\n margin: auto;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--stage-a);\n box-shadow: 0 0 18px color-mix(in srgb, var(--stage-a) 60%, transparent);\n opacity: 0.55;\n animation: pm-stage-core 2.8s ease-in-out infinite;\n}\n@keyframes pm-stage-core {\n 0%, 100% { transform: scale(0.7); opacity: 0.28; }\n 50% { transform: scale(1.5); opacity: 0.8; }\n}\n.pm-ai-stage.is-working .pm-stage-core { animation-duration: 1.2s; }\n\n/* Effects follow the AI task, not the model vendor. */\n.pm-stage-scan {\n position: absolute;\n right: 12px;\n left: 12px;\n height: 1px;\n background: linear-gradient(90deg, transparent, var(--stage-a), transparent);\n opacity: 0;\n}\n.pm-stage-typing {\n position: absolute;\n bottom: 15px;\n left: 50%;\n display: flex;\n transform: translateX(-50%);\n gap: 4px;\n opacity: 0;\n}\n.pm-stage-typing i {\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background: var(--stage-a);\n}\n.pm-ai-stage.is-task-topics .pm-stage-scan { opacity: 0.7; animation: pm-task-scan 2.2s ease-in-out infinite; }\n.pm-ai-stage.is-task-topics .pm-stage-ring.is-one { animation: pm-task-pulse 2.2s ease-out infinite; }\n.pm-ai-stage.is-task-topics .pm-stage-ring.is-two { animation: pm-task-pulse 2.2s ease-out 0.7s infinite; }\n.pm-ai-stage.is-task-topics .pm-stage-core { animation: pm-task-blink 1.1s ease-in-out infinite; }\n.pm-ai-stage.is-task-plan .pm-stage-ring.is-one { animation: pm-task-plan-ring 3.2s ease-in-out infinite; }\n.pm-ai-stage.is-task-plan .pm-stage-ring.is-two { animation: pm-task-plan-ring 3.2s ease-in-out 0.5s infinite; }\n.pm-ai-stage.is-task-plan .pm-stage-core { animation: pm-task-plan-core 3.2s ease-in-out infinite; }\n.pm-ai-stage.is-task-script .pm-stage-scan { opacity: 0.7; animation: pm-task-type-line 1.6s linear infinite; }\n.pm-ai-stage.is-task-script .pm-stage-ring { animation: pm-task-drift 6s ease-in-out infinite; }\n.pm-ai-stage.is-task-script .pm-stage-typing { opacity: 1; }\n.pm-ai-stage.is-task-script .pm-stage-typing i { animation: pm-task-dot 1.1s ease-in-out infinite; }\n.pm-ai-stage.is-task-script .pm-stage-typing i:nth-child(2) { animation-delay: 0.16s; }\n.pm-ai-stage.is-task-script .pm-stage-typing i:nth-child(3) { animation-delay: 0.32s; }\n.pm-ai-stage.is-task-review .pm-stage-typing { opacity: 1; bottom: 16px; }\n.pm-ai-stage.is-task-review .pm-stage-typing i { animation: pm-task-dot 1.4s ease-in-out infinite; }\n.pm-ai-stage.is-task-review .pm-stage-typing i:nth-child(2) { animation-delay: 0.22s; }\n.pm-ai-stage.is-task-review .pm-stage-typing i:nth-child(3) { animation-delay: 0.44s; }\n.pm-ai-stage.is-task-review .pm-stage-ring { animation: pm-task-review-ring 4s ease-in-out infinite; }\n.pm-ai-stage.is-task-review .pm-stage-spark { animation: pm-task-review-dot 2.4s ease-in-out infinite; }\n.pm-ai-stage.is-task-review .pm-stage-core { opacity: 0.25; animation: none; }\n.pm-pet.is-task-topics.is-working .pm-pet-head { animation: pm-pet-bounce 0.85s cubic-bezier(0.45, 0, 0.55, 1) infinite; }\n.pm-pet.is-task-plan.is-working .pm-pet-head { animation: pm-pet-breathe 1.6s ease-in-out infinite; }\n.pm-pet.is-task-script.is-working .pm-pet-head { animation: pm-pet-tilt 1.1s ease-in-out infinite; }\n.pm-pet.is-task-review.is-working .pm-pet-head { animation: pm-pet-wobble 1.25s ease-in-out infinite; }\n@keyframes pm-task-scan { 0% { top: 14%; opacity: 0; } 15% { opacity: 0.7; } 85% { opacity: 0.7; } 100% { top: 86%; opacity: 0; } }\n@keyframes pm-task-pulse { 0% { transform: scale(0.72); opacity: 0; } 35% { opacity: 0.9; } 100% { transform: scale(1.16); opacity: 0; } }\n@keyframes pm-task-blink { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.5); } }\n@keyframes pm-task-plan-ring { 0%, 100% { transform: scale(0.92); opacity: 0.25; } 50% { transform: scale(1.05); opacity: 0.7; } }\n@keyframes pm-task-plan-core { 0%, 100% { transform: scale(0.9); opacity: 0.35; } 50% { transform: scale(1.8); opacity: 0.9; } }\n@keyframes pm-task-type-line { 0% { top: 18%; opacity: 0; } 12% { opacity: 0.7; } 88% { opacity: 0.7; } 100% { top: 82%; opacity: 0; } }\n@keyframes pm-task-drift { 0%, 100% { transform: rotate(-4deg) scale(0.95); } 50% { transform: rotate(4deg) scale(1.03); } }\n@keyframes pm-task-dot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }\n@keyframes pm-task-review-ring { 0%, 100% { transform: scale(0.94); opacity: 0.3; } 50% { transform: scale(1.06); opacity: 0.65; } }\n@keyframes pm-task-review-dot { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 0.9; transform: scale(1.4); } }\n\n.pm-ai-card { cursor: default; }\n.pm-ai-card:hover { border-color: var(--pm-line); background: var(--pm-surface); }\n.pm-ecg {\n --ecg-a: #f37021;\n --ecg-b: #b39bff;\n position: relative;\n height: 38px;\n margin: 9px -2px 2px;\n overflow: hidden;\n border-radius: 8px;\n background: linear-gradient(180deg, color-mix(in srgb, var(--pm-surface-2) 55%, transparent), transparent 78%);\n}\n.pm-ecg.is-deepseek { --ecg-a: #f37021; --ecg-b: #b39bff; }\n.pm-ecg.is-openai { --ecg-a: #7aa2ff; --ecg-b: #a78bfa; }\n.pm-ecg.is-claude { --ecg-a: #d97757; --ecg-b: #f0b38a; }\n.pm-ecg.is-gemini { --ecg-a: #8ab4f8; --ecg-b: #c58af9; }\n.pm-ecg.is-qwen { --ecg-a: #a78bfa; --ecg-b: #f0abfc; }\n.pm-ecg svg { display: block; width: 100%; height: 100%; overflow: visible; }\n.pm-ecg-base, .pm-ecg-pulse { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }\n.pm-ecg-base { stroke: color-mix(in srgb, var(--ecg-a) 17%, transparent); stroke-width: 1; }\n.pm-ecg-pulse {\n stroke: var(--ecg-a);\n stroke-width: 1.5;\n stroke-dasharray: 30 220;\n stroke-dashoffset: 0;\n filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ecg-a) 65%, transparent));\n animation: pm-ecg-run 3s linear infinite;\n}\n.pm-ecg.is-task-idle .pm-ecg-pulse { stroke-dasharray: 16 220; animation-duration: 6.5s; opacity: 0.45; }\n.pm-ecg.is-task-topics .pm-ecg-pulse { stroke-dasharray: 38 220; animation-duration: 1.8s; }\n.pm-ecg.is-task-plan .pm-ecg-pulse { stroke-dasharray: 54 220; animation-duration: 3.4s; stroke: var(--ecg-b); }\n.pm-ecg.is-task-script .pm-ecg-pulse { stroke-dasharray: 20 220; animation-duration: 2.1s; }\n.pm-ecg.is-task-review .pm-ecg-pulse { stroke-dasharray: 26 220; animation-duration: 4.2s; stroke: var(--ecg-b); }\n.pm-ecg.is-working { background: linear-gradient(180deg, color-mix(in srgb, var(--ecg-a) 8%, transparent), transparent 82%); }\n@keyframes pm-ecg-run { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -250; } }\n\n.pm-nav-tail { display: flex; align-items: center; justify-content: flex-end; min-width: 34px; margin-left: auto; gap: 4px; }\n.pm-nav-count { min-width: 24px; height: 20px; font-size: 10.5px; }\n.pm-nav-count--violet { background: color-mix(in srgb, var(--pm-ok) 18%, transparent); color: var(--pm-ok); }\n.pm-nav-state { color: #ff7a7a; font-size: 9px; font-weight: 500; white-space: nowrap; }\n.pm-sidebar.is-collapsed .pm-nav-tail { position: absolute; top: 3px; right: 4px; min-width: 0; margin: 0; }\n.pm-sidebar.is-collapsed .pm-nav-state { display: none; }\n\n.pm-plan-card { padding: 22px; }\n.pm-plan-card h3 { font-size: 17px; }\n.pm-plan-lead { font-size: 13.8px; line-height: 1.7; }\n.pm-plan-card li { font-size: 14px; line-height: 1.78; }\n.pm-plan-card li + li { margin-top: 7px; }\n.pm-plan-card.is-placeholder { background: color-mix(in srgb, var(--pm-surface) 72%, transparent); box-shadow: none; }\n.pm-plan-card.is-placeholder h3 { color: var(--pm-ink-2); }\n.pm-plan-placeholder { margin: 0; color: var(--pm-ink-3); font-size: 13.2px; line-height: 1.7; }\n\n.pm-nav-dot {\n width: 6px;\n height: 6px;\n margin-right: 9px;\n border-radius: 50%;\n background: var(--pm-accent);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-accent) 13%, transparent);\n}\n.pm-sidebar.is-collapsed .pm-nav-dot { margin: 0; }\n\n.pm-nav-flag {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 22px;\n padding: 0 8px;\n border: 1px solid color-mix(in srgb, var(--pm-accent) 26%, transparent);\n border-radius: 7px;\n background: color-mix(in srgb, var(--pm-accent) 7%, transparent);\n color: var(--pm-accent-text);\n font-size: 10.5px;\n font-weight: 600;\n letter-spacing: 0.02em;\n white-space: nowrap;\n}\n.pm-sidebar.is-collapsed .pm-nav-flag { display: none; }\n\n/* Give the collapsed rail more breathing room. */\n.pm-sidebar.is-collapsed {\n flex-basis: 84px;\n width: 84px;\n padding: 20px 13px 16px;\n}\n.pm-sidebar.is-collapsed .pm-brand {\n gap: 10px;\n padding: 0 0 20px;\n}\n.pm-sidebar.is-collapsed .pm-nav {\n gap: 8px;\n}\n.pm-sidebar.is-collapsed .pm-nav-btn {\n height: 46px;\n padding: 0;\n border-radius: 12px;\n}\n.pm-sidebar.is-collapsed .pm-nav-count,\n.pm-sidebar.is-collapsed .pm-nav-flag {\n display: none;\n}\n.pm-sidebar.is-collapsed .pm-side-compact {\n width: 40px;\n height: 40px;\n}\n@media (max-width: 900px) {\n .pm-sidebar.is-collapsed { flex-basis: 80px; width: 80px; padding-right: 11px; padding-left: 11px; }\n}\n\n/* Collapsed logo and toggle should read as one block, not two islands. */\n.pm-sidebar.is-collapsed .pm-brand {\n gap: 4px;\n padding-bottom: 18px;\n}\n\n.pm-sidebar.is-collapsed .pm-brand {\n gap: 16px;\n padding-bottom: 20px;\n}\n\n/* Working state is faster and carries a small electric arc. */\n.pm-ecg.is-working.is-task-topics .pm-ecg-pulse { animation-duration: 0.9s; stroke-dasharray: 44 220; }\n.pm-ecg.is-working.is-task-plan .pm-ecg-pulse { animation-duration: 1.15s; stroke-dasharray: 60 220; }\n.pm-ecg.is-working.is-task-script .pm-ecg-pulse { animation-duration: 0.95s; stroke-dasharray: 26 220; }\n.pm-ecg.is-working.is-task-review .pm-ecg-pulse { animation-duration: 1.5s; stroke-dasharray: 32 220; }\n.pm-ecg.is-working .pm-ecg-pulse { stroke-width: 1.8; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--ecg-a) 80%, transparent)); }\n.pm-ecg.is-working .pm-ecg-base { stroke: color-mix(in srgb, var(--ecg-a) 30%, transparent); }\n.pm-ecg-bolt {\n position: absolute;\n z-index: 2;\n width: 12px;\n height: 25px;\n background: linear-gradient(180deg, #fff, var(--ecg-b));\n clip-path: polygon(58% 0%, 28% 48%, 50% 48%, 34% 100%, 80% 38%, 56% 38%, 78% 0%);\n filter: drop-shadow(0 0 6px var(--ecg-a));\n opacity: 0;\n pointer-events: none;\n will-change: opacity, transform;\n}\n.pm-ecg-bolt.is-a { top: 0; right: 23%; }\n.pm-ecg-bolt.is-b { right: 63%; bottom: 0; width: 8px; height: 17px; transform: scaleX(-1); }\n.pm-ecg.is-working .pm-ecg-bolt.is-a { animation: pm-ecg-bolt 1.1s steps(1, end) infinite; }\n.pm-ecg.is-working .pm-ecg-bolt.is-b { animation: pm-ecg-bolt 1.35s steps(1, end) 0.32s infinite; }\n@keyframes pm-ecg-bolt {\n 0%, 8% { opacity: 0; transform: scale(0.6) translateY(2px); }\n 10% { opacity: 1; transform: scale(1.1) translateY(0); }\n 16% { opacity: 0.15; }\n 20% { opacity: 0.95; }\n 30% { opacity: 0; }\n 100% { opacity: 0; }\n}\n\n/* Real electric arcs, not a static bolt icon. */\n.pm-ecg-arc {\n fill: none;\n stroke: color-mix(in srgb, #fff 38%, var(--ecg-a));\n stroke-width: 1.35;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 26 26;\n stroke-dashoffset: 26;\n opacity: 0;\n filter: drop-shadow(0 0 4px var(--ecg-a));\n}\n.pm-ecg-spark {\n fill: #fff;\n opacity: 0;\n filter: drop-shadow(0 0 4px var(--ecg-a));\n}\n.pm-ecg.is-working .pm-ecg-arc.is-a { animation: pm-ecg-arc 0.62s steps(1, end) infinite; }\n.pm-ecg.is-working .pm-ecg-arc.is-b { animation: pm-ecg-arc 0.74s steps(1, end) 0.18s infinite; }\n.pm-ecg.is-working .pm-ecg-arc.is-c { animation: pm-ecg-arc 0.86s steps(1, end) 0.36s infinite; }\n.pm-ecg.is-working .pm-ecg-spark.is-a { animation: pm-ecg-spark 0.62s steps(1, end) infinite; }\n.pm-ecg.is-working .pm-ecg-spark.is-b { animation: pm-ecg-spark 0.74s steps(1, end) 0.18s infinite; }\n@keyframes pm-ecg-arc {\n 0%, 62%, 100% { opacity: 0; stroke-dashoffset: 26; }\n 4% { opacity: 1; stroke-dashoffset: 0; }\n 10% { opacity: 0.12; }\n 14% { opacity: 1; }\n 26% { opacity: 0; }\n}\n@keyframes pm-ecg-spark {\n 0%, 60%, 100% { opacity: 0; transform: scale(0.5); transform-origin: center; }\n 5% { opacity: 1; transform: scale(1.8); }\n 16% { opacity: 0; transform: scale(0.8); }\n}\n\n.pm-ecg::after {\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at 42% 34%, rgba(255, 255, 255, 0.16), transparent 32%);\n opacity: 0;\n content: "";\n pointer-events: none;\n}\n.pm-ecg.is-working::after { animation: pm-ecg-screenflash 1.1s steps(1, end) infinite; }\n@keyframes pm-ecg-screenflash {\n 0%, 12%, 100% { opacity: 0; }\n 4% { opacity: 0.7; }\n 8% { opacity: 0.15; }\n}\n\n.pm-avatar--img { object-fit: cover; border-radius: 12px; }\n\n.pm-version {\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n margin-top: 16px;\n padding: 0;\n color: var(--pm-ink-3);\n font-size: 10.5px;\n line-height: 1.4;\n text-align: center;\n}\n\n.pm-ic { display: inline-grid; flex: 0 0 auto; place-items: center; color: currentColor; line-height: 0; }\n.pm-ic svg { display: block; width: 100%; height: 100%; }\n.pm-btn-icon { display: inline-grid; flex: 0 0 auto; place-items: center; line-height: 0; }\n';
|
|
2037
2037
|
|
|
2038
2038
|
// client/src/index.jsx
|
|
2039
2039
|
window.__ModuleLoader__.load({
|