@pomelolabs/leads 0.1.0 → 0.1.2
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 +235 -290
- package/package.json +1 -1
package/client/bundle.js
CHANGED
|
@@ -116,8 +116,10 @@
|
|
|
116
116
|
// client/src/assets/xhs.svg
|
|
117
117
|
var xhs_default = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">\n <rect x="4" y="4" width="56" height="56" rx="15" fill="#FF2442"/>\n <g transform="translate(8 8) scale(2)" fill="#ffffff">\n <path d="M22.405 9.879c.002.016.01.02.07.019h.725a.797.797 0 0 0 .78-.972.794.794 0 0 0-.884-.618.795.795 0 0 0-.692.794c0 .101-.002.666.001.777zm-11.509 4.808c-.203.001-1.353.004-1.685.003a2.528 2.528 0 0 1-.766-.126.025.025 0 0 0-.03.014L7.7 16.127a.025.025 0 0 0 .01.032c.111.06.336.124.495.124.66.01 1.32.002 1.981 0 .01 0 .02-.006.023-.015l.712-1.545a.025.025 0 0 0-.024-.036zM.477 9.91c-.071 0-.076.002-.076.01a.834.834 0 0 0-.01.08c-.027.397-.038.495-.234 3.06-.012.24-.034.389-.135.607-.026.057-.033.042.003.112.046.092.681 1.523.787 1.74.008.015.011.02.017.02.008 0 .033-.026.047-.044.147-.187.268-.391.371-.606.306-.635.44-1.325.486-1.706.014-.11.021-.22.03-.33l.204-2.616.022-.293c.003-.029 0-.033-.03-.034zm7.203 3.757a1.427 1.427 0 0 1-.135-.607c-.004-.084-.031-.39-.235-3.06a.443.443 0 0 0-.01-.082c-.004-.011-.052-.008-.076-.008h-1.48c-.03.001-.034.005-.03.034l.021.293c.076.982.153 1.964.233 2.946.05.4.186 1.085.487 1.706.103.215.223.419.37.606.015.018.037.051.048.049.02-.003.742-1.642.804-1.765.036-.07.03-.055.003-.112zm3.861-.913h-.872a.126.126 0 0 1-.116-.178l1.178-2.625a.025.025 0 0 0-.023-.035l-1.318-.003a.148.148 0 0 1-.135-.21l.876-1.954a.025.025 0 0 0-.023-.035h-1.56c-.01 0-.02.006-.024.015l-.926 2.068c-.085.169-.314.634-.399.938a.534.534 0 0 0-.02.191.46.46 0 0 0 .23.378.981.981 0 0 0 .46.119h.59c.041 0-.688 1.482-.834 1.972a.53.53 0 0 0-.023.172.465.465 0 0 0 .23.398c.15.092.342.12.475.12l1.66-.001c.01 0 .02-.006.023-.015l.575-1.28a.025.025 0 0 0-.024-.035zm-6.93-4.937H3.1a.032.032 0 0 0-.034.033c0 1.048-.01 2.795-.01 6.829 0 .288-.269.262-.28.262h-.74c-.04.001-.044.004-.04.047.001.037.465 1.064.555 1.263.01.02.03.033.051.033.157.003.767.009.938-.014.153-.02.3-.06.438-.132.3-.156.49-.419.595-.765.052-.172.075-.353.075-.533.002-2.33 0-4.66-.007-6.991a.032.032 0 0 0-.032-.032zm11.784 6.896c0-.014-.01-.021-.024-.022h-1.465c-.048-.001-.049-.002-.05-.049v-4.66c0-.072-.005-.07.07-.07h.863c.08 0 .075.004.075-.074V8.393c0-.082.006-.076-.08-.076h-3.5c-.064 0-.075-.006-.075.073v1.445c0 .083-.006.077.08.077h.854c.075 0 .07-.004.07.07v4.624c0 .095.008.084-.085.084-.37 0-1.11-.002-1.304 0-.048.001-.06.03-.06.03l-.697 1.519s-.014.025-.008.036c.006.01.013.008.058.008 1.748.003 3.495.002 5.243.002.03-.001.034-.006.035-.033v-1.539zm4.177-3.43c0 .013-.007.023-.02.024-.346.006-.692.004-1.037.004-.014-.002-.022-.01-.022-.024-.005-.434-.007-.869-.01-1.303 0-.072-.006-.071.07-.07l.733-.003c.041 0 .081.002.12.015.093.025.16.107.165.204.006.431.002 1.153.001 1.153zm2.67.244a1.953 1.953 0 0 0-.883-.222h-.18c-.04-.001-.04-.003-.042-.04V10.21c0-.132-.007-.263-.025-.394a1.823 1.823 0 0 0-.153-.53 1.533 1.533 0 0 0-.677-.71 2.167 2.167 0 0 0-1-.258c-.153-.003-.567 0-.72 0-.07 0-.068.004-.068-.065V7.76c0-.031-.01-.041-.046-.039H17.93s-.016 0-.023.007c-.006.006-.008.012-.008.023v.546c-.008.036-.057.015-.082.022h-.95c-.022.002-.028.008-.03.032v1.481c0 .09-.004.082.082.082h.913c.082 0 .072.128.072.128V11.19s.003.117-.06.117h-1.482c-.068 0-.06.082-.06.082v1.445s-.01.068.064.068h1.457c.082 0 .076-.006.076.079v3.225c0 .088-.007.081.082.081h1.43c.09 0 .082.007.082-.08v-3.27c0-.029.006-.035.033-.035l2.323-.003c.098 0 .191.02.28.061a.46.46 0 0 1 .274.407c.008.395.003.79.003 1.185 0 .259-.107.367-.33.367h-1.218c-.023.002-.029.008-.028.033.184.437.374.871.57 1.303a.045.045 0 0 0 .04.026c.17.005.34.002.51.003.15-.002.517.004.666-.01a2.03 2.03 0 0 0 .408-.075c.59-.18.975-.698.976-1.313v-1.981c0-.128-.01-.254-.034-.38 0 .078-.029-.641-.724-.998z"/>\n </g>\n</svg>\n';
|
|
118
118
|
|
|
119
|
+
// icon.svg
|
|
120
|
+
var icon_default = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="\u67DA\u5BA2 Pomelo">\n <defs>\n <linearGradient id="pm-icon-body" x1="32" y1="16" x2="32" y2="62" gradientUnits="userSpaceOnUse">\n <stop stop-color="#FFC24D"/><stop offset="0.5" stop-color="#F37021"/><stop offset="1" stop-color="#D9540C"/>\n </linearGradient>\n <linearGradient id="pm-icon-leaf" x1="28" y1="1" x2="46" y2="14" gradientUnits="userSpaceOnUse">\n <stop stop-color="#FFD36A"/><stop offset="1" stop-color="#E86A00"/>\n </linearGradient>\n </defs>\n <g>\n <path d="M 30.45 16.23 L 26.95 16.85 L 25.30 17.46 L 23.86 18.08 L 22.62 18.70 L 21.79 19.32 L 20.76 19.94 L 19.94 20.56 L 19.11 21.18 L 18.29 21.79 L 17.26 22.41 L 16.64 23.03 L 15.81 23.65 L 14.99 24.27 L 14.37 24.89 L 13.55 25.51 L 12.93 26.12 L 12.31 26.74 L 11.69 27.36 L 11.28 27.98 L 10.66 28.60 L 10.25 29.22 L 9.63 29.84 L 9.22 30.45 L 8.80 31.07 L 8.60 31.69 L 8.19 32.31 L 7.77 32.93 L 7.57 33.55 L 7.15 34.16 L 6.95 34.78 L 6.74 35.40 L 6.33 36.02 L 6.12 36.64 L 5.92 37.26 L 5.92 37.88 L 5.71 38.49 L 5.51 39.11 L 5.51 39.73 L 5.30 40.35 L 5.30 40.97 L 5.09 41.59 L 5.09 42.21 L 5.09 42.82 L 5.09 43.44 L 5.09 44.06 L 5.09 44.68 L 5.09 45.30 L 5.09 45.92 L 5.30 46.54 L 5.30 47.15 L 5.51 47.77 L 5.71 48.39 L 5.92 49.01 L 5.92 49.63 L 6.12 50.25 L 6.54 50.87 L 6.74 51.48 L 6.95 52.10 L 7.36 52.72 L 7.77 53.34 L 7.98 53.96 L 8.60 54.58 L 9.01 55.20 L 9.42 55.81 L 10.04 56.43 L 10.66 57.05 L 11.48 57.67 L 12.10 58.29 L 13.13 58.91 L 14.16 59.53 L 15.40 60.14 L 16.85 60.76 L 18.91 61.38 L 22.82 62.00 L 41.38 62.00 L 45.30 61.38 L 47.36 60.76 L 49.01 60.14 L 50.25 59.53 L 51.28 58.91 L 52.10 58.29 L 52.93 57.67 L 53.55 57.05 L 54.16 56.43 L 54.78 55.81 L 55.20 55.20 L 55.61 54.58 L 56.02 53.96 L 56.43 53.34 L 56.85 52.72 L 57.05 52.10 L 57.46 51.48 L 57.67 50.87 L 57.88 50.25 L 58.08 49.63 L 58.29 49.01 L 58.49 48.39 L 58.49 47.77 L 58.70 47.15 L 58.70 46.54 L 58.91 45.92 L 58.91 45.30 L 58.91 44.68 L 58.91 44.06 L 58.91 43.44 L 58.91 42.82 L 58.91 42.21 L 58.91 41.59 L 58.91 40.97 L 58.70 40.35 L 58.70 39.73 L 58.49 39.11 L 58.29 38.49 L 58.29 37.88 L 58.08 37.26 L 57.88 36.64 L 57.67 36.02 L 57.46 35.40 L 57.05 34.78 L 56.85 34.16 L 56.64 33.55 L 56.23 32.93 L 55.81 32.31 L 55.61 31.69 L 55.20 31.07 L 54.78 30.45 L 54.37 29.84 L 53.75 29.22 L 53.34 28.60 L 52.72 27.98 L 52.31 27.36 L 51.69 26.74 L 51.07 26.12 L 50.45 25.51 L 49.63 24.89 L 49.01 24.27 L 48.19 23.65 L 47.36 23.03 L 46.74 22.41 L 45.92 21.79 L 45.09 21.18 L 44.06 20.56 L 43.24 19.94 L 42.41 19.32 L 41.38 18.70 L 40.14 18.08 L 38.70 17.46 L 37.05 16.85 L 33.55 16.23 Z" fill="url(#pm-icon-body)"/>\n <path d="M 42.82 1.00 L 38.29 1.62 L 36.43 2.24 L 35.20 2.86 L 34.16 3.47 L 33.34 4.09 L 32.52 4.71 L 31.90 5.33 L 31.28 5.95 L 30.87 6.57 L 30.25 7.19 L 29.84 7.80 L 29.63 8.42 L 29.22 9.04 L 29.01 9.66 L 28.80 10.28 L 28.60 10.90 L 28.39 11.52 L 28.19 12.13 L 28.19 12.75 L 27.98 13.37 L 28.19 13.58 L 28.39 13.58 L 30.04 13.37 L 34.99 12.75 L 37.26 12.13 L 38.91 11.52 L 40.14 10.90 L 41.18 10.28 L 42.00 9.66 L 42.62 9.04 L 43.03 8.42 L 43.65 7.80 L 43.86 7.19 L 44.27 6.57 L 44.47 5.95 L 44.89 5.33 L 45.09 4.71 L 45.30 4.09 L 45.30 3.47 L 45.51 2.86 L 45.51 2.24 L 45.71 1.62 L 42.82 1.00 Z" fill="url(#pm-icon-leaf)"/>\n </g>\n</svg>\n';
|
|
121
|
+
|
|
119
122
|
// client/src/app.jsx
|
|
120
|
-
var WEEKDAYS = ["\u5468\u65E5", "\u5468\u4E00", "\u5468\u4E8C", "\u5468\u4E09", "\u5468\u56DB", "\u5468\u4E94", "\u5468\u516D"];
|
|
121
123
|
var PROFILE_QUESTIONS = [
|
|
122
124
|
{
|
|
123
125
|
key: "q1",
|
|
@@ -162,7 +164,7 @@
|
|
|
162
164
|
placeholder: "\u4F8B\u5982\uFF1A\u5E0C\u671B\u5BA2\u6237\u89C9\u5F97\u6211\u4EEC\u4E13\u4E1A\u3001\u771F\u8BDA\u3001\u6709\u8FB9\u754C\u611F\uFF0C\u4E0D\u662F\u4E00\u6B21\u6027\u7684\u4F4E\u4EF7\u4FDD\u6D01\u2026\u2026"
|
|
163
165
|
}
|
|
164
166
|
];
|
|
165
|
-
EMPTY_PROFILE = {
|
|
167
|
+
var EMPTY_PROFILE = {
|
|
166
168
|
q1: "",
|
|
167
169
|
q2: "",
|
|
168
170
|
q3: "",
|
|
@@ -211,57 +213,11 @@
|
|
|
211
213
|
function createApp(React, css) {
|
|
212
214
|
const { useState, useEffect, useMemo, useRef } = React;
|
|
213
215
|
const HOST_MODE = typeof window !== "undefined" && Boolean(window.__POMELO_TOKEN__);
|
|
214
|
-
function
|
|
215
|
-
|
|
216
|
-
return new URL("/pomelo-rpc", window.location.origin).toString();
|
|
217
|
-
}
|
|
218
|
-
const injected = window.__POMELO_RPC__;
|
|
219
|
-
if (injected && !String(injected).startsWith("dsh-app:")) return injected;
|
|
220
|
-
const streamBase = window.__DSH_TRANSPORT__?.streamBaseUrl;
|
|
221
|
-
if (streamBase) return new URL("/pomelo-rpc", streamBase).toString();
|
|
222
|
-
return new URL("/pomelo-rpc", window.location.origin).toString();
|
|
223
|
-
}
|
|
224
|
-
async function rpc(action, payload = {}) {
|
|
225
|
-
if (!HOST_MODE) throw new Error("\u672C\u5730 Host \u672A\u8FDE\u63A5");
|
|
226
|
-
const endpoint = rpcEndpoint();
|
|
227
|
-
let response;
|
|
228
|
-
try {
|
|
229
|
-
response = await fetch(endpoint, {
|
|
230
|
-
method: "POST",
|
|
231
|
-
credentials: "omit",
|
|
232
|
-
headers: {
|
|
233
|
-
"content-type": "application/json",
|
|
234
|
-
"x-pomelo-token": window.__POMELO_TOKEN__
|
|
235
|
-
},
|
|
236
|
-
body: JSON.stringify({ action, payload })
|
|
237
|
-
});
|
|
238
|
-
if (response.status === 405) {
|
|
239
|
-
const url = new URL(endpoint);
|
|
240
|
-
url.searchParams.set("action", action);
|
|
241
|
-
url.searchParams.set("payload", JSON.stringify(payload));
|
|
242
|
-
url.searchParams.set("t", window.__POMELO_TOKEN__ || "");
|
|
243
|
-
response = await fetch(url.toString(), {
|
|
244
|
-
method: "GET",
|
|
245
|
-
credentials: "omit",
|
|
246
|
-
headers: { "x-pomelo-token": window.__POMELO_TOKEN__ }
|
|
247
|
-
});
|
|
248
|
-
}
|
|
249
|
-
} catch (error) {
|
|
250
|
-
throw new Error(`${error?.message || "Failed to fetch"} \xB7 ${endpoint}`);
|
|
251
|
-
}
|
|
252
|
-
const body = await response.json().catch(() => ({}));
|
|
253
|
-
if (!response.ok || !body.ok) {
|
|
254
|
-
const detail = body?.error?.message ? `\uFF1A${body.error.message}` : "";
|
|
255
|
-
throw new Error(`\u672C\u5730\u670D\u52A1\u8BF7\u6C42\u5931\u8D25\uFF08${response.status}\uFF09${detail} \xB7 ${endpoint}`);
|
|
256
|
-
}
|
|
257
|
-
return body.data;
|
|
216
|
+
function Textarea({ className, ...rest }) {
|
|
217
|
+
return /* @__PURE__ */ React.createElement("textarea", { className: cx("pm-input", className), ...rest });
|
|
258
218
|
}
|
|
259
|
-
function
|
|
260
|
-
return
|
|
261
|
-
}
|
|
262
|
-
function todayLabel() {
|
|
263
|
-
const d = /* @__PURE__ */ new Date();
|
|
264
|
-
return `${d.getMonth() + 1} \u6708 ${d.getDate()} \u65E5 \xB7 ${WEEKDAYS[d.getDay()]}`;
|
|
219
|
+
function Select({ className, options = [], ...rest }) {
|
|
220
|
+
return /* @__PURE__ */ React.createElement("select", { className: cx("pm-select", className), ...rest }, options.map((option) => /* @__PURE__ */ React.createElement("option", { key: option.value, value: option.value }, option.label)));
|
|
265
221
|
}
|
|
266
222
|
async function copyText(text) {
|
|
267
223
|
try {
|
|
@@ -269,288 +225,250 @@
|
|
|
269
225
|
return true;
|
|
270
226
|
} catch {
|
|
271
227
|
try {
|
|
272
|
-
const
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
document.body.appendChild(
|
|
277
|
-
|
|
278
|
-
document.execCommand("copy");
|
|
279
|
-
|
|
280
|
-
return
|
|
228
|
+
const area = document.createElement("textarea");
|
|
229
|
+
area.value = text;
|
|
230
|
+
area.style.position = "fixed";
|
|
231
|
+
area.style.opacity = "0";
|
|
232
|
+
document.body.appendChild(area);
|
|
233
|
+
area.select();
|
|
234
|
+
const ok = document.execCommand("copy");
|
|
235
|
+
area.remove();
|
|
236
|
+
return ok;
|
|
281
237
|
} catch {
|
|
282
238
|
return false;
|
|
283
239
|
}
|
|
284
240
|
}
|
|
285
241
|
}
|
|
286
|
-
function
|
|
287
|
-
const
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
{
|
|
291
|
-
className: "pm-icon",
|
|
292
|
-
style: { width: size, height: size },
|
|
293
|
-
"aria-hidden": "true",
|
|
294
|
-
dangerouslySetInnerHTML: { __html: svg }
|
|
295
|
-
}
|
|
296
|
-
);
|
|
242
|
+
function todayLabel() {
|
|
243
|
+
const date = /* @__PURE__ */ new Date();
|
|
244
|
+
const weekday = ["\u5468\u65E5", "\u5468\u4E00", "\u5468\u4E8C", "\u5468\u4E09", "\u5468\u56DB", "\u5468\u4E94", "\u5468\u516D"][date.getDay()];
|
|
245
|
+
return `${date.getMonth() + 1} \u6708 ${date.getDate()} \u65E5 \xB7 ${weekday}`;
|
|
297
246
|
}
|
|
298
|
-
function
|
|
299
|
-
const
|
|
247
|
+
function scriptToText(topic, format, script) {
|
|
248
|
+
const lines = [script.title, "", script.body, "", "\u6807\u7B7E\uFF1A" + (script.tags || []).join(" ")];
|
|
249
|
+
if (format === "image") {
|
|
250
|
+
lines.push("", "\u56FE\u7247\u5EFA\u8BAE\uFF1A", ...(script.images || []).map((item) => `${item.no}. ${item.text}`));
|
|
251
|
+
} else {
|
|
252
|
+
lines.push("", "\u62CD\u6444\u811A\u672C\uFF1A", ...(script.shots || []).map((shot) => `${shot.no}. [${shot.dur}] ${shot.scene}\uFF5C${shot.line}`));
|
|
253
|
+
}
|
|
254
|
+
return lines.join("\n");
|
|
255
|
+
}
|
|
256
|
+
function makePeerArchive(account, data) {
|
|
257
|
+
const posts = data?.posts || [];
|
|
258
|
+
return {
|
|
259
|
+
type: "peer",
|
|
260
|
+
title: `\u62C6\u89E3\u300C${String(account || "").replace(/^@/, "")}\u300D\uFF1A${posts.length} \u6761\u771F\u5B9E\u516C\u5F00\u7ED3\u679C`,
|
|
261
|
+
platform: data?.platform || "\u5C0F\u7EA2\u4E66",
|
|
262
|
+
summary: `\u4ECE\u672C\u673A Chromium \u516C\u5F00\u9875\u9762\u91C7\u96C6 ${posts.length} \u6761\u7ED3\u679C\uFF1B${data?.summary?.length ? "\u5DF2\u751F\u6210\u540C\u884C\u5185\u5BB9\u62C6\u89E3\u3002" : "AI \u62C6\u89E3\u672A\u5B8C\u6210\uFF0C\u4FDD\u7559\u539F\u59CB\u7ED3\u679C\u3002"}`,
|
|
263
|
+
sections: [
|
|
264
|
+
{ h: "\u771F\u5B9E\u7ED3\u679C", list: posts.map((post) => `${post.title}${post.likes ? ` \xB7 ${post.likes} \u8D5E` : ""}`).slice(0, 20) },
|
|
265
|
+
{ h: "AI \u62C6\u89E3", list: data?.summary || [] }
|
|
266
|
+
]
|
|
267
|
+
};
|
|
268
|
+
}
|
|
269
|
+
function makeSearchArchive(keyword, data) {
|
|
270
|
+
const posts = data?.posts || [];
|
|
271
|
+
return {
|
|
272
|
+
type: "search",
|
|
273
|
+
title: `\u5185\u5BB9\u5206\u6790\u300C${keyword}\u300D\uFF1A${posts.length} \u6761\u516C\u5F00\u7ED3\u679C`,
|
|
274
|
+
platform: data?.platform || "\u5C0F\u7EA2\u4E66",
|
|
275
|
+
summary: `\u56F4\u7ED5\u300C${keyword}\u300D\u91C7\u96C6 ${posts.length} \u6761\u516C\u5F00\u5185\u5BB9\uFF1B${data?.report ? "\u5DF2\u751F\u6210\u5185\u5BB9\u5206\u6790\u3002" : "\u4FDD\u7559\u539F\u59CB\u7ED3\u679C\u3002"}`,
|
|
276
|
+
sections: [
|
|
277
|
+
{ h: "\u771F\u5B9E\u7ED3\u679C", list: posts.map((post) => `${post.title}${post.likes ? ` \xB7 ${post.likes} \u8D5E` : ""}`).slice(0, 20) },
|
|
278
|
+
{ h: "\u5185\u5BB9\u5206\u6790", list: data?.report?.summary || [] }
|
|
279
|
+
]
|
|
280
|
+
};
|
|
281
|
+
}
|
|
282
|
+
function cx(...values) {
|
|
283
|
+
return values.filter(Boolean).join(" ");
|
|
284
|
+
}
|
|
285
|
+
const TYPE_META = {
|
|
286
|
+
peer: { label: "\u540C\u884C\u5206\u6790", tone: "orange", icon: "search" },
|
|
287
|
+
search: { label: "\u5185\u5BB9\u5206\u6790", tone: "blue", icon: "search" },
|
|
288
|
+
topics: { label: "\u4ECA\u65E5\u9009\u9898", tone: "neutral", icon: "checks" },
|
|
289
|
+
script: { label: "\u811A\u672C", tone: "violet", icon: "book" },
|
|
290
|
+
plan: { label: "\u83B7\u5BA2\u65B9\u6848", tone: "green", icon: "plan" },
|
|
291
|
+
account: { label: "\u8D26\u53F7\u5206\u6790", tone: "red", icon: "user" }
|
|
292
|
+
};
|
|
293
|
+
function typeMeta(type) {
|
|
294
|
+
return TYPE_META[type] || TYPE_META.script;
|
|
295
|
+
}
|
|
296
|
+
function scriptFormatOf(archive) {
|
|
297
|
+
if (archive?.scriptFormat === "video" || archive?.format === "video") return "video";
|
|
298
|
+
if (archive?.scriptFormat === "image" || archive?.format === "image") return "image";
|
|
299
|
+
return String(archive?.title || "").startsWith("\u89C6\u9891\u811A\u672C") ? "video" : "image";
|
|
300
|
+
}
|
|
301
|
+
function archiveTypeMeta(archive) {
|
|
302
|
+
const meta = typeMeta(archive?.type);
|
|
303
|
+
if (archive?.type !== "script") return meta;
|
|
304
|
+
return scriptFormatOf(archive) === "video" ? { ...meta, label: "\u89C6\u9891\u811A\u672C" } : { ...meta, label: "\u56FE\u6587\u811A\u672C" };
|
|
305
|
+
}
|
|
306
|
+
function platformTone(platform) {
|
|
307
|
+
return platform === "\u6296\u97F3" ? "blue" : "orange";
|
|
308
|
+
}
|
|
309
|
+
function formatTone(format) {
|
|
310
|
+
return format === "\u89C6\u9891" ? "blue" : "violet";
|
|
311
|
+
}
|
|
312
|
+
function tagTone(tag) {
|
|
313
|
+
if (!tag) return "neutral";
|
|
314
|
+
if (tag.includes("\u9A6C\u4E0A\u62CD")) return "red";
|
|
315
|
+
if (tag.includes("\u6536\u85CF")) return "blue";
|
|
316
|
+
if (tag.includes("\u6DA8\u7C89")) return "violet";
|
|
317
|
+
if (tag.includes("\u8F6C\u5316")) return "green";
|
|
318
|
+
if (tag.includes("\u4FE1\u4EFB") || tag.includes("\u7F6E\u9876")) return "gold";
|
|
319
|
+
return "neutral";
|
|
320
|
+
}
|
|
321
|
+
function formatTime(value) {
|
|
322
|
+
if (!value) return "\u2014";
|
|
323
|
+
const date = new Date(value);
|
|
324
|
+
if (Number.isNaN(date.getTime())) return "\u2014";
|
|
325
|
+
const pad = (number) => String(number).padStart(2, "0");
|
|
326
|
+
return `${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
|
|
327
|
+
}
|
|
328
|
+
function Icon({ name, size = 18 }) {
|
|
329
|
+
const svg = ICON_MAP[name] || ICON_MAP.dot;
|
|
300
330
|
return /* @__PURE__ */ React.createElement(
|
|
301
331
|
"span",
|
|
302
332
|
{
|
|
303
|
-
className: "pm-
|
|
333
|
+
className: "pm-ic",
|
|
304
334
|
style: { width: size, height: size },
|
|
305
335
|
"aria-hidden": "true",
|
|
306
336
|
dangerouslySetInnerHTML: { __html: svg }
|
|
307
337
|
}
|
|
308
338
|
);
|
|
309
339
|
}
|
|
310
|
-
function
|
|
311
|
-
const items = platform === "\u5C0F\u7EA2\u4E66 / \u6296\u97F3" ? ["\u5C0F\u7EA2\u4E66", "\u6296\u97F3"] : [platform];
|
|
312
|
-
return /* @__PURE__ */ React.createElement("span", { className: cx("pm-platform-badge", plain && "is-plain") }, items.map((item) => /* @__PURE__ */ React.createElement("span", { key: item, className: "pm-platform-badge-item" }, /* @__PURE__ */ React.createElement(BrandLogo, { name: item === "\u6296\u97F3" ? "douyin" : "xhs", size }), /* @__PURE__ */ React.createElement("span", null, item))));
|
|
313
|
-
}
|
|
314
|
-
function SidebarToggleIcon({ size = 17 }) {
|
|
315
|
-
return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", focusable: "false" }, /* @__PURE__ */ React.createElement("rect", { x: "2.5", y: "3.5", width: "15", height: "13", rx: "3.2", stroke: "currentColor", strokeWidth: "1.35" }), /* @__PURE__ */ React.createElement("path", { d: "M8 4v12", stroke: "currentColor", strokeWidth: "1.35" }), /* @__PURE__ */ React.createElement("path", { d: "M5.7 4.2h1.7v11.6H5.7A1.9 1.9 0 0 1 3.8 13.9V6.1a1.9 1.9 0 0 1 1.9-1.9Z", fill: "currentColor", opacity: "0.28" }));
|
|
316
|
-
}
|
|
317
|
-
function PomeloMark({ size = 40 }) {
|
|
318
|
-
return /* @__PURE__ */ React.createElement(
|
|
319
|
-
"svg",
|
|
320
|
-
{
|
|
321
|
-
className: "pm-logo",
|
|
322
|
-
width: size,
|
|
323
|
-
height: size,
|
|
324
|
-
viewBox: "0 0 64 64",
|
|
325
|
-
preserveAspectRatio: "xMidYMid meet",
|
|
326
|
-
"aria-hidden": "true",
|
|
327
|
-
focusable: "false"
|
|
328
|
-
},
|
|
329
|
-
/* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "pm-logo-body", x1: "32", y1: "16", x2: "32", y2: "62", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { stopColor: "#FFC24D" }), /* @__PURE__ */ React.createElement("stop", { offset: "0.5", stopColor: "#F37021" }), /* @__PURE__ */ React.createElement("stop", { offset: "1", stopColor: "#D9540C" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "pm-logo-leaf", x1: "28", y1: "1", x2: "46", y2: "14", gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { stopColor: "#FFD36A" }), /* @__PURE__ */ React.createElement("stop", { offset: "1", stopColor: "#E86A00" }))),
|
|
330
|
-
/* @__PURE__ */ React.createElement("g", { className: "pm-logo-fruit" }, /* @__PURE__ */ React.createElement("path", { d: "M 30.45 16.23 L 26.95 16.85 L 25.30 17.46 L 23.86 18.08 L 22.62 18.70 L 21.79 19.32 L 20.76 19.94 L 19.94 20.56 L 19.11 21.18 L 18.29 21.79 L 17.26 22.41 L 16.64 23.03 L 15.81 23.65 L 14.99 24.27 L 14.37 24.89 L 13.55 25.51 L 12.93 26.12 L 12.31 26.74 L 11.69 27.36 L 11.28 27.98 L 10.66 28.60 L 10.25 29.22 L 9.63 29.84 L 9.22 30.45 L 8.80 31.07 L 8.60 31.69 L 8.19 32.31 L 7.77 32.93 L 7.57 33.55 L 7.15 34.16 L 6.95 34.78 L 6.74 35.40 L 6.33 36.02 L 6.12 36.64 L 5.92 37.26 L 5.92 37.88 L 5.71 38.49 L 5.51 39.11 L 5.51 39.73 L 5.30 40.35 L 5.30 40.97 L 5.09 41.59 L 5.09 42.21 L 5.09 42.82 L 5.09 43.44 L 5.09 44.06 L 5.09 44.68 L 5.09 45.30 L 5.09 45.92 L 5.30 46.54 L 5.30 47.15 L 5.51 47.77 L 5.71 48.39 L 5.92 49.01 L 5.92 49.63 L 6.12 50.25 L 6.54 50.87 L 6.74 51.48 L 6.95 52.10 L 7.36 52.72 L 7.77 53.34 L 7.98 53.96 L 8.60 54.58 L 9.01 55.20 L 9.42 55.81 L 10.04 56.43 L 10.66 57.05 L 11.48 57.67 L 12.10 58.29 L 13.13 58.91 L 14.16 59.53 L 15.40 60.14 L 16.85 60.76 L 18.91 61.38 L 22.82 62.00 L 41.38 62.00 L 45.30 61.38 L 47.36 60.76 L 49.01 60.14 L 50.25 59.53 L 51.28 58.91 L 52.10 58.29 L 52.93 57.67 L 53.55 57.05 L 54.16 56.43 L 54.78 55.81 L 55.20 55.20 L 55.61 54.58 L 56.02 53.96 L 56.43 53.34 L 56.85 52.72 L 57.05 52.10 L 57.46 51.48 L 57.67 50.87 L 57.88 50.25 L 58.08 49.63 L 58.29 49.01 L 58.49 48.39 L 58.49 47.77 L 58.70 47.15 L 58.70 46.54 L 58.91 45.92 L 58.91 45.30 L 58.91 44.68 L 58.91 44.06 L 58.91 43.44 L 58.91 42.82 L 58.91 42.21 L 58.91 41.59 L 58.91 40.97 L 58.70 40.35 L 58.70 39.73 L 58.49 39.11 L 58.29 38.49 L 58.29 37.88 L 58.08 37.26 L 57.88 36.64 L 57.67 36.02 L 57.46 35.40 L 57.05 34.78 L 56.85 34.16 L 56.64 33.55 L 56.23 32.93 L 55.81 32.31 L 55.61 31.69 L 55.20 31.07 L 54.78 30.45 L 54.37 29.84 L 53.75 29.22 L 53.34 28.60 L 52.72 27.98 L 52.31 27.36 L 51.69 26.74 L 51.07 26.12 L 50.45 25.51 L 49.63 24.89 L 49.01 24.27 L 48.19 23.65 L 47.36 23.03 L 46.74 22.41 L 45.92 21.79 L 45.09 21.18 L 44.06 20.56 L 43.24 19.94 L 42.41 19.32 L 41.38 18.70 L 40.14 18.08 L 38.70 17.46 L 37.05 16.85 L 33.55 16.23 Z", fill: "url(#pm-logo-body)" }), /* @__PURE__ */ React.createElement("path", { d: "M 42.82 1.00 L 38.29 1.62 L 36.43 2.24 L 35.20 2.86 L 34.16 3.47 L 33.34 4.09 L 32.52 4.71 L 31.90 5.33 L 31.28 5.95 L 30.87 6.57 L 30.25 7.19 L 29.84 7.80 L 29.63 8.42 L 29.22 9.04 L 29.01 9.66 L 28.80 10.28 L 28.60 10.90 L 28.39 11.52 L 28.19 12.13 L 28.19 12.75 L 27.98 13.37 L 28.19 13.58 L 28.39 13.58 L 30.04 13.37 L 34.99 12.75 L 37.26 12.13 L 38.91 11.52 L 40.14 10.90 L 41.18 10.28 L 42.00 9.66 L 42.62 9.04 L 43.03 8.42 L 43.65 7.80 L 43.86 7.19 L 44.27 6.57 L 44.47 5.95 L 44.89 5.33 L 45.09 4.71 L 45.30 4.09 L 45.30 3.47 L 45.51 2.86 L 45.51 2.24 L 45.71 1.62 L 42.82 1.00 Z", fill: "url(#pm-logo-leaf)" }))
|
|
331
|
-
);
|
|
332
|
-
}
|
|
333
|
-
function Button({ children, variant = "secondary", size = "md", icon, className, ...rest }) {
|
|
340
|
+
function IconButton({ label, children, danger, className, ...rest }) {
|
|
334
341
|
return /* @__PURE__ */ React.createElement(
|
|
335
342
|
"button",
|
|
336
343
|
{
|
|
337
344
|
type: "button",
|
|
338
|
-
className: cx("pm-btn",
|
|
345
|
+
className: cx("pm-icon-btn", danger && "is-danger", className),
|
|
346
|
+
"aria-label": label,
|
|
347
|
+
title: label,
|
|
339
348
|
...rest
|
|
340
349
|
},
|
|
341
|
-
icon,
|
|
342
350
|
children
|
|
343
351
|
);
|
|
344
352
|
}
|
|
345
|
-
function
|
|
353
|
+
function Button({ variant = "secondary", size = "md", icon, children, className, ...rest }) {
|
|
346
354
|
return /* @__PURE__ */ React.createElement(
|
|
347
355
|
"button",
|
|
348
356
|
{
|
|
349
357
|
type: "button",
|
|
350
|
-
className: cx("pm-
|
|
351
|
-
"aria-label": label,
|
|
352
|
-
title: label,
|
|
358
|
+
className: cx("pm-btn", `pm-btn--${variant}`, `pm-btn--${size}`, className),
|
|
353
359
|
...rest
|
|
354
360
|
},
|
|
361
|
+
icon && /* @__PURE__ */ React.createElement("span", { className: "pm-btn-icon" }, icon),
|
|
355
362
|
children
|
|
356
363
|
);
|
|
357
364
|
}
|
|
358
|
-
function Badge({ tone: tone2 = "neutral", dot, children }) {
|
|
359
|
-
return /* @__PURE__ */ React.createElement("span", { className: cx("pm-badge", `pm-badge--${tone2}`) }, dot && /* @__PURE__ */ React.createElement("span", { className: "pm-badge-dot" }), children);
|
|
360
|
-
}
|
|
361
365
|
function Card({ className, children, ...rest }) {
|
|
362
366
|
return /* @__PURE__ */ React.createElement("div", { className: cx("pm-card", className), ...rest }, children);
|
|
363
367
|
}
|
|
364
|
-
function
|
|
365
|
-
return /* @__PURE__ */ React.createElement("
|
|
366
|
-
}
|
|
367
|
-
function TextInput(props) {
|
|
368
|
-
return /* @__PURE__ */ React.createElement("input", { className: "pm-input", ...props });
|
|
369
|
-
}
|
|
370
|
-
function Textarea(props) {
|
|
371
|
-
return /* @__PURE__ */ React.createElement("textarea", { className: "pm-textarea", ...props });
|
|
368
|
+
function Badge({ tone: tone2 = "neutral", dot = false, children }) {
|
|
369
|
+
return /* @__PURE__ */ React.createElement("span", { className: cx("pm-badge", `pm-badge--${tone2}`) }, dot && /* @__PURE__ */ React.createElement("i", null), children);
|
|
372
370
|
}
|
|
373
|
-
function
|
|
374
|
-
return /* @__PURE__ */ React.createElement("
|
|
371
|
+
function TextInput({ className, ...rest }) {
|
|
372
|
+
return /* @__PURE__ */ React.createElement("input", { className: cx("pm-input", className), ...rest });
|
|
375
373
|
}
|
|
376
374
|
function Segmented({ value, options, onChange, className }) {
|
|
377
|
-
return /* @__PURE__ */ React.createElement("div", { className: cx("pm-seg", className), role: "tablist" }, options.map((
|
|
375
|
+
return /* @__PURE__ */ React.createElement("div", { className: cx("pm-seg", className), role: "tablist" }, options.map((option) => /* @__PURE__ */ React.createElement(
|
|
378
376
|
"button",
|
|
379
377
|
{
|
|
380
|
-
key:
|
|
378
|
+
key: option.value,
|
|
381
379
|
type: "button",
|
|
382
380
|
role: "tab",
|
|
383
|
-
"aria-selected": value ===
|
|
384
|
-
className: cx("pm-seg-btn", value ===
|
|
385
|
-
onClick: () => onChange(
|
|
381
|
+
"aria-selected": value === option.value,
|
|
382
|
+
className: cx("pm-seg-btn", value === option.value && "is-on"),
|
|
383
|
+
onClick: () => onChange(option.value)
|
|
386
384
|
},
|
|
387
|
-
|
|
385
|
+
option.label
|
|
388
386
|
)));
|
|
389
387
|
}
|
|
388
|
+
function BrandLogo({ name, size = 20 }) {
|
|
389
|
+
const svg = name === "chrome" || name === "chromium" ? chrome_default : name === "douyin" ? douyin_default : xhs_default;
|
|
390
|
+
return /* @__PURE__ */ React.createElement(
|
|
391
|
+
"span",
|
|
392
|
+
{
|
|
393
|
+
className: "pm-platform-brand",
|
|
394
|
+
style: { width: size, height: size },
|
|
395
|
+
"aria-hidden": "true",
|
|
396
|
+
dangerouslySetInnerHTML: { __html: svg }
|
|
397
|
+
}
|
|
398
|
+
);
|
|
399
|
+
}
|
|
400
|
+
function PlatformBadge({ platform, size = 14, plain = false }) {
|
|
401
|
+
const items = platform === "\u5C0F\u7EA2\u4E66 / \u6296\u97F3" ? ["\u5C0F\u7EA2\u4E66", "\u6296\u97F3"] : [platform];
|
|
402
|
+
return /* @__PURE__ */ React.createElement("span", { className: cx("pm-platform-badge", plain && "is-plain") }, items.map((item) => /* @__PURE__ */ React.createElement("span", { key: item, className: "pm-platform-badge-item" }, /* @__PURE__ */ React.createElement(BrandLogo, { name: item === "\u6296\u97F3" ? "douyin" : "xhs", size }), /* @__PURE__ */ React.createElement("span", null, item))));
|
|
403
|
+
}
|
|
404
|
+
function PomeloMark({ size = 40 }) {
|
|
405
|
+
return /* @__PURE__ */ React.createElement(
|
|
406
|
+
"span",
|
|
407
|
+
{
|
|
408
|
+
className: "pm-pomelo-mark",
|
|
409
|
+
style: { width: size, height: size },
|
|
410
|
+
"aria-hidden": "true",
|
|
411
|
+
dangerouslySetInnerHTML: { __html: icon_default }
|
|
412
|
+
}
|
|
413
|
+
);
|
|
414
|
+
}
|
|
415
|
+
function PageHero({ eyebrow, title, subtitle, children }) {
|
|
416
|
+
return /* @__PURE__ */ React.createElement("section", { className: "pm-hero pm-hero--page" }, /* @__PURE__ */ React.createElement("div", { className: "pm-hero-inner" }, /* @__PURE__ */ React.createElement("div", null, eyebrow && /* @__PURE__ */ React.createElement("div", { className: "pm-eyebrow" }, eyebrow), /* @__PURE__ */ React.createElement("h1", null, title), subtitle && /* @__PURE__ */ React.createElement("p", null, subtitle)), children && /* @__PURE__ */ React.createElement("div", { className: "pm-hero-actions" }, children)));
|
|
417
|
+
}
|
|
418
|
+
function EmptyState({ icon = "plus", title, desc, action }) {
|
|
419
|
+
return /* @__PURE__ */ React.createElement("div", { className: "pm-empty" }, /* @__PURE__ */ React.createElement("div", { className: "pm-empty-ic" }, /* @__PURE__ */ React.createElement(Icon, { name: icon, size: 20 })), /* @__PURE__ */ React.createElement("h3", null, title), desc && /* @__PURE__ */ React.createElement("p", null, desc), action);
|
|
420
|
+
}
|
|
390
421
|
function Sparkline({ points, color = "var(--pm-accent)" }) {
|
|
391
422
|
const max = Math.max(...points);
|
|
392
423
|
const min = Math.min(...points);
|
|
393
424
|
const range = max - min || 1;
|
|
394
|
-
const coords = points.map((
|
|
395
|
-
|
|
396
|
-
31 - (
|
|
425
|
+
const coords = points.map((point, index) => [
|
|
426
|
+
index / (points.length - 1 || 1) * 92 + 2,
|
|
427
|
+
31 - (point - min) / range * 24
|
|
397
428
|
]);
|
|
398
|
-
const line = coords.map(([x, y],
|
|
429
|
+
const line = coords.map(([x, y], index) => `${index === 0 ? "M" : "L"}${x.toFixed(1)},${y.toFixed(1)}`).join(" ");
|
|
399
430
|
const area = `${line} L94,33 L2,33 Z`;
|
|
400
|
-
return /* @__PURE__ */ React.createElement("svg", { className: "pm-spark", width: "94", height: "35", viewBox: "0 0 96 35", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { className: "pm-spark-area", d: area, fill: color, opacity: "0.
|
|
431
|
+
return /* @__PURE__ */ React.createElement("svg", { className: "pm-spark", width: "94", height: "35", viewBox: "0 0 96 35", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { className: "pm-spark-area", d: area, fill: color, opacity: "0.1" }), /* @__PURE__ */ React.createElement("path", { className: "pm-spark-line", d: line, fill: "none", stroke: color, strokeWidth: "1.6", strokeLinecap: "round" }));
|
|
401
432
|
}
|
|
402
|
-
function MiniBars({ values
|
|
403
|
-
const max = Math.max(...values);
|
|
404
|
-
return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap:
|
|
433
|
+
function MiniBars({ values }) {
|
|
434
|
+
const max = Math.max(...values, 1);
|
|
435
|
+
return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "flex-end", justifyContent: "center", gap: 4, width: 82, height: 38 } }, values.map((value, index) => /* @__PURE__ */ React.createElement(
|
|
405
436
|
"i",
|
|
406
437
|
{
|
|
407
|
-
key:
|
|
438
|
+
key: index,
|
|
408
439
|
className: "pm-mini-bar",
|
|
409
440
|
style: {
|
|
410
|
-
display: "block",
|
|
411
441
|
width: 5,
|
|
412
|
-
height: `${Math.max(18,
|
|
413
|
-
borderRadius:
|
|
414
|
-
background: color,
|
|
415
|
-
|
|
416
|
-
animationDelay: `${0.12 + i * 0.065}s`
|
|
442
|
+
height: `${Math.max(18, value / max * 100)}%`,
|
|
443
|
+
borderRadius: 3,
|
|
444
|
+
background: index === values.length - 1 ? "var(--pm-accent)" : "color-mix(in srgb, var(--pm-accent) 45%, transparent)",
|
|
445
|
+
animationDelay: `${index * 0.06}s`
|
|
417
446
|
}
|
|
418
447
|
}
|
|
419
448
|
)));
|
|
420
449
|
}
|
|
421
|
-
function Ring({ value, color = "var(--pm-accent)"
|
|
422
|
-
const
|
|
423
|
-
const
|
|
424
|
-
return /* @__PURE__ */ React.createElement("svg", { width:
|
|
450
|
+
function Ring({ value = 0.8, color = "var(--pm-accent)" }) {
|
|
451
|
+
const radius = 14;
|
|
452
|
+
const circumference = 2 * Math.PI * radius;
|
|
453
|
+
return /* @__PURE__ */ React.createElement("svg", { width: "40", height: "40", viewBox: "0 0 40 40", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("circle", { cx: "20", cy: "20", r: radius, fill: "none", stroke: "var(--pm-surface-3)", strokeWidth: "3" }), /* @__PURE__ */ React.createElement(
|
|
425
454
|
"circle",
|
|
426
455
|
{
|
|
427
456
|
className: "pm-ring-progress",
|
|
428
|
-
cx: "
|
|
429
|
-
cy: "
|
|
430
|
-
r,
|
|
457
|
+
cx: "20",
|
|
458
|
+
cy: "20",
|
|
459
|
+
r: radius,
|
|
431
460
|
fill: "none",
|
|
432
461
|
stroke: color,
|
|
433
|
-
strokeWidth: "3
|
|
462
|
+
strokeWidth: "3",
|
|
434
463
|
strokeLinecap: "round",
|
|
435
|
-
strokeDasharray:
|
|
436
|
-
strokeDashoffset:
|
|
437
|
-
transform: "rotate(-90
|
|
438
|
-
style: { "--pm-ring-full": c, "--pm-ring-offset": c * (1 - Math.min(1, Math.max(0, value))) }
|
|
464
|
+
strokeDasharray: circumference,
|
|
465
|
+
strokeDashoffset: circumference * (1 - Math.max(0, Math.min(1, value))),
|
|
466
|
+
transform: "rotate(-90 20 20)"
|
|
439
467
|
}
|
|
440
|
-
)
|
|
468
|
+
));
|
|
441
469
|
}
|
|
442
470
|
function KpiCard({ label, value, unit, sub, chart }) {
|
|
443
|
-
return /* @__PURE__ */ React.createElement(
|
|
444
|
-
}
|
|
445
|
-
function EmptyState({ icon = "plus", tone: tone2 = "gold", title, desc, action }) {
|
|
446
|
-
return /* @__PURE__ */ React.createElement("div", { className: "pm-empty" }, /* @__PURE__ */ React.createElement("div", { className: cx("pm-empty-ic", tone2 && `pm-empty-ic--${tone2}`) }, /* @__PURE__ */ React.createElement(Icon, { name: icon, size: 21 })), /* @__PURE__ */ React.createElement("h3", null, title), desc && /* @__PURE__ */ React.createElement("p", null, desc), action);
|
|
447
|
-
}
|
|
448
|
-
function PageHero({ eyebrow, title, subtitle, children }) {
|
|
449
|
-
return /* @__PURE__ */ React.createElement("section", { className: "pm-hero pm-hero--page" }, /* @__PURE__ */ React.createElement("div", { className: "pm-hero-inner" }, /* @__PURE__ */ React.createElement("div", null, eyebrow && /* @__PURE__ */ React.createElement("div", { className: "pm-eyebrow" }, eyebrow), /* @__PURE__ */ React.createElement("h1", null, title), subtitle && /* @__PURE__ */ React.createElement("p", null, subtitle)), children && /* @__PURE__ */ React.createElement("div", { className: "pm-hero-actions" }, children)));
|
|
450
|
-
}
|
|
451
|
-
function formatTime(value) {
|
|
452
|
-
if (!value) return "\u2014";
|
|
453
|
-
const date = new Date(value);
|
|
454
|
-
if (Number.isNaN(date.getTime())) return "\u2014";
|
|
455
|
-
const pad = (number) => String(number).padStart(2, "0");
|
|
456
|
-
return `${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
|
|
457
|
-
}
|
|
458
|
-
function platformTone(platform) {
|
|
459
|
-
return "neutral";
|
|
460
|
-
return "neutral";
|
|
461
|
-
}
|
|
462
|
-
function formatTone(format) {
|
|
463
|
-
return format === "\u89C6\u9891" ? "blue" : "violet";
|
|
464
|
-
}
|
|
465
|
-
const TYPE_META = {
|
|
466
|
-
peer: { label: "\u540C\u884C\u5206\u6790", tone: "orange", icon: "search" },
|
|
467
|
-
search: { label: "\u5185\u5BB9\u5206\u6790", tone: "blue", icon: "search" },
|
|
468
|
-
topics: { label: "\u4ECA\u65E5\u9009\u9898", tone: "neutral", icon: "checks" },
|
|
469
|
-
script: { label: "\u811A\u672C", tone: "violet", icon: "book" },
|
|
470
|
-
plan: { label: "\u83B7\u5BA2\u65B9\u6848", tone: "green", icon: "plan" },
|
|
471
|
-
account: { label: "\u8D26\u53F7\u5206\u6790", tone: "red", icon: "user" }
|
|
472
|
-
};
|
|
473
|
-
function typeMeta(type) {
|
|
474
|
-
return TYPE_META[type] || TYPE_META.script;
|
|
475
|
-
}
|
|
476
|
-
function scriptFormatOf(archive) {
|
|
477
|
-
if (archive?.scriptFormat === "video" || archive?.format === "video") return "video";
|
|
478
|
-
if (archive?.scriptFormat === "image" || archive?.format === "image") return "image";
|
|
479
|
-
return String(archive?.title || "").startsWith("\u89C6\u9891\u811A\u672C") ? "video" : "image";
|
|
480
|
-
}
|
|
481
|
-
function archiveTypeMeta(archive) {
|
|
482
|
-
const meta = typeMeta(archive?.type);
|
|
483
|
-
if (archive?.type !== "script") return meta;
|
|
484
|
-
return scriptFormatOf(archive) === "video" ? { ...meta, label: "\u89C6\u9891\u811A\u672C" } : { ...meta, label: "\u56FE\u6587\u811A\u672C" };
|
|
485
|
-
}
|
|
486
|
-
function tagTone(tag) {
|
|
487
|
-
if (!tag) return "neutral";
|
|
488
|
-
if (tag.includes("\u9A6C\u4E0A\u62CD")) return "red";
|
|
489
|
-
if (tag.includes("\u6536\u85CF")) return "blue";
|
|
490
|
-
if (tag.includes("\u6DA8\u7C89")) return "violet";
|
|
491
|
-
if (tag.includes("\u8F6C\u5316")) return "green";
|
|
492
|
-
if (tag.includes("\u4FE1\u4EFB") || tag.includes("\u7F6E\u9876")) return "gold";
|
|
493
|
-
return "neutral";
|
|
494
|
-
}
|
|
495
|
-
function makePeerArchive(account, data) {
|
|
496
|
-
const posts = data?.posts || [];
|
|
497
|
-
return {
|
|
498
|
-
id: `peer-${Date.now()}`,
|
|
499
|
-
type: "peer",
|
|
500
|
-
title: `\u62C6\u89E3\u300C${account.replace(/^@/, "")}\u300D\uFF1A${posts.length} \u6761\u771F\u5B9E\u516C\u5F00\u7ED3\u679C`,
|
|
501
|
-
platform: data?.platform || "\u5C0F\u7EA2\u4E66",
|
|
502
|
-
summary: `\u4ECE\u672C\u5730 Chromium \u516C\u5F00\u9875\u9762\u91C7\u96C6 ${posts.length} \u6761\u7ED3\u679C\uFF1B${data?.summary?.length ? "\u5DF2\u751F\u6210\u540C\u884C\u5185\u5BB9\u62C6\u89E3\u3002" : "AI \u62C6\u89E3\u672A\u5B8C\u6210\uFF0C\u4FDD\u7559\u539F\u59CB\u7ED3\u679C\u3002"}`,
|
|
503
|
-
time: (/* @__PURE__ */ new Date()).toISOString(),
|
|
504
|
-
profileVersion: 1,
|
|
505
|
-
sections: [
|
|
506
|
-
{ h: "\u771F\u5B9E\u7ED3\u679C", list: posts.slice(0, 12).map((post) => `\u300C${post.title}\u300D${post.likes ? ` \xB7 ${post.likes} \u8D5E` : ""}`) },
|
|
507
|
-
...data?.summary?.length ? [{ h: "AI \u62C6\u89E3", list: data.summary }] : [],
|
|
508
|
-
...data?.tags?.length ? [{ h: "\u53EF\u590D\u7528\u6807\u7B7E", list: data.tags }] : []
|
|
509
|
-
]
|
|
510
|
-
};
|
|
511
|
-
}
|
|
512
|
-
function makeSearchArchive(keyword, data) {
|
|
513
|
-
const posts = data?.posts || [];
|
|
514
|
-
const report = data?.report || {};
|
|
515
|
-
return {
|
|
516
|
-
id: `search-${Date.now()}`,
|
|
517
|
-
type: "search",
|
|
518
|
-
title: `\u641C\u5185\u5BB9\u300C${keyword}\u300D\uFF1A${posts.length} \u6761\u771F\u5B9E\u516C\u5F00\u7ED3\u679C`,
|
|
519
|
-
platform: data?.platform || "\u5C0F\u7EA2\u4E66 / \u6296\u97F3",
|
|
520
|
-
summary: `\u4ECE\u672C\u5730 Chromium \u516C\u5F00\u9875\u9762\u91C7\u96C6 ${posts.length} \u6761\u7ED3\u679C\uFF1B${report.themes?.length ? "\u5DF2\u751F\u6210\u9700\u6C42\u3001\u7A7A\u4F4D\u548C\u53EF\u62CD\u89D2\u5EA6\u3002" : "AI \u5206\u6790\u672A\u5B8C\u6210\uFF0C\u4FDD\u7559\u539F\u59CB\u7ED3\u679C\u3002"}`,
|
|
521
|
-
time: (/* @__PURE__ */ new Date()).toISOString(),
|
|
522
|
-
profileVersion: 1,
|
|
523
|
-
sections: [
|
|
524
|
-
{ h: "\u771F\u5B9E\u7ED3\u679C", list: posts.slice(0, 12).map((post) => `\u300C${post.title}\u300D${post.author ? ` \xB7 ${post.author}` : ""}${post.likes ? ` \xB7 ${post.likes} \u8D5E` : ""}`) },
|
|
525
|
-
...report.themes?.length ? [{ h: "\u9AD8\u9891\u9700\u6C42", list: report.themes }] : [],
|
|
526
|
-
...report.gaps?.length ? [{ h: "\u4F60\u53EF\u4EE5\u5207\u7684\u7A7A\u4F4D", list: report.gaps }] : [],
|
|
527
|
-
...report.angles?.length ? [{ h: "\u53EF\u62CD\u89D2\u5EA6", list: report.angles }] : []
|
|
528
|
-
]
|
|
529
|
-
};
|
|
530
|
-
}
|
|
531
|
-
function scriptToText(topic, format, script) {
|
|
532
|
-
if (format === "image") {
|
|
533
|
-
return [
|
|
534
|
-
`# ${script.title}`,
|
|
535
|
-
"",
|
|
536
|
-
script.body,
|
|
537
|
-
"",
|
|
538
|
-
"## \u56FE\u7247\u5EFA\u8BAE",
|
|
539
|
-
...script.images.map((i) => `${i.no}. ${i.text}`),
|
|
540
|
-
"",
|
|
541
|
-
`\u6807\u7B7E\uFF1A${script.tags.join(" ")}`
|
|
542
|
-
].join("\n");
|
|
543
|
-
}
|
|
544
|
-
return [
|
|
545
|
-
`# ${script.title}`,
|
|
546
|
-
"",
|
|
547
|
-
script.body,
|
|
548
|
-
"",
|
|
549
|
-
"## \u62CD\u6444\u811A\u672C",
|
|
550
|
-
...script.shots.map((s) => `${s.no}. [${s.dur}] ${s.scene}\uFF5C${s.line}`),
|
|
551
|
-
"",
|
|
552
|
-
`\u6807\u7B7E\uFF1A${script.tags.join(" ")}`
|
|
553
|
-
].join("\n");
|
|
471
|
+
return /* @__PURE__ */ React.createElement("div", { className: "pm-kpi" }, /* @__PURE__ */ React.createElement("div", { className: "pm-kpi-main" }, /* @__PURE__ */ React.createElement("div", { className: "pm-kpi-label" }, label), /* @__PURE__ */ React.createElement("div", { className: "pm-kpi-value" }, value, /* @__PURE__ */ React.createElement("small", null, unit)), /* @__PURE__ */ React.createElement("div", { className: "pm-kpi-sub" }, sub)), /* @__PURE__ */ React.createElement("div", { className: "pm-kpi-chart" }, chart));
|
|
554
472
|
}
|
|
555
473
|
function aiFamily(model) {
|
|
556
474
|
const key = `${model?.provider || ""} ${model?.model || ""}`.toLowerCase();
|
|
@@ -569,6 +487,9 @@
|
|
|
569
487
|
if (aiActivity.includes("\u590D\u76D8")) return "review";
|
|
570
488
|
return "work";
|
|
571
489
|
}
|
|
490
|
+
function SidebarToggleIcon({ size = 17 }) {
|
|
491
|
+
return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", focusable: "false" }, /* @__PURE__ */ React.createElement("rect", { x: "2.5", y: "3.5", width: "15", height: "13", rx: "3.2", stroke: "currentColor", strokeWidth: "1.35" }), /* @__PURE__ */ React.createElement("path", { d: "M8 4v12", stroke: "currentColor", strokeWidth: "1.35" }), /* @__PURE__ */ React.createElement("path", { d: "M5.7 4.2h1.7v11.6H5.7A1.9 1.9 0 0 1 3.8 13.9V6.1a1.9 1.9 0 0 1 1.9-1.9Z", fill: "currentColor", opacity: "0.28" }));
|
|
492
|
+
}
|
|
572
493
|
function Sidebar({ page, onNavigate, archiveCount, topicCount, model, aiActivity, planStale }) {
|
|
573
494
|
const [collapsed, setCollapsed] = useState(() => {
|
|
574
495
|
try {
|
|
@@ -577,14 +498,14 @@
|
|
|
577
498
|
return false;
|
|
578
499
|
}
|
|
579
500
|
});
|
|
501
|
+
const family = aiFamily(model);
|
|
502
|
+
const task = activityKind(aiActivity);
|
|
580
503
|
const nav = [
|
|
581
504
|
{ id: "workbench", label: "\u5DE5\u4F5C\u53F0", icon: "workbench", count: topicCount, countTone: "red" },
|
|
582
505
|
{ id: "review", label: "\u590D\u76D8", icon: "review", count: archiveCount, countTone: "violet" },
|
|
583
506
|
{ id: "plan", label: "\u83B7\u5BA2\u65B9\u6848", icon: "plan", alert: planStale },
|
|
584
507
|
{ id: "settings", label: "\u8BBE\u7F6E", icon: "settings" }
|
|
585
508
|
];
|
|
586
|
-
const family = aiFamily(model);
|
|
587
|
-
const task = activityKind(aiActivity);
|
|
588
509
|
function toggle() {
|
|
589
510
|
setCollapsed((value) => {
|
|
590
511
|
const next = !value;
|
|
@@ -595,30 +516,54 @@
|
|
|
595
516
|
return next;
|
|
596
517
|
});
|
|
597
518
|
}
|
|
598
|
-
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(
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
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.2"));
|
|
520
|
+
}
|
|
521
|
+
function rpcEndpoint() {
|
|
522
|
+
if (window.location.protocol === "dsh-app:") {
|
|
523
|
+
return new URL("/pomelo-rpc", window.location.origin).toString();
|
|
524
|
+
}
|
|
525
|
+
const injected = window.__POMELO_RPC__;
|
|
526
|
+
if (injected && !String(injected).startsWith("dsh-app:")) return injected;
|
|
527
|
+
const streamBase = window.__DSH_TRANSPORT__?.streamBaseUrl;
|
|
528
|
+
if (streamBase) return new URL("/pomelo-rpc", streamBase).toString();
|
|
529
|
+
return new URL("/pomelo-rpc", window.location.origin).toString();
|
|
530
|
+
}
|
|
531
|
+
async function rpc(action, payload = {}) {
|
|
532
|
+
if (!HOST_MODE) throw new Error("\u672C\u5730 Host \u672A\u8FDE\u63A5");
|
|
533
|
+
const endpoint = rpcEndpoint();
|
|
534
|
+
async function call(token) {
|
|
535
|
+
return fetch(endpoint, {
|
|
536
|
+
method: "POST",
|
|
537
|
+
credentials: "omit",
|
|
538
|
+
headers: {
|
|
539
|
+
"content-type": "application/json",
|
|
540
|
+
"x-pomelo-token": token
|
|
541
|
+
},
|
|
542
|
+
body: JSON.stringify({ action, payload })
|
|
543
|
+
});
|
|
544
|
+
}
|
|
545
|
+
let response;
|
|
546
|
+
try {
|
|
547
|
+
response = await call(window.__POMELO_TOKEN__);
|
|
548
|
+
let body = await response.json().catch(() => ({}));
|
|
549
|
+
if ((response.status === 401 || response.status === 403) && body?.error?.code === "AUTH") {
|
|
550
|
+
const probe = await fetch(`${endpoint}/token`, { cache: "no-store" }).catch(() => null);
|
|
551
|
+
const fresh = probe?.ok ? await probe.json().catch(() => ({})) : null;
|
|
552
|
+
if (fresh?.token && fresh.token !== window.__POMELO_TOKEN__) {
|
|
553
|
+
window.__POMELO_TOKEN__ = fresh.token;
|
|
554
|
+
response = await call(fresh.token);
|
|
555
|
+
body = await response.json().catch(() => ({}));
|
|
556
|
+
}
|
|
557
|
+
}
|
|
558
|
+
if (!response.ok || !body.ok) {
|
|
559
|
+
const detail = body?.error?.message ? `\uFF1A${body.error.message}` : "";
|
|
560
|
+
throw new Error(`\u672C\u5730\u670D\u52A1\u8BF7\u6C42\u5931\u8D25\uFF08${response.status}\uFF09${detail} \xB7 ${endpoint}`);
|
|
561
|
+
}
|
|
562
|
+
return body.data;
|
|
563
|
+
} catch (error) {
|
|
564
|
+
if (error?.message?.includes("\u672C\u5730\u670D\u52A1\u8BF7\u6C42\u5931\u8D25")) throw error;
|
|
565
|
+
throw new Error(`${error?.message || "Failed to fetch"} \xB7 ${endpoint}`);
|
|
566
|
+
}
|
|
622
567
|
}
|
|
623
568
|
function ToastStack({ toasts, onClose }) {
|
|
624
569
|
return /* @__PURE__ */ React.createElement("div", { className: "pm-toast-wrap", "aria-live": "polite", "aria-atomic": "false" }, toasts.map((t) => /* @__PURE__ */ React.createElement("div", { key: t.id, className: cx("pm-toast", `pm-toast--${t.kind || "success"}`, t.leaving && "is-leaving") }, /* @__PURE__ */ React.createElement("span", { className: "pm-toast-ic" }, /* @__PURE__ */ React.createElement(
|
|
@@ -2088,7 +2033,7 @@ ${section.bullets.map((b) => `- ${b}`).join("\n")}`).join("\n\n");
|
|
|
2088
2033
|
}
|
|
2089
2034
|
|
|
2090
2035
|
// client/src/styles.css
|
|
2091
|
-
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';
|
|
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';
|
|
2092
2037
|
|
|
2093
2038
|
// client/src/index.jsx
|
|
2094
2039
|
window.__ModuleLoader__.load({
|