@charset "UTF-8";
:root {
  /* 1.0 Alpha · 遮罩 / 徽章（语义层 alias 引用） */
  --color-black: #000000;
  --color-black-a55: rgb(0 0 0 / 55%);
  --color-white-a18: rgb(255 255 255 / 18%);
  /* 1.1 Neutral · 灰阶 · white + gray 15 档 */
  --color-white: #ffffff;
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-150: #ebebeb;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-600: #525252;
  --color-gray-700: #404040;
  --color-gray-750: #2f2f2f;
  --color-gray-800: #262626;
  --color-gray-875: #1d1d1d;
  --color-gray-900: #171717;
  --color-gray-950: #0d0d0d;
  --color-gray-990: #0a0a0a;
  /* 1.2 58picAI Lime · 品牌色 */
  --color-lime-50: #f7fee7;
  --color-lime-100: #ecfccb;
  --color-lime-200: #d9f99d;
  --color-lime-300: #bef264;
  --color-lime-350: #b0eb4c;
  --color-lime-400: #a3e635;
  --color-lime-500: #84cc16;
  --color-lime-600: #65a30d;
  --color-lime-700: #4d7c0f;
  --color-lime-800: #3f6212;
  --color-lime-900: #365314;
  --color-lime-950: #1a2e05;
  /* 1.3 Info Blue */
  --color-blue-50: #ebf3ff;
  --color-blue-100: #ddeaff;
  --color-blue-200: #c3d7ff;
  --color-blue-300: #a8c5ff;
  --color-blue-350: #95b7fb;
  --color-blue-400: #82a9f7;
  --color-blue-500: #5b8def;
  --color-blue-600: #1e6bec;
  --color-blue-700: #1957c2;
  --color-blue-800: #1449a2;
  --color-blue-900: #0e3b82;
  --color-blue-950: #172554;
  /* 1.4 Success · green */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-350: #68e696;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  /* 1.5 Warning · amber */
  --color-amber-50: #fff7ed;
  --color-amber-100: #ffedd5;
  --color-amber-200: #fed7aa;
  --color-amber-300: #fdba74;
  --color-amber-350: #fca658;
  --color-amber-400: #fb923c;
  --color-amber-500: #f97316;
  --color-amber-600: #ea580c;
  --color-amber-700: #b3450e;
  --color-amber-800: #8d370b;
  --color-amber-900: #682808;
  --color-amber-950: #391605;
  /* 1.6 Danger · red */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-350: #f78787;
  --color-red-400: #f26868;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b51319;
  --color-red-800: #8d0a12;
  --color-red-900: #6b070d;
  --color-red-950: #2d0306;
}

:root {
  --space-0: 0; /* 零间距 · trailing chevron 贴字 / 纵向 padding 归零 */
  --space-0-5: 2px; /* 分段控件内边距 / 极密半档 */
  --space-1: 4px; /* icon 与文字内联微间距 / inline badge 内边距 */
  --space-1-5: 6px; /* Chip 内 icon 与文字间距 / 密集 UI 半档 */
  --space-2: 8px; /* 紧凑组件内 padding / Chip 内左右 */
  --space-2-5: 10px; /* 菜单项左右 padding / Chip 紧凑内边距 */
  --space-3: 12px; /* 标准按钮 padding / 表单行内 gap */
  --space-3-5: 14px; /* 小图标光学尺寸（tag remove icon · 设计半步） */
  --space-4: 16px; /* 卡片内边距 / 表单字段间距 */
  --space-4-5: 18px; /* 表单控件尺寸（Checkbox / Radio · 设计 §10/§11） */
  --space-5: 20px; /* 标题与内容 / 中等组件间 */
  --space-5-5: 22px; /* 大按钮内图标（btn-icon-lg · 设计 §3 258:1155） */
  --space-6: 24px; /* 段落间距 / 卡片之间 */
  --space-7: 28px; /* 小尺寸组件高度（btn-sm / chip-sm / tabs-pill-sm） */
  --space-8: 32px; /* Section 内部 padding / 模块间 */
  --space-9: 36px; /* 中尺寸组件高度（btn-md / input-md / search-md） */
  --space-10: 40px; /* 大 section 间距 / 内容分块 */
  --space-11: 44px; /* 大尺寸组件高度（btn-lg / chip-lg / tabs-pill-lg） */
  --space-12: 48px; /* 页面 padding / 大区块分隔 */
  --space-16: 64px; /* Hero 上下空间 / 顶级 page padding */
}

:root {
  /* radius/1 · 4px — 极小 · Tag / 内联 chip */
  --radius-1: 4px;
  /* radius/1_5 · 6px — 1.5 档（菜单项 menu-item/item-radius 等） */
  --radius-1-5: 6px;
  /* radius/2 · 8px — 小 · 按钮 / 输入框 */
  --radius-2: 8px;
  /* radius/2_5 · 10px — 2.5 档（组件矩阵 · upload dropzone 等） */
  --radius-2-5: 10px;
  /* radius/3 · 12px — 中 · 卡片（桌面） */
  --radius-3: 12px;
  /* radius/4 · 16px — 大 · 卡片（移动）/ 小 Modal */
  --radius-4: 16px;
  /* radius/6 · 24px — 特大 · 大 Modal / 移动 Bottom */
  --radius-6: 24px;
  /* radius/8 · 32px — 超大 · 全屏 Sheet / iOS Widget */
  --radius-8: 32px;
  /* radius/12 · 48px — 巨大 · Showcase 面板 */
  --radius-12: 48px;
  /* radius/full · 9999px — 胶囊 · 胶囊按钮 / 头像（对齐设计稿 9999） */
  --radius-full: 9999px;
}

/* 营销浮标字体 · 字魂新曲黑（千图 CDN）— 供 --font-family-brand / --font-family-promo 使用 */
@font-face {
  font-family: "zihunxinquhei";
  src: url("https://static.qiantucdn.com/static/images/zihun/zihunxinquhei_small.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --font-family-sans: "Inter", "PingFang SC", "Noto Sans SC", system-ui, sans-serif; /* 拉丁/数字主字体（中文走系统 PingFang fallback） */
  --font-family-mono: "JetBrains Mono", ui-monospace, monospace; /* 代码 / token 值展示 */
  --font-family-brand: zihunxinquhei, "\5B57\9B42\65B0\66F2\9ED1", sans-serif; /* 营销浮标专用（PRO/NEW/VIP/限时/热门） */
  --font-family-default: "PingFang SC", "Inter", "Noto Sans SC", system-ui, sans-serif; /* 默认 — 所有正文 / UI 文本 */
  --font-family-promo: zihunxinquhei, "\5B57\9B42\65B0\66F2\9ED1", "PingFang SC Heavy", "Noto Sans SC Black", sans-serif; /* 营销浮标 — 字魂新曲黑（@font-face 已加载）+ fallback 栈 */
}

:root {
  --font-weight-regular: 400; /* 常规 · 正文默认 */
  --font-weight-medium: 500; /* 中等 · 次强调 / sidebar 选中 */
  --font-weight-semibold: 600; /* 半粗 · 标题 / 按钮 / 强调 */
  --font-weight-bold: 700; /* 粗 · Hero CTA / 重点 */
  --font-weight-black: 900; /* 特黑 · 营销浮标（配 font/family/brand） */
}

:root {
  --font-size-2xs: 10px; /* 极小 · 仅数字/拉丁角标，禁中文正文 */
  --font-size-xs: 12px; /* 小 · caption / 标签 / xs 按钮 */
  --font-size-sm: 14px; /* 正文 · body 默认 / sm-md 按钮 */
  --font-size-base: 16px; /* 中 · 强调正文 / lg 按钮 / 输入框 */
  --font-size-lg: 20px; /* 大 · section title / H4 */
  --font-size-xl: 24px; /* 特大 · H3 */
  --font-size-2xl: 32px; /* 巨大 · H2 */
  --font-size-3xl: 40px; /* 超大 · Section / Page hero title */
  --font-size-4xl: 48px; /* 巨幅 · 顶层 Section header */
  /* 按钮字号语义 · 单行 UI 专用，不用于正文排版 */
  --font-size-button-sm: 12px; /* 按钮小 · xs 按钮 */
  --font-size-button-md: 14px; /* 按钮默认 · md 按钮（默认） */
  --font-size-button-lg: 16px; /* 按钮大 · lg 按钮 */
}

:root {
  --font-lh-tight: 1.2; /* 紧 · 多行标题（H1~H4） */
  --font-lh-normal: 1.5; /* 正常 · 多行正文 body */
  --font-lh-loose: 1.75; /* 松 · 长文阅读 / 营销大段 */
}

:root {
  --font-ls-normal: 0; /* 正常 · 默认（中文/混排一律 0） */
  --font-ls-tight: -0.5px; /* 紧 · 大字号标题视觉收紧（可选） */
}

:root,
[data-theme=light] {
  /* shadow/none · 无阴影 · 贴底 */
  --shadow-none: none;
  /* shadow/sm · 轻浮 · Y 1 · Blur 2 · α 0.05 */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  /* shadow/md · 中浮 · Y 4 · Blur 12 · α 0.10 */
  --shadow-md: 0 4px 12px 0 rgb(0 0 0 / 0.1);
  /* shadow/lg · 重浮 · Y 12 · Blur 32 · S −4 · α 0.12 ＋ 1px outline α 0.05 */
  --shadow-lg: 0 12px 32px -4px rgb(0 0 0 / 0.12),
    0 0 0 1px rgb(0 0 0 / 0.05);
  /* shadow/xl · 顶浮 · Y 25 · Blur 50 · S −12 · α 0.25 */
  --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  /* shadow/focus · 焦点环 · Spread 3 · α 黑 0.20 */
  --shadow-focus: 0 0 0 3px rgb(0 0 0 / 0.2);
}

[data-theme=dark] {
  --shadow-none: none;
  /* shadow/sm · α 0.30 */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  /* shadow/md · α 0.40 */
  --shadow-md: 0 4px 12px 0 rgb(0 0 0 / 0.4);
  /* shadow/lg · α 0.50 ＋ outline α 0.20 */
  --shadow-lg: 0 12px 32px -4px rgb(0 0 0 / 0.5),
    0 0 0 1px rgb(0 0 0 / 0.2);
  /* shadow/xl · α 0.60 */
  --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.6);
  /* shadow/focus · α 白 0.30 */
  --shadow-focus: 0 0 0 3px rgb(255 255 255 / 0.3);
}

:root {
  /* duration/instant · 100ms — 即时反馈 / 微互动（按下 · 勾选） */
  --duration-instant: 100ms;
  /* duration/fast · 150ms — hover / focus 切换 */
  --duration-fast: 150ms;
  /* duration/base · 200ms — 大部分 UI 过渡默认值 */
  --duration-base: 200ms;
  /* duration/slow · 300ms — Drawer / Modal 进出 */
  --duration-slow: 300ms;
  /* duration/slower · 500ms — Page transition · loading 强调 */
  --duration-slower: 500ms;
  /* easing/standard — 大部分 UI 过渡 · Material 标准缓动 */
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  /* easing/accelerate — 元素离开舞台 */
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
  /* easing/decelerate — 元素进入舞台 */
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  /* easing/spring — AI Hero / Lime 反馈等活力感场景 */
  --easing-spring: cubic-bezier(0.5, 1.5, 0.5, 1);
}

:root {
  /* z/base · 0 — 普通内容流 */
  --z-base: 0;
  /* z/raised · 10 — hover 浮起 · focus ring */
  --z-raised: 10;
  /* z/sticky · 100 — Sticky 顶栏 · Sidebar 自固定 */
  --z-sticky: 100;
  /* z/drawer · 200 — Drawer 抽屉 */
  --z-drawer: 200;
  /* z/modal · 300 — Modal 弹窗 + scrim */
  --z-modal: 300;
  /* z/dropdown · 400 — Dropdown · Popover · Combobox；须高于 modal，避免 modal 内下拉被压住 */
  --z-dropdown: 400;
  /* z/toast · 500 — Toast · Banner 系统通知 */
  --z-toast: 500;
  /* z/tooltip · 700 — Tooltip · 永远在最上 */
  --z-tooltip: 700;
}

:root {
  /* border/0 · 0 — 无描边（透明 / 仅填充表达） */
  --border-0: 0;
  /* border/1 · 1px — Card / Input / Divider 默认描边 */
  --border-1: 1px;
  /* border/1_5 · 1.5px — Upload dropzone 虚线等 */
  --border-1-5: 1.5px;
  /* border/2 · 2px — Focus ring · 选中态强调 */
  --border-2: 2px;
  /* border/4 · 4px — Promo Card · 营销容器装饰描边 */
  --border-4: 4px;
}

:root {
  /* opacity/disabled · 0.4 — 整组件禁用透明度 */
  --opacity-disabled: 0.4;
  /* opacity/hover-overlay · 0.08 — Hover 浮层 · 黑/白叠加 8% */
  --opacity-hover-overlay: 0.08;
  /* opacity/press-overlay · 0.12 — Press 浮层 · 黑/白叠加 12% */
  --opacity-press-overlay: 0.12;
  /* opacity/scrim · 0.5 — Modal scrim 默认 · 50% 黑 */
  --opacity-scrim: 0.5;
  /* opacity/scrim-strong · 0.7 — Modal scrim 强阻断 · 不可逆操作确认 */
  --opacity-scrim-strong: 0.7;
  /* opacity/scrim-light · 0.3 — Modal scrim 弱阻断 · 非阻塞 sheet */
  --opacity-scrim-light: 0.3;
}

:root {
  --grid-gutter: var(--space-6);
  --grid-margin: var(--space-6);
  --grid-container-max: 1280px;
  --grid-content-min: 768px;
  --layout-bp-2240: 2240px; /* content-max · app-layout.scss max-width */
  --layout-sidebar-collapsed: 60px;
  --layout-sidebar-standard: 264px;
  --layout-sidebar-wide: 320px;
  --layout-sidebar-drawer: 280px;
  --layout-sidebar-drag-min: 60px;
  --layout-sidebar-drag-max: 360px;
  --layout-sidebar-drag-snap-live: 12px;
  --layout-sidebar-drag-snap-release: 30px;
  --card-min: 216px;
  --card-min-lg: 240px;
  --card-max-count: 6;
  --layout-cards-grid: repeat(auto-fill, minmax(var(--card-min), 1fr));
  --layout-margin: clamp(
    16px,
    max(calc(12.22vw - 56px), calc(25vw - 240px)),
    240px
  );
  --layout-margin-max: 240px;
  --layout-margin-override-360: 12px;
  --layout-margin-override-480: 16px;
}

@media (max-width: 480px) {
  :root {
    --layout-margin: var(--layout-margin-override-480);
  }
}
@media (max-width: 360px) {
  :root {
    --layout-margin: var(--layout-margin-override-360);
  }
}
@media (min-width: 2400px) {
  :root {
    --card-min: var(--card-min-lg);
  }
}
:root {
  --surface-app: var(--color-white); /* 应用背景 */
  --surface-card: var(--color-white); /* 卡片 */
  --surface-disabled: var(--color-gray-200); /* 禁用组件底 */
  --surface-elev-lg: var(--color-white); /* 卡片·重浮（第三层阴影） */
  --surface-elev-md: var(--color-white); /* 卡片·中浮（第二层阴影） */
  --surface-elev-sm: var(--color-white); /* 卡片·轻浮（第一层阴影） */
  --surface-elev-xl: var(--color-white); /* 卡片·顶浮（最高层阴影） */
  --surface-elevated: var(--color-white); /* 悬浮层 / Menu / Popover */
  --surface-input: var(--color-gray-100); /* 输入框底 */
  --surface-inverse: var(--color-gray-990); /* 反色底·主按钮 / Snackbar */
  --surface-inverse-hover: var(--color-gray-800); /* 反色底 Hover */
  --surface-inverse-press: var(--color-gray-700); /* 反色底 Press */
  --surface-overlay: rgb(0 0 0 / var(--opacity-scrim)); /* 浮层遮罩·引用 opacity/scrim 0.5（50% 黑，对齐设计稿） */
  --surface-panel: var(--color-gray-100); /* 侧栏 / 顶栏底 */
  --surface-media-fill: var(--color-gray-200); /* 媒体占位 / 骨架屏底（wf-card/media-fill · skeleton） */
  --surface-static-dark: var(--color-gray-950); /* 恒暗底·不随主题翻转 */
  --surface-subtle: var(--color-gray-50); /* 轻微信息底 / 装箱 */
}

[data-theme=dark] {
  --surface-app: var(--color-gray-950); /* 应用背景 */
  --surface-card: var(--color-gray-875); /* 卡片 */
  --surface-disabled: var(--color-gray-750); /* 禁用组件底 */
  --surface-elev-lg: var(--color-gray-700); /* 卡片·重浮（第三层阴影） */
  --surface-elev-md: var(--color-gray-750); /* 卡片·中浮（第二层阴影） */
  --surface-elev-sm: var(--color-gray-800); /* 卡片·轻浮（第一层阴影） */
  --surface-elev-xl: var(--color-gray-600); /* 卡片·顶浮（最高层阴影） */
  --surface-elevated: var(--color-gray-800); /* 悬浮层 / Menu / Popover */
  --surface-input: var(--color-gray-875); /* 输入框底 */
  --surface-inverse: var(--color-gray-100); /* 反色底·主按钮 / Snackbar */
  --surface-inverse-hover: var(--color-gray-200); /* 反色底 Hover */
  --surface-inverse-press: var(--color-gray-300); /* 反色底 Press */
  --surface-overlay: var(--color-black-a55); /* dark 同值，遮罩不随主题变色 */
  --surface-panel: var(--color-gray-900); /* 侧栏 / 顶栏底 */
  --surface-media-fill: var(--color-gray-700); /* 媒体占位 / 骨架屏底 */
  --surface-static-dark: var(--color-gray-950); /* 恒暗底·不随主题翻转 */
  --surface-subtle: var(--color-gray-900); /* 轻微信息底 / 装箱 */
}

:root {
  --fg-1: var(--color-gray-950); /* 主文本·最高对比度，标题 / 正文首选 */
  --fg-2: var(--color-gray-600); /* 次文本·辅助说明 / 元数据 */
  --fg-3: var(--color-gray-400); /* 暗文 / 禁用前景 / 次级占位符 */
  --fg-4: var(--color-gray-300); /* 极弱层：placeholder / 示例文字 */
  --fg-disabled: var(--color-gray-400); /* 禁用组件文字 */
  --fg-inverse: var(--color-white); /* 反色底上的文字（配 surface-inverse） */
  --fg-static-light: var(--color-white); /* 恒亮文字·不随主题翻转 */
}

[data-theme=dark] {
  --fg-1: var(--color-white); /* 主文本·最高对比度，标题 / 正文首选 */
  --fg-2: var(--color-gray-200); /* 次文本·辅助说明 / 元数据 */
  --fg-3: var(--color-gray-400); /* 暗文 / 禁用前景 / 次级占位符 */
  --fg-4: var(--color-gray-600); /* 极弱层：placeholder / 示例文字 */
  --fg-disabled: var(--color-gray-400); /* 禁用组件文字 */
  --fg-inverse: var(--color-gray-990); /* 反色底上的文字（配 surface-inverse） */
  --fg-static-light: var(--color-white); /* 恒亮文字·不随主题翻转 */
}

:root {
  --line-1: var(--color-gray-100); /* 极淡分割线·表格内分隔 */
  --line-2: var(--color-gray-200); /* 常规描边·卡片 / 输入框 */
  --line-3: var(--color-gray-300); /* 中等描边·强调边框 */
  --line-strong: var(--color-gray-400); /* hover 时强描边 */
  --line-focus: var(--sem-info); /* 焦点环·无障碍 focus 状态 */
}

[data-theme=dark] {
  --line-1: var(--color-gray-800); /* 极淡分割线·表格内分隔 */
  --line-2: var(--color-gray-750); /* 常规描边·卡片 / 输入框 */
  --line-3: var(--color-gray-700); /* 中等描边·强调边框 */
  --line-strong: var(--color-gray-600); /* hover 时强描边 */
  --line-focus: var(--sem-info); /* 焦点环·无障碍 focus 状态 */
}

:root {
  --state-active: var(--color-gray-150); /* 激活背景·比 hover 深一档 */
  --state-chip-bg: var(--color-gray-100); /* Chip 底色 */
  --state-hover: var(--color-gray-100); /* 悬停背景 */
  --state-press: var(--color-gray-200); /* 按压背景 */
  --state-selected-bg: var(--color-gray-100); /* 选中底 */
  --state-selected-fg: var(--fg-1); /* 选中前景文字 */
  --state-selected-indicator: var(--fg-1); /* 选中指示器（下划线 / 侧条） */
}

[data-theme=dark] {
  --state-active: var(--color-gray-750); /* 激活背景·比 hover 深一档 */
  --state-chip-bg: var(--color-gray-800); /* Chip 底色 */
  --state-hover: var(--color-gray-750); /* 悬停背景·设计修正（原 gray-800） */
  --state-press: var(--color-gray-700); /* 按压背景 */
  --state-selected-bg: var(--color-gray-750); /* 选中底·设计修正（原 gray-800） */
  --state-selected-fg: var(--fg-1); /* 选中前景文字 */
  --state-selected-indicator: var(--fg-1); /* 选中指示器（下划线 / 侧条） */
}

:root {
  --accent-lime: var(--color-lime-400); /* 品牌主·场景按钮 / lime 元素复用 */
  --accent-lime-bg: var(--color-lime-50); /* lime 信息底·选中态 */
  --accent-lime-fg: var(--color-lime-700); /* lime 底上文字 / 消息 */
  --accent-lime-hover: var(--color-lime-300); /* 强调 Hover */
  --accent-lime-on: var(--color-gray-950); /* lime 底上对比文字（主按钮文字） */
  --accent-lime-press: var(--color-lime-500); /* 强调 Press */
}

[data-theme=dark] {
  --accent-lime: var(--color-lime-400); /* 品牌主·场景按钮 / lime 元素复用 */
  --accent-lime-bg: var(--color-lime-950); /* lime 信息底·选中态 */
  --accent-lime-fg: var(--color-lime-200); /* lime 底上文字 / 消息 */
  --accent-lime-hover: var(--color-lime-300); /* 强调 Hover */
  --accent-lime-on: var(--color-gray-950); /* lime 底上对比文字（主按钮文字） */
  --accent-lime-press: var(--color-lime-500); /* 强调 Press */
}

:root {
  --sem-ai-badge-bg: var(--color-black-a55); /* AI 徽章底·55% 黑 */
  --sem-ai-badge-fg: var(--color-white); /* AI 徽章文字 */
  --sem-danger: var(--color-red-600); /* 危险·警示色（图标 / 描边） */
  --sem-danger-bg: var(--color-red-100); /* 危险信息底 */
  --sem-danger-fg: var(--color-red-700); /* 危险信息文字 */
  --sem-danger-hover: var(--color-red-700); /* 危险 Hover */
  --sem-danger-on: var(--color-white); /* 危险底上文字 */
  --sem-danger-press: var(--color-red-800); /* 危险 Press */
  --sem-info: var(--color-blue-600); /* 信息·提示色（图标 / 描边 / focus） */
  --sem-info-bg: var(--color-blue-50); /* 信息底 */
  --sem-info-fg: var(--color-blue-700); /* 信息文字 */
  --sem-info-hover: var(--color-blue-700); /* 信息 Hover */
  --sem-info-on: var(--color-white); /* 信息底上文字 */
  --sem-info-press: var(--color-blue-900); /* 信息 Press */
  --sem-success: var(--color-green-600); /* 成功·完成色（图标 / 描边） */
  --sem-success-bg: var(--color-green-100); /* 成功信息底 */
  --sem-success-fg: var(--color-green-700); /* 成功信息文字 */
  --sem-success-hover: var(--color-green-700); /* 成功 Hover */
  --sem-success-on: var(--color-white); /* 成功底上文字 */
  --sem-success-press: var(--color-green-800); /* 成功 Press */
  --sem-warning: var(--color-amber-600); /* 警告·注意色（图标 / 描边） */
  --sem-warning-bg: var(--color-amber-100); /* 警告信息底 */
  --sem-warning-fg: var(--color-amber-700); /* 警告信息文字 */
  --sem-warning-hover: var(--color-amber-700); /* 警告 Hover */
  --sem-warning-on: var(--color-white); /* 警告底上文字 */
  --sem-warning-press: var(--color-amber-800); /* 警告 Press */
}

[data-theme=dark] {
  --sem-ai-badge-bg: var(--color-black-a55); /* AI 徽章底·55% 黑 */
  --sem-ai-badge-fg: var(--color-white); /* AI 徽章文字 */
  --sem-danger: var(--color-red-400); /* 危险·警示色（图标 / 描边） */
  --sem-danger-bg: var(--color-red-800); /* 危险信息底 */
  --sem-danger-fg: var(--color-red-200); /* 危险信息文字 */
  --sem-danger-hover: var(--color-red-600); /* 危险 Hover */
  --sem-danger-on: var(--color-white); /* 危险底上文字 */
  --sem-danger-press: var(--color-red-700); /* 危险 Press */
  --sem-info: var(--color-blue-500); /* 信息·提示色（图标 / 描边 / focus） */
  --sem-info-bg: var(--color-blue-900); /* 信息底 */
  --sem-info-fg: var(--color-blue-300); /* 信息文字 */
  --sem-info-hover: var(--color-blue-600); /* 信息 Hover */
  --sem-info-on: var(--color-white); /* 信息底上文字 */
  --sem-info-press: var(--color-blue-700); /* 信息 Press */
  --sem-success: var(--color-green-500); /* 成功·完成色（图标 / 描边） */
  --sem-success-bg: var(--color-green-800); /* 成功信息底 */
  --sem-success-fg: var(--color-green-100); /* 成功信息文字 */
  --sem-success-hover: var(--color-green-600); /* 成功 Hover */
  --sem-success-on: var(--color-white); /* 成功底上文字 */
  --sem-success-press: var(--color-green-700); /* 成功 Press */
  --sem-warning: var(--color-amber-400); /* 警告·注意色（图标 / 描边） */
  --sem-warning-bg: var(--color-amber-800); /* 警告信息底 */
  --sem-warning-fg: var(--color-amber-200); /* 警告信息文字 */
  --sem-warning-hover: var(--color-amber-600); /* 警告 Hover */
  --sem-warning-on: var(--color-white); /* 警告底上文字 */
  --sem-warning-press: var(--color-amber-700); /* 警告 Press */
}

:root,
[data-theme=light],
[data-theme=dark] {
  --avatar-border: var(--line-2); /* 头像描边 */
  --avatar-fallback-bg: var(--surface-elev-md); /* 无图头像底色 */
  --avatar-fallback-fg: var(--fg-1); /* 无图头像图标色 */
  --avatar-status-online: var(--sem-success); /* 在线 */
  --avatar-status-busy: var(--sem-danger); /* 忙碌 */
  --avatar-status-ring: var(--surface-elevated); /* 状态点外圈（与底色分隔） */
  --avatar-group-more-bg: var(--surface-subtle); /* "+N" 气泡底 */
  --avatar-group-more-fg: var(--fg-2); /* "+N" 气泡文字 */
  --badge-ai-bg: var(--sem-ai-badge-bg); /* AI 角标底 */
  --badge-ai-fg: var(--sem-ai-badge-fg); /* AI 角标文字 */
  --badge-danger: var(--sem-danger); /* 危险角标色 */
  --badge-danger-on: var(--sem-danger-on); /* 危险角标文字 */
  --badge-dot: var(--sem-danger); /* 红点（无文字） */
  --badge-info: var(--sem-info); /* 信息角标色 */
  --badge-info-on: var(--sem-info-on); /* 信息角标文字 */
  --badge-lime: var(--accent-lime); /* lime 角标色 */
  --badge-lime-bg: var(--accent-lime-bg); /* lime 角标底 */
  --badge-lime-fg: var(--accent-lime-fg); /* lime 角标文字 */
  --badge-lime-on: var(--accent-lime-on); /* lime 角标上文字 */
  --badge-new-bg: var(--accent-lime); /* "新" 角标底 */
  --badge-new-fg: var(--accent-lime-on); /* "新" 角标文字 */
  --badge-notification-bg: var(--sem-danger); /* 消息数角标底 */
  --badge-notification-fg: var(--fg-inverse); /* 消息数角标文字 */
  --badge-success: var(--sem-success); /* 成功角标色 */
  --badge-success-on: var(--sem-success-on); /* 成功角标文字 */
  --badge-warning: var(--sem-warning); /* 警告角标色 */
  --badge-warning-on: var(--sem-warning-on); /* 警告角标文字 */
  --banner-danger-bg: var(--sem-danger-bg); /* 危险横幅底 */
  --banner-danger-border: var(--sem-danger); /* 危险横幅描边 */
  --banner-danger-fg: var(--sem-danger-fg); /* 危险横幅文字 */
  --banner-info-bg: var(--sem-info-bg); /* 信息横幅底 */
  --banner-info-border: var(--sem-info); /* 信息横幅描边 */
  --banner-info-fg: var(--sem-info-fg); /* 信息横幅文字 */
  --banner-success-bg: var(--sem-success-bg); /* 成功横幅底 */
  --banner-success-border: var(--sem-success); /* 成功横幅描边 */
  --banner-success-fg: var(--sem-success-fg); /* 成功横幅文字 */
  --banner-warning-bg: var(--sem-warning-bg); /* 警告横幅底 */
  --banner-warning-border: var(--sem-warning); /* 警告横幅描边 */
  --banner-warning-fg: var(--sem-warning-fg); /* 警告横幅文字 */
  --breadcrumb-chevron: var(--fg-2); /* 箭头颜色 */
  --breadcrumb-fg-current: var(--fg-1); /* 当前层文字 */
  --breadcrumb-fg-inactive: var(--fg-3); /* 非活跃文字 */
  --breadcrumb-separator: var(--fg-3); /* 分隔符颜色 */
  --btn-danger-bg: var(--sem-danger); /* 危险按钮底 */
  --btn-danger-disabled-bg: var(--surface-disabled); /* 危险按钮禁用底 */
  --btn-danger-disabled-fg: var(--fg-disabled); /* 危险按钮禁用文字 */
  --btn-danger-fg: var(--sem-danger-on); /* 危险按钮文字 */
  --btn-danger-hover-bg: var(--sem-danger-hover); /* 危险悬停 */
  --btn-danger-press-bg: var(--sem-danger-press); /* 危险按下 */
  --btn-ghost-disabled-fg: var(--fg-disabled); /* 幽灵禁用文字 */
  --btn-ghost-fg: var(--fg-2); /* 幽灵文字 */
  --btn-ghost-hover-bg: var(--state-hover); /* 幽灵悬停 */
  --btn-ghost-press-bg: var(--state-press); /* 幽灵按下 */
  --btn-hero-bg: var(--accent-lime); /* Hero 底 */
  --btn-hero-disabled-bg: var(--surface-disabled); /* Hero 禁用底 */
  --btn-hero-disabled-fg: var(--fg-disabled); /* Hero 禁用文字 */
  --btn-hero-fg: var(--accent-lime-on); /* Hero 文字 */
  --btn-hero-hover-bg: var(--accent-lime-hover); /* Hero 悬停 */
  --btn-hero-press-bg: var(--accent-lime-press); /* Hero 按下 */
  --btn-link-disabled-fg: var(--fg-disabled); /* 链接禁用 */
  --btn-link-fg: var(--fg-2); /* 链接文字 */
  --btn-link-hover-fg: var(--fg-1); /* 链接悬停 */
  --btn-link-press-fg: var(--sem-info); /* 链接按下 */
  --btn-primary-bg: var(--fg-1); /* 主按钮底 */
  --btn-primary-disabled-bg: var(--surface-disabled); /* 主按钮禁用底 */
  --btn-primary-disabled-fg: var(--fg-disabled); /* 主按钮禁用文字 */
  --btn-primary-fg: var(--fg-inverse); /* 主按钮文字 */
  --btn-primary-hover-bg: var(--surface-inverse-hover); /* 主按钮悬停 */
  --btn-primary-press-bg: var(--surface-inverse-press); /* 主按钮按下 */
  --btn-secondary-bg: var(--surface-elev-sm); /* 次按钮底 */
  --btn-secondary-border: var(--line-2); /* Secondary 描边 */
  --btn-secondary-border-disabled: var(--line-3); /* Secondary 禁用描边 */
  --btn-secondary-disabled-bg: var(--surface-disabled); /* 次按钮禁用底 */
  --btn-secondary-disabled-fg: var(--fg-disabled); /* 次按钮禁用文字 */
  --btn-secondary-fg: var(--fg-1); /* 次按钮文字 */
  --btn-secondary-hover-bg: var(--state-hover); /* 次按钮悬停 */
  --btn-secondary-press-bg: var(--state-press); /* 次按钮按下 */
  --canvas-handle-bg: var(--surface-elevated); /* 控制点背景 */
  --canvas-handle-border: var(--fg-1); /* 控制点描边 */
  --canvas-panel-bg: var(--surface-elevated); /* 面板背景 */
  --canvas-panel-body-fg: var(--fg-2); /* 面板正文 */
  --canvas-panel-border: var(--line-2); /* 面板描边 */
  --canvas-panel-card-bg: var(--surface-subtle); /* 面板卡片底 */
  --canvas-panel-danger-fg: var(--sem-danger); /* 危险操作色 */
  --canvas-panel-disabled-fg: var(--fg-disabled); /* 禁用文字 */
  --canvas-panel-divider: var(--line-2); /* 面板分隔线 */
  --canvas-panel-info-bg: var(--sem-info-bg); /* 信息提示底 */
  --canvas-panel-item-fg: var(--fg-1); /* 列表项文字 */
  --canvas-panel-item-selected-bg: var(--state-selected-bg); /* 选中项底 */
  --canvas-panel-item-selected-fg: var(--state-selected-fg); /* 选中项文字 */
  --canvas-panel-placeholder-fg: var(--fg-3); /* 占位文字 */
  --canvas-panel-tab-selected-bg: var(--state-selected-bg); /* 选中 Tab 底 */
  --canvas-panel-tab-selected-fg: var(--fg-1); /* 选中 Tab 文字 */
  --canvas-panel-title-fg: var(--fg-1); /* 面板标题 */
  --canvas-toolbar-bg: var(--surface-elevated); /* 工具栏背景 */
  --canvas-toolbar-btn-hover-bg: var(--surface-subtle); /* 工具按钮 hover */
  --canvas-toolbar-chip-bg: var(--surface-card); /* 工具栏 Chip 底 */
  --canvas-toolbar-danger-fg: var(--sem-danger); /* 危险操作色 */
  --canvas-toolbar-divider: var(--line-2); /* 分隔线 */
  --canvas-toolbar-icon-fg: var(--fg-1); /* 图标主色 */
  --canvas-toolbar-icon-secondary-fg: var(--fg-3); /* 图标次色 */
  --canvas-toolbar-text-fg: var(--fg-1); /* 文字主色 */
  --canvas-toolbar-text-secondary-fg: var(--fg-3); /* 文字次色 */
  --card-bg: var(--surface-card); /* 卡片背景 */
  --card-border: var(--line-2); /* 卡片描边（alias） */
  --card-border-default: var(--line-2); /* 默认描边 */
  --card-border-hover: var(--line-3); /* hover 描边 */
  --card-border-selected: var(--fg-1); /* 选中描边 #0d0d0d（对齐设计稿，原 accent-lime 漂移） */
  --card-hover-bg: var(--state-hover); /* hover 底色 */
  --card-hover-scrim-end: var(--surface-inverse); /* hover 渐变遮罩 */
  --card-meta-fg: var(--fg-2); /* 元数据文字 */
  --card-title-fg: var(--fg-1); /* 卡片标题 */
  --checkbox-bg: var(--surface-input); /* 默认底色（与 Input 对齐，防在面板/Menu 中与背景色打架） */
  --checkbox-bg-checked: var(--fg-1); /* 选中填充深色 #0d0d0d（设计 305:991 改回填充态） */
  --checkbox-border: var(--line-2); /* off 描边 #e5e5e5（设计 checkbox/border） */
  --checkbox-border-hover: var(--fg-1); /* hover 描边（与 Input hover 对齐） */
  --checkbox-border-checked: var(--fg-1); /* on 描边=填充色 #0d0d0d */
  --checkbox-check-fg: var(--fg-inverse); /* 勾/横杠白色（深底上） */
  --checkbox-disabled-bg-checked: var(--surface-disabled); /* 禁用选中浅灰填充 */
  --checkbox-disabled-bg-unchecked: var(--surface-disabled); /* 禁用未选浅灰底 #e5e5e5（对齐设计稿，原 transparent 漂移） */
  --checkbox-disabled-border: var(--line-3); /* 禁用描边 */
  --checkbox-disabled-check-fg: var(--fg-disabled); /* 禁用勾色 */
  --checkbox-indeterminate-bg: var(--fg-1); /* 半选填充深色 #0d0d0d + 白横杠（设计） */
  --chip-active-bg: var(--fg-1); /* 激活底色 */
  --chip-active-fg: var(--fg-inverse); /* 激活文字 */
  --chip-bg: var(--surface-elev-sm); /* 默认底色 */
  --chip-border: var(--line-2); /* 描边 */
  --chip-border-active: var(--fg-1); /* 激活描边 */
  --chip-disabled-fg: var(--fg-disabled); /* 禁用文字 */
  --chip-fg: var(--fg-1); /* 文字 */
  --chip-fg-muted: var(--fg-3); /* 次要文字 */
  --chip-hover-bg: var(--state-hover); /* hover 底色 */
  --chip-indicator: var(--state-selected-indicator); /* 选中指示器 */
  --chip-info-bg: var(--sem-info-bg); /* 信息 Chip 底 */
  --chip-info-fg: var(--sem-info-fg); /* 信息 Chip 文字 */
  --composer-attachment-border: var(--line-2); /* 附件描边 */
  --composer-attachment-delete-bg: var(--fg-1); /* 删除按钮底 */
  --composer-attachment-delete-fg: var(--fg-inverse); /* 删除按钮图标 */
  --composer-attachment-filename-fg: var(--fg-1); /* 文件名文字 */
  --composer-attachment-filetype-fg: var(--fg-3); /* 文件类型文字 */
  --composer-attachment-play-icon-fg: var(--fg-inverse); /* 播放图标色 */
  --composer-attachment-scrim: var(--surface-inverse); /* 附件遮罩 */
  --composer-attachment-tile-bg: var(--surface-subtle); /* 附件卡片底 */
  --composer-attachment-tile-bg-elevated: var(--surface-card); /* 附件卡片浮起底 */
  --composer-bg: var(--surface-elev-sm); /* 输入区底色 */
  --composer-bg-hero: var(--surface-elev-sm); /* Hero 输入区底色 */
  --composer-border: var(--line-2); /* 输入区描边 */
  --composer-border-focus: var(--line-focus); /* 聚焦描边 */
  --composer-placeholder-fg: var(--fg-3); /* 占位文字 */
  --composer-send-bg-empty: var(--surface-elev-sm); /* 空状态发送按钮底 */
  --composer-text-fg: var(--fg-1); /* 输入文字 */
  --content-toolbar-btn-active-bg: var(--state-selected-bg); /* 激活按钮背景 */
  --content-toolbar-btn-hover-bg: var(--state-hover); /* 悬停按钮背景 */
  --content-toolbar-divider: var(--divider-subtle); /* 工具栏分隔线 */
  --content-toolbar-icon-fg: var(--icon-subtle-fg); /* 图标颜色 */
  --content-toolbar-icon-fg-active: var(--fg-1); /* 激活图标色 */
  --conv-action-bar-bg: var(--surface-inverse-hover); /* 操作栏背景 */
  --conv-error-bg: var(--sem-danger-bg); /* 错误消息背景 */
  --conv-error-fg: var(--sem-danger); /* 错误消息文字 */
  --conv-surface: var(--surface-panel); /* 会话面背景 */
  --conv-text-danger: var(--sem-danger); /* 危险文字 */
  --conv-text-inverse: var(--fg-inverse); /* 反色文字 */
  --conv-text-primary: var(--fg-1); /* 主要文字 */
  --conv-text-secondary: var(--fg-2); /* 次要文字 */
  --conv-text-tertiary: var(--fg-3); /* 三级文字 */
  --conv-thumbnail-bg: var(--surface-input); /* 缩略图底色 */
  --conv-track: var(--surface-app); /* 消息轨道 */
  --conv-user-msg-bg: var(--accent-lime-bg); /* 用户消息背景 */
  --conv-user-msg-border: var(--line-2); /* 用户消息描边 */
  --cost-pill-bg: var(--surface-static-dark); /* 费用标签底（恒暗） */
  --cost-pill-fg: var(--fg-static-light); /* 费用标签文字（恒亮） */
  --display-bg: var(--surface-app); /* 展示组件背景 */
  --display-bg-elevated: var(--surface-card); /* 展示组件浮起背景 */
  --display-bg-inverse: var(--surface-inverse); /* 反色背景 */
  --display-bg-subtle: var(--surface-panel); /* 展示组件次级背景 */
  --display-border: var(--line-2); /* 展示组件描边 */
  --display-border-elevated: var(--surface-elev-sm); /* 浮起描边 */
  --display-divider: var(--line-2); /* 展示组件分割线 */
  --display-icon: var(--fg-1); /* 通用图标 */
  --display-text: var(--fg-1); /* 通用主文字 */
  --display-text-muted: var(--fg-3); /* 弱化文字 */
  --display-text-on-primary: var(--btn-primary-fg); /* 主按钮上文字 */
  --display-text-secondary: var(--fg-2); /* 通用副文字 */
  --divider-default: var(--line-2); /* 默认分隔线 */
  --divider-strong: var(--line-1); /* 强分隔线·浅色区域底（Figma 确认：line/1 = #F5F5F5） */
  --divider-subtle: var(--line-3); /* 弱分隔线·较深细线（Figma 确认：line/3 = #D4D4D4） */
  --drawer-bg: var(--surface-card); /* 抽屉背景 */
  --drawer-border: var(--line-2); /* 抽屉描边 */
  --drawer-scrim: var(--surface-overlay); /* 抽屉遮罩 */
  --dropdown-bg: var(--surface-elev-sm); /* 下拉面板底 */
  --dropdown-border: var(--line-2); /* 下拉面板描边 */
  --dropdown-shadow-bg: var(--surface-elevated); /* 下拉阴影层底 */
  --font-panel-ai-btn-bg: var(--accent-lime); /* AI 按钮背景 */
  --font-panel-bg: var(--surface-elevated); /* 面板背景 */
  --font-panel-border: var(--line-2); /* 面板描边 */
  --font-panel-divider: var(--line-1); /* 面板分隔线 */
  --font-panel-label-fg: var(--fg-2); /* 标签文字 */
  --font-panel-value-fg: var(--fg-1); /* 数值文字 */
  --form-field-error-fg: var(--sem-danger); /* 错误提示文字 */
  --form-field-helper-fg: var(--fg-3); /* 辅助文字 */
  --form-field-input-bg: var(--surface-input); /* 输入框底色 */
  --form-field-input-border: var(--line-2); /* 输入框描边 */
  --form-field-label-fg: var(--fg-2); /* 标签文字 */
  --form-field-required-fg: var(--sem-danger); /* 必填星号色 */
  --form-field-success-fg: var(--sem-success); /* 成功提示文字 */
  --icon-btn-bg-filled: var(--surface-elev-sm); /* 填充形底色 */
  --icon-btn-disabled-bg: var(--surface-disabled); /* 禁用底色 */
  --icon-btn-disabled-fg: var(--fg-disabled); /* 禁用图标色 */
  --icon-btn-fg: var(--fg-2); /* 图标色 */
  --icon-btn-hover-bg: var(--state-hover); /* hover 底色 */
  --icon-btn-outlined-bg: var(--btn-secondary-bg); /* 描边形底色 */
  --icon-btn-outlined-border: var(--btn-secondary-border); /* 描边形边框 */
  --icon-btn-outlined-border-disabled: var(--btn-secondary-border-disabled); /* 描边形禁用边框 */
  --icon-btn-outlined-disabled-bg: var(--btn-secondary-disabled-bg); /* 描边形禁用底 */
  --icon-btn-outlined-hover-bg: var(--btn-secondary-hover-bg); /* 描边形 hover */
  --icon-btn-outlined-press-bg: var(--btn-secondary-press-bg); /* 描边形 press */
  --icon-btn-press-bg: var(--state-press); /* press 底色 */
  --icon-danger-fg: var(--sem-danger); /* 危险图标色 */
  --icon-default-fg: var(--fg-1); /* 默认图标色 */
  --icon-inverse-fg: var(--fg-inverse); /* 反色图标 */
  --icon-muted-fg: var(--fg-2); /* 弱化图标色 */
  --icon-subtle-fg: var(--fg-3); /* 次要图标色 */
  --image-preview-overlay-bg: var(--fg-1); /* 叠加层背景 */
  --image-preview-overlay-fg: var(--fg-inverse); /* 叠加层文字 */
  --image-preview-placeholder-bg: var(--surface-subtle); /* 占位背景 */
  --inline-link-fg-default: var(--sem-info); /* 默认链接色 */
  --inline-link-fg-hover: var(--sem-info-hover); /* 悬停链接色 */
  --inline-mention-bg: var(--surface-subtle); /* 提及背景 */
  --inline-mention-fg: var(--fg-1); /* 提及文字 */
  --inline-mention-icon-fg: var(--fg-2); /* 提及图标色 */
  --input-bg: var(--surface-input); /* 输入框底色 */
  --input-border: var(--line-2); /* 输入框描边 */
  --input-border-error: var(--sem-danger); /* 错误描边 */
  --input-border-focus: var(--fg-1); /* 聚焦描边 */
  --input-border-hover: var(--fg-1); /* 悬停描边（设计稿标注 line/1 有误，以实现为准） */
  --input-disabled-bg: var(--surface-disabled); /* 禁用底色 */
  --input-disabled-fg: var(--fg-disabled); /* 禁用文字 */
  --input-divider: var(--line-2); /* 内部分隔线 */
  --input-placeholder-fg: var(--fg-3); /* 占位文字 */
  --input-readonly-bg: var(--surface-subtle); /* 只读底色 */
  --input-readonly-fg: var(--fg-2); /* 只读文字 */
  --input-text-error: var(--sem-danger-fg); /* 错误提示文字 */
  --input-text-fg: var(--fg-1); /* 输入文字 */
  --input-text-helper: var(--fg-2); /* 辅助文字 */
  --input-text-label: var(--fg-1); /* 标签文字 */
  --list-row-bg: var(--surface-subtle); /* 行底色 */
  --list-row-bg-hover: var(--state-hover); /* hover 底色 */
  --list-row-border: var(--line-2); /* 行描边 */
  --list-row-check-bg: var(--fg-1); /* 勾选填充 */
  --list-row-check-fg: var(--fg-inverse); /* 勾选图标 */
  --list-row-fg-primary: var(--fg-1); /* 主文字 */
  --list-row-fg-secondary: var(--fg-3); /* 次文字 */
  --list-row-leading-fallback-bg: var(--surface-subtle); /* 前置占位底 */
  --list-row-radio-border: var(--fg-3); /* 单选描边 */
  --list-row-trailing-btn-bg: var(--surface-card); /* 后置按钮底 */
  --list-row-trailing-btn-border: var(--line-2); /* 后置按钮描边 */
  --list-row-trailing-btn-fg: var(--fg-1); /* 后置按钮文字 */
  --menu-item-bg: var(--surface-elevated); /* 菜单底色 */
  --menu-item-bg-hover: var(--state-hover); /* hover 底色 */
  --menu-item-bg-press: var(--state-press); /* press 底色 */
  --menu-item-bg-selected: var(--state-hover); /* 选中底·中性灰（原 accent-lime-bg 浅绿） */
  --menu-item-check-fg: var(--state-selected-indicator); /* 选中勾色 */
  --menu-item-control-border: var(--line-2); /* 控件描边（开关/复选） */
  --menu-item-control-on: var(--accent-lime); /* 控件激活色 */
  --menu-item-control-on-fg: var(--accent-lime-on); /* 控件激活文字 */
  --menu-item-divider: var(--line-3); /* 分隔线 */
  --menu-item-fg-danger: var(--sem-danger); /* 危险操作文字 */
  --menu-item-fg-default: var(--fg-1); /* 默认文字 */
  --menu-item-fg-disabled: var(--fg-disabled); /* 禁用文字 */
  --menu-item-fg-secondary: var(--fg-2); /* 次要文字 */
  --menu-item-group-label-fg: var(--fg-3); /* 分组标题文字 */
  --menu-item-icon-danger: var(--sem-danger); /* 危险图标 */
  --menu-item-icon-fg: var(--icon-default-fg); /* 图标色 */
  --menu-item-kbd-fg: var(--fg-3); /* 快捷键文字 */
  --menu-item-media-bg: var(--surface-subtle); /* 资源缩略图底 */
  --menu-item-trailing-fg: var(--fg-3); /* 尾部辅助文字 */
  --modal-bg: var(--surface-card); /* 弹窗背景 */
  --modal-border: var(--line-2); /* 弹窗描边 */
  --modal-footer-bg: var(--surface-card); /* 弹窗底栏背景 */
  --modal-scrim: var(--surface-overlay); /* 遮罩 */
  --modal-text-body: var(--fg-2); /* 弹窗正文 */
  --modal-text-title: var(--fg-1); /* 弹窗标题 */
  --pagination-bg-current: var(--state-active); /* 当前页浅灰底（原 accent-lime-bg 浅绿） */
  --pagination-bg-default: var(--surface-card); /* 默认页码底 */
  --pagination-bg-hover: var(--state-hover); /* hover 底 */
  --pagination-border: var(--line-2); /* 描边 */
  --pagination-disabled-fg: var(--fg-disabled); /* 禁用文字 */
  --pagination-fg-current: var(--fg-1); /* 当前页文字 */
  --pagination-fg-default: var(--fg-2); /* 默认文字 */
  --pagination-fg-hover: var(--fg-1); /* hover 文字 */
  --promo-bg: var(--surface-elev-md); /* 推广卡片底 */
  --promo-border: var(--line-2); /* 推广卡片描边 */
  --promo-cta-bg: var(--accent-lime); /* CTA 按钮底 */
  --promo-cta-fg: var(--accent-lime-on); /* CTA 按钮文字 */
  --promo-text-fg: var(--fg-1); /* 推广文字 */
  --radio-bg: var(--surface-input); /* 默认底色（与 Input/Checkbox 对齐，防在面板/Menu 中与背景色打架） */
  --radio-border: var(--line-2); /* off 描边 #e5e5e5（设计 radio/border） */
  --radio-border-checked: var(--fg-1); /* on 描边深色 #0d0d0d（原 accent-lime） */
  --radio-border-hover: var(--fg-1); /* hover 描边（与 Input/Checkbox hover 对齐） */
  --radio-disabled-border: var(--line-3); /* 禁用描边 */
  --radio-disabled-dot: var(--fg-disabled); /* 禁用圆点 */
  --radio-dot-checked: var(--fg-1); /* 选中内圆点 #0d0d0d（设计 305:1015 经典圆点） */
  --search-bg: var(--surface-input); /* 搜索框底色 */
  --search-border: var(--line-2); /* 搜索框描边 */
  --search-border-focused: var(--fg-1); /* 聚焦描边 */
  --search-clear-fg: var(--fg-3); /* 清除图标色 */
  --search-fg: var(--fg-1); /* 搜索文字 */
  --search-icon-fg: var(--icon-default-fg); /* 搜索图标色 */
  --search-placeholder-fg: var(--fg-3); /* 占位文字 */
  --select-bg: var(--surface-card); /* 选择器底色 */
  --select-border: var(--line-2); /* 选择器描边 */
  --select-border-focused: var(--fg-1); /* 聚焦描边 */
  --select-chevron-fg: var(--icon-default-fg); /* 下拉箭头色 */
  --select-fg: var(--fg-1); /* 选择文字 */
  --select-placeholder-fg: var(--fg-3); /* 占位文字 */
  --sidebar-bg: var(--surface-panel); /* 侧栏背景 */
  --sidebar-brand-bg: var(--accent-lime); /* 品牌色块底（lime） */
  --sidebar-brand-fg: var(--accent-lime-on); /* 品牌色块文字 */
  --sidebar-divider: var(--line-3); /* 分隔线 */
  --skeleton-bg: var(--surface-card); /* 骨架背景 */
  --skeleton-border: var(--line-2); /* 骨架描边 */
  --skeleton-shimmer-base: var(--surface-elevated); /* 闪光基色 */
  --skeleton-shimmer-highlight: var(--surface-panel); /* 闪光高光 */
  --suggestion-bg: var(--surface-card); /* 建议项背景 */
  --suggestion-fg: var(--fg-2); /* 建议项文字 */
  --suggestion-hover-bg: var(--state-hover); /* 建议项悬停背景 */
  --tabs-pill-bg-active: var(--surface-card); /* 选中胶囊白底（原 accent-lime-bg 浅绿） */
  --tabs-pill-bg-container: var(--surface-panel); /* 胶囊容器底 */
  --tabs-pill-bg-hover: var(--state-hover); /* hover 底 */
  --tabs-pill-border-active: var(--line-2); /* 选中描边 */
  --tabs-pill-fg-active: var(--fg-1); /* 选中文字 */
  --tabs-pill-fg-default: var(--fg-2); /* 默认文字 */
  --tabs-pill-fg-hover: var(--fg-1); /* hover 文字 */
  --tabs-pill-primary-bg-active: var(--btn-primary-bg); /* Primary 选中底 */
  --tabs-pill-primary-fg-active: var(--btn-primary-fg); /* Primary 选中文字 */
  --tabs-pill-primary-fg-default: var(--tabs-pill-fg-default); /* Primary 默认文字 */
  --tabs-segmented-bg: var(--surface-subtle); /* 分段容器底 */
  --tabs-segmented-bg-active: var(--surface-card); /* 选中段底 */
  --tabs-segmented-border: var(--line-2); /* 容器描边 */
  --tabs-segmented-divider: var(--line-2); /* 段间分隔 */
  --tabs-segmented-fg: var(--fg-2); /* 默认文字 */
  --tabs-segmented-fg-active: var(--fg-1); /* 选中文字 */
  --tabs-segmented-fg-hover: var(--fg-1); /* hover 文字 */
  --tabs-underline-fg-active: var(--fg-1); /* 激活 Tab 文字 */
  --tabs-underline-fg-default: var(--fg-2); /* 默认 Tab 文字 */
  --tabs-underline-fg-hover: var(--fg-1); /* hover Tab 文字 */
  --tabs-underline-indicator: var(--fg-1); /* 下划线指示器 */
  --tabs-underline-track: var(--line-2); /* 底轨描边 */
  --tag-danger-bg: var(--sem-danger-bg); /* 危险标签底 */
  --tag-danger-fg: var(--sem-danger-fg); /* 危险标签文字 */
  --tag-info-bg: var(--sem-info-bg); /* 信息标签底 */
  --tag-info-fg: var(--sem-info-fg); /* 信息标签文字 */
  --tag-lime-bg: var(--accent-lime-bg); /* lime 标签底 */
  --tag-lime-fg: var(--accent-lime-fg); /* lime 标签文字 */
  --tag-neutral-bg: var(--surface-subtle); /* 中性标签底 */
  --tag-neutral-fg: var(--fg-2); /* 中性标签文字 */
  --tag-outline-border: var(--line-1); /* 描边标签边框 */
  --tag-success-bg: var(--sem-success-bg); /* 成功标签底 */
  --tag-success-fg: var(--sem-success-fg); /* 成功标签文字 */
  --tag-warning-bg: var(--sem-warning-bg); /* 警告标签底 */
  --tag-warning-fg: var(--sem-warning-fg); /* 警告标签文字 */
  --title-menu-trigger-chevron: var(--fg-2); /* 触发箭头色 */
  --title-menu-trigger-fg: var(--fg-1); /* 触发文字色 */
  --toast-bg: var(--surface-elev-lg); /* Toast 背景 */
  --toast-body-fg: var(--fg-2); /* 正文文字 */
  --toast-border: var(--line-2); /* 描边 */
  --toast-close-hover-bg: var(--state-hover); /* 关闭按钮 hover */
  --toast-danger-fg: var(--sem-danger); /* 危险文字 */
  --toast-danger-icon: var(--sem-danger); /* 危险图标 */
  --toast-info-fg: var(--sem-info); /* 信息文字 */
  --toast-info-icon: var(--sem-info); /* 信息图标 */
  --toast-success-fg: var(--sem-success); /* 成功文字 */
  --toast-success-icon: var(--sem-success); /* 成功图标 */
  --toast-text-fg: var(--fg-1); /* 正文色（alias） */
  --toast-title-fg: var(--fg-1); /* 标题文字 */
  --toast-warning-fg: var(--sem-warning); /* 警告文字 */
  --toast-warning-icon: var(--sem-warning); /* 警告图标 */
  --toggle-disabled-thumb: var(--fg-disabled); /* 禁用滑块色 */
  --toggle-disabled-track: var(--surface-disabled); /* 禁用轨道色 */
  --toggle-thumb: var(--fg-inverse); /* 滑块纯白 #ffffff（对齐 Figma toggle/thumb，原 surface-panel #f5f5f5 漂移） */
  --toggle-thumb-border: var(--line-2); /* 滑块 0.5px 描边 · 设计 input/border #e5e5e5 */
  --toggle-track-off: var(--line-2); /* 设计 chip/border #e5e5e5 · 与 disabled 解耦（原 surface-disabled） */
  --toggle-track-on: var(--fg-1); /* 设计 chip/active-bg #0d0d0d · 选中态深色（原 accent-lime） */
  --topnav-bg: transparent; /* 顶栏背景 · 透明 */
  --upload-dropzone-bg: var(--surface-subtle); /* 拖放区背景 */
  --upload-dropzone-bg-hover: var(--state-hover); /* 拖放区 hover 背景·设计修正（原 accent-lime-bg 浅绿） */
  --upload-dropzone-border: var(--line-2); /* 拖放区描边 */
  --upload-dropzone-border-hover: var(--fg-1); /* 拖放区 hover 描边 */
  --upload-dropzone-hint-fg: var(--fg-3); /* 次提示文字 */
  --upload-dropzone-icon-fg: var(--fg-3); /* 拖放区图标 */
  --upload-dropzone-label-fg: var(--fg-2); /* 主提示文字 */
  /* —— Tooltip（悬停提示 · 暗底白字，跟随主题反相） —— */
  --tooltip-bg: var(--fg-1); /* 提示框背景 */
  --tooltip-fg: var(--fg-inverse); /* 提示框文字 */
  --tooltip-kbd-fg: var(--fg-3); /* 快捷键文字 */
  /* —— Progress（进度 · 线性/圆环） —— */
  --progress-track: var(--line-2); /* 进度轨道 */
  --progress-fill: var(--fg-1); /* 进度填充 */
  --progress-fill-danger: var(--sem-danger); /* 危险进度色 */
  --progress-value-fg: var(--fg-1); /* 进度数值文字 */
  /* wf-card · 工作流卡片（Figma §wf-card）*/
  --wf-card-bg: var(--surface-card); /* 卡片底 */
  --wf-card-border: var(--line-2); /* 描边 */
  --wf-card-border-error: var(--sem-danger); /* 错误描边 */
  --wf-card-border-selected: var(--fg-1); /* 选中描边 */
  --wf-card-content-bg: var(--surface-subtle); /* 内容区底 */
  --wf-card-control-fg: var(--fg-2); /* 控件图标 */
  --wf-card-doc-label: var(--fg-1); /* 文档标签 */
  --wf-card-error-fg: var(--sem-danger); /* 错误文字 */
  --wf-card-header-fg: var(--fg-2); /* 头部文字 */
  --wf-card-loading-fill: var(--fg-1); /* 加载进度填充 */
  --wf-card-loading-track: var(--line-2); /* 加载轨道 */
  --wf-card-media-fill: var(--surface-media-fill); /* 媒体占位底 */
  --wf-card-model-badge-bg: var(--surface-subtle); /* 模型徽章底 */
  --wf-card-model-badge-fg: var(--fg-2); /* 模型徽章文字 */
  --wf-card-overlay-bg: var(--surface-inverse); /* 蒙层底 */
  --wf-card-overlay-fg: var(--fg-inverse); /* 蒙层文字 */
  --wf-card-placeholder-fg: var(--fg-3); /* 占位文字 */
  --wf-card-play-bg: var(--surface-inverse); /* 播放钮底 */
  --wf-card-play-fg: var(--fg-inverse); /* 播放钮图标 */
  --wf-card-playhead: var(--sem-info); /* 播放头 */
  --wf-card-skeleton: var(--surface-media-fill); /* 骨架屏底 */
  --wf-card-port-bg: var(--surface-card); /* 端口底 */
  --wf-card-port-border: var(--line-2); /* 端口描边 */
  --wf-card-port-icon: var(--fg-2); /* 端口图标 */
  --wf-card-text-content: var(--fg-1); /* 文本内容 */
  --wf-card-waveform: var(--fg-2); /* 波形 */
}

:root {
  /* —— Button —— */
  --btn-sm-h: var(--space-7); /* 28px · 小按钮高度 */
  --btn-md-h: var(--space-9); /* 36px · 中按钮高度 */
  --btn-lg-h: var(--space-11); /* 44px · 大按钮高度 */
  --btn-padding-x-sm: var(--space-3); /* 12px · 小按钮水平内边距 */
  --btn-padding-x-md: var(--space-4); /* 16px · 中按钮水平内边距 */
  --btn-padding-x-lg: var(--space-6); /* 24px · 大按钮水平内边距 */
  --btn-gap-sm: var(--space-1); /* 4px · 小按钮图标与文字间距 */
  --btn-gap-md: var(--space-1-5); /* 6px · 中按钮图标与文字间距 */
  --btn-gap-lg: var(--space-2); /* 8px · 大按钮图标与文字间距 */
  --btn-gap-tight: var(--space-0); /* 0px · 无间距（纯图标） */
  --btn-icon-sm: var(--space-4); /* 16px · 小按钮内图标（对齐设计 §3 258:1155） */
  --btn-icon-md: var(--space-5); /* 20px · 中按钮内图标 */
  --btn-icon-lg: var(--space-5-5); /* 22px · 大按钮内图标 */
  --btn-radius: var(--radius-full); /* 胶囊圆角 */
  /* —— Icon Button —— */
  --icon-btn-sm-size: var(--btn-sm-h); /* 28px · 小图标按钮尺寸 */
  --icon-btn-md-size: var(--btn-md-h); /* 36px · 中图标按钮尺寸 */
  --icon-btn-lg-size: var(--btn-lg-h); /* 44px · 大图标按钮尺寸 */
  --icon-btn-padding-sm: var(--space-2); /* 8px · 小图标按钮内边距 */
  --icon-btn-padding-md: var(--space-2-5); /* 10px · 中图标按钮内边距 */
  --icon-btn-padding-lg: var(--space-3); /* 12px · 大图标按钮内边距 */
  /* —— Card —— */
  --card-padding-ai: var(--space-4); /* 16px · AI 卡片内边距 */
  --card-padding-material: var(--space-3); /* 12px · 素材卡片内边距 */
  --card-radius: var(--radius-4); /* 16px · 卡片圆角 */
  /* —— Checkbox / Radio —— */
  --checkbox-size: var(--space-4-5); /* 18px · 方框尺寸（设计 §10） */
  --checkbox-dash-w: var(--space-2); /* 8px · 半选横杠宽 */
  --radio-size: var(--space-4-5); /* 18px · 圆圈尺寸（设计 §11） */
  /* —— Toggle / Switch —— */
  --toggle-track-w: var(--space-10); /* 40px · 轨道宽（设计 §9 305:974） */
  --toggle-track-h: var(--space-6); /* 24px · 轨道高 */
  --toggle-thumb-size: var(--space-5); /* 20px · 滑块直径 */
  --toggle-thumb-offset: var(--space-0-5); /* 2px · 滑块与轨道边距 */
  --toggle-thumb-travel: var(--space-4); /* 16px · 行程 = 40 − 20 − 2×2 */
  /* —— Chip —— */
  --chip-xs-h: var(--space-6); /* 24px · 超小 Chip 高度 */
  --chip-sm-h: var(--space-7); /* 28px · 小 Chip 高度 */
  --chip-md-h: var(--space-9); /* 36px · 中 Chip 高度 */
  --chip-lg-h: var(--space-11); /* 44px · 大 Chip 高度 */
  --chip-padding-x-xs: var(--space-2-5); /* 10px · 超小 Chip 水平内边距 */
  --chip-padding-x-sm: var(--space-2-5); /* 10px · 小 Chip 水平内边距 */
  --chip-padding-x-md: var(--space-3); /* 12px · 中 Chip 水平内边距 */
  --chip-padding-x-lg: var(--space-4); /* 16px · 大 Chip 水平内边距 */
  --chip-gap: var(--space-1-5); /* 6px · 图标与文字间距 */
  --chip-radius: var(--radius-full); /* 胶囊圆角 */
  --chip-inline-radius: var(--space-1-5); /* 6px · 内嵌 Chip 小圆角 */
  /* —— Composer —— */
  --composer-idle-radius: var(--radius-full); /* 胶囊·收起态 */
  --composer-active-radius: var(--radius-8); /* 32px · 激活态圆角 */
  --composer-hero-radius: var(--radius-8); /* 32px · Hero 圆角 */
  --composer-expanded-radius: var(--radius-12); /* 48px · 展开态圆角 */
  --composer-padding-x: var(--space-4); /* 16px · 水平内边距 */
  --composer-padding-y: var(--space-3); /* 12px · 垂直内边距 */
  --composer-gap-input: var(--space-2); /* 8px · 输入区内部间距 */
  --composer-gap-tool: var(--space-1-5); /* 6px · 工具行间距 */
  --composer-gap-zone: var(--space-3); /* 12px · 区块间距 */
  /* —— Conv（会话） —— */
  --conv-model-tag-chip-gap: var(--space-2); /* 8px · 模型标签 Chip 内间距 */
  --conv-model-tag-row-gap: var(--space-4); /* 16px · 模型标签行间距 */
  --conv-run-summary-gap: var(--space-1-5); /* 6px · 运行摘要行间距 */
  --conv-run-summary-gap-tight: var(--space-0); /* 0px · 紧凑模式间距 */
  --conv-run-summary-pad-y: var(--space-1-5); /* 6px · 运行摘要垂直内边距 */
  --conv-tool-call-gap: var(--space-1-5); /* 6px · 工具调用行间距 */
  --conv-tool-call-pad-top: var(--space-2); /* 8px · 顶部内边距 */
  --conv-tool-call-pad-bottom: var(--space-4); /* 16px · 底部内边距 */
  --conv-tool-call-pad-left: var(--space-2-5); /* 10px · 左内边距 */
  --conv-tool-call-pad-right: var(--space-0); /* 0px · 右内边距 */
  --conv-tool-call-tree-col: var(--space-5); /* 20px · 树形缩进列宽 */
  /* —— Cost Pill —— */
  --cost-pill-font-size: var(--font-size-2xs); /* 费用标签字号 */
  --cost-pill-padding-x: var(--space-2); /* 8px · 水平内边距 */
  --cost-pill-radius: var(--radius-full); /* 胶囊圆角 */
  /* —— Dropdown / Menu Item —— */
  --dropdown-radius: var(--radius-3); /* 12px · 面板圆角（设计 dropdown/radius） */
  --menu-gap: var(--space-0-5); /* 2px · item 与 item 之间的间距 */
  --menu-item-h: var(--space-9); /* 36px · 单行固定高 */
  --menu-item-h-2line: var(--space-11); /* 44px · 双行高 */
  --menu-item-padding-x: var(--space-2-5); /* 10px · 水平内边距 */
  --menu-item-gap: var(--space-1-5); /* 6px · 图标与 label 间距（设计 §18 5824:2536） */
  --menu-item-icon-size: var(--space-5); /* 20px · 前置图标槽（保证所有 label 起始 x 一致） */
  --menu-item-radius: var(--radius-1-5); /* 6px · 菜单项圆角（设计 §18，原 8px） */
  --menu-item-media-size: var(--space-8); /* 32px · 资源位缩略图/头像 */
  --menu-item-group-label-padding-y: var(--space-1-5); /* 6px · 分组标题上下内边距 */
  /* —— Input —— */
  --input-h-sm: var(--space-8); /* 32px · 小输入框高度 */
  --input-h-md: var(--space-9); /* 36px · 中输入框高度 */
  --input-h-lg: var(--space-10); /* 40px · 大输入框高度 */
  --input-padding-x: var(--space-3); /* 12px · 水平内边距 */
  --input-icon-sm: var(--font-size-xs); /* 12px · 前/后置图标（对齐设计 §15） */
  --input-icon-md: var(--font-size-sm); /* 14px */
  --input-icon-lg: var(--font-size-base); /* 16px */
  --input-radius: var(--radius-2); /* 8px · 圆角 */
  /* —— Modal —— */
  --modal-radius: var(--radius-6); /* 24px · 对齐设计 §4.1（4089:6560） */
  --modal-max-width-std: 440px; /* 标准弹窗最大宽（confirm/upgrade） */
  --modal-max-width-wide: 720px; /* 宽弹窗最大宽 */
  /* —— Progress —— */
  --progress-h: var(--space-1-5); /* 6px · 线性轨道高度 */
  --progress-radius: var(--radius-full); /* 胶囊 */
  --progress-circular-size: var(--space-12); /* 48px · 圆环直径（设计 §5） */
  --progress-circular-stroke: var(--space-1); /* 4px · 圆环描边 */
  /* —— Search —— */
  --search-h-sm: var(--space-8); /* 32px · 小搜索框高度 */
  --search-h-md: var(--space-9); /* 36px · 中搜索框高度 */
  --search-h-lg: var(--space-10); /* 40px · 大搜索框高度 */
  --search-padding-x: var(--space-3); /* 12px · 水平内边距 */
  --search-gap: var(--space-2); /* 8px · 图标与文字间距 */
  --search-radius: var(--radius-2); /* 8px · 圆角 */
  /* —— Select —— */
  --select-h-sm: var(--space-8); /* 32px · 小选择器高度 */
  --select-h-md: var(--space-9); /* 36px · 中选择器高度 */
  --select-h-lg: var(--space-10); /* 40px · 大选择器高度 */
  --select-padding-x: var(--space-3); /* 12px · 水平内边距 */
  --select-gap: var(--space-2); /* 8px · 图标与文字间距 */
  --select-radius: var(--radius-2); /* 8px · 圆角 */
  /* —— Sidebar —— */
  --sidebar-group-gap: var(--space-2); /* 8px · 分组间距 */
  --sidebar-row-padding-x: var(--space-3); /* 12px · 行水平内边距 */
  --sidebar-row-padding-y: var(--space-2); /* 8px · 行垂直内边距 */
  /* —— TopNav —— */
  --topnav-h: var(--space-16); /* 64px · 顶栏高度 */
  /* —— Tabs（胶囊形态，高度/内边距/字号对齐 Button） —— */
  --tabs-pill-h-sm: var(--btn-sm-h); /* 28px */
  --tabs-pill-h-md: var(--btn-md-h); /* 36px */
  --tabs-pill-h-lg: var(--btn-lg-h); /* 44px */
  --tabs-pill-padding-x-sm: var(--btn-padding-x-sm); /* 12px */
  --tabs-pill-padding-x-md: var(--btn-padding-x-md); /* 16px */
  --tabs-pill-padding-x-lg: var(--btn-padding-x-lg); /* 24px */
  --tabs-pill-font-sm: var(--font-size-button-sm); /* 12px */
  --tabs-pill-font-md: var(--font-size-button-md); /* 14px */
  --tabs-pill-font-lg: var(--font-size-button-lg); /* 16px */
  /* —— Tag —— */
  --tag-h: var(--space-5); /* 20px */
  --tag-padding-x: var(--space-2); /* 8px */
  --tag-gap: var(--space-1-5); /* 6px */
  --tag-radius: var(--radius-2); /* 8px */
  --tag-font-size: var(--font-size-xs); /* 12px */
  --tag-remove-size: var(--space-3-5); /* 14px */
  --tag-remove-offset: calc(-1 * var(--space-0-5)); /* -2px */
  /* —— Toast —— */
  --toast-min-width: 396px; /* 设计稿最小宽（99×4pt · 原 394px 非网格值已修正） */
  --toast-max-width: calc(100vw - var(--toast-viewport-gutter));
  --toast-viewport-gutter: var(--space-16); /* 64px · 距视口左右 */
  --toast-padding-x: var(--space-2); /* 8px · 容器左右内边距 */
  --toast-padding-y: var(--space-3); /* 12px · 上下内边距 */
  --toast-content-actions-gap: var(--space-4); /* 16px · 内容区 ↔ 操作区间距（设计 §4.3 4089:6735） */
  --toast-indicator-size: var(--space-7); /* 28px · 指示/关闭方槽 */
  --toast-dot-size: var(--space-3); /* 12px · 彩色圆点 */
  --toast-close-size: var(--toast-indicator-size);
  /* —— Tooltip —— */
  --tooltip-radius: var(--radius-2); /* 8px */
  --tooltip-padding-x: var(--space-2-5); /* 10px */
  --tooltip-padding-y: var(--space-1-5); /* 6px */
  --tooltip-gap: var(--space-2); /* 8px · 文本与快捷键间距 */
  /* —— Upload —— */
  --upload-dropzone-gap: var(--space-2); /* 8px · 拖放区内部间距 */
  --upload-dropzone-padding: var(--space-4); /* 16px · 拖放区内边距 */
  --upload-dropzone-radius: var(--radius-2-5); /* 10px · 拖放区圆角 */
  /* —— 其他 —— */
  --ratio-cell-icon-size: var(--space-5); /* 20px · 比例单元格图标 */
}

@charset "UTF-8";
/* @qtd/react · 聚合样式入口（构建为 dist/styles.css）
   组件样式基于 @qtd/tokens 的 CSS 变量，应用入口需另引 @qtd/tokens/tokens.css */
/* AppLayout — 千图AI 产品页布局套件
   包含：AppShell · AppSidebar · AppContent · CardGrid · MasonryGrid
   消费 §2.1.12 layout 令牌 + §2.2 surface 语义令牌 */
.qtd-app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--surface-app);
}

.qtd-app-shell__main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.qtd-app-shell__main--grid {
  background-color: var(--surface-app);
  background-image: linear-gradient(var(--line-1) 1px, transparent 1px), linear-gradient(90deg, var(--line-1) 1px, transparent 1px);
  background-size: var(--space-8) var(--space-8);
}

.qtd-app-shell__scrim {
  position: fixed;
  inset: 0;
  background: rgb(from var(--surface-overlay) r g b/var(--opacity-scrim));
  z-index: calc(var(--z-drawer) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--easing-standard);
  display: none;
}

@media (max-width: 960px) {
  .qtd-app-shell__scrim {
    display: block;
  }
  .qtd-app-shell__scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}
.qtd-sidebar {
  position: relative;
  width: var(--qtd-sb-w, var(--layout-sidebar-standard));
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
  background: var(--surface-app);
  border-right: var(--border-1) solid transparent;
  display: flex;
  flex-direction: column;
  transition: width var(--duration-slow) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
}
.qtd-sidebar:hover {
  border-color: var(--line-2);
}

.qtd-sidebar__bottom, .qtd-sidebar__middle, .qtd-sidebar__top {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.qtd-sidebar__bottom:hover, .qtd-sidebar__middle:hover, .qtd-sidebar__top:hover {
  scrollbar-color: var(--line-1) transparent;
}
.qtd-sidebar__bottom::-webkit-scrollbar, .qtd-sidebar__middle::-webkit-scrollbar, .qtd-sidebar__top::-webkit-scrollbar {
  width: 4px;
}
.qtd-sidebar__bottom::-webkit-scrollbar-track, .qtd-sidebar__middle::-webkit-scrollbar-track, .qtd-sidebar__top::-webkit-scrollbar-track {
  background: transparent;
}
.qtd-sidebar__bottom::-webkit-scrollbar-thumb, .qtd-sidebar__middle::-webkit-scrollbar-thumb, .qtd-sidebar__top::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--radius-full);
}
.qtd-sidebar__bottom:hover::-webkit-scrollbar-thumb, .qtd-sidebar__middle:hover::-webkit-scrollbar-thumb, .qtd-sidebar__top:hover::-webkit-scrollbar-thumb {
  background: var(--line-1);
}

.qtd-sidebar__top {
  flex-shrink: 0;
}

.qtd-sidebar__middle {
  flex: 1 1 0;
  min-height: 0;
}

.qtd-sidebar__bottom {
  flex-shrink: 0;
}

.qtd-sidebar.is-dragging {
  transition: none;
}

.qtd-sidebar.is-collapsed {
  overflow: hidden;
}

.qtd-sidebar__resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qtd-sidebar__resize-handle::before {
  content: "";
  width: 2px;
  height: 32px;
  background: var(--line-2);
  border-radius: 1px;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-standard);
}
.qtd-sidebar__resize-handle:hover::before {
  opacity: 1;
}

.qtd-sidebar.is-dragging .qtd-sidebar__resize-handle::before {
  opacity: 1;
  background: var(--accent-lime-press);
}

@media (max-width: 960px) {
  .qtd-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--layout-sidebar-drawer) !important;
    height: 100vh;
    z-index: var(--z-drawer);
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--easing-standard), box-shadow var(--duration-slow) var(--easing-standard);
    box-shadow: none;
  }
  .qtd-sidebar.is-mobile-open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }
  .qtd-sidebar__resize-handle {
    display: none;
  }
  .qtd-sidebar.is-collapsed {
    overflow-y: auto;
  }
}
@media (max-width: 480px) {
  .qtd-sidebar:not(.is-mobile-open) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .qtd-sidebar,
  .qtd-sidebar__resize-handle::before {
    transition: none;
  }
}
.qtd-content-box {
  width: 100%;
  margin: 0 auto;
  padding: var(--space-10) var(--layout-margin) var(--space-8);
  max-width: var(--layout-bp-2240);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.qtd-content-box--no-padding {
  padding: 0;
}

.qtd-content-box--grid {
  background-color: var(--surface-app);
  background-image: linear-gradient(var(--line-1) 1px, transparent 1px), linear-gradient(90deg, var(--line-1) 1px, transparent 1px);
  background-size: var(--space-8) var(--space-8);
}

@media (max-width: 960px) {
  .qtd-content-box {
    padding-top: var(--space-6);
  }
  .qtd-content-box--no-padding {
    padding-top: 0;
  }
}
@media (max-width: 480px) {
  .qtd-content-box {
    padding-top: var(--space-4);
  }
  .qtd-content-box--no-padding {
    padding-top: 0;
  }
}
.qtd-card-grid {
  display: grid;
  grid-template-columns: var(--layout-cards-grid);
  gap: var(--space-6);
}

@media (max-width: 480px) {
  .qtd-card-grid {
    gap: var(--space-3);
  }
}
.qtd-masonry-grid {
  width: 100%;
  position: relative;
}

/* Avatar — 引用 @qtd/tokens 的 avatar/* 令牌 */
.qtd-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid var(--avatar-border);
  background: var(--avatar-fallback-bg);
  color: var(--avatar-fallback-fg);
  font-family: var(--font-family-default);
  font-weight: 600;
  line-height: 1;
  user-select: none;
}

.qtd-avatar--circle {
  border-radius: 50%;
}

.qtd-avatar--square {
  border-radius: var(--radius-2);
}

/* 设计 §1：32 / 40 / 56，字号 14 / 16 / 24 */
.qtd-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-sm);
}

.qtd-avatar--md {
  width: 40px;
  height: 40px;
  font-size: var(--font-size-base);
}

.qtd-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: var(--font-size-xl);
}

/* 彩色兜底：背景由组件按首字 hash 内联注入，文字反白、去描边 */
.qtd-avatar--colorful {
  border-color: transparent;
  color: var(--fg-inverse);
}

.qtd-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit; /* 随形状裁剪（root 无 overflow，留给状态点溢出） */
}

.qtd-avatar__fallback {
  display: inline-flex;
}

/* 状态角点（在线 / 忙碌）· 右下角带外圈分隔 */
.qtd-avatar__status {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28%;
  height: 28%;
  min-width: 6px;
  min-height: 6px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 var(--border-2) var(--avatar-status-ring);
}

.qtd-avatar__status--online {
  background: var(--avatar-status-online);
}

.qtd-avatar__status--busy {
  background: var(--avatar-status-busy);
}

/* 头像堆叠组 */
.qtd-avatar-group {
  display: inline-flex;
  align-items: center;
}

.qtd-avatar-group > * + * {
  margin-left: calc(-1 * var(--space-3)); /* -12 · 设计 */
}

.qtd-avatar-group .qtd-avatar {
  box-shadow: 0 0 0 var(--border-2) var(--avatar-status-ring); /* 白圈分隔堆叠 */
}

.qtd-avatar-group__more {
  background: var(--avatar-group-more-bg);
  color: var(--avatar-group-more-fg);
  font-size: var(--font-size-xs); /* 12 · 设计 */
}

/* Logo / LogoSwitcher — 品牌标识与切换器
   视觉值全部引用 @qtd/tokens CSS 变量
   --logo-bg：控制底色，默认 surface-panel；设为 transparent 可去掉底色 */
.qtd-logo {
  --logo-bg: var(--accent-lime); /* 可覆盖，如 surface-panel / transparent */
  --logo-color: var(--accent-lime-on); /* 底色上的前景色 */
  display: inline-flex;
  align-items: center;
  flex: none;
}

.qtd-logo--sm {
  --logo-mark-size: var(--space-4);
} /* 16px */
.qtd-logo--md {
  --logo-mark-size: var(--space-5);
} /* 20px */
.qtd-logo--lg {
  --logo-mark-size: var(--space-6);
} /* 24px */
.qtd-logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--logo-mark-size);
  height: var(--logo-mark-size);
  color: var(--logo-color);
}
.qtd-logo__mark svg,
.qtd-logo__mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.qtd-logo--icon {
  border-radius: var(--radius-full);
  background: var(--logo-bg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.qtd-logo--icon.qtd-logo--sm {
  padding: var(--space-1-5);
} /* 6px → 16+12=28 */
.qtd-logo--icon.qtd-logo--md {
  padding: var(--space-2);
} /* 8px → 20+16=36 */
.qtd-logo--icon.qtd-logo--lg {
  padding: var(--space-2-5);
} /* 10px → 24+20=44 */
.qtd-logo--full {
  border-radius: var(--radius-full);
  background: var(--logo-bg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.qtd-logo--full.qtd-logo--sm {
  padding: var(--space-1-5) var(--space-2-5); /* 6px 10px → 16+12=28px */
  gap: var(--space-1);
}

.qtd-logo--full.qtd-logo--md {
  padding: var(--space-2) var(--space-3); /* 8px 12px → 20+16=36px */
  gap: var(--space-1-5);
}

.qtd-logo--full.qtd-logo--lg {
  padding: var(--space-2-5) var(--space-4); /* 10px 16px → 24+20=44px */
  gap: var(--space-2);
}

.qtd-logo__text {
  color: var(--logo-color);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
}

.qtd-logo--full.qtd-logo--sm .qtd-logo__text {
  font-size: var(--font-size-xs);
}

.qtd-logo--full.qtd-logo--md .qtd-logo__text {
  font-size: var(--font-size-sm);
}

.qtd-logo--full.qtd-logo--lg .qtd-logo__text {
  font-size: var(--font-size-md);
}

.qtd-logo-switcher {
  --logo-bg: var(--surface-panel); /* 轨道底色，可覆盖 */
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--logo-bg);
}

.qtd-logo-switcher--sm .qtd-logo-switcher__segment {
  height: var(--space-7);
  padding-inline: var(--space-2-5);
  font-size: var(--font-size-xs);
} /* 28 */
.qtd-logo-switcher--md .qtd-logo-switcher__segment {
  height: var(--space-8);
  padding-inline: var(--space-3);
  font-size: var(--font-size-sm);
} /* 32 */
.qtd-logo-switcher--lg .qtd-logo-switcher__segment {
  height: var(--space-10);
  padding-inline: var(--space-4);
  font-size: var(--font-size-md);
} /* 40 */
.qtd-logo-switcher__segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--fg-2);
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
}
.qtd-logo-switcher__segment:hover:not(.is-active) {
  color: var(--fg-1);
}
.qtd-logo-switcher__segment:focus-visible {
  outline: var(--border-2) solid var(--accent-lime);
  outline-offset: var(--space-0-5);
}
.qtd-logo-switcher__segment.is-active {
  background: var(--accent-lime);
  color: var(--accent-lime-on);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-sm);
}

.qtd-logo-switcher__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--space-4);
  height: var(--space-4);
}
.qtd-logo-switcher__mark svg,
.qtd-logo-switcher__mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.qtd-logo-switcher--lg .qtd-logo-switcher__mark {
  width: var(--space-5);
  height: var(--space-5);
}

/* Badge — 通知角标（数字 / 红点）· 引用 badge/* 令牌 · 设计 §3 5836:7625 */
.qtd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1-5);
  border-radius: var(--radius-full); /* 胶囊/圆 · 设计 radius/pill（原误用 btn-radius=8） */
  font-family: var(--font-family-default);
  font-size: var(--font-size-xs); /* 12 · 设计 */
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* 通知数字徽标默认红色；dark 用于深色底场景（设计「lime badge」实为 #0d0d0d 深色） */
.qtd-badge--danger {
  background: var(--badge-danger);
  color: var(--badge-danger-on);
}

.qtd-badge--dark {
  background: var(--fg-1);
  color: var(--fg-inverse);
}

/* 通知圆点 */
.qtd-badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--badge-dot);
}

/* 吸附角标：把宿主元素包住，徽标定位到右上角 */
.qtd-badge-anchor {
  position: relative;
  display: inline-flex;
}

/* 角标中心落在宿主右上 ~45° 弧边处（圆形头像不悬空，方形也贴角）· 对齐设计 */
.qtd-badge--corner {
  position: absolute;
  top: 15%;
  left: 85%;
  right: auto;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 var(--border-2) var(--avatar-status-ring); /* 外圈与宿主分隔 */
  z-index: var(--z-raised);
}

.qtd-badge-dot.qtd-badge--corner {
  width: 10px;
  height: 10px;
}

/* Banner — 引用 @qtd/tokens 的 banner/* 令牌 */
.qtd-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  font-family: var(--font-family-default);
  font-size: var(--font-size-button-md);
}

.qtd-banner__icon {
  display: inline-flex;
  flex: none;
  line-height: 1.4;
}

.qtd-banner__content {
  flex: 1 1 auto;
  min-width: 0;
}

.qtd-banner__title {
  font-weight: 600;
}

.qtd-banner__body {
  font-size: var(--font-size-2xs);
  opacity: 0.9;
}

.qtd-banner__close {
  flex: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.qtd-banner__close:hover {
  opacity: 1;
}

.qtd-banner--info {
  background: var(--banner-info-bg);
  color: var(--banner-info-fg);
  border-color: var(--banner-info-border);
}

.qtd-banner--success {
  background: var(--banner-success-bg);
  color: var(--banner-success-fg);
  border-color: var(--banner-success-border);
}

.qtd-banner--warning {
  background: var(--banner-warning-bg);
  color: var(--banner-warning-fg);
  border-color: var(--banner-warning-border);
}

.qtd-banner--danger {
  background: var(--banner-danger-bg);
  color: var(--banner-danger-fg);
  border-color: var(--banner-danger-border);
}

/* Breadcrumb — 引用 @qtd/tokens 的 breadcrumb/* 令牌 */
.qtd-breadcrumb {
  font-family: var(--font-family-default);
  font-size: var(--font-size-button-sm);
}

.qtd-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.qtd-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.qtd-breadcrumb__link {
  color: var(--breadcrumb-fg-inactive);
  text-decoration: none;
}

.qtd-breadcrumb__link:hover {
  color: var(--breadcrumb-fg-current);
  text-decoration: underline;
}

.qtd-breadcrumb__current {
  color: var(--breadcrumb-fg-current);
}

.qtd-breadcrumb__sep {
  color: var(--breadcrumb-separator);
}

/* Button — 全部视觉值引用 @qtd/tokens 的 --btn-* / --font-* / --space-* 变量 */
.qtd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap-md);
  border: var(--border-1) solid transparent;
  border-radius: var(--radius-full); /* 胶囊 · 设计稿 btn/radius=9999 */
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
}

.qtd-btn:focus-visible {
  outline: var(--border-2) solid var(--accent-lime);
  outline-offset: 2px;
}

.qtd-btn:disabled {
  cursor: not-allowed;
}

/* loading：保持变体配色、不变灰；阻断交互 + 旋转 spinner */
.qtd-btn[data-loading] {
  pointer-events: none;
  cursor: default;
}

.qtd-btn--block {
  display: flex;
  width: 100%;
}

.qtd-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 图标尺寸由按钮按尺寸控制（见下方 per-size）：强制内部 svg/img = 1em，
   覆盖消费方传入的显式 size，保证 sm16 / md20 / lg22 一致（设计 §3 258:1155）。 */
.qtd-btn__icon :is(svg, img),
.qtd-btn--icon :is(svg, img) {
  width: 1em;
  height: 1em;
}

.qtd-btn__spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: var(--border-2) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: qtd-btn-spin var(--duration-slower) var(--easing-standard) infinite;
}

@keyframes qtd-btn-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .qtd-btn__spinner {
    animation-duration: 1.5s;
  }
}
/* ---- 尺寸（高度 / 内边距 / 间距 / 字号 全部走 btn-* token）---- */
.qtd-btn--sm {
  height: var(--btn-sm-h);
  padding: 0 var(--btn-padding-x-sm);
  gap: var(--btn-gap-sm);
  font-size: var(--font-size-button-sm);
}

.qtd-btn--md {
  height: var(--btn-md-h);
  padding: 0 var(--btn-padding-x-md);
  gap: var(--btn-gap-md);
  font-size: var(--font-size-button-md);
}

.qtd-btn--lg {
  height: var(--btn-lg-h);
  padding: 0 var(--btn-padding-x-lg);
  gap: var(--btn-gap-lg);
  font-size: var(--font-size-button-lg);
}

/* 图标按尺寸放大（独立于文字字号）：__icon 槽 font-size = 图标令牌，svg 取 1em */
.qtd-btn--sm .qtd-btn__icon {
  font-size: var(--btn-icon-sm);
}

.qtd-btn--md .qtd-btn__icon {
  font-size: var(--btn-icon-md);
}

.qtd-btn--lg .qtd-btn__icon {
  font-size: var(--btn-icon-lg);
}

/* Link 变体：图标随文字、固定 16，不随上面放大 */
.qtd-btn--link .qtd-btn__icon {
  font-size: var(--font-size-base);
}

/* ---- Hero（品牌主推） ---- */
.qtd-btn--hero {
  background: var(--btn-hero-bg);
  color: var(--btn-hero-fg);
}

.qtd-btn--hero:hover:not(:disabled) {
  background: var(--btn-hero-hover-bg);
}

.qtd-btn--hero:active:not(:disabled) {
  background: var(--btn-hero-press-bg);
}

.qtd-btn--hero:disabled {
  background: var(--btn-hero-disabled-bg);
  color: var(--btn-hero-disabled-fg);
}

/* ---- Primary ---- */
.qtd-btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
}

.qtd-btn--primary:hover:not(:disabled) {
  background: var(--btn-primary-hover-bg);
}

.qtd-btn--primary:active:not(:disabled) {
  background: var(--btn-primary-press-bg);
}

.qtd-btn--primary:disabled {
  background: var(--btn-primary-disabled-bg);
  color: var(--btn-primary-disabled-fg);
}

/* ---- Secondary（描边） ---- */
.qtd-btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border-color: var(--btn-secondary-border);
}

.qtd-btn--secondary:hover:not(:disabled) {
  background: var(--btn-secondary-hover-bg);
}

.qtd-btn--secondary:active:not(:disabled) {
  background: var(--btn-secondary-press-bg);
}

.qtd-btn--secondary:disabled {
  background: var(--btn-secondary-disabled-bg);
  color: var(--btn-secondary-disabled-fg);
  border-color: var(--btn-secondary-border-disabled);
}

/* ---- Ghost（无背景） ---- */
.qtd-btn--ghost {
  background: transparent;
  color: var(--btn-ghost-fg);
}

.qtd-btn--ghost:hover:not(:disabled) {
  background: var(--btn-ghost-hover-bg);
}

.qtd-btn--ghost:active:not(:disabled) {
  background: var(--btn-ghost-press-bg);
}

.qtd-btn--ghost:disabled {
  color: var(--btn-ghost-disabled-fg);
}

/* ---- Danger ---- */
.qtd-btn--danger {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-fg);
}

.qtd-btn--danger:hover:not(:disabled) {
  background: var(--btn-danger-hover-bg);
}

.qtd-btn--danger:active:not(:disabled) {
  background: var(--btn-danger-press-bg);
}

.qtd-btn--danger:disabled {
  background: var(--btn-danger-disabled-bg);
  color: var(--btn-danger-disabled-fg);
}

/* ---- Link（文字按钮 · Regular 字重 · 设计稿 font/body/link）----
   设计规则：默认带下划线；hover 去掉下划线、加深文字色并加粗到 600；press 蓝色+下划线；disabled 灰色+下划线。
   下划线作用于 label，避免给前/后置图标加线。 */
.qtd-btn--link {
  height: auto;
  padding: 0;
  border: 0;
  gap: var(--btn-gap-tight);
  background: transparent;
  color: var(--btn-link-fg);
  font-weight: var(--font-weight-regular);
}

.qtd-btn--link .qtd-btn__label {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.qtd-btn--link:hover:not(:disabled) {
  color: var(--btn-link-hover-fg);
  font-weight: var(--font-weight-semibold); /* 600 · hover 加粗 */
}

.qtd-btn--link:hover:not(:disabled) .qtd-btn__label {
  text-decoration: none;
}

.qtd-btn--link:active:not(:disabled) {
  color: var(--btn-link-press-fg);
}

.qtd-btn--link:active:not(:disabled) .qtd-btn__label {
  text-decoration: underline;
}

.qtd-btn--link:disabled {
  color: var(--btn-link-disabled-fg);
}

/* ---- Icon-only（已合并原 IconButton）：正方形，尺寸=按钮高度；全变体继承 --radius-full → 圆形 ---- */
.qtd-btn--icon {
  padding: 0;
  gap: 0;
  flex: none;
}

.qtd-btn--icon.qtd-btn--sm {
  width: var(--btn-sm-h);
  font-size: var(--btn-icon-sm);
}

.qtd-btn--icon.qtd-btn--md {
  width: var(--btn-md-h);
  font-size: var(--btn-icon-md);
}

.qtd-btn--icon.qtd-btn--lg {
  width: var(--btn-lg-h);
  font-size: var(--btn-icon-lg);
}

/* Card — 引用 @qtd/tokens 的 card/* 令牌 */
.qtd-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border-default);
  border-radius: var(--radius-3);
  color: var(--fg-1);
  font-family: var(--font-family-default);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.qtd-card--pad-none {
  padding: 0;
}

.qtd-card--pad-sm {
  padding: var(--space-3);
}

.qtd-card--pad-md {
  padding: var(--space-4);
}

.qtd-card--pad-lg {
  padding: var(--space-6);
}

.qtd-card--interactive {
  cursor: pointer;
}

.qtd-card--interactive:hover {
  border-color: var(--card-border-hover);
  background: var(--card-hover-bg);
}

.qtd-card--selected,
.qtd-card[data-selected] {
  border-color: var(--card-border-selected);
}

/* 内部排版工具类 */
.qtd-card__title {
  margin: 0;
  color: var(--card-title-fg);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold, 600);
}

.qtd-card__meta {
  margin: var(--space-1) 0 0;
  color: var(--card-meta-fg);
  font-size: var(--font-size-2xs);
}

/* Checkbox — 填充态（设计 305:991：off 浅描边透明；on/partial 深底 #0d0d0d + 白勾/横杠）· 引用 checkbox/* 令牌 */
.qtd-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-default);
  font-size: var(--font-size-button-md);
  color: var(--fg-1);
  cursor: pointer;
}

.qtd-check[data-disabled] {
  cursor: not-allowed;
  color: var(--fg-disabled);
}

/* 原生 input 视觉隐藏但保留可聚焦/可点 */
.qtd-check__input {
  position: absolute;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.qtd-check__box {
  position: relative;
  flex: none;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border: var(--border-1) solid var(--checkbox-border);
  border-radius: var(--radius-1);
  background: var(--checkbox-bg);
  color: var(--checkbox-check-fg); /* 勾/横杠色（白） */
  transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
}

.qtd-check__tick {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.qtd-check__dash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--checkbox-dash-w);
  height: var(--border-2);
  border-radius: 1px;
  background: var(--checkbox-check-fg);
  transform: translate(-50%, -50%);
  opacity: 0;
}

/* hover：边框加深（对齐 Input hover，disabled 态跳过） */
.qtd-check:not([data-disabled]):hover .qtd-check__box {
  border-color: var(--checkbox-border-hover);
}

/* checked：深底填充 + 白勾 */
.qtd-check__input:checked + .qtd-check__box {
  background: var(--checkbox-bg-checked);
  border-color: var(--checkbox-bg-checked);
}

.qtd-check__input:checked + .qtd-check__box .qtd-check__tick {
  opacity: 1;
}

/* 受控视觉（无 input，data-checked 驱动）—— 供 MenuItem 等容器复用本组件外观 */
.qtd-check__box[data-checked] {
  background: var(--checkbox-bg-checked);
  border-color: var(--checkbox-bg-checked);
}

.qtd-check__box[data-checked] .qtd-check__tick {
  opacity: 1;
}

/* indeterminate（盖过 checked）：深底填充 + 白横杠 */
.qtd-check__input:indeterminate + .qtd-check__box {
  background: var(--checkbox-indeterminate-bg);
  border-color: var(--checkbox-indeterminate-bg);
}

.qtd-check__input:indeterminate + .qtd-check__box .qtd-check__tick {
  opacity: 0;
}

.qtd-check__input:indeterminate + .qtd-check__box .qtd-check__dash {
  opacity: 1;
}

/* focus */
.qtd-check__input:focus-visible + .qtd-check__box {
  outline: var(--border-2) solid var(--accent-lime);
  outline-offset: 2px;
}

/* disabled */
.qtd-check__input:disabled + .qtd-check__box {
  border-color: var(--checkbox-disabled-border);
}

.qtd-check__input:disabled:checked + .qtd-check__box,
.qtd-check__input:disabled:indeterminate + .qtd-check__box {
  background: var(--checkbox-disabled-bg-checked);
  border-color: var(--checkbox-disabled-bg-checked);
  color: var(--checkbox-disabled-check-fg);
}

/* Chip · Pill — Figma §3C.6 (5836:6087) + chip/* 令牌 */
/* 下拉面板：portal + fixed（同 Select / Dropdown） */
.qtd-chip-dropdown__pop {
  position: fixed;
  z-index: var(--z-dropdown);
}

.qtd-chip-dropdown__pop .qtd-menu {
  min-width: 100%;
}

.qtd-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--chip-gap);
  font-family: var(--font-family-default);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  outline: none;
  transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
}
.qtd-chip:focus-visible {
  outline: var(--border-2) solid var(--accent-lime);
  outline-offset: 2px;
}
.qtd-chip:disabled {
  cursor: not-allowed;
}

.qtd-chip__label,
.qtd-chip__secondary,
.qtd-chip__meta {
  display: inline-block;
}

.qtd-chip__secondary {
  color: var(--chip-fg-muted);
  font-weight: var(--font-weight-regular);
}

.qtd-chip__sep {
  color: var(--chip-border);
  font-weight: var(--font-weight-regular);
  user-select: none;
}

.qtd-chip__meta {
  font-weight: var(--font-weight-regular);
}

.qtd-chip__icon,
.qtd-chip__trailing,
.qtd-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qtd-chip__icon-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--chip-icon-size, 1em);
  height: var(--chip-icon-size, 1em);
}

/* media · content 模式：宽度随自定义 DOM（多图缩略图组等），不限于单槽 16×16 */
.qtd-chip__media--content {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  width: auto;
  height: auto;
  max-width: none;
  overflow: visible;
  gap: var(--space-1);
  border-radius: 0;
  box-shadow: none;
  line-height: normal;
}
.qtd-chip__media--content > img {
  width: var(--chip-icon-size, var(--space-4));
  height: var(--chip-icon-size, var(--space-4));
  border-radius: var(--radius-1);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.qtd-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--chip-icon-size, 1em);
}

/* Icon-only · 正方形 = 圆形（pill / inline，同 Button --icon） */
.qtd-chip--icon-only {
  padding: 0;
  gap: 0;
  flex: none;
}
.qtd-chip--icon-only .qtd-chip__icon--solo {
  line-height: 0;
}

.qtd-chip--pill.qtd-chip--icon-only.qtd-chip--xs,
.qtd-chip--inline.qtd-chip--icon-only.qtd-chip--xs {
  width: var(--chip-xs-h);
}
.qtd-chip--pill.qtd-chip--icon-only.qtd-chip--sm,
.qtd-chip--inline.qtd-chip--icon-only.qtd-chip--sm {
  width: var(--chip-sm-h);
}
.qtd-chip--pill.qtd-chip--icon-only.qtd-chip--md,
.qtd-chip--inline.qtd-chip--icon-only.qtd-chip--md {
  width: var(--chip-md-h);
}
.qtd-chip--pill.qtd-chip--icon-only.qtd-chip--lg,
.qtd-chip--inline.qtd-chip--icon-only.qtd-chip--lg {
  width: var(--chip-lg-h);
}

/* Pill icon-only：纯图标按钮不应有描边（对齐 Button --icon 视觉，仅保留底色） */
.qtd-chip--pill.qtd-chip--icon-only {
  border-color: transparent;
}

.qtd-chip__icon--remove-hint {
  display: none;
}
.qtd-chip__icon--remove-hint svg {
  width: 1em;
  height: 1em;
  display: block;
}

.qtd-chip__trailing--chevron {
  color: currentColor;
  font-size: var(--chip-chevron-size, 0.833em);
  transition: transform var(--duration-fast) var(--easing-standard);
}

.qtd-chip[aria-expanded=true] .qtd-chip__trailing--chevron {
  transform: rotate(180deg);
}

/* Flex chip 下拉 chevron：向左偏移 chip-gap，抵消 flex gap，与左侧内容零间距（设计稿无额外 gap）
   涵盖 pill / pill-primary / pill-plain / inline 四个 flex 变体；
   inline-text-para / inline-zero-padding 用 display:inline + margin 体系，另行处理 */
:is(.qtd-chip--pill, .qtd-chip--pill-primary, .qtd-chip--pill-plain, .qtd-chip--inline).has-dropdown .qtd-chip__trailing--chevron {
  margin-left: calc(-1 * var(--chip-gap));
}

/* 关闭 ×：mono-20 path 视觉偏小，相对 chip 字号 1.5em */
.qtd-chip__remove {
  color: var(--chip-fg-muted);
  border-radius: var(--radius-full);
  transition: color var(--duration-fast) var(--easing-standard);
}
.qtd-chip__remove svg {
  width: 1.5em;
  height: 1.5em;
  display: block;
}
.qtd-chip__remove:hover {
  color: var(--chip-fg);
}

.qtd-chip--pill.is-selected .qtd-chip__remove {
  color: var(--chip-active-fg);
}

/* -----------------------------------------------------------------------
   Pill · 有底色 + 描边
   ----------------------------------------------------------------------- */
.qtd-chip--pill {
  line-height: 1;
  border-radius: var(--chip-radius);
  background: var(--chip-bg);
  color: var(--chip-fg);
  border: var(--border-1) solid var(--chip-border);
  font-weight: var(--font-weight-regular);
}
.qtd-chip--pill:hover:not(:disabled):not(.is-selected) {
  background: var(--chip-hover-bg);
}
.qtd-chip--pill.is-selected {
  background: var(--chip-active-bg);
  color: var(--chip-active-fg);
  border-color: transparent;
}
.qtd-chip--pill:disabled {
  color: var(--chip-disabled-fg);
}
.qtd-chip--pill:disabled .qtd-chip__remove {
  color: var(--chip-disabled-fg);
}
.qtd-chip--pill .qtd-chip__icon,
.qtd-chip--pill .qtd-chip__remove {
  line-height: 0;
}

/* xs — 16px 图标 / 10px chevron（Figma layout_DPDL46 / BTBRSQ） */
.qtd-chip--pill.qtd-chip--xs {
  --chip-icon-size: var(--space-4);
  --chip-chevron-size: var(--space-2-5);
  height: var(--chip-xs-h);
  padding-inline: var(--chip-padding-x-xs);
  font-size: var(--font-size-button-sm);
}
.qtd-chip--pill.qtd-chip--xs:hover:not(:disabled):not(.is-selected), .qtd-chip--pill.qtd-chip--xs.is-selected {
  font-weight: var(--font-weight-medium);
}

.qtd-chip--pill.qtd-chip--sm {
  --chip-icon-size: var(--space-4);
  --chip-chevron-size: var(--space-2-5);
  height: var(--chip-sm-h);
  padding-inline: var(--chip-padding-x-sm);
  font-size: var(--font-size-button-sm);
}
.qtd-chip--pill.qtd-chip--sm:hover:not(:disabled):not(.is-selected), .qtd-chip--pill.qtd-chip--sm.is-selected {
  font-weight: var(--font-weight-semibold);
}

.qtd-chip--pill.qtd-chip--md {
  --chip-icon-size: var(--space-5);
  --chip-chevron-size: var(--space-3);
  height: var(--chip-md-h);
  padding-inline: var(--chip-padding-x-md);
  font-size: var(--font-size-button-md);
}
.qtd-chip--pill.qtd-chip--md:hover:not(:disabled):not(.is-selected), .qtd-chip--pill.qtd-chip--md.is-selected {
  font-weight: var(--font-weight-semibold);
}

.qtd-chip--pill.qtd-chip--lg {
  --chip-icon-size: calc(var(--space-5) + var(--space-0-5));
  --chip-chevron-size: calc(var(--space-3) + var(--space-0-5));
  height: var(--chip-lg-h);
  padding-inline: var(--chip-padding-x-lg);
  font-size: var(--font-size-button-lg);
}
.qtd-chip--pill.qtd-chip--lg:hover:not(:disabled):not(.is-selected), .qtd-chip--pill.qtd-chip--lg.is-selected {
  font-weight: var(--font-weight-semibold);
}

/* -----------------------------------------------------------------------
   Inline · 无 chrome（Figma 5836:6177）
   ----------------------------------------------------------------------- */
.qtd-chip--inline {
  line-height: 1;
  background: transparent;
  color: var(--chip-fg);
  border: var(--border-1) solid transparent;
  /* 默认/hover/selected 统一胶囊圆角，避免 hover 离态时圆角与背景过渡不同步 */
  border-radius: var(--chip-radius);
  font-weight: var(--font-weight-regular);
}
.qtd-chip--inline:hover:not(:disabled):not(.is-selected) {
  background: var(--chip-hover-bg);
}
.qtd-chip--inline.is-selected {
  background: var(--chip-info-bg);
  color: var(--chip-info-fg);
}
.qtd-chip--inline.is-selected .qtd-chip__sep {
  color: color-mix(in srgb, var(--chip-info-fg) 35%, transparent);
}
.qtd-chip--inline.is-selected .qtd-chip__secondary,
.qtd-chip--inline.is-selected .qtd-chip__meta {
  color: var(--chip-info-fg);
}
.qtd-chip--inline.is-removable.is-selected .qtd-chip__icon--remove-hint {
  color: var(--chip-info-fg);
}
.qtd-chip--inline.is-removable.is-selected:hover:not(:disabled) .qtd-chip__icon--leading {
  display: none;
}
.qtd-chip--inline.is-removable.is-selected:hover:not(:disabled) .qtd-chip__icon--remove-hint {
  display: inline-flex;
}
.qtd-chip--inline:disabled {
  color: var(--chip-disabled-fg);
}
.qtd-chip--inline:disabled .qtd-chip__icon,
.qtd-chip--inline:disabled .qtd-chip__secondary,
.qtd-chip--inline:disabled .qtd-chip__meta,
.qtd-chip--inline:disabled .qtd-chip__sep {
  color: var(--chip-disabled-fg);
}
.qtd-chip--inline .qtd-chip__icon,
.qtd-chip--inline .qtd-chip__remove {
  line-height: 0;
}
.qtd-chip--inline .qtd-chip__media--content > img {
  width: var(--chip-icon-size, var(--space-4));
  height: var(--chip-icon-size, var(--space-4));
}

.qtd-chip--inline.qtd-chip--xs {
  --chip-icon-size: var(--space-4);
  --chip-chevron-size: var(--space-2-5);
  height: var(--chip-xs-h);
  padding-inline: var(--chip-padding-x-xs);
  font-size: var(--font-size-button-sm);
}
.qtd-chip--inline.qtd-chip--xs.is-selected {
  font-weight: var(--font-weight-semibold);
}

.qtd-chip--inline.qtd-chip--sm {
  --chip-icon-size: var(--space-4);
  --chip-chevron-size: var(--space-2-5);
  height: var(--chip-sm-h);
  padding-inline: var(--chip-padding-x-sm);
  font-size: var(--font-size-button-sm);
}
.qtd-chip--inline.qtd-chip--sm.is-selected {
  font-weight: var(--font-weight-semibold);
}

.qtd-chip--inline.qtd-chip--md {
  --chip-icon-size: var(--space-5);
  --chip-chevron-size: var(--space-3);
  height: var(--chip-md-h);
  padding-inline: var(--chip-padding-x-md);
  font-size: var(--font-size-button-md);
}
.qtd-chip--inline.qtd-chip--md.is-selected {
  font-weight: var(--font-weight-semibold);
}

.qtd-chip--inline.qtd-chip--lg {
  --chip-icon-size: calc(var(--space-5) + var(--space-0-5));
  --chip-chevron-size: calc(var(--space-3) + var(--space-0-5));
  height: var(--chip-lg-h);
  padding-inline: var(--chip-padding-x-lg);
  font-size: var(--font-size-button-lg);
}
.qtd-chip--inline.qtd-chip--lg.is-selected {
  font-weight: var(--font-weight-semibold);
}

/* -----------------------------------------------------------------------
   Inline text-para / zero-padding · 共享 inline 流（Figma 5836:6336 / 5836:6493）
   HUG vertical · 无垂直 padding · *-auto · line-height: initial 阻断 body 继承
   ----------------------------------------------------------------------- */
/* Inline text-para · 段落内嵌（Figma 5836:6336 / 5836:6340） */
.qtd-chip--inline-text-para {
  /*
   * 段落内嵌：不用 inline-flex（图标首子项无文字基线会抬升整颗 chip）。
   * display: inline + 内部 inline 流，vertical-align: baseline 与 surrounding copy 共基线。
   */
  display: inline;
  vertical-align: baseline;
  align-items: initial;
  justify-content: initial;
  gap: 0;
  height: auto;
  margin: 0;
  padding-block: 0;
  line-height: initial;
  background: transparent;
  color: var(--chip-fg);
  border: none;
  border-radius: var(--chip-inline-radius);
  font-weight: var(--font-weight-regular);
}
.qtd-chip--inline-text-para > * + * {
  margin-left: var(--chip-gap);
}
.qtd-chip--inline-text-para.has-dropdown .qtd-chip__label + .qtd-chip__trailing--chevron {
  margin-left: 0;
}
.qtd-chip--inline-text-para {
  /* leading ↔ remove-hint 同槽互换，勿叠 chip-gap 否则 hover 抖 */
}
.qtd-chip--inline-text-para .qtd-chip__icon--leading + .qtd-chip__icon--remove-hint {
  margin-left: 0;
}
.qtd-chip--inline-text-para .qtd-chip__icon-slot,
.qtd-chip--inline-text-para .qtd-chip__icon,
.qtd-chip--inline-text-para .qtd-chip__label,
.qtd-chip--inline-text-para .qtd-chip__secondary,
.qtd-chip--inline-text-para .qtd-chip__meta,
.qtd-chip--inline-text-para .qtd-chip__sep,
.qtd-chip--inline-text-para .qtd-chip__trailing,
.qtd-chip--inline-text-para .qtd-chip__remove {
  display: inline;
  vertical-align: baseline;
}
.qtd-chip--inline-text-para .qtd-chip__icon-slot {
  position: static;
  width: auto;
  height: auto;
}
.qtd-chip--inline-text-para {
  --chip-icon-size: 1em;
  --chip-chevron-size: 0.85em;
}
.qtd-chip--inline-text-para .qtd-chip__icon {
  font-size: 1em;
}
.qtd-chip--inline-text-para .qtd-chip__icon svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}
.qtd-chip--inline-text-para .qtd-chip__trailing svg,
.qtd-chip--inline-text-para .qtd-chip__remove svg {
  display: inline-block;
  width: 1em;
  height: 1em;
}
.qtd-chip--inline-text-para .qtd-chip__trailing--chevron svg {
  width: 0.85em;
  height: 0.85em;
}
.qtd-chip--inline-text-para .qtd-chip__icon--remove-hint {
  display: none;
}
.qtd-chip--inline-text-para .qtd-chip__icon--remove-hint svg {
  vertical-align: -0.15em;
}
.qtd-chip--inline-text-para {
  transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), border-radius var(--duration-fast) var(--easing-standard);
}
.qtd-chip--inline-text-para.has-leading:not(.is-selected):not(:hover:not(:disabled)) {
  border-radius: var(--chip-radius);
}
.qtd-chip--inline-text-para.has-dropdown {
  gap: 0;
}
.qtd-chip--inline-text-para:hover:not(:disabled):not(.is-selected) {
  background: var(--chip-hover-bg);
  border-radius: var(--chip-radius);
}
.qtd-chip--inline-text-para.is-selected {
  background: var(--chip-info-bg);
  color: var(--chip-info-fg);
  border-radius: var(--chip-radius);
}
.qtd-chip--inline-text-para.is-selected .qtd-chip__sep {
  color: color-mix(in srgb, var(--chip-info-fg) 35%, transparent);
}
.qtd-chip--inline-text-para.is-selected .qtd-chip__secondary,
.qtd-chip--inline-text-para.is-selected .qtd-chip__meta {
  color: var(--chip-info-fg);
}
.qtd-chip--inline-text-para.is-removable.is-selected .qtd-chip__icon--remove-hint {
  color: var(--chip-info-fg);
}
.qtd-chip--inline-text-para.is-removable.is-selected:hover:not(:disabled) .qtd-chip__icon--leading {
  display: none;
}
.qtd-chip--inline-text-para.is-removable.is-selected:hover:not(:disabled) .qtd-chip__icon--remove-hint {
  display: inline;
}
.qtd-chip--inline-text-para:disabled, .qtd-chip--inline-text-para[aria-disabled=true] {
  cursor: not-allowed;
  color: var(--chip-disabled-fg);
}
.qtd-chip--inline-text-para:disabled .qtd-chip__icon,
.qtd-chip--inline-text-para:disabled .qtd-chip__secondary,
.qtd-chip--inline-text-para:disabled .qtd-chip__meta,
.qtd-chip--inline-text-para:disabled .qtd-chip__sep, .qtd-chip--inline-text-para[aria-disabled=true] .qtd-chip__icon,
.qtd-chip--inline-text-para[aria-disabled=true] .qtd-chip__secondary,
.qtd-chip--inline-text-para[aria-disabled=true] .qtd-chip__meta,
.qtd-chip--inline-text-para[aria-disabled=true] .qtd-chip__sep {
  color: var(--chip-disabled-fg);
}

.qtd-chip--inline-text-para.qtd-chip--xs {
  padding-inline: var(--chip-padding-x-xs);
  font-size: var(--font-size-xs);
}
.qtd-chip--inline-text-para.qtd-chip--xs.is-selected {
  font-weight: var(--font-weight-semibold);
}

.qtd-chip--inline-text-para.qtd-chip--sm {
  padding-inline: var(--chip-padding-x-md);
  font-size: var(--font-size-xs);
}
.qtd-chip--inline-text-para.qtd-chip--sm.is-selected {
  font-weight: var(--font-weight-semibold);
}

.qtd-chip--inline-text-para.qtd-chip--md {
  padding-inline: var(--chip-padding-x-lg);
  font-size: var(--font-size-sm);
}
.qtd-chip--inline-text-para.qtd-chip--md.is-selected {
  font-weight: var(--font-weight-semibold);
}

.qtd-chip--inline-text-para.qtd-chip--lg {
  padding-inline: var(--btn-padding-x-lg);
  font-size: var(--font-size-base);
}
.qtd-chip--inline-text-para.qtd-chip--lg.is-selected {
  font-weight: var(--font-weight-semibold);
}

/* Inline zero-padding · 默认有 padding-inline 预留空间，hover/selected 直接出底色不盖文字 */
.qtd-chip--inline-zero-padding {
  /*
   * 段落内嵌：不用 inline-flex（图标首子项无文字基线会抬升整颗 chip）。
   * display: inline + 内部 inline 流，vertical-align: baseline 与 surrounding copy 共基线。
   */
  display: inline;
  vertical-align: baseline;
  align-items: initial;
  justify-content: initial;
  gap: 0;
  height: auto;
  margin: 0;
  padding-block: 0;
  line-height: initial;
  background: transparent;
  color: var(--chip-fg);
  border: none;
  border-radius: var(--chip-inline-radius);
  font-weight: var(--font-weight-regular);
}
.qtd-chip--inline-zero-padding > * + * {
  margin-left: var(--chip-gap);
}
.qtd-chip--inline-zero-padding.has-dropdown .qtd-chip__label + .qtd-chip__trailing--chevron {
  margin-left: 0;
}
.qtd-chip--inline-zero-padding {
  /* leading ↔ remove-hint 同槽互换，勿叠 chip-gap 否则 hover 抖 */
}
.qtd-chip--inline-zero-padding .qtd-chip__icon--leading + .qtd-chip__icon--remove-hint {
  margin-left: 0;
}
.qtd-chip--inline-zero-padding .qtd-chip__icon-slot,
.qtd-chip--inline-zero-padding .qtd-chip__icon,
.qtd-chip--inline-zero-padding .qtd-chip__label,
.qtd-chip--inline-zero-padding .qtd-chip__secondary,
.qtd-chip--inline-zero-padding .qtd-chip__meta,
.qtd-chip--inline-zero-padding .qtd-chip__sep,
.qtd-chip--inline-zero-padding .qtd-chip__trailing,
.qtd-chip--inline-zero-padding .qtd-chip__remove {
  display: inline;
  vertical-align: baseline;
}
.qtd-chip--inline-zero-padding .qtd-chip__icon-slot {
  position: static;
  width: auto;
  height: auto;
}
.qtd-chip--inline-zero-padding {
  --chip-icon-size: 1em;
  --chip-chevron-size: 0.85em;
}
.qtd-chip--inline-zero-padding .qtd-chip__icon {
  font-size: 1em;
}
.qtd-chip--inline-zero-padding .qtd-chip__icon svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}
.qtd-chip--inline-zero-padding .qtd-chip__trailing svg,
.qtd-chip--inline-zero-padding .qtd-chip__remove svg {
  display: inline-block;
  width: 1em;
  height: 1em;
}
.qtd-chip--inline-zero-padding .qtd-chip__trailing--chevron svg {
  width: 0.85em;
  height: 0.85em;
}
.qtd-chip--inline-zero-padding .qtd-chip__icon--remove-hint {
  display: none;
}
.qtd-chip--inline-zero-padding .qtd-chip__icon--remove-hint svg {
  vertical-align: -0.15em;
}
.qtd-chip--inline-zero-padding {
  transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), border-radius var(--duration-fast) var(--easing-standard);
}
.qtd-chip--inline-zero-padding.has-leading:not(.is-selected):not(:hover:not(:disabled)) {
  border-radius: var(--chip-radius);
}
.qtd-chip--inline-zero-padding.has-dropdown {
  gap: 0;
}
.qtd-chip--inline-zero-padding:hover:not(:disabled):not(.is-selected) {
  background: var(--chip-hover-bg);
  border-radius: var(--chip-radius);
}
.qtd-chip--inline-zero-padding.is-selected {
  background: var(--chip-info-bg);
  color: var(--chip-info-fg);
  border-radius: var(--chip-radius);
}
.qtd-chip--inline-zero-padding.is-selected .qtd-chip__sep {
  color: color-mix(in srgb, var(--chip-info-fg) 35%, transparent);
}
.qtd-chip--inline-zero-padding.is-selected .qtd-chip__secondary,
.qtd-chip--inline-zero-padding.is-selected .qtd-chip__meta {
  color: var(--chip-info-fg);
}
.qtd-chip--inline-zero-padding.is-removable.is-selected .qtd-chip__icon--remove-hint {
  color: var(--chip-info-fg);
}
.qtd-chip--inline-zero-padding.is-removable.is-selected:hover:not(:disabled) .qtd-chip__icon--leading {
  display: none;
}
.qtd-chip--inline-zero-padding.is-removable.is-selected:hover:not(:disabled) .qtd-chip__icon--remove-hint {
  display: inline;
}
.qtd-chip--inline-zero-padding:disabled, .qtd-chip--inline-zero-padding[aria-disabled=true] {
  cursor: not-allowed;
  color: var(--chip-disabled-fg);
}
.qtd-chip--inline-zero-padding:disabled .qtd-chip__icon,
.qtd-chip--inline-zero-padding:disabled .qtd-chip__secondary,
.qtd-chip--inline-zero-padding:disabled .qtd-chip__meta,
.qtd-chip--inline-zero-padding:disabled .qtd-chip__sep, .qtd-chip--inline-zero-padding[aria-disabled=true] .qtd-chip__icon,
.qtd-chip--inline-zero-padding[aria-disabled=true] .qtd-chip__secondary,
.qtd-chip--inline-zero-padding[aria-disabled=true] .qtd-chip__meta,
.qtd-chip--inline-zero-padding[aria-disabled=true] .qtd-chip__sep {
  color: var(--chip-disabled-fg);
}
.qtd-chip--inline-zero-padding {
  padding-inline: var(--space-1); /* 4px · 预留，防 hover 底色覆盖相邻文字 */
  transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), border-radius var(--duration-fast) var(--easing-standard);
}
.qtd-chip--inline-zero-padding:hover:not(:disabled):not(.is-selected), .qtd-chip--inline-zero-padding.is-selected {
  border-radius: var(--chip-radius);
}

.qtd-chip--inline-zero-padding.qtd-chip--xs {
  font-size: var(--font-size-xs);
}
.qtd-chip--inline-zero-padding.qtd-chip--xs.is-selected {
  font-weight: var(--font-weight-semibold);
}

.qtd-chip--inline-zero-padding.qtd-chip--sm {
  font-size: var(--font-size-xs);
}
.qtd-chip--inline-zero-padding.qtd-chip--sm.is-selected {
  font-weight: var(--font-weight-semibold);
}

.qtd-chip--inline-zero-padding.qtd-chip--md {
  font-size: var(--font-size-sm);
}
.qtd-chip--inline-zero-padding.qtd-chip--md.is-selected {
  font-weight: var(--font-weight-semibold);
}

.qtd-chip--inline-zero-padding.qtd-chip--lg {
  font-size: var(--font-size-base);
}
.qtd-chip--inline-zero-padding.qtd-chip--lg.is-selected {
  font-weight: var(--font-weight-semibold);
}

/* 段落内嵌：继承 surrounding copy 排版，selected 仅变色 */
.qtd-chip--inline-text-para.is-embed,
.qtd-chip--inline-zero-padding.is-embed {
  font: inherit;
  color: var(--chip-fg);
}
.qtd-chip--inline-text-para.is-embed.qtd-chip--xs, .qtd-chip--inline-text-para.is-embed.qtd-chip--sm, .qtd-chip--inline-text-para.is-embed.qtd-chip--md, .qtd-chip--inline-text-para.is-embed.qtd-chip--lg,
.qtd-chip--inline-zero-padding.is-embed.qtd-chip--xs,
.qtd-chip--inline-zero-padding.is-embed.qtd-chip--sm,
.qtd-chip--inline-zero-padding.is-embed.qtd-chip--md,
.qtd-chip--inline-zero-padding.is-embed.qtd-chip--lg {
  font-size: inherit;
}
.qtd-chip--inline-text-para.is-embed.is-selected,
.qtd-chip--inline-zero-padding.is-embed.is-selected {
  font-weight: inherit;
  color: var(--chip-info-fg);
}
.qtd-chip--inline-text-para.is-embed.is-selected .qtd-chip__label,
.qtd-chip--inline-text-para.is-embed.is-selected .qtd-chip__secondary,
.qtd-chip--inline-text-para.is-embed.is-selected .qtd-chip__meta,
.qtd-chip--inline-zero-padding.is-embed.is-selected .qtd-chip__label,
.qtd-chip--inline-zero-padding.is-embed.is-selected .qtd-chip__secondary,
.qtd-chip--inline-zero-padding.is-embed.is-selected .qtd-chip__meta {
  font-weight: inherit;
}

/* -----------------------------------------------------------------------
   mention-input · 输入框内可关闭引用（Figma 5836:6651）
   3 states × 4 content types · md · font/body-lg/semibold-auto
   HUG vertical · line-height normal（-auto）· padding 0 6 · gap 4
   ----------------------------------------------------------------------- */
.qtd-chip--mention-input {
  gap: var(--space-1);
  height: auto;
  padding: 0 var(--space-1-5);
  border-radius: var(--chip-radius);
  background: var(--chip-info-bg);
  color: var(--chip-info-fg);
  border: var(--border-1) solid transparent;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: normal;
  --mention-slot-size: var(--space-4);
}
.qtd-chip--mention-input .qtd-chip__label {
  line-height: normal;
}
.qtd-chip--mention-input .qtd-chip__icon-slot {
  width: auto;
  height: auto;
}
.qtd-chip--mention-input .qtd-chip__icon,
.qtd-chip--mention-input .qtd-chip__icon-slot {
  font-size: var(--mention-slot-size);
  line-height: normal;
  color: currentColor;
}
.qtd-chip--mention-input .qtd-chip__media:not(.qtd-chip__media--content) {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--mention-slot-size);
  height: var(--mention-slot-size);
  border-radius: var(--radius-1);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  line-height: normal;
}
.qtd-chip--mention-input .qtd-chip__remove--mention {
  font-size: var(--mention-slot-size);
  color: currentColor;
  line-height: normal;
  border-radius: var(--radius-full);
  transition: color var(--duration-fast) var(--easing-standard);
}
.qtd-chip--mention-input .qtd-chip__remove--mention svg {
  width: 1em;
  height: 1em;
  display: block;
}
.qtd-chip--mention-input:hover:not(:disabled) {
  border-color: var(--chip-info-fg);
}
.qtd-chip--mention-input.is-demo-hover:not(:disabled) {
  border-color: var(--chip-info-fg);
}
.qtd-chip--mention-input:disabled {
  cursor: not-allowed;
  background: transparent;
  color: var(--chip-disabled-fg);
  border-color: transparent;
}
.qtd-chip--mention-input:disabled .qtd-chip__icon,
.qtd-chip--mention-input:disabled .qtd-chip__media,
.qtd-chip--mention-input:disabled .qtd-chip__remove--mention {
  color: var(--chip-disabled-fg);
}

.qtd-chip--mention-input.qtd-chip--xs {
  --mention-slot-size: var(--space-3);
  padding: 0 var(--space-1);
  font-size: var(--font-size-xs);
}

.qtd-chip--mention-input.qtd-chip--sm {
  --mention-slot-size: var(--font-size-sm);
  padding: 0 var(--space-1);
  font-size: var(--font-size-xs);
}

.qtd-chip--mention-input.qtd-chip--md {
  --mention-slot-size: var(--space-4);
  padding: 0 var(--space-1-5);
  font-size: var(--font-size-base);
}

.qtd-chip--mention-input.qtd-chip--lg {
  --mention-slot-size: var(--space-5);
  padding: 0 var(--space-2);
  font-size: var(--font-size-base);
}

/* Divider — 引用 @qtd/tokens 的 divider/* 令牌 */
.qtd-divider {
  --divider-color: var(--divider-default);
}

.qtd-divider--default {
  --divider-color: var(--divider-default);
}

.qtd-divider--subtle {
  --divider-color: var(--divider-subtle);
}

.qtd-divider--strong {
  --divider-color: var(--divider-strong);
}

/* 水平 */
.qtd-divider--horizontal {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  color: var(--fg-3);
  font-family: var(--font-family-default);
  font-size: var(--font-size-xs); /* 12 Medium · 设计 */
  font-weight: var(--font-weight-medium);
}

.qtd-divider--horizontal::before,
.qtd-divider--horizontal::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--divider-color);
}

/* 无文字时只画一条线 */
.qtd-divider--horizontal:empty {
  display: block;
  height: 1px;
  background: var(--divider-color);
}

/* 垂直 */
.qtd-divider--vertical {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  min-height: 1em;
  background: var(--divider-color);
}

/* Dropdown — 触发器在原位；面板 portal 到 body + fixed 定位（top/left 由组件内联设置） */
.qtd-dropdown {
  display: inline-block;
}

.qtd-dropdown__trigger {
  display: inline-flex;
}

.qtd-dropdown__pop {
  position: fixed;
  z-index: var(--z-dropdown);
  /* 面板自身也要有背景色/圆角（与内部 .qtd-menu 一致）：
     否则 overscroll/回弹时合成层露出的是本层背景，透明会漏出黑色（对齐 popover.scss 同款 fix） */
  background: var(--dropdown-bg);
  border-radius: var(--dropdown-radius);
  /* 进场：淡入 + 沿展开方向轻移（向下展开自上而来，向上展开自下而来） */
  animation: qtd-pop-in-down var(--duration-fast) var(--easing-decelerate) both;
}

.qtd-dropdown__pop--top {
  animation-name: qtd-pop-in-up;
}

/* 退场：淡出收回，期间不响应点击（JS 150ms 后卸载） */
.qtd-dropdown__pop.is-closing {
  animation: qtd-pop-out var(--duration-fast) var(--easing-accelerate) forwards;
  pointer-events: none;
}

.qtd-dropdown__pop .qtd-menu {
  max-height: var(--dropdown-pop-max-h, 320px);
  overflow-y: auto;
  /* 隐藏滚动条（仍可滚动）：滚动条压在圆角面板上观感差 */
  scrollbar-width: none;
}

.qtd-dropdown__pop .qtd-menu::-webkit-scrollbar {
  display: none;
}

@keyframes qtd-pop-in-down {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--space-1)));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes qtd-pop-in-up {
  from {
    opacity: 0;
    transform: translateY(var(--space-1));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes qtd-pop-out {
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .qtd-dropdown__pop,
  .qtd-dropdown__pop.is-closing {
    animation: none;
  }
}
/* Popover — 轻量浮层：与 Dropdown 同定位，自带 surface；面板内点击不关闭 */
.qtd-popover {
  display: inline-block;
}

.qtd-popover__trigger {
  display: inline-flex;
}

.qtd-popover__pop {
  position: fixed;
  z-index: var(--z-dropdown);
  box-sizing: border-box;
  padding: var(--space-5);
  background: var(--dropdown-bg);
  border: var(--border-1) solid var(--dropdown-border);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-md);
  /* 进/退场复用 dropdown.scss 的 qtd-pop-* keyframes（同一套浮层动效语言） */
  animation: qtd-pop-in-down var(--duration-fast) var(--easing-decelerate) both;
}

.qtd-popover__pop--top {
  animation-name: qtd-pop-in-up;
}

.qtd-popover__pop.is-closing {
  animation: qtd-pop-out var(--duration-fast) var(--easing-accelerate) forwards;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .qtd-popover__pop,
  .qtd-popover__pop.is-closing {
    animation: none;
  }
}
/* Drawer — 引用 @qtd/tokens 的 drawer/* 令牌
   进出场：遮罩淡入 + 面板自 placement 方向滑入（--duration-slow 300ms） */
.qtd-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--drawer-scrim);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--easing-standard);
}

.qtd-drawer-scrim.is-open {
  opacity: 1;
}

.qtd-drawer {
  position: fixed;
  display: flex;
  flex-direction: column;
  background: var(--drawer-bg);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-family-default);
  transition: transform var(--duration-slow) var(--easing-decelerate);
}

.qtd-drawer-scrim:not(.is-open) .qtd-drawer {
  transition-timing-function: var(--easing-accelerate);
}

/* 左右 */
.qtd-drawer--left,
.qtd-drawer--right {
  top: 0;
  bottom: 0;
  max-width: 100%;
}

.qtd-drawer--left {
  left: 0;
  border-right: 1px solid var(--drawer-border);
  transform: translateX(-100%);
}

.qtd-drawer--right {
  right: 0;
  border-left: 1px solid var(--drawer-border);
  transform: translateX(100%);
}

/* 上下 */
.qtd-drawer--top,
.qtd-drawer--bottom {
  left: 0;
  right: 0;
  max-height: 100%;
}

.qtd-drawer--top {
  top: 0;
  border-bottom: 1px solid var(--drawer-border);
  transform: translateY(-100%);
}

.qtd-drawer--bottom {
  bottom: 0;
  border-top: 1px solid var(--drawer-border);
  transform: translateY(100%);
}

.qtd-drawer-scrim.is-open .qtd-drawer {
  transform: translate(0, 0);
}

.qtd-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-6);
  border-bottom: 1px solid var(--drawer-border);
}

.qtd-drawer__title {
  margin: 0;
  color: var(--fg-1);
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.qtd-drawer__close {
  border: 0;
  background: transparent;
  color: var(--fg-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.qtd-drawer__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: var(--space-6);
  color: var(--fg-2);
  font-size: var(--font-size-button-md);
}

@media (prefers-reduced-motion: reduce) {
  .qtd-drawer-scrim,
  .qtd-drawer {
    transition: none;
  }
}
/* Menu / MenuItem — 引用 @qtd/tokens 的 dropdown/* 与 menu-item/* 令牌（设计 §18 5824:2536） */
.qtd-menu {
  display: flex;
  flex-direction: column;
  gap: var(--menu-gap); /* 2px · item 间距 */
  min-width: 180px;
  padding: var(--space-1-5); /* 6 · 对齐设计 6181:4400 面板内边距 */
  background: var(--dropdown-bg);
  border: var(--border-1) solid var(--dropdown-border);
  border-radius: var(--dropdown-radius); /* 12 · 面板（设计 dropdown/radius） */
  box-shadow: var(--shadow-md); /* 中浮 0 4 12 / 10%（设计 shadow/md，原 shadow-lg） */
  font-family: var(--font-family-default);
}

.qtd-menu--borderless {
  min-width: 0;
  padding: var(--space-1-5);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.qtd-menu--icon-only {
  min-width: 0;
  align-items: center;
}

.qtd-menu-item--icon-only {
  justify-content: center;
  width: var(--menu-item-h); /* 36px，与正常行高一致 */
  padding: 0;
}
.qtd-menu-item--icon-only .qtd-menu-item__icon {
  width: var(--menu-item-icon-size);
  height: var(--menu-item-icon-size);
}

.qtd-menu__divider {
  flex-shrink: 0;
  height: var(--border-1);
  margin: var(--space-1) 0;
  background: var(--menu-item-divider);
}

.qtd-menu__label {
  display: flex;
  align-items: center;
  min-height: var(--space-8); /* 32 · 对齐设计 group-label 高度 */
  padding: var(--menu-item-group-label-padding-y, var(--space-1-5)) var(--menu-item-padding-x);
  color: var(--menu-item-group-label-fg);
  font-size: var(--font-size-xs); /* 12px */
}

/* —— Menu Item —— */
.qtd-menu-item {
  display: flex;
  align-items: center;
  gap: var(--menu-item-gap);
  flex-shrink: 0;
  width: 100%;
  min-height: var(--menu-item-h); /* 36 · padding-y 0，靠固定高 */
  padding: 0 var(--menu-item-padding-x);
  border: 0;
  border-radius: var(--menu-item-radius);
  background: transparent;
  color: var(--menu-item-fg-default);
  font: inherit;
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.qtd-menu-item {
  user-select: none;
  -webkit-user-select: none;
}

.qtd-menu-item[data-twoline] {
  min-height: var(--menu-item-h-2line);
  padding-block: var(--space-1-5);
}

.qtd-menu-item:hover:not([aria-disabled=true]) {
  background: var(--menu-item-bg-hover);
}

.qtd-menu-item:active:not([aria-disabled=true]) {
  background: var(--menu-item-bg-press);
}

.qtd-menu-item.is-selected {
  background: var(--menu-item-bg-selected);
  font-weight: var(--font-weight-semibold);
}

/* 子菜单展开时（鼠标在 portal 面板上）父项保持 hover 底色；置于 is-selected 之后以免被选中态覆盖 */
.qtd-menu-item.is-submenu-open:not([aria-disabled=true]) {
  background: var(--menu-item-bg-hover);
}

.qtd-menu-item:focus-visible {
  outline: var(--border-2) solid var(--accent-lime);
  outline-offset: -2px;
}

.qtd-menu-item[aria-disabled=true] {
  color: var(--menu-item-fg-disabled);
  cursor: not-allowed;
}

.qtd-menu-item[aria-disabled=true] .qtd-menu-item__icon,
.qtd-menu-item[aria-disabled=true] .qtd-menu-item__media {
  opacity: 0.5;
}

.qtd-menu-item--danger {
  color: var(--menu-item-fg-danger);
}

/* 前置图标：固定 20×20 居中槽 —— 保证不同图标下所有 label 起始 x 一致（对齐设计 6181:4400） */
.qtd-menu-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--menu-item-icon-size); /* 20 · 固定槽宽 */
  height: var(--menu-item-icon-size);
  color: var(--menu-item-icon-fg);
  font-size: var(--menu-item-icon-size); /* 20px · 内联 SVG 用 1em 时与槽宽一致 */
}

.qtd-menu-item__icon :is(svg, img) {
  flex: none;
}

.qtd-menu-item--danger .qtd-menu-item__icon {
  color: var(--menu-item-icon-danger);
}

/* 资源位：缩略图 / 头像 */
.qtd-menu-item__media {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--menu-item-media-size);
  height: var(--menu-item-media-size);
  border-radius: var(--radius-1);
  overflow: hidden;
  background: var(--menu-item-media-bg);
}

.qtd-menu-item__media :is(img, svg) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 正文：标题 + 可选描述（双行） */
.qtd-menu-item__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-0-5);
  flex: 1 1 auto;
  min-width: 0;
}

.qtd-menu-item__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qtd-menu-item__desc {
  color: var(--menu-item-fg-secondary);
  font-size: var(--font-size-xs); /* 12px */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 右侧：操作图标插槽 / 快捷键 / 选中勾 / 子菜单箭头 */
.qtd-menu-item__trailing {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1em;
  font-size: var(--menu-item-icon-size); /* 20px，与 leadingIcon 一致 */
  color: var(--menu-item-icon-fg);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--easing-standard);
}

.qtd-menu-item__trailing :is(svg, img) {
  flex: none;
  min-width: 1em;
}

.qtd-menu-item:hover .qtd-menu-item__trailing,
.qtd-menu-item:focus-visible .qtd-menu-item__trailing,
.qtd-menu-item.is-submenu-open .qtd-menu-item__trailing {
  opacity: 1;
}

.qtd-menu-item__kbd {
  flex: none;
  color: var(--menu-item-kbd-fg);
  font-size: var(--font-size-2xs);
}

.qtd-menu-item__check {
  flex: none;
  color: var(--menu-item-check-fg);
  font-size: var(--font-size-base);
}

/* 行内复选 / 单选：直接复用基础 Checkbox/Radio 视觉（.qtd-check__box / .qtd-radio__circle，
   见 checkbox.scss / radio.scss，描边态 + 深色勾），由 data-checked 驱动，不再用 lime 控件。 */
/* ── Submenu portal 面板 ─────────────────────────────────────────────────── */
.qtd-submenu__pop {
  position: fixed;
  z-index: var(--z-dropdown);
  /* 复用 Menu 的视觉（边框 / 圆角 / 阴影由内部 .qtd-menu 提供） */
}

/* 左侧透明桥接区：覆盖 trigger 与面板之间的 gap，避免移入子菜单时父项失焦/误关 */
.qtd-submenu__pop::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: var(--space-2);
}

/* Upload — 引用 @qtd/tokens 的 upload-dropzone/* 令牌 */
.qtd-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--upload-dropzone-gap);
  padding: var(--upload-dropzone-padding);
  border: var(--border-1-5) dashed var(--upload-dropzone-border); /* 设计 1.5px 虚线 */
  border-radius: var(--upload-dropzone-radius);
  background: var(--upload-dropzone-bg);
  color: var(--upload-dropzone-label-fg);
  font-family: var(--font-family-default);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
}

.qtd-upload:hover,
.qtd-upload[data-over] {
  background: var(--upload-dropzone-bg-hover);
  border-color: var(--upload-dropzone-border-hover);
}

.qtd-upload[data-disabled] {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.qtd-upload:focus-visible {
  outline: var(--border-2) solid var(--accent-lime);
  outline-offset: 2px;
}

.qtd-upload__icon {
  display: inline-flex;
  align-items: center;
  color: var(--upload-dropzone-icon-fg);
  line-height: 1;
}

.qtd-upload__label {
  font-size: var(--font-size-xs); /* 12px（设计 dropzone-label） */
}

.qtd-upload__hint {
  color: var(--upload-dropzone-hint-fg);
  font-size: var(--font-size-xs); /* 12px（设计 dropzone-hint） */
}

.qtd-upload__input {
  display: none;
}

/* button-trigger 形态：仅包裹 Button + 隐藏的 file input */
.qtd-upload-btn {
  display: inline-flex;
}

/* Input / 字段 — 全部视觉值引用 @qtd/tokens 的 input/* · form-field/* · space/* 变量 */
.qtd-field {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1-5);
  font-family: var(--font-family-default);
}

.qtd-field--block {
  display: flex;
  width: 100%;
}

.qtd-field__label {
  font-size: var(--font-size-button-sm);
  font-weight: var(--font-weight-medium);
  color: var(--form-field-label-fg);
}

.qtd-field__required {
  color: var(--form-field-required-fg);
}

/* 输入容器（承载边框 / 背景 / 图标） */
.qtd-input {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--input-bg);
  border: var(--border-1) solid var(--input-border);
  border-radius: var(--input-radius);
  color: var(--input-text-fg);
  transition: border-color var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
}

.qtd-input:hover {
  border-color: var(--input-border-hover);
}

.qtd-input:focus-within {
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 var(--border-2) var(--input-border-focus);
}

.qtd-input__control {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: inherit;
}

.qtd-input__control::placeholder {
  color: var(--input-placeholder-fg);
}

.qtd-input__icon {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--input-placeholder-fg);
}

/* ---- 尺寸（高度走 input-h token；前/后置图标随尺寸缩放，内联 Icon 用 1em）---- */
.qtd-field--sm .qtd-input {
  height: var(--input-h-sm);
  padding: 0 var(--space-2-5);
  font-size: var(--font-size-button-sm);
}

.qtd-field--sm .qtd-input__icon {
  font-size: var(--input-icon-sm);
}

.qtd-field--md .qtd-input {
  height: var(--input-h-md);
  padding: 0 var(--input-padding-x);
  font-size: var(--font-size-button-md);
}

.qtd-field--md .qtd-input__icon {
  font-size: var(--input-icon-md);
}

.qtd-field--lg .qtd-input {
  height: var(--input-h-lg);
  padding: 0 var(--space-4);
  font-size: var(--font-size-button-md);
}

.qtd-field--lg .qtd-input__icon {
  font-size: var(--input-icon-lg);
}

/* ---- 错误态 ---- */
.qtd-field[data-invalid] .qtd-input,
.qtd-field[data-invalid] .qtd-input:hover {
  border-color: var(--input-border-error);
}

.qtd-field[data-invalid] .qtd-input:focus-within {
  box-shadow: 0 0 0 var(--border-2) var(--input-border-error);
}

/* ---- 禁用 / 只读 ---- */
.qtd-input__control:disabled {
  cursor: not-allowed;
}

.qtd-field[data-disabled] .qtd-input {
  background: var(--input-disabled-bg);
  color: var(--input-disabled-fg);
}

.qtd-field[data-disabled] .qtd-input__control::placeholder {
  color: var(--input-disabled-fg);
}

.qtd-input:has(.qtd-input__control:read-only:not(:disabled)) {
  background: var(--input-readonly-bg);
  color: var(--input-readonly-fg);
}

/* ---- 辅助 / 错误文字 ---- */
.qtd-field__helper {
  margin: 0;
  font-size: var(--font-size-2xs);
  color: var(--form-field-helper-fg);
}

.qtd-field__error {
  margin: 0;
  font-size: var(--font-size-2xs);
  color: var(--form-field-error-fg);
}

/* Modal — 引用 @qtd/tokens 的 modal/* 令牌
   设计 §4.1（4089:6560）：radius-6 · 无边框 · pt24/px24/pb20 · gap16 · 标题块(20+14) · 32 圆关闭
   进出场：遮罩淡入 + 卡片缩放上浮过渡 */
.qtd-modal-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  /* 顶部 + 右侧需为外置关闭按钮（md = 40px）留出空间 */
  padding: var(--space-12) var(--space-12) var(--space-4) var(--space-4);
  background: var(--modal-scrim);
  opacity: 0;
  transition: opacity var(--duration-base) var(--easing-standard);
}

.qtd-modal-scrim.is-open {
  opacity: 1;
}

/* wrap：动画容器 + 关闭按钮锚点；max-width 从 modal 移到此处 */
.qtd-modal-wrap {
  position: relative;
  width: 100%;
  transform: translateY(8px) scale(0.96);
  transition: transform var(--duration-base) var(--easing-decelerate);
}

/* 出场：加速收回，与 Drawer 保持一致 */
.qtd-modal-scrim:not(.is-open) .qtd-modal-wrap {
  transition-timing-function: var(--easing-accelerate);
}

.qtd-modal-scrim.is-open .qtd-modal-wrap {
  transform: translateY(0) scale(1);
}

.qtd-modal-wrap--std {
  max-width: var(--modal-max-width-std);
}

.qtd-modal-wrap--wide {
  max-width: var(--modal-max-width-wide);
}

.qtd-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-4); /* 16 */
  width: 100%;
  max-height: 90vh;
  padding: var(--space-6) var(--space-6) var(--space-5); /* pt24 px24 pb20 */
  overflow: hidden;
  background: var(--modal-bg);
  border-radius: var(--modal-radius); /* 24 (radius-6) */
  box-shadow: var(--shadow-xl);
  font-family: var(--font-family-default);
}

/* padding="none"：零内边距零区块间距，完全自定义内容（版式交给调用方） */
.qtd-modal--bare {
  gap: 0;
  padding: 0;
}

.qtd-modal__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5); /* 6 */
}

.qtd-modal__title {
  margin: 0;
  color: var(--modal-text-title);
  font-size: var(--font-size-lg); /* 20 */
  font-weight: 600;
  line-height: 1.3;
}

.qtd-modal__desc {
  margin: 0;
  color: var(--modal-text-body);
  font-size: var(--font-size-button-md); /* 14 */
  line-height: 1.5;
}

/* 关闭：IconButton ghost·md，绝对定位于卡片右上角外侧
   上偏移 + 右偏移均取 --space-2（8px），两个方向用语义 space token */
.qtd-modal__close {
  position: absolute;
  bottom: 100%; /* 贴卡片顶边 */
  left: 100%; /* 贴卡片右边 */
}

/* ghost iconOnly 默认 radius-2（方角），此处覆盖回满圆 */
.qtd-modal__close.qtd-btn--icon.qtd-btn--ghost {
  border-radius: var(--radius-full);
}

.qtd-modal__close.qtd-btn {
  color: var(--color-white);
}

.qtd-modal__close.qtd-btn:hover {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.15);
}

.qtd-modal__body {
  flex: 1 1 auto;
  overflow: auto;
  color: var(--modal-text-body);
  font-size: var(--font-size-button-md); /* 14 */
  line-height: 1.5;
}

.qtd-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3); /* 12 */
}

@media (prefers-reduced-motion: reduce) {
  .qtd-modal-scrim,
  .qtd-modal-wrap {
    transition: none;
  }
}
/* Pagination — 引用 @qtd/tokens 的 pagination/* 令牌
   设计 §4.7 (4089:7639) · 36 圆形项 · 白底描边 · 当前页浅灰底 */
.qtd-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5); /* 6 */
  font-family: var(--font-family-default);
}

.qtd-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: calc(var(--space-8) + var(--space-1)); /* 36 */
  height: calc(var(--space-8) + var(--space-1));
  padding: 0 var(--space-2);
  border: var(--border-1) solid var(--pagination-border);
  border-radius: var(--radius-full);
  background: var(--pagination-bg-default);
  color: var(--pagination-fg-default);
  font-family: inherit;
  font-size: var(--font-size-button-md);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
}

.qtd-pagination__item:focus-visible {
  outline: var(--border-2) solid var(--accent-lime);
  outline-offset: 2px;
}

.qtd-pagination__item:hover:not(:disabled):not(.is-current) {
  background: var(--pagination-bg-hover);
  color: var(--pagination-fg-hover);
}

.qtd-pagination__item.is-current,
.qtd-pagination__item.is-current:hover:not(:disabled) {
  background: var(--pagination-bg-current);
  border-color: transparent;
  color: var(--pagination-fg-current);
}

.qtd-pagination__item:disabled {
  color: var(--pagination-disabled-fg);
  cursor: not-allowed;
}

.qtd-pagination__nav {
  padding: 0;
}

.qtd-pagination__chevron {
  display: block;
  flex: none;
}

.qtd-pagination__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--space-8) + var(--space-1));
  height: calc(var(--space-8) + var(--space-1));
  color: var(--pagination-disabled-fg);
}

/* 整体禁用态：文字变灰，子元素不可交互 */
.qtd-pagination--disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

/* 总条数 */
.qtd-pagination__total {
  color: var(--fg-2);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  margin-right: var(--space-1);
}

/* 每页条数切换（Select） */
.qtd-pagination__size-changer {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-1);
}

/* 跳转输入框 */
.qtd-pagination__jumper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  margin-left: var(--space-1);
}
.qtd-pagination__jumper .qtd-field {
  width: 48px;
}
.qtd-pagination__jumper .qtd-input__control {
  text-align: center;
}

.qtd-pagination__jumper-label {
  color: var(--fg-2);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .qtd-pagination__item {
    transition: none;
  }
}
/* Progress — 进度（线性 / 圆环）· 引用 progress/* 令牌 */
.qtd-progress--linear {
  display: block;
  width: 100%;
}

.qtd-progress__track {
  width: 100%;
  height: var(--progress-h);
  border-radius: var(--progress-radius);
  background: var(--progress-track);
  overflow: hidden;
}

.qtd-progress__fill {
  height: 100%;
  border-radius: var(--progress-radius);
  background: var(--progress-fill);
  transition: width var(--duration-slow) linear;
}

.qtd-progress--danger .qtd-progress__fill {
  background: var(--progress-fill-danger);
}

/* —— 圆环 —— */
.qtd-progress--circular {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.qtd-progress__svg {
  display: block;
}

.qtd-progress--circular .qtd-progress__track {
  width: auto;
  height: auto;
  background: none;
  stroke: var(--progress-track);
}

.qtd-progress--circular .qtd-progress__fill {
  width: auto;
  height: auto;
  background: none;
  stroke: var(--progress-fill);
  transition: stroke-dashoffset var(--duration-slow) linear;
}

.qtd-progress--circular.qtd-progress--danger .qtd-progress__fill {
  stroke: var(--progress-fill-danger);
}

.qtd-progress__value {
  position: absolute;
  font-family: var(--font-family-default);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--progress-value-fg);
}

/* PromoTag — 业务浮标（设计 §2.1）· 字魂新曲黑 + 饱和底色 + soft shadow · 引用 badge/* 令牌 */
.qtd-promo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 var(--space-2) 2px; /* 8 · 底部 2px 视觉补偿 */
  border-radius: var(--radius-2-5); /* 10 · 设计 */
  font-family: var(--font-family-promo); /* 字魂新曲黑（无字体时回退 Heavy/Black 字重） */
  font-weight: var(--font-weight-black);
  font-size: var(--font-size-xs); /* 12 */
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow-sm); /* soft drop shadow */
}

.qtd-promo--lime {
  background: var(--badge-new-bg);
  color: var(--fg-1);
}

.qtd-promo--info {
  background: var(--badge-info);
  color: var(--badge-info-on);
}

.qtd-promo--success {
  background: var(--badge-success);
  color: var(--badge-success-on);
}

.qtd-promo--danger {
  background: var(--badge-danger);
  color: var(--badge-danger-on);
}

.qtd-promo--warning {
  background: var(--badge-warning);
  color: var(--badge-warning-on);
}

.qtd-promo--ai {
  background: var(--badge-ai-bg);
  color: var(--badge-ai-fg);
}

/* Radio — 引用 @qtd/tokens 的 radio/* 令牌 */
.qtd-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-default);
  font-size: var(--font-size-button-md);
  color: var(--fg-1);
  cursor: pointer;
}

.qtd-radio[data-disabled] {
  cursor: not-allowed;
  color: var(--fg-disabled);
}

.qtd-radio__input {
  position: absolute;
  width: var(--radio-size);
  height: var(--radio-size);
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.qtd-radio__circle {
  position: relative;
  flex: none;
  width: var(--radio-size);
  height: var(--radio-size);
  border: var(--border-1) solid var(--radio-border);
  border-radius: var(--radius-full);
  background: var(--radio-bg);
  transition: border-color var(--duration-fast) var(--easing-standard);
}

/* 选中指示为经典内圆点（设计 305:1015：深色环 + 深色点） */
.qtd-radio__circle::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--radio-dot-checked);
  transform: scale(0);
  transition: transform var(--duration-fast) var(--easing-standard);
}

/* hover：边框加深（disabled 态跳过） */
.qtd-radio:not([data-disabled]):hover .qtd-radio__circle {
  border-color: var(--radio-border-hover);
}

/* checked：描边加深 + 显示内圆点 */
.qtd-radio__input:checked + .qtd-radio__circle {
  border-color: var(--radio-border-checked);
}

.qtd-radio__input:checked + .qtd-radio__circle::after {
  transform: scale(1);
}

/* 受控视觉（无 input，data-checked 驱动）—— 供 MenuItem 等容器复用本组件外观 */
.qtd-radio__circle[data-checked] {
  border-color: var(--radio-border-checked);
}

.qtd-radio__circle[data-checked]::after {
  transform: scale(1);
}

/* focus */
.qtd-radio__input:focus-visible + .qtd-radio__circle {
  outline: var(--border-2) solid var(--accent-lime);
  outline-offset: 2px;
}

/* disabled */
.qtd-radio__input:disabled + .qtd-radio__circle {
  border-color: var(--radio-disabled-border);
}

.qtd-radio__input:disabled + .qtd-radio__circle::after {
  background: var(--radio-disabled-dot);
}

/* Spinner — 圆环旋转加载（颜色取 currentColor） */
.qtd-spinner {
  display: inline-block;
  box-sizing: border-box;
  border-style: solid;
  border-color: currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: qtd-spinner-spin var(--duration-slower) var(--easing-standard) infinite;
}

@keyframes qtd-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .qtd-spinner {
    animation-duration: 1.5s;
  }
}
/* Tooltip — 悬停提示（暗底白字 + 阴影 + 可带箭头）· portal 到 body + fixed 定位 · 引用 tooltip/* 令牌 */
.qtd-tooltip-trigger {
  display: inline-flex;
}

.qtd-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  width: max-content;
  max-width: 240px;
  display: inline-flex;
  align-items: center;
  gap: var(--tooltip-gap);
  padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
  border-radius: var(--tooltip-radius);
  background: var(--tooltip-bg);
  color: var(--tooltip-fg);
  font-family: var(--font-family-default);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

.qtd-tooltip__content {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--tooltip-max-lines, 1);
  word-break: break-word;
}

.qtd-tooltip--wrap .qtd-tooltip__content {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

/* 锚点已按方位算好（见 Tooltip.tsx），此处仅把气泡相对锚点对齐 */
.qtd-tooltip[data-placement=top] {
  transform: translate(-50%, -100%);
}

.qtd-tooltip[data-placement=bottom] {
  transform: translate(-50%, 0);
}

.qtd-tooltip[data-placement=left] {
  transform: translate(-100%, -50%);
}

.qtd-tooltip[data-placement=right] {
  transform: translate(0, -50%);
}

/* 箭头（指向触发元素，随方位翻面） */
.qtd-tooltip[data-arrow]::after {
  content: "";
  position: absolute;
  border: var(--space-1-5) solid transparent;
}

.qtd-tooltip[data-arrow][data-placement=top]::after {
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border-top-color: var(--tooltip-bg);
}

.qtd-tooltip[data-arrow][data-placement=bottom]::after {
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  border-bottom-color: var(--tooltip-bg);
}

.qtd-tooltip[data-arrow][data-placement=left]::after {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border-left-color: var(--tooltip-bg);
}

.qtd-tooltip[data-arrow][data-placement=right]::after {
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border-right-color: var(--tooltip-bg);
}

/* Search — 复用 Input 容器（.qtd-field/.qtd-input），仅叠加搜索专属样式 · 引用 search/* 令牌 */
/* 前置放大镜用深色（设计 search/icon-fg）；清除按钮见下方覆盖为灰色 */
.qtd-search .qtd-input__icon {
  color: var(--search-icon-fg);
}

/* 搜索框聚焦边框为深色（设计 search/border-focused，区别于 Input 的浅色聚焦） */
.qtd-search .qtd-input:focus-within {
  border-color: var(--search-border-focused);
  box-shadow: 0 0 0 var(--border-2) var(--search-border-focused);
}

/* 隐藏浏览器原生搜索清除按钮（用自定义 × 清除） */
.qtd-search .qtd-input__control::-webkit-search-cancel-button {
  display: none;
}

/* 自定义清除按钮 */
.qtd-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--search-clear-fg);
  line-height: 1;
  cursor: pointer;
}

.qtd-search__clear:hover {
  color: var(--search-fg);
}

/* Select — 自定义下拉：触发器引用 select/* 令牌；下拉面板由 Menu/MenuItem 承担 */
.qtd-select-root {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

.qtd-select-root > .qtd-select {
  width: 100%;
}

.qtd-select-root--block {
  display: block;
  width: 100%;
}

/* ── 触发器（div[role=combobox]） ───────────────────────────────────────── */
.qtd-select {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--select-gap);
  padding: 0 var(--select-padding-x);
  background: var(--select-bg);
  border: var(--border-1) solid var(--select-border);
  border-radius: var(--select-radius);
  color: var(--select-fg);
  font-family: var(--font-family-default);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
}

.qtd-select--block {
  width: 100%;
}

.qtd-select:hover:not([aria-disabled=true]) {
  border-color: var(--select-border-focused);
}

.qtd-select:focus-visible,
.qtd-select.is-open {
  outline: 0;
  border-color: var(--select-border-focused);
  box-shadow: 0 0 0 var(--border-2) var(--select-border-focused);
}

.qtd-select[aria-disabled=true] {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.qtd-select--sm {
  height: var(--select-h-sm);
  font-size: var(--font-size-button-sm);
}

.qtd-select--md {
  height: var(--select-h-md);
  font-size: var(--font-size-button-md);
}

.qtd-select--lg {
  height: var(--select-h-lg);
  font-size: var(--font-size-button-md);
}

/* ── 文字区 ──────────────────────────────────────────────────────────────── */
.qtd-select__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--select-fg);
}

.qtd-select__placeholder {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--select-placeholder-fg);
}

/* 搜索输入框（嵌入触发器内，open 时替换文字） */
.qtd-select__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--select-fg);
  font-size: inherit;
  font-family: inherit;
  cursor: text;
}
.qtd-select__search-input::placeholder {
  color: var(--select-placeholder-fg);
}

/* ── 图标区 ──────────────────────────────────────────────────────────────── */
.qtd-select__suffix {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
}

/* chevron */
.qtd-select__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--select-chevron-fg);
  font-size: var(--font-size-xs);
  transition: transform var(--duration-fast) var(--easing-standard);
}

.qtd-select.is-open .qtd-select__chevron {
  transform: rotate(180deg);
}

/* 清空按钮：默认隐藏，hover 时与 chevron 互换 */
.qtd-select__suffix--clearable {
  position: relative;
}
.qtd-select__suffix--clearable .qtd-select__clear {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--fg-3);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-full);
  transition: color var(--duration-fast) var(--easing-standard);
}
.qtd-select__suffix--clearable .qtd-select__clear:hover {
  color: var(--fg-1);
}
.qtd-select__suffix--clearable .qtd-select__chevron {
  display: inline-flex;
}

/* root hover 时：显示 clear，隐藏 chevron */
.qtd-select-root:hover .qtd-select__suffix--clearable .qtd-select__clear {
  display: inline-flex;
}
.qtd-select-root:hover .qtd-select__suffix--clearable .qtd-select__chevron {
  display: none;
}

/* ── 无匹配结果 ──────────────────────────────────────────────────────────── */
.qtd-select__empty {
  padding: var(--space-3) var(--space-4);
  color: var(--fg-3);
  font-size: var(--font-size-sm);
  text-align: center;
}

/* ── 下拉面板 ────────────────────────────────────────────────────────────── */
.qtd-select__pop {
  position: fixed;
  z-index: var(--z-dropdown);
}

.qtd-select__pop .qtd-menu {
  min-width: 100%;
  max-height: var(--select-pop-max-h, 240px);
  overflow-y: auto;
}

/* Skeleton — 引用 @qtd/tokens 的 skeleton/* 令牌 */
.qtd-skeleton {
  display: block;
  border: none;
  border-radius: var(--radius-2);
  background: var(--skeleton-shimmer-base);
  background-image: linear-gradient(90deg, var(--skeleton-shimmer-base) 0%, var(--skeleton-shimmer-highlight) 50%, var(--skeleton-shimmer-base) 100%);
  background-size: 200% 100%;
  animation: qtd-skeleton-shimmer 1.4s var(--easing-standard) infinite;
}

.qtd-skeleton--rect {
  width: 100%;
  height: 80px;
}

.qtd-skeleton--circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.qtd-skeleton--line {
  height: 12px;
}

.qtd-skeleton--bordered {
  border: 1px solid var(--skeleton-border);
}

.qtd-skeleton-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@keyframes qtd-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .qtd-skeleton {
    animation: none;
  }
}
/* Slider — 消费语义令牌（无专用 slider token）· 对齐设计 §14（305:1070）：
   轨道 4px line/2 · 已填充 fg/1 · 滑块 16px input/bg 填充 + 2px fg/1 描边（无阴影）· 值文字 12 fg/1 */
.qtd-slider {
  display: flex; /* 块级 flex：避免 inline-flex 在无定宽祖先下 width:100% 百分比失效，退回内容尺寸 */
  align-items: center;
  gap: var(--space-4); /* 16 · 对齐设计滑轨与数值间距 */
  width: 100%;
}

.qtd-slider[data-disabled] {
  cursor: not-allowed;
}

.qtd-slider__value {
  flex: none;
  min-width: 3ch;
  text-align: right;
  color: var(--input-text-fg); /* fg/1 · 对齐设计（原 fg/2） */
  font-family: var(--font-family-default);
  font-size: var(--font-size-button-sm);
  font-variant-numeric: tabular-nums;
}

.qtd-slider__input {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0; /* 覆盖 UA 默认宽度（约 129.6px）作为 flex-basis/min-content 参与计算导致的固定宽 */
  width: 100%;
  height: var(--space-6); /* 24 · 对齐设计交互高度 */
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.qtd-slider__input:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

/* 轨道（WebKit）— 用渐变表现已填充段 */
.qtd-slider__input::-webkit-slider-runnable-track {
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--fg-1) 0 var(--qtd-slider-pct, 0%), var(--line-2) var(--qtd-slider-pct, 0%) 100%);
}

/* 轨道（Firefox） */
.qtd-slider__input::-moz-range-track {
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--line-2);
}

.qtd-slider__input::-moz-range-progress {
  height: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--fg-1);
}

/* 滑块（WebKit）— 16 总尺寸（含 2px 深描边）· input/bg 填充 · 无阴影（对齐设计） */
.qtd-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin-top: -6px; /* (track 4 - thumb 16) / 2 */
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--input-bg);
  border: var(--border-2) solid var(--fg-1);
}

/* 滑块（Firefox） */
.qtd-slider__input::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--input-bg);
  border: var(--border-2) solid var(--fg-1);
}

.qtd-slider__input:focus-visible::-webkit-slider-thumb {
  outline: var(--border-2) solid var(--accent-lime);
  outline-offset: 2px;
}

.qtd-slider__input:focus-visible::-moz-range-thumb {
  outline: var(--border-2) solid var(--accent-lime);
  outline-offset: 2px;
}

/* Tabs — 引用 @qtd/tokens 的 tabs/* 令牌 · 设计 §4.5 (4089:7321)
   pill/underline 用单个滑动指示器（.qtd-tabs__indicator）跟随选中项移动 */
/* 外层滚动容器：撑满父宽，超出横向滚动，隐藏滚动条 */
.qtd-tabs-outer {
  display: flex; /* flex 防止内层 inline-flex 被拉伸到容器宽 */
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}

.qtd-tabs-outer::-webkit-scrollbar {
  display: none;
} /* Chrome/Safari */
/* underline 轨道线挂在外层，与容器等宽 */
.qtd-tabs-outer--underline {
  border-bottom: var(--border-1) solid var(--tabs-underline-track);
}

/* pill 系：外层同步圆角，防止滚动时裁掉内层圆角 */
.qtd-tabs-outer--pill,
.qtd-tabs-outer--pill-primary,
.qtd-tabs-outer--pill-plain {
  border-radius: var(--radius-full);
}

.qtd-tabs {
  position: relative;
  display: inline-flex;
  flex-shrink: 0; /* 作为 flex item 时不压缩，保持内容宽 */
  font-family: var(--font-family-default);
  font-size: var(--font-size-button-md);
}

.qtd-tabs__tab {
  appearance: none;
  position: relative;
  z-index: 1; /* 文本在滑块之上 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: color var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard);
}

.qtd-tabs__tab:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.qtd-tabs__tab.is-active {
  font-weight: var(--font-weight-semibold);
}

/* 滑动指示器（绝对定位，transform 跟随选中项） */
.qtd-tabs__indicator {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
}

.qtd-tabs__indicator.is-ready {
  transition: transform var(--duration-base) var(--easing-standard), width var(--duration-base) var(--easing-standard), height var(--duration-base) var(--easing-standard);
}

/* ---- 下划线（页面级 · h44 · 16px · 指示条等宽于文字）---- */
.qtd-tabs--underline {
  gap: var(--space-4);
}

.qtd-tabs--underline .qtd-tabs__tab {
  height: 44px;
  padding: 0 var(--space-4);
  font-size: var(--font-size-base); /* 16 */
  color: var(--tabs-underline-fg-default);
}

.qtd-tabs--underline .qtd-tabs__tab:hover:not(:disabled):not(.is-active) {
  color: var(--tabs-underline-fg-hover);
}

.qtd-tabs--underline .qtd-tabs__tab.is-active {
  color: var(--tabs-underline-fg-active);
}

.qtd-tabs--underline .qtd-tabs__indicator {
  top: auto;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--tabs-underline-indicator);
}

/* ---- 胶囊（容器底 · 选中白滑块 + 阴影）/ 强调版（选中深滑块）---- */
.qtd-tabs--pill,
.qtd-tabs--pill-primary {
  gap: var(--space-1-5);
  padding: var(--space-1);
  background: var(--tabs-pill-bg-container);
  border-radius: var(--radius-full);
}

.qtd-tabs--pill .qtd-tabs__tab,
.qtd-tabs--pill-primary .qtd-tabs__tab,
.qtd-tabs--pill-plain .qtd-tabs__tab {
  border-radius: var(--radius-full);
  color: var(--tabs-pill-fg-default);
}

.qtd-tabs--pill .qtd-tabs__tab:hover:not(:disabled):not(.is-active),
.qtd-tabs--pill-primary .qtd-tabs__tab:hover:not(:disabled):not(.is-active),
.qtd-tabs--pill-plain .qtd-tabs__tab:hover:not(:disabled):not(.is-active) {
  color: var(--tabs-pill-fg-hover);
}

.qtd-tabs--pill .qtd-tabs__tab.is-active {
  color: var(--tabs-pill-fg-active);
}

.qtd-tabs--pill-primary .qtd-tabs__tab.is-active {
  color: var(--tabs-pill-primary-fg-active);
}

.qtd-tabs--pill .qtd-tabs__indicator,
.qtd-tabs--pill-plain .qtd-tabs__indicator {
  border-radius: var(--radius-full);
  background: var(--tabs-pill-bg-active);
  border: var(--border-1) solid var(--tabs-pill-border-active);
  box-sizing: border-box;
}

.qtd-tabs--pill .qtd-tabs__indicator {
  box-shadow: var(--shadow-sm);
}

.qtd-tabs--pill-primary .qtd-tabs__indicator {
  border-radius: var(--radius-full);
  background: var(--tabs-pill-primary-bg-active);
  border: var(--border-1) solid var(--tabs-pill-border-active);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}

/* ---- 胶囊 · 浅色无底（无容器底 · 选中浅滑块）---- */
.qtd-tabs--pill-plain {
  gap: var(--space-1-5);
  padding: var(--space-1); /* 与 pill/pill-primary 对齐，防止切换变体时按钮位置偏移 */
}

.qtd-tabs--pill-plain .qtd-tabs__tab.is-active {
  color: var(--tabs-pill-fg-active);
}

/* 胶囊尺寸（仅 pill 系生效）· 高度 / 内边距 / 字号参考按钮尺寸令牌 */
.qtd-tabs--sm:is(.qtd-tabs--pill, .qtd-tabs--pill-primary, .qtd-tabs--pill-plain) .qtd-tabs__tab {
  height: var(--tabs-pill-h-sm);
  padding: 0 var(--tabs-pill-padding-x-sm);
  font-size: var(--tabs-pill-font-sm);
}

.qtd-tabs--md:is(.qtd-tabs--pill, .qtd-tabs--pill-primary, .qtd-tabs--pill-plain) .qtd-tabs__tab {
  height: var(--tabs-pill-h-md);
  padding: 0 var(--tabs-pill-padding-x-md);
  font-size: var(--tabs-pill-font-md);
}

.qtd-tabs--lg:is(.qtd-tabs--pill, .qtd-tabs--pill-primary, .qtd-tabs--pill-plain) .qtd-tabs__tab {
  height: var(--tabs-pill-h-lg);
  padding: 0 var(--tabs-pill-padding-x-lg);
  font-size: var(--tabs-pill-font-lg);
}

/* ---- 分段（互斥小选项 · 段间分隔 · 12px · 逐段背景，非滑动）---- */
.qtd-tabs--segmented {
  background: var(--tabs-segmented-bg);
  border: var(--border-1) solid var(--tabs-segmented-border);
  border-radius: var(--radius-2);
  overflow: hidden;
}

.qtd-tabs--segmented .qtd-tabs__tab {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs); /* 12 */
  color: var(--tabs-segmented-fg);
}

.qtd-tabs--segmented .qtd-tabs__tab:not(.is-active) + .qtd-tabs__tab:not(.is-active) {
  border-left: var(--border-1) solid var(--tabs-segmented-divider);
}

.qtd-tabs--segmented .qtd-tabs__tab:hover:not(:disabled):not(.is-active) {
  color: var(--tabs-segmented-fg-hover);
}

.qtd-tabs--segmented .qtd-tabs__tab.is-active {
  background: var(--tabs-segmented-bg-active);
  color: var(--tabs-segmented-fg-active);
}

/* Tag — 引用 @qtd/tokens 的 tag/* 令牌 */
.qtd-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--tag-gap);
  height: var(--tag-h);
  padding: 0 var(--tag-padding-x);
  border: 1px solid transparent;
  border-radius: var(--tag-radius);
  font-family: var(--font-family-default);
  font-size: var(--tag-font-size);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  white-space: nowrap;
}

/* label：脱离行高继承链，防止放入 line-height:1 容器（如 Button）时文字被压缩 */
.qtd-tag__label {
  line-height: normal;
}

/* 前置圆点：用对应变体的饱和 badge 色（lime 用深色 fg-1，对齐设计 chip/active-bg #0d0d0d） */
.qtd-tag__dot {
  flex: none;
  width: var(--space-1-5);
  height: var(--space-1-5);
  border-radius: var(--radius-full);
  background: currentColor;
}

.qtd-tag--success .qtd-tag__dot {
  background: var(--badge-success);
}

.qtd-tag--warning .qtd-tag__dot {
  background: var(--badge-warning);
}

.qtd-tag--danger .qtd-tag__dot {
  background: var(--badge-danger);
}

.qtd-tag--lime .qtd-tag__dot {
  background: var(--fg-1);
}

.qtd-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tag-remove-size);
  height: var(--tag-remove-size);
  margin-right: var(--tag-remove-offset);
  padding: 0;
  border: 0;
  border-radius: var(--radius-1);
  background: transparent;
  color: inherit;
  font-size: var(--tag-font-size);
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.qtd-tag__remove:hover {
  opacity: 1;
}

.qtd-tag--neutral {
  background: var(--tag-neutral-bg);
  color: var(--tag-neutral-fg);
}

.qtd-tag--info {
  background: var(--tag-info-bg);
  color: var(--tag-info-fg);
}

.qtd-tag--success {
  background: var(--tag-success-bg);
  color: var(--tag-success-fg);
}

.qtd-tag--warning {
  background: var(--tag-warning-bg);
  color: var(--tag-warning-fg);
}

.qtd-tag--danger {
  background: var(--tag-danger-bg);
  color: var(--tag-danger-fg);
}

.qtd-tag--lime {
  background: var(--tag-lime-bg);
  color: var(--tag-lime-fg);
}

.qtd-tag--outline {
  background: transparent;
  color: var(--tag-neutral-fg);
  border-color: var(--tag-outline-border);
}

/* Textarea — 复用 input/* 令牌（与 Input 共用 .qtd-field 结构）*/
.qtd-textarea {
  width: 100%;
  min-height: calc(var(--input-h-lg) * 2);
  padding: var(--space-2-5) var(--input-padding-x);
  background: var(--input-bg);
  border: var(--border-1) solid var(--input-border);
  border-radius: var(--input-radius);
  color: var(--input-text-fg);
  font-family: var(--font-family-default);
  font-size: var(--font-size-button-md);
  line-height: var(--font-lh-normal);
  resize: vertical; /* 默认仅纵向；由 data-resize 覆盖 */
  transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
}

/* 拖拽缩放方向（data-resize：none 禁止拖高度 / vertical / horizontal / both） */
.qtd-textarea[data-resize=none] {
  resize: none;
}

.qtd-textarea[data-resize=vertical] {
  resize: vertical;
}

.qtd-textarea[data-resize=horizontal] {
  resize: horizontal;
}

.qtd-textarea[data-resize=both] {
  resize: both;
}

/* 自动撑高：高度由 JS 按 scrollHeight 计算，禁用手动拖拽把手，避免两套高度逻辑打架 */
.qtd-textarea[data-auto-resize] {
  overflow: hidden;
  resize: none;
}

.qtd-textarea::placeholder {
  color: var(--input-placeholder-fg);
}

.qtd-textarea:hover {
  border-color: var(--input-border-hover);
}

.qtd-textarea:focus {
  outline: 0;
  border-color: var(--input-border-focus);
  box-shadow: 0 0 0 var(--border-2) var(--input-border-focus);
}

/* 错误态 */
.qtd-field[data-invalid] .qtd-textarea {
  border-color: var(--input-border-error);
}

.qtd-field[data-invalid] .qtd-textarea:focus {
  box-shadow: 0 0 0 var(--border-2) var(--input-border-error);
}

/* 禁用 */
.qtd-field[data-disabled] .qtd-textarea {
  background: var(--input-disabled-bg);
  color: var(--input-disabled-fg);
  cursor: not-allowed;
  resize: none;
}

/* Toast — 引用 @qtd/tokens 的 toast/* 令牌
   设计 §4.3（4089:6735）：radius-4 · 重阴影 · 前置 12px 彩色圆点 · 可带操作 · 28 圆形关闭 */
.qtd-toast {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: max-content;
  min-width: var(--toast-min-width);
  max-width: var(--toast-max-width);
  padding: var(--toast-padding-y) var(--toast-padding-x);
  background: var(--toast-bg);
  border: var(--border-1) solid var(--toast-border);
  border-radius: var(--radius-4); /* 16 */
  box-shadow: var(--shadow-lg);
  font-family: var(--font-family-default);
}

/* 前置指示槽：28 方槽内居中 12px 圆点（或自定义 icon） */
.qtd-toast__indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--toast-indicator-size);
  height: var(--toast-indicator-size);
  line-height: 1;
}

.qtd-toast__dot {
  width: var(--toast-dot-size);
  height: var(--toast-dot-size);
  border-radius: var(--radius-full);
  background: var(--toast-info-icon);
}

.qtd-toast--info .qtd-toast__dot {
  background: var(--toast-info-icon);
}

.qtd-toast--success .qtd-toast__dot {
  background: var(--toast-success-icon);
}

.qtd-toast--warning .qtd-toast__dot {
  background: var(--toast-warning-icon);
}

.qtd-toast--danger .qtd-toast__dot {
  background: var(--toast-danger-icon);
}

/* 自定义 icon 覆盖时继承 tone 色 */
.qtd-toast--info .qtd-toast__indicator {
  color: var(--toast-info-icon);
}

.qtd-toast--success .qtd-toast__indicator {
  color: var(--toast-success-icon);
}

.qtd-toast--warning .qtd-toast__indicator {
  color: var(--toast-warning-icon);
}

.qtd-toast--danger .qtd-toast__indicator {
  color: var(--toast-danger-icon);
}

.qtd-toast__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.qtd-toast__title {
  color: var(--toast-title-fg);
  font-size: var(--font-size-button-md); /* 14 */
  font-weight: 600;
  line-height: 1.2;
}

.qtd-toast__body {
  color: var(--toast-body-fg);
  font-size: var(--font-size-xs); /* 12 */
  line-height: 1.5;
}

.qtd-toast__content + * {
  /* 内容区与操作区（按钮/关闭）间距 space-4；容器 gap 已有 space-1，此处补足差额 */
  margin-left: calc(var(--toast-content-actions-gap) - var(--space-1));
}

.qtd-toast__actions {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: var(--space-1-5); /* 6 */
}

.qtd-toast__action {
  flex: none;
}

/* 关闭：28 圆形 ghost，hover 出底 */
.qtd-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--toast-close-size);
  height: var(--toast-close-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--toast-body-fg);
  line-height: 1;
  cursor: pointer;
}

.qtd-toast__close:hover {
  background: var(--toast-close-hover-bg);
}

/* ── 调用式容器（toast.* 自动挂载 · 底部居中） ───────────── */
.qtd-toaster-host {
  display: contents; /* createRoot 宿主，不参与布局 */
}

.qtd-toaster {
  position: fixed;
  bottom: calc(var(--space-16) * 2);
  left: calc(50% + var(--qtd-sidebar-w, 0px) / 2);
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: max-content;
  max-width: var(--toast-max-width);
  pointer-events: none; /* 容器透传，子项可交互 */
}

.qtd-toaster__item {
  pointer-events: auto;
  animation: qtd-toast-in var(--duration-base, 0.2s) var(--easing-standard, ease);
}

.qtd-toaster__item.is-leaving {
  animation: qtd-toast-out var(--duration-fast, 0.15s) var(--easing-standard, ease) forwards;
}

@keyframes qtd-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes qtd-toast-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
@media (prefers-reduced-motion: reduce) {
  .qtd-toaster__item,
  .qtd-toaster__item.is-leaving {
    animation: none;
  }
}
/* Toggle — 引用 @qtd/tokens 的 toggle/* 令牌 */
.qtd-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-default);
  font-size: var(--font-size-button-md);
  color: var(--fg-1);
  cursor: pointer;
}

.qtd-toggle[data-disabled] {
  cursor: not-allowed;
  color: var(--fg-disabled);
}

.qtd-toggle__input {
  position: absolute;
  width: var(--toggle-track-w);
  height: var(--toggle-track-h);
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.qtd-toggle__track {
  position: relative;
  flex: none;
  width: var(--toggle-track-w);
  height: var(--toggle-track-h);
  border-radius: var(--radius-full); /* 胶囊 */
  background: var(--toggle-track-off);
  transition: background-color var(--duration-fast) var(--easing-standard);
}

.qtd-toggle__thumb {
  position: absolute;
  top: var(--toggle-thumb-offset);
  left: var(--toggle-thumb-offset);
  width: var(--toggle-thumb-size);
  height: var(--toggle-thumb-size);
  border-radius: var(--radius-full);
  background: var(--toggle-thumb);
  border: 0.5px solid var(--toggle-thumb-border); /* 设计 0.5px input/border 描边 */
  box-sizing: border-box;
  transition: transform var(--duration-fast) var(--easing-standard);
}

/* checked */
.qtd-toggle__input:checked + .qtd-toggle__track {
  background: var(--toggle-track-on);
}

.qtd-toggle__input:checked + .qtd-toggle__track .qtd-toggle__thumb {
  transform: translateX(var(--toggle-thumb-travel));
}

/* focus */
.qtd-toggle__input:focus-visible + .qtd-toggle__track {
  outline: var(--border-2) solid var(--accent-lime);
  outline-offset: 2px;
}

/* disabled */
.qtd-toggle__input:disabled + .qtd-toggle__track {
  background: var(--toggle-disabled-track);
}

.qtd-toggle__input:disabled + .qtd-toggle__track .qtd-toggle__thumb {
  background: var(--toggle-disabled-thumb);
}

@font-face {
  font-family: 'swiper-icons';
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");
  font-weight: 400;
  font-style: normal; }

:root {
  --swiper-theme-color: #007aff; }

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1; }

.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column; }

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box; }

.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0); }

.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap; }

.swiper-container-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column; }

.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto; }

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform; }

.swiper-slide-invisible-blank {
  visibility: hidden; }

/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto; }

.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height; }

/* 3D Effects */
.swiper-container-3d {
  perspective: 1200px; }
  .swiper-container-3d .swiper-wrapper,
  .swiper-container-3d .swiper-slide,
  .swiper-container-3d .swiper-slide-shadow-left,
  .swiper-container-3d .swiper-slide-shadow-right,
  .swiper-container-3d .swiper-slide-shadow-top,
  .swiper-container-3d .swiper-slide-shadow-bottom,
  .swiper-container-3d .swiper-cube-shadow {
    transform-style: preserve-3d; }
  .swiper-container-3d .swiper-slide-shadow-left,
  .swiper-container-3d .swiper-slide-shadow-right,
  .swiper-container-3d .swiper-slide-shadow-top,
  .swiper-container-3d .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10; }
  .swiper-container-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
  .swiper-container-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
  .swiper-container-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
  .swiper-container-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }

/* CSS Mode */
.swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */ }
  .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none; }

.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start; }

.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory; }

.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory; }

.xhsShareOverlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center; }

.xhsShareBox {
  position: relative;
  width: 266px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column; }

.xhsShareQrWrap {
  width: 266px;
  height: 360px;
  flex-shrink: 0;
  background-image: url(//static.qiantucdn.com/static/images/detail/xhs-share-bg.png?1);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; }

.xhsShareQrInner {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 194px;
  height: 194px;
  display: flex;
  align-items: center;
  justify-content: center; }

.xhsShareFooter {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; }

.xhsShareCopyBtn {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 36px;
  cursor: pointer;
  font-size: 14px;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.45) !important; }
  .xhsShareCopyBtn:hover {
    color: #D8FF00 !important;
    border-color: #D8FF00 !important; }

.downloadSuccessCard {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2001;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }
  .downloadSuccessCard:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    filter: blur(16px);
    z-index: 0; }
  .downloadSuccessCard .downloadSuccessCardContent {
    position: relative;
    width: 566px;
    height: auto;
    border-radius: 16px;
    background: linear-gradient(180deg, #F1FFC9 0%, #FFF 41%);
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    padding: 16px 24px;
    z-index: 1; }
    .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentHead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 22px;
      margin-bottom: 16px; }
      .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentHead .downloadSuccessCardContentHeadTitle {
        color: #00B277;
        font-size: 14px;
        font-weight: 400; }
        .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentHead .downloadSuccessCardContentHeadTitle .headSep {
          color: #00B277; }
        .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentHead .downloadSuccessCardContentHeadTitle .headWatermarkLink {
          color: #00B277;
          text-decoration: none; }
          .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentHead .downloadSuccessCardContentHeadTitle .headWatermarkLink:hover {
            text-decoration: underline; }
      .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentHead .closeIcon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        cursor: pointer;
        transition: all 0.3s ease-in-out; }
        .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentHead .closeIcon:hover {
          color: #00B277; }
    .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentBody {
      padding-bottom: 16px; }
      .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentBody .imageBox {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 32px; }
        .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentBody .imageBox .successImgBox {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center; }
          .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentBody .imageBox .successImgBox .successImg {
            width: auto;
            height: 131px; }
          .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentBody .imageBox .successImgBox .ribbonLeft {
            position: absolute;
            left: 18px;
            bottom: 0;
            width: auto;
            height: 53px;
            transform: scale(0.1);
            animation: ribbonExplodeLeft 0.8s cubic-bezier(0.34, 1, 0.64, 1) 0.1s infinite; }
          .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentBody .imageBox .successImgBox .ribbonRight1 {
            position: absolute;
            width: auto;
            height: 49px;
            top: 77px;
            right: 27px;
            transform: scale(0.1);
            animation: ribbonExplodeRight1 0.8s cubic-bezier(0.34, 1, 0.64, 1) 0.1s infinite; }
          .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentBody .imageBox .successImgBox .ribbonRight2 {
            position: absolute;
            width: auto;
            height: 81px;
            opacity: 0;
            right: -9px;
            bottom: 8px;
            transform: scale(0.1);
            animation: ribbonExplodeRight2 0.8s cubic-bezier(0.34, 1, 0.64, 1) 0.1s infinite; }
        .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentBody .imageBox .text {
          color: #333;
          text-align: center;
          font-size: 24px;
          font-weight: 600;
          line-height: 32px; }
      .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentBody .bottomBox {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 16px; }
        .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentBody .bottomBox .bottomBoxText {
          display: flex;
          align-items: center;
          color: var(--qtd-brand-color-4);
          text-align: center;
          font-size: 14px;
          line-height: 22px;
          width: 100%;
          text-align: center;
          gap: 16px; }
          .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentBody .bottomBox .bottomBoxText::before {
            content: '';
            display: block;
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, rgba(0, 178, 119, 0) 0, rgba(0, 178, 119, 0.4) 100%); }
          .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentBody .bottomBox .bottomBoxText::after {
            content: '';
            display: block;
            flex: 1;
            height: 1px;
            background: linear-gradient(-90deg, rgba(0, 178, 119, 0) 0, rgba(0, 178, 119, 0.4) 100%); }
        .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentBody .bottomBox .bottomBoxLink {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 320px;
          height: 56px;
          border-radius: 56px;
          border-radius: 88px;
          background: linear-gradient(276deg, #00B277 3.01%, #82E0B8 97.1%);
          box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
          color: #FFF;
          font-size: 16px;
          font-weight: 600;
          transition: all .3s ease-in-out; }
          .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentBody .bottomBox .bottomBoxLink:hover {
            background: linear-gradient(276deg, #00B277 10%, #66C6A3 90%); }
        .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentBody .bottomBox .bottomBoxLinkSimple {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          font-size: 14px;
          color: #333;
          text-decoration: underline;
          transition: all .3s ease-in-out; }
          .downloadSuccessCard .downloadSuccessCardContent .downloadSuccessCardContentBody .bottomBox .bottomBoxLinkSimple:hover {
            color: #00B277; }

@keyframes ribbonExplodeLeft {
  0% {
    left: 18px;
    bottom: 0;
    transform: scale(0.1); }
  100% {
    left: 4px;
    bottom: 44px;
    transform: scale(1); } }

@keyframes ribbonExplodeRight1 {
  0% {
    top: 77px;
    right: 27px;
    transform: scale(0.1); }
  100% {
    top: 24px;
    right: 4px;
    transform: scale(1); } }

@keyframes ribbonExplodeRight2 {
  0% {
    right: -9px;
    bottom: 8px;
    transform: scale(0.1);
    opacity: 0; }
  100% {
    right: -9px;
    bottom: 8px;
    transform: scale(1);
    opacity: 1; } }

@charset "UTF-8";
/**
 * 领取免费点数弹窗样式（与 GiveFreeTipModal 组件统一管理）
 */
.give-free-tip-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center; }
  .give-free-tip-box .content {
    position: relative;
    width: max-content;
    height: max-content;
    opacity: 0; }
    .give-free-tip-box .content img {
      width: 324px;
      height: auto; }
    .give-free-tip-box .content .num {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 48px;
      height: 48px;
      font-weight: 700; }
    .give-free-tip-box .content a,
    .give-free-tip-box .content button {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 236px;
      height: 56px;
      border-radius: 100px !important;
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      line-height: 28px;
      cursor: pointer;
      transition: all 0.3s var(--qtd-transition-cubic-1); }
      .give-free-tip-box .content a:hover,
      .give-free-tip-box .content button:hover {
        opacity: 0.9; }
    .give-free-tip-box .content .icon {
      position: absolute;
      right: -40px;
      cursor: pointer;
      font-size: 20px;
      color: #fff;
      opacity: 0.5;
      transition: all 0.3s var(--qtd-transition-cubic-1); }
      .give-free-tip-box .content .icon:hover {
        opacity: 1; }
    .give-free-tip-box .content[data-type='1'] a,
    .give-free-tip-box .content[data-type='1'] button, .give-free-tip-box .content[data-type='4'] a,
    .give-free-tip-box .content[data-type='4'] button {
      bottom: 60px;
      background: linear-gradient(90deg, #f9e03b 0%, #f4cd0a 100%);
      box-shadow: 4px 4px 4px 0 #fffab5 inset, -3px -3px 4px 0 #d8b800 inset; }
    .give-free-tip-box .content[data-type='1'] .num, .give-free-tip-box .content[data-type='4'] .num {
      color: #a9ef00;
      top: 144px;
      right: 85px; }
    .give-free-tip-box .content[data-type='2'] button {
      background: linear-gradient(90deg, #70baff 0%, #1980ff 100%);
      box-shadow: 4px 4px 4px 0 #9ed3ff inset, -3px -3px 4px 0 #1980ff inset; }
    .give-free-tip-box .content[data-type='2'] .num {
      background: linear-gradient(90deg, #70baff 0%, #459fff 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      right: 82px;
      top: 142px; }
    .give-free-tip-box .content[data-type='3'] button {
      background: linear-gradient(90deg, #70baff 0%, #1980ff 100%);
      box-shadow: 4px 4px 4px 0 #9ed3ff inset, -3px -3px 4px 0 #1980ff inset; }
    .give-free-tip-box .content[data-type='3'] .num {
      background: linear-gradient(90deg, #70baff 0%, #1980ff 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      right: 82px;
      top: 142px; }
    .give-free-tip-box .content.active {
      opacity: 1; }

@charset "UTF-8";
.push-list-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  padding: 32px; }
  .push-list-modal .push-list-modal__content {
    position: relative;
    width: 820px;
    max-width: 100%;
    height: auto;
    border-radius: 32px; }
  .push-list-modal .icon-guanbi {
    position: absolute;
    right: -40px;
    cursor: pointer;
    font-size: 20px;
    color: #fff;
    opacity: 0.5;
    transition: all 0.3s var(--qtd-transition-cubic-1); }
    .push-list-modal .icon-guanbi:hover {
      opacity: 1; }
  .push-list-modal .push-list-modal__body {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    background-color: #fff;
    border-radius: 32px; }
    .push-list-modal .push-list-modal__body .push-list-modal-left {
      position: relative;
      width: 450px;
      height: 600px;
      min-width: 450px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0px 32px 32px 0px;
      overflow: hidden;
      background-color: #fafafa; }
      .push-list-modal .push-list-modal__body .push-list-modal-left img {
        width: 100%;
        height: auto; }
      .push-list-modal .push-list-modal__body .push-list-modal-left video {
        width: 100%;
        height: auto; }
      .push-list-modal .push-list-modal__body .push-list-modal-left .push-list-modal-left-tag-wrap {
        position: absolute;
        right: 16px;
        top: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
        z-index: 1; }
      .push-list-modal .push-list-modal__body .push-list-modal-left .push-list-modal-left-tag {
        border-radius: 888px;
        background: rgba(0, 0, 0, 0.58);
        color: #fff;
        width: max-content;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
        font-family: zihunxinquhei;
        font-size: 12px; }
      .push-list-modal .push-list-modal__body .push-list-modal-left .push-list-modal-left-button {
        position: absolute;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: max-content;
        height: 48px;
        padding: 0 32px;
        border-radius: 48px;
        background: #D4FD53;
        color: #141414;
        font-size: 20px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s var(--qtd-transition-cubic-1);
        box-shadow: var(--new-shadow-1);
        z-index: 1; }
        .push-list-modal .push-list-modal__body .push-list-modal-left .push-list-modal-left-button:hover {
          opacity: 0.9; }
      .push-list-modal .push-list-modal__body .push-list-modal-left .push-list-modal-left-bg {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.04) 40%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.4) 100%);
        pointer-events: none; }
    .push-list-modal .push-list-modal__body .push-list-modal-right {
      position: relative;
      width: calc(100% - 450px);
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
      .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-scroll {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%; }
        .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-scroll .push-list-modal-right-title {
          color: #333;
          font-size: 20px;
          font-weight: 600;
          line-height: 28px;
          height: 28px;
          margin-bottom: 8px; }
        .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-scroll .push-list-modal-right-bottom-item {
          display: flex;
          align-items: flex-start;
          gap: 8px;
          width: 100%;
          height: 74px;
          border-radius: 16px;
          border: 1px solid #E8E8E8;
          padding: 12px;
          transition: all 0.3s var(--qtd-transition-cubic-1); }
          .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-scroll .push-list-modal-right-bottom-item img {
            width: 48px;
            height: 48px;
            min-width: 48px;
            border-radius: 8px;
            object-fit: cover;
            transition: all 0.3s var(--qtd-transition-cubic-1); }
          .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-scroll .push-list-modal-right-bottom-item .push-list-modal-right-bottom-info {
            display: flex;
            flex-direction: column;
            width: calc(100% - 56px);
            height: 100%;
            overflow: hidden; }
            .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-scroll .push-list-modal-right-bottom-item .push-list-modal-right-bottom-info .push-list-modal-right-bottom-info-top {
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 8px;
              height: 20px;
              min-height: 20px;
              transition: all 0.3s var(--qtd-transition-cubic-1);
              margin-bottom: 4px; }
              .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-scroll .push-list-modal-right-bottom-item .push-list-modal-right-bottom-info .push-list-modal-right-bottom-info-top .push-list-modal-right-bottom-info-tag-wrap {
                display: flex;
                align-items: center;
                gap: 4px;
                height: 20px;
                min-height: 20px;
                overflow: hidden; }
              .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-scroll .push-list-modal-right-bottom-item .push-list-modal-right-bottom-info .push-list-modal-right-bottom-info-top .push-list-modal-right-bottom-info-tag {
                border-radius: 888px;
                background: rgba(0, 0, 0, 0.58);
                color: #fff;
                width: max-content;
                height: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 8px;
                font-family: zihunxinquhei;
                font-size: 12px;
                overflow: hidden; }
              .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-scroll .push-list-modal-right-bottom-item .push-list-modal-right-bottom-info .push-list-modal-right-bottom-info-top > em {
                font-size: 12px;
                line-height: 20px;
                color: #666;
                min-width: max-content; }
            .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-scroll .push-list-modal-right-bottom-item .push-list-modal-right-bottom-info .push-list-modal-right-bottom-info-title {
              color: #333;
              font-size: 16px;
              font-weight: 600;
              line-height: 24px;
              height: 24px;
              min-height: 24px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              transition: font-size 0.2s var(--qtd-transition-cubic-1), height 0.2s var(--qtd-transition-cubic-1); }
            .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-scroll .push-list-modal-right-bottom-item .push-list-modal-right-bottom-info .push-list-modal-right-bottom-info-content {
              color: #666;
              font-size: 14px;
              font-weight: 400;
              line-height: 20px;
              height: 40px;
              min-height: 40px;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              line-clamp: 2;
              box-orient: vertical;
              overflow: hidden; }
          .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-scroll .push-list-modal-right-bottom-item:hover, .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-scroll .push-list-modal-right-bottom-item.active {
            border-color: #D4FD53;
            background: rgba(212, 253, 83, 0.2);
            cursor: pointer;
            height: 88px; }
            .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-scroll .push-list-modal-right-bottom-item:hover .push-list-modal-right-bottom-info .push-list-modal-right-bottom-info-top, .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-scroll .push-list-modal-right-bottom-item.active .push-list-modal-right-bottom-info .push-list-modal-right-bottom-info-top {
              margin-top: -26px; }
      .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-bottom-more {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 40px;
        padding: 0 32px;
        color: #333;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        border-radius: 16px;
        transition: all 0.3s var(--qtd-transition-cubic-1);
        cursor: pointer; }
        .push-list-modal .push-list-modal__body .push-list-modal-right .push-list-modal-right-bottom-more:hover {
          background-color: #f5f5f5; }

.push-list-modal-left-tag, .push-list-modal-right-bottom-info-tag {
  font-weight: 500; }
  .push-list-modal-left-tag[data-type="New"], .push-list-modal-left-tag[data-type="Hot"], .push-list-modal-right-bottom-info-tag[data-type="New"], .push-list-modal-right-bottom-info-tag[data-type="Hot"] {
    background: #fa5555 !important;
    font-weight: 400 !important;
    padding-bottom: 1px !important; }
  .push-list-modal-left-tag[data-type="模型上新"], .push-list-modal-right-bottom-info-tag[data-type="模型上新"] {
    background: #d8fb16 !important;
    color: #141414 !important; }
  .push-list-modal-left-tag[data-type="产品上新"], .push-list-modal-right-bottom-info-tag[data-type="产品上新"] {
    background: #fd8320 !important; }

@media screen and (max-width: 960px) {
  .push-list-modal .push-list-modal__content {
    width: 450px; }
  .push-list-modal .push-list-modal__body .push-list-modal-right {
    display: none; }
  .push-list-modal .push-list-modal__body .push-list-modal-left {
    border-radius: 32px; } }

.allChannelContainer {
  width: 100%;
  height: 100%;
  padding: 0 160px;
  padding-top: 80px;
  overflow: auto;
  padding-bottom: 240px; }
  .allChannelContainer.fixed.leftNavActive .allChannelCreateBox .qtdCreateTaskBox {
    transform: translateX(calc(-50% + 108px)); }
  .allChannelContainer.fixed .allChannelCreateBox .qtdCreateTaskBox {
    position: fixed;
    bottom: 32px;
    z-index: 2000;
    max-width: 960px;
    transform: translateX(calc(-50% + 36px)); }
    .allChannelContainer.fixed .allChannelCreateBox .qtdCreateTaskBox .create-task-main .bottom-box-wrap .create-textarea-model-box {
      min-height: 72px; }
  .allChannelContainer.fixed .top-mask {
    opacity: 1; }
  .allChannelContainer .top-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    opacity: 0;
    transition: all 0.3s var(--qtd-transition-cubic-1);
    pointer-events: none;
    background-color: var(--qtd-ai-drak-bg-6);
    z-index: 10;
    background: linear-gradient(0deg, var(--qtd-ai-drak-bg-11) 0%, var(--qtd-ai-drak-bg-4) 40%, var(--qtd-ai-drak-bg-1) 100%); }
  .allChannelContainer .allChannelCreateBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -80px;
    max-width: 960px;
    margin: 0 auto;
    margin-top: -80px; }
    .allChannelContainer .allChannelCreateBox > div {
      width: 100%; }
    .allChannelContainer .allChannelCreateBox .allChannelCreateBoxTitle {
      color: var(--qtd-ai-text-color-1);
      text-align: center;
      font-size: 24px;
      line-height: 80px;
      height: 80px; }
      .allChannelContainer .allChannelCreateBox .allChannelCreateBoxTitle em {
        font-weight: 600; }
    .allChannelContainer .allChannelCreateBox .allChannelCreateBoxWrap {
      min-height: 140px; }
    .allChannelContainer .allChannelCreateBox .qtdCreateTaskBox {
      position: unset;
      transform: unset;
      width: 100%;
      z-index: 1; }
      .allChannelContainer .allChannelCreateBox .qtdCreateTaskBox .rules {
        display: none; }
  .allChannelContainer .allChannelFloorContainer {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
    min-height: 500px;
    padding-top: 56px; }
    .allChannelContainer .allChannelFloorContainer .content-list-tag-wrap {
      display: flex;
      gap: 8px;
      width: 100%;
      margin-bottom: 28px;
      position: sticky;
      height: 40px;
      top: -60px;
      z-index: 10; }
      .allChannelContainer .allChannelFloorContainer .content-list-tag-wrap .content-list-sort-box {
        display: flex;
        gap: 16px;
        overflow: auto;
        width: max-content;
        min-width: max-content; }
    .allChannelContainer .allChannelFloorContainer .content-list-tag-box {
      display: flex;
      padding: 4px;
      align-items: center;
      border-radius: 42px;
      background: var(--new-grey-3);
      position: unset;
      z-index: 10;
      width: max-content;
      margin-bottom: 8px;
      height: 40px; }
      .allChannelContainer .allChannelFloorContainer .content-list-tag-box .floor-title {
        display: flex;
        height: 32px;
        padding: 4px 16px;
        cursor: pointer;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: max-content;
        border-radius: 25px;
        background: transparent;
        color: var(--new-text-1);
        font-size: 14px;
        z-index: 2;
        line-height: 22px;
        transition: all 0.3s var(--qtd-transition-cubic-1); }
        .allChannelContainer .allChannelFloorContainer .content-list-tag-box .floor-title:hover {
          background: var(--new-grey-4);
          color: var(--new-text-1); }
        .allChannelContainer .allChannelFloorContainer .content-list-tag-box .floor-title.active {
          font-weight: 600;
          color: var(--new-text-8);
          background: var(--new-grey-7) !important; }
      .allChannelContainer .allChannelFloorContainer .content-list-tag-box .floor-title-after {
        z-index: 1;
        height: 32px;
        background: var(--new-grey-7);
        position: absolute;
        left: 4px;
        transition: all 0.3s var(--qtd-transition-cubic-1);
        border-radius: 25px; }
    .allChannelContainer .allChannelFloorContainer .floorContainer {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 56px; }
      .allChannelContainer .allChannelFloorContainer .floorContainer .floorItemBox {
        display: flex;
        flex-direction: column;
        gap: 13px;
        width: calc(100% + 8px);
        align-items: center;
        padding-right: 4px;
        padding-left: 4px; }
        .allChannelContainer .allChannelFloorContainer .floorContainer .floorItemBox .floorItemTitle {
          color: var(--new-text-1);
          font-size: 24px;
          font-weight: 600;
          line-height: 32px;
          width: 100%;
          display: flex;
          align-items: center;
          gap: 8px; }
          .allChannelContainer .allChannelFloorContainer .floorContainer .floorItemBox .floorItemTitle .floorItemTitleDesc {
            color: var(--new-text-2);
            font-size: 24px;
            font-weight: 400;
            line-height: 32px; }
        .allChannelContainer .allChannelFloorContainer .floorContainer .floorItemBox .floorItemTplList {
          width: 100%;
          min-width: 0;
          min-height: 400px; }
        .allChannelContainer .allChannelFloorContainer .floorContainer .floorItemBox .moreBtnBox {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 16px 0; }
          .allChannelContainer .allChannelFloorContainer .floorContainer .floorItemBox .moreBtnBox .moreBtn {
            display: flex;
            height: 56px;
            padding: 2px 24px;
            justify-content: center;
            align-items: center;
            gap: 4px;
            color: #D8FF00;
            font-size: 20px;
            font-style: normal;
            font-weight: 600;
            line-height: 28px;
            /* 140% */
            border-radius: 43px;
            background: #333;
            cursor: pointer; }
            .allChannelContainer .allChannelFloorContainer .floorContainer .floorItemBox .moreBtnBox .moreBtn:hover {
              opacity: .9; }

@media screen and (max-width: 2948px) {
  .allChannelContainer.fixed2 .allChannelFloorContainer .content-list-tag-wrap {
    position: fixed;
    top: 68px; } }

@media screen and (min-width: 2665px) {
  .allChannelContainer .allChannelFloorContainer .floorContainer .floorItemBox .floorItemTplList .templateCard:nth-child(n+13) {
    display: none; } }

@media screen and (max-width: 2664px) {
  .common-content-box {
    padding-left: 280px;
    padding-right: 280px; }
  .allChannelContainer .allChannelFloorContainer .floorContainer .floorItemBox .floorItemTplList .templateCard:nth-child(n+13) {
    display: none; } }

@media screen and (max-width: 2384px) {
  .common-content-box {
    padding-left: 160px;
    padding-right: 160px; }
  .allChannelContainer .allChannelFloorContainer .floorContainer .floorItemBox .floorItemTplList .templateCard:nth-child(n+13) {
    display: none; } }

@media screen and (max-width: 1880px) {
  .common-content-box {
    padding-left: 120px;
    padding-right: 120px; }
  .allChannelContainer .allChannelFloorContainer .floorContainer .floorItemBox .floorItemTplList .templateCard:nth-child(n+10) {
    display: none; } }

@media screen and (max-width: 1536px) {
  .common-content-box {
    padding-left: 80px;
    padding-right: 80px; }
  .homeNewV2Container .recommendTplListWrap .recommendTplList {
    grid-template-columns: repeat(3, minmax(0px, 1fr)); }
    .homeNewV2Container .recommendTplListWrap .recommendTplList .templateCard:nth-child(n+10) {
      display: none; } }

@media screen and (max-width: 1336px) {
  .common-content-box {
    padding-left: 80px;
    padding-right: 80px; }
  .allChannelContainer .allChannelFloorContainer .floorContainer .floorItemBox .floorItemTplList .templateCard:nth-child(n+7) {
    display: none; } }

@media screen and (max-width: 1096px) {
  .common-content-box {
    padding-left: 64px;
    padding-right: 64px; }
  .allChannelContainer .allChannelFloorContainer .floorContainer .floorItemBox .floorItemTplList .templateCard:nth-child(n+7) {
    display: none; } }

@media screen and (max-width: 824px) {
  .common-content-box {
    padding-left: 32px;
    padding-right: 32px; }
  .allChannelContainer .allChannelFloorContainer .floorContainer .floorItemBox .floorItemTplList .templateCard:nth-child(n+7) {
    display: none; } }

.configContainer {
  width: 100%;
  min-height: 100vh;
  background: var(--new-grey-1);
  overflow: auto;
  max-height: 100vh; }
  .configContainer .ant-input {
    border-radius: 16px; }

.configLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh; }

.configTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  background: var(--new-grey-2);
  border-bottom: 1px solid var(--new-grey-3);
  position: sticky;
  top: 80px;
  z-index: 100; }

.configTopLeft {
  display: flex;
  align-items: center;
  gap: 16px; }

.configBackBtn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--new-grey-4);
  border-radius: 16px;
  color: var(--new-text-2);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s; }
  .configBackBtn:hover {
    border-color: var(--new-text-2);
    color: var(--new-text-1); }
  .configBackBtn i {
    font-size: 14px; }

.configTitle {
  font-size: 18px;
  font-weight: 600;
  color: var(--new-text-1);
  margin: 0; }

.configTopActions {
  display: flex;
  align-items: center;
  gap: 8px; }

.configExportBtn, .configPreviewBtn, .configSaveBtn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  border: none; }
  .configExportBtn i, .configPreviewBtn i, .configSaveBtn i {
    font-size: 15px; }
  .configExportBtn:disabled, .configPreviewBtn:disabled, .configSaveBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed; }

.configExportBtn {
  background: var(--new-grey-3);
  color: var(--new-text-2); }
  .configExportBtn:hover:not(:disabled) {
    background: var(--new-grey-4);
    color: var(--new-text-1); }

.configPreviewBtn {
  background: var(--new-grey-3);
  color: var(--new-text-2); }
  .configPreviewBtn:hover:not(:disabled) {
    background: var(--new-grey-4);
    color: var(--new-text-1); }

.configSaveBtn {
  background: #D8FF00;
  color: #1c1e1f;
  font-weight: 600; }
  .configSaveBtn:hover:not(:disabled) {
    background: #c8ef00; }

.configBody {
  max-width: 960px;
  margin: 32px auto;
  padding: 0 24px 80px;
  margin-top: 90px;
  display: flex;
  flex-direction: column;
  gap: 32px; }

.configSection {
  background: var(--new-grey-2);
  border-radius: 16px;
  overflow: hidden; }

.configSectionHeader {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--new-grey-3); }

.configSectionTitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--new-text-1); }

.configSectionHint {
  font-size: 12px;
  color: var(--new-text-4, var(--new-text-3)); }

.coverGridArea {
  padding: 8px 24px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px; }

.coverLayoutRow {
  padding: 16px 24px 4px;
  display: flex;
  align-items: center;
  gap: 12px; }

.coverLayoutLabel {
  font-size: 13px;
  color: var(--new-text-3);
  font-weight: 500; }

.coverLayoutOptions {
  display: inline-flex;
  align-items: center;
  gap: 8px; }

.coverLayoutOption {
  min-width: 72px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--new-grey-4);
  background: var(--new-grey-2);
  font-size: 12px;
  line-height: 12px;
  color: var(--new-text-3);
  cursor: pointer;
  width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease; }
  .coverLayoutOption:hover {
    border-color: var(--new-grey-5);
    color: var(--new-text-1); }

.coverLayoutOptionActive {
  border-color: #D8FF00;
  background: rgba(216, 255, 0, 0.12);
  color: #D8FF00;
  font-weight: 600; }

.coverMediaCard, .coverUploadCard {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: var(--new-grey-3); }

.coverMediaCard {
  cursor: default; }
  .coverMediaCard:hover .coverMediaOverlay {
    opacity: 1; }

.coverMediaItem {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.coverMediaPreview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.videoTag {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 3px; }
  .videoTag i {
    font-size: 12px; }

.coverMediaOverlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px; }

.coverMoveBtn {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease; }
  .coverMoveBtn:disabled {
    opacity: 0.35;
    cursor: not-allowed; }

.coverMoveLeft:hover:not(:disabled) {
  transform: translateX(-2px);
  background: rgba(0, 0, 0, 0.8); }

.coverMoveRight:hover:not(:disabled) {
  transform: translateX(2px);
  background: rgba(0, 0, 0, 0.8); }

.coverMediaRemove {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 60, 60, 0.85);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; }
  .coverMediaRemove:hover {
    background: #e53e3e; }

.coverMediaOrder {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center; }

.coverMediaCheckbox {
  align-self: flex-start;
  color: var(--new-text-2); }
  .coverMediaCheckbox .ant-checkbox + span {
    padding-inline-start: 6px; }

.coverUploadCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px dashed var(--new-grey-5);
  cursor: pointer;
  color: var(--new-text-3);
  font-size: 13px;
  transition: all 0.2s; }
  .coverUploadCard i {
    font-size: 24px;
    color: var(--new-text-3); }
  .coverUploadCard:hover {
    border-color: var(--new-text-2);
    color: var(--new-text-2); }
    .coverUploadCard:hover i {
      color: var(--new-text-2); }

.stepsGlobalTitle {
  padding: 20px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 8px; }

.baseInfoBody {
  display: flex;
  padding: 20px 24px 24px;
  gap: 24px; }

.baseInfoLeft {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px; }

.baseInfoRight {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start; }

.baseInfoFooter {
  padding: 0 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px; }
  .baseInfoFooter .ant-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px; }
  .baseInfoFooter .ant-checkbox-wrapper {
    color: var(--new-text-2); }

.fieldGroupRow {
  display: flex;
  gap: 16px; }

.homeShowRow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px; }

.homeShowSortLabel {
  font-size: 13px;
  color: var(--new-text-2); }

.homeShowSortInput {
  width: 120px; }

.homeShowHint {
  font-size: 12px;
  color: var(--new-text-3); }

.logoUploadBox {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.logoPreview {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: var(--new-grey-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--new-text-3);
  font-size: 12px; }
  .logoPreview img {
    width: 100%;
    height: 100%;
    object-fit: contain; }

.logoUploadBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  height: 32px;
  border-radius: 16px;
  border: 1px solid var(--new-grey-4);
  background: transparent;
  font-size: 13px;
  color: var(--new-text-2);
  cursor: pointer;
  transition: all 0.2s; }
  .logoUploadBtn:hover {
    border-color: #D8FF00;
    color: #D8FF00; }

.stepsList {
  padding: 16px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 16px; }

.stepEditCard {
  border: 1px solid var(--new-grey-3);
  border-radius: 12px;
  overflow: hidden; }

.stepCardHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--new-grey-3); }

.stepCardNum {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #D8FF00;
  color: #1c1e1f;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }

.stepCardLabel {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--new-text-1); }

.stepCardActions {
  display: flex;
  align-items: center;
  gap: 4px; }

.stepMoveBtn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--new-text-3);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s; }
  .stepMoveBtn:hover:not(:disabled) {
    background: var(--new-grey-4);
    color: var(--new-text-1); }
  .stepMoveBtn button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center; }

.stepMoveBtnUp:hover:not(:disabled) {
  transform: translateY(-2px); }

.stepMoveBtnUp .icon-PLG-zuo {
  transform: rotate(90deg);
  display: inline-block; }

.stepMoveBtnDown:hover:not(:disabled) {
  transform: translateY(2px); }

.stepMoveBtnDown .icon-PLG-you {
  transform: rotate(90deg);
  display: inline-block; }

.stepRemoveBtn:hover:not(:disabled) {
  background: rgba(255, 60, 60, 0.1);
  color: #e53e3e; }

.stepCardBody {
  display: flex;
  gap: 20px;
  padding: 16px;
  align-items: flex-start; }

.stepMediaArea {
  flex-shrink: 0;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px; }

.stepMediaCard {
  position: relative;
  width: 200px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--new-grey-3); }
  .stepMediaCard:hover .stepMediaOverlay {
    opacity: 1; }

.stepMediaPreview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.stepMediaOverlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center; }

.stepMediaReplaceBtn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.9);
  color: #1c1e1f;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500; }
  .stepMediaReplaceBtn i {
    font-size: 14px; }

.stepMediaUploadMask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center; }

.stepMediaUpload {
  width: 200px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 1.5px dashed var(--new-grey-5);
  background: var(--new-grey-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: var(--new-text-3);
  font-size: 12px;
  transition: all 0.2s; }
  .stepMediaUpload i {
    font-size: 22px;
    color: var(--new-text-3); }
  .stepMediaUpload:hover {
    border-color: var(--new-text-2); }
    .stepMediaUpload:hover i {
      color: var(--new-text-2); }

.stepMediaHint {
  font-size: 11px;
  color: var(--new-text-4, var(--new-text-3));
  opacity: 0.6; }

.stepTextArea {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0; }

.fieldGroup {
  display: flex;
  flex-direction: column;
  gap: 6px; }

.fieldLabel {
  font-size: 13px;
  color: var(--new-text-3);
  font-weight: 500; }
  .fieldLabel em {
    color: #CF0; }

.fieldInput {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--new-grey-3);
  border: 1px solid var(--new-grey-4);
  border-radius: 8px;
  color: var(--new-text-1);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s; }
  .fieldInput::placeholder {
    color: var(--new-text-4, var(--new-text-3));
    opacity: 0.5; }
  .fieldInput:focus {
    border-color: #D8FF00; }

.fieldTextarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--new-grey-3);
  border: 1px solid var(--new-grey-4);
  border-radius: 8px;
  color: var(--new-text-1);
  font-size: 14px;
  outline: none;
  resize: vertical;
  min-height: 72px;
  transition: border-color 0.2s;
  font-family: inherit;
  line-height: 1.6; }
  .fieldTextarea::placeholder {
    color: var(--new-text-4, var(--new-text-3));
    opacity: 0.5; }
  .fieldTextarea:focus {
    border-color: #D8FF00; }

.addStepBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 48px);
  margin: 16px 24px 24px;
  height: 44px;
  border: 1.5px dashed var(--new-grey-5);
  border-radius: 10px;
  background: transparent;
  color: var(--new-text-3);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s; }
  .addStepBtn i {
    font-size: 16px; }
  .addStepBtn:hover {
    border-color: #D8FF00;
    color: #D8FF00; }

.previewContainer {
  width: 100%;
  min-height: 100vh;
  max-height: 100vh;
  overflow: auto;
  background: var(--new-grey-1); }

.previewTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 40px;
  background: black;
  border-bottom: 1px solid rgba(216, 255, 0, 0.2);
  position: sticky;
  top: 80px;
  z-index: 100; }

.previewBadge {
  background: rgba(216, 255, 0, 0.15);
  color: #D8FF00;
  border: 1px solid rgba(216, 255, 0, 0.3);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px; }

.previewActions {
  display: flex;
  align-items: center;
  gap: 8px; }

.previewBackBtn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--new-grey-4);
  border-radius: 16px;
  color: var(--new-text-2);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s; }
  .previewBackBtn:hover {
    border-color: var(--new-text-2);
    color: var(--new-text-1); }
  .previewBackBtn i {
    font-size: 14px; }

.previewSaveBtn {
  height: 32px;
  padding: 0 16px;
  background: #D8FF00;
  border: none;
  border-radius: 16px;
  color: #1c1e1f;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s; }
  .previewSaveBtn:hover {
    background: #c8ef00; }

.previewMain {
  padding-top: 120px;
  padding-bottom: 80px; }

.previewHeroSection {
  padding: 0 0 48px; }

.previewHeroContent {
  display: flex;
  align-items: center;
  gap: 80px;
  width: 80%;
  max-width: 1400px;
  margin: 0 auto; }

.previewCoverWrapper {
  flex-shrink: 0;
  width: 320px; }

.previewCoverFrame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cover-aspect, 3/4);
  border-radius: 32px;
  overflow: hidden;
  background: var(--new-grey-3); }

.previewCoverImg {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.previewCoverEmpty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--new-text-3);
  font-size: 14px; }

.coverSlide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none; }

.coverSlideActive {
  opacity: 1;
  pointer-events: auto; }

.previewInputPlaceholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 320px;
  border: 1.5px dashed var(--new-grey-4);
  border-radius: 16px; }

.previewPlaceholderTitle {
  font-size: 28px;
  font-weight: 600;
  color: var(--new-text-1);
  text-align: center; }
  .previewPlaceholderTitle span {
    color: #D8FF00; }

.previewPlaceholderDesc {
  font-size: 14px;
  color: var(--new-text-3); }

.previewStepsSection {
  width: 80%;
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 64px; }

.previewStepsTitle {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  color: var(--new-text-1);
  margin: 0 0 32px;
  text-align: center; }

.previewStepMediaBox {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--new-grey-3); }

.previewStepMedia {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.previewStepMediaEmpty {
  width: 100%;
  height: 100%;
  background: var(--new-grey-3); }

.previewStepNum {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #1c1e1f;
  line-height: 1;
  z-index: 2; }

.previewStepInfo {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.previewStepName {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--new-text-1);
  margin: 0; }

.previewStepDesc {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--new-text-3);
  margin: 0; }

.qyToolContainer {
  width: 100%;
  height: 100%;
  padding-top: 80px;
  overflow: auto;
  background: var(--new-grey-1);
  padding-bottom: 160px; }

.has-bg-header {
  background: var(--new-grey-1); }

.contentWrapper {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 80px; }

.loadingBox {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; }

.heroSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  text-align: center;
  padding-bottom: 80px; }

.heroContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; }

.heroTitle {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  color: var(--new-text-1);
  margin: 0; }
  .heroTitle .highlight {
    color: #7CB305; }

.heroSubtitle {
  font-size: 16px;
  line-height: 24px;
  color: var(--new-text-3);
  margin: 0; }

.categorySection {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100; }

.categoryTabs {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 4px;
  background: var(--new-grey-3);
  border-radius: 42px; }

.categoryTab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 25px;
  background: transparent;
  color: var(--new-text-3);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s var(--qtd-transition-cubic-1); }
  .categoryTab:hover {
    background: var(--new-grey-4);
    color: var(--new-text-1); }
  .categoryTab.active {
    background: var(--new-grey-4);
    color: var(--new-text-1);
    font-weight: 600; }

.searchButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--new-grey-4);
  border-radius: 50%;
  background: var(--new-grey-3);
  color: var(--new-text-1);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s var(--qtd-transition-cubic-1); }
  .searchButton:hover {
    background: var(--new-grey-4);
    border-color: var(--new-grey-5); }

.toolSections {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 16px; }

.toolSection {
  display: flex;
  flex-direction: column;
  gap: 16px; }

.sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px; }

.sectionTitleBox {
  display: flex;
  flex-direction: column; }

.sectionTitle {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  color: var(--new-text-1);
  margin: 0; }

.sectionSubtitle {
  font-size: 16px;
  line-height: 24px;
  color: var(--new-text-3);
  margin: 0; }

.moreButton {
  display: none;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 42px;
  background: var(--new-grey-3);
  color: var(--new-text-1);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s var(--qtd-transition-cubic-1); }
  .moreButton .icon {
    font-size: 16px; }
  .moreButton:hover {
    background: var(--new-grey-4); }

.toolGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px; }

.emptyPlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 40px;
  border-radius: 16px;
  background: var(--new-grey-2);
  border: 1px dashed var(--new-grey-4);
  grid-column: 1 / -1; }
  .emptyPlaceholder span {
    color: var(--new-text-4);
    font-size: 14px; }

.welcomeAiSection {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding: 48px 0; }

.welcomeAiContent {
  display: flex;
  flex-direction: column;
  gap: 32px;
  flex-shrink: 0;
  max-width: 640px; }

.welcomeAiText {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.welcomeAiTitle {
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
  color: var(--new-text-1);
  margin: 0; }
  .welcomeAiTitle strong {
    font-weight: 600; }

.welcomeAiDesc {
  font-size: 16px;
  line-height: 24px;
  color: var(--new-text-3);
  margin: 0;
  max-width: 480px; }

.welcomeAiInput {
  width: 100%; }

.inputWrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px;
  padding-left: 16px;
  background: var(--new-grey-3);
  border: 3px solid #D8FF00;
  border-radius: 32px;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); }

.aiInput {
  flex: 1;
  height: 48px;
  border: none;
  background: transparent;
  color: var(--new-text-1);
  font-size: 16px;
  outline: none; }
  .aiInput::placeholder {
    color: var(--new-text-4); }

.generateButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 48px;
  padding: 0 16px;
  border: none;
  border-radius: 60px;
  background: #D8FF00;
  color: #141414;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--qtd-transition-cubic-1);
  flex-shrink: 0; }
  .generateButton .icon {
    font-size: 24px; }
  .generateButton:hover {
    opacity: 0.9; }

.welcomeAiImage {
  flex-shrink: 0;
  width: 667px;
  border-radius: 24px;
  overflow: hidden; }
  .welcomeAiImage img {
    width: 100%;
    height: auto;
    object-fit: cover; }

.enterpriseSection {
  padding: 8px 0 40px; }

.enterpriseWrapper {
  display: flex;
  gap: 32px;
  padding: 24px;
  background: var(--new-grey-3);
  border-radius: 24px;
  overflow: hidden; }

.enterpriseHeader {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  width: 320px; }

.enterpriseInfo {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.enterpriseTitle {
  font-size: 48px;
  font-weight: 600;
  line-height: 56px;
  color: var(--new-text-1);
  margin: 0; }

.enterpriseDesc {
  font-size: 16px;
  line-height: 24px;
  color: var(--new-text-3);
  margin: 0; }

.allToolsButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 44px;
  border: 1px solid #fff;
  border-radius: 88px;
  background: #fff;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--qtd-transition-cubic-1); }
  .allToolsButton:hover {
    background: var(--new-grey-7);
    border-color: var(--new-grey-7);
    color: var(--new-text-8); }

.enterpriseGrid {
  display: flex;
  gap: 8px;
  flex: 1; }

.enterpriseCard {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 1px solid var(--new-grey-4);
  border-radius: 16px;
  overflow: hidden;
  background: var(--new-grey-4);
  cursor: pointer;
  transition: all 0.3s var(--qtd-transition-cubic-1); }
  .enterpriseCard:hover {
    border-color: var(--new-grey-5);
    transform: translateY(-4px); }

.enterpriseCardCover {
  position: relative;
  height: 240px;
  overflow: hidden; }
  .enterpriseCardCover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--qtd-transition-cubic-1); }
  .enterpriseCardCover:hover img {
    transform: scale(1.05); }

.enterpriseCardTags {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 8px; }

.enterpriseTag {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 4px 8px;
  border-radius: 88px;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 12px;
  line-height: 20px; }

.enterpriseCardContent {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px; }

.enterpriseCardTitleRow {
  display: flex;
  align-items: center;
  gap: 8px; }
  .enterpriseCardTitleRow .icon {
    font-size: 20px;
    color: var(--new-text-1); }

.enterpriseCardTitle {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--new-text-1);
  margin: 0; }

.enterpriseCardDesc {
  font-size: 16px;
  line-height: 24px;
  color: var(--new-text-3);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.enterpriseCardBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; }

.enterpriseBadge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 4px 8px;
  border: 1px solid var(--new-grey-5);
  border-radius: 88px;
  color: var(--new-text-1);
  font-size: 12px;
  line-height: 20px; }

.agentSection {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 0; }

.agentHeader {
  display: flex;
  flex-direction: column;
  gap: 16px; }

.agentTitleBox {
  display: flex;
  flex-direction: column; }

.agentTitle {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  color: var(--new-text-1);
  margin: 0; }

.agentSubtitle {
  font-size: 16px;
  line-height: 24px;
  color: var(--new-text-3);
  margin: 0; }

.agentControls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px; }

.agentTabs {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 4px;
  background: var(--new-grey-3);
  border-radius: 42px; }

.agentTab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border: none;
  border-radius: 25px;
  background: transparent;
  color: var(--new-text-3);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s var(--qtd-transition-cubic-1); }
  .agentTab:hover {
    background: var(--new-grey-4);
    color: var(--new-text-1); }
  .agentTab.active {
    background: #fff;
    color: #141414;
    font-weight: 500; }

.agentGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px; }

@media screen and (min-width: 2385px) {
  .toolGrid {
    grid-template-columns: repeat(6, 1fr); } }

@media screen and (max-width: 2384px) {
  .toolGrid {
    grid-template-columns: repeat(6, 1fr); } }

@media screen and (max-width: 1880px) {
  .toolGrid {
    grid-template-columns: repeat(5, 1fr); } }

@media screen and (max-width: 1536px) {
  .toolGrid {
    grid-template-columns: repeat(4, 1fr); }
  .welcomeAiImage {
    width: 500px; }
  .enterpriseWrapper {
    flex-direction: column; }
  .enterpriseHeader {
    flex-direction: row;
    align-items: center;
    width: 100%; } }

@media screen and (max-width: 1096px) {
  .toolGrid {
    grid-template-columns: repeat(3, 1fr); } }

@media screen and (max-width: 1200px) {
  .heroTitle {
    font-size: 28px;
    line-height: 36px; }
  .sectionTitle,
  .welcomeAiTitle,
  .agentTitle {
    font-size: 28px;
    line-height: 36px; }
  .enterpriseTitle {
    font-size: 36px;
    line-height: 44px; }
  .welcomeAiSection {
    flex-direction: column; }
  .welcomeAiContent {
    max-width: 100%; }
  .welcomeAiImage {
    width: 100%;
    max-width: 600px; }
  .agentGrid {
    grid-template-columns: repeat(3, 1fr); } }

@media screen and (max-width: 960px) {
  .categoryTabs {
    overflow-x: auto;
    max-width: 100%; }
  .categoryTab {
    flex-shrink: 0;
    font-size: 14px;
    padding: 0 12px; }
  .enterpriseGrid {
    flex-direction: column; }
  .agentGrid {
    grid-template-columns: repeat(2, 1fr); }
  .agentControls {
    flex-direction: column;
    align-items: flex-start; }
  .agentTabs {
    max-width: 100%;
    overflow-x: auto; } }

@media screen and (max-width: 824px) {
  .toolGrid {
    grid-template-columns: repeat(2, 1fr); } }

@media screen and (max-width: 640px) {
  .heroTitle {
    font-size: 24px;
    line-height: 32px; }
  .heroSubtitle {
    font-size: 14px;
    line-height: 22px; }
  .sectionTitle,
  .welcomeAiTitle,
  .agentTitle {
    font-size: 24px;
    line-height: 32px; }
  .enterpriseTitle {
    font-size: 28px;
    line-height: 36px; }
  .toolGrid,
  .agentGrid {
    grid-template-columns: 1fr; }
  .inputWrapper {
    flex-direction: column;
    padding: 12px;
    gap: 12px; }
  .generateButton {
    width: 100%; } }

.channelContainer {
  width: 100%;
  height: 100%;
  background-image: url("https://static.qiantucdn.com/aigc/static/images/channel/channel_page_bg_hei.png");
  background-size: 74px 74px;
  background-repeat: repeat;
  padding: 0 24px; }
  .channelContainer .bgMask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 328px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, var(--qtd-ai-drak-func-color-1) 100%); }
  .channelContainer .channelBgBox {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    transition: all 0.3s var(--qtd-transition-cubic-1); }
    .channelContainer .channelBgBox .bgImageList {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      gap: 48px;
      padding: 0 48px;
      overflow: hidden; }
      .channelContainer .channelBgBox .bgImageList .bgImageWrap {
        flex: 1;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 32px;
        position: unset; }
        .channelContainer .channelBgBox .bgImageList .bgImageWrap .bgImage {
          width: 100%;
          border-radius: 16px;
          cursor: pointer;
          transition: all 0.3s var(--qtd-transition-cubic-1); }
          .channelContainer .channelBgBox .bgImageList .bgImageWrap .bgImage:hover {
            transform: scale(1.1); }
          .channelContainer .channelBgBox .bgImageList .bgImageWrap .bgImage .templateCard .templateCardImgWrap {
            border-radius: 16px; }
          .channelContainer .channelBgBox .bgImageList .bgImageWrap .bgImage .templateCard .templateCardInfoBox {
            display: none; }
        .channelContainer .channelBgBox .bgImageList .bgImageWrap:nth-child(2n) {
          animation: positionBottom 30s infinite ease-in-out; }
        .channelContainer .channelBgBox .bgImageList .bgImageWrap:nth-child(2n+1) {
          animation: positionTop 30s infinite ease-in-out; }
        .channelContainer .channelBgBox .bgImageList .bgImageWrap:hover {
          animation-play-state: paused; }
  .channelContainer .createBoxWrapContainer {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%); }
    .channelContainer .createBoxWrapContainer .relative {
      position: relative;
      width: max-content;
      height: max-content; }
  .channelContainer.isScroll .createBoxWrapContainer .createBoxWrap .qtdCreateTaskBox {
    opacity: 0;
    transition: unset; }
  .channelContainer .createBoxWrap {
    display: flex;
    width: 70vw;
    max-width: 1200px;
    height: max-content;
    padding: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
    gap: 16px; }
    .channelContainer .createBoxWrap .qtd-history-nav-container, .channelContainer .createBoxWrap .qtd-history-panel-container {
      display: none; }
    .channelContainer .createBoxWrap .qtdCreateTaskBox {
      position: relative;
      min-width: 100%;
      transform: unset;
      top: unset;
      left: unset;
      right: unset;
      bottom: unset; }
      .channelContainer .createBoxWrap .qtdCreateTaskBox .ai-search-icon-new-bg {
        display: block; }
        .channelContainer .createBoxWrap .qtdCreateTaskBox .ai-search-icon-new-bg::after {
          width: 1200px;
          height: 1200px; }
      .channelContainer .createBoxWrap .qtdCreateTaskBox .create-task-main {
        outline: unset;
        border: unset; }
        .channelContainer .createBoxWrap .qtdCreateTaskBox .create-task-main .bottom-box-wrap .create-submit-box {
          height: 40px; }
        .channelContainer .createBoxWrap .qtdCreateTaskBox .create-task-main .bottom-box-wrap .create-textarea-box .randown-box {
          display: none; }
        .channelContainer .createBoxWrap .qtdCreateTaskBox .create-task-main .bottom-box-wrap .create-textarea-box .placeholder-box {
          left: 8px; }
        .channelContainer .createBoxWrap .qtdCreateTaskBox .create-task-main .bottom-box-wrap .textarea-box-bottom {
          position: relative; }
          .channelContainer .createBoxWrap .qtdCreateTaskBox .create-task-main .bottom-box-wrap .textarea-box-bottom .qtd-model-list-container-wrap {
            position: unset; }
        .channelContainer .createBoxWrap .qtdCreateTaskBox .create-task-main .bottom-box-wrap .qtd-model-list-container-wrap .model-list-box .model-list-row {
          right: 0;
          top: 32px;
          left: unset;
          bottom: unset; }
      .channelContainer .createBoxWrap .qtdCreateTaskBox .rules {
        display: none; }
    .channelContainer .createBoxWrap .channelInfoBox {
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center; }
      .channelContainer .createBoxWrap .channelInfoBox .channelInfoBoxTitle {
        display: flex;
        align-items: center;
        position: relative;
        gap: 16px; }
        .channelContainer .createBoxWrap .channelInfoBox .channelInfoBoxTitle img {
          width: 72px;
          height: 72px;
          border-radius: 16px;
          object-fit: cover; }
        .channelContainer .createBoxWrap .channelInfoBox .channelInfoBoxTitle span {
          color: var(--qtd-ai-text-color-1);
          font-size: 40px;
          font-weight: 600;
          line-height: 48px; }
        .channelContainer .createBoxWrap .channelInfoBox .channelInfoBoxTitle .channelInfoBoxTitleIcon {
          position: absolute;
          right: -36px;
          top: 0; }
      .channelContainer .createBoxWrap .channelInfoBox .channelInfoBoxDesc {
        color: var(--qtd-ai-text-color-1);
        text-align: center;
        font-size: 20px;
        font-weight: 400;
        line-height: 28px; }
    .channelContainer .createBoxWrap .channelListWrap {
      display: flex;
      width: max-content;
      padding-left: 32px;
      width: 100%; }
      .channelContainer .createBoxWrap .channelListWrap .channelListBox {
        display: flex;
        height: 48px;
        padding: 4px 4px 4px 4px;
        align-items: center;
        gap: 4px;
        border-radius: 42px;
        border: 1px solid var(--qtd-ai-drak-func-color-1);
        background: var(--qtd-ai-drak-bg-5); }
        .channelContainer .createBoxWrap .channelListWrap .channelListBox .channelListBoxItem {
          display: flex;
          padding: 0 16px;
          justify-content: center;
          align-items: center;
          gap: 4px;
          align-self: stretch;
          border-radius: 25px;
          height: 40px;
          color: var(--qtd-ai-text-color-1);
          font-size: 16px;
          cursor: pointer;
          font-weight: 400;
          line-height: 24px;
          position: relative;
          z-index: 2;
          transition: background 0.3s var(--qtd-transition-cubic-1); }
          .channelContainer .createBoxWrap .channelListWrap .channelListBox .channelListBoxItem:hover, .channelContainer .createBoxWrap .channelListWrap .channelListBox .channelListBoxItem.active {
            background: var(--qtd-ai-drak-func-color-3);
            font-weight: 600; }
        .channelContainer .createBoxWrap .channelListWrap .channelListBox .model-type-list-item-after {
          z-index: 1;
          height: 24px;
          background: var(--qtd-ai-drak-func-color-3);
          position: absolute;
          top: 4px;
          left: 4px;
          transition: all 0.3s var(--qtd-transition-cubic-1);
          border-radius: 25px; }
  .channelContainer.allChannel {
    background-image: none !important; }
    .channelContainer.allChannel .channelBgBox {
      transform: translateY(-100%); }
    .channelContainer.allChannel .createBoxWrapContainer {
      position: fixed;
      left: 50%;
      top: unset;
      bottom: 64px;
      transform: translateX(-50%); }
      .channelContainer.allChannel .createBoxWrapContainer > div {
        transform: translate(-50%, 0) !important;
        bottom: 0; }
      .channelContainer.allChannel .createBoxWrapContainer .glass {
        box-shadow: unset !important; }
        .channelContainer.allChannel .createBoxWrapContainer .glass .glass__warp {
          display: none !important; }
      .channelContainer.allChannel .createBoxWrapContainer .createBoxWrap {
        padding: 8px; }
        .channelContainer.allChannel .createBoxWrapContainer .createBoxWrap .channelInfoBox {
          display: none; }
          .channelContainer.allChannel .createBoxWrapContainer .createBoxWrap .channelInfoBox .channelInfoBoxTitle {
            display: none; }
        .channelContainer.allChannel .createBoxWrapContainer .createBoxWrap .qtdCreateTaskBox .popover-position-box .ant-popover .ant-popover-content {
          transform: translateY(-96px); }
        .channelContainer.allChannel .createBoxWrapContainer .createBoxWrap .channelListWrap {
          display: none; }
    .channelContainer.allChannel .allChannelTplContainer {
      transform: translateY(0); }
    .channelContainer.allChannel .bgMask {
      height: 104px; }
    .channelContainer.allChannel .moreBtn {
      display: none; }
  .channelContainer .moreBtn {
    display: flex;
    height: 56px;
    padding: 2px 24px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: #D8FF00;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    /* 140% */
    border-radius: 43px;
    background: #333;
    cursor: pointer;
    position: fixed;
    bottom: 64px;
    left: 50%;
    transform: translateX(-50%); }
    .channelContainer .moreBtn:hover {
      opacity: .9; }
  .channelContainer .allChannelTplContainer {
    width: 100%;
    height: 100%;
    overflow: auto;
    transform: translateY(100%);
    transition: all 0.3s var(--qtd-transition-cubic-1); }
    .channelContainer .allChannelTplContainer .allChannelTplBox {
      width: 100%;
      padding-bottom: 240px; }
      .channelContainer .allChannelTplContainer .allChannelTplBox .channelInfoBox {
        margin-top: 104px;
        display: flex;
        flex-direction: column;
        margin-bottom: 24px; }
        .channelContainer .allChannelTplContainer .allChannelTplBox .channelInfoBox .channelInfoBoxTitle {
          color: var(--qtd-ai-text-color-1);
          font-size: 48px;
          font-weight: 600;
          line-height: 56px;
          margin-bottom: 8px; }
        .channelContainer .allChannelTplContainer .allChannelTplBox .channelInfoBox .channelInfoBoxDesc {
          color: var(--qtd-ai-text-color-2);
          font-size: 20px;
          font-weight: 400;
          line-height: 28px;
          margin-bottom: 16px; }
        .channelContainer .allChannelTplContainer .allChannelTplBox .channelInfoBox .qtdAiButton {
          width: max-content;
          height: 40px;
          border-radius: 24px;
          display: flex;
          cursor: pointer;
          align-items: center;
          justify-content: center;
          background: var(--qtd-ai-drak-color-6);
          color: var(--qtd-ai-text-color-0);
          font-size: 16px;
          padding: 0 24px; }
      .channelContainer .allChannelTplContainer .allChannelTplBox .channelListWrap {
        width: 100%;
        min-width: 0;
        overflow: hidden; }

.qtd-ai-light-mode .channelContainer {
  background-image: url("https://static.qiantucdn.com/aigc/static/images/channel/channel_page_bg.png"); }

@media screen and (max-width: 2664px) {
  .common-content-box {
    padding-left: 280px;
    padding-right: 280px; } }

@media screen and (max-width: 2384px) {
  .common-content-box {
    padding-left: 160px;
    padding-right: 160px; } }

@media screen and (max-width: 1880px) {
  .common-content-box {
    padding-left: 120px;
    padding-right: 120px; } }

@media screen and (max-width: 1536px) {
  .common-content-box {
    padding-left: 80px;
    padding-right: 80px; } }

@media screen and (max-width: 1336px) {
  .common-content-box {
    padding-left: 80px;
    padding-right: 80px; } }

@media screen and (max-width: 1096px) {
  .common-content-box {
    padding-left: 64px;
    padding-right: 64px; } }

@media screen and (max-width: 824px) {
  .common-content-box {
    padding-left: 32px;
    padding-right: 32px; } }

@keyframes positionTop {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-1200px); }
  100% {
    transform: translateY(0); } }

@keyframes positionBottom {
  0% {
    transform: translateY(-100%); }
  50% {
    transform: translateY(0); }
  100% {
    transform: translateY(-100%); } }

@media screen and (min-width: 1920px) {
  .channelContainer .channelBgBox .bgImageList .bgImageWrap:nth-child(n+5) {
    display: none; } }

@media screen and (max-width: 1919px) {
  .channelContainer .channelBgBox .bgImageList .bgImageWrap:nth-child(n+5) {
    display: none; } }

@media screen and (max-width: 1679px) {
  .channelContainer .channelBgBox .bgImageList .bgImageWrap:nth-child(n+5) {
    display: none; } }

@media screen and (max-width: 1439px) {
  .channelContainer .channelBgBox .bgImageList .bgImageWrap:nth-child(n+4) {
    display: none; } }

@media screen and (max-width: 1199px) {
  .channelContainer .channelBgBox .bgImageList .bgImageWrap:nth-child(n+3) {
    display: none; } }

@media screen and (max-width: 959px) {
  .channelContainer .channelBgBox .bgImageList .bgImageWrap:nth-child(n+3) {
    display: none; } }

@media screen and (max-width: 767px) {
  .channelContainer .channelBgBox .bgImageList .bgImageWrap:nth-child(n+3) {
    display: none; } }

@charset "UTF-8";
.homeNewV2Container {
  width: 100%;
  height: 100%;
  padding-top: 80px;
  overflow: auto; }
  .homeNewV2Container .homeNewV2Content {
    width: 100%;
    background-color: var(--new-grey-2); }
  .homeNewV2Container.fixed:not(.historyPanelOpen).isScroll .homeNewV2CreateBox .qtdCreateTaskBox {
    opacity: 0;
    transition: unset; }
  .homeNewV2Container.fixed:not(.historyPanelOpen) .homeNewV2CreateBox .qtdCreateTaskBox {
    position: fixed;
    bottom: 32px;
    z-index: 2000;
    max-width: 960px;
    transform: translateX(calc(-50% + 40px));
    left: 50%;
    transition: all 0.3s var(--qtd-transition-cubic-1); }
    .homeNewV2Container.fixed:not(.historyPanelOpen) .homeNewV2CreateBox .qtdCreateTaskBox .create-task-main {
      box-shadow: var(--new-shadow-1); }
      .homeNewV2Container.fixed:not(.historyPanelOpen) .homeNewV2CreateBox .qtdCreateTaskBox .create-task-main .bottom-box-wrap .create-textarea-model-box {
        min-height: 72px; }
  .homeNewV2Container.fixed:not(.historyPanelOpen).leftNavActive .homeNewV2CreateBox .qtdCreateTaskBox {
    transform: translateX(calc(-50% + 120px)) !important; }
  .homeNewV2Container.fixed .top-mask {
    opacity: 1; }
  .homeNewV2Container.historyPanelOpen .homeNewV2CreateBox .qtdCreateTaskBox {
    position: fixed !important;
    top: unset !important;
    left: 50% !important;
    bottom: 56px !important;
    z-index: 100 !important;
    transform: translateX(-50%) !important;
    padding-left: 72px;
    padding-right: 72px;
    max-width: 1344px; }
    .homeNewV2Container.historyPanelOpen .homeNewV2CreateBox .qtdCreateTaskBox .bg-box {
      left: 64px;
      width: calc(100% - 128px); }
    .homeNewV2Container.historyPanelOpen .homeNewV2CreateBox .qtdCreateTaskBox .quote-img-box {
      margin-left: 72px;
      margin-right: 72px;
      width: calc(100% - 176px); }
    .homeNewV2Container.historyPanelOpen .homeNewV2CreateBox .qtdCreateTaskBox .create-task-main {
      box-shadow: var(--new-shadow-1); }
      .homeNewV2Container.historyPanelOpen .homeNewV2CreateBox .qtdCreateTaskBox .create-task-main .bottom-box-wrap .create-textarea-model-box .textarea-box-bottom .qtd-model-list-container-wrap .model-list-box .model-list-row {
        top: unset;
        bottom: 38px; }
  .homeNewV2Container.historyPanelOpen.leftNavActive .homeNewV2CreateBox .qtdCreateTaskBox {
    transform: translateX(calc(-50% + 120px)) !important; }
  .homeNewV2Container:not(.fixed) .homeNewV2CreateBox .qtdCreateTaskBox {
    position: relative;
    transform: unset;
    width: 100%;
    z-index: 3;
    left: 0;
    top: 0; }
  .homeNewV2Container .homeNewV2CreateBox .qtdCreateTaskBox:not(.active) {
    max-width: 640px !important; }
  .homeNewV2Container .top-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    opacity: 0;
    transition: all 0.3s var(--qtd-transition-cubic-1);
    pointer-events: none;
    background-color: var(--qtd-ai-drak-bg-6);
    z-index: 11;
    background: linear-gradient(0deg, var(--qtd-ai-drak-bg-11) 0%, var(--qtd-ai-drak-bg-4) 40%, var(--qtd-ai-drak-bg-1) 100%); }
  .homeNewV2Container .homeNewV2CreateBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1024px;
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
    margin-top: 48px;
    position: relative;
    z-index: 10; }
    .homeNewV2Container .homeNewV2CreateBox > div {
      width: 100%; }
    .homeNewV2Container .homeNewV2CreateBox .freeTipsBox {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      width: max-content;
      border-radius: 88px;
      border: 2px solid #D2F464;
      background: #F7FFDD;
      padding: 0 16px;
      margin-top: 20px;
      cursor: pointer; }
      .homeNewV2Container .homeNewV2CreateBox .freeTipsBox > img {
        height: 24px;
        width: auto; }
      .homeNewV2Container .homeNewV2CreateBox .freeTipsBox span {
        color: #333;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px; }
      .homeNewV2Container .homeNewV2CreateBox .freeTipsBox .icon-a-Close1 {
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid #e8e8e8;
        color: #666;
        cursor: pointer;
        margin-left: 4px;
        transition: all 0.3s var(--qtd-transition-cubic-1);
        opacity: .9;
        padding-top: 1px; }
        .homeNewV2Container .homeNewV2CreateBox .freeTipsBox .icon-a-Close1:hover {
          color: #333;
          opacity: 1; }
      .homeNewV2Container .homeNewV2CreateBox .freeTipsBox:hover .icon-a-Close1 {
        display: flex; }
    .homeNewV2Container .homeNewV2CreateBox .freeTipsBox + .homeNewV2CreateBoxTitle {
      height: 64px !important;
      line-height: 64px !important; }
    .homeNewV2Container .homeNewV2CreateBox .homeNewV2CreateBoxTitle {
      color: var(--new-text-1);
      text-align: center;
      font-size: 24px;
      line-height: 32px; }
      .homeNewV2Container .homeNewV2CreateBox .homeNewV2CreateBoxTitle em {
        font-weight: 600; }
    .homeNewV2Container .homeNewV2CreateBox .homeNewV2CreateBoxTitle2 {
      color: var(--new-text-1);
      text-align: center;
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 16px; }
    .homeNewV2Container .homeNewV2CreateBox .homeNewV2CreateBoxWrap {
      min-height: 140px;
      max-width: 960px;
      padding: 0 32px; }
    .homeNewV2Container .homeNewV2CreateBox .qtdCreateTaskBox {
      position: relative;
      transform: unset;
      left: unset;
      bottom: unset;
      width: 100%;
      z-index: 3; }
      .homeNewV2Container .homeNewV2CreateBox .qtdCreateTaskBox .rules {
        display: none; }
    .homeNewV2Container .homeNewV2CreateBox .classifyBoxNew {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      gap: 16px;
      padding: 40px 48px 0; }
      .homeNewV2Container .homeNewV2CreateBox .classifyBoxNew .classifyBoxNewItem {
        flex-shrink: 0;
        width: 160px;
        background: var(--new-grey-1);
        border: 1px solid var(--new-grey-4);
        border-radius: 16px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s var(--qtd-transition-cubic-1); }
        .homeNewV2Container .homeNewV2CreateBox .classifyBoxNew .classifyBoxNewItem:hover {
          border-color: var(--new-grey-5);
          box-shadow: var(--new-shadow-1); }
        .homeNewV2Container .homeNewV2CreateBox .classifyBoxNew .classifyBoxNewItem .classifyBoxNewItemImg {
          width: 100%;
          aspect-ratio: 16 / 9;
          border-radius: 16px 16px 0 0;
          object-fit: cover; }
          .homeNewV2Container .homeNewV2CreateBox .classifyBoxNew .classifyBoxNewItem .classifyBoxNewItemImg img {
            width: 100%;
            height: 100%;
            object-fit: cover; }
          .homeNewV2Container .homeNewV2CreateBox .classifyBoxNew .classifyBoxNewItem .classifyBoxNewItemImg .classifyBoxNewItemVideo {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block; }
        .homeNewV2Container .homeNewV2CreateBox .classifyBoxNew .classifyBoxNewItem .classifyBoxNewItemContent {
          padding: 8px; }
          .homeNewV2Container .homeNewV2CreateBox .classifyBoxNew .classifyBoxNewItem .classifyBoxNewItemContent .classifyBoxNewItemHeader {
            display: flex;
            gap: 4px;
            align-items: center; }
            .homeNewV2Container .homeNewV2CreateBox .classifyBoxNew .classifyBoxNewItem .classifyBoxNewItemContent .classifyBoxNewItemHeader .classifyBoxNewItemTitle {
              font-family: 'PingFang SC', sans-serif;
              font-weight: 600;
              font-size: 16px;
              line-height: 24px;
              color: var(--new-text-1, #333);
              white-space: nowrap; }
            .homeNewV2Container .homeNewV2CreateBox .classifyBoxNew .classifyBoxNewItem .classifyBoxNewItemContent .classifyBoxNewItemHeader .classifyBoxNewItemTag {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              height: 14px;
              padding: 2px 4px 2px;
              border-radius: 888px;
              background: #cf0; }
              .homeNewV2Container .homeNewV2CreateBox .classifyBoxNew .classifyBoxNewItem .classifyBoxNewItemContent .classifyBoxNewItemHeader .classifyBoxNewItemTag .classifyBoxNewItemTagText {
                font-size: 12px;
                line-height: 20px;
                color: #333;
                white-space: nowrap;
                font-family: zihunxinquhei;
                margin-top: -2px; }
            .homeNewV2Container .homeNewV2CreateBox .classifyBoxNew .classifyBoxNewItem .classifyBoxNewItemContent .classifyBoxNewItemHeader .classifyBoxNewItemIcon {
              color: var(--new-text-3);
              font-size: 16px;
              display: inline-block;
              transition: all 0.3s var(--qtd-transition-cubic-1); }
            .homeNewV2Container .homeNewV2CreateBox .classifyBoxNew .classifyBoxNewItem .classifyBoxNewItemContent .classifyBoxNewItemHeader:hover .classifyBoxNewItemIcon {
              transform: rotate(180deg); }
          .homeNewV2Container .homeNewV2CreateBox .classifyBoxNew .classifyBoxNewItem .classifyBoxNewItemContent .classifyBoxNewItemDesc {
            font-family: 'PingFang SC', sans-serif;
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            color: var(--new-text-3, #666);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: 0; }
      .homeNewV2Container .homeNewV2CreateBox .classifyBoxNew .classifyBoxNewItemDefer {
        width: 100%;
        aspect-ratio: 16 / 9;
        background: var(--new-grey-3, #e8e8e8); }
      .homeNewV2Container .homeNewV2CreateBox .classifyBoxNew .classifyBoxNewItemFourth .classifyBoxNewItemHeader {
        width: 100%;
        justify-content: flex-start; }
    .homeNewV2Container .homeNewV2CreateBox .classifyBoxNewLoading {
      min-height: 120px;
      align-items: center;
      justify-content: center; }
    .homeNewV2Container .homeNewV2CreateBox .classifyBox {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 16px;
      padding: 16px 48px;
      margin-top: 24px; }
      .homeNewV2Container .homeNewV2CreateBox .classifyBox .classifyItem {
        display: flex;
        padding: 8px;
        flex: 1;
        max-width: 33.33333333333333%;
        align-items: center;
        gap: 8px;
        border-radius: 16px;
        cursor: pointer;
        border: 1px solid var(--new-grey-4);
        background: var(--new-grey-2);
        transition: all 0.3s var(--qtd-transition-cubic-1);
        outline: 3px solid transparent;
        min-width: 0; }
        .homeNewV2Container .homeNewV2CreateBox .classifyBox .classifyItem .classifyItemIcon {
          width: 56px;
          height: 56px;
          border-radius: 8px;
          object-fit: cover;
          transform: rotate(5deg); }
        .homeNewV2Container .homeNewV2CreateBox .classifyBox .classifyItem .classifyItemInfoBox {
          display: flex;
          flex-direction: column;
          justify-content: center;
          flex: 1;
          min-width: 0; }
          .homeNewV2Container .homeNewV2CreateBox .classifyBox .classifyItem .classifyItemInfoBox .classifyItemTitle {
            color: var(--new-text-1);
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            transition: all 0.3s var(--qtd-transition-cubic-1); }
          .homeNewV2Container .homeNewV2CreateBox .classifyBox .classifyItem .classifyItemInfoBox .classifyItemDesc {
            color: var(--new-text-3);
            font-size: 14px;
            line-height: 22px;
            transition: all 0.3s var(--qtd-transition-cubic-1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0; }
        .homeNewV2Container .homeNewV2CreateBox .classifyBox .classifyItem:hover {
          background: var(--new-grey-3);
          border-color: var(--new-grey-5);
          outline: 3px solid var(--new-grey-4); }
          .homeNewV2Container .homeNewV2CreateBox .classifyBox .classifyItem:hover .classifyItemTitle {
            color: var(--new-text-1); }
    .homeNewV2Container .homeNewV2CreateBox .classifyBoxSmall {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px; }
      .homeNewV2Container .homeNewV2CreateBox .classifyBoxSmall .classifySmallItem {
        display: flex;
        height: 40px;
        padding: 0 16px;
        align-items: center;
        gap: 4px;
        border-radius: 88px;
        border: 1px solid var(--new-grey-4);
        cursor: pointer;
        background: var(--new-grey-2);
        transition: all 0.3s var(--qtd-transition-cubic-1);
        outline: 3px solid transparent; }
        .homeNewV2Container .homeNewV2CreateBox .classifyBoxSmall .classifySmallItem .classifyItemIcon {
          width: 32px;
          height: 32px;
          border-radius: 4px;
          object-fit: cover; }
        .homeNewV2Container .homeNewV2CreateBox .classifyBoxSmall .classifySmallItem .icon, .homeNewV2Container .homeNewV2CreateBox .classifyBoxSmall .classifySmallItem .classifyItemTitle {
          color: var(--new-text-1);
          font-size: 16px;
          font-weight: 600;
          line-height: 24px;
          transition: all 0.3s var(--qtd-transition-cubic-1); }
        .homeNewV2Container .homeNewV2CreateBox .classifyBoxSmall .classifySmallItem .icon {
          font-weight: normal; }
        .homeNewV2Container .homeNewV2CreateBox .classifyBoxSmall .classifySmallItem:hover, .homeNewV2Container .homeNewV2CreateBox .classifyBoxSmall .classifySmallItem.active {
          background: var(--new-grey-3);
          border-color: var(--new-grey-5);
          outline: 3px solid var(--new-grey-4); }
          .homeNewV2Container .homeNewV2CreateBox .classifyBoxSmall .classifySmallItem:hover .icon, .homeNewV2Container .homeNewV2CreateBox .classifyBoxSmall .classifySmallItem:hover .classifyItemTitle, .homeNewV2Container .homeNewV2CreateBox .classifyBoxSmall .classifySmallItem.active .icon, .homeNewV2Container .homeNewV2CreateBox .classifyBoxSmall .classifySmallItem.active .classifyItemTitle {
            color: var(--new-text-1); }
  .homeNewV2Container .floorContainer {
    display: flex;
    flex-direction: column;
    padding: 48px 0;
    gap: 64px; }
  .homeNewV2Container .projectBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 32px;
    gap: 16px; }
    .homeNewV2Container .projectBox .projectBoxTitleBox {
      display: flex;
      align-items: center;
      justify-content: space-between; }
      .homeNewV2Container .projectBox .projectBoxTitleBox .projectBoxTitle {
        overflow: hidden;
        color: var(--new-text-1);
        font-size: 24px;
        font-weight: 600;
        line-height: 32px; }
      .homeNewV2Container .projectBox .projectBoxTitleBox .projectBoxTitleMore {
        display: flex;
        cursor: pointer;
        align-items: center;
        color: var(--new-text-1);
        transition: color 0.3s var(--qtd-transition-cubic-1); }
        .homeNewV2Container .projectBox .projectBoxTitleBox .projectBoxTitleMore:hover {
          color: var(--new-text-1);
          font-weight: 600; }
    .homeNewV2Container .projectBox .projectList {
      display: flex;
      gap: 24px;
      overflow: auto;
      padding: 4px;
      width: calc(100% + 8px);
      margin-left: -4px; }
      .homeNewV2Container .projectBox .projectList .projectItem {
        height: 216px;
        aspect-ratio: 3/2;
        border-radius: 16px;
        cursor: pointer;
        background: var(--new-grey-2);
        flex-direction: column;
        display: flex;
        border: 1px solid var(--new-grey-4);
        transition: all 0.3s var(--qtd-transition-cubic-1);
        outline: 3px solid transparent; }
        .homeNewV2Container .projectBox .projectList .projectItem.projectItemCreate {
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          gap: 8px; }
          .homeNewV2Container .projectBox .projectList .projectItem.projectItemCreate .icon-jia {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: var(--new-text-1);
            background: var(--new-grey-2);
            border-radius: 50%;
            width: 48px;
            height: 48px;
            transition: all 0.3s var(--qtd-transition-cubic-1); }
          .homeNewV2Container .projectBox .projectList .projectItem.projectItemCreate span {
            color: var(--new-text-1);
            font-size: 16px;
            font-weight: 600;
            line-height: 24px; }
        .homeNewV2Container .projectBox .projectList .projectItem:hover {
          border-radius: 16px;
          background: var(--new-grey-4);
          border: 1px solid var(--new-grey-5);
          outline: 3px solid var(--new-grey-4); }
          .homeNewV2Container .projectBox .projectList .projectItem:hover .icon-jia {
            background: var(--new-grey-7);
            color: var(--new-text-8); }
        .homeNewV2Container .projectBox .projectList .projectItem .projectItemCover {
          flex: 1;
          border-radius: 16px 16px 0 0;
          position: relative;
          display: flex;
          transform: translateY(24px);
          align-items: center;
          justify-content: center;
          gap: 4px;
          overflow: hidden; }
          .homeNewV2Container .projectBox .projectList .projectItem .projectItemCover .projectItemCoverEmpty {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%; }
          .homeNewV2Container .projectBox .projectList .projectItem .projectItemCover img {
            width: 40%;
            height: auto;
            border-radius: 12px;
            max-height: 100%;
            object-fit: cover; }
            .homeNewV2Container .projectBox .projectList .projectItem .projectItemCover img:nth-child(1) {
              z-index: 1;
              height: 100%; }
            .homeNewV2Container .projectBox .projectList .projectItem .projectItemCover img:nth-child(2) {
              width: 33.3%;
              position: absolute;
              transform: rotate(-10deg);
              margin-left: -64px;
              margin-top: 32px; }
            .homeNewV2Container .projectBox .projectList .projectItem .projectItemCover img:nth-child(3) {
              width: 33.3%;
              position: absolute;
              margin-right: -64px;
              margin-top: 32px;
              transform: rotate(10deg); }
        .homeNewV2Container .projectBox .projectList .projectItem .projectItemInfo {
          display: flex;
          flex-direction: column;
          padding: 12px;
          width: 100%;
          border-radius: 0 0 16px 16px;
          flex-shrink: 0;
          background: var(--new-grey-3);
          z-index: 2; }
          .homeNewV2Container .projectBox .projectList .projectItem .projectItemInfo .projectItemName {
            overflow: hidden;
            color: var(--new-text-1);
            text-overflow: ellipsis;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; }
          .homeNewV2Container .projectBox .projectList .projectItem .projectItemInfo .projectItemTime {
            display: flex;
            justify-content: space-between;
            color: var(--new-text-3);
            font-size: 14px;
            line-height: 22px; }
  .homeNewV2Container .recommendTplListTitle {
    color: var(--new-text-1);
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    line-height: 28px;
    flex-shrink: 0;
    background-size: auto 12px;
    background-repeat: no-repeat;
    background-position: center right; }
  .homeNewV2Container .communityToolbarInput {
    height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    border: 1px solid var(--new-grey-4);
    background: var(--new-grey-3);
    color: var(--new-text-1);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s var(--qtd-transition-cubic-1), background 0.2s;
    width: 180px; }
    .homeNewV2Container .communityToolbarInput::placeholder {
      color: var(--new-text-3); }
    .homeNewV2Container .communityToolbarInput[readonly] {
      cursor: pointer; }
      .homeNewV2Container .communityToolbarInput[readonly]:hover {
        border-color: var(--qtd-ai-light-color-6);
        background: var(--new-grey-4); }
    .homeNewV2Container .communityToolbarInput:not([readonly]):focus {
      border-color: var(--qtd-ai-light-color-6);
      background: var(--new-grey-2); }
    .homeNewV2Container .communityToolbarInput.ant-input {
      height: 32px;
      padding: 0 12px;
      border-radius: 16px;
      border: 1px solid var(--new-grey-4);
      background: var(--new-grey-3);
      color: var(--new-text-1);
      box-shadow: none; }
      .homeNewV2Container .communityToolbarInput.ant-input:focus, .homeNewV2Container .communityToolbarInput.ant-input:hover {
        border-color: var(--qtd-ai-light-color-6);
        box-shadow: none; }
  .homeNewV2Container .contentListSortBox {
    display: flex;
    padding: 4px 16px;
    justify-content: center;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    height: 32px;
    border-radius: 41px;
    color: var(--new-text-3);
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    line-height: 22px;
    background: var(--new-grey-3);
    position: relative; }
    .homeNewV2Container .contentListSortBox .content-list-choose-item {
      display: flex;
      gap: 4px;
      align-items: center; }
    .homeNewV2Container .contentListSortBox:hover {
      color: var(--new-text-1);
      background: var(--new-grey-4); }
      .homeNewV2Container .contentListSortBox:hover .content-list-more-box {
        display: flex; }
    .homeNewV2Container .contentListSortBox .content-list-more-box {
      position: absolute;
      top: 32px;
      right: 0;
      height: max-content;
      display: flex;
      border-radius: 16px;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 8px;
      display: none;
      z-index: 8;
      background: var(--qtd-ai-drak-func-color-1); }
    .homeNewV2Container .contentListSortBox .floor-title {
      display: flex;
      padding: 4px 16px;
      width: max-content;
      justify-content: center;
      flex-shrink: 0;
      align-items: center;
      gap: 8px;
      height: 32px;
      border-radius: 41px;
      border: 1px solid var(--qtd-ai-drak-func-color-4);
      color: var(--new-text-2);
      text-align: center;
      font-size: 14px;
      cursor: pointer;
      line-height: 22px;
      background: var(--qtd-ai-drak-func-color-1); }
      .homeNewV2Container .contentListSortBox .floor-title.active, .homeNewV2Container .contentListSortBox .floor-title:hover {
        border-radius: 41px;
        background: var(--qtd-ai-text-color-hover-1);
        color: var(--qtd-ai-drak-func-color-1);
        border: 1px solid var(--qtd-ai-text-color-hover-1);
        text-align: center;
        font-weight: 600;
        line-height: 22px; }
  .homeNewV2Container .recommendTplListWrap {
    display: flex;
    flex-direction: column;
    gap: 13px;
    width: calc(100% + 8px);
    padding-top: 32px;
    align-items: center; }
    .homeNewV2Container .recommendTplListWrap .recommendTplListTitleBox {
      display: flex;
      width: 100%;
      align-items: center; }
      .homeNewV2Container .recommendTplListWrap .recommendTplListTitleBox .content-list-tag-wrap {
        margin-bottom: 0;
        height: 40px; }
        .homeNewV2Container .recommendTplListWrap .recommendTplListTitleBox .content-list-tag-wrap .content-list-tag-box-wrap {
          margin-bottom: 0; }
    .homeNewV2Container .recommendTplListWrap .recommendTplList {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      row-gap: 24px;
      padding-top: 3px;
      column-gap: 16px;
      width: 100%;
      height: auto;
      min-width: 0; }
    .homeNewV2Container .recommendTplListWrap .moreBtnBox {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 16px 0; }
      .homeNewV2Container .recommendTplListWrap .moreBtnBox .moreBtn {
        display: flex;
        height: 56px;
        padding: 2px 24px;
        justify-content: center;
        align-items: center;
        gap: 4px;
        color: #D8FF00;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px;
        /* 140% */
        border-radius: 43px;
        background: #333;
        cursor: pointer; }
        .homeNewV2Container .recommendTplListWrap .moreBtnBox .moreBtn:hover {
          opacity: .9; }
  .homeNewV2Container .content-container {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto;
    min-height: 500px;
    padding-top: 32px; }
    .homeNewV2Container .content-container .content-nav-box {
      position: relative;
      width: 100%;
      height: auto;
      padding: 24px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 32px; }
      .homeNewV2Container .content-container .content-nav-box span {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 52px;
        color: var(--qtd-ai-text-color-3);
        font-family: "PingFang SC";
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        transition: all 0.3s var(--qtd-transition-cubic-1);
        cursor: pointer;
        padding: 0 24px;
        border-bottom: 2px solid transparent; }
        .homeNewV2Container .content-container .content-nav-box span:hover {
          color: #fff; }
        .homeNewV2Container .content-container .content-nav-box span.active {
          color: #fff;
          border-bottom-color: #fff; }
    .homeNewV2Container .content-container .content-list-sort-box {
      display: flex;
      gap: 16px;
      overflow: unset; }
    .homeNewV2Container .content-container .content-floor-box {
      position: relative;
      width: 100%;
      height: auto;
      display: flex;
      min-height: 500px;
      justify-content: center;
      flex-wrap: wrap;
      gap: 16px;
      margin: 0 auto;
      margin-bottom: 24px; }
      .homeNewV2Container .content-container .content-floor-box .floor-title {
        width: 100%;
        height: 28px;
        display: flex;
        align-items: center;
        color: rgba(255, 255, 255, 0.65);
        font-family: "PingFang SC";
        font-size: 20px;
        font-style: normal;
        font-weight: 500; }
      .homeNewV2Container .content-container .content-floor-box .floor-card-box {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        gap: 32px 24px;
        width: 100%;
        height: auto; }
        .homeNewV2Container .content-container .content-floor-box .floor-card-box .tool-card-box {
          position: relative;
          width: calc(16.6% - 24px);
          height: auto;
          aspect-ratio: 1/1;
          border-radius: 16px;
          background-color: #fafafa;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer; }
          .homeNewV2Container .content-container .content-floor-box .floor-card-box .tool-card-box > img {
            width: 100%;
            height: auto; }
          .homeNewV2Container .content-container .content-floor-box .floor-card-box .tool-card-box .hover-mask {
            position: absolute;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.2);
            padding: 24px;
            display: flex;
            align-items: flex-end;
            opacity: 0;
            z-index: 1;
            transition: all 0.3s var(--qtd-transition-cubic-1); }
            .homeNewV2Container .content-container .content-floor-box .floor-card-box .tool-card-box .hover-mask .hover-btn-box {
              cursor: pointer;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 8px 0px;
              border-radius: 24px;
              background: #D8FF00;
              box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
              width: 100%;
              transition: all 0.3s var(--qtd-transition-cubic-1); }
              .homeNewV2Container .content-container .content-floor-box .floor-card-box .tool-card-box .hover-mask .hover-btn-box span {
                color: #FFF;
                font-family: "PingFang SC";
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 22px; }
              .homeNewV2Container .content-container .content-floor-box .floor-card-box .tool-card-box .hover-mask .hover-btn-box svg {
                transform: translateY(-4px); }
              .homeNewV2Container .content-container .content-floor-box .floor-card-box .tool-card-box .hover-mask .hover-btn-box:hover {
                opacity: .9; }
          .homeNewV2Container .content-container .content-floor-box .floor-card-box .tool-card-box:hover .hover-mask {
            opacity: 1; }
      .homeNewV2Container .content-container .content-floor-box .floor-col-item {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 32px;
        height: auto;
        width: 100%; }
        .homeNewV2Container .content-container .content-floor-box .floor-col-item .qtd-ai-card-b {
          display: block; }
        .homeNewV2Container .content-container .content-floor-box .floor-col-item .qtd-ai-card-a .img-box {
          width: 100%;
          height: auto;
          background-color: #fafafa; }
  .homeNewV2Container .content-list-tag-wrap {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-bottom: 28px;
    position: relative;
    height: 40px; }
    .homeNewV2Container .content-list-tag-wrap .content-list-sort-box {
      display: flex;
      gap: 16px;
      align-items: center;
      overflow: unset;
      width: max-content;
      min-width: max-content;
      margin-left: auto;
      justify-content: flex-end; }
      .homeNewV2Container .content-list-tag-wrap .content-list-sort-box .ant-input {
        width: 160px; }
  .homeNewV2Container .content-list-tag-box-wrap {
    display: flex;
    flex: 1;
    min-width: 0;
    height: 42px;
    width: max-content;
    margin-left: 8px;
    max-width: max-content;
    margin-bottom: 8px;
    overflow: auto;
    border-radius: 42px; }
  .homeNewV2Container .content-list-tag-box {
    display: flex;
    width: max-content;
    padding: 4px;
    align-items: center;
    border-radius: 42px;
    position: relative;
    z-index: 1;
    width: max-content;
    background: var(--new-grey-3);
    height: 40px; }
    .homeNewV2Container .content-list-tag-box .floor-title {
      display: flex;
      height: 32px;
      padding: 4px 16px;
      cursor: pointer;
      justify-content: center;
      align-items: center;
      gap: 4px;
      width: max-content;
      border-radius: 25px;
      background: transparent;
      color: var(--new-text-3);
      font-size: 14px;
      z-index: 2;
      line-height: 22px;
      transition: all 0.3s var(--qtd-transition-cubic-1); }
      .homeNewV2Container .content-list-tag-box .floor-title:hover {
        background: var(--new-grey-4);
        color: var(--new-text-1);
        text-shadow: 0.1px 0 0 var(--new-text-1), -0.1px 0 0 var(--new-text-1); }
      .homeNewV2Container .content-list-tag-box .floor-title.active {
        text-shadow: 0.1px 0 0 var(--new-text-8), -0.1px 0 0 var(--new-text-8);
        color: var(--new-text-8);
        background: var(--new-grey-7) !important; }
    .homeNewV2Container .content-list-tag-box .floor-title-after {
      z-index: 1;
      height: 32px;
      background: var(--new-grey-7);
      position: absolute;
      left: 4px;
      transition: all 0.3s var(--qtd-transition-cubic-1);
      border-radius: 25px; }
  .homeNewV2Container .admin-auth-box {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    padding: 4px 8px;
    width: auto;
    border-radius: 12px;
    box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05); }
    .homeNewV2Container .admin-auth-box .admin-auth-row-select {
      display: flex;
      align-items: center;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
    .homeNewV2Container .admin-auth-box .admin-auth-row-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px; }
    .homeNewV2Container .admin-auth-box .ant-checkbox-wrapper {
      zoom: 1.25; }
      .homeNewV2Container .admin-auth-box .ant-checkbox-wrapper .ant-checkbox {
        width: 20px; }
      .homeNewV2Container .admin-auth-box .ant-checkbox-wrapper > span {
        color: #fff; }
    .homeNewV2Container .admin-auth-box .ant-btn {
      margin: 0; }

.common-content-box {
  width: 100%;
  margin: 0 auto;
  padding-left: 280px;
  padding-right: 280px;
  max-width: 2664px; }

@media screen and (min-width: 2665px) {
  .homeNewV2Container .recommendTplListWrap .recommendTplList {
    grid-template-columns: repeat(4, minmax(0px, 1fr)); }
    .homeNewV2Container .recommendTplListWrap .recommendTplList .templateCard:nth-child(n+13) {
      display: none; } }

@media screen and (max-width: 2664px) {
  .common-content-box {
    padding-left: 280px;
    padding-right: 280px; }
  .homeNewV2Container .recommendTplListWrap .recommendTplList {
    grid-template-columns: repeat(4, minmax(0px, 1fr)); }
    .homeNewV2Container .recommendTplListWrap .recommendTplList .templateCard:nth-child(n+13) {
      display: none; } }

@media screen and (max-width: 2384px) {
  .common-content-box {
    padding-left: 160px;
    padding-right: 160px; }
  .homeNewV2Container .recommendTplListWrap .recommendTplList {
    grid-template-columns: repeat(4, minmax(0px, 1fr)); }
    .homeNewV2Container .recommendTplListWrap .recommendTplList .templateCard:nth-child(n+13) {
      display: none; } }

/* Popover 内容通过 Portal 挂在 body 下，不能依赖 .homeNewV2Container 等祖先选择器 */
.classifyBoxNewPopover .ant-popover-inner-content {
  padding: 12px;
  max-width: min(100vw - 48px, 1000px); }

.classifyBoxNewPopover .ant-popover-inner {
  transform: translateX(16px);
  border-radius: 24px; }

/* AI 社区 tab 旁「App应用」气泡：与 /app 列表同源 ToolCard 网格 */
.qyAppsPopover .ant-popover-content .ant-popover-arrow {
  display: none; }

.qyAppsPopover .ant-popover-inner {
  border-radius: 24px;
  overflow: hidden; }

.qyAppsPopover .ant-popover-inner-content {
  padding: 12px;
  max-width: min(100vw - 48px, 920px); }

.qyAppsPopoverInner {
  min-width: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: min(70vh, 680px); }

.qyAppsPopoverLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  min-width: 200px; }

.qyAppsPopoverEmpty {
  display: block;
  padding: 24px;
  color: var(--new-text-4, #999);
  font-size: 14px;
  text-align: center; }

.qyAppsPopoverGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; }

@media screen and (max-width: 640px) {
  .qyAppsPopoverGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.classifyBoxNewDropdownPanel {
  /* Popover 气泡默认会跟触发器同宽约 160px；仅 160px 宽时 auto-fill 只能一列。用 max-content 按子项总宽撑开，才能横排 */
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  width: max-content;
  max-width: min(100vw - 48px, 688px); }
  .classifyBoxNewDropdownPanel .classifyBoxNewItem {
    flex-shrink: 0;
    width: 160px;
    background: var(--new-grey-1);
    border: 1px solid var(--new-grey-4);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s var(--qtd-transition-cubic-1); }
    .classifyBoxNewDropdownPanel .classifyBoxNewItem:hover {
      border-color: var(--new-grey-5);
      box-shadow: var(--new-shadow-1); }
    .classifyBoxNewDropdownPanel .classifyBoxNewItem .classifyBoxNewItemImg {
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 16px 16px 0 0;
      object-fit: cover; }
      .classifyBoxNewDropdownPanel .classifyBoxNewItem .classifyBoxNewItemImg img {
        width: 100%;
        height: 100%;
        object-fit: cover; }
      .classifyBoxNewDropdownPanel .classifyBoxNewItem .classifyBoxNewItemImg .classifyBoxNewItemVideo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block; }
    .classifyBoxNewDropdownPanel .classifyBoxNewItem .classifyBoxNewItemDefer {
      width: 100%;
      aspect-ratio: 16 / 9;
      background: var(--new-grey-3, #e8e8e8); }
    .classifyBoxNewDropdownPanel .classifyBoxNewItem .classifyBoxNewItemContent {
      padding: 8px; }
      .classifyBoxNewDropdownPanel .classifyBoxNewItem .classifyBoxNewItemContent .classifyBoxNewItemHeader {
        display: flex;
        gap: 4px;
        align-items: center; }
        .classifyBoxNewDropdownPanel .classifyBoxNewItem .classifyBoxNewItemContent .classifyBoxNewItemHeader .classifyBoxNewItemTitle {
          font-family: 'PingFang SC', sans-serif;
          font-weight: 600;
          font-size: 16px;
          line-height: 24px;
          color: var(--new-text-1, #333);
          white-space: nowrap; }
      .classifyBoxNewDropdownPanel .classifyBoxNewItem .classifyBoxNewItemContent .classifyBoxNewItemDesc {
        font-family: 'PingFang SC', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        color: var(--new-text-3, #666);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-top: 0; }
  .classifyBoxNewDropdownPanel .classifyBoxNewItemInPopover {
    margin: 0; }
  .classifyBoxNewDropdownPanel .classifyBoxNewMoreFixed {
    text-decoration: none;
    color: inherit;
    display: block; }
    .classifyBoxNewDropdownPanel .classifyBoxNewMoreFixed:hover {
      color: inherit; }
  .classifyBoxNewDropdownPanel .classifyBoxNewMoreFixedCover {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(145deg, #eef4ff 0%, #e8e0ff 50%, #f5f0ff 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); }

@media screen and (max-width: 1880px) {
  .common-content-box {
    padding-left: 120px;
    padding-right: 120px; }
  .homeNewV2Container .recommendTplListWrap .recommendTplList {
    grid-template-columns: repeat(3, minmax(0px, 1fr)); }
    .homeNewV2Container .recommendTplListWrap .recommendTplList .templateCard:nth-child(n+10) {
      display: none; } }

@media screen and (max-width: 1536px) {
  .common-content-box {
    padding-left: 80px;
    padding-right: 80px; }
  .homeNewV2Container .recommendTplListWrap .recommendTplList {
    grid-template-columns: repeat(3, minmax(0px, 1fr)); }
    .homeNewV2Container .recommendTplListWrap .recommendTplList .templateCard:nth-child(n+10) {
      display: none; } }

@media screen and (max-width: 1336px) {
  .common-content-box {
    padding-left: 80px;
    padding-right: 80px; }
  .homeNewV2Container .recommendTplListWrap .recommendTplList {
    grid-template-columns: repeat(2, minmax(0px, 1fr)); }
    .homeNewV2Container .recommendTplListWrap .recommendTplList .templateCard:nth-child(n+7) {
      display: none; } }

@media screen and (max-width: 1200px) {
  .homeNewV2Container .homeNewV2CreateBox .homeNewV2CreateBoxTitle span {
    display: none; } }

@media screen and (max-width: 960px) {
  .homeNewV2Container .homeNewV2CreateBox .homeNewV2CreateBoxTitle {
    opacity: 0; } }

@media screen and (max-width: 1096px) {
  .common-content-box {
    padding-left: 64px;
    padding-right: 64px; }
  .homeNewV2Container .recommendTplListWrap .recommendTplList {
    grid-template-columns: repeat(2, minmax(0px, 1fr)); }
    .homeNewV2Container .recommendTplListWrap .recommendTplList .templateCard:nth-child(n+7) {
      display: none; }
  .homeNewV2CreateBox .freeTipsBox {
    opacity: 0; } }

@media screen and (max-width: 824px) {
  .common-content-box {
    padding-left: 32px;
    padding-right: 32px; }
  .homeNewV2Container .recommendTplListWrap .recommendTplList {
    grid-template-columns: repeat(2, minmax(0px, 1fr)); }
    .homeNewV2Container .recommendTplListWrap .recommendTplList .templateCard:nth-child(n+7) {
      display: none; } }

.classifyBoxNewModeContent {
  display: flex;
  width: max-content;
  padding: 12px 8px;
  flex-direction: column;
  border-radius: 16px;
  background: var(--new-grey-1);
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); }
  .classifyBoxNewModeContent .classifyBoxNewModeItem {
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 8px;
    border-radius: 16px;
    transition: all 0.3s ease;
    cursor: pointer;
    height: 40px; }
    .classifyBoxNewModeContent .classifyBoxNewModeItem .icon {
      font-size: 20px;
      color: var(--new-text-1); }
      .classifyBoxNewModeContent .classifyBoxNewModeItem .icon.icon-gou1 {
        display: none;
        font-size: 16px; }
    .classifyBoxNewModeContent .classifyBoxNewModeItem span {
      font-size: 14px;
      color: var(--new-text-1);
      line-height: 22px;
      flex: 1; }
    .classifyBoxNewModeContent .classifyBoxNewModeItem:hover {
      background: var(--new-grey-3); }
      .classifyBoxNewModeContent .classifyBoxNewModeItem:hover span {
        font-weight: 600; }
      .classifyBoxNewModeContent .classifyBoxNewModeItem:hover .icon.icon-gou1 {
        display: inline-block; }

/* masonic 由列宽像素布局，卡片需铺满列宽（覆盖 card.scss 中的百分比宽度） */
.communityPicMasonic .qtd-ai-card-b {
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box; }

.communityPicMasonic .toolCard {
  margin-bottom: 24px; }

/* 等 floor 宽度量好再挂载 masonry，避免首帧空白时可塌陷 */
.communityFloorHost {
  min-height: 500px; }

/* SSR / 首帧 hydration：CSS 多列直出卡片 HTML，列数与 getCommunityMasonryColumnCount 一致 */
.communityPicStaticGrid {
  width: 100%;
  min-height: 500px;
  margin-bottom: 24px;
  column-gap: 24px;
  column-count: 6; }
  @media screen and (max-width: 1880px) {
    .communityPicStaticGrid {
      column-count: 5; } }
  @media screen and (max-width: 1536px) {
    .communityPicStaticGrid {
      column-count: 4; } }
  @media screen and (max-width: 1096px) {
    .communityPicStaticGrid {
      column-count: 3; } }
  @media screen and (max-width: 824px) {
    .communityPicStaticGrid {
      column-count: 2; } }

.communityPicStaticItem {
  break-inside: avoid;
  margin-bottom: 24px; }
  .communityPicStaticItem .qtd-ai-card-b {
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    margin-bottom: 0; }

:root {
  --new-grey-1: #000000;
  --new-grey-2: #141414;
  --new-grey-3: #1F1F1F;
  --new-grey-4: #333333;
  --new-grey-5: #4D4D4D;
  --new-grey-6: #D8D8D8;
  --new-grey-7: #FFFFFF;
  --new-text-1: #FFFFFF;
  --new-text-2: #FAFAFA;
  --new-text-3: #999999;
  --new-text-4: #666666;
  --new-text-5: #4D4D4D;
  --new-text-6: #333333;
  --new-text-7: #1F1F1F;
  --new-text-8: #141414;
  --new-shadow-1: 0 3px 6px -4px rgba(255, 255, 255, 0.12), 0 6px 16px 0 rgba(255, 255, 255, 0.08), 0 9px 28px 8px rgba(255, 255, 255, 0.05);
  --new-shadow-2: 0 8px 12px 0 rgba(255, 255, 255, 0.3);
  --new-copyright-bg: transparent;
  --left-color-1: #141414;
  --left-color-2: #1F1F1F;
  --left-color-3: #333333;
  --left-color-4: #4D4D4D;
  --left-color-5: #666666;
  --left-color-6: #999999;
  --left-color-7: #FAFAFA;
  --left-color-8: #FFFFFF;
  --left-color-9: #e8e8e8;
  --left-color-10: #333333;
  --left-text-color-1: #FFFFFF;
  --left-text-color-2: #999999;
  --left-text-color-3: #d8d8d8;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0px 4px 4px 0px var(--tw-shadow-color, var(--shadow-color-1, #00000012)), 0px 4px 80px 8px var(--tw-shadow-color, var(--shadow-color-1, #0000001f)), 0px 0px 1px 0px var(--tw-shadow-color, var(--shadow-color-2, #000000aa)); }

.qtd-ai-light-mode {
  --new-grey-1: #FFFFFF;
  --new-grey-2: #FAFAFA;
  --new-grey-3: #F5F5F5;
  --new-grey-4: #E8E8E8;
  --new-grey-5: #D8D8D8;
  --new-grey-6: #333333;
  --new-grey-7: #141414;
  --new-text-1: #333333;
  --new-text-2: #333333;
  --new-text-3: #4D4D4D;
  --new-text-4: #666666;
  --new-text-5: #999999;
  --new-text-6: #FAFAFA;
  --new-text-7: #FFFFFF;
  --new-text-8: #FFFFFF;
  --new-shadow-1: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  --new-shadow-2: 0 8px 12px 0 rgba(0, 0, 0, 0.3);
  --new-copyright-bg: #F5FBFF;
  --left-color-1: #FFFFFF;
  --left-color-3: #F5F5F5;
  --left-color-4: #E8E8E8;
  --left-color-9: #e8e8e8;
  --left-color-10: #E8E8E8;
  --left-text-color-1: #333333;
  --left-text-color-2: #666666;
  --left-text-color-3: #666666; }
  .qtd-ai-light-mode \--tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000; }

.ContentListTagWrap {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  height: 42px;
  width: max-content;
  max-width: 100%;
  overflow: auto;
  border-radius: 42px; }
  .ContentListTagWrap .box {
    display: flex;
    width: max-content;
    padding: 4px;
    align-items: center;
    border-radius: 42px;
    position: relative;
    z-index: 1;
    background: var(--new-grey-3);
    height: 40px; }
  .ContentListTagWrap .item {
    display: flex;
    height: 32px;
    padding: 4px 16px;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: max-content;
    border-radius: 25px;
    background: transparent;
    color: var(--new-text-3);
    font-size: 14px;
    z-index: 2;
    line-height: 22px;
    transition: all 0.3s var(--qtd-transition-cubic-1, ease);
    user-select: none;
    white-space: nowrap; }
    .ContentListTagWrap .item:hover {
      background: var(--new-grey-4);
      color: var(--new-text-1);
      text-shadow: 0.1px 0 0 var(--new-text-1), -0.1px 0 0 var(--new-text-1); }
    .ContentListTagWrap .item.active {
      text-shadow: 0.1px 0 0 var(--new-text-8), -0.1px 0 0 var(--new-text-8);
      color: var(--new-text-8);
      background: var(--new-grey-7) !important; }
  .ContentListTagWrap .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0; }
  .ContentListTagWrap .indicator {
    z-index: 1;
    height: 32px;
    background: var(--new-grey-7);
    position: absolute;
    left: 4px;
    top: 4px;
    transition: all 0.3s var(--qtd-transition-cubic-1, ease);
    border-radius: 25px;
    pointer-events: none; }

:root {
  --new-grey-1: #000000;
  --new-grey-2: #141414;
  --new-grey-3: #1F1F1F;
  --new-grey-4: #333333;
  --new-grey-5: #4D4D4D;
  --new-grey-6: #D8D8D8;
  --new-grey-7: #FFFFFF;
  --new-text-1: #FFFFFF;
  --new-text-2: #FAFAFA;
  --new-text-3: #999999;
  --new-text-4: #666666;
  --new-text-5: #4D4D4D;
  --new-text-6: #333333;
  --new-text-7: #1F1F1F;
  --new-text-8: #141414;
  --new-shadow-1: 0 3px 6px -4px rgba(255, 255, 255, 0.12), 0 6px 16px 0 rgba(255, 255, 255, 0.08), 0 9px 28px 8px rgba(255, 255, 255, 0.05);
  --new-shadow-2: 0 8px 12px 0 rgba(255, 255, 255, 0.3);
  --new-copyright-bg: transparent;
  --left-color-1: #141414;
  --left-color-2: #1F1F1F;
  --left-color-3: #333333;
  --left-color-4: #4D4D4D;
  --left-color-5: #666666;
  --left-color-6: #999999;
  --left-color-7: #FAFAFA;
  --left-color-8: #FFFFFF;
  --left-color-9: #e8e8e8;
  --left-color-10: #333333;
  --left-text-color-1: #FFFFFF;
  --left-text-color-2: #999999;
  --left-text-color-3: #d8d8d8;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0px 4px 4px 0px var(--tw-shadow-color, var(--shadow-color-1, #00000012)), 0px 4px 80px 8px var(--tw-shadow-color, var(--shadow-color-1, #0000001f)), 0px 0px 1px 0px var(--tw-shadow-color, var(--shadow-color-2, #000000aa)); }

.qtd-ai-light-mode {
  --new-grey-1: #FFFFFF;
  --new-grey-2: #FAFAFA;
  --new-grey-3: #F5F5F5;
  --new-grey-4: #E8E8E8;
  --new-grey-5: #D8D8D8;
  --new-grey-6: #333333;
  --new-grey-7: #141414;
  --new-text-1: #333333;
  --new-text-2: #333333;
  --new-text-3: #4D4D4D;
  --new-text-4: #666666;
  --new-text-5: #999999;
  --new-text-6: #FAFAFA;
  --new-text-7: #FFFFFF;
  --new-text-8: #FFFFFF;
  --new-shadow-1: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  --new-shadow-2: 0 8px 12px 0 rgba(0, 0, 0, 0.3);
  --new-copyright-bg: #F5FBFF;
  --left-color-1: #FFFFFF;
  --left-color-3: #F5F5F5;
  --left-color-4: #E8E8E8;
  --left-color-9: #e8e8e8;
  --left-color-10: #E8E8E8;
  --left-text-color-1: #333333;
  --left-text-color-2: #666666;
  --left-text-color-3: #666666; }
  .qtd-ai-light-mode \--tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000; }

.bg-new-grey-3 {
  background-color: var(--new-grey-2); }

.mcpPageContainer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-top: 56px; }

.mcpPage {
  color: var(--new-text-1);
  font-size: 15px;
  line-height: 1.65; }
  .mcpPage h1,
  .mcpPage h2,
  .mcpPage h3,
  .mcpPage p,
  .mcpPage button,
  .mcpPage a,
  .mcpPage code,
  .mcpPage strong {
    color: inherit;
    text-align: left; }
  .mcpPage .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px; }
  .mcpPage .platformIconImg {
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0; }
  .mcpPage .platformIconSvg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor; }
  .mcpPage .heroSection {
    padding: 40px 0 48px; }
  .mcpPage .hero {
    text-align: center;
    margin-bottom: 32px; }
  .mcpPage .heroTitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 16px;
    margin: 0 0 16px;
    color: var(--new-text-1);
    font-size: clamp(28px, 4.5vw, 48px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase; }
  .mcpPage .heroTitlePrefix,
  .mcpPage .heroTitleSuffix {
    color: var(--new-text-1);
    text-transform: none;
    font-weight: 800; }
  .mcpPage .heroRotator {
    display: inline-flex;
    height: 1.15em;
    overflow: hidden;
    vertical-align: bottom;
    transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
  .mcpPage .heroRotatorTrack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
  .mcpPage .heroRotatorItem {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: max-content;
    height: 1.15em;
    color: var(--new-text-1);
    white-space: nowrap;
    text-transform: none; }
    .mcpPage .heroRotatorItem span {
      color: var(--new-text-1); }
  .mcpPage .heroDesc {
    max-width: 640px;
    margin: 0 auto;
    color: var(--new-text-3);
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
    text-transform: none;
    font-weight: 400; }
  .mcpPage .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap; }
  .mcpPage .platformTagWrap {
    margin-left: auto; }
  .mcpPage .tutorialPanel {
    position: relative;
    padding: 28px 28px 20px;
    border: 1px solid var(--new-grey-4);
    border-radius: 16px;
    background: var(--new-grey-3);
    box-shadow: var(--tw-shadow); }
  .mcpPage .tutorialPanelLink {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 1;
    color: var(--new-text-2);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px; }
    .mcpPage .tutorialPanelLink:hover {
      color: var(--new-text-1); }
  .mcpPage .oneLineInstall .oneLineInstallTitle {
    margin: 0 0 8px;
    color: var(--new-text-1);
    font-size: 16px;
    line-height: 1.35;
    font-weight: 700; }
  .mcpPage .oneLineInstall p {
    margin: 0 0 12px;
    color: var(--new-text-3);
    font-size: 13px;
    line-height: 1.65; }
  .mcpPage .oneLineInstall .codeBox {
    width: 100%;
    max-width: 100%; }
    .mcpPage .oneLineInstall .codeBox code {
      max-width: 100%;
      padding-right: 56px;
      text-align: left; }
  .mcpPage .tutorialOrDivider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0; }
    .mcpPage .tutorialOrDivider::before, .mcpPage .tutorialOrDivider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--new-grey-4); }
    .mcpPage .tutorialOrDivider span {
      flex-shrink: 0;
      color: var(--new-text-3);
      font-size: 13px;
      font-weight: 600; }
  .mcpPage .tutorialSteps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px; }
  .mcpPage .tutorialStep {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px; }
    .mcpPage .tutorialStep .stepNum {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      margin-right: 8px;
      border-radius: 999px;
      background: var(--new-grey-4);
      color: var(--new-text-2);
      font-size: 12px;
      font-weight: 700; }
    .mcpPage .tutorialStep h3 {
      color: var(--new-text-1);
      font-size: 16px;
      line-height: 1.35;
      margin-bottom: 0;
      font-weight: 700;
      display: flex;
      align-items: center; }
    .mcpPage .tutorialStep p {
      margin: 0;
      color: var(--new-text-3);
      font-size: 13px;
      line-height: 1.65; }
  .mcpPage .stepAction {
    display: inline-flex;
    padding: 6px 12px;
    height: 38px;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--new-grey-4);
    background: var(--new-grey-2);
    color: var(--new-text-2);
    font-size: 12px;
    font-weight: 600;
    min-width: 100%; }
  .mcpPage .urlBox,
  .mcpPage .codeBox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 100%;
    gap: 8px;
    padding: 4px 10px;
    min-height: 38px;
    padding-right: 4px;
    text-align: left;
    border-radius: 8px;
    border: 1px solid var(--new-grey-4);
    background: var(--new-grey-2);
    position: relative; }
    .mcpPage .urlBox code,
    .mcpPage .codeBox code {
      flex: 1;
      min-width: 0;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--new-text-2);
      font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
      font-size: 11px; }
    .mcpPage .urlBox button,
    .mcpPage .codeBox button {
      flex-shrink: 0;
      height: 28px;
      padding: 0 10px;
      border: 1px solid var(--new-grey-4);
      border-radius: 6px;
      background: var(--new-grey-4);
      color: var(--new-text-1);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      position: absolute;
      top: 4px;
      right: 4px; }
      .mcpPage .urlBox button:hover,
      .mcpPage .codeBox button:hover {
        background: var(--new-grey-5); }
  .mcpPage .codeBox {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    padding: 4px 4px 4px 12px; }
    .mcpPage .codeBox code {
      flex: 0 1 auto;
      max-width: min(100%, 360px);
      overflow: visible;
      text-align: left;
      text-overflow: unset;
      white-space: pre-wrap;
      word-break: break-word;
      line-height: 1.5; }
  .mcpPage .tutorialTip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--new-grey-4);
    color: var(--new-text-3);
    font-size: 13px; }
    .mcpPage .tutorialTip strong {
      color: var(--new-text-2);
      font-weight: 700; }
    .mcpPage .tutorialTip a {
      color: var(--new-text-2);
      text-decoration: underline;
      text-underline-offset: 2px; }
      .mcpPage .tutorialTip a:hover {
        color: var(--new-text-1); }
  .mcpPage .sectionHead {
    margin-bottom: 32px;
    text-align: center; }
    .mcpPage .sectionHead .sectionLabel {
      display: inline-block;
      margin-bottom: 8px;
      color: var(--new-text-3);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase; }
    .mcpPage .sectionHead h2 {
      margin: 0;
      color: var(--new-text-1);
      font-size: clamp(22px, 3vw, 32px);
      font-weight: 800; }
  .mcpPage .toolset {
    padding: 48px 0; }
    .mcpPage .toolset .toolGrid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px; }
    .mcpPage .toolset .toolCard {
      padding: 20px;
      border: 1px solid var(--new-grey-4);
      border-radius: 14px;
      background: var(--new-grey-3); }
      .mcpPage .toolset .toolCard h3 {
        margin: 0 0 8px;
        color: var(--new-text-1);
        font-size: 16px;
        font-weight: 700; }
      .mcpPage .toolset .toolCard p {
        margin: 0 0 12px;
        color: var(--new-text-3);
        font-size: 13px;
        line-height: 1.6; }
    .mcpPage .toolset .toolTags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px; }
      .mcpPage .toolset .toolTags code {
        padding: 3px 8px;
        border-radius: 6px;
        border: 1px solid var(--new-grey-4);
        background: var(--new-grey-2);
        color: var(--new-text-3);
        font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
        font-size: 11px; }
  .mcpPage .faq {
    padding: 24px 0 56px; }
    .mcpPage .faq .faqList {
      display: flex;
      align-items: flex-start;
      gap: 32px;
      width: 100%;
      min-width: 0; }
    .mcpPage .faq .faqListSingle {
      display: block; }
    .mcpPage .faq .faqColumn {
      flex: 1;
      min-width: 0; }
    .mcpPage .faq .faqListSingle .faqColumn {
      width: 100%; }
    .mcpPage .faq .faqItem {
      width: 100%;
      min-width: 0;
      border-bottom: 1px solid var(--new-grey-4); }
      .mcpPage .faq .faqItem:first-child {
        border-top: 1px solid var(--new-grey-4); }
    .mcpPage .faq .faqQuestion {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 4px;
      border: none;
      background: transparent;
      color: var(--new-text-1);
      font-size: 14px;
      font-weight: 600;
      text-align: left;
      cursor: pointer; }
      .mcpPage .faq .faqQuestion span {
        flex: 1;
        min-width: 0;
        overflow-wrap: anywhere;
        line-height: 1.5; }
      .mcpPage .faq .faqQuestion i {
        flex-shrink: 0;
        color: var(--new-text-3);
        font-style: normal;
        line-height: 1.5; }
    .mcpPage .faq .faqAnswer {
      padding: 0 4px 16px;
      color: var(--new-text-3);
      font-size: 13px;
      line-height: 1.7;
      overflow-wrap: anywhere;
      word-break: break-word; }
  .mcpPage .footer {
    padding: 32px 0 48px;
    text-align: center;
    border-top: 1px solid var(--new-grey-4); }
    .mcpPage .footer .footerActions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-bottom: 12px; }
    .mcpPage .footer .footerPrimary,
    .mcpPage .footer .footerGhost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 38px;
      padding: 0 16px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.15s; }
    .mcpPage .footer .footerPrimary {
      border: 1px solid var(--new-grey-4);
      background: var(--new-grey-4);
      color: var(--new-text-1); }
      .mcpPage .footer .footerPrimary:hover {
        background: var(--new-grey-5); }
    .mcpPage .footer .footerGhost {
      border: 1px solid var(--new-grey-4);
      background: var(--new-grey-3);
      color: var(--new-text-2); }
      .mcpPage .footer .footerGhost:hover {
        color: var(--new-text-1); }
    .mcpPage .footer .footerMeta {
      margin: 0;
      color: var(--new-text-3);
      font-size: 12px; }
      .mcpPage .footer .footerMeta code {
        padding: 2px 6px;
        border-radius: 4px;
        background: var(--new-grey-3);
        color: var(--new-text-2);
        font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
        font-size: 11px; }

@media (max-width: 900px) {
  .mcpPage .tutorialSteps {
    grid-template-columns: 1fr;
    gap: 20px; }
  .mcpPage .toolbar {
    flex-direction: column;
    align-items: stretch; }
  .mcpPage .platformTagWrap {
    margin-left: 0;
    width: 100%;
    justify-content: center; }
  .mcpPage .toolset .toolGrid {
    grid-template-columns: 1fr; }
  .mcpPage .container {
    padding: 0 16px; } }

@media (max-width: 768px) {
  .mcpPage .heroTitle {
    font-size: clamp(22px, 6vw, 32px); }
  .mcpPage .tutorialPanel {
    padding: 20px 16px 16px; }
  .mcpPage .tutorialPanelLink {
    top: 16px;
    right: 16px; } }

.productCard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 328px;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  background: var(--new-grey-1);
  border: 2px solid transparent;
  transition: all 0.3s ease; }
  .productCard:hover, .productCard.active {
    border-color: #B2FF00;
    box-shadow: 0 4px 16px 0 rgba(178, 255, 0, 0.6); }
    .productCard:hover .productCardContent::after, .productCard.active .productCardContent::after {
      opacity: 1; }
    .productCard:hover .productCardBottom .productCardContentButton, .productCard.active .productCardBottom .productCardContentButton {
      background-color: var(--new-grey-7);
      box-shadow: var(--new-shadow-2);
      color: var(--new-text-8) !important; }
  .productCard .productCardContent {
    position: relative;
    width: 100%;
    min-height: 350px;
    transition: all 0.3s ease;
    padding: 40px 12px 0px 12px;
    display: flex;
    flex-direction: column;
    gap: 24px; }
    .productCard .productCardContent::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(55.44% 28.56% at 50% -5.62%, #E5FFA8 0%, var(--new-grey-1) 100%);
      opacity: 0;
      transition: all 0.3s ease;
      border-radius: 16px 16px 0 0;
      z-index: 0;
      pointer-events: none; }
    .productCard .productCardContent * {
      position: relative;
      z-index: 1; }
    .productCard .productCardContent .productCardContentTitle {
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding: 0 12px; }
      .productCard .productCardContent .productCardContentTitle .productCardContentName {
        display: flex;
        align-items: center;
        gap: 4px; }
        .productCard .productCardContent .productCardContentTitle .productCardContentName img {
          width: 32px;
          height: auto; }
        .productCard .productCardContent .productCardContentTitle .productCardContentName span {
          color: var(--new-text-2);
          font-size: 24px;
          font-weight: 600;
          line-height: 32px; }
      .productCard .productCardContent .productCardContentTitle .productCardContentPrice {
        color: var(--new-text-2);
        font-family: Arial;
        font-size: 24px;
        font-weight: 700; }
        .productCard .productCardContent .productCardContentTitle .productCardContentPrice em {
          font-family: Arial;
          font-size: 48px;
          line-height: 56px; }
        .productCard .productCardContent .productCardContentTitle .productCardContentPrice span {
          color: var(--new-text-5);
          font-size: 14px;
          font-weight: 400; }
        .productCard .productCardContent .productCardContentTitle .productCardContentPrice i {
          color: var(--new-text-5);
          font-size: 14px;
          font-weight: 400;
          text-decoration: line-through;
          margin-left: 8px; }
    .productCard .productCardContent .productCardContentDropdown {
      cursor: pointer;
      display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 110px; }
      .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        min-height: 62px;
        padding: 8px 12px;
        border: 1px solid var(--new-grey-5);
        border-radius: 8px;
        transition: all 0.3s ease; }
        .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentDropdownBoxContent {
          display: flex;
          flex-direction: column;
          gap: 4px;
          width: 100%; }
        .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentDropdownRows {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 8px;
          width: 100%; }
        .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentDropdownCol {
          flex: 1;
          min-width: 0; }
          .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentDropdownCol .ant-dropdown-trigger {
            display: block;
            width: 100%; }
        .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentPointRow {
          display: flex;
          align-items: center;
          min-height: 24px;
          width: 100%; }
          .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentPointRow .productCardContentPointBoxIcon {
            display: flex;
            align-items: center;
            line-height: 24px; }
            .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentPointRow .productCardContentPointBoxIcon i {
              color: var(--new-text-2);
              font-size: 18px; }
              .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentPointRow .productCardContentPointBoxIcon i.dropItem {
                font-size: 16px;
                color: var(--new-grey-5);
                margin-left: 4px; }
            .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentPointRow .productCardContentPointBoxIcon span {
              color: var(--new-text-2);
              font-size: 16px;
              font-weight: 600;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap; }
        .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentGrantRowInner {
          display: flex;
          align-items: center;
          line-height: 24px;
          width: 100%; }
          .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentGrantRowInner span {
            color: var(--new-text-2);
            font-size: 14px;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; }
          .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentGrantRowInner .dropItem {
            font-size: 16px;
            color: var(--new-grey-5);
            margin-left: 4px; }
        .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentPointTipsWrap {
          width: 100%; }
          .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentPointTipsWrap .productCardContentPointTips {
            width: 100%;
            color: var(--new-text-4);
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            padding-left: 18px;
            margin: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; }
        .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentPointBox {
          display: flex;
          flex-direction: column;
          justify-content: center; }
          .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentPointBox .productCardContentPointBoxIcon {
            display: flex;
            align-items: center;
            line-height: 24px; }
            .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentPointBox .productCardContentPointBoxIcon i {
              color: var(--new-text-2);
              font-size: 18px; }
              .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentPointBox .productCardContentPointBoxIcon i.dropItem {
                font-size: 16px;
                color: var(--new-grey-5);
                margin-left: 4px; }
            .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentPointBox .productCardContentPointBoxIcon span {
              color: var(--new-text-2);
              font-size: 16px;
              font-weight: 600; }
          .productCard .productCardContent .productCardContentDropdown .productCardContentDropdownBox .productCardContentPointBox .productCardContentPointTips {
            width: 100%;
            color: var(--new-text-4);
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            padding-left: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap; }
      .productCard .productCardContent .productCardContentDropdown .productCardContentGiftBox {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        padding: 12px;
        border: 1px solid var(--new-grey-5);
        border-top: none;
        border-radius: 0px 0px 8px 8px;
        transition: all 0.3s ease; }
        .productCard .productCardContent .productCardContentDropdown .productCardContentGiftBox .productCardContentGiftBoxRow {
          display: flex;
          align-items: center;
          gap: 8px;
          width: 100%;
          min-height: 40px; }
          .productCard .productCardContent .productCardContentDropdown .productCardContentGiftBox .productCardContentGiftBoxRow > em {
            color: var(--new-text-2);
            font-size: 16px;
            font-weight: 600; }
          .productCard .productCardContent .productCardContentDropdown .productCardContentGiftBox .productCardContentGiftBoxRow > span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: max-content;
            padding: 0 8px;
            height: 24px;
            line-height: 24px;
            border-radius: 24px;
            background-color: #B2FF00;
            color: #333;
            font-size: 16px;
            font-weight: 600; }
            .productCard .productCardContent .productCardContentDropdown .productCardContentGiftBox .productCardContentGiftBoxRow > span i {
              color: #999;
              font-size: 16px;
              font-weight: 400;
              margin-left: 4px; }
          .productCard .productCardContent .productCardContentDropdown .productCardContentGiftBox .productCardContentGiftBoxRow .productCardContentGiftBoxRowQuotaLimit {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 40px;
            background-color: var(--new-grey-3);
            padding: 8px;
            border-radius: 888px;
            transition: all 0.3s ease; }
            .productCard .productCardContent .productCardContentDropdown .productCardContentGiftBox .productCardContentGiftBoxRow .productCardContentGiftBoxRowQuotaLimit .productCardContentGiftBoxRowQuotaLimitLeft {
              display: flex;
              align-items: center; }
              .productCard .productCardContent .productCardContentDropdown .productCardContentGiftBox .productCardContentGiftBoxRow .productCardContentGiftBoxRowQuotaLimit .productCardContentGiftBoxRowQuotaLimitLeft .productCardContentGiftBoxRowQuotaLimitIcon {
                color: var(--new-text-5);
                font-size: 12px;
                margin-right: 4px; }
              .productCard .productCardContent .productCardContentDropdown .productCardContentGiftBox .productCardContentGiftBoxRow .productCardContentGiftBoxRowQuotaLimit .productCardContentGiftBoxRowQuotaLimitLeft .productCardContentGiftBoxRowQuotaLimitName {
                color: var(--new-text-2);
                font-size: 14px; }
              .productCard .productCardContent .productCardContentDropdown .productCardContentGiftBox .productCardContentGiftBoxRow .productCardContentGiftBoxRowQuotaLimit .productCardContentGiftBoxRowQuotaLimitLeft .yiwen {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                vertical-align: text-bottom;
                height: 16px;
                width: 16px;
                border: 1px solid var(--new-text-4);
                border-radius: 50%;
                font-size: 8px;
                color: var(--new-text-4);
                margin-left: 4px;
                transition: all 0.3s ease; }
              .productCard .productCardContent .productCardContentDropdown .productCardContentGiftBox .productCardContentGiftBoxRow .productCardContentGiftBoxRowQuotaLimit .productCardContentGiftBoxRowQuotaLimitLeft .productCardContentGiftBoxRowQuotaLimitResolution {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 8px;
                height: 24px;
                background-color: var(--new-grey-4);
                color: var(--new-text-2);
                font-size: 16px;
                font-weight: 600;
                border-radius: 24px;
                margin-left: 4px;
                transition: all 0.3s ease; }
            .productCard .productCardContent .productCardContentDropdown .productCardContentGiftBox .productCardContentGiftBoxRow .productCardContentGiftBoxRowQuotaLimit .productCardContentGiftBoxRowQuotaLimitRight em {
              display: flex;
              align-items: center;
              justify-content: center;
              width: max-content;
              padding: 0 8px;
              height: 24px;
              line-height: 24px;
              border-radius: 24px;
              background-color: #B2FF00;
              color: #333;
              font-size: 16px;
              font-weight: 600; }
            .productCard .productCardContent .productCardContentDropdown .productCardContentGiftBox .productCardContentGiftBoxRow .productCardContentGiftBoxRowQuotaLimit.productCardContentGiftBoxRowQuotaLimitDisabled .productCardContentGiftBoxRowQuotaLimitLeft .productCardContentGiftBoxRowQuotaLimitName {
              color: var(--new-text-5); }
            .productCard .productCardContent .productCardContentDropdown .productCardContentGiftBox .productCardContentGiftBoxRow .productCardContentGiftBoxRowQuotaLimit.productCardContentGiftBoxRowQuotaLimitDisabled .productCardContentGiftBoxRowQuotaLimitLeft .yiwen {
              color: var(--new-text-5);
              border-color: var(--new-text-5); }
            .productCard .productCardContent .productCardContentDropdown .productCardContentGiftBox .productCardContentGiftBoxRow .productCardContentGiftBoxRowQuotaLimit.productCardContentGiftBoxRowQuotaLimitDisabled .productCardContentGiftBoxRowQuotaLimitRight em {
              background-color: var(--new-grey-4);
              color: var(--new-text-4);
              font-weight: 400; }
      .productCard .productCardContent .productCardContentDropdown:hover .productCardContentDropdownBox {
        background-color: var(--new-grey-3); }
      .productCard .productCardContent .productCardContentDropdown:hover .productCardContentGiftBox {
        background-color: var(--new-grey-3); }
        .productCard .productCardContent .productCardContentDropdown:hover .productCardContentGiftBox .productCardContentGiftBoxRowQuotaLimit {
          background-color: var(--new-grey-4); }
          .productCard .productCardContent .productCardContentDropdown:hover .productCardContentGiftBox .productCardContentGiftBoxRowQuotaLimit .productCardContentGiftBoxRowQuotaLimitLeft .productCardContentGiftBoxRowQuotaLimitResolution {
            background-color: var(--new-grey-5); }
          .productCard .productCardContent .productCardContentDropdown:hover .productCardContentGiftBox .productCardContentGiftBoxRowQuotaLimit.productCardContentGiftBoxRowQuotaLimitDisabled .productCardContentGiftBoxRowQuotaLimitRight em {
            background-color: var(--new-grey-5); }
  .productCard .productCardBottom {
    position: relative;
    width: 100%;
    height: auto;
    padding: 12px 20px;
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px; }
    .productCard .productCardBottom .productCardContentButton {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 200px;
      height: 40px;
      border-radius: 40px;
      margin: 0 auto;
      border: 1px solid var(--new-grey-6);
      background-color: var(--new-grey-1);
      color: var(--new-text-2);
      font-size: 16px;
      font-weight: 600;
      transition: all 0.3s ease;
      cursor: pointer;
      margin-bottom: 16px; }
      .productCard .productCardBottom .productCardContentButton.currentPlan {
        border-color: var(--new-grey-4) !important;
        background-color: var(--new-grey-4) !important;
        color: var(--new-text-2) !important;
        font-weight: 400;
        box-shadow: none !important; }
    .productCard .productCardBottom .productCardBottomItemBox {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 8px; }
      .productCard .productCardBottom .productCardBottomItemBox.productCardBottomItemBoxModel::after {
        content: '';
        position: absolute;
        left: -8px;
        top: -4px;
        width: calc(100% + 16px);
        height: calc(100% + 8px);
        background-color: var(--new-grey-4);
        z-index: 0;
        pointer-events: none;
        border-radius: 8px;
        opacity: 0;
        transition: all .3s ease-in-out; }
      .productCard .productCardBottom .productCardBottomItemBox.productCardBottomItemBoxModel:hover::after {
        opacity: 1; }
      .productCard .productCardBottom .productCardBottomItemBox.productCardBottomItemBoxModel:hover .modelItem .modelItemIcon, .productCard .productCardBottom .productCardBottomItemBox.productCardBottomItemBoxModel:hover .modelItem p span, .productCard .productCardBottom .productCardBottomItemBox.productCardBottomItemBoxModel:hover .modelItem p em {
        color: var(--new-text-2); }
    .productCard .productCardBottom .productCardBottomItem {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      width: 100%;
      height: 22px;
      gap: 4px; }
      .productCard .productCardBottom .productCardBottomItem .success {
        font-size: 14px;
        color: var(--new-text-2); }
      .productCard .productCardBottom .productCardBottomItem .error {
        font-size: 14px;
        color: var(--new-text-5); }
      .productCard .productCardBottom .productCardBottomItem span {
        display: inline-flex;
        align-items: center;
        color: var(--new-text-2);
        font-size: 14px;
        font-weight: 400;
        height: 24px; }
        .productCard .productCardBottom .productCardBottomItem span em {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 24px;
          padding: 0 8px;
          background-color: #B2FF00;
          border-radius: 24px;
          font-weight: 600;
          font-size: 14px;
          color: #333;
          margin-right: 4px; }
      .productCard .productCardBottom .productCardBottomItem .yiwen {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 16px;
        width: 16px;
        border: 1px solid var(--new-grey-4);
        border-radius: 50%;
        font-size: 8px;
        color: var(--new-text-4);
        margin-left: 4px;
        opacity: 0;
        transition: all 0.3s ease; }
      .productCard .productCardBottom .productCardBottomItem:hover .yiwen {
        opacity: 1; }
    .productCard .productCardBottom .productCardBottomItemLine {
      position: relative;
      width: 100%;
      height: 1px;
      background-color: var(--new-grey-5);
      margin: 4px 0;
      z-index: 1; }
    .productCard .productCardBottom .modelItem {
      position: relative;
      display: flex;
      width: 100%;
      min-height: 22px;
      line-height: 22px;
      z-index: 1; }
      .productCard .productCardBottom .modelItem .modelItemIcon {
        font-size: 16px;
        color: var(--new-text-4);
        vertical-align: bottom;
        margin-right: 4px; }
      .productCard .productCardBottom .modelItem p span {
        font-size: 14px;
        color: var(--new-text-4);
        font-weight: 600;
        line-height: 22px;
        margin-right: 4px; }
      .productCard .productCardBottom .modelItem p em {
        font-size: 14px;
        color: var(--new-text-4);
        line-height: 22px; }
      .productCard .productCardBottom .modelItem p .yiwen {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: text-bottom;
        height: 16px;
        width: 16px;
        border: 1px solid var(--new-text-4);
        border-radius: 50%;
        font-size: 8px;
        color: var(--new-text-4);
        margin-left: 4px;
        opacity: 0;
        transition: all 0.3s ease; }
      .productCard .productCardBottom .modelItem:hover .yiwen {
        opacity: 1; }

.productCardContentDropdownOverlay {
  width: 168px;
  height: auto;
  background-color: var(--new-grey-1);
  border-radius: 16px;
  box-shadow: var(--new-shadow-1); }
  .productCardContentDropdownOverlay .ant-dropdown-menu {
    background-color: var(--new-grey-1);
    padding: 12px 0;
    border-radius: 16px; }
    .productCardContentDropdownOverlay .ant-dropdown-menu .ant-dropdown-menu-item {
      padding: 0;
      background-color: transparent !important; }
  .productCardContentDropdownOverlay .productCardContentDropdownMenuItem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 32px;
    padding: 0 12px;
    cursor: pointer; }
    .productCardContentDropdownOverlay .productCardContentDropdownMenuItem span:nth-child(1) {
      color: var(--new-text-2);
      font-size: 14px; }
    .productCardContentDropdownOverlay .productCardContentDropdownMenuItem span:nth-child(2) {
      color: var(--new-text-5);
      font-size: 14px; }
    .productCardContentDropdownOverlay .productCardContentDropdownMenuItem:hover, .productCardContentDropdownOverlay .productCardContentDropdownMenuItem.active {
      background-color: var(--new-grey-3); }
      .productCardContentDropdownOverlay .productCardContentDropdownMenuItem:hover span, .productCardContentDropdownOverlay .productCardContentDropdownMenuItem.active span {
        font-weight: 600; }
  .productCardContentDropdownOverlay .productCardContentGrantMenuItem {
    justify-content: flex-start; }

.productCardGrantDropdownOverlay {
  width: auto;
  min-width: 148px; }

.cardTooltip {
  max-width: 260px; }
  .cardTooltip .ant-tooltip-content .ant-tooltip-inner {
    padding: 8px 8px;
    font-size: 14px; }

.productTable {
  position: relative;
  width: max-content;
  max-width: 100%;
  height: auto;
  display: flex;
  margin: 0 auto; }
  .productTable .fixedColumn {
    position: relative;
    width: 192px;
    border-top: 2px solid transparent !important; }
    .productTable .fixedColumn .fixedColumnItemTitle {
      display: flex;
      align-items: flex-end;
      padding: 4px 8px;
      width: 100%;
      height: 176px;
      border-bottom: 2px solid var(--new-grey-4); }
      .productTable .fixedColumn .fixedColumnItemTitle > div {
        width: max-content;
        height: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 0 8px;
        border-radius: 24px;
        transition: all 0.3s ease;
        color: var(--new-text-4); }
        .productTable .fixedColumn .fixedColumnItemTitle > div:hover {
          background: var(--new-grey-3);
          color: var(--new-text-2); }
        .productTable .fixedColumn .fixedColumnItemTitle > div span {
          font-size: 14px;
          line-height: 22px; }
        .productTable .fixedColumn .fixedColumnItemTitle > div i {
          font-size: 14px; }
    .productTable .fixedColumn .fixedColumnItemContent {
      display: flex;
      flex-direction: column;
      width: 100%;
      border-left: 1px solid var(--new-grey-4); }
      .productTable .fixedColumn .fixedColumnItemContent .fixedColumnItemContentRowTitle {
        display: flex;
        align-items: center;
        width: 100%;
        height: 56px;
        padding: 4px 8px;
        border-bottom: 1px solid var(--new-grey-4);
        transition: all 0.3s ease; }
        .productTable .fixedColumn .fixedColumnItemContent .fixedColumnItemContentRowTitle > div {
          display: flex;
          align-items: center;
          gap: 4px;
          width: max-content;
          padding: 0 8px;
          color: var(--new-text-2); }
          .productTable .fixedColumn .fixedColumnItemContent .fixedColumnItemContentRowTitle > div i {
            font-size: 16px; }
          .productTable .fixedColumn .fixedColumnItemContent .fixedColumnItemContentRowTitle > div span {
            font-size: 16px; }
        .productTable .fixedColumn .fixedColumnItemContent .fixedColumnItemContentRowTitle.fixedColumnItemContentRowTitleHover {
          background-color: var(--new-grey-3); }
          .productTable .fixedColumn .fixedColumnItemContent .fixedColumnItemContentRowTitle.fixedColumnItemContentRowTitleHover > div {
            color: var(--new-text-1); }
      .productTable .fixedColumn .fixedColumnItemContent .fixedColumnItemContentRow {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        height: 56px;
        padding: 0px 16px;
        border-bottom: 1px solid var(--new-grey-4);
        transition: background 0.3s ease; }
        .productTable .fixedColumn .fixedColumnItemContent .fixedColumnItemContentRow .fixedColumnItemContentRowItem {
          display: flex;
          align-items: center;
          width: 100%;
          height: 22px; }
          .productTable .fixedColumn .fixedColumnItemContent .fixedColumnItemContentRow .fixedColumnItemContentRowItem img {
            height: 20px;
            width: auto; }
          .productTable .fixedColumn .fixedColumnItemContent .fixedColumnItemContentRow .fixedColumnItemContentRowItem span {
            color: var(--new-text-2);
            font-size: 14px; }
        .productTable .fixedColumn .fixedColumnItemContent .fixedColumnItemContentRow p {
          color: var(--new-text-4);
          font-size: 12px;
          line-height: 20px; }
        .productTable .fixedColumn .fixedColumnItemContent .fixedColumnItemContentRow.fixedColumnItemContentRowHover {
          background-color: var(--new-grey-3);
          font-weight: 600; }
          .productTable .fixedColumn .fixedColumnItemContent .fixedColumnItemContentRow.fixedColumnItemContentRowHover .fixedColumnItemContentRowItem span {
            color: var(--new-text-1); }
          .productTable .fixedColumn .fixedColumnItemContent .fixedColumnItemContentRow.fixedColumnItemContentRowHover p {
            color: var(--new-text-3); }
    .productTable .fixedColumn .fixedColumnItemContentBottom {
      display: flex;
      align-items: center;
      height: 56px;
      padding: 0 8px;
      border-bottom: 1px solid var(--new-grey-4);
      transition: all 0.3s ease; }
      .productTable .fixedColumn .fixedColumnItemContentBottom > div {
        width: max-content;
        height: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 8px;
        border-radius: 24px;
        transition: all 0.3s ease;
        color: var(--new-text-3);
        font-size: 14px; }
        .productTable .fixedColumn .fixedColumnItemContentBottom > div:hover {
          background: var(--new-grey-3);
          color: var(--new-text-2); }
      .productTable .fixedColumn .fixedColumnItemContentBottom.fixedColumnItemContentBottomHover {
        background-color: var(--new-grey-3); }
        .productTable .fixedColumn .fixedColumnItemContentBottom.fixedColumnItemContentBottomHover > div {
          color: var(--new-text-2); }
  .productTable .swiperContainer {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 1050px;
    height: auto; }
    .productTable .swiperContainer .swiperButtonPrev,
    .productTable .swiperContainer .swiperButtonNext {
      position: absolute;
      top: 80px;
      z-index: 10;
      cursor: pointer;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--new-grey-4);
      border-radius: 50%;
      background: var(--new-grey-1);
      color: var(--new-text-4);
      transition: all 0.3s ease;
      opacity: 0; }
      .productTable .swiperContainer .swiperButtonPrev i,
      .productTable .swiperContainer .swiperButtonNext i {
        display: flex;
        font-size: 20px; }
      .productTable .swiperContainer .swiperButtonPrev:hover,
      .productTable .swiperContainer .swiperButtonNext:hover {
        opacity: 1; }
      .productTable .swiperContainer .swiperButtonPrev.swiper-button-disabled,
      .productTable .swiperContainer .swiperButtonNext.swiper-button-disabled {
        opacity: 0 !important;
        pointer-events: none; }
    .productTable .swiperContainer .swiperButtonPrev {
      left: -16px; }
      .productTable .swiperContainer .swiperButtonPrev i {
        transform: rotate(180deg); }
    .productTable .swiperContainer .swiperButtonNext {
      right: -16px; }
    .productTable .swiperContainer:hover .swiperButtonPrev,
    .productTable .swiperContainer:hover .swiperButtonNext {
      opacity: 0.6; }
  .productTable .productTableSwiper {
    width: 100%;
    height: 100%; }
  .productTable .productTableSlide {
    width: 168px !important;
    height: 100%;
    border-top: 2px solid transparent !important; }
    .productTable .productTableSlide:not(:first-child) {
      margin-left: -1px; }
    .productTable .productTableSlide .productTableItem {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: auto; }
      .productTable .productTableSlide .productTableItem .productTableItemTitle {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        height: 176px;
        border-top: 1px solid var(--new-grey-4);
        border-left: 1px solid var(--new-grey-4);
        border-right: 1px solid var(--new-grey-4);
        border-bottom: 2px solid var(--new-grey-4); }
        .productTable .productTableSlide .productTableItem .productTableItemTitle .productTableItemTitleText {
          color: var(--new-text-2);
          font-size: 16px;
          line-height: 24px;
          font-weight: 700; }
        .productTable .productTableSlide .productTableItem .productTableItemTitle .productTableItemTitlePrice > em {
          color: var(--new-text-5);
          font-size: 14px; }
        .productTable .productTableSlide .productTableItem .productTableItemTitle .productTableItemTitlePrice span {
          color: var(--new-text-2);
          font-size: 32px;
          font-weight: 700;
          line-height: 40px; }
          .productTable .productTableSlide .productTableItem .productTableItemTitle .productTableItemTitlePrice span > em {
            color: var(--new-text-5); }
        .productTable .productTableSlide .productTableItem .productTableItemTitle > a {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 104px;
          height: 32px;
          border-radius: 32px;
          background: var(--new-grey-1);
          border: 1px solid var(--new-grey-4);
          color: var(--new-text-4);
          font-size: 14px;
          box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.02);
          transition: all .3s ease; }
          .productTable .productTableSlide .productTableItem .productTableItemTitle > a:hover {
            color: var(--new-text-2);
            box-shadow: var(--new-shadow-1); }
      .productTable .productTableSlide .productTableItem .productTableItemContent {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto; }
        .productTable .productTableSlide .productTableItem .productTableItemContent .productTableItemContentRowTitle {
          display: flex;
          height: 56px;
          width: 100%;
          border-bottom: 1px solid var(--new-grey-4);
          transition: all 0.3s ease; }
          .productTable .productTableSlide .productTableItem .productTableItemContent .productTableItemContentRowTitle.productTableItemContentRowTitleHover {
            background-color: var(--new-grey-3); }
        .productTable .productTableSlide .productTableItem .productTableItemContent .productTableItemContentRow {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 56px;
          width: 100%;
          border-left: 1px solid var(--new-grey-4);
          border-bottom: 1px solid var(--new-grey-4);
          border-right: 1px solid var(--new-grey-4);
          transition: background 0.3s ease; }
          .productTable .productTableSlide .productTableItem .productTableItemContent .productTableItemContentRow span {
            font-size: 14px;
            color: var(--new-text-5); }
          .productTable .productTableSlide .productTableItem .productTableItemContent .productTableItemContentRow.productTableItemContentRowHover {
            background: var(--new-grey-3);
            font-weight: 600; }
            .productTable .productTableSlide .productTableItem .productTableItemContent .productTableItemContentRow.productTableItemContentRowHover span {
              color: var(--new-text-3); }
        .productTable .productTableSlide .productTableItem .productTableItemContent .productTableItemContentBottom {
          display: flex;
          height: 56px;
          width: 100%;
          border-bottom: 1px solid var(--new-grey-4);
          transition: all 0.3s ease; }
          .productTable .productTableSlide .productTableItem .productTableItemContent .productTableItemContentBottom.productTableItemContentBottomHover {
            background-color: var(--new-grey-3); }
    .productTable .productTableSlide:last-child .productTableItemContent .productTableItemContentRowTitle, .productTable .productTableSlide:last-child .productTableItemContent .productTableItemContentBottom {
      border-right: 1px solid var(--new-grey-4); }
    .productTable .productTableSlide:hover {
      border: 2px solid #B2FF00 !important;
      z-index: 10;
      box-shadow: 0 0 10px 0 var(--new-shadow-1); }
      .productTable .productTableSlide:hover *div {
        border-left-color: transparent !important;
        border-right-color: transparent !important; }

@media screen and (min-width: 1400px) {
  .productTable .swiperContainer .swiperButtonPrev, .productTable .swiperContainer .swiperButtonNext {
    display: none !important; } }

.projectContainer {
  width: 100%;
  padding-top: 80px;
  height: 100%; }
  .projectContainer .projectHeader {
    display: none; }
  .projectContainer .historyPageContainer .historyPageContent .qtd-history-panel-container {
    padding-top: 80px; }
  .projectContainer .historyPageContainer .historyPageContent .historyPageContentSectionWrap {
    margin-top: 0; }
  .projectContainer .projectContent {
    width: 100%; }
    .projectContainer .projectContent .qtd-history-panel-container {
      padding-top: 80px; }
    .projectContainer .projectContent .qtdCreateTaskBox {
      z-index: 15; }

.projectHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: max-content;
  height: 80px;
  z-index: 1000;
  padding-left: 24px;
  display: flex;
  gap: 16px;
  align-items: center;
  z-index: 3; }
  .projectHeader .projectHeaderLogo {
    width: 22px;
    cursor: pointer; }
  .projectHeader .projectTitle {
    display: flex;
    height: 48px;
    padding: 0 16px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    gap: 4px;
    border-radius: 1000px;
    border: 1px solid var(--new-bg-3);
    color: var(--qtd-ai-text-color-1, #333);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    gap: 8px; }
    .projectHeader .projectTitle em {
      color: var(--qtd-ai-text-color-2, #333); }
    .projectHeader .projectTitle .icon-ai-edit {
      display: none; }
    .projectHeader .projectTitle .icon-duigou {
      display: none; }
    .projectHeader .projectTitle:hover .icon-ai-edit {
      display: block; }
    .projectHeader .projectTitle .ant-input {
      border: none; }
    .projectHeader .projectTitle.edit em {
      display: none !important; }
    .projectHeader .projectTitle.edit .icon-ai-edit {
      display: none !important; }
    .projectHeader .projectTitle.edit .icon-duigou {
      display: block; }

:root {
  --new-grey-1: #000000;
  --new-grey-2: #141414;
  --new-grey-3: #1F1F1F;
  --new-grey-4: #333333;
  --new-grey-5: #4D4D4D;
  --new-grey-6: #D8D8D8;
  --new-grey-7: #FFFFFF;
  --new-text-1: #FFFFFF;
  --new-text-2: #FAFAFA;
  --new-text-3: #999999;
  --new-text-4: #666666;
  --new-text-5: #4D4D4D;
  --new-text-6: #333333;
  --new-text-7: #1F1F1F;
  --new-text-8: #141414;
  --new-shadow-1: 0 3px 6px -4px rgba(255, 255, 255, 0.12), 0 6px 16px 0 rgba(255, 255, 255, 0.08), 0 9px 28px 8px rgba(255, 255, 255, 0.05);
  --new-shadow-2: 0 8px 12px 0 rgba(255, 255, 255, 0.3);
  --new-copyright-bg: transparent;
  --left-color-1: #141414;
  --left-color-2: #1F1F1F;
  --left-color-3: #333333;
  --left-color-4: #4D4D4D;
  --left-color-5: #666666;
  --left-color-6: #999999;
  --left-color-7: #FAFAFA;
  --left-color-8: #FFFFFF;
  --left-color-9: #e8e8e8;
  --left-color-10: #333333;
  --left-text-color-1: #FFFFFF;
  --left-text-color-2: #999999;
  --left-text-color-3: #d8d8d8;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0px 4px 4px 0px var(--tw-shadow-color, var(--shadow-color-1, #00000012)), 0px 4px 80px 8px var(--tw-shadow-color, var(--shadow-color-1, #0000001f)), 0px 0px 1px 0px var(--tw-shadow-color, var(--shadow-color-2, #000000aa)); }

.qtd-ai-light-mode {
  --new-grey-1: #FFFFFF;
  --new-grey-2: #FAFAFA;
  --new-grey-3: #F5F5F5;
  --new-grey-4: #E8E8E8;
  --new-grey-5: #D8D8D8;
  --new-grey-6: #333333;
  --new-grey-7: #141414;
  --new-text-1: #333333;
  --new-text-2: #333333;
  --new-text-3: #4D4D4D;
  --new-text-4: #666666;
  --new-text-5: #999999;
  --new-text-6: #FAFAFA;
  --new-text-7: #FFFFFF;
  --new-text-8: #FFFFFF;
  --new-shadow-1: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  --new-shadow-2: 0 8px 12px 0 rgba(0, 0, 0, 0.3);
  --new-copyright-bg: #F5FBFF;
  --left-color-1: #FFFFFF;
  --left-color-3: #F5F5F5;
  --left-color-4: #E8E8E8;
  --left-color-9: #e8e8e8;
  --left-color-10: #E8E8E8;
  --left-text-color-1: #333333;
  --left-text-color-2: #666666;
  --left-text-color-3: #666666; }
  .qtd-ai-light-mode \--tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000; }

.bg-new-grey-3 {
  background-color: var(--new-grey-2); }

.authSettingpage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 56px 24px 48px;
  padding-top: 120px;
  color: var(--new-text-1); }
  .authSettingpage .authSettingpagewrap {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto; }
  .authSettingpage .pageHeader,
  .authSettingpage .sectionHeader,
  .authSettingpage .appTop,
  .authSettingpage .tokenMain,
  .authSettingpage .titleLine,
  .authSettingpage .headerActions {
    display: flex;
    align-items: center; }
  .authSettingpage .pageHeader {
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px; }
    .authSettingpage .pageHeader h1 {
      margin: 0 0 6px;
      color: var(--new-text-1);
      font-size: 30px;
      line-height: 38px;
      font-weight: 700;
      letter-spacing: 0; }
    .authSettingpage .pageHeader p {
      margin: 0;
      color: var(--new-text-3);
      font-size: 14px;
      line-height: 22px; }
    .authSettingpage .pageHeader button {
      min-width: 86px;
      height: 36px;
      border: 1px solid var(--new-grey-4);
      border-radius: 7px;
      background: transparent;
      color: var(--new-text-2);
      cursor: pointer; }
  .authSettingpage .sectionBlock {
    padding: 22px;
    border: 1px solid var(--new-grey-4);
    border-radius: 12px;
    background: var(--new-grey-3);
    box-shadow: var(--tw-shadow); }
    .authSettingpage .sectionBlock + .sectionBlock {
      margin-top: 22px; }
  .authSettingpage .mainTagBox {
    margin-bottom: 20px; }
  .authSettingpage .detailTagBox {
    margin: 16px 0; }
  .authSettingpage .sectionHeader {
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px; }
    .authSettingpage .sectionHeader h2 {
      margin: 0 0 4px;
      color: var(--new-text-1);
      font-size: 20px;
      line-height: 28px;
      font-weight: 700;
      letter-spacing: 0; }
    .authSettingpage .sectionHeader p {
      margin: 0;
      color: var(--new-text-3);
      font-size: 13px;
      line-height: 20px; }
  .authSettingpage .headerActions {
    gap: 10px; }
    .authSettingpage .headerActions a,
    .authSettingpage .headerActions button {
      height: 34px;
      padding: 0 14px;
      border-radius: 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      line-height: 20px;
      cursor: pointer; }
    .authSettingpage .headerActions a {
      border: 1px solid var(--new-grey-4);
      color: var(--new-text-3);
      background: transparent; }
    .authSettingpage .headerActions button {
      border: 1px solid var(--new-grey-7);
      background: var(--new-grey-7);
      color: var(--new-grey-1);
      font-weight: 600; }
  .authSettingpage .error {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--new-grey-5);
    border-radius: 7px;
    background: var(--new-grey-2);
    color: var(--new-text-2);
    font-size: 13px;
    line-height: 20px; }
  .authSettingpage .state,
  .authSettingpage .empty {
    min-height: 180px;
    border: 1px solid var(--new-grey-4);
    border-radius: 8px;
    background: var(--new-grey-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--new-text-3);
    font-size: 14px; }
  .authSettingpage .empty {
    flex-direction: column;
    text-align: center;
    padding: 28px 18px; }
    .authSettingpage .empty h3 {
      margin: 0 0 8px;
      color: var(--new-text-1);
      font-size: 18px;
      line-height: 26px;
      font-weight: 700; }
    .authSettingpage .empty p {
      max-width: 560px;
      margin: 0;
      color: var(--new-text-3);
      font-size: 13px;
      line-height: 22px; }
  .authSettingpage .appList,
  .authSettingpage .tokenList {
    display: grid;
    gap: 12px; }
  .authSettingpage .appCard,
  .authSettingpage .tokenCard {
    padding: 16px;
    border: 1px solid var(--new-grey-4);
    border-radius: 8px;
    background: var(--new-grey-2); }
  .authSettingpage .appTop,
  .authSettingpage .tokenMain {
    justify-content: space-between;
    gap: 16px; }
  .authSettingpage .appIcon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid var(--new-grey-4);
    border-radius: 12px;
    background: var(--new-grey-3);
    color: var(--new-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-weight: 700; }
    .authSettingpage .appIcon img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .authSettingpage .appInfo {
    flex: 1;
    min-width: 0; }
    .authSettingpage .appInfo p {
      margin: 4px 0 0;
      color: var(--new-text-3);
      font-size: 12px;
      line-height: 18px;
      word-break: break-all; }
  .authSettingpage .titleLine {
    gap: 8px;
    flex-wrap: wrap; }
    .authSettingpage .titleLine h3 {
      margin: 0;
      color: var(--new-text-1);
      font-size: 16px;
      line-height: 24px;
      font-weight: 700;
      letter-spacing: 0; }
    .authSettingpage .titleLine em {
      height: 22px;
      padding: 0 7px;
      border-radius: 4px;
      background: var(--new-grey-4);
      color: var(--new-text-3);
      display: inline-flex;
      align-items: center;
      font-size: 12px;
      font-style: normal; }
  .authSettingpage .appActions button,
  .authSettingpage .tokenActions button {
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--new-grey-4);
    border-radius: 6px;
    background: transparent;
    color: var(--new-text-3);
    font-size: 13px;
    cursor: pointer; }
    .authSettingpage .appActions button:disabled,
    .authSettingpage .tokenActions button:disabled {
      cursor: not-allowed;
      opacity: 0.5; }
  .authSettingpage .metaGrid {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 14px; }
    .authSettingpage .metaGrid div {
      flex: 1;
      min-width: 0;
      padding: 10px 12px;
      border-radius: 7px;
      background: var(--new-grey-3); }
    .authSettingpage .metaGrid span {
      display: block;
      margin-bottom: 3px;
      color: var(--new-text-3);
      font-size: 12px;
      line-height: 18px; }
    .authSettingpage .metaGrid strong {
      color: var(--new-text-2);
      font-size: 13px;
      line-height: 20px;
      font-weight: 600; }
  .authSettingpage .scopes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px; }
    .authSettingpage .scopes span {
      min-height: 26px;
      padding: 4px 9px;
      border-radius: 5px;
      background: var(--new-grey-4);
      color: var(--new-text-3);
      font-size: 12px;
      line-height: 18px; }
  .authSettingpage .warningScope {
    color: var(--new-text-2) !important; }
  .authSettingpage .tokenMain {
    align-items: flex-start; }
    .authSettingpage .tokenMain p,
    .authSettingpage .tokenMain span {
      display: block;
      margin: 4px 0 0;
      color: var(--new-text-3);
      font-size: 12px;
      line-height: 18px; }
    .authSettingpage .tokenMain code {
      display: inline-block;
      margin-top: 8px;
      padding: 4px 8px;
      border-radius: 5px;
      background: var(--new-grey-3);
      color: var(--new-text-2);
      font-size: 12px;
      line-height: 18px;
      word-break: break-all; }
  .authSettingpage .closed {
    opacity: 0.66; }
  .authSettingpage .tokenActions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end; }
  .authSettingpage .appActions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end; }
  @media (max-width: 720px) {
    .authSettingpage {
      padding: 48px 12px 32px; }
      .authSettingpage .pageHeader,
      .authSettingpage .sectionHeader,
      .authSettingpage .appTop,
      .authSettingpage .tokenMain {
        display: block; }
      .authSettingpage .pageHeader button,
      .authSettingpage .headerActions,
      .authSettingpage .appActions,
      .authSettingpage .tokenActions {
        margin-top: 12px; }
      .authSettingpage .headerActions {
        display: grid;
        grid-template-columns: 1fr 1fr; }
      .authSettingpage .metaGrid {
        flex-direction: column; } }

.tokenModal .ant-modal-content,
.tokenModal .ant-modal-header {
  background: var(--new-grey-3);
  border-color: var(--new-grey-4); }

.tokenModal .ant-modal-title,
.tokenModal .ant-modal-close {
  color: var(--new-text-1); }

.tokenModal .ant-modal-body,
.tokenModal .ant-table,
.tokenModal .ant-table-thead > tr > th,
.tokenModal .ant-table-tbody > tr > td {
  background: var(--new-grey-3);
  color: var(--new-text-2);
  border-color: var(--new-grey-4); }

.tokenModal .ant-table-tbody > tr:hover > td,
.tokenModal .ant-table-tbody > tr.ant-table-row-hover > td {
  background: var(--new-grey-3) !important; }

.tokenModal .ant-btn-link {
  color: var(--new-text-3); }

.tokenModal .modalBody label {
  display: block;
  margin: 14px 0 8px;
  color: var(--new-text-2);
  font-size: 13px;
  line-height: 20px; }

.tokenModal .modalBody input,
.tokenModal .modalBody select,
.tokenModal .modalBody textarea {
  width: 100%;
  border: 1px solid var(--new-grey-4);
  border-radius: 7px;
  background: var(--new-grey-2);
  color: var(--new-text-1); }

.tokenModal .modalBody select {
  height: 36px;
  padding: 0 10px; }

.tokenModal .inlineAlert {
  margin-bottom: 12px; }

.tokenModal .modalHint,
.tokenModal .warnText {
  margin: 0;
  color: var(--new-text-3);
  font-size: 13px;
  line-height: 22px; }

.tokenModal .warnText {
  color: var(--new-text-2); }

.tokenModal .copyPreview {
  height: 180px;
  padding: 10px;
  resize: vertical; }

.tokenModal .plainKey {
  display: block;
  padding: 10px;
  border-radius: 7px;
  background: var(--new-grey-2);
  color: var(--new-text-1);
  word-break: break-all; }

.tokenModal .modalFooter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px; }
  .tokenModal .modalFooter button {
    height: 34px;
    padding: 0 14px;
    border-radius: 7px;
    border: 1px solid var(--new-grey-4);
    background: transparent;
    color: var(--new-text-3);
    cursor: pointer; }
    .tokenModal .modalFooter button:last-child {
      border-color: var(--new-grey-7);
      background: var(--new-grey-7);
      color: var(--new-grey-1);
      font-weight: 600; }

.tokenModal .detailBody .detailSummary {
  padding: 12px;
  border: 1px solid var(--new-grey-4);
  border-radius: 8px;
  background: var(--new-grey-2); }
  .tokenModal .detailBody .detailSummary p {
    margin: 0;
    color: var(--new-text-2);
    font-size: 13px;
    line-height: 24px; }
  .tokenModal .detailBody .detailSummary span {
    display: inline-block;
    min-width: 70px;
    color: var(--new-text-3); }
  .tokenModal .detailBody .detailSummary code {
    color: var(--new-text-1);
    word-break: break-all; }

.qtdHistoryDetail {
  width: 100%;
  height: 100%;
  max-width: 1600px;
  border-radius: 16px;
  background: var(--new-grey-2);
  padding: 24px;
  display: flex;
  gap: 16px;
  flex-direction: column; }
  .qtdHistoryDetail .qtd-history-new-wrap {
    display: flex;
    width: 100%;
    flex: 1;
    min-height: 0;
    gap: 24px;
    position: relative;
    overflow: visible; }
    .qtdHistoryDetail .qtd-history-new-wrap .qtd-ai-card-b {
      display: block;
      margin-bottom: 0; }
  .qtdHistoryDetail .qtd-history-detail-left-box {
    display: flex;
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 20;
    width: max-content;
    gap: 8px;
    flex-direction: column;
    min-height: 0; }
    .qtdHistoryDetail .qtd-history-detail-left-box .card-hover-tool-box-warp {
      z-index: 3; }
    .qtdHistoryDetail .qtd-history-detail-left-box.show-both .pic-list-box {
      max-height: 50%; }
    .qtdHistoryDetail .qtd-history-detail-left-box .pic-list-box {
      flex-shrink: 0;
      border-radius: 13px; }
    .qtdHistoryDetail .qtd-history-detail-left-box .history-detail-pic-swiper-box {
      position: relative; }
    .qtdHistoryDetail .qtd-history-detail-left-box .history-detail-pic-swiper {
      width: 100%;
      max-width: 400px;
      padding: 4px; }
      .qtdHistoryDetail .qtd-history-detail-left-box .history-detail-pic-swiper .swiper-slide {
        width: auto; }
    .qtdHistoryDetail .qtd-history-detail-left-box .history-detail-pic-swiper-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: var(--qtd-ai-drak-func-color-1);
      border-radius: 50%;
      transition: all 0.3s var(--qtd-transition-cubic-1);
      width: 32px;
      height: 32px;
      color: var(--qtd-ai-text-color-2);
      border: 1px solid var(--qtd-ai-drak-func-color-4);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      cursor: pointer; }
      .qtdHistoryDetail .qtd-history-detail-left-box .history-detail-pic-swiper-btn:hover {
        border-color: var(--qtd-ai-text-color-hover-1);
        color: var(--qtd-ai-text-color-hover-1); }
      .qtdHistoryDetail .qtd-history-detail-left-box .history-detail-pic-swiper-btn::after {
        display: none; }
      .qtdHistoryDetail .qtd-history-detail-left-box .history-detail-pic-swiper-btn i {
        font-size: 14px; }
      .qtdHistoryDetail .qtd-history-detail-left-box .history-detail-pic-swiper-btn.swiper-button-disabled {
        display: none; }
      .qtdHistoryDetail .qtd-history-detail-left-box .history-detail-pic-swiper-btn.swiper-button-prev {
        left: -16px; }
        .qtdHistoryDetail .qtd-history-detail-left-box .history-detail-pic-swiper-btn.swiper-button-prev i {
          transform: rotate(180deg); }
      .qtdHistoryDetail .qtd-history-detail-left-box .history-detail-pic-swiper-btn.swiper-button-next {
        right: -16px; }
    .qtdHistoryDetail .qtd-history-detail-left-box .pic-list-box-title {
      color: var(--new-text-3);
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-weight: 500;
      margin-bottom: 4px;
      line-height: 20px;
      margin-bottom: 4px;
      white-space: nowrap; }
    .qtdHistoryDetail .qtd-history-detail-left-box .pic-list {
      display: flex;
      gap: 8px;
      min-height: 0; }
      .qtdHistoryDetail .qtd-history-detail-left-box .pic-list .pic-item {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        border: 1px solid var(--new-grey-4);
        outline: 3px solid transparent;
        transition: all 0.3s ease-in-out; }
        .qtdHistoryDetail .qtd-history-detail-left-box .pic-list .pic-item.active, .qtdHistoryDetail .qtd-history-detail-left-box .pic-list .pic-item:hover {
          border: 1px solid var(--new-grey-5);
          outline: 3px solid var(--new-grey-4); }
        .qtdHistoryDetail .qtd-history-detail-left-box .pic-list .pic-item img {
          width: 100%;
          height: 100%;
          object-fit: cover; }
  .qtdHistoryDetail .qtd-history-detail-center-box {
    height: 100%;
    width: calc(50% - 12px);
    min-width: 0;
    min-height: 0;
    display: flex;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid var(--new-grey-4);
    gap: 12px;
    flex-direction: column;
    position: relative; }
    .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top {
      width: 100%;
      height: max-content;
      gap: 8px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      margin-top: 12px; }
      .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-detail-left-box-top {
        display: flex;
        width: 100%;
        flex-shrink: 0; }
        .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-detail-left-box-top .share-btn {
          border: unset;
          color: var(--new-text-3);
          font-size: 12px; }
          .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-detail-left-box-top .share-btn:hover {
            color: var(--new-text-1); }
        .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-detail-left-box-top .btn-box-right {
          flex: 1;
          height: 24px;
          min-width: 0;
          display: flex;
          align-items: center;
          gap: 8px; }
          .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-detail-left-box-top .btn-box-right .img-title {
            min-width: 0;
            font-size: 16px;
            line-height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical; }
        .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-detail-left-box-top .btn-box-right .qtd-ai-line-button {
          font-weight: 600;
          flex-shrink: 0;
          border-color: var(--qtd-ai-drak-func-color-4); }
          .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-detail-left-box-top .btn-box-right .qtd-ai-line-button:hover {
            color: var(--qtd-ai-text-color-hover-1);
            border-color: var(--qtd-ai-text-color-hover-1); }
        .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-detail-left-box-top .btn-box-right .qtd-ai-button {
          min-width: max-content; }
        .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-detail-left-box-top .img-promote-box {
          display: none;
          align-items: center;
          gap: 4px; }
          .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-detail-left-box-top .img-promote-box .icon {
            font-size: 16px;
            cursor: pointer;
            color: var(--qtd-ai-text-color-2); }
            .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-detail-left-box-top .img-promote-box .icon:hover {
              color: var(--qtd-ai-text-color-hover-1); }
        .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-detail-left-box-top .img-promote {
          font-size: 14px;
          line-height: 22px;
          color: var(--qtd-ai-text-color-2);
          font-weight: 400;
          height: 22px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical; }
          .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-detail-left-box-top .img-promote.show-all {
            height: auto;
            -webkit-line-clamp: unset; }
      .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .breadcrumb {
        color: var(--new-text-3);
        font-size: 14px;
        line-height: 22px;
        font-weight: 400; }
      .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-info-box {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        max-height: 24px;
        overflow: hidden; }
        .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-info-box .user-box {
          display: flex;
          align-items: center;
          gap: 4px;
          flex-shrink: 0;
          height: 24px;
          align-self: stretch; }
          .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-info-box .user-box > a {
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
            flex-wrap: nowrap; }
          .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-info-box .user-box img {
            width: 20px;
            height: 20px;
            border-radius: 50%; }
          .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-info-box .user-box div {
            display: flex;
            flex-direction: column; }
            .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-info-box .user-box div p {
              color: var(--new-text-3);
              font-size: 14px;
              font-weight: 600;
              line-height: 22px; }
            .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-info-box .user-box div span {
              color: var(--new-text-3);
              font-size: 14px;
              line-height: 22px; }
          .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-info-box .user-box .qtd-ai-line-button {
            height: 24px;
            font-weight: 600;
            border: 1px solid var(--new-grey-4);
            color: var(--new-text-2); }
            .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-info-box .user-box .qtd-ai-line-button:hover {
              color: var(--new-text-1);
              border-color: var(--new-text-1); }
        .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-info-box .info-item {
          display: flex;
          padding: 2px 8px;
          flex-shrink: 0;
          justify-content: center;
          align-items: center;
          height: 24px;
          gap: 2px;
          color: var(--new-text-3);
          border-radius: 888px;
          border: 1px solid var(--new-bg-3); }
          .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-info-box .info-item span {
            font-size: 12px;
            line-height: 20px; }
          .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-info-box .info-item img {
            max-width: 16px;
            max-height: 16px;
            border-radius: 2px; }
          .qtdHistoryDetail .qtd-history-detail-center-box .qtd-history-new-wrap-top .qtd-history-info-box .info-item i {
            font-size: 12px;
            line-height: 20px;
            margin-right: 2px; }
  .qtdHistoryDetail .qtd-history-detail-left {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 400px;
    max-height: calc(100vh - 240px);
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    background: var(--new-grey-2);
    border-radius: 18px;
    overflow: hidden; }
    .qtdHistoryDetail .qtd-history-detail-left .card-hover-tool-box-warp {
      height: calc(100% - 120px); }
    .qtdHistoryDetail .qtd-history-detail-left .card-hover-tool-box-warp {
      z-index: 3; }
    .qtdHistoryDetail .qtd-history-detail-left .img-box-loading-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
    .qtdHistoryDetail .qtd-history-detail-left.full .img-box {
      width: 100%;
      height: 100%;
      overflow: auto;
      position: unset;
      display: block; }
      .qtdHistoryDetail .qtd-history-detail-left.full .img-box img {
        width: 100%;
        height: auto;
        max-height: unset;
        object-fit: unset; }
    .qtdHistoryDetail .qtd-history-detail-left .img-box {
      position: relative;
      z-index: 2;
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center; }
      .qtdHistoryDetail .qtd-history-detail-left .img-box img {
        max-width: 100%;
        max-height: calc(100vh - 240px);
        object-fit: contain;
        background-image: url(//icon.qiantucdn.com/static/images/brandTool/img_bg_3.png);
        background-size: 24px;
        cursor: url(http://icon.qiantucdn.com/static/images/showV4/look-big-icon.png) 16 16, auto; }
      .qtdHistoryDetail .qtd-history-detail-left .img-box video {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; }
      .qtdHistoryDetail .qtd-history-detail-left .img-box .img-info-box, .qtdHistoryDetail .qtd-history-detail-left .img-box .img-mode-box {
        display: flex;
        height: 32px;
        padding: 4px 8px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        position: absolute;
        right: 8px;
        top: 8px;
        border-radius: 8px;
        background: rgba(17, 17, 17, 0.58);
        color: var(--new-text-6);
        font-size: 14px;
        line-height: 22px; }
        .qtdHistoryDetail .qtd-history-detail-left .img-box .img-info-box.img-mode-box, .qtdHistoryDetail .qtd-history-detail-left .img-box .img-mode-box.img-mode-box {
          top: unset;
          bottom: 8px;
          cursor: pointer; }
          .qtdHistoryDetail .qtd-history-detail-left .img-box .img-info-box.img-mode-box:hover, .qtdHistoryDetail .qtd-history-detail-left .img-box .img-mode-box.img-mode-box:hover {
            color: #cf0; }
    .qtdHistoryDetail .qtd-history-detail-left .qtd-ai-button {
      position: absolute;
      top: 16px;
      right: 16px; }
  .qtdHistoryDetail .create-time-wrap {
    display: flex;
    width: 100%;
    flex-direction: column; }
    .qtdHistoryDetail .create-time-wrap .tool-box {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      z-index: 1000;
      margin-bottom: 12px; }
      .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-left {
        flex-wrap: wrap;
        height: 40px;
        overflow: hidden; }
      .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-left, .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-right {
        display: flex;
        align-items: center;
        gap: 8px; }
        .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-left .new-dot, .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-right .new-dot {
          width: 8px;
          height: 8px;
          background: #FA5555;
          border-radius: 50%;
          margin-top: -12px;
          margin-left: -6px; }
        .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-left .qtd-ai-line-button, .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-right .qtd-ai-line-button {
          height: 40px;
          font-weight: 600;
          background: var(--new-grey-3);
          border: none;
          color: var(--new-text-1); }
          .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-left .qtd-ai-line-button .icon, .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-right .qtd-ai-line-button .icon {
            color: var(--new-text-3); }
          .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-left .qtd-ai-line-button:hover, .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-right .qtd-ai-line-button:hover {
            background: var(--new-grey-4);
            color: var(--new-text-1); }
      .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-right {
        gap: 4px; }
        .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-right .left-btn {
          border-radius: 32px 0 0 32px;
          padding: 5px 12px; }
        .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-right .more-btn {
          position: relative;
          border-radius: 0 32px 32px 0;
          padding: 5px 12px;
          z-index: 22; }
          .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-right .more-btn .icon {
            transition: all 0.3s ease-in-out; }
          .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-right .more-btn:hover > .icon {
            transform: rotate(180deg); }
          .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-right .more-btn:hover .more-box {
            display: flex; }
        .qtdHistoryDetail .create-time-wrap .tool-box .tool-box-right .more-box {
          position: absolute;
          width: max-content;
          top: 32px;
          display: none;
          right: 0;
          flex-direction: column;
          gap: 8px;
          background: var(--qtd-ai-drak-func-color-1);
          padding: 16px;
          border-radius: 16px;
          box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1); }
      .qtdHistoryDetail .create-time-wrap .tool-box .qtd-ai-line-button {
        flex-shrink: 0;
        font-weight: 600;
        border-color: var(--qtd-ai-drak-func-color-4); }
        .qtdHistoryDetail .create-time-wrap .tool-box .qtd-ai-line-button:hover {
          color: var(--qtd-ai-text-color-hover-1);
          border-color: var(--qtd-ai-text-color-hover-1); }
    .qtdHistoryDetail .create-time-wrap .download-box {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
      width: 100%; }
      .qtdHistoryDetail .create-time-wrap .download-box .qtd-ai-line-button {
        flex-shrink: 0;
        height: 64px;
        border-radius: 32px;
        border-color: #D8FF00;
        color: #D8FF00;
        background: #333;
        font-size: 18px;
        font-weight: 600; }
        .qtdHistoryDetail .create-time-wrap .download-box .qtd-ai-line-button .icon {
          font-size: 18px; }
        .qtdHistoryDetail .create-time-wrap .download-box .qtd-ai-line-button:hover {
          color: #333;
          border-color: #D8FF00;
          background: #D8FF00; }
        .qtdHistoryDetail .create-time-wrap .download-box .qtd-ai-line-button.fav-btn:hover {
          border-color: #D8FF00; }
          .qtdHistoryDetail .create-time-wrap .download-box .qtd-ai-line-button.fav-btn:hover .icon-Heart {
            color: #333; }
        .qtdHistoryDetail .create-time-wrap .download-box .qtd-ai-line-button.fav-btn .icon-Heart {
          color: #FA5555; }
      .qtdHistoryDetail .create-time-wrap .download-box .qtd-ai-button {
        height: 64px;
        flex: 1;
        font-weight: 600;
        font-size: 18px;
        border-radius: 32px;
        min-width: max-content; }
        .qtdHistoryDetail .create-time-wrap .download-box .qtd-ai-button .icon {
          font-size: 18px; }
  .qtdHistoryDetail .img-title {
    color: var(--new-text-1);
    font-size: 16px;
    line-height: 24px;
    font-weight: normal;
    max-width: 100%;
    overflow: hidden;
    margin-bottom: 0;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; }
  .qtdHistoryDetail .qtd-history-detail-right {
    height: 100%;
    width: calc(50% - 12px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    position: relative;
    z-index: 200;
    align-self: stretch;
    border-radius: 16px;
    padding: 13px 2px; }
    .qtdHistoryDetail .qtd-history-detail-right .create-time {
      height: 22px;
      color: var(--qtd-ai-text-color-3);
      font-size: 14px;
      font-weight: 400;
      font-family: "douyinFont"; }
      .qtdHistoryDetail .qtd-history-detail-right .create-time a {
        color: var(--qtd-ai-text-color-3); }
      .qtdHistoryDetail .qtd-history-detail-right .create-time .ant-image {
        margin-left: 4px; }
    .qtdHistoryDetail .qtd-history-detail-right .line {
      width: 100%;
      height: 1px;
      background: rgba(255, 255, 255, 0.1); }
    .qtdHistoryDetail .qtd-history-detail-right .ai-edit-box-label {
      color: var(--qtd-ai-text-color-3);
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      margin-bottom: 8px;
      margin-top: 40px; }
    .qtdHistoryDetail .qtd-history-detail-right .info-item {
      width: 100%;
      display: flex;
      justify-content: space-between; }
    .qtdHistoryDetail .qtd-history-detail-right .comment-container {
      position: relative;
      width: 100%;
      height: auto;
      margin-top: 24px; }
      .qtdHistoryDetail .qtd-history-detail-right .comment-container .type-box {
        display: flex;
        align-items: center;
        gap: 16px; }
        .qtdHistoryDetail .qtd-history-detail-right .comment-container .type-box .comment-title {
          position: relative;
          width: 100%;
          line-height: 24px;
          cursor: pointer;
          color: var(--qtd-ai-text-color-3);
          font-size: 16px;
          font-weight: 600;
          width: max-content; }
          .qtdHistoryDetail .qtd-history-detail-right .comment-container .type-box .comment-title.active {
            color: var(--qtd-ai-text-color-1); }
      .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-input-box {
        position: sticky;
        top: -24px;
        z-index: 1;
        width: 100%;
        min-height: 40px;
        height: auto;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        background: var(--new-grey-2);
        padding-top: 16px;
        padding-bottom: 16px; }
        .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-input-box .user-face {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          overflow: hidden; }
          .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-input-box .user-face img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover; }
        .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-input-box .text-area-box {
          flex: 1;
          min-height: 40px;
          height: auto;
          border: 1px solid var(--new-bg-3);
          border-radius: 20px;
          padding: 3px 16px;
          padding-right: 8px; }
          .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-input-box .text-area-box > div {
            display: flex;
            align-items: center;
            width: 100%; }
            .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-input-box .text-area-box > div .reply-name {
              min-width: max-content;
              color: var(--qtd-ai-text-color-hover-1);
              font-size: 14px;
              font-weight: 400;
              margin-right: 4px; }
            .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-input-box .text-area-box > div .ant-input {
              border: none;
              color: var(--qtd-ai-text-color-1);
              border-radius: 0;
              padding: 4px 0; }
            .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-input-box .text-area-box > div .comment-upload-img {
              width: 32px;
              height: 32px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 4px;
              color: var(--qtd-ai-text-color-2);
              cursor: pointer;
              transition: all 0.3s ease-in-out; }
              .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-input-box .text-area-box > div .comment-upload-img:hover {
                color: var(--qtd-ai-text-color-1); }
              .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-input-box .text-area-box > div .comment-upload-img i {
                font-size: 16px; }
          .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-input-box .text-area-box .comment-image-list {
            gap: 4px; }
            .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-input-box .text-area-box .comment-image-list .comment-image-list-item {
              position: relative;
              width: 60px;
              height: 60px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 8px;
              overflow: hidden;
              background: var(--qtd-ai-drak-func-color-4); }
              .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-input-box .text-area-box .comment-image-list .comment-image-list-item img {
                width: 100%;
                height: 100%;
                object-fit: contain; }
              .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-input-box .text-area-box .comment-image-list .comment-image-list-item .comment-image-list-item-delete {
                position: absolute;
                right: 0;
                top: 0;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(0, 0, 0, 0.5);
                border-radius: 8px;
                cursor: pointer;
                opacity: 0;
                transition: all 0.3s ease-in-out; }
                .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-input-box .text-area-box .comment-image-list .comment-image-list-item .comment-image-list-item-delete i {
                  font-size: 16px;
                  color: #fff; }
              .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-input-box .text-area-box .comment-image-list .comment-image-list-item:hover .comment-image-list-item-delete {
                opacity: 1; }
      .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box {
        position: relative;
        width: 100%;
        min-height: 40px;
        height: auto;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 24px; }
        .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .user-face {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 46px;
          border-radius: 50%;
          overflow: hidden;
          cursor: pointer; }
          .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .user-face img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover; }
        .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box {
          flex: 1;
          min-height: 40px;
          height: auto;
          display: flex;
          flex-direction: column; }
          .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-box-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 24px; }
            .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-box-top .left {
              display: flex;
              align-items: center;
              gap: 4px;
              height: 22px;
              font-size: 14px;
              color: var(--qtd-ai-text-color-1);
              font-weight: 600; }
              .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-box-top .left .is-author {
                display: flex;
                align-items: center;
                justify-content: center;
                width: max-content;
                padding: 0 8px;
                height: 20px;
                background-color: var(--qtd-ai-drak-color-6);
                color: #fff;
                font-size: 12px;
                border-radius: 6px; }
            .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-box-top .right {
              display: flex;
              align-items: center;
              gap: 8px; }
              .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-box-top .right .delete {
                color: var(--qtd-ai-text-color-2);
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
                cursor: pointer; }
                .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-box-top .right .delete:hover {
                  color: var(--qtd-ai-text-color-1); }
              .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-box-top .right .like-box {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 24px;
                height: 24px;
                cursor: pointer;
                transition: all 0.3s ease-in-out; }
                .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-box-top .right .like-box i {
                  font-size: 16px; }
                  .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-box-top .right .like-box i.icon-Heart {
                    color: var(--qtd-ai-text-color-hover-1); }
                  .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-box-top .right .like-box i.icon-dianzan2 {
                    font-size: 14px;
                    color: var(--qtd-ai-text-color-1); }
                    .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-box-top .right .like-box i.icon-dianzan2:hover {
                      color: var(--qtd-ai-text-color-hover-1); }
          .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-text p {
            font-size: 14px;
            color: var(--qtd-ai-text-color-1); }
            .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-text p .reply-text {
              color: var(--qtd-ai-text-color-hover-1);
              font-size: 14px;
              margin-right: 4px; }
            .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-text p .time {
              color: var(--qtd-ai-text-color-3);
              font-size: 12px;
              line-height: 20px;
              margin: 0 4px; }
            .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-text p .answer-btn {
              color: var(--qtd-ai-text-color-2);
              font-size: 12px;
              line-height: 20px;
              cursor: pointer;
              transition: all 0.3s ease-in-out; }
              .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-text p .answer-btn:hover {
                color: var(--qtd-ai-text-color-1); }
          .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-img {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            width: 100%;
            margin-top: 8px; }
            .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-img .comment-content-img-item {
              position: relative;
              width: 100px;
              height: 100px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 8px;
              overflow: hidden;
              background: var(--qtd-ai-drak-func-color-4); }
              .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box .comment-content-box .comment-content-img .comment-content-img-item img {
                width: 100%;
                height: 100%;
                object-fit: contain; }
        .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box.reply-box {
          margin-top: 16px;
          margin-bottom: 0; }
          .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box.reply-box .user-face {
            width: 32px; }
            .qtdHistoryDetail .qtd-history-detail-right .comment-container .comment-item-box.reply-box .user-face img {
              width: 32px;
              height: 32px; }
    .qtdHistoryDetail .qtd-history-detail-right .qtd-history-nav-container {
      display: none !important; }
    .qtdHistoryDetail .qtd-history-detail-right .huitu-new-wrap {
      width: 100%;
      z-index: 200; }
    .qtdHistoryDetail .qtd-history-detail-right .qtdCreateTaskBox {
      position: relative;
      min-width: 100%;
      transform: unset;
      top: unset;
      left: unset;
      right: unset;
      bottom: unset; }
      .qtdHistoryDetail .qtd-history-detail-right .qtdCreateTaskBox .free-tip-box {
        justify-content: flex-start; }
      .qtdHistoryDetail .qtd-history-detail-right .qtdCreateTaskBox .ai-search-icon-new-bg {
        display: block;
        border-radius: 33px; }
        .qtdHistoryDetail .qtd-history-detail-right .qtdCreateTaskBox .ai-search-icon-new-bg::after {
          border-radius: 33px; }
      .qtdHistoryDetail .qtd-history-detail-right .qtdCreateTaskBox .create-task-main {
        border-radius: 32px;
        outline: unset;
        border: unset;
        box-shadow: unset; }
        .qtdHistoryDetail .qtd-history-detail-right .qtdCreateTaskBox .create-task-main .bottom-box-wrap .create-submit-box {
          height: 40px; }
          .qtdHistoryDetail .qtd-history-detail-right .qtdCreateTaskBox .create-task-main .bottom-box-wrap .create-submit-box em {
            position: absolute;
            right: -4px;
            top: -10px;
            margin-left: 0;
            border-radius: 12px; }
        .qtdHistoryDetail .qtd-history-detail-right .qtdCreateTaskBox .create-task-main .bottom-box-wrap .create-textarea-box .randown-box {
          display: none; }
        .qtdHistoryDetail .qtd-history-detail-right .qtdCreateTaskBox .create-task-main .bottom-box-wrap .create-textarea-box .placeholder-box {
          left: 8px; }
        .qtdHistoryDetail .qtd-history-detail-right .qtdCreateTaskBox .create-task-main .bottom-box-wrap .textarea-box-bottom {
          position: relative; }
          .qtdHistoryDetail .qtd-history-detail-right .qtdCreateTaskBox .create-task-main .bottom-box-wrap .textarea-box-bottom .qtd-model-list-container-wrap {
            position: unset; }
        .qtdHistoryDetail .qtd-history-detail-right .qtdCreateTaskBox .create-task-main .bottom-box-wrap .qtd-model-list-container-wrap .model-list-box .model-list-row {
          right: 0;
          top: 32px;
          left: unset;
          bottom: unset; }
      .qtdHistoryDetail .qtd-history-detail-right .qtdCreateTaskBox .rules {
        display: none; }
      .qtdHistoryDetail .qtd-history-detail-right .qtdCreateTaskBox .free-tip-box::after {
        border-radius: 0 0 32px 32px !important; }
  .qtdHistoryDetail .qtd-ai-button, .qtdHistoryDetail .qtd-ai-line-button {
    display: flex;
    padding: 5px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    color: #333;
    font-weight: 600;
    border-radius: 26px;
    cursor: pointer; }
    .qtdHistoryDetail .qtd-ai-button .icon, .qtdHistoryDetail .qtd-ai-line-button .icon {
      font-weight: 400; }
    .qtdHistoryDetail .qtd-ai-button.qtd-ai-line-button, .qtdHistoryDetail .qtd-ai-line-button.qtd-ai-line-button {
      color: var(--new-text-1); }
  .qtdHistoryDetail .qtd-tool-box {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-radius: 16px;
    z-index: 20;
    margin-bottom: 12px; }
    .qtdHistoryDetail .qtd-tool-box .is-download {
      overflow: hidden;
      position: relative;
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); }
      .qtdHistoryDetail .qtd-tool-box .is-download .ant-spin {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.3);
        opacity: 1;
        z-index: 0;
        pointer-events: none; }
    .qtdHistoryDetail .qtd-tool-box .tool-box .qtd-ai-button:hover {
      opacity: 0.8; }
    .qtdHistoryDetail .qtd-tool-box .fav-box, .qtdHistoryDetail .qtd-tool-box .tool-box {
      display: flex;
      align-items: center;
      position: relative; }
      .qtdHistoryDetail .qtd-tool-box .fav-box .qtd-ai-line-button, .qtdHistoryDetail .qtd-tool-box .tool-box .qtd-ai-line-button {
        height: 40px;
        font-weight: 600;
        border: none;
        background: transparent;
        font-size: 14px; }
        .qtdHistoryDetail .qtd-tool-box .fav-box .qtd-ai-line-button.fav-btn, .qtdHistoryDetail .qtd-tool-box .tool-box .qtd-ai-line-button.fav-btn {
          position: relative; }
          .qtdHistoryDetail .qtd-tool-box .fav-box .qtd-ai-line-button.fav-btn .icon, .qtdHistoryDetail .qtd-tool-box .tool-box .qtd-ai-line-button.fav-btn .icon {
            font-size: 20px; }
          .qtdHistoryDetail .qtd-tool-box .fav-box .qtd-ai-line-button.fav-btn .icon-Heart, .qtdHistoryDetail .qtd-tool-box .tool-box .qtd-ai-line-button.fav-btn .icon-Heart {
            color: #FA5555; }
        .qtdHistoryDetail .qtd-tool-box .fav-box .qtd-ai-line-button:hover, .qtdHistoryDetail .qtd-tool-box .fav-box .qtd-ai-line-button.isOpen, .qtdHistoryDetail .qtd-tool-box .tool-box .qtd-ai-line-button:hover, .qtdHistoryDetail .qtd-tool-box .tool-box .qtd-ai-line-button.isOpen {
          border: none;
          background: var(--new-bg-3); }
    .qtdHistoryDetail .qtd-tool-box .lastFavLabelWrap {
      position: absolute;
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer; }
  .qtdHistoryDetail .qtd-admin-box {
    height: 48px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    border-radius: 16px;
    z-index: 20;
    position: absolute;
    top: 48px;
    left: 0;
    gap: 8px;
    padding: 12px; }
    .qtdHistoryDetail .qtd-admin-box .qtd-ai-button {
      height: 32px;
      padding: 0 4px;
      background: var(--new-grey-3);
      color: var(--new-text-1); }

@media screen and (max-width: 1100px) {
  .qtdHistoryDetail .qtd-tool-box {
    flex-direction: column;
    height: auto; }
  .CopyrightBox .CopyrightBoxLeft {
    display: none; } }

.historyDetailModal {
  width: 100%;
  height: 100%;
  background: var(--new-grey-4);
  z-index: 2000;
  padding: 24px 120px;
  display: flex;
  justify-content: center;
  align-items: center; }
  .historyDetailModal .history-detail-modal-close-btn {
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 41px;
    background: var(--new-grey-2);
    color: var(--new-text-2);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    position: absolute;
    right: 0;
    top: -38px;
    cursor: pointer;
    transition: all 0.3s ease-in-out; }
    .historyDetailModal .history-detail-modal-close-btn:hover {
      color: var(--new-text-2);
      opacity: 0.8; }
  .historyDetailModal .ant-modal {
    display: flex;
    width: 100% !important;
    height: 100%;
    top: 0;
    align-items: center;
    justify-content: center; }
    .historyDetailModal .ant-modal .ant-modal-content {
      width: 100%;
      height: 90%;
      max-height: 1000px;
      max-width: 1600px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent; }
      .historyDetailModal .ant-modal .ant-modal-content .ant-modal-close {
        right: -36px;
        display: none;
        top: 0; }
      .historyDetailModal .ant-modal .ant-modal-content .ant-modal-close-x {
        width: 32px;
        height: 32px;
        line-height: 30px;
        color: #FFF;
        border-radius: 50%;
        border: 1px solid var(--new-grey-4); }
        .historyDetailModal .ant-modal .ant-modal-content .ant-modal-close-x:hover {
          color: var(--new-text-1);
          border-color: var(--new-text-1); }
      .historyDetailModal .ant-modal .ant-modal-content .ant-modal-body {
        width: 100%;
        height: 100%;
        display: flex;
        padding: 0;
        align-items: center;
        justify-content: center;
        background: transparent; }

.share-page {
  background: var(--new-grey-1);
  padding-top: 96px;
  height: 100%;
  overflow: auto;
  padding-bottom: 32px; }

.historyDetailModalPage {
  width: 100%;
  margin: 0 auto;
  background: var(--new-grey-1);
  z-index: 2000;
  padding: 0 120px;
  display: flex;
  max-width: 1600px;
  justify-content: center;
  align-items: center;
  margin-bottom: 120px; }
  .historyDetailModalPage .qtdHistoryDetail {
    min-height: 0;
    padding-top: 0;
    background: var(--new-grey-1); }
    .historyDetailModalPage .qtdHistoryDetail .history-detail-modal-close-btn {
      display: none; }
    .historyDetailModalPage .qtdHistoryDetail .qtd-history-new-wrap {
      min-height: 0;
      height: 100%; }

.historyDetailModalBigPreview {
  width: 100%;
  margin: 0 auto;
  z-index: 2000;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 32px;
  overflow: unset; }
  .historyDetailModalBigPreview .ant-modal {
    top: 0;
    padding-bottom: 0;
    width: calc(100% - 96px);
    background: var(--new-grey-1);
    height: calc(100% - 48px);
    border-radius: 32px;
    max-width: 1280px; }
  .historyDetailModalBigPreview .ant-modal-content {
    box-shadow: unset;
    width: 100%;
    height: 100%;
    border-radius: 32px; }
    .historyDetailModalBigPreview .ant-modal-content .ant-modal-close-x {
      position: absolute;
      right: -40px;
      top: -18px; }
      .historyDetailModalBigPreview .ant-modal-content .ant-modal-close-x path {
        fill: var(--new-text-6); }
  .historyDetailModalBigPreview .ant-modal-body {
    padding: 0;
    width: 100%;
    height: 100%;
    border-radius: 32px; }
    .historyDetailModalBigPreview .ant-modal-body .qtdHistoryDetail {
      padding: 0;
      width: 100%;
      height: 100%;
      padding: 24px; }
      .historyDetailModalBigPreview .ant-modal-body .qtdHistoryDetail .qtd-history-detail-left .img-box {
        height: 100%;
        max-height: 100%; }
      .historyDetailModalBigPreview .ant-modal-body .qtdHistoryDetail .qtd-admin-box {
        display: none; }
      .historyDetailModalBigPreview .ant-modal-body .qtdHistoryDetail .previewImgTip {
        position: absolute;
        right: 20px;
        bottom: 1px;
        color: var(--new-text-4);
        font-size: 12px;
        font-weight: 400;
        line-height: 22px; }
      .historyDetailModalBigPreview .ant-modal-body .qtdHistoryDetail .qtd-history-detail-left {
        min-height: unset;
        max-height: calc(100vh - 240px);
        border: 1px solid var(--new-grey-4); }
        .historyDetailModalBigPreview .ant-modal-body .qtdHistoryDetail .qtd-history-detail-left.auto .img-box {
          display: flex; }
        .historyDetailModalBigPreview .ant-modal-body .qtdHistoryDetail .qtd-history-detail-left.full.is-video .img-box {
          display: flex !important; }
        .historyDetailModalBigPreview .ant-modal-body .qtdHistoryDetail .qtd-history-detail-left.full .img-box {
          display: block !important; }
        .historyDetailModalBigPreview .ant-modal-body .qtdHistoryDetail .qtd-history-detail-left .img-box img {
          cursor: default; }

@media (max-width: 1700px) {
  .historyDetailModalPage .qtdCreateTaskBox .free-tip-box span .small-hide {
    display: none; } }

@media (max-width: 1100px) {
  .historyDetailModalPage .qtdCreateTaskBox .free-tip-box {
    display: none; } }

@media (max-width: 1200px) {
  .historyDetailModalPage .qtdCreateTaskBox .bottom-box-wrap .create-textarea-model-box .textarea-box-bottom .qtd-model-list-container {
    padding: 0 8px; }
    .historyDetailModalPage .qtdCreateTaskBox .bottom-box-wrap .create-textarea-model-box .textarea-box-bottom .qtd-model-list-container .model-version {
      display: none; } }

@media (max-width: 1800px) {
  .historyDetailModalPage .qtdCreateTaskBox .bottom-box-wrap .create-textarea-model-box .textarea-box-bottom .qtd-model-list-container {
    padding: 0 8px; }
    .historyDetailModalPage .qtdCreateTaskBox .bottom-box-wrap .create-textarea-model-box .textarea-box-bottom .qtd-model-list-container .model-version {
      display: none; }
    .historyDetailModalPage .qtdCreateTaskBox .bottom-box-wrap .create-textarea-model-box .textarea-box-bottom .qtd-model-list-container .model-name {
      display: none; } }

body.qtd-ai-light-mode .historyDetailModal {
  background: rgba(0, 0, 0, 0.85); }

@media screen and (max-width: 960px) {
  .historyDetailModalPage .qtdHistoryDetail .qtd-history-new-wrap {
    flex-direction: column; }
    .historyDetailModalPage .qtdHistoryDetail .qtd-history-new-wrap .qtd-history-detail-center-box {
      width: 100% !important; }
    .historyDetailModalPage .qtdHistoryDetail .qtd-history-new-wrap .qtd-history-detail-right {
      width: 100% !important; } }

.historySamePicContainer {
  width: 100%;
  margin-top: 16px; }
  .historySamePicContainer .history-same-pic-list-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px; }
    .historySamePicContainer .history-same-pic-list-box.col-3 .history-same-pic-list-item-wrap .history-same-pic-list-item-box .history-same-pic-list-item {
      width: calc(33.3333% - 16px); }
    .historySamePicContainer .history-same-pic-list-box.col-2 .history-same-pic-list-item-wrap .history-same-pic-list-item-box .history-same-pic-list-item {
      width: calc(50% - 12px); }
    .historySamePicContainer .history-same-pic-list-box .no-data {
      width: 100%;
      height: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px; }
      .historySamePicContainer .history-same-pic-list-box .no-data img {
        width: 100px;
        height: 100px; }
      .historySamePicContainer .history-same-pic-list-box .no-data span {
        font-size: 14px;
        color: var(--qtd-ai-text-color-3); }
    .historySamePicContainer .history-same-pic-list-box .loading-box {
      width: 100%;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center; }
    .historySamePicContainer .history-same-pic-list-box .history-same-pic-list-item-wrap {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%; }
      .historySamePicContainer .history-same-pic-list-box .history-same-pic-list-item-wrap .history-same-pic-list-item-title {
        color: var(--qtd-ai-text-color-3);
        font-size: 12px;
        font-weight: 600;
        line-height: 20px; }
      .historySamePicContainer .history-same-pic-list-box .history-same-pic-list-item-wrap .history-same-pic-list-item-box {
        width: 100%;
        display: flex;
        gap: 24px; }
        .historySamePicContainer .history-same-pic-list-box .history-same-pic-list-item-wrap .history-same-pic-list-item-box .card-hover-tool-box-warp {
          z-index: 3; }
    .historySamePicContainer .history-same-pic-list-box .history-same-pic-list-item {
      width: calc(50% - 12px);
      width: auto;
      display: flex;
      flex-direction: column;
      gap: 16px; }
      .historySamePicContainer .history-same-pic-list-box .history-same-pic-list-item .qtd-ai-card-b {
        flex-shrink: 0;
        overflow: unset;
        margin-bottom: 0; }
        .historySamePicContainer .history-same-pic-list-box .history-same-pic-list-item .qtd-ai-card-b .img-box {
          width: auto;
          height: auto; }
      .historySamePicContainer .history-same-pic-list-box .history-same-pic-list-item .same-card {
        width: 100%;
        display: flex;
        flex-direction: column;
        cursor: pointer; }
        .historySamePicContainer .history-same-pic-list-box .history-same-pic-list-item .same-card .same-card-img {
          width: 100%;
          height: max-content;
          overflow: hidden;
          border-radius: 16px;
          border: 1px solid var(--qtd-ai-drak-func-color-4); }
          .historySamePicContainer .history-same-pic-list-box .history-same-pic-list-item .same-card .same-card-img img {
            width: 100%;
            border-radius: 16px;
            height: auto;
            object-fit: cover; }
        .historySamePicContainer .history-same-pic-list-box .history-same-pic-list-item .same-card .card-info-box {
          display: flex;
          flex-direction: column;
          padding-top: 4px;
          gap: 4px; }
          .historySamePicContainer .history-same-pic-list-box .history-same-pic-list-item .same-card .card-info-box .user-info {
            display: flex;
            align-items: center;
            gap: 4px; }
            .historySamePicContainer .history-same-pic-list-box .history-same-pic-list-item .same-card .card-info-box .user-info img {
              width: 24px;
              height: 24px;
              border-radius: 50%; }
            .historySamePicContainer .history-same-pic-list-box .history-same-pic-list-item .same-card .card-info-box .user-info span {
              font-size: 14px;
              color: var(--qtd-ai-text-color-3); }
          .historySamePicContainer .history-same-pic-list-box .history-same-pic-list-item .same-card .card-info-box .qtd-ai-line-button {
            border: 1px solid var(--qtd-ai-drak-func-color-4); }
            .historySamePicContainer .history-same-pic-list-box .history-same-pic-list-item .same-card .card-info-box .qtd-ai-line-button:hover {
              border: 1px solid var(--qtd-ai-text-color-hover-1);
              color: #333; }

@charset "UTF-8";
/* 公共头（layout 固定 80px header）背景，随本页打包加载 */
.xhscCoverHeader {
  background: var(--new-grey-1); }

.xcaPage {
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
  max-width: 1080px;
  margin: 0 auto;
  padding: 96px 20px 60px;
  /* 顶部避让固定公共头(80px) */
  color: var(--new-text-1); }

.xcaPageTitle {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--new-text-1); }

.xcaLoadingWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 320px; }

.xcaBlock {
  background: var(--new-grey-1);
  border: 1px solid var(--new-grey-4);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 20px; }

.xcaBlockHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--new-text-1); }

.xcaCatList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; }

.xcaCatItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--new-grey-3);
  border-radius: 8px;
  font-size: 13px;
  color: var(--new-text-2); }
  .xcaCatItem a {
    color: #2b6cff;
    cursor: pointer; }
  .xcaCatItem .xcaDanger {
    color: #ff4d4f; }

.xcaCatName {
  font-weight: 600; }

.xcaCatMeta {
  color: var(--new-text-5); }

.xcaEmpty {
  color: var(--new-text-5);
  font-size: 13px; }

.xcaThumb {
  width: 54px;
  height: 72px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--new-grey-4); }

.xcaDanger {
  color: #ff4d4f !important; }

.xcaFormRow {
  margin-bottom: 14px; }
  .xcaFormRow label {
    display: block;
    font-size: 13px;
    color: var(--new-text-4);
    margin-bottom: 6px; }

.xcaFormRowInline {
  display: flex;
  gap: 20px;
  margin-bottom: 14px; }
  .xcaFormRowInline label {
    display: block;
    font-size: 13px;
    color: var(--new-text-4);
    margin-bottom: 6px; }

@charset "UTF-8";
/* 小红书封面 C 端 · 浅色，使用 @qtd/tokens 设计规范变量（同 qt-design 体系，同 registry） */
/* 公共头背景（layout 固定 80px header）随本页打包 */
.xhscCoverHeader {
  background: var(--surface-app, #fff); }

.xhscPage {
  box-sizing: border-box;
  position: relative;
  height: 100%;
  overflow-y: auto;
  padding: 96px 40px 200px;
  /* 顶部避让 80px 头；底部留出固定输入框 */
  color: var(--fg-1, #0d0d0d);
  background: var(--surface-app, #fff);
  /* 管理入口（仅管理员） */
  /* 品牌头 */
  /* 内容区（居中、限宽） */
  /* 区头：分类胶囊 + 控件 */
  /* 网格 */
  /* 底部信息渐变：模板名（hover 时隐藏） */
  /* hover 浮层：底部渐变 + 下载小胶囊 */ }
  .xhscPage .xhscAdminEntry {
    position: absolute;
    top: 108px;
    right: 40px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--radius-full, 999px);
    font-size: 13px;
    color: var(--fg-2, #525252);
    background: var(--surface-card, #fff);
    border: var(--border-1, 1px) solid var(--line-2, #e5e5e5);
    cursor: pointer;
    transition: all 0.15s; }
    .xhscPage .xhscAdminEntry:hover {
      color: var(--fg-1, #0d0d0d);
      border-color: var(--accent-lime, #a3e635); }
  .xhscPage .xhscHero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-10, 40px); }
  .xhscPage .xhscBrandIcon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    border-radius: var(--radius-4, 16px);
    background: linear-gradient(135deg, var(--color-lime-300, #bef264), var(--color-lime-500, #84cc16));
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
    margin-bottom: var(--space-2, 8px); }
  .xhscPage .xhscTitle {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--fg-1, #0d0d0d); }
  .xhscPage .xhscSub {
    margin: 0;
    font-size: 14px;
    color: var(--fg-2, #525252); }
  .xhscPage .xhscContent {
    max-width: 1100px;
    margin: 0 auto; }
  .xhscPage .xhscSecHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px); }
  .xhscPage .xhscChips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px); }
  .xhscPage .xhscChip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--space-3, 12px);
    border-radius: var(--radius-full, 999px);
    font-size: 12px;
    cursor: pointer;
    color: var(--fg-1, #0d0d0d);
    background: var(--surface-card, #fff);
    border: var(--border-1, 1px) solid var(--line-2, #e5e5e5);
    transition: all 0.12s; }
    .xhscPage .xhscChip:hover {
      border-color: var(--fg-3, #a3a3a3); }
  .xhscPage .xhscChipOn {
    color: var(--fg-inverse, #fff);
    font-weight: 600;
    background: var(--surface-inverse, #0d0d0d);
    border-color: var(--surface-inverse, #0d0d0d); }
    .xhscPage .xhscChipOn:hover {
      border-color: var(--surface-inverse, #0d0d0d); }
  .xhscPage .xhscControls {
    color: var(--fg-3, #a3a3a3);
    font-size: 13px; }
  .xhscPage .xhscCount {
    color: var(--fg-3, #a3a3a3); }
  .xhscPage .xhscGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-2, 8px); }
  .xhscPage .xhscCard {
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-4, 16px);
    overflow: hidden;
    background: var(--surface-card, #fff);
    border: var(--border-1, 1px) solid var(--line-2, #e5e5e5);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
    transition: box-shadow 0.15s, border-color 0.15s; }
    .xhscPage .xhscCard:hover {
      box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1)); }
  .xhscPage .xhscCardCanvas {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--surface-subtle, #fafafa); }
  .xhscPage .xhscCoverFill {
    width: 100%; }
  .xhscPage .xhscBroken {
    width: 100%;
    height: 100%;
    background: var(--surface-panel, #f5f5f5); }
  .xhscPage .xhscAiBadge {
    position: absolute;
    top: var(--space-2, 8px);
    right: var(--space-2, 8px);
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    border-radius: var(--radius-1-5, 6px); }
  .xhscPage .xhscMetaRow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    display: flex;
    align-items: flex-end;
    padding: var(--space-3, 12px);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    transition: opacity 0.15s; }
    .xhscPage .xhscMetaRow span {
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%; }
  .xhscPage .xhscCard:hover .xhscMetaRow {
    opacity: 0; }
  .xhscPage .xhscHoverOverlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-3, 12px);
    opacity: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
    transition: opacity 0.15s; }
  .xhscPage .xhscCard:hover .xhscHoverOverlay,
  .xhscPage .xhscCard:focus-within .xhscHoverOverlay {
    opacity: 1; }
  .xhscPage .xhscDlBtn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    height: 28px;
    padding: 0 var(--space-3, 12px);
    border: none;
    border-radius: var(--radius-full, 999px);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    color: var(--accent-lime-on, #0d0d0d);
    background: var(--accent-lime, #a3e635);
    transition: background 0.15s; }
    .xhscPage .xhscDlBtn i {
      font-size: 14px; }
    .xhscPage .xhscDlBtn:hover {
      background: var(--accent-lime-hover, #bef264); }
    .xhscPage .xhscDlBtn:disabled {
      opacity: 0.6;
      cursor: default; }
  .xhscPage .xhscCenter {
    display: flex;
    justify-content: center;
    padding: 80px 0; }
  .xhscPage .xhscPager {
    display: flex;
    justify-content: center;
    margin-top: var(--space-6, 24px); }
  .xhscPage .xhscExportHidden {
    position: fixed;
    left: -99999px;
    top: 0;
    pointer-events: none;
    opacity: 0; }

/* AI 弹窗内容（portal 到 body，类名前缀即可） */
.xhscAiBox {
  text-align: center; }
  .xhscAiBox .xhscAiPreview {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-3, 12px); }
  .xhscAiBox .xhscAiTip {
    font-size: 13px;
    color: var(--fg-2, #525252);
    margin-bottom: var(--space-4, 16px);
    line-height: 1.6; }

@charset "UTF-8";
/* 公共头（layout 固定 80px header）背景，随本页打包加载 */
.xhscCoverHeader {
  background: var(--new-grey-1); }

.xctPage {
  --xc-accent: #2b6cff;
  box-sizing: border-box;
  height: 100%;
  padding-top: 100px;
  /* 顶部距离 100px，避让全局头部 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--new-text-1);
  background: var(--new-grey-2); }

.xctLoadingWrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center; }

/* 内容主体：填满剩余高度，内部各区自管滚动 */
.xctBody {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 28px;
  overflow: hidden; }

/* ============ 顶部条 ============ */
.xctTopbar {
  flex: 0 0 60px;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 28px;
  background: var(--new-grey-1);
  border-bottom: 1px solid var(--new-grey-4);
  box-shadow: var(--new-shadow-1); }

.xctTopLeft {
  display: flex;
  align-items: center;
  gap: 18px; }

.xctBack {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: var(--new-grey-3);
  color: var(--new-text-3);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s; }
  .xctBack:hover {
    background: var(--new-grey-4);
    color: var(--new-text-1); }

.xctTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--new-text-1); }

.xctTopActions {
  display: flex;
  gap: 12px; }

/* ============ 保存弹窗字段 ============ */
.xctMField {
  margin-bottom: 14px; }
  .xctMField label {
    display: block;
    font-size: 12px;
    color: var(--new-text-4);
    margin-bottom: 7px;
    font-weight: 500; }

.xctMRow {
  display: flex;
  gap: 14px;
  align-items: flex-start; }

.xctPreviewUpload {
  display: flex;
  align-items: center;
  gap: 12px; }

.xctPreviewThumb {
  width: 46px;
  height: 61px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--new-grey-4); }

.xctPreviewPh {
  width: 46px;
  height: 61px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--new-grey-3);
  border-radius: 8px;
  color: var(--new-text-5);
  font-size: 11px; }

.xctUploadBtn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  background: var(--xc-accent);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap; }

/* ============ 编辑工作区（占据剩余高度，内部滚动） ============ */
.xctEditorArea {
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 16px;
  background: var(--new-grey-1);
  border: 1px solid var(--new-grey-4);
  border-radius: 16px;
  box-shadow: var(--new-shadow-1);
  overflow: hidden; }

.imageSearchGeneraWrap {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--new-grey-1); }
  .imageSearchGeneraWrap .debugDataWrap {
    color: #FFF;
    width: 100%;
    padding: 0 32px;
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px; }
  .imageSearchGeneraWrap .imageSearchGeneraContent {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column; }
    .imageSearchGeneraWrap .imageSearchGeneraContent .picEditCoreBox {
      width: 100%;
      flex: 1;
      overflow: hidden; }
      .imageSearchGeneraWrap .imageSearchGeneraContent .picEditCoreBox .picEditCoreTopToolBox {
        height: 80px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center; }
    .imageSearchGeneraWrap .imageSearchGeneraContent .picEditCoreBottomBox {
      width: 100%;
      display: flex;
      padding: 12px 0;
      position: absolute;
      bottom: 0;
      justify-content: center;
      z-index: 300;
      align-items: center; }
      .imageSearchGeneraWrap .imageSearchGeneraContent .picEditCoreBottomBox .newSearchAreaWrap .newSearchAreaBox {
        flex-direction: column-reverse; }
        .imageSearchGeneraWrap .imageSearchGeneraContent .picEditCoreBottomBox .newSearchAreaWrap .newSearchAreaBox .accurate {
          padding: 16px 16px 48px 16px;
          margin-bottom: -24px;
          margin-top: unset; }

.imageSearchGeneraHeaderBox {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 48px 0 24px;
  height: 64px;
  z-index: 1000; }
  .imageSearchGeneraHeaderBox.bg {
    background: var(--new-grey-2); }
  .imageSearchGeneraHeaderBox.asideCollapsed {
    margin-left: 168px;
    padding-left: 0;
    width: calc(100% - 168px); }
  .imageSearchGeneraHeaderBox .headerLeft {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: flex-start; }
    .imageSearchGeneraHeaderBox .headerLeft .ant-btn {
      margin-top: 8px; }
  .imageSearchGeneraHeaderBox .headerCenter {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center; }
  .imageSearchGeneraHeaderBox .headerRight {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: flex-end; }
    .imageSearchGeneraHeaderBox .headerRight .qtd-ai-button {
      position: relative;
      width: 120px;
      height: 40px;
      border-radius: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 16px;
      cursor: pointer; }

.rightTplListItemMaskBox {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  transition: all .3s ease-in-out; }
  .rightTplListItemMaskBox .qtd-ai-button {
    position: relative;
    width: 100%;
    height: 40px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 16px;
    cursor: pointer; }

.rightTplListWrap {
  position: absolute;
  left: 24px;
  top: 72px;
  width: 54px;
  padding: 12px 8px;
  border-radius: 16px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  background-color: var(--new-grey-2);
  display: flex;
  flex-wrap: wrap;
  max-height: 90vh;
  overflow: auto;
  gap: 8px;
  z-index: 10;
  align-items: center;
  transform: translateX(0) translateY(0); }
  .rightTplListWrap .rightTplListItemBox {
    width: 48px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 1px solid #f0f0f0; }
    .rightTplListWrap .rightTplListItemBox.active {
      border: 1px solid #088; }
    .rightTplListWrap .rightTplListItemBox > i {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 10; }
    .rightTplListWrap .rightTplListItemBox:hover .rightTplListItemMaskBox {
      opacity: 1; }
  .rightTplListWrap .rightTplListItemPreviewBox {
    width: 48px;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative; }
    .rightTplListWrap .rightTplListItemPreviewBox .icon-fasong {
      position: absolute;
      right: 8px;
      top: 0px;
      z-index: 10;
      color: #FFF; }
    .rightTplListWrap .rightTplListItemPreviewBox:hover .rightTplListItemMaskBox {
      opacity: 1; }
    .rightTplListWrap .rightTplListItemPreviewBox.active {
      border: 1px solid var(--qtd-ai-text-color-hover-1); }
    .rightTplListWrap .rightTplListItemPreviewBox > img {
      width: 100%;
      height: 100%; }
  .rightTplListWrap .rightTplListItemLoadingBox {
    flex: 1;
    width: auto;
    aspect-ratio: 9 / 18.5;
    border-radius: 8px;
    background: var(--qtd-ai-drak-func-color-7);
    border: 1px solid var(--qtd-ai-drak-color-6);
    background-size: 200% 200%;
    animation: imgLoading 3s ease infinite;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    align-items: center; }
    .rightTplListWrap .rightTplListItemLoadingBox .rightTplListItemLoadingImgBox {
      width: 40.5px;
      height: 40px;
      position: relative;
      overflow: hidden; }
      .rightTplListWrap .rightTplListItemLoadingBox .rightTplListItemLoadingImgBox > img {
        width: 100%;
        height: 100%; }
      .rightTplListWrap .rightTplListItemLoadingBox .rightTplListItemLoadingImgBox::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 100%;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
        transform: skewX(-25deg);
        animation: light-sweep 2s infinite ease-in-out; }
    .rightTplListWrap .rightTplListItemLoadingBox:nth-child(2) {
      animation-delay: 0.2s; }
    .rightTplListWrap .rightTplListItemLoadingBox:nth-child(3) {
      animation-delay: 0.4s; }
    .rightTplListWrap .rightTplListItemLoadingBox:nth-child(4) {
      animation-delay: 0.6s; }
    .rightTplListWrap .rightTplListItemLoadingBox span {
      color: rgba(255, 255, 255, 0.65);
      font-size: 14px;
      line-height: 22px; }
  .rightTplListWrap.rightTplListWrapBig {
    left: 50%;
    top: 50%;
    width: 80%;
    max-width: 1200px;
    height: auto;
    background: var(--qtd-ai-drak-func-color-4);
    flex-direction: row;
    padding: 24px;
    gap: 16px;
    box-shadow: unset;
    transform: translateX(-50%) translateY(-50%); }
    .rightTplListWrap.rightTplListWrapBig .rightTplListItemBox {
      flex: 1;
      width: auto;
      border-width: 0; }
      .rightTplListWrap.rightTplListWrapBig .rightTplListItemBox .rightTplListItemMaskBox {
        display: flex; }
    .rightTplListWrap.rightTplListWrapBig .rightTplListItemPreviewBox {
      width: auto;
      flex: 1; }
      .rightTplListWrap.rightTplListWrapBig .rightTplListItemPreviewBox .rightTplListItemMaskBox {
        display: flex; }

.elementToolsWrap {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 12px;
  z-index: 2;
  padding: 3px;
  position: relative; }

.aiInputContainerBg2 {
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 13px;
  background: var(--qtd-ai-drak-func-color-4);
  overflow: hidden;
  z-index: 1; }

.aiInputContainerBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 13px;
  background: transparent;
  overflow: hidden;
  z-index: 2; }
  .aiInputContainerBg::after {
    content: '';
    width: 700px;
    height: 700px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 13px;
    transform: translate(-50%, -50%);
    background: transparent;
    animation: ai-input-first-an 3s cubic-bezier(0.2, 0, 0, 1) 2;
    transition: all 0.3s var(--qtd-transition-cubic-1); }

@keyframes ai-input-first-an {
  0% {
    background-image: conic-gradient(#00B27700 0, #00B277 30%, #00B277 40%, #FC954C 45%, #FA5555 50%, #4E4CD9 60%, #4E4CD9 70%, rgba(25, 128, 255, 0.3) 90%, rgba(25, 128, 255, 0) 100%);
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0; }
  5% {
    background-image: conic-gradient(#00B27700 0, #00B277 30%, #00B277 40%, #FC954C 45%, #FA5555 50%, #4E4CD9 60%, #4E4CD9 70%, rgba(25, 128, 255, 0.3) 90%, rgba(25, 128, 255, 0) 100%);
    opacity: 1; }
  95% {
    background-image: conic-gradient(#00B27700 0, #00B277 30%, #00B277 40%, #FC954C 45%, #FA5555 50%, #4E4CD9 60%, #4E4CD9 70%, rgba(25, 128, 255, 0.3) 90%, rgba(25, 128, 255, 0) 100%);
    opacity: 1; }
  100% {
    background-image: conic-gradient(#00B27700 0, #00B277 30%, #00B277 40%, #FC954C 45%, #FA5555 50%, #4E4CD9 60%, #4E4CD9 70%, rgba(25, 128, 255, 0.3) 90%, rgba(25, 128, 255, 0) 100%);
    transform: translate(-50%, -50%) rotate(360deg);
    opacity: 0; } }

.scaleToolsWrap {
  display: flex;
  align-items: center;
  border-radius: 8px;
  background: var(--qtd-ai-drak-func-color-3);
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 500; }
  .scaleToolsWrap .scaleToolsInput {
    width: 50px;
    padding: 4px;
    background: var(--qtd-ai-drak-func-color-3);
    border-width: 0; }
    .scaleToolsWrap .scaleToolsInput:hover {
      border-width: 0; }
    .scaleToolsWrap .scaleToolsInput .ant-input {
      background: transparent;
      border-color: transparent;
      border-radius: 0; }
    .scaleToolsWrap .scaleToolsInput .ant-input-suffix {
      color: var(--qtd-ai-text-color-1); }
    .scaleToolsWrap .scaleToolsInput input {
      text-align: right; }

.downloadWrap {
  display: flex;
  flex-direction: column; }
  .downloadWrap .downloadBoxHeader {
    display: flex;
    padding: 16px 16px 0 16px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    align-self: stretch; }
    .downloadWrap .downloadBoxHeader > span {
      color: var(--qtd-ai-text-color-1);
      font-size: 20px;
      font-weight: 600;
      line-height: 28px; }
  .downloadWrap .downloadBoxContent {
    display: flex;
    padding: 0 16px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch; }
    .downloadWrap .downloadBoxContent .downloadBoxContentName {
      display: flex;
      padding: 8px 0;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;
      color: var(--qtd-ai-text-color-1);
      font-size: 12px;
      line-height: 20px; }
    .downloadWrap .downloadBoxContent .downloadBoxPreviewBox {
      width: 288px;
      height: 288px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--new-grey-3); }
    .downloadWrap .downloadBoxContent .downloadBoxExtSelectBox {
      width: 100%;
      padding: 12px 0; }
  .downloadWrap .downloadFooterBox {
    display: flex;
    padding: 10px 16px;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    border-top: 1px solid var(--new-grey-2); }
    .downloadWrap .downloadFooterBox .ant-btn {
      background: var(--qtd-ai-light-color-6);
      border-color: var(--qtd-ai-light-color-6);
      color: #333;
      border-radius: 26px;
      width: 120px; }

.downloadPopoverWrap .ant-popover-arrow {
  display: none; }

.downloadPopoverWrap .ant-popover-inner-content {
  padding: 0;
  background: var(--new-grey-2); }

.ant-select-dropdown {
  z-index: 2030; }

@keyframes imgLoading {
  0% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; }
  100% {
    background-position: 0% 50%; } }

@keyframes light-sweep {
  0% {
    left: -100%; }
  100% {
    left: 100%; } }

.hi-progress {
  width: 150px;
  height: 12px;
  border-radius: 6px;
  background: var(--qtd-ai-drak-func-color-14);
  padding: 1px; }
  .hi-progress .hi-progress-bg {
    background: var(--qtd-ai-drak-func-color-7);
    width: 100%;
    height: 100%;
    border-radius: 4px;
    padding: 1px; }
    .hi-progress .hi-progress-bg .hi-progress-content {
      background: linear-gradient(90deg, #3489FF 0%, #33BBFF 50%, #D8FF00 100%);
      width: 0;
      height: 100%;
      border-radius: 4px; }

@charset "UTF-8";
:root {
  --new-grey-1: #000000;
  --new-grey-2: #141414;
  --new-grey-3: #1F1F1F;
  --new-grey-4: #333333;
  --new-grey-5: #4D4D4D;
  --new-grey-6: #D8D8D8;
  --new-grey-7: #FFFFFF;
  --new-text-1: #FFFFFF;
  --new-text-2: #FAFAFA;
  --new-text-3: #999999;
  --new-text-4: #666666;
  --new-text-5: #4D4D4D;
  --new-text-6: #333333;
  --new-text-7: #1F1F1F;
  --new-text-8: #141414;
  --new-shadow-1: 0 3px 6px -4px rgba(255, 255, 255, 0.12), 0 6px 16px 0 rgba(255, 255, 255, 0.08), 0 9px 28px 8px rgba(255, 255, 255, 0.05);
  --new-shadow-2: 0 8px 12px 0 rgba(255, 255, 255, 0.3);
  --new-copyright-bg: transparent;
  --left-color-1: #141414;
  --left-color-2: #1F1F1F;
  --left-color-3: #333333;
  --left-color-4: #4D4D4D;
  --left-color-5: #666666;
  --left-color-6: #999999;
  --left-color-7: #FAFAFA;
  --left-color-8: #FFFFFF;
  --left-color-9: #e8e8e8;
  --left-color-10: #333333;
  --left-text-color-1: #FFFFFF;
  --left-text-color-2: #999999;
  --left-text-color-3: #d8d8d8;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0px 4px 4px 0px var(--tw-shadow-color, var(--shadow-color-1, #00000012)), 0px 4px 80px 8px var(--tw-shadow-color, var(--shadow-color-1, #0000001f)), 0px 0px 1px 0px var(--tw-shadow-color, var(--shadow-color-2, #000000aa)); }

.qtd-ai-light-mode {
  --new-grey-1: #FFFFFF;
  --new-grey-2: #FAFAFA;
  --new-grey-3: #F5F5F5;
  --new-grey-4: #E8E8E8;
  --new-grey-5: #D8D8D8;
  --new-grey-6: #333333;
  --new-grey-7: #141414;
  --new-text-1: #333333;
  --new-text-2: #333333;
  --new-text-3: #4D4D4D;
  --new-text-4: #666666;
  --new-text-5: #999999;
  --new-text-6: #FAFAFA;
  --new-text-7: #FFFFFF;
  --new-text-8: #FFFFFF;
  --new-shadow-1: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  --new-shadow-2: 0 8px 12px 0 rgba(0, 0, 0, 0.3);
  --new-copyright-bg: #F5FBFF;
  --left-color-1: #FFFFFF;
  --left-color-3: #F5F5F5;
  --left-color-4: #E8E8E8;
  --left-color-9: #e8e8e8;
  --left-color-10: #E8E8E8;
  --left-text-color-1: #333333;
  --left-text-color-2: #666666;
  --left-text-color-3: #666666; }
  .qtd-ai-light-mode \--tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000; }

.authpage {
  min-height: 100vh;
  padding: 40px 16px;
  background: var(--new-grey-2);
  color: var(--new-text-1);
  display: flex;
  align-items: center;
  justify-content: center; }
  .authpage .panel {
    width: 100%;
    max-width: 404px;
    padding: 28px 40px;
    border: 1px solid var(--new-grey-4);
    border-radius: 12px;
    background: var(--new-grey-3);
    box-shadow: var(--tw-shadow); }
  .authpage .state {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--new-text-3);
    font-size: 14px;
    line-height: 22px; }
  .authpage .errorBox {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center; }
    .authpage .errorBox h1 {
      margin: 0 0 10px;
      color: var(--new-text-1);
      font-size: 20px;
      line-height: 28px;
      font-weight: 700;
      letter-spacing: 0; }
    .authpage .errorBox p {
      margin: 0;
      color: var(--new-text-3);
      font-size: 14px;
      line-height: 22px; }
  .authpage .authheader {
    text-align: center; }
    .authpage .authheader .requestText {
      margin-top: 18px; }
    .authpage .authheader h1 {
      margin: 0 0 6px;
      color: var(--new-text-1);
      font-size: 20px;
      line-height: 28px;
      font-weight: 700;
      letter-spacing: 0; }
    .authpage .authheader p {
      max-width: 280px;
      margin: 0 auto;
      color: var(--new-text-3);
      font-size: 14px;
      line-height: 20px; }
  .authpage .appBridge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px; }
  .authpage .appIcon,
  .authpage .platformIcon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    line-height: 1; }
    .authpage .appIcon img,
    .authpage .platformIcon img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .authpage .appIcon {
    border: 1px solid var(--new-grey-4);
    background: var(--new-grey-3);
    color: var(--new-text-2);
    border-radius: 50%; }
  .authpage .platformIcon {
    background: var(--new-grey-4);
    color: var(--new-text-1); }
  .authpage .bridgeDots {
    color: var(--new-text-3);
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 1; }
  .authpage .identityCard,
  .authpage .section {
    margin-top: 22px;
    overflow: hidden;
    border: 1px solid var(--new-grey-4);
    border-radius: 8px;
    background: var(--new-grey-3); }
    .authpage .identityCard h2,
    .authpage .section h2 {
      margin: 0;
      padding: 10px 14px;
      border-bottom: 1px solid var(--new-grey-4);
      color: var(--new-text-2);
      font-size: 14px;
      line-height: 20px;
      font-weight: 700;
      letter-spacing: 0;
      background: var(--new-grey-4); }
  .authpage .identityLoading {
    padding: 14px;
    color: var(--new-text-3);
    font-size: 13px;
    line-height: 20px; }
  .authpage .identityRows {
    display: flex;
    flex-direction: column; }
  .authpage .identityRow {
    min-height: 54px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px; }
    .authpage .identityRow + .identityRow {
      border-top: 1px solid var(--new-grey-4); }
  .authpage .identityAvatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: var(--new-grey-4);
    color: var(--new-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700; }
    .authpage .identityAvatar img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .authpage .identityText {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px; }
    .authpage .identityText span,
    .authpage .identityText em {
      color: var(--new-text-3);
      font-size: 12px;
      line-height: 18px;
      font-style: normal; }
    .authpage .identityText .identityError {
      color: var(--new-text-2);
      font-weight: 600; }
    .authpage .identityText strong {
      color: var(--new-text-2);
      font-size: 14px;
      line-height: 20px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .authpage .identityText select {
      width: 100%;
      height: 28px;
      padding: 0 8px;
      border: 1px solid var(--new-grey-4);
      border-radius: 6px;
      background: var(--new-grey-2);
      color: var(--new-text-2);
      font-size: 14px;
      line-height: 28px;
      outline: none; }
  .authpage .scopeList {
    margin: 0;
    padding: 0;
    list-style: none; }
    .authpage .scopeList li {
      min-height: 32px;
      padding: 8px 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--new-text-2);
      font-size: 14px;
      line-height: 20px; }
      .authpage .scopeList li + li {
        border-top: 1px solid var(--new-grey-4); }
      .authpage .scopeList li::before {
        content: '\2022';
        color: var(--new-text-2); }
      .authpage .scopeList li em {
        color: var(--new-text-3);
        font-style: normal;
        font-size: 12px;
        line-height: 18px; }
  .authpage .warning {
    margin-top: 22px;
    padding: 12px 14px;
    border: 1px solid var(--new-grey-5);
    border-radius: 6px;
    background: var(--new-grey-2);
    color: var(--new-text-2);
    text-align: center;
    font-size: 13px;
    line-height: 20px;
    font-weight: 600; }
  .authpage .inlineError {
    margin-top: 14px;
    color: var(--new-text-2);
    text-align: center;
    font-size: 13px;
    line-height: 20px; }
  .authpage .actions {
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; }
  .authpage .secondaryBtn,
  .authpage .primaryBtn {
    height: 36px;
    border-radius: 7px;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer; }
  .authpage .secondaryBtn {
    border: 1px solid var(--new-grey-4);
    background: transparent;
    color: var(--new-text-3); }
  .authpage .primaryBtn {
    border: 1px solid var(--new-grey-7);
    background: var(--new-grey-7);
    color: var(--new-grey-1);
    font-weight: 600; }
  .authpage .secondaryBtn:disabled,
  .authpage .primaryBtn:disabled {
    cursor: not-allowed;
    opacity: 0.65; }
  .authpage .notice {
    margin: 12px auto 0;
    max-width: 320px;
    color: var(--new-text-3);
    text-align: center;
    font-size: 12px;
    line-height: 18px; }
  @media (max-width: 640px) {
    .authpage {
      padding: 20px 12px;
      align-items: flex-start; }
      .authpage .panel {
        padding: 24px 16px;
        max-width: 100%; }
      .authpage .identityCard,
      .authpage .section {
        margin-top: 18px; }
      .authpage .warning {
        margin-top: 18px; } }

.qtd-history-panel-container-poster {
  position: relative;
  width: 100%;
  max-width: 1252px;
  height: 100%;
  padding: 0px 72px 0px 72px;
  overflow: hidden;
  margin: 0 auto; }
  .qtd-history-panel-container-poster .qtd-history-panel-content {
    width: 100%;
    height: 100%;
    padding-left: 0;
    padding-top: 88px;
    overflow: auto;
    margin-bottom: 240px; }
    .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 24px;
      margin-bottom: 24px; }
      .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list > .time {
        position: absolute;
        top: 0;
        left: -56px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 32px;
        border-radius: 8px;
        border: 1px solid var(--qtd-ai-drak-func-color-5);
        background: var(--qtd-ai-drak-func-color-3);
        color: var(--qtd-ai-text-color-2);
        font-family: "PingFang SC";
        font-size: 14px;
        font-weight: 400; }
      .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item {
        position: relative;
        display: flex;
        gap: 16px;
        width: 100%;
        height: auto;
        flex-direction: column;
        padding: 24px;
        min-height: 180px;
        border-radius: 16px;
        border: 1px solid var(--qtd-ai-drak-func-color-5);
        background: var(--qtd-ai-drak-func-color-2);
        transition: all 0.3s var(--qtd-transition-cubic-1); }
        .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-text-box {
          position: relative;
          width: 100%;
          height: auto;
          display: flex;
          flex-direction: column;
          justify-content: space-between; }
          .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-text-box .text-box-1 {
            display: flex;
            flex-wrap: wrap;
            gap: 12px; }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-text-box .text-box-1 .time-title {
              color: rgba(255, 255, 255, 0.4);
              font-size: 14px;
              font-weight: 600;
              line-height: 22px; }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-text-box .text-box-1 .model-box {
              display: flex;
              align-items: center;
              height: 22px;
              color: rgba(255, 255, 255, 0.65);
              gap: 4px; }
              .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-text-box .text-box-1 .model-box img {
                height: 16px; }
              .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-text-box .text-box-1 .model-box p {
                color: rgba(255, 255, 255, 0.65);
                font-family: "PingFang SC";
                font-size: 14px;
                font-weight: 400; }
          .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-text-box .content-text {
            color: rgba(255, 255, 255, 0.65);
            font-family: "PingFang SC";
            font-size: 14px;
            font-weight: 400;
            line-height: 22px; }
          .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-text-box .text-box-2 {
            display: flex;
            align-items: center;
            gap: 8px; }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-text-box .text-box-2 .btn {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 4px;
              height: 32px;
              padding: 0 16px;
              border-radius: 88px;
              border: 1px solid var(--qtd-ai-drak-func-color-5);
              color: var(--qtd-ai-text-color-2);
              font-family: "PingFang SC";
              font-size: 14px;
              font-weight: 500;
              transition: all 0.3s var(--qtd-transition-cubic-1);
              cursor: pointer; }
              .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-text-box .text-box-2 .btn:hover {
                background: var(--qtd-ai-light-func-color-12); }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-text-box .text-box-2 .delete {
              opacity: 0;
              width: 32px;
              padding: 0;
              border-radius: 16px;
              background: none;
              color: rgba(200, 30, 30, 0.8);
              border: 0; }
              .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-text-box .text-box-2 .delete:hover {
                background: rgba(200, 30, 30, 0.1); }
          .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-text-box:hover .text-box-2 .delete {
            opacity: 1; }
        .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item:hover .delete {
          opacity: 1; }
        .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box {
          position: relative;
          width: 100%;
          height: auto;
          display: grid;
          gap: 8px;
          grid-template-columns: 1fr 1fr 1fr 1fr; }
          .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box [data-len="4"] {
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
          .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            max-width: 100%;
            height: 100%;
            max-height: 414px;
            background-color: var(--qtd-ai-light-func-color-13);
            border-radius: 8px;
            cursor: pointer;
            overflow: hidden;
            width: max-content;
            background-image: url("//icon.qiantucdn.com/static/images/brandTool/img_bg_3.png");
            background-size: 24px; }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box img {
              max-width: 100%;
              max-height: 100%;
              transition: all 0.3s var(--qtd-transition-cubic-1); }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box .btn-box {
              position: absolute;
              top: 8px;
              right: 8px;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              flex-wrap: wrap;
              gap: 8px;
              opacity: 0;
              transition: all 0.3s var(--qtd-transition-cubic-1);
              z-index: 1; }
              .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box .btn-box .btn {
                display: flex;
                align-items: center;
                gap: 4px;
                height: 32px;
                color: rgba(255, 255, 255, 0.65);
                font-family: "PingFang SC";
                font-size: 14px;
                font-weight: 400;
                transition: all 0.3s var(--qtd-transition-cubic-1);
                background: var(--qtd-ai-light-func-color-12);
                cursor: pointer;
                width: 32px;
                padding: 0;
                justify-content: center;
                border-radius: 16px; }
                .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box .btn-box .btn:hover {
                  background: var(--qtd-ai-light-func-color-13); }
              .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box .btn-box .btn-group {
                display: flex;
                background: var(--qtd-ai-light-func-color-12);
                border-radius: 16px;
                padding: 0 8px; }
                .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box .btn-box .btn-group .btn {
                  background: transparent; }
                  .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box .btn-box .btn-group .btn:hover {
                    background: var(--qtd-ai-light-func-color-13); }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box .go-edit-btn {
              position: absolute;
              bottom: 24px; }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box .img-loading {
              position: relative;
              width: 240px;
              height: 240px;
              padding: 2px;
              transition: all 0.3s var(--qtd-transition-cubic-1);
              overflow: hidden; }
              .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box .img-loading .loading-item {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                width: 100%;
                height: 100%;
                border-radius: 4px;
                gap: 8px;
                font-size: 14px;
                z-index: 1;
                background-color: #1F1F1F;
                color: var(--qtd-ai-text-color-2); }
              .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box .img-loading.error-item::after {
                background: #D84B4B;
                animation: none; }
              .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box .img-loading.error-item .icon-cuowu {
                font-size: 32px;
                color: #D84B4B; }
              .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box .img-loading.error-item span {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                font-size: 12px; }
              .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box .img-loading.error-item .error-tips {
                font-size: 16px;
                color: #D84B4B !important; }
              .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box .img-loading::after {
                content: '';
                position: absolute;
                left: -120px;
                top: -120px;
                width: 200%;
                height: 200%;
                background: conic-gradient(from -45deg at 50% 50%, #83D994 0deg, #61A0FF 52.5deg, #8C4DFF 95.62deg, #FF00E5 144.37deg, #FF67B2 194.64deg, #FF4343 255deg, #FF7E3F 298.12deg, #FFCD4B 360deg);
                animation: turnCardBg 5s infinite linear;
                animation-fill-mode: forwards;
                z-index: 0; }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box .music-viewer-box {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%; }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box:hover .btn-box {
              opacity: 1; }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box:hover > img {
              transform: scale(1.1); }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box.download .download {
              cursor: wait !important;
              opacity: 0.8; }
        .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .upgrade-box {
          display: flex;
          align-items: center;
          gap: 8px; }
          .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .upgrade-box p {
            background: linear-gradient(45deg, var(--new-text-4) 0%, var(--new-text-4) 30%, var(--new-text-4) 40%, var(--qtd-ai-drak-func-color-1) 52%, var(--new-text-4) 63%, var(--new-text-4) 70%, var(--new-text-4) 100%);
            background-size: 200% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
            animation: shine2 5s linear infinite;
            text-transform: uppercase; }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .upgrade-box p em {
              background: none;
              background-clip: unset;
              -webkit-background-clip: unset;
              -webkit-text-fill-color: #88CC00; }
              .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .upgrade-box p em i {
                margin-right: 4px; }
          .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .upgrade-box span {
            color: var(--new-text-4);
            font-size: 14px;
            cursor: pointer;
            transition: all .3s ease-in-out; }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .upgrade-box span .icon {
              margin-right: 4px; }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .upgrade-box span:hover {
              color: var(--new-text-2); }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .upgrade-box span.vip-span {
              color: #88CC00; }
          .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .upgrade-box button {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            height: 32px;
            padding: 0 16px;
            border-radius: 32px;
            border: 1px solid #88CC00;
            color: #88CC00;
            font-size: 14px;
            font-weight: 700;
            transition: all 0.3s var(--qtd-transition-cubic-1);
            cursor: pointer;
            overflow: hidden;
            background-color: transparent; }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .upgrade-box button span {
              position: relative;
              z-index: 1;
              color: #88CC00; }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .upgrade-box button:hover {
              box-shadow: var(--new-shadow-1);
              background-color: #88CC00;
              color: #fff; }
              .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .upgrade-box button:hover span {
                color: #fff; }
        .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .text-box-2 {
          display: flex;
          align-items: center;
          gap: 8px; }
          .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .text-box-2 .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            height: 32px;
            padding: 0 16px;
            border-radius: 88px;
            border: 1px solid var(--qtd-ai-drak-func-color-5);
            color: rgba(255, 255, 255, 0.65);
            font-family: "PingFang SC";
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s var(--qtd-transition-cubic-1);
            cursor: pointer; }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .text-box-2 .btn:hover {
              background: var(--qtd-ai-light-func-color-12); }
          .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .text-box-2:hover .delete {
            opacity: 1; }
          .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .text-box-2 .delete {
            opacity: 0;
            width: 32px;
            padding: 0;
            border-radius: 16px;
            background: none;
            color: rgba(200, 30, 30, 0.8);
            border: 0; }
            .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .text-box-2 .delete:hover {
              background: rgba(200, 30, 30, 0.1); }
        .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item.download .download {
          cursor: wait !important;
          opacity: 0.8; }
        .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item.active {
          animation: historyActive 1s infinite; }
        .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .ant-spin {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 100%;
          height: 100%;
          display: none;
          align-items: center;
          justify-content: center;
          background: rgba(0, 0, 0, 0.58);
          opacity: 0;
          z-index: 0;
          pointer-events: none; }
        .qtd-history-panel-container-poster .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item.download .ant-spin {
          display: flex;
          opacity: 1;
          pointer-events: all;
          z-index: 2; }

.qtd-ai-light-mode .qtd-history-panel-container .qtd-history-panel-content .qtd-history-panel-list .qtd-history-panel-item .history-img-box .img-box .img-loading .loading-item {
  background-color: #F5F5F5; }

.musicViewer {
  position: relative;
  width: 400px;
  height: 600px;
  min-height: 600px;
  max-height: calc(100vh - 240px);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box; }
  .musicViewer .backgroundImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0; }
  .musicViewer .loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 8px; }
  .musicViewer .playerContainer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    z-index: 1;
    transition: opacity 0.3s ease; }
  .musicViewer .vinylRecord {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 0 40px rgba(0, 0, 0, 0.5); }
    .musicViewer .vinylRecord .vinylImage {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover; }
    .musicViewer .vinylRecord .vinylDefault {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #3a2e1f 0%, #2a1f15 50%, #1a1510 100%), repeating-conic-gradient(from 0deg, #2a1f15 0deg 2deg, #1a1510 2deg 4deg); }
    .musicViewer .vinylRecord.playing .vinylImage,
    .musicViewer .vinylRecord.playing .vinylDefault {
      animation: rotate 10s linear infinite; }
    .musicViewer .vinylRecord.playing .recordCenter .coverImage,
    .musicViewer .vinylRecord.playing .recordCenter .defaultCover {
      animation: rotate 10s linear infinite; }
  .musicViewer .recordCenter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2; }
    .musicViewer .recordCenter .coverImage {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%; }
    .musicViewer .recordCenter .defaultCover {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      border-radius: 50%; }
      .musicViewer .recordCenter .defaultCover .mountainScene {
        width: 100%;
        height: 100%;
        position: relative;
        background: linear-gradient(to bottom, #ff6b35 0%, #f7931e 30%, #2c3e50 60%, #1a252f 100%); }
        .musicViewer .recordCenter .defaultCover .mountainScene .sun {
          position: absolute;
          top: 15%;
          left: 50%;
          transform: translateX(-50%);
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: #ffd700;
          box-shadow: 0 0 15px rgba(255, 215, 0, 0.6); }
        .musicViewer .recordCenter .defaultCover .mountainScene .mountain1 {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 50%;
          background: #1a252f;
          clip-path: polygon(0 100%, 30% 60%, 60% 80%, 100% 50%, 100% 100%); }
        .musicViewer .recordCenter .defaultCover .mountainScene .mountain2 {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 40%;
          background: #2c3e50;
          clip-path: polygon(0 100%, 20% 70%, 50% 90%, 80% 60%, 100% 100%); }
    .musicViewer .recordCenter .playButton {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      z-index: 3;
      background-color: transparent; }
      .musicViewer .recordCenter .playButton i {
        font-size: 56px;
        color: #fff; }
      .musicViewer .recordCenter .playButton:disabled {
        cursor: not-allowed;
        opacity: 0.5; }
  .musicViewer .loader {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    animation: spin 0.6s linear infinite; }
  .musicViewer .toneArm {
    position: absolute;
    width: 84px;
    height: 107px;
    left: 90px;
    top: -24px;
    transform: rotateZ(-20deg);
    transform-origin: top left;
    transition: all .2s ease;
    z-index: 1; }
    .musicViewer .toneArm.armActive {
      transform: rotateZ(0deg); }
  .musicViewer .waveformContainer {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px;
    z-index: 1;
    position: relative; }
  .musicViewer .timeDisplay {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    min-width: 40px;
    text-align: center; }
  .musicViewer .currentTime {
    color: #333; }
  .musicViewer .duration {
    color: #999; }
  .musicViewer .waveform {
    flex: 1;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px; }
  .musicViewer .waveformCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; }
  .musicViewer .waveformProgressCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; }

@keyframes rotate {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

@keyframes spin {
  to {
    transform: rotate(360deg); } }

.glbViewer {
  position: relative;
  width: 400px;
  height: 400px;
  border-radius: 18px;
  overflow: hidden; }
  .glbViewer .canvasContainer {
    width: 100%;
    height: 100%; }
  .glbViewer .loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 8px; }
    .glbViewer .loading .ant-spin.ant-spin-show-text .ant-spin-text {
      font-size: 16px; }
  .glbViewer .glb-info-box {
    display: flex;
    height: 32px;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    position: absolute;
    right: 8px;
    top: 8px;
    border-radius: 8px;
    background: rgba(17, 17, 17, 0.58);
    color: rgba(255, 255, 255, 0.65);
    font-size: 14px;
    line-height: 22px; }

@charset "UTF-8";
/* 小红书封面编辑器 · 视觉 */
.xceEditor {
  --xc-accent: #2b6cff;
  --xc-accent-soft: rgba(43, 108, 255, 0.1);
  --xc-radius: 14px;
  display: flex;
  gap: 16px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  width: 100%;
  color: var(--new-text-1); }

.xceEmpty {
  color: var(--new-text-5);
  padding: 40px;
  text-align: center; }

/* ============ 左：图层面板 ============ */
.xcePanelLeft {
  width: 200px;
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--new-grey-1);
  border: 1px solid var(--new-grey-4);
  border-radius: var(--xc-radius);
  padding: 14px; }

.xcePanelTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--new-text-1);
  margin-bottom: 12px; }

.xceCount {
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--new-text-4);
  background: var(--new-grey-3);
  border-radius: 9px; }

.xceAddRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px; }

.xceAddTile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  border: 1px dashed var(--new-grey-5);
  border-radius: 10px;
  background: var(--new-grey-2);
  color: var(--new-text-3);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s; }
  .xceAddTile:hover {
    border-color: var(--xc-accent);
    background: var(--xc-accent-soft);
    color: var(--xc-accent); }

.xceAddGlyph {
  font-size: 18px;
  font-weight: 800;
  line-height: 1; }

.xceImportLink {
  width: 100%;
  padding: 8px;
  margin-bottom: 14px;
  border: 1px dashed var(--new-grey-5);
  border-radius: 8px;
  background: transparent;
  color: var(--new-text-4);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s; }
  .xceImportLink:hover {
    border-color: var(--xc-accent);
    color: var(--xc-accent); }

.xceLayerList {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1; }

.xceLayerItem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  color: var(--new-text-2);
  transition: background 0.15s; }
  .xceLayerItem:hover {
    background: var(--new-grey-3); }
  .xceLayerItem.xceActive {
    background: var(--xc-accent-soft);
    color: var(--xc-accent); }
    .xceLayerItem.xceActive::before {
      content: '';
      position: absolute;
      left: 0;
      top: 8px;
      bottom: 8px;
      width: 3px;
      border-radius: 2px;
      background: var(--xc-accent); }

.xceBgItem {
  margin-top: 4px;
  border-top: 1px dashed var(--new-grey-4);
  padding-top: 12px;
  border-radius: 0 0 10px 10px; }

.xceLayerType {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #fff; }

.xceTypeText {
  background: #4a6cff; }

.xceTypeImg {
  background: #18b56a; }

.xceTypeBg {
  background: #8b5cf6; }

.xceLayerLabel {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.xceEditableTag {
  font-size: 10px;
  color: var(--xc-accent);
  background: var(--xc-accent-soft);
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 600; }

/* ============ 中：画布工作区 ============ */
.xceStageWrap {
  flex: 1;
  min-width: 360px;
  min-height: 0;
  display: flex;
  padding: 28px;
  border-radius: var(--xc-radius);
  background: radial-gradient(circle at 50% 28%, var(--new-grey-2), var(--new-grey-3));
  border: 1px solid var(--new-grey-4);
  overflow: auto; }

.xceStageOuter {
  position: relative;
  flex: 0 0 auto;
  margin: auto;
  /* 小于容器时居中，大于容器时可滚动不裁切 */
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12); }

.xceStageInner {
  position: relative;
  transform-origin: top left;
  overflow: hidden; }

.xceZoomChip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(4px); }

/* ============ 右：属性面板 ============ */
.xcePanelRight {
  width: 340px;
  flex: 0 0 340px;
  min-height: 0;
  border: 1px solid var(--new-grey-4);
  border-radius: var(--xc-radius);
  padding: 4px 16px 16px;
  overflow-y: auto;
  background: var(--new-grey-1); }

.xcePropGroup h4 {
  position: sticky;
  top: 0;
  margin: 0 -16px 14px;
  padding: 14px 16px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--new-text-1);
  background: var(--new-grey-1);
  border-bottom: 1px solid var(--new-grey-4);
  z-index: 2; }

.xcePropGroup label {
  display: block;
  font-size: 12px;
  color: var(--new-text-4);
  margin: 12px 0 5px; }

.xcePropRow {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: 4px; }

.xceSubTitle {
  margin: 18px 0 8px;
  padding-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--new-text-3);
  border-bottom: 1px dashed var(--new-grey-4); }

.xceTip {
  font-size: 12px;
  color: var(--new-text-5);
  margin-bottom: 10px;
  line-height: 1.6; }

/* Fill 编辑器 */
.xceFillEditor {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.xceColorInput {
  width: 36px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--new-grey-4);
  border-radius: 6px;
  cursor: pointer;
  background: none; }

.xceGradientBox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--new-grey-3);
  border-radius: 8px; }

.xceRow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--new-text-4); }
  .xceRow a {
    color: #ff4d4f;
    cursor: pointer; }

.xceGradientPreview {
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--new-grey-4); }

.xceImageFill {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap; }

.xceFillThumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--new-grey-4); }

.xcePh {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--new-grey-3);
  border-radius: 8px;
  color: var(--new-text-5);
  font-size: 12px; }

.xceUploadMini {
  display: inline-block;
  padding: 5px 14px;
  background: var(--xc-accent);
  color: #fff;
  border-radius: 7px;
  font-size: 12px;
  cursor: pointer; }

/* run 样式控件 */
.xceRunStyle {
  padding: 12px;
  background: var(--new-grey-3);
  border-radius: 8px;
  margin: 8px 0; }

/* runs 列表 */
.xceRunsEditor {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.xceRunRow {
  border: 1px solid var(--new-grey-4);
  border-radius: 8px;
  padding: 10px;
  background: var(--new-grey-2); }

.xceRunHead {
  display: flex;
  align-items: center;
  gap: 8px; }
  .xceRunHead a {
    color: var(--xc-accent);
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap; }
  .xceRunHead .xceDanger {
    color: #ff4d4f; }

.xceRunsActions {
  display: flex;
  gap: 8px; }

.xceDanger {
  color: #ff4d4f; }

/* autoStyle 规则 */
.xceAutoStyle {
  display: flex;
  flex-direction: column;
  gap: 10px; }

.xceRuleBlock {
  border: 1px solid var(--new-grey-4);
  border-radius: 8px;
  padding: 12px;
  background: var(--new-grey-2); }

.xceRuleHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--new-text-1); }

.card-hover-tool-box-warp {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3; }
  .card-hover-tool-box-warp.container-ref {
    pointer-events: none; }

.ai-edit-popover-box {
  position: absolute;
  width: 32px;
  height: 32px;
  pointer-events: none; }

.card-hover-tool-box {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  pointer-events: auto; }
  .card-hover-tool-box .card-hover-tool-item {
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    height: 32px;
    min-width: 32px;
    width: max-content;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 17px;
    background: var(--new-grey-1);
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--new-text-1);
    font-weight: 700;
    opacity: .8; }
    .card-hover-tool-box .card-hover-tool-item .icon {
      color: var(--new-text-1);
      font-size: 16px;
      font-weight: 400;
      line-height: 24px; }
      .card-hover-tool-box .card-hover-tool-item .icon.icon-Heart {
        color: #FA5555; }
    .card-hover-tool-box .card-hover-tool-item:hover {
      opacity: 1; }

.ant-popover.ai-edit-popover-content-wrap {
  padding-right: 0;
  padding-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  z-index: 2005; }
  .ant-popover.ai-edit-popover-content-wrap .ant-popover-content .ant-popover-arrow {
    display: none; }
  .ant-popover.ai-edit-popover-content-wrap .ant-popover-content .ant-popover-inner {
    border: none;
    padding: 0; }
    .ant-popover.ai-edit-popover-content-wrap .ant-popover-content .ant-popover-inner .ant-popover-inner-content {
      padding: 0; }

.ai-edit-popover-content {
  display: flex;
  min-width: 140px;
  padding: 8px;
  align-items: center;
  background: var(--new-grey-1);
  border-radius: 16px;
  flex-direction: column; }
  .ai-edit-popover-content .ai-edit-item {
    display: flex;
    padding: 0 8px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    color: var(--new-text-3);
    font-size: 14px;
    font-weight: 400;
    height: 32px;
    width: 100%;
    line-height: 22px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease; }
    .ai-edit-popover-content .ai-edit-item:hover {
      border-radius: 88px;
      background: var(--new-grey-3); }
      .ai-edit-popover-content .ai-edit-item:hover span {
        color: var(--new-text-1);
        font-weight: 600; }

.aiWmSettingMask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center; }
  .aiWmSettingMask .aiWmSettingPanel {
    background: #fff;
    border-radius: 16px;
    width: 680px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    padding: 24px; }
    .aiWmSettingMask .aiWmSettingPanel .aiWmSettingHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      font-weight: 600;
      color: #1a1a1a; }
      .aiWmSettingMask .aiWmSettingPanel .aiWmSettingHeader .aiWmSettingCloseBtn {
        font-size: 14px;
        color: #999;
        cursor: pointer; }
        .aiWmSettingMask .aiWmSettingPanel .aiWmSettingHeader .aiWmSettingCloseBtn:hover {
          color: #333; }
    .aiWmSettingMask .aiWmSettingPanel .aiWmSettingBody {
      padding-top: 16px; }
      .aiWmSettingMask .aiWmSettingPanel .aiWmSettingBody .aiWmSettingNotice {
        overflow-y: auto;
        padding: 16px;
        background: #f5f5f5;
        border-radius: 8px;
        font-size: 13px;
        line-height: 22px;
        color: #4d4d4d; }
      .aiWmSettingMask .aiWmSettingPanel .aiWmSettingBody .aiWmSettingDivider {
        margin: 16px 0;
        border: none;
        border-top: 1px solid #e8e8e8; }
      .aiWmSettingMask .aiWmSettingPanel .aiWmSettingBody .aiWmSettingSwitchRow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        padding: 16px 0; }
        .aiWmSettingMask .aiWmSettingPanel .aiWmSettingBody .aiWmSettingSwitchRow .aiWmSettingSwitchLabel {
          font-size: 14px;
          color: #00b277;
          font-weight: 500; }
        .aiWmSettingMask .aiWmSettingPanel .aiWmSettingBody .aiWmSettingSwitchRow .aiWmSettingSwitch.ant-switch-checked {
          background-color: #00b277; }
      .aiWmSettingMask .aiWmSettingPanel .aiWmSettingBody .aiWmSettingTip {
        font-size: 12px;
        color: #999;
        margin: 4px 0;
        line-height: 1.5; }
      .aiWmSettingMask .aiWmSettingPanel .aiWmSettingBody .aiWmSettingSaveBtn {
        display: block;
        width: 260px;
        height: 40px;
        border-radius: 40px;
        margin: 0 auto;
        margin-top: 24px;
        background: #00b277;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition: opacity 0.2s; }
        .aiWmSettingMask .aiWmSettingPanel .aiWmSettingBody .aiWmSettingSaveBtn:hover {
          opacity: 0.88; }
        .aiWmSettingMask .aiWmSettingPanel .aiWmSettingBody .aiWmSettingSaveBtn.aiWmSettingSaveBtnDisabled {
          opacity: 0.5;
          cursor: not-allowed; }
          .aiWmSettingMask .aiWmSettingPanel .aiWmSettingBody .aiWmSettingSaveBtn.aiWmSettingSaveBtnDisabled:hover {
            opacity: 0.5; }

:root {
  --fav-panel-color-1: #ffffff;
  --fav-panel-color-2: #333333;
  --fav-panel-color-3: #333333;
  --fav-panel-color-4: #1F1F1F;
  --fav-panel-color-5: #999999;
  --fav-panel-color-6: #333333;
  --fav-panel-color-7: #fafafa;
  --fav-panel-color-8: #fafafa;
  --fav-panel-color-9: rgba(255, 255, 255, 0.8); }

.qtd-ai-light-mode {
  --fav-panel-color-1: #333333;
  --fav-panel-color-2: #666666;
  --fav-panel-color-3: #e8e8e8;
  --fav-panel-color-4: #ffffff;
  --fav-panel-color-5: #999999;
  --fav-panel-color-6: #F5F5F5;
  --fav-panel-color-7: #B8B8B8;
  --fav-panel-color-8: #D8D8D8;
  --fav-panel-color-9: #666666; }

.favPanel {
  width: 360px;
  height: 514px;
  max-height: 514px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 24px 16px 16px; }
  .favPanel .title {
    font-size: 20px;
    font-weight: 600;
    color: var(--fav-panel-color-1);
    height: 28px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    margin-bottom: 16px; }
  .favPanel .favCloseBtn {
    position: absolute;
    right: 16px;
    top: 16px;
    font-size: 16px;
    color: var(--fav-panel-color-1);
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.3s ease-in-out; }
    .favPanel .favCloseBtn:hover {
      opacity: 1; }
  .favPanel .searchBox {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    width: calc(100% + 8px);
    margin-left: -4px; }
    .favPanel .searchBox form {
      width: 100%; }
    .favPanel .searchBox input {
      width: 100%;
      height: 40px;
      padding: 0 32px 0 12px;
      border: 1px solid var(--fav-panel-color-3);
      border-radius: 20px;
      font-size: 14px;
      color: var(--fav-panel-color-1);
      outline: none;
      background-color: var(--fav-panel-color-4); }
      .favPanel .searchBox input:hover {
        border-color: #cf0; }
      .favPanel .searchBox input:focus {
        border-color: #cf0;
        outline: 1px solid #cf0; }
    .favPanel .searchBox .icon-Close {
      position: absolute;
      right: 10px;
      font-size: 12px;
      color: var(--qtd-fun-color-7);
      cursor: pointer; }
  .favPanel .listWrap {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain; }
  .favPanel .loadingBox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px; }
  .favPanel .spinner {
    animation: favPanelSpin 2s linear infinite; }
  .favPanel .groupTitle {
    height: 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--fav-panel-color-1);
    padding: 0 8px;
    margin: 4px 0; }
  .favPanel .empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    font-size: 14px;
    color: var(--fav-panel-color-5); }
  .favPanel .loadMore {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    font-size: 12px;
    color: var(--fav-panel-color-5);
    margin: 8px 0;
    cursor: pointer; }
    .favPanel .loadMore i {
      margin-right: 4px; }
    .favPanel .loadMore:hover i {
      transform: rotate(180deg);
      transition: transform .3s; }
  .favPanel .favItem {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 8px;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer; }
    .favPanel .favItem:hover {
      background-color: var(--fav-panel-color-6); }
      .favPanel .favItem:hover .num {
        display: none; }
      .favPanel .favItem:hover .toggleBtn,
      .favPanel .favItem:hover .editBtn {
        display: flex; }
    .favPanel .favItem.faved .toggleBtn {
      display: flex; }
    .favPanel .favItem.limit .name {
      color: var(--fav-panel-color-7); }
    .favPanel .favItem.limit .num {
      color: var(--fav-panel-color-8); }
    .favPanel .favItem.limit .imgBox {
      opacity: 0.8; }
    .favPanel .favItem a {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
      height: 64px;
      text-decoration: none; }
  .favPanel .imgBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    margin-right: 16px;
    background: var(--fav-panel-color-3);
    border-radius: 8px;
    overflow: hidden; }
    .favPanel .imgBox img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    .favPanel .imgBox i {
      color: var(--fav-panel-color-2); }
  .favPanel .info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    flex: 1; }
    .favPanel .info em {
      display: block;
      width: 100%;
      font-size: 14px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
  .favPanel .name {
    font-weight: 600;
    color: var(--fav-panel-color-1); }
  .favPanel .num {
    color: var(--fav-panel-color-5);
    display: flex !important;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden; }
  .favPanel .ownerInfo {
    display: flex;
    align-items: center;
    gap: 0px;
    flex-shrink: 0;
    max-width: 96px;
    overflow: hidden; }
    .favPanel .ownerInfo i {
      font-size: 12px; }
  .favPanel .ownerAvatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 4px; }
  .favPanel .ownerTextAvatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: #459FFF;
    font-size: 10px;
    color: #fff;
    margin-right: 4px; }
  .favPanel .ownerName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .favPanel .dot {
    flex-shrink: 0; }
  .favPanel .toggleBtn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 74px;
    min-width: 74px;
    height: 32px;
    margin-left: 8px;
    border-radius: 88px;
    border: 1px solid #cf0;
    background: #cf0;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600; }
    .favPanel .toggleBtn:hover {
      color: #333; }
  .favPanel .favedBtn {
    display: flex;
    background: #cf0;
    color: #333;
    font-weight: 600; }
    .favPanel .favedBtn .hoverText {
      display: none; }
    .favPanel .favedBtn:hover {
      color: #333; }
      .favPanel .favedBtn:hover .defaultText {
        display: none; }
      .favPanel .favedBtn:hover .hoverText {
        display: inline; }
  .favPanel .editBtn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 60px;
    min-width: 60px;
    height: 32px;
    margin-left: 8px;
    border-radius: 88px;
    border: 1px solid #cf0;
    background: #cf0;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600; }
    .favPanel .editBtn:hover {
      border-color: #cf0; }
  .favPanel .createNew {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 16px 8px 0;
    border-top: 1px solid var(--fav-panel-color-3);
    cursor: pointer;
    flex-shrink: 0; }
    .favPanel .createNew p {
      font-size: 14px;
      font-weight: 600;
      color: var(--fav-panel-color-9);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
      .favPanel .createNew p em {
        color: var(--fav-panel-color-1);
        margin-left: 4px; }
  .favPanel .iconBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    margin-right: 8px;
    background: var(--fav-panel-color-3);
    border-radius: 50%; }
    .favPanel .iconBox i {
      color: var(--fav-panel-color-1);
      font-size: 20px;
      opacity: 0.8; }
  .favPanel .viewAllBtn {
    position: absolute;
    bottom: 24px;
    right: 16px;
    height: 32px;
    padding: 0 12px;
    border-radius: 88px;
    border: 1px solid var(--fav-panel-color-3);
    background: transparent;
    color: var(--fav-panel-color-1);
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    font-weight: 600;
    transition: all 0.3s ease-in-out; }
    .favPanel .viewAllBtn:hover {
      border-color: var(--fav-panel-color-1); }

@keyframes favPanelSpin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

:root {
  --fav-toast-bg: #333333;
  --fav-toast-text-color: #FFFFFF;
  --fav-toast-brand-color: #D8FF00;
  --fav-toast-btn-text-color: #333333;
  --fav-toast-link-color: #999999; }

.qtd-ai-light-mode {
  --fav-toast-bg: #333333;
  --fav-toast-text-color: #FFFFFF;
  --fav-toast-brand-color: #D8FF00;
  --fav-toast-btn-text-color: #333333;
  --fav-toast-link-color: #999999; }

.favWrap {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  pointer-events: none;
  display: flex;
  flex-direction: column; }
  .favWrap .unfavToast,
  .favWrap .favToast {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    border-radius: 16px;
    background: var(--fav-toast-bg);
    white-space: nowrap; }
  .favWrap .unfavToast {
    width: max-content;
    height: 48px;
    padding: 0 12px; }
    .favWrap .unfavToast p {
      font-size: 16px;
      color: var(--fav-toast-text-color); }
  .favWrap .favToast {
    width: 383px;
    height: 88px;
    padding: 0 16px; }
  .favWrap .cover {
    width: 56px;
    height: 56px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 16px; }
  .favWrap .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 44px;
    width: calc(100% - 224px);
    margin-right: 16px;
    overflow: hidden; }
    .favWrap .info em {
      display: block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
      .favWrap .info em:first-child {
        font-size: 14px;
        color: var(--fav-toast-text-color); }
  .favWrap .name {
    font-size: 16px;
    font-weight: 500;
    color: var(--fav-toast-brand-color); }
  .favWrap .undoBtn {
    width: 64px;
    height: 32px;
    border-radius: 56px;
    border: 1px solid var(--fav-toast-brand-color);
    background: transparent;
    color: var(--fav-toast-brand-color);
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 8px; }
    .favWrap .undoBtn:hover {
      background: var(--fav-toast-brand-color);
      color: var(--fav-toast-btn-text-color);
      font-weight: 600; }
  .favWrap .viewLink {
    width: 56px;
    font-size: 14px;
    color: var(--fav-toast-link-color);
    text-decoration: none;
    flex-shrink: 0;
    text-align: center; }
    .favWrap .viewLink:hover {
      color: var(--fav-toast-brand-color); }

.dragBoxWrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: -1;
  opacity: 0;
  transition: all .3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; }
  .dragBoxWrap.show {
    opacity: 1;
    z-index: 9999; }
  .dragBoxWrap > span {
    font-size: 32px;
    color: #FFF;
    font-weight: bold; }
  .dragBoxWrap img {
    width: 85px;
    height: 85px;
    position: absolute; }
  .dragBoxWrap .dragImgLT {
    top: 16px;
    left: 16px; }
  .dragBoxWrap .dragImgRT {
    top: 16px;
    right: 16px;
    transform: rotate(90deg); }
  .dragBoxWrap .dragImgLB {
    bottom: 16px;
    left: 16px;
    transform: rotate(-90deg); }
  .dragBoxWrap .dragImgRB {
    bottom: 16px;
    right: 16px;
    transform: rotate(180deg); }

@charset "UTF-8";
:root {
  --new-grey-1: #000000;
  --new-grey-2: #141414;
  --new-grey-3: #1F1F1F;
  --new-grey-4: #333333;
  --new-grey-5: #4D4D4D;
  --new-grey-6: #D8D8D8;
  --new-grey-7: #FFFFFF;
  --new-text-1: #FFFFFF;
  --new-text-2: #FAFAFA;
  --new-text-3: #999999;
  --new-text-4: #666666;
  --new-text-5: #4D4D4D;
  --new-text-6: #333333;
  --new-text-7: #1F1F1F;
  --new-text-8: #141414;
  --new-shadow-1: 0 3px 6px -4px rgba(255, 255, 255, 0.12), 0 6px 16px 0 rgba(255, 255, 255, 0.08), 0 9px 28px 8px rgba(255, 255, 255, 0.05);
  --new-shadow-2: 0 8px 12px 0 rgba(255, 255, 255, 0.3);
  --new-copyright-bg: transparent;
  --left-color-1: #141414;
  --left-color-2: #1F1F1F;
  --left-color-3: #333333;
  --left-color-4: #4D4D4D;
  --left-color-5: #666666;
  --left-color-6: #999999;
  --left-color-7: #FAFAFA;
  --left-color-8: #FFFFFF;
  --left-color-9: #e8e8e8;
  --left-color-10: #333333;
  --left-text-color-1: #FFFFFF;
  --left-text-color-2: #999999;
  --left-text-color-3: #d8d8d8;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0px 4px 4px 0px var(--tw-shadow-color, var(--shadow-color-1, #00000012)), 0px 4px 80px 8px var(--tw-shadow-color, var(--shadow-color-1, #0000001f)), 0px 0px 1px 0px var(--tw-shadow-color, var(--shadow-color-2, #000000aa)); }

.qtd-ai-light-mode {
  --new-grey-1: #FFFFFF;
  --new-grey-2: #FAFAFA;
  --new-grey-3: #F5F5F5;
  --new-grey-4: #E8E8E8;
  --new-grey-5: #D8D8D8;
  --new-grey-6: #333333;
  --new-grey-7: #141414;
  --new-text-1: #333333;
  --new-text-2: #333333;
  --new-text-3: #4D4D4D;
  --new-text-4: #666666;
  --new-text-5: #999999;
  --new-text-6: #FAFAFA;
  --new-text-7: #FFFFFF;
  --new-text-8: #FFFFFF;
  --new-shadow-1: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  --new-shadow-2: 0 8px 12px 0 rgba(0, 0, 0, 0.3);
  --new-copyright-bg: #F5FBFF;
  --left-color-1: #FFFFFF;
  --left-color-3: #F5F5F5;
  --left-color-4: #E8E8E8;
  --left-color-9: #e8e8e8;
  --left-color-10: #E8E8E8;
  --left-text-color-1: #333333;
  --left-text-color-2: #666666;
  --left-text-color-3: #666666; }
  .qtd-ai-light-mode \--tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000; }

.cropModalWrap {
  backdrop-filter: blur(24px); }
  .cropModalWrap .ant-modal-content {
    border-radius: 20px;
    overflow: hidden;
    background: var(--new-grey-1);
    box-shadow: var(--new-shadow-2); }
  .cropModalWrap .ant-modal-content .ant-modal-close {
    display: none; }
  .cropModalWrap .ant-modal-content .ant-modal-header {
    padding: 0; }
  .cropModalWrap .ant-modal-header {
    background: var(--new-grey-1);
    border-bottom: 1px solid var(--new-grey-4); }
  .cropModalWrap .ant-modal-title {
    color: var(--new-text-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px; }
  .cropModalWrap .ant-modal-close {
    color: var(--new-text-5); }
  .cropModalWrap .ant-modal-close:hover {
    color: var(--new-text-1); }
  .cropModalWrap .ant-modal-body {
    padding: 16px;
    padding-top: 0;
    background: var(--new-grey-1); }
  .cropModalWrap .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: none;
    flex-shrink: 0; }
  .cropModalWrap .headLeft {
    display: flex;
    flex-direction: column;
    gap: 2px; }
  .cropModalWrap .title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 800;
    color: var(--new-text-1); }
  .cropModalWrap .sub {
    font-size: 12px;
    color: var(--new-text-3);
    line-height: 20px; }
    .cropModalWrap .sub strong {
      color: var(--new-text-1);
      font-weight: 600; }
  .cropModalWrap .closeBtn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--new-grey-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--new-text-4);
    cursor: pointer;
    transition: background 0.13s; }
    .cropModalWrap .closeBtn:hover:not(:disabled) {
      background: var(--new-grey-4); }
    .cropModalWrap .closeBtn:disabled {
      opacity: 0.45;
      cursor: not-allowed; }

.hint {
  font-size: 13px;
  color: var(--new-text-4);
  margin-bottom: 16px;
  line-height: 1.5; }

.layout {
  display: flex;
  gap: 16px;
  height: 600px;
  max-height: calc(100vh - 200px); }
  .layout .list {
    width: 200px;
    flex-shrink: 0;
    border-right: 1px solid var(--new-grey-4);
    padding: 3px;
    padding-top: 16px;
    padding-right: 16px;
    overflow: auto;
    max-height: 730px;
    background: var(--new-grey-1); }
    .layout .list .ant-list-item {
      cursor: pointer;
      border: none !important;
      padding: 7px 10px !important;
      border-radius: 16px;
      margin-bottom: 2px;
      transition: background 0.13s; }
    .layout .list .ant-list-item:hover {
      background: var(--new-grey-3); }
  .layout .canvasCol {
    padding-top: 16px; }

.listItemInner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0; }

.listDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--new-grey-5);
  transition: background 0.13s ease, box-shadow 0.13s ease; }

.listDotActive {
  background: var(--qtd-brand-color-6); }

.listDotDone {
  background: var(--qtd-brand-color-6);
  box-shadow: 0 0 0 2px var(--qtd-brand-color-outline-2); }

.listItemActive {
  background: var(--new-grey-3) !important; }
  .listItemActive .listTitle {
    color: var(--new-text-1); }

.listTitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--new-text-1); }

.listSub {
  font-size: 12px;
  color: var(--new-text-3); }

.canvasCol {
  flex: 1;
  min-width: 0; }

/* 与下载弹窗 previewMain 一致 */
.cropCanvasWrap {
  background: var(--new-grey-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  min-height: 480px;
  border-radius: 12px; }

.cropCanvasGrid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--new-grey-4) 1px, transparent 1px), linear-gradient(90deg, var(--new-grey-4) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0; }

.cropFrame {
  position: relative;
  border: 2px solid var(--new-text-1);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  z-index: 2;
  background: var(--new-grey-7); }

.cropFrameActive {
  overflow: visible;
  border: none;
  background: transparent;
  border-radius: 0; }

.cropWindow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  border: 1px dashed var(--new-grey-6);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2; }

.cropFrameActive .cropWindow {
  border: 1px dashed var(--new-grey-6); }

.cropImgDim {
  position: absolute;
  border-radius: 2px;
  cursor: grab;
  user-select: none;
  will-change: left, top;
  z-index: 1;
  opacity: 0.42;
  filter: brightness(0.92); }
  .cropImgDim:active {
    cursor: grabbing; }

.cropImgFront {
  position: absolute;
  border-radius: 2px;
  cursor: grab;
  user-select: none;
  will-change: left, top;
  z-index: 1;
  pointer-events: auto; }
  .cropImgFront:active {
    cursor: grabbing; }

.cropImgLoading {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: default; }

.cropCorner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--new-text-7);
  filter: drop-shadow(0 0 2px var(--new-grey-4));
  border-style: solid;
  pointer-events: none;
  z-index: 5; }

.cropCorner[data-pos='tl'] {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px; }

.cropCorner[data-pos='tr'] {
  top: -1px;
  right: -1px;
  border-width: 2px 2px 0 0; }

.cropCorner[data-pos='bl'] {
  bottom: -1px;
  left: -1px;
  border-width: 0 0 2px 2px; }

.cropCorner[data-pos='br'] {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0; }

.infoBar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-bottom: 12px; }

.infoTag {
  font-size: 11px;
  color: var(--new-text-4);
  background: var(--new-grey-3);
  padding: 3px 10px;
  border-radius: 9999px; }
  .infoTag span {
    color: var(--new-text-1);
    font-family: monospace, monospace;
    font-weight: 600; }

.sliderRow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--new-text-4); }
  .sliderRow .ant-slider .ant-slider-track {
    background: var(--qtd-ai-light-color-6); }
  .sliderRow .ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
    border: 2px solid var(--qtd-ai-light-color-6); }
  .sliderRow .ant-slider .ant-slider-handle {
    border: 2px solid var(--qtd-ai-light-color-6); }
    .sliderRow .ant-slider .ant-slider-handle:focus {
      box-shadow: 0 0 0 5px #d9ff005c; }

.scaleVal {
  min-width: 48px;
  font-size: 12px;
  color: var(--new-text-1);
  font-variant-numeric: tabular-nums; }

.modalFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--new-grey-4); }

.footerNav {
  display: flex;
  align-items: center;
  gap: 10px; }

.footerActions {
  display: flex;
  align-items: center;
  gap: 12px; }

.navCount {
  min-width: 40px;
  font-size: 12px;
  font-weight: 500;
  color: var(--new-text-3);
  text-align: center; }

/* 与 ExtendSizeDrawer .lineBtn 一致（newTheme 中性色） */
.lineBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 40px;
  padding: 0 16px;
  border-radius: 88px;
  border: 1px solid var(--new-grey-4);
  background: transparent;
  color: var(--new-text-1);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s; }
  .lineBtn .icon {
    font-size: 14px;
    line-height: 1; }
  .lineBtn:hover:not(:disabled) {
    color: var(--new-text-1);
    border-color: var(--new-text-1); }
  .lineBtn:disabled {
    opacity: 0.45;
    cursor: not-allowed; }
  .lineBtn.lineBtnSm {
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
    line-height: 20px; }

/* 与 ExtendSizeDrawer .primaryBtn 一致（theme.scss 品牌主按钮） */
.primaryBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 160px;
  height: 40px;
  padding: 5px 20px;
  border-radius: 26px;
  border: none;
  background: var(--qtd-ai-light-color-6);
  color: var(--qtd-ai-text-color-0);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s; }
  .primaryBtn .icon {
    font-size: 16px;
    line-height: 1; }
  .primaryBtn .ant-spin {
    line-height: 1; }
  .primaryBtn .ant-spin-dot-item {
    background-color: var(--qtd-ai-text-color-0); }
  .primaryBtn:hover:not(:disabled) {
    background: var(--qtd-ai-light-color-6);
    opacity: 0.92; }
  .primaryBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed; }

@charset "UTF-8";
:root {
  --new-grey-1: #000000;
  --new-grey-2: #141414;
  --new-grey-3: #1F1F1F;
  --new-grey-4: #333333;
  --new-grey-5: #4D4D4D;
  --new-grey-6: #D8D8D8;
  --new-grey-7: #FFFFFF;
  --new-text-1: #FFFFFF;
  --new-text-2: #FAFAFA;
  --new-text-3: #999999;
  --new-text-4: #666666;
  --new-text-5: #4D4D4D;
  --new-text-6: #333333;
  --new-text-7: #1F1F1F;
  --new-text-8: #141414;
  --new-shadow-1: 0 3px 6px -4px rgba(255, 255, 255, 0.12), 0 6px 16px 0 rgba(255, 255, 255, 0.08), 0 9px 28px 8px rgba(255, 255, 255, 0.05);
  --new-shadow-2: 0 8px 12px 0 rgba(255, 255, 255, 0.3);
  --new-copyright-bg: transparent;
  --left-color-1: #141414;
  --left-color-2: #1F1F1F;
  --left-color-3: #333333;
  --left-color-4: #4D4D4D;
  --left-color-5: #666666;
  --left-color-6: #999999;
  --left-color-7: #FAFAFA;
  --left-color-8: #FFFFFF;
  --left-color-9: #e8e8e8;
  --left-color-10: #333333;
  --left-text-color-1: #FFFFFF;
  --left-text-color-2: #999999;
  --left-text-color-3: #d8d8d8;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0px 4px 4px 0px var(--tw-shadow-color, var(--shadow-color-1, #00000012)), 0px 4px 80px 8px var(--tw-shadow-color, var(--shadow-color-1, #0000001f)), 0px 0px 1px 0px var(--tw-shadow-color, var(--shadow-color-2, #000000aa)); }

.qtd-ai-light-mode {
  --new-grey-1: #FFFFFF;
  --new-grey-2: #FAFAFA;
  --new-grey-3: #F5F5F5;
  --new-grey-4: #E8E8E8;
  --new-grey-5: #D8D8D8;
  --new-grey-6: #333333;
  --new-grey-7: #141414;
  --new-text-1: #333333;
  --new-text-2: #333333;
  --new-text-3: #4D4D4D;
  --new-text-4: #666666;
  --new-text-5: #999999;
  --new-text-6: #FAFAFA;
  --new-text-7: #FFFFFF;
  --new-text-8: #FFFFFF;
  --new-shadow-1: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  --new-shadow-2: 0 8px 12px 0 rgba(0, 0, 0, 0.3);
  --new-copyright-bg: #F5FBFF;
  --left-color-1: #FFFFFF;
  --left-color-3: #F5F5F5;
  --left-color-4: #E8E8E8;
  --left-color-9: #e8e8e8;
  --left-color-10: #E8E8E8;
  --left-text-color-1: #333333;
  --left-text-color-2: #666666;
  --left-text-color-3: #666666; }
  .qtd-ai-light-mode \--tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000; }

.mask {
  position: fixed;
  inset: 0;
  z-index: 2105;
  /* 遮罩不随 newTheme 反色，避免深色模式下误用浅色遮罩 */
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.maskOpen {
  opacity: 1;
  pointer-events: all; }

.modal {
  width: 1200px;
  max-width: calc(100vw - 40px);
  height: max-content;
  max-height: calc(100vh - 80px);
  background: var(--new-grey-1);
  border-radius: 20px;
  box-shadow: var(--new-shadow-2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.96);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  opacity: 0; }
  .modal .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--new-grey-4);
    flex-shrink: 0; }
  .modal .headLeft {
    display: flex;
    flex-direction: column;
    gap: 2px; }
  .modal .title {
    font-size: 16px;
    font-weight: 800;
    color: var(--new-text-1); }
  .modal .sub {
    font-size: 12px;
    color: var(--new-text-3); }
    .modal .sub strong {
      color: var(--new-text-1);
      font-weight: 600; }
  .modal .closeBtn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--new-grey-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--new-text-4);
    cursor: pointer;
    transition: background 0.13s; }
    .modal .closeBtn:hover:not(:disabled) {
      background: var(--new-grey-4); }
    .modal .closeBtn:disabled {
      opacity: 0.45;
      cursor: not-allowed; }
  .modal .list {
    border-right: 1px solid var(--new-grey-4);
    overflow-y: auto;
    padding-top: 16px;
    padding-left: 3px;
    margin-left: -3px;
    padding-right: 16px;
    padding-bottom: 16px;
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 4px; }
  .modal .list::-webkit-scrollbar {
    width: 3px; }
  .modal .list::-webkit-scrollbar-thumb {
    background: var(--new-grey-5);
    border-radius: 2px; }
  .modal .listItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.13s; }
    .modal .listItem:hover {
      background: var(--new-grey-3); }

.listItemActive {
  background: var(--new-grey-3);
  box-shadow: 0 0 0 1.5px var(--new-grey-5) inset;
  outline: 3px solid var(--new-grey-4); }

.maskOpen .modal {
  transform: translateY(0) scale(1);
  opacity: 1; }

.body {
  flex: 1;
  display: grid;
  grid-template-columns: 200px 1fr;
  overflow: hidden;
  padding: 16px;
  min-height: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  position: relative; }

.thumbWrap {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--new-grey-4);
  background: var(--new-grey-2); }

.thumbSpin {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--new-text-7) 72%, transparent); }

.thumbProgressLayer {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none; }

.thumbFail {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #ff4d4f 12%, var(--new-grey-1));
  color: #ff4d4f;
  font-size: 16px;
  font-weight: 800; }

.listThumb {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: cover; }

.listInfo {
  flex: 1;
  min-width: 0; }

.listName {
  font-size: 12px;
  font-weight: 600;
  color: var(--new-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.listDim {
  font-size: 10px;
  color: var(--new-text-4);
  font-family: ui-monospace, monospace;
  margin-top: 1px; }

.previewMain1 {
  background: var(--new-grey-3);
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  height: 700px;
  max-height: calc(100vh - 244px);
  justify-content: center;
  gap: 12px;
  padding: 24px;
  position: relative;
  overflow: hidden; }

.previewHint {
  font-size: 11px;
  color: var(--new-text-3);
  margin-top: -8px;
  text-align: center; }

.previewMainContent {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center; }

.mainImgWrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

.mainImgSpin {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--new-text-7) 50%, transparent); }

.mainProgressLayer {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden; }

.mainErr {
  padding: 12px 16px;
  font-size: 12px;
  color: #ff4d4f;
  text-align: center;
  line-height: 1.5; }

.mainImg {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; }

.mainInfo {
  text-align: center; }

.mainName {
  font-size: 13px;
  font-weight: 700;
  color: var(--new-text-1); }

.mainDim {
  font-size: 12px;
  color: var(--new-text-4);
  font-family: ui-monospace, monospace;
  margin-top: 2px; }

.dlModeRow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap; }
  .dlModeRow.dlModeRowSingle {
    justify-content: center; }
    .dlModeRow.dlModeRowSingle .dlModePill {
      max-width: 220px; }

.dlModePill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--new-grey-4);
  background: var(--new-grey-2);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
  .dlModePill:hover {
    border-color: var(--new-text-5);
    background: var(--new-grey-3); }
  .dlModePill:focus-visible {
    outline: 2px solid var(--new-text-1);
    outline-offset: 2px; }

.dlModePillActive {
  border-color: var(--new-text-1);
  background: var(--new-grey-1);
  box-shadow: 0 0 0 1.5px var(--new-grey-5) inset; }

.dlModePillDim {
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  color: var(--new-text-1);
  line-height: 20px; }

.dlModePillLabel {
  font-size: 11px;
  font-weight: 600;
  color: var(--new-text-4);
  line-height: 1.2; }

.dlModePillActive .dlModePillLabel {
  color: var(--new-text-2); }

.singleBtn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  padding: 0 14px;
  border-radius: 88px;
  border: 1px solid var(--new-grey-4);
  background: color-mix(in srgb, var(--new-text-7) 92%, transparent);
  backdrop-filter: blur(24px);
  box-shadow: var(--new-shadow-1);
  font-size: 12px;
  line-height: 20px;
  font-weight: 600;
  color: var(--new-text-1);
  cursor: pointer;
  transition: border-color 0.13s, color 0.13s, box-shadow 0.13s; }
  .singleBtn .icon {
    font-size: 14px;
    line-height: 1; }
  .singleBtn:hover:not(:disabled) {
    background: var(--new-text-7);
    border-color: var(--new-text-1);
    color: var(--new-text-1);
    box-shadow: var(--new-shadow-2); }
  .singleBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed; }

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--new-grey-4);
  flex-shrink: 0; }

.footHint {
  font-size: 12px;
  color: var(--new-text-3);
  line-height: 1.5;
  flex: 1;
  min-width: 0; }

.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0; }

/* 与延展抽屉线框按钮一致 */
.btnSecondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 40px;
  padding: 0 16px;
  border-radius: 88px;
  border: 1px solid var(--new-grey-4);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--new-text-1);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s; }
  .btnSecondary .icon {
    font-size: 14px;
    line-height: 1; }
  .btnSecondary:hover:not(:disabled) {
    color: var(--new-text-1);
    border-color: var(--new-text-1); }
  .btnSecondary:disabled {
    opacity: 0.45;
    cursor: not-allowed; }

/* 与 .qtd-ai-button 亮色一致 */
/* antd Spin 与按钮内图标对齐 */
.btnSpin {
  display: inline-flex !important;
  align-items: center;
  line-height: 1; }

.btnPrimary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 40px;
  padding: 5px 22px;
  border-radius: 26px;
  border: none;
  background: var(--qtd-ai-light-color-6);
  color: var(--qtd-ai-text-color-0);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s; }
  .btnPrimary .icon {
    font-size: 16px;
    line-height: 1; }
  .btnPrimary:hover:not(:disabled) {
    background: var(--qtd-ai-light-color-6);
    opacity: 0.8; }
  .btnPrimary:disabled {
    opacity: 0.5;
    cursor: not-allowed; }

/* 复用 createProgress 结构，样式对齐历史记录 .img-loading（aiHistory） */
.extendDlProgress {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit; }
  .extendDlProgress .loading-item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--new-grey-4);
    color: var(--new-text-3); }
    .extendDlProgress .loading-item::after {
      content: '';
      position: absolute;
      left: -150%;
      top: 0%;
      width: 200%;
      height: 100%;
      background: linear-gradient(90deg, transparent 0%, transparent 25%, var(--qtd-ai-text-color-7) 50%, transparent 75%, transparent 100%);
      animation: shine3 5s linear infinite;
      animation-fill-mode: forwards;
      z-index: 0;
      pointer-events: none; }

.extendDlProgressThumb .loading-item {
  font-size: 10px;
  gap: 2px;
  border-radius: 4px; }

.extendDlProgressThumb .progress {
  font-size: 11px;
  line-height: 1.1; }

@keyframes shine3 {
  0% {
    left: -150%; }
  100% {
    left: 100%; } }

@keyframes extendDlTurnCardBg {
  0% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(90deg); }
  50% {
    transform: rotate(180deg); }
  75% {
    transform: rotate(270deg); }
  100% {
    transform: rotate(360deg); } }

.new-seo-container {
  width: 100%;
  background-color: #FFF; }
  .new-seo-container .new-seo-main {
    display: flex;
    flex-direction: column;
    padding-top: 64px;
    padding-bottom: 64px; }

.common-seo-floor-wrap {
  display: flex;
  padding-top: 48px;
  padding-bottom: 48px;
  flex-direction: column;
  align-items: center; }

.common-seo-floor-wrap {
  width: 100%;
  margin: 0 auto;
  padding-left: 280px;
  padding-right: 280px;
  max-width: 2664px; }

@media screen and (max-width: 2664px) {
  .common-seo-floor-wrap {
    padding-left: 280px;
    padding-right: 280px; } }

@media screen and (max-width: 2384px) {
  .common-seo-floor-wrap {
    padding-left: 160px;
    padding-right: 160px; } }

@media screen and (max-width: 1880px) {
  .common-seo-floor-wrap {
    padding-left: 120px;
    padding-right: 120px; } }

@media screen and (max-width: 1536px) {
  .common-seo-floor-wrap {
    padding-left: 80px;
    padding-right: 80px; } }

@media screen and (max-width: 1336px) {
  .common-seo-floor-wrap {
    padding-left: 80px;
    padding-right: 80px; } }

@media screen and (max-width: 1096px) {
  .common-seo-floor-wrap {
    padding-left: 64px;
    padding-right: 64px; } }

@media screen and (max-width: 824px) {
  .common-seo-floor-wrap {
    padding-left: 32px;
    padding-right: 32px; } }

.hishe-ai-container {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px; }
  .hishe-ai-container .my-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 300; }
  .hishe-ai-container .hishe-ai-empty-container {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 24px;
    padding: 0 48px;
    margin: 0 auto; }
    .hishe-ai-container .hishe-ai-empty-container .tools-head {
      display: flex;
      gap: 8px;
      flex-direction: column; }
      .hishe-ai-container .hishe-ai-empty-container .tools-head .tools-name {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 56px;
        color: var(--new-grey-7);
        font-size: 48px;
        font-weight: 500; }
        .hishe-ai-container .hishe-ai-empty-container .tools-head .tools-name > img {
          width: auto;
          height: 48px; }
      .hishe-ai-container .hishe-ai-empty-container .tools-head .tools-desc {
        color: var(--new-text-1);
        font-family: "PingFang SC";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        opacity: .6;
        text-align: center; }
    .hishe-ai-container .hishe-ai-empty-container .text-area-box {
      width: 800px; }
    .hishe-ai-container .hishe-ai-empty-container .upload-box {
      position: relative;
      width: 800px;
      max-width: 100%;
      height: 400px;
      border-radius: 24px;
      border: 2px dashed #666;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 8px;
      cursor: pointer; }
      .hishe-ai-container .hishe-ai-empty-container .upload-box > i {
        font-size: 64px;
        color: #666; }
      .hishe-ai-container .hishe-ai-empty-container .upload-box > p {
        color: #666;
        font-family: "PingFang SC";
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px; }
      .hishe-ai-container .hishe-ai-empty-container .upload-box > span {
        color: #666;
        font-family: "PingFang SC";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        opacity: .6;
        margin-bottom: 16px; }
      .hishe-ai-container .hishe-ai-empty-container .upload-box > .text {
        display: flex;
        align-items: center;
        justify-content: center;
        width: max-content;
        height: 40px;
        border-radius: 26px;
        background: #D8FF00;
        box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
        color: #333;
        font-family: "PingFang SC";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        cursor: pointer;
        transition: all .3s; }
        .hishe-ai-container .hishe-ai-empty-container .upload-box > .text p, .hishe-ai-container .hishe-ai-empty-container .upload-box > .text span, .hishe-ai-container .hishe-ai-empty-container .upload-box > .text em {
          display: inline-block;
          width: max-content; }
        .hishe-ai-container .hishe-ai-empty-container .upload-box > .text:hover {
          opacity: .8; }
      .hishe-ai-container .hishe-ai-empty-container .upload-box.active, .hishe-ai-container .hishe-ai-empty-container .upload-box:hover {
        border-color: var(--qtd-ai-text-color-hover-1); }
    .hishe-ai-container .hishe-ai-empty-container .example-box {
      position: relative;
      width: auto;
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding-top: 8px;
      gap: 8px; }
      .hishe-ai-container .hishe-ai-empty-container .example-box > p {
        color: #999;
        font-family: "PingFang SC";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; }
      .hishe-ai-container .hishe-ai-empty-container .example-box .example-img-list {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px; }
        .hishe-ai-container .hishe-ai-empty-container .example-box .example-img-list .example-item {
          position: relative;
          width: 80px;
          height: 56px;
          border-radius: 8px;
          border: 1px solid #474747;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          cursor: pointer; }
          .hishe-ai-container .hishe-ai-empty-container .example-box .example-img-list .example-item > .icon {
            position: relative;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            transition: all .3s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #fff; }
          .hishe-ai-container .hishe-ai-empty-container .example-box .example-img-list .example-item:hover > .icon {
            background-color: rgba(0, 0, 0, 0.2); }
  .hishe-ai-container .hishe-ai-preview-container {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 0 48px;
    margin: 0 auto; }
    .hishe-ai-container .hishe-ai-preview-container.is-compare {
      padding: 0;
      height: calc(100vh - 160px);
      width: 100vw;
      transform: translateX(-128px); }
      .hishe-ai-container .hishe-ai-preview-container.is-compare .hishe-ai-preview-main {
        width: 100%;
        height: 100%; }
        .hishe-ai-container .hishe-ai-preview-container.is-compare .hishe-ai-preview-main .preview-box {
          height: 100%;
          border-radius: 0; }
      .hishe-ai-container .hishe-ai-preview-container.is-compare .preview-btn-box {
        margin-top: 24px; }
      .hishe-ai-container .hishe-ai-preview-container.is-compare + .hishe-ai-history-container {
        display: none; }
    .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main {
      position: relative;
      width: 800px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px; }
      .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .ant-spin-nested-loading {
        width: 100%;
        flex: 1;
        min-height: 0; }
        .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .ant-spin-nested-loading .ant-spin-container {
          width: 100%;
          height: 100%; }
      .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-box {
        position: relative;
        width: 100%;
        height: 400px;
        background-color: #fff;
        background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 0), linear-gradient(45deg, transparent 75%, #f5f5f5 0), linear-gradient(45deg, #f5f5f5 25%, transparent 0), linear-gradient(45deg, transparent 75%, #f5f5f5 0);
        background-position: 0 0, 6px 6px, 6px 6px, 12px 12px;
        background-size: 12px 12px;
        border-radius: 16px;
        border: 2px solid #e8e8e8;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        box-sizing: content-box; }
        .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-box .preview-img-box {
          position: relative;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          flex: 1; }
          .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-box .preview-img-box > img {
            cursor: pointer; }
          .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-box .preview-img-box.is-w {
            width: 100%; }
            .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-box .preview-img-box.is-w > img {
              width: 100%;
              height: auto; }
          .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-box .preview-img-box.is-h {
            height: 100%; }
            .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-box .preview-img-box.is-h > img {
              width: auto;
              height: 100%; }
          .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-box .preview-img-box .canvas-box {
            position: absolute;
            cursor: pointer;
            z-index: 10;
            overflow: hidden; }
            .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-box .preview-img-box .canvas-box .draw-pen {
              position: absolute;
              left: 0;
              top: 0;
              width: 64px;
              height: 64px;
              border-radius: 50%;
              border-radius: 71px;
              border: 1px solid #0B62FF;
              background: linear-gradient(180deg, rgba(11, 98, 255, 0.6) 0%, rgba(98, 98, 255, 0.6) 100%);
              opacity: 0;
              transition: opacity 0.3s var(--transition-cubic-1);
              pointer-events: none;
              z-index: 1; }
            .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-box .preview-img-box .canvas-box:hover .draw-pen {
              opacity: 1; }
        .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-box .preview-compare-box {
          flex: 1;
          height: 100%;
          display: none;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          border-right: 4px solid #141414; }
          .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-box .preview-compare-box.show {
            display: flex; }
          .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-box .preview-compare-box img {
            user-select: none;
            pointer-events: none; }
      .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-btn-box {
        position: relative;
        width: auto;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center; }
        .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-btn-box span {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          cursor: pointer;
          color: #666; }
          .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-btn-box span i {
            font-size: 24px; }
          .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-btn-box span.disabled {
            cursor: not-allowed;
            color: #333 !important;
            pointer-events: none; }
          .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-btn-box span:hover {
            color: #999; }
          .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-btn-box span.active {
            color: var(--qtd-ai-text-color-hover-1); }
        .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-btn-box em {
          display: flex;
          height: 25px;
          width: 2px;
          margin: 0 16px;
          background-color: #333; }
        .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-btn-box .hishe-ai-preview-oper-main {
          flex-direction: row;
          gap: 16px;
          padding-left: 16px; }
          .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-btn-box .hishe-ai-preview-oper-main .create-box {
            display: flex; }
            .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-btn-box .hishe-ai-preview-oper-main .create-box .slide-box > span {
              flex-shrink: 0;
              width: max-content; }
          .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-btn-box .hishe-ai-preview-oper-main .download-box > p {
            display: none; }
          .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-btn-box .hishe-ai-preview-oper-main .download-box .qtd-ai-button {
            width: max-content;
            padding: 0 16px; }
          .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-main .preview-btn-box .hishe-ai-preview-oper-main .re-upload {
            width: max-content;
            padding: 0 16px; }
    .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-oper-main {
      position: relative;
      width: auto;
      min-width: 240x;
      height: auto;
      display: flex;
      align-items: center;
      flex-direction: column;
      gap: 24px; }
      .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-oper-main .download-box .qtd-ai-button {
        position: relative;
        width: 240px;
        height: 48px;
        border-radius: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-size: 16px;
        cursor: pointer; }
        .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-oper-main .download-box .qtd-ai-button .icon {
          font-size: 16px; }
        .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-oper-main .download-box .qtd-ai-button.disabled {
          cursor: not-allowed;
          opacity: .4; }
      .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-oper-main .download-box > p {
        color: #999;
        text-align: center;
        font-family: "PingFang SC";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; }
      .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-oper-main .create-box .slide-box {
        display: flex;
        align-items: center; }
        .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-oper-main .create-box .slide-box > span {
          font-size: 14px;
          color: var(--new-text-1); }
        .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-oper-main .create-box .slide-box .slide-main {
          width: 170px; }
      .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-oper-main .upload-box .re-upload {
        position: relative;
        width: 240px;
        height: 48px;
        border-radius: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-size: 16px;
        cursor: pointer;
        background-color: var(--new-grey-1);
        border: 1px solid var(--new-grey-4);
        color: var(--new-text-1);
        transition: all .3s; }
        .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-oper-main .upload-box .re-upload .icon {
          font-size: 16px; }
        .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-oper-main .upload-box .re-upload:hover {
          color: #fff;
          background-color: var(--qtd-ai-text-color-hover-1);
          border-color: var(--qtd-ai-text-color-hover-1); }
          .hishe-ai-container .hishe-ai-preview-container .hishe-ai-preview-oper-main .upload-box .re-upload:hover .icon {
            animation: turn 1s infinite linear; }
  .hishe-ai-container .qtd-history-nav-container {
    position: fixed;
    z-index: 2000;
    top: 50%;
    transform: translateY(-50%);
    left: 8px; }
  .hishe-ai-container .text-area-box {
    position: relative;
    width: 400px;
    padding: 0px 0px 48px 0px;
    border: 1px solid var(--new-grey-4);
    border-radius: 16px;
    background: var(--new-grey-1); }
    .hishe-ai-container .text-area-box .ant-input-textarea .ant-input {
      border-radius: 16px;
      border-color: transparent !important; }
    .hishe-ai-container .text-area-box .create-btn {
      position: absolute;
      right: 6px;
      bottom: 8px;
      height: 32px;
      width: max-content;
      padding: 0 16px;
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer; }
      .hishe-ai-container .text-area-box .create-btn:disabled {
        cursor: not-allowed;
        opacity: .4; }

.create-loading-mask {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  background-color: var(--new-grey-7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px; }
  .create-loading-mask .mask-box {
    width: 60%;
    height: 8px;
    border-radius: 100px;
    background: #F5F5F5;
    overflow: hidden; }
    .create-loading-mask .mask-box .mask-line {
      width: 0;
      height: 100%;
      border-radius: 100px;
      background: linear-gradient(-45deg, #D8FF00 25%, #6496ff 25%, #6496ff 50%, #D8FF00 50%, #D8FF00 75%, #6496ff 75%, #6496ff);
      background-color: #D8FF00;
      background-size: 50px 50px;
      animation: progress-animation 2s linear infinite; }
  .create-loading-mask .mask-text {
    font-size: 16px;
    line-height: 24px;
    color: var(--qtd-ai-text-color-hover-1); }

.title-floor h2 {
  color: var(--new-text-1);
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  line-height: 40px; }

.title-floor .desc {
  color: var(--new-text-4);
  text-align: center;
  font-size: 14px;
  line-height: 22px;
  max-width: 668px;
  margin-bottom: 32px; }

.title-floor .content-box {
  row-gap: 24px;
  column-gap: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; }
  .title-floor .content-box .content-box-item {
    display: flex;
    gap: 16px; }
    .title-floor .content-box .content-box-item .img {
      width: 64px;
      height: 64px;
      overflow: hidden;
      flex-shrink: 0;
      border-radius: 8px; }
      .title-floor .content-box .content-box-item .img img {
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .title-floor .content-box .content-box-item .content-box-item-text {
      display: flex;
      flex-direction: column;
      justify-content: center; }
      .title-floor .content-box .content-box-item .content-box-item-text h4 {
        color: var(--new-text-1);
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        margin-bottom: 0; }
      .title-floor .content-box .content-box-item .content-box-item-text span {
        color: var(--new-text-4);
        font-size: 14px;
        line-height: 22px; }

.big-img-floor {
  flex-direction: column; }
  .big-img-floor .big-img-floor-item {
    display: flex;
    gap: 48px;
    width: 100%; }
    .big-img-floor .big-img-floor-item .big-img-floor-item-img, .big-img-floor .big-img-floor-item .big-img-floor-item-text {
      width: calc(50% - 24px); }
    .big-img-floor .big-img-floor-item .big-img-floor-item-img {
      overflow: hidden;
      border-radius: 16px;
      aspect-ratio: 576 / 492;
      max-height: 492px;
      display: flex;
      justify-content: center;
      align-items: center; }
      .big-img-floor .big-img-floor-item .big-img-floor-item-img img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 16px; }
    .big-img-floor .big-img-floor-item .big-img-floor-item-text {
      display: flex;
      flex-direction: column;
      justify-content: center; }
      .big-img-floor .big-img-floor-item .big-img-floor-item-text .title {
        color: var(--new-text-1);
        font-size: 32px;
        font-weight: 600;
        line-height: 40px;
        margin-bottom: 16px; }
      .big-img-floor .big-img-floor-item .big-img-floor-item-text .desc {
        color: var(--new-text-4);
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 32px; }
      .big-img-floor .big-img-floor-item .big-img-floor-item-text .btn {
        display: flex;
        width: 160px;
        padding: 8px 16px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 100px;
        background: var(--qtd-ai-light-color-6);
        color: var(--new-text-1);
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        cursor: pointer;
        transition: all 0.3s ease; }
        .big-img-floor .big-img-floor-item .big-img-floor-item-text .btn:hover {
          opacity: 0.8; }
      .big-img-floor .big-img-floor-item .big-img-floor-item-text .text-group {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 32px; }
        .big-img-floor .big-img-floor-item .big-img-floor-item-text .text-group .text-group-item {
          display: flex;
          gap: 8px; }
          .big-img-floor .big-img-floor-item .big-img-floor-item-text .text-group .text-group-item .img-box {
            width: 48px;
            height: 48px;
            overflow: hidden;
            border-radius: 8px;
            flex-shrink: 0;
            background: var(--qtd-ai-light-color-3); }
            .big-img-floor .big-img-floor-item .big-img-floor-item-text .text-group .text-group-item .img-box img {
              width: 100%;
              height: 100%;
              object-fit: cover; }
          .big-img-floor .big-img-floor-item .big-img-floor-item-text .text-group .text-group-item .text-box {
            display: flex;
            flex-direction: column;
            justify-content: center; }
            .big-img-floor .big-img-floor-item .big-img-floor-item-text .text-group .text-group-item .text-box .text-box-title {
              color: var(--new-text-1);
              font-size: 16px;
              font-weight: 500;
              line-height: 24px;
              margin-bottom: 0; }
            .big-img-floor .big-img-floor-item .big-img-floor-item-text .text-group .text-group-item .text-box .text-box-desc {
              color: var(--new-text-4);
              font-size: 14px;
              line-height: 22px;
              margin-bottom: 0; }
    .big-img-floor .big-img-floor-item:nth-of-type(2n) {
      flex-direction: row-reverse; }

.pic-floor .title {
  color: var(--new-text-1);
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  margin-bottom: 0; }

.pic-floor .desc {
  color: var(--new-text-4);
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 32px; }

.pic-floor .pic-group {
  display: flex;
  width: 100%;
  max-height: 535px;
  overflow: hidden;
  position: relative; }
  .pic-floor .pic-group .preview-masonry-container {
    width: 100%; }
    .pic-floor .pic-group .preview-masonry-container .qtd-ai-card-b .hover-box {
      height: calc(100% - 54px); }
    .pic-floor .pic-group .preview-masonry-container .qtd-ai-card-b .info-box {
      height: 52px; }
      .pic-floor .pic-group .preview-masonry-container .qtd-ai-card-b .info-box .content-text-box p {
        color: var(--new-text-1);
        font-size: 16px;
        font-weight: 600;
        line-height: 24px; }
      .pic-floor .pic-group .preview-masonry-container .qtd-ai-card-b .info-box .title {
        color: var(--new-text-1);
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
        height: 24px;
        flex-shrink: 0;
        margin-bottom: 4px; }
      .pic-floor .pic-group .preview-masonry-container .qtd-ai-card-b .info-box .hot-box-warp .hover-box-top {
        background: #FFF; }
        .pic-floor .pic-group .preview-masonry-container .qtd-ai-card-b .info-box .hot-box-warp .hover-box-top > span {
          color: var(--new-text-4); }
      .pic-floor .pic-group .preview-masonry-container .qtd-ai-card-b .info-box .hot-box-warp .hot-box {
        color: var(--new-text-5); }
  .pic-floor .pic-group .more-btn {
    display: flex;
    width: 100%;
    padding: 48px 0px 24px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    position: absolute;
    bottom: 0px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) -0.16%, #FFF 39.45%); }
    .pic-floor .pic-group .more-btn .btn {
      display: flex;
      width: 194px;
      height: 56px;
      padding: 2px 24px;
      justify-content: center;
      align-items: center;
      gap: 4px;
      border-radius: 43px;
      background: var(--new-grey-3);
      color: var(--new-text-4);
      font-size: 16px;
      line-height: 24px;
      cursor: pointer;
      transition: all 0.3s ease; }
      .pic-floor .pic-group .more-btn .btn:hover {
        color: var(--qtd-ai-text-color-hover-1); }

.step-floor .title {
  color: var(--new-text-1);
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  margin-bottom: 24px; }

.step-floor .step-group {
  width: 100%;
  height: max-content;
  display: flex;
  gap: 24px;
  min-height: 0;
  justify-content: center;
  flex-wrap: wrap; }
  .step-floor .step-group .step-group-item {
    display: flex;
    flex: 1;
    max-width: calc(25% - 18px);
    flex-direction: column;
    padding: 24px;
    min-height: 0;
    background: #F5F5FF;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease; }
    .step-floor .step-group .step-group-item .step-num {
      display: flex;
      padding: 5px 16px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 24px;
      border: 1px solid var(--qtd-ai-text-color-hover-1);
      color: var(--qtd-ai-text-color-hover-1);
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      line-height: 22px;
      width: max-content;
      margin-bottom: 16px; }
    .step-floor .step-group .step-group-item .step-title {
      color: var(--new-text-1);
      font-size: 20px;
      font-weight: 600;
      line-height: 28px;
      margin-bottom: 8px; }
    .step-floor .step-group .step-group-item .step-desc {
      color: var(--new-text-4);
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 16px; }
    .step-floor .step-group .step-group-item .step-group-item-img {
      display: flex;
      align-items: flex-end;
      border-radius: 16px;
      overflow: hidden;
      aspect-ratio: 16/9;
      margin-top: auto; }
      .step-floor .step-group .step-group-item .step-group-item-img img {
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .step-floor .step-group .step-group-item:hover {
      background: #D8FF00; }
      .step-floor .step-group .step-group-item:hover .step-num {
        border-color: var(--new-text-1);
        color: var(--new-text-1); }
      .step-floor .step-group .step-group-item:hover .step-title {
        color: var(--new-text-1); }
      .step-floor .step-group .step-group-item:hover .step-desc {
        color: var(--new-text-1);
        opacity: .7; }

.qa-floor .title {
  margin-bottom: 8px; }

.qa-floor .desc {
  color: var(--new-text-4);
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 32px; }

.qa-floor .qa-group {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between; }
  .qa-floor .qa-group > li {
    display: flex;
    width: calc(50% - 60px);
    max-width: 800px;
    padding: 24px 24px 24px 0px;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    border-bottom: 1px solid #E8E8E8;
    transition: all 0.3s ease; }
    .qa-floor .qa-group > li:nth-last-child(1), .qa-floor .qa-group > li:nth-last-child(2) {
      border-bottom: none; }
    .qa-floor .qa-group > li .q {
      color: #333;
      font-size: 20px;
      font-weight: 500;
      line-height: 24px;
      display: flex; }
      .qa-floor .qa-group > li .q > span {
        flex: 1; }
    .qa-floor .qa-group > li .a {
      color: var(--new-text-4);
      font-size: 16px;
      line-height: 22px;
      display: none; }
    .qa-floor .qa-group > li.active .a {
      display: block; }

.user-evaluate-floor {
  background: var(--qtd-ai-drak-color-6); }
  .user-evaluate-floor .title {
    color: var(--new-text-1);
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    margin-bottom: 8px; }
  .user-evaluate-floor .desc {
    color: var(--new-text-1);
    font-size: 16px;
    line-height: 24px;
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 24px; }
  .user-evaluate-floor .evaluate-content {
    max-width: 1200px;
    margin: 0 auto; }
  .user-evaluate-floor .evaluate-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px; }
    @media (max-width: 1024px) {
      .user-evaluate-floor .evaluate-grid {
        grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 768px) {
      .user-evaluate-floor .evaluate-grid {
        grid-template-columns: 1fr; } }
  .user-evaluate-floor .evaluate-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    color: #333;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer; }
    .user-evaluate-floor .evaluate-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15); }
    .user-evaluate-floor .evaluate-card .card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 16px; }
      .user-evaluate-floor .evaluate-card .card-header .user-info {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%; }
        .user-evaluate-floor .evaluate-card .card-header .user-info .user-avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          object-fit: cover; }
        .user-evaluate-floor .evaluate-card .card-header .user-info .user-details {
          flex: 1; }
          .user-evaluate-floor .evaluate-card .card-header .user-info .user-details .user-name {
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            margin-bottom: 0;
            color: #333; }
          .user-evaluate-floor .evaluate-card .card-header .user-info .user-details .user-platform {
            font-size: 14px;
            line-height: 22px;
            color: #666; }
        .user-evaluate-floor .evaluate-card .card-header .user-info .user-icon {
          width: auto;
          height: 56px; }
      .user-evaluate-floor .evaluate-card .card-header .card-badges .platform-badge {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500; }
        .user-evaluate-floor .evaluate-card .card-header .card-badges .platform-badge.xiaohongshu {
          background: #FF2442;
          color: white; }
        .user-evaluate-floor .evaluate-card .card-header .card-badges .platform-badge.douyin {
          background: #000;
          color: white; }
    .user-evaluate-floor .evaluate-card .rating-section {
      margin-bottom: 16px; }
      .user-evaluate-floor .evaluate-card .rating-section .stars {
        display: flex;
        gap: 2px; }
        .user-evaluate-floor .evaluate-card .rating-section .stars .star {
          font-size: 16px;
          color: #ddd; }
          .user-evaluate-floor .evaluate-card .rating-section .stars .star.filled {
            color: #FFD700; }
    .user-evaluate-floor .evaluate-card .card-content {
      margin-bottom: 16px; }
      .user-evaluate-floor .evaluate-card .card-content .evaluate-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin: 0 0 8px 0; }
      .user-evaluate-floor .evaluate-card .card-content .evaluate-text {
        font-size: 14px;
        line-height: 22px;
        color: #666;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden; }
    .user-evaluate-floor .evaluate-card .card-image {
      margin: 0;
      border-radius: 12px;
      overflow: hidden; }
      .user-evaluate-floor .evaluate-card .card-image img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        display: block; }
  .user-evaluate-floor .try-button {
    color: var(--new-text-1);
    border: none;
    padding: 8px 40px;
    border-radius: 32px;
    border: 1px solid var(--new-text-1);
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease; }
    .user-evaluate-floor .try-button:hover {
      opacity: 0.8; }

.more-href-floor + .more-href-floor {
  padding-top: 0;
  margin-top: -24px; }

.more-href-floor .title {
  margin-bottom: 8px;
  width: 100%;
  text-align: left; }

.more-href-floor .more-href-group {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px; }
  .more-href-floor .more-href-group .more-href-item {
    display: flex;
    height: 32px;
    width: max-content;
    flex-shrink: 0;
    padding: 4px 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    border: 1px solid #E8E8E8;
    background: #FFF;
    color: #333;
    font-size: 14px;
    line-height: 22px;
    transition: all 0.3s ease; }
    .more-href-floor .more-href-group .more-href-item:hover {
      border-color: var(--qtd-ai-text-color-hover-1);
      color: var(--qtd-ai-text-color-hover-1); }

.seo-href-floor .title {
  margin-bottom: 8px;
  width: 100%;
  text-align: left; }

.seo-href-floor .seo-href-group {
  width: 100%;
  display: flex;
  gap: 8px; }
  .seo-href-floor .seo-href-group .seo-href-item {
    display: flex;
    height: 32px;
    padding: 4px 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    border: 1px solid #E8E8E8;
    background: #FFF;
    color: #333;
    font-size: 14px;
    line-height: 22px;
    transition: all 0.3s ease; }
    .seo-href-floor .seo-href-group .seo-href-item:hover {
      border-color: var(--qtd-ai-text-color-hover-1);
      color: var(--qtd-ai-text-color-hover-1); }

.point-floor {
  display: flex;
  gap: 40px;
  flex-direction: row;
  justify-content: center; }
  .point-floor .point-item {
    display: flex;
    align-items: center;
    gap: 8px; }
    .point-floor .point-item img {
      width: 24px;
      height: 24px;
      border-radius: 8px;
      object-fit: cover; }
    .point-floor .point-item span {
      display: inline-block;
      color: var(--new-text-1);
      font-size: 14px;
      font-weight: 600;
      line-height: 22px;
      max-width: 180px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }

.brand-site-floor .desc {
  color: var(--new-text-4);
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 32px; }

.brand-site-floor .brand-site-group {
  display: flex;
  width: 100%;
  gap: 24px;
  overflow: auto; }
  .brand-site-floor .brand-site-group .brand-site-item {
    height: 320px;
    aspect-ratio: 3/4;
    border-radius: 16px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative; }
    .brand-site-floor .brand-site-group .brand-site-item .brand-site-item-title {
      position: absolute;
      top: 28px;
      left: 0;
      width: 100%;
      text-align: center;
      color: var(--new-text-1);
      font-size: 24px;
      font-weight: 600;
      line-height: 32px; }
    .brand-site-floor .brand-site-group .brand-site-item img {
      width: 100%;
      height: 100%;
      object-fit: cover; }

.text-site-floor .title {
  margin-bottom: 0; }

.text-site-floor .desc {
  color: var(--new-text-4);
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 32px; }

.text-site-floor .text-site-group {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%; }
  .text-site-floor .text-site-group .text-site-item {
    display: flex;
    height: 308px;
    max-width: 50%;
    min-width: 308px;
    padding: 24px;
    flex-direction: column;
    flex: 1 0 0;
    border-radius: 16px;
    border: 1px solid #E8E8E8;
    background: #FFF8F5; }
    .text-site-floor .text-site-group .text-site-item .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-bottom: 24px; }
      .text-site-floor .text-site-group .text-site-item .top .site-type {
        height: 24px;
        padding: 0 8px;
        gap: 8px;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: 29px;
        background: #FFF;
        color: var(--new-text-1);
        text-align: center;
        font-size: 12px;
        line-height: 24px; }
      .text-site-floor .text-site-group .text-site-item .top .top-img {
        width: 48px;
        height: 48px;
        object-fit: cover;
        border-radius: 24px; }
    .text-site-floor .text-site-group .text-site-item .site-name {
      display: flex;
      width: max-content;
      height: 40px;
      justify-content: center;
      align-items: center;
      gap: 4px;
      border-radius: 24px;
      color: var(--new-text-1);
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      margin-bottom: 16px; }
      .text-site-floor .text-site-group .text-site-item .site-name img {
        height: 40px;
        width: 100%;
        object-fit: cover;
        border-radius: 24px; }
    .text-site-floor .text-site-group .text-site-item .site-desc {
      color: var(--new-text-4);
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 48px; }
    .text-site-floor .text-site-group .text-site-item .site-btn {
      display: flex;
      width: 254px;
      height: 48px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      border-radius: 88px;
      border: 1px solid #00B277;
      color: #00B277;
      cursor: pointer;
      text-align: center;
      font-size: 16px;
      background: transparent;
      line-height: 22px;
      margin: 0 auto; }

.four-text-floor .title {
  margin-bottom: 0; }

.four-text-floor .desc {
  color: var(--new-text-4);
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 32px; }

.four-text-floor .four-text-group {
  display: flex;
  column-gap: 40px;
  width: 100%;
  row-gap: 32px;
  flex-wrap: wrap; }
  .four-text-floor .four-text-group .four-text-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: calc(50% - 20px); }
    .four-text-floor .four-text-group .four-text-item .top-img {
      aspect-ratio: 16/9;
      border-radius: 16px;
      overflow: hidden;
      width: 100%;
      margin-bottom: 8px; }
      .four-text-floor .four-text-group .four-text-item .top-img img {
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .four-text-floor .four-text-group .four-text-item .bottom-text {
      padding: 0 16px;
      display: flex;
      flex-direction: column;
      gap: 8px; }
      .four-text-floor .four-text-group .four-text-item .bottom-text .bottom-text-title {
        color: var(--new-text-1);
        font-size: 28px;
        font-weight: 600;
        line-height: 36px; }
        .four-text-floor .four-text-group .four-text-item .bottom-text .bottom-text-title .color-text {
          color: var(--qtd-ai-drak-color-6);
          margin-left: 8px; }
      .four-text-floor .four-text-group .four-text-item .bottom-text .bottom-text-desc {
        color: var(--new-text-4);
        font-size: 14px;
        line-height: 22px; }

.product-floor .title {
  margin-bottom: 0; }

.product-floor .desc {
  color: var(--new-text-4);
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 32px; }

.product-floor .product-list {
  display: flex;
  gap: 24px;
  width: 100%; }
  .product-floor .product-list .product-item {
    display: flex;
    flex: 1;
    flex-direction: column; }
    .product-floor .product-list .product-item img {
      width: 100%;
      height: 100%;
      border-radius: 16px;
      object-fit: cover;
      aspect-ratio: 16/9;
      margin-bottom: 24px; }
    .product-floor .product-list .product-item .product-item-title {
      color: var(--qtd-ai-light-func-color-12);
      font-size: 24px;
      font-weight: 600;
      line-height: 32px;
      margin-bottom: 8px; }
    .product-floor .product-list .product-item .product-item-desc {
      color: var(--qtd-ai-light-func-color-10);
      font-size: 16px;
      line-height: 24px; }

.popularization-floor .title {
  margin-bottom: 0; }

.popularization-floor .desc {
  color: var(--new-text-4);
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 32px; }

.popularization-floor .popularization-list {
  display: flex;
  gap: 16px; }
  .popularization-floor .popularization-list .popularization-item {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    flex: 1;
    overflow: hidden;
    border: 1px solid #E8E8E8;
    background: #FAFAFA; }
    .popularization-floor .popularization-list .popularization-item img {
      width: 100%;
      object-fit: cover;
      aspect-ratio: 16/9; }
    .popularization-floor .popularization-list .popularization-item .popularization-item-content {
      display: flex;
      padding: 16px 12px;
      flex-direction: column;
      align-items: flex-start;
      flex: 1 0 0;
      align-self: stretch; }
      .popularization-floor .popularization-list .popularization-item .popularization-item-content .popularization-item-title {
        color: var(--new-text-1);
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        margin-bottom: 0; }
      .popularization-floor .popularization-list .popularization-item .popularization-item-content .popularization-item-desc {
        flex: 1;
        color: var(--new-text-1);
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 8px; }
      .popularization-floor .popularization-list .popularization-item .popularization-item-content .popularization-item-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 8px; }
        .popularization-floor .popularization-list .popularization-item .popularization-item-content .popularization-item-list .popularization-item-list-item {
          display: flex;
          gap: 4px; }
          .popularization-floor .popularization-list .popularization-item .popularization-item-content .popularization-item-list .popularization-item-list-item .popularization-item-list-item-title {
            color: var(--new-text-1);
            font-size: 14px;
            font-weight: 600;
            line-height: 22px;
            margin-bottom: 0; }
          .popularization-floor .popularization-list .popularization-item .popularization-item-content .popularization-item-list .popularization-item-list-item .popularization-item-list-item-desc {
            color: var(--new-text-4);
            font-size: 14px;
            line-height: 22px;
            max-height: 44px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden; }
            .popularization-floor .popularization-list .popularization-item .popularization-item-content .popularization-item-list .popularization-item-list-item .popularization-item-list-item-desc a {
              color: #1980FF;
              text-decoration: underline; }
      .popularization-floor .popularization-list .popularization-item .popularization-item-content .popularization-item-btn {
        display: flex;
        padding: 8px 16px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 100px;
        border: 1px solid #D8D8D8;
        box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
        color: var(--new-text-1);
        text-align: center;
        font-size: 16px;
        line-height: 24px;
        transition: all 0.3s ease; }
        .popularization-floor .popularization-list .popularization-item .popularization-item-content .popularization-item-btn:hover {
          background: var(--qtd-ai-drak-color-6);
          color: var(--new-text-1); }

.img-note-floor .title {
  margin-bottom: 0; }

.img-note-floor .desc {
  color: var(--new-text-4);
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 32px; }

.img-note-floor .img-note-list {
  display: flex;
  gap: 24px; }
  .img-note-floor .img-note-list .img-note-item {
    display: flex;
    flex-direction: column; }
    .img-note-floor .img-note-list .img-note-item img {
      width: 100%;
      height: 100%;
      max-width: 280px;
      object-fit: cover;
      border-radius: 16px;
      aspect-ratio: 16/9;
      margin-bottom: 12px; }
    .img-note-floor .img-note-list .img-note-item .img-note-item-title {
      color: var(--new-text-1);
      font-size: 20px;
      font-weight: 600;
      line-height: 28px;
      margin-bottom: 4px; }
    .img-note-floor .img-note-list .img-note-item .img-note-item-desc {
      color: var(--new-text-4);
      font-size: 14px;
      line-height: 22px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden; }

.long-text-floor {
  display: flex;
  width: 100%;
  padding: 32px 24px;
  align-items: center;
  flex-direction: column;
  border-radius: 24px;
  margin: 0 auto;
  background: #FFEBEC; }
  .long-text-floor .title {
    color: var(--new-text-1);
    font-weight: 600;
    margin-bottom: 16px; }
  .long-text-floor .content {
    color: var(--new-text-4);
    font-size: 16px;
    line-height: 24px; }
  .long-text-floor.banner-theme-1 .title {
    color: var(--new-grey-1); }
  .long-text-floor.banner-theme-1 .content {
    color: var(--new-grey-2); }

.tool-floor {
  background-position: center;
  background-size: cover;
  width: 100vw;
  background-repeat: no-repeat; }
  .tool-floor.banner-theme-1 .title {
    color: var(--new-grey-1); }
  .tool-floor.banner-theme-1 .desc {
    color: var(--new-grey-2); }
  .tool-floor .title {
    margin-bottom: 8px; }
  .tool-floor .sub-title {
    color: var(--new-text-1);
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 8px; }
  .tool-floor .desc {
    color: var(--new-text-4);
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 32px; }
  .tool-floor .qtd-history-nav-container {
    display: none; }
  .tool-floor .qtdCreateTaskBox {
    position: unset;
    transform: unset;
    width: 100%;
    min-width: unset; }
    .tool-floor .qtdCreateTaskBox .qtd-model-list-container-wrap .model-list-row {
      bottom: unset;
      top: 38px; }
    .tool-floor .qtdCreateTaskBox .rules {
      display: none; }
  .tool-floor .hishe-ai-container .hishe-ai-empty-container .tools-head {
    display: none; }
  .tool-floor .hishe-ai-container .hishe-ai-empty-container .example-box {
    display: none; }

.experience-floor {
  background: var(--qtd-ai-drak-color-6); }
  .experience-floor .title {
    color: var(--new-text-1);
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    margin-bottom: 8px; }
  .experience-floor .desc {
    color: var(--new-text-1);
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 32px; }
  .experience-floor .btn-group {
    display: flex;
    justify-content: center;
    gap: 24px; }
    .experience-floor .btn-group .btn {
      display: flex;
      padding: 8px 16px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 888px;
      border: 1px solid #D8D8D8;
      background: #FFF;
      box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
      color: var(--new-text-1);
      text-align: center;
      font-size: 16px;
      line-height: 24px;
      transition: all 0.3s ease;
      cursor: pointer; }
      .experience-floor .btn-group .btn:hover {
        background: var(--qtd-ai-drak-color-6);
        color: var(--new-text-1); }
      .experience-floor .btn-group .btn:nth-of-type(2) {
        background: transparent;
        color: var(--new-text-1);
        border-color: var(--new-text-1); }
        .experience-floor .btn-group .btn:nth-of-type(2):hover {
          background: #FFF;
          color: var(--qtd-ai-text-color-hover-1);
          border-color: var(--qtd-ai-text-color-hover-1); }

.title {
  color: var(--qtd-ai-light-func-color-12);
  font-size: 32px;
  font-weight: 600;
  line-height: 40px; }

.new-seo-main .hishe-ai-container {
  width: 100%; }
  .new-seo-main .hishe-ai-container .hishe-ai-empty-container {
    padding: 0; }
    .new-seo-main .hishe-ai-container .hishe-ai-empty-container .ant-spin-nested-loading {
      width: 100%;
      max-width: 800px; }
      .new-seo-main .hishe-ai-container .hishe-ai-empty-container .ant-spin-nested-loading .ant-spin-container {
        width: 100%;
        max-width: 800px; }
    .new-seo-main .hishe-ai-container .hishe-ai-empty-container .upload-box {
      width: 100%;
      max-width: 800px; }
      .new-seo-main .hishe-ai-container .hishe-ai-empty-container .upload-box .text > em {
        display: none; }

@media screen and (max-width: 1440px) {
  .step-floor .step-group .step-group-item {
    max-width: calc(33.33% - 16px); }
  .title-floor .content-box {
    grid-template-columns: 1fr 1fr; } }

@media screen and (max-width: 1200px) {
  .step-floor .step-group .step-group-item {
    max-width: calc(50% - 12px); } }

@media screen and (max-width: 750px) {
  .step-floor .step-group .step-group-item {
    max-width: 100%; }
  .big-img-floor .big-img-floor-item {
    flex-direction: column; }
    .big-img-floor .big-img-floor-item .big-img-floor-item-img {
      width: 100%; }
    .big-img-floor .big-img-floor-item .big-img-floor-item-text {
      width: 100%; }
  .step-floor .step-group {
    flex-wrap: wrap; }
    .step-floor .step-group .step-group-item {
      min-width: 300px; }
  .four-text-floor .four-text-group .four-text-item {
    width: 100%; }
  .new-seo-main .qtdCreateTaskBox .create-submit-box em {
    display: none; }
  .new-seo-main .new-home-container .banner-container .qtdCreateTaskBox .create-task-main .bottom-box-wrap .textarea-box-bottom .qtd-model-list-container label {
    display: none; }
  .new-seo-main .qtdCreateTaskBox .bottom-box-wrap {
    min-width: 0; }
  .new-seo-main .qtdCreateTaskBox .bottom-box-wrap .create-textarea-model-box {
    min-width: 0; }
  .new-seo-main .qtdCreateTaskBox, .new-seo-main .qtd-ai-content .qtdCreateTaskBox {
    min-width: unset;
    width: 100%; }
  .text-site-floor .text-site-group .text-site-item {
    max-width: 100%; }
  .qa-floor .qa-group {
    flex-direction: column; }
    .qa-floor .qa-group > li {
      width: 100%; }
  .title-floor .content-box {
    grid-template-columns: 1fr; } }

.qtd-header-container {
  width: 100vw; }
  .qtd-header-container.new-seo-header {
    background: #FFF;
    border-bottom: 1px solid var(--new-grey-4); }
    .qtd-header-container.new-seo-header::after {
      display: none; }
    .qtd-header-container.new-seo-header .qtd-head-left-info {
      min-width: unset; }
      .qtd-header-container.new-seo-header .qtd-head-left-info .icon-moren-weizhankai, .qtd-header-container.new-seo-header .qtd-head-left-info .icon-moren-weishouqi {
        color: #666; }
      .qtd-header-container.new-seo-header .qtd-head-left-info .logo-box {
        border: 1px solid var(--new-grey-4); }
        .qtd-header-container.new-seo-header .qtd-head-left-info .logo-box .qtd-head-jump-a {
          color: var(--new-text-1); }
    .qtd-header-container.new-seo-header .login-btn {
      display: flex;
      padding: 5px 16px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      border-radius: 100px;
      background: var(--qtd-ai-light-color-6);
      color: var(--new-text-1);
      text-align: center;
      font-size: 14px;
      line-height: 22px; }
    .qtd-header-container.new-seo-header .seo-head-nav {
      display: flex;
      flex: 1;
      overflow: auto; }
      .qtd-header-container.new-seo-header .seo-head-nav .seo-head-nav-item {
        display: flex;
        height: 40px;
        flex-shrink: 0;
        padding: 4px 12px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        color: var(--new-text-1); }
        .qtd-header-container.new-seo-header .seo-head-nav .seo-head-nav-item.active, .qtd-header-container.new-seo-header .seo-head-nav .seo-head-nav-item:hover {
          font-weight: bold; }

.favCreateModal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px; }
  .favCreateModal .field {
    display: flex;
    flex-direction: column; }
  .favCreateModal .errorText {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 4px; }
  .favCreateModal .qySelect {
    position: relative;
    height: 32px;
    width: 100%;
    background-color: var(--qtd-ai-drak-func-color-1);
    color: var(--qtd-ai-text-color-1);
    border-radius: 88px; }
  .favCreateModal .qyTrigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    padding: 0 12px;
    cursor: pointer;
    transition: border-color 0.2s;
    border: 1px solid var(--new-bg-3);
    border-radius: 88px; }
    .favCreateModal .qyTrigger:hover {
      border-color: #ccff00; }
    .favCreateModal .qyTrigger.open {
      border-color: #ccff00; }
  .favCreateModal .qyArrow {
    font-size: 12px;
    color: var(--new-text-3);
    transition: transform 0.2s;
    flex-shrink: 0; }
    .favCreateModal .qyArrow.open {
      transform: rotate(180deg); }
  .favCreateModal .qyDropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    border-radius: 16px;
    border: 1px solid var(--new-border-1);
    background: var(--new-grey-2);
    z-index: 100;
    overflow: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
    max-height: 200px; }
  .favCreateModal .qyOption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 32px;
    padding: 0 12px;
    cursor: pointer;
    transition: background 0.15s; }
    .favCreateModal .qyOption:hover, .favCreateModal .qyOption.active {
      background: var(--new-bg-4); }
    .favCreateModal .qyOption .qyOptionCheck {
      font-size: 12px;
      color: var(--new-text-1); }
  .favCreateModal .footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    padding: 0 !important; }
  .favCreateModal .ownerOption {
    display: flex;
    align-items: center;
    gap: 6px; }
  .favCreateModal .ownerAvatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0; }
  .favCreateModal .ownerTextAvatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: #459FFF;
    font-size: 10px;
    color: #fff; }
  .favCreateModal .ownerName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--new-text-1); }
  .favCreateModal .privateCheck {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none; }
  .favCreateModal .checkBox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 4px;
    background-color: var(--new-grey-3);
    border: 1px solid var(--new-grey-4); }
    .favCreateModal .checkBox i {
      font-size: 10px;
      color: #333; }
    .favCreateModal .checkBox.checked {
      background: #ccff00;
      border-color: #ccff00; }
  .favCreateModal .checkboxLabel {
    color: var(--new-text-2);
    font-size: 14px;
    font-weight: 400; }
  .favCreateModal .checkboxHint {
    color: var(--new-text-3);
    font-size: 14px;
    cursor: default;
    margin-left: 2px; }
  .favCreateModal .footerBtn {
    width: 120px;
    height: 40px;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s var(--qtd-transition-cubic-1); }

@charset "UTF-8";
/* 勿用 .card：易与全局/其它模块重名。默认 3px 实线边；hover 仅多一圈 4px×40% 色环（无模糊投影） */
.miniappCardShell {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 3px solid var(--new-grey-4);
  overflow: visible;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: box-shadow 0.2s ease;
  margin-bottom: 24px; }
  .miniappCardShell:hover {
    /* spread=4px、blur=0：实色外环，不是柔光投影 */
    box-shadow: 0 0 0 4px var(--miniapp-hover-outer-ring, rgba(0, 0, 0, 0.1)); }
  .miniappCardShell:hover .miniappEnterBtn {
    max-width: 200px;
    opacity: 1;
    padding: 0 12px; }

.miniappCardInner {
  border-radius: 13px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0; }

.mediaSection {
  position: relative;
  z-index: 1;
  width: 100%;
  flex-shrink: 0; }

.mediaWrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* 圆角只由 .miniappCardInner 统一裁切，避免双层圆角亚像素缝隙露出底色 */
  border-radius: 0;
  /* 勿用 #000：圆角与 cover 图边缘一旦有 1px 缝，会看起来像「黑边」；浅底更接近页面 */
  background: var(--new-grey-2, #f0f0f0); }

/* 流式布局下 video 用百分比高宽容易铺不满，右侧/底部会露出底色（浅底页面上像「白条」） */
.media {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: none;
  -webkit-filter: none; }

.dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none; }

.dot,
.dotActive {
  width: 8px;
  height: 8px;
  border-radius: 100px;
  flex-shrink: 0; }

.dot {
  background: rgba(255, 255, 255, 0.5); }

.dotActive {
  background: #fff; }

.bottomBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* 固定间距，避免 hover 时 padding/gap 变化造成「整块底部在缩放」 */
  gap: 8px;
  padding: 12px;
  margin-top: -1px;
  padding-top: 13px;
  position: relative;
  z-index: 2;
  border-radius: 0 0 13px 13px;
  transform: translateZ(0); }

.logoWrap {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  align-self: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2); }

@container (max-width: 239.98px) {
  .logoWrap {
    width: 48px;
    height: 48px;
    border-radius: 12px; } }

.logoImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.textCol {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1; }

.miniappTitle {
  color: var(--qtd-fun-color-1, #fff);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0; }

.miniappDesc {
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 22px;
  height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block; }

.defaultTheme {
  background: var(--new-grey-1, #fafafa); }
  .defaultTheme .logoWrap {
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    background: rgba(0, 0, 0, 0.04); }
  .defaultTheme .miniappTitle {
    color: var(--qtd-fun-color-12, #333); }
  .defaultTheme .miniappDesc {
    color: var(--qtd-fun-color-10, #666); }

.dark .miniappTitle {
  color: var(--qtd-fun-color-12, #333); }

.dark .miniappDesc {
  color: var(--qtd-fun-color-10, #666); }

.miniappEnterBtn {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  max-width: 0;
  height: 40px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  box-sizing: border-box;
  background: #fff;
  color: #333;
  border-radius: 500px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  transition: max-width 0.22s ease, opacity 0.2s ease, padding 0.2s ease; }

.miniappEnterLabel {
  flex-shrink: 0; }

.miniappEnterArrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0; }

.feedbackContainer {
  width: 40px;
  padding: 2px;
  height: max-content;
  background-color: var(--new-grey-1);
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 80px;
  right: 4px;
  z-index: 2000; }
  .feedbackContainer .feedbackItem {
    width: 36px;
    height: 52px;
    border-radius: 18px;
    background-color: var(--new-grey-1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s var(--qtd-transition-cubic-1);
    color: var(--new-text-1);
    flex-direction: column;
    font-size: 12px; }
    .feedbackContainer .feedbackItem .icon-PLG-you {
      display: inline-block;
      transform: rotate(-90deg); }
    .feedbackContainer .feedbackItem:hover {
      background-color: var(--new-grey-3); }
  .feedbackContainer .feedbackItemWish:hover {
    background-color: var(--new-grey-3); }
  .feedbackContainer .feedbackWishIcon {
    font-size: 18px;
    line-height: 1; }

.feedbackContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }
  .feedbackContent span {
    color: var(--new-text-1);
    font-size: 12px;
    line-height: 20px; }
  .feedbackContent img {
    width: 200px;
    border-radius: 8px;
    height: 200px;
    margin-bottom: 8px; }
  .feedbackContent .feedbackButtonBox {
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--new-grey-3);
    margin-top: 8px;
    padding-top: 8px; }
    .feedbackContent .feedbackButtonBox > a {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      width: 100%;
      height: 40px;
      border-radius: 40px;
      color: var(--new-text-1);
      font-size: 16px;
      font-weight: 600;
      background-color: var(--new-grey-1);
      border: 1px solid var(--new-grey-4);
      transition: all 0.3s var(--qtd-transition-cubic-1); }
      .feedbackContent .feedbackButtonBox > a:hover {
        background-color: var(--new-grey-4);
        color: var(--new-text-1); }

.feedback-popover {
  padding-right: 0 !important; }
  .feedback-popover .ant-popover-arrow {
    display: none; }
  .feedback-popover .ant-popover-inner {
    border: 0; }
    .feedback-popover .ant-popover-inner .ant-popover-inner-content {
      padding: 16px; }

.wishModal .wishModalSubtitle {
  font-size: 13px;
  color: var(--new-text-3);
  margin-bottom: 20px;
  line-height: 20px; }

.wishModal .wishModalBody {
  display: flex;
  flex-direction: column;
  gap: 20px; }

.wishModal .wishModalField {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.wishModal .wishModalLabel {
  font-size: 14px;
  font-weight: 500;
  color: var(--new-text-1);
  line-height: 22px;
  display: flex;
  align-items: center;
  gap: 4px; }

.wishModal .wishModalRequired {
  color: #ff4d4f;
  font-style: normal; }

.wishModal .wishModalOptional {
  font-size: 12px;
  font-weight: 400;
  color: var(--new-text-3); }

.wishModal .wishModalTypeList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; }

.wishModal .wishModalTypeChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  height: 32px;
  border-radius: 16px;
  border: 1px solid var(--new-grey-4);
  background: var(--new-grey-3);
  color: var(--new-text-2);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s var(--qtd-transition-cubic-1);
  user-select: none; }
  .wishModal .wishModalTypeChip:hover {
    border-color: var(--qtd-ai-light-color-6);
    color: var(--new-text-1); }
  .wishModal .wishModalTypeChip.wishModalTypeChipActive {
    border-color: var(--qtd-ai-light-color-6);
    background: var(--qtd-ai-light-color-6);
    color: #141414;
    font-weight: 600; }

.wishModal .wishModalTextareaWrap {
  position: relative; }

.wishModal .wishModalTextarea {
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--new-grey-4);
  background: var(--new-grey-3);
  color: var(--new-text-1);
  font-size: 14px;
  line-height: 22px;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.2s var(--qtd-transition-cubic-1);
  box-sizing: border-box; }
  .wishModal .wishModalTextarea::placeholder {
    color: var(--new-text-3); }
  .wishModal .wishModalTextarea:focus {
    outline: none;
    border-color: var(--qtd-ai-light-color-6); }

.wishModal .wishModalCharCount {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 12px;
  color: var(--new-text-4);
  pointer-events: none; }

.wishModal .wishModalContactInput {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--new-grey-4);
  background: var(--new-grey-3);
  color: var(--new-text-1);
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s var(--qtd-transition-cubic-1); }
  .wishModal .wishModalContactInput::placeholder {
    color: var(--new-text-3); }
  .wishModal .wishModalContactInput:focus {
    outline: none;
    border-color: var(--qtd-ai-light-color-6); }

.wishModal .wishModalFooter {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px; }

.wishModal .wishModalBtnGhost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 24px;
  border-radius: 20px;
  border: 1px solid var(--new-grey-4);
  background: transparent;
  color: var(--new-text-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s var(--qtd-transition-cubic-1); }
  .wishModal .wishModalBtnGhost:hover {
    background: var(--new-grey-3);
    color: var(--new-text-1); }

.wishModal .wishModalBtnPrimary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 24px;
  border-radius: 20px;
  border: none;
  background: var(--qtd-ai-light-color-6);
  color: #141414;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s; }
  .wishModal .wishModalBtnPrimary:hover:not(:disabled) {
    opacity: 0.85; }
  .wishModal .wishModalBtnPrimary:disabled {
    opacity: 0.4;
    cursor: not-allowed; }

.wishModal .wishModalSuccess {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0 16px;
  gap: 12px;
  text-align: center; }

.wishModal .wishModalSuccessIcon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(216, 255, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1; }

.wishModal .wishModalSuccessTitle {
  font-size: 18px;
  font-weight: 600;
  color: var(--new-text-1);
  line-height: 28px; }

.wishModal .wishModalSuccessDesc {
  font-size: 14px;
  color: var(--new-text-3);
  line-height: 22px; }

.wishModal .wishModalSuccessBtn {
  margin-top: 8px;
  height: 40px;
  padding: 0 32px;
  border-radius: 20px;
  border: none;
  background: var(--qtd-ai-light-color-6);
  color: #141414;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s; }
  .wishModal .wishModalSuccessBtn:hover {
    opacity: 0.85; }

.comingSoonModal .comingSoonModalBody {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  text-align: left; }

.comingSoonModal .comingSoonModalDesc {
  font-size: 14px;
  color: var(--new-text-2);
  line-height: 24px;
  width: 100%; }
  .comingSoonModal .comingSoonModalDesc strong {
    color: var(--new-text-1);
    font-weight: 600; }

.comingSoonModal .comingSoonModalWishLink {
  color: var(--new-text-1);
  cursor: pointer;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px; }
  .comingSoonModal .comingSoonModalWishLink:hover {
    color: var(--new-text-1); }

.comingSoonModal .comingSoonModalFooter {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  width: 100%; }

.comingSoonModal .comingSoonModalBtnGhost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 20px;
  border-radius: 16px;
  border: 1px solid var(--new-grey-4);
  background: transparent;
  color: var(--new-text-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s var(--qtd-transition-cubic-1); }
  .comingSoonModal .comingSoonModalBtnGhost:hover {
    background: var(--new-grey-3);
    color: var(--new-text-1); }

.comingSoonModal .comingSoonModalBtnPrimary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 20px;
  border-radius: 16px;
  border: none;
  background: var(--qtd-ai-light-color-6);
  color: #141414;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s; }
  .comingSoonModal .comingSoonModalBtnPrimary:hover:not(:disabled) {
    opacity: 0.85; }
  .comingSoonModal .comingSoonModalBtnPrimary:disabled {
    opacity: 0.5;
    cursor: not-allowed; }

.CopyrightBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  width: calc(100% + 16px);
  margin-left: -8px;
  min-height: 40px;
  padding: 4px 8px;
  background-color: var(--new-copyright-bg);
  border-radius: 20px; }
  .CopyrightBox .CopyrightBoxLeft {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: max-content; }
    .CopyrightBox .CopyrightBoxLeft .iconImg {
      width: auto;
      height: 22px;
      cursor: pointer; }
    .CopyrightBox .CopyrightBoxLeft .infoText {
      display: flex;
      align-items: center;
      font-size: 14px;
      height: 24px;
      color: var(--qtd-ai-text-color-3); }
      .CopyrightBox .CopyrightBoxLeft .infoText span {
        cursor: pointer; }
        .CopyrightBox .CopyrightBoxLeft .infoText span:hover {
          color: var(--qtd-ai-text-color-1); }
      .CopyrightBox .CopyrightBoxLeft .infoText em {
        cursor: pointer;
        color: #FD8320; }
    .CopyrightBox .CopyrightBoxLeft .button {
      display: flex;
      height: 32px;
      padding: 0px 8px;
      justify-content: center;
      align-items: center;
      border-radius: 88px;
      gap: 4px;
      border: 1px solid var(--qtd-business-color-2);
      background: var(--qtd-fun-color-1);
      cursor: pointer;
      box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.02);
      transition: all 0.3s var(--qtd-transition-cubic-1); }
      .CopyrightBox .CopyrightBoxLeft .button span {
        color: var(--qtd-business-color-5);
        font-size: 12px; }
      .CopyrightBox .CopyrightBoxLeft .button:hover {
        border-color: var(--qtd-business-color-6); }
  .CopyrightBox .CopyrightBoxRight {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: max-content; }
    .CopyrightBox .CopyrightBoxRight .changeUserBtn {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: var(--new-text-4);
      cursor: pointer; }
      .CopyrightBox .CopyrightBoxRight .changeUserBtn:hover {
        color: var(--new-text-1); }
      .CopyrightBox .CopyrightBoxRight .changeUserBtn i {
        font-size: 12px; }
    .CopyrightBox .CopyrightBoxRight .userFace {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      object-fit: cover; }
    .CopyrightBox .CopyrightBoxRight .userName {
      font-size: 14px;
      color: var(--new-text-2); }
    .CopyrightBox .CopyrightBoxRight em {
      font-size: 12px;
      color: var(--new-text-4); }
    .CopyrightBox .CopyrightBoxRight .iconUser {
      font-size: 16px;
      color: var(--qtd-ai-text-color-3); }
    .CopyrightBox .CopyrightBoxRight .iconQy {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px solid var(--qtd-business-color-6);
      font-size: 8px;
      color: var(--qtd-business-color-6); }
    .CopyrightBox .CopyrightBoxRight .qyVipType {
      display: flex;
      align-items: center;
      justify-content: center;
      width: max-content;
      height: 20px;
      line-height: 16px;
      padding: 0px 8px;
      font-size: 12px;
      color: #1980FF;
      border: 1px solid #9ED3FF;
      background-color: #F5FBFF;
      border-radius: 10px; }
      .CopyrightBox .CopyrightBoxRight .qyVipType[data-type="plus"] {
        background: #474747;
        border: 1px solid #F5D993;
        color: #F5D993; }

@media screen and (max-width: 1100px) {
  .CopyrightBox .CopyrightBoxLeft {
    display: none; } }

.qyInfoTooltip span {
  font-size: 12px;
  line-height: 20px;
  color: var(--qtd-ai-text-color-1); }
  .qyInfoTooltip span em {
    text-decoration: underline; }

.wrap {
  box-sizing: border-box; }

.bar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  white-space: nowrap;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-full, 9999px);
  background: var(--display-bg-subtle, #f5f5f5); }

.left {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px); }

.chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: var(--space-1, 4px) var(--space-1-5, 6px);
  border-radius: var(--radius-2-5, 10px);
  font-size: var(--font-size-button-sm, 12px);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.4; }

.warning {
  background: var(--tag-warning-bg, #ffedd5);
  color: var(--tag-warning-fg, #b3450e); }

.info {
  background: var(--tag-info-bg, #ebf3ff);
  color: var(--tag-info-fg, #1957c2); }

.message {
  color: var(--fg-2, #525252);
  font-size: var(--font-size-button-md, 14px);
  line-height: 1.5; }

.action {
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap; }

.body {
  margin: 0;
  color: var(--modal-text-body, #525252);
  font-size: var(--font-size-button-md, 14px);
  line-height: 1.5; }

.footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3, 12px); }

:root {
  --last-fav-label-bg: #1F1F1F; }

.qtd-ai-light-mode {
  --last-fav-label-bg: rgba(0, 0, 0, 0.8); }

.favLabel {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 12px;
  cursor: pointer;
  margin-left: 8px;
  gap: 2px; }
  .favLabel em {
    display: inline-block;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .favLabel i {
    display: flex;
    height: 22px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; }
    .favLabel i.icon-zhongzuo {
      display: none;
      animation: lastFavLabelSpin 2s linear infinite; }
  .favLabel.active i {
    display: none; }
  .favLabel.active i.icon-zhongzuo {
    display: inline-block; }
  .favLabel.card {
    max-width: 160px;
    background-color: #fff;
    border-radius: 16px;
    opacity: 0.8; }
    .favLabel.card:hover {
      opacity: 1; }
    .favLabel.card em {
      color: var(--qtd-fun-color-12); }
    .favLabel.card i {
      color: var(--qtd-fun-color-12); }
  .favLabel.detail {
    min-width: 120px;
    max-width: 240px;
    background-color: var(--last-fav-label-bg);
    border-radius: 20px;
    position: relative; }
    .favLabel.detail em {
      color: var(--qtd-fun-color-1); }
    .favLabel.detail i {
      color: var(--qtd-fun-color-1); }

@keyframes lastFavLabelSpin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

@charset "UTF-8";
:root {
  --new-grey-1: #000000;
  --new-grey-2: #141414;
  --new-grey-3: #1F1F1F;
  --new-grey-4: #333333;
  --new-grey-5: #4D4D4D;
  --new-grey-6: #D8D8D8;
  --new-grey-7: #FFFFFF;
  --new-text-1: #FFFFFF;
  --new-text-2: #FAFAFA;
  --new-text-3: #999999;
  --new-text-4: #666666;
  --new-text-5: #4D4D4D;
  --new-text-6: #333333;
  --new-text-7: #1F1F1F;
  --new-text-8: #141414;
  --new-shadow-1: 0 3px 6px -4px rgba(255, 255, 255, 0.12), 0 6px 16px 0 rgba(255, 255, 255, 0.08), 0 9px 28px 8px rgba(255, 255, 255, 0.05);
  --new-shadow-2: 0 8px 12px 0 rgba(255, 255, 255, 0.3);
  --new-copyright-bg: transparent;
  --left-color-1: #141414;
  --left-color-2: #1F1F1F;
  --left-color-3: #333333;
  --left-color-4: #4D4D4D;
  --left-color-5: #666666;
  --left-color-6: #999999;
  --left-color-7: #FAFAFA;
  --left-color-8: #FFFFFF;
  --left-color-9: #e8e8e8;
  --left-color-10: #333333;
  --left-text-color-1: #FFFFFF;
  --left-text-color-2: #999999;
  --left-text-color-3: #d8d8d8;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0px 4px 4px 0px var(--tw-shadow-color, var(--shadow-color-1, #00000012)), 0px 4px 80px 8px var(--tw-shadow-color, var(--shadow-color-1, #0000001f)), 0px 0px 1px 0px var(--tw-shadow-color, var(--shadow-color-2, #000000aa)); }

.qtd-ai-light-mode {
  --new-grey-1: #FFFFFF;
  --new-grey-2: #FAFAFA;
  --new-grey-3: #F5F5F5;
  --new-grey-4: #E8E8E8;
  --new-grey-5: #D8D8D8;
  --new-grey-6: #333333;
  --new-grey-7: #141414;
  --new-text-1: #333333;
  --new-text-2: #333333;
  --new-text-3: #4D4D4D;
  --new-text-4: #666666;
  --new-text-5: #999999;
  --new-text-6: #FAFAFA;
  --new-text-7: #FFFFFF;
  --new-text-8: #FFFFFF;
  --new-shadow-1: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  --new-shadow-2: 0 8px 12px 0 rgba(0, 0, 0, 0.3);
  --new-copyright-bg: #F5FBFF;
  --left-color-1: #FFFFFF;
  --left-color-3: #F5F5F5;
  --left-color-4: #E8E8E8;
  --left-color-9: #e8e8e8;
  --left-color-10: #E8E8E8;
  --left-text-color-1: #333333;
  --left-text-color-2: #666666;
  --left-text-color-3: #666666; }
  .qtd-ai-light-mode \--tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000; }

/* 1:1 预览区最大边长 */
.extendDrawerWrap .ant-drawer-content {
  overflow: hidden;
  box-shadow: var(--new-shadow-2); }

.extendDrawerWrap .ant-drawer-wrapper-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden; }

.extendDrawerWrap .ant-drawer-body {
  flex: 1;
  min-height: 0;
  overflow: hidden; }

.extendDrawer {
  z-index: 2000; }
  .extendDrawer.ant-drawer-right > .ant-drawer-content-wrapper {
    box-shadow: var(--new-shadow-2); }
  .extendDrawer .ant-drawer-mask {
    backdrop-filter: blur(24px); }
  .extendDrawer .ant-drawer-content-wrapper {
    max-width: 100vw; }

/* 页面 / 内嵌形态：无 Drawer，由父级提供高度（如 min-height: 100vh 或 flex: 1） */
.extendPageRoot {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  background: var(--new-grey-1);
  overflow: hidden; }

/* 工具详情页：底部操作栏贴视口底部，网格区预留空间避免被遮挡 */
.pageFooterFixed .gridWrap {
  padding-bottom: 96px; }

.pageFooterFixed .footer {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 120;
  margin: 0;
  background: var(--new-grey-1);
  border-top: 1px solid var(--new-grey-4);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.12); }

.drawerInner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--new-grey-1); }

.header {
  flex-shrink: 0;
  padding: 16px;
  border-bottom: 1px solid var(--new-grey-4); }

.headerRow {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap; }

.titleBlock {
  min-width: 200px;
  padding-left: 12px; }
  .titleBlock .title {
    font-size: 14px;
    font-weight: 600;
    color: var(--new-text-1);
    line-height: 22px; }
  .titleBlock .subtitle {
    font-size: 12px;
    color: var(--new-text-3);
    line-height: 20px; }

.headerActions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap; }

/* 与 aiHistory .text-box-2 .btn 一致：线框 */
.lineBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 40px;
  padding: 0 16px;
  border-radius: 88px;
  border: 1px solid var(--new-grey-4);
  background: transparent;
  color: var(--new-text-1);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s; }
  .lineBtn .icon {
    font-size: 14px;
    line-height: 1; }
  .lineBtn:hover:not(:disabled) {
    color: var(--new-text-1);
    border-color: var(--new-text-1); }
  .lineBtn:disabled {
    opacity: 0.45;
    cursor: not-allowed; }

/* Figma search-box：整框圆角胶囊 + 右侧竖线分隔的图标区 */
.searchWrap {
  display: flex;
  align-items: stretch;
  width: 232px;
  max-width: 100%;
  border: 1px solid var(--new-grey-4);
  border-radius: 100px;
  background: var(--new-grey-1);
  overflow: hidden;
  transition: border-color 0.2s; }
  .searchWrap:focus-within:not(.searchWrapDisabled) {
    border-color: var(--new-text-1); }

.searchWrapDisabled {
  opacity: 0.45;
  pointer-events: none; }

.searchInput {
  flex: 1;
  min-width: 0;
  border: none !important; }

/* Ant Input / affix 去边框，由外层 searchWrap 描边 */
.searchInput.ant-input,
.searchInput.ant-input-affix-wrapper {
  border: 0 solid transparent !important;
  box-shadow: none !important;
  background: transparent !important; }

.searchInput.ant-input {
  padding: 8px 12px;
  height: 38px;
  font-size: 14px;
  line-height: 22px;
  color: var(--new-text-1);
  border: 0 solid transparent !important; }
  .searchInput.ant-input::placeholder {
    color: #b8b8b8; }

.searchInput.ant-input-affix-wrapper {
  padding: 0 4px 0 12px;
  min-height: 38px;
  height: 38px; }

.searchInput.ant-input-affix-wrapper .ant-input {
  padding: 8px 4px 8px 0;
  height: auto;
  border-radius: 0;
  min-height: 24px;
  font-size: 14px;
  line-height: 22px;
  background: transparent;
  color: var(--new-text-1);
  border: 0 solid transparent !important; }
  .searchInput.ant-input-affix-wrapper .ant-input::placeholder {
    color: #b8b8b8; }

.searchInput.ant-input-affix-wrapper .ant-input-suffix {
  margin-left: 4px; }

.searchIconAddon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border-left: 1px solid var(--new-grey-4);
  flex-shrink: 0;
  color: var(--new-text-4);
  font-size: 14px;
  line-height: 1;
  user-select: none; }

.closeBtn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  color: var(--new-text-3);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0; }
  .closeBtn:hover {
    background: var(--new-grey-3);
    color: var(--new-text-1); }

.body {
  flex: 1;
  display: flex;
  min-height: 0; }

/* Spin 包裹左侧分类 + 右侧网格，保持横向 flex 布局 */
.bodySpin {
  flex: 1;
  display: flex !important;
  min-height: 0;
  max-width: 100%; }
  .bodySpin .ant-spin-container {
    flex: 1;
    display: flex;
    min-height: 0;
    max-width: 100%; }

.sidebarUploadSpin {
  width: 100%;
  flex-shrink: 0; }
  .sidebarUploadSpin .ant-spin-container {
    width: 100%; }

/* 侧栏「已上传」态：窄宽约 200px，纵向堆叠避免左右挤 */
.sidebarUploaded {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--new-grey-4);
  background: var(--new-grey-1);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset, 0 8px 20px rgba(0, 0, 0, 0.06); }

.sidebarUploadedPreview {
  position: relative;
  width: 100%;
  height: 108px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--new-grey-1);
  border: 1px solid var(--new-grey-4);
  display: flex;
  align-items: center;
  justify-content: center; }
  .sidebarUploadedPreview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 10px; }

.sidebarUploadedRemoveIcon {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(0, 0, 0, 0.48);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, transform 0.15s ease; }
  .sidebarUploadedRemoveIcon .icon {
    font-size: 12px;
    line-height: 1; }
  .sidebarUploadedRemoveIcon:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.62); }
  .sidebarUploadedRemoveIcon:active:not(:disabled) {
    transform: scale(0.96); }
  .sidebarUploadedRemoveIcon:disabled {
    opacity: 0.45;
    cursor: not-allowed; }
  .sidebarUploadedRemoveIcon:focus-visible {
    outline: 2px solid var(--new-text-1);
    outline-offset: 2px; }

.sidebarUploadedDims {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--new-text-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  word-break: keep-all; }

/* 侧栏内与 .lineBtn 一致，全宽铺满 */
.sidebarUploadedLineBtn {
  width: 100%;
  box-sizing: border-box; }

.sidebar {
  width: 206px;
  flex-shrink: 0;
  border-right: 1px solid var(--new-grey-4);
  padding: 12px 8px;
  padding-top: 16px;
  padding-left: 0;
  display: flex;
  flex-direction: column; }
  .sidebar .catListWrap {
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow-y: auto; }

.catItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 5px 12px;
  border-radius: 24px;
  cursor: pointer;
  margin-bottom: 2px;
  font-size: 14px;
  color: var(--new-text-1);
  transition: all 0.3s var(--qtd-transition-cubic-1); }
  .catItem:hover {
    background: var(--new-grey-3); }
  .catItem.catItemActive {
    background: var(--new-grey-4);
    font-weight: 600; }

.catLeft {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0; }

.catIcon {
  font-size: 16px;
  flex-shrink: 0; }

.catName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.catCount {
  font-size: 14px;
  color: var(--new-text-3);
  flex-shrink: 0; }

.gridStepLabel {
  padding-left: 2px;
  font-size: 20px;
  font-weight: 700;
  color: var(--new-text-1);
  line-height: 28px;
  padding-bottom: 16px;
  padding-top: 16px;
  margin-left: -16px;
  padding-left: 16px;
  background: var(--new-grey-3);
  position: sticky;
  top: 0;
  z-index: 9; }
  .gridStepLabel em {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--new-text-1);
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    margin-right: 4px;
    text-align: center;
    border: 1px solid var(--new-grey-5); }

.gridWrap {
  flex: 1;
  padding: 16px;
  background: var(--new-grey-3);
  display: flex;
  flex-direction: column; }
  .gridWrap .gridStepContent {
    flex: 1;
    min-height: 0;
    overflow-y: auto; }
  .gridWrap.gridStepLabelWrap {
    padding-top: 0; }
  .gridWrap .sectionTitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--new-text-1);
    line-height: 20px;
    margin: 0 0 12px;
    padding-left: 2px; }

.sectionBlock {
  margin-bottom: 24px; }
  .sectionBlock:last-child {
    margin-bottom: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  width: 100%; }

.card {
  position: relative;
  border-radius: 17px;
  overflow: hidden;
  background: var(--new-grey-1);
  cursor: pointer;
  border: 1px solid var(--new-grey-4);
  transition: border-color 0.15s, box-shadow 0.15s; }
  .card:hover {
    box-shadow: var(--new-shadow-1); }

.cardSelected {
  border-color: var(--new-grey-5);
  outline: 3px solid var(--new-grey-4); }

/*
 * 外层 1:1 正方形 + 限制最大边长；内层为目标输出比例，在正方形内居中；
 * 原图 cover 居中，与裁切弹窗初始 cover 一致。
 */
.cardPreview {
  position: relative;
  width: 100%;
  max-width: 200px;
  max-height: 200px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex;
  border-radius: 16px 16px 0 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--new-grey-3); }

.cardPreviewInner {
  position: relative;
  overflow: hidden;
  flex-shrink: 0; }

.cardPreviewInnerLandscape {
  width: 100%;
  height: auto;
  max-height: 100%; }

.cardPreviewInnerPortrait {
  width: auto;
  max-width: 100%;
  height: 100%; }

.cardPreviewImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block; }

.cardPreviewEmpty {
  position: absolute;
  inset: 0;
  background: var(--new-grey-3); }

.cardCheck {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--new-grey-4);
  background: color-mix(in srgb, var(--new-text-1) 22%, transparent);
  display: flex;
  align-items: center;
  justify-content: center; }

.cardCheckOn {
  background: var(--qtd-ai-light-color-6);
  border-color: var(--qtd-ai-light-color-6);
  font-size: 12px; }

.cardMeta {
  padding: 4px 4px;
  text-align: center; }

.cardName {
  font-size: 14px;
  font-weight: 600;
  color: var(--new-text-1);
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.cardSize {
  font-size: 12px;
  color: var(--new-text-3);
  line-height: 20px; }

.customCard {
  cursor: default;
  /* 勾选在左上，避免与右上删除重叠 */ }
  .customCard .cardPreview {
    cursor: pointer;
    overflow: visible; }
  .customCard .cardCheck {
    left: 8px;
    right: auto; }

/* 与侧栏上传删除钮同形；卡片区用正值定位，避免 .cardPreview overflow 裁切 */
.customCardRemoveIcon {
  top: 6px;
  right: 6px; }

.customDims {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px; }

.customDimsReadonly {
  font-size: 12px;
  color: var(--new-text-5);
  line-height: 22px; }

.customDimSep {
  font-size: 12px;
  color: var(--new-text-4);
  user-select: none; }

.customDimInput {
  width: 64px !important;
  border-radius: 12px;
  border: 0;
  box-shadow: none !important; }
  .customDimInput .ant-input-number-input {
    text-align: center;
    font-size: 12px;
    padding: 0 4px;
    border-radius: 12px; }

.customLockBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--new-grey-3);
  color: var(--new-text-1);
  cursor: pointer;
  transition: background 0.15s; }
  .customLockBtn:hover {
    background: var(--new-grey-4); }
  .customLockBtn .icon {
    font-size: 14px; }

.footer {
  flex-shrink: 0;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap; }

.footerInfo {
  font-size: 14px;
  color: var(--new-text-3); }
  .footerInfo strong {
    color: var(--new-text-1);
    font-weight: 600; }

.footerActions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap; }

.aiRow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--new-text-4);
  cursor: pointer;
  user-select: none; }

.aiRowInput:focus-visible + .aiRowCheck {
  outline: 2px solid var(--new-text-1);
  outline-offset: 2px; }

.aiRowDisabled {
  cursor: not-allowed;
  opacity: 0.5; }

.aiRowInput {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0; }

/* 与卡片右上角 .cardCheck 同形，footer 内为行内圆点（非 absolute） */
.aiRowCheck {
  position: static;
  top: auto;
  right: auto; }

.aiRowText {
  color: var(--new-text-1);
  font-weight: 500; }

/* Tooltip 包裹禁用主按钮时需可接收 hover */
.primaryBtnWrap {
  display: inline-flex;
  vertical-align: middle; }

/* 与 .qtd-ai-button 亮色一致（theme.scss 品牌色） */
.primaryBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 160px;
  height: 40px;
  padding: 5px 20px;
  border-radius: 26px;
  border: none;
  background: var(--qtd-ai-light-color-6);
  color: var(--qtd-ai-text-color-0);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s; }
  .primaryBtn .icon {
    font-size: 16px;
    line-height: 1; }
  .primaryBtn:hover:not(:disabled) {
    background: var(--qtd-ai-light-color-6);
    opacity: 0.92; }
  .primaryBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed; }

.qtFooterContent {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: auto;
  padding: 24px 96px;
  padding-left: 154px;
  background-color: var(--new-bg-1);
  transition: all .3s ease;
  border-top: 1px solid var(--new-bg-2); }
  .qtFooterContent .qtFooterTextBox {
    width: 100%;
    text-align: center;
    padding-top: 16px; }
    .qtFooterContent .qtFooterTextBox p {
      text-align: center;
      color: var(--qtd-ai-text-color-3);
      font-size: 12px;
      line-height: 20px; }
      .qtFooterContent .qtFooterTextBox p a {
        color: var(--qtd-ai-text-color-3); }

* {
  font-family: Arial; }

.pricingPageContainer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-top: 80px; }
  .pricingPageContainer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("//static.qiantucdn.com/aigc/static/images/pricing/background.png");
    background-size: 1176px auto;
    background-position: center -40px;
    background-repeat: no-repeat;
    pointer-events: none; }
  .pricingPageContainer > div {
    position: relative;
    z-index: 1; }
  .pricingPageContainer .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    opacity: 0;
    transition: all 0.3s var(--qtd-transition-cubic-1);
    pointer-events: none;
    background-color: var(--qtd-ai-drak-bg-6);
    z-index: 11;
    background: linear-gradient(0deg, var(--qtd-ai-drak-bg-11) 0%, var(--qtd-ai-drak-bg-4) 40%, var(--qtd-ai-drak-bg-1) 100%); }
    .pricingPageContainer .mask.fixed {
      opacity: 1; }
  .pricingPageContainer .freeBox {
    position: relative;
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 48px; }
    .pricingPageContainer .freeBox .freeTipsBox {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      width: max-content;
      border-radius: 88px;
      border: 2px solid #D2F464;
      background: #F7FFDD;
      padding: 0 16px;
      cursor: pointer; }
      .pricingPageContainer .freeBox .freeTipsBox > img {
        height: 24px;
        width: auto; }
      .pricingPageContainer .freeBox .freeTipsBox span {
        color: #333;
        font-size: 16px;
        font-weight: 600;
        line-height: 24px; }
  .pricingPageContainer .titleBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 48px;
    padding: 0 48px; }
    .pricingPageContainer .titleBox h1 {
      font-family: zihunyuwanti;
      --text-color: var(--new-text-2);
      --shadow-color: #B2FF00;
      transform: translateY(-2px);
      font-size: 32px;
      font-weight: 600;
      line-height: 40px;
      margin-bottom: 0;
      transition: all 0.3s ease;
      text-shadow: -2px -2px 0 var(--shadow-color), 2px -2px 0 var(--shadow-color), -2px 2px 0 var(--shadow-color), 2px 2px 0 var(--shadow-color); }
    .pricingPageContainer .titleBox h2 {
      color: var(--new-text-2);
      text-align: center;
      font-size: 64px;
      font-weight: 600;
      line-height: 72px;
      margin-bottom: 0;
      transition: all 0.3s ease; }
  .pricingPageContainer .freeTimeBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 915px;
    max-width: 100%;
    padding: 24px 56px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    margin: 0 auto;
    margin-bottom: 48px;
    gap: 24px;
    transition: all 0.3s ease; }
    .pricingPageContainer .freeTimeBox .freeTimeLeft {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 8px; }
      .pricingPageContainer .freeTimeBox .freeTimeLeft span:nth-child(1) {
        display: flex;
        align-items: center;
        justify-content: center;
        width: max-content;
        height: 32px;
        line-height: 32px;
        padding: 0 8px;
        border-radius: 32px;
        background-color: #B2FF00;
        color: #333;
        font-size: 16px;
        font-weight: 600;
        overflow: hidden; }
      .pricingPageContainer .freeTimeBox .freeTimeLeft span:nth-child(2) {
        color: #333;
        font-size: 24px;
        line-height: 32px;
        font-weight: 600; }
    .pricingPageContainer .freeTimeBox .freeTimeRight {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px; }
      .pricingPageContainer .freeTimeBox .freeTimeRight .freeTimeRightItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 82px;
        height: 90px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.6);
        box-shadow: 0.12px 0.8px 5.8px 0 rgba(51, 51, 51, 0.25);
        backdrop-filter: blur(2px);
        transition: all 0.3s ease; }
        .pricingPageContainer .freeTimeBox .freeTimeRight .freeTimeRightItem span:nth-child(1) {
          color: #333;
          font-size: 28px;
          font-weight: 600;
          line-height: 36px; }
        .pricingPageContainer .freeTimeBox .freeTimeRight .freeTimeRightItem span:nth-child(2) {
          color: #333;
          font-size: 14px;
          line-height: 22px; }
    .pricingPageContainer .freeTimeBox .freeTimeBg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("//static.qiantucdn.com/aigc/static/images/pricing/pricing-bg.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 0.7;
      border-radius: 24px;
      pointer-events: none;
      z-index: 0; }
  .pricingPageContainer .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 744px;
    padding: 0 48px; }
  .pricingPageContainer .cardBox {
    position: relative;
    width: 100%;
    max-width: 1600px;
    height: auto;
    padding: 0 64px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 32px; }
    .pricingPageContainer .cardBox .singleBuy {
      position: absolute;
      top: 0;
      right: 48px;
      color: #1980FF;
      font-size: 16px;
      width: max-content;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 0 16px;
      cursor: pointer;
      border-radius: 88px;
      transition: all 0.3s ease; }
      .pricingPageContainer .cardBox .singleBuy:hover {
        background: var(--new-grey-3); }
    .pricingPageContainer .cardBox .switchBox {
      position: relative;
      width: max-content;
      height: auto;
      padding: 4px;
      border-radius: 88px;
      background: var(--new-grey-3);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px; }
      .pricingPageContainer .cardBox .switchBox .switchItem {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 160px;
        height: 40px;
        border-radius: 88px;
        cursor: pointer;
        color: var(--new-text-2);
        font-size: 16px;
        font-weight: 600;
        transition: all 0.3s ease; }
        .pricingPageContainer .cardBox .switchBox .switchItem span {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 8px;
          height: 20px;
          border-radius: 32px;
          background-color: #FA5555;
          font-size: 12px;
          color: #fff; }
        .pricingPageContainer .cardBox .switchBox .switchItem:hover {
          background: var(--new-grey-2); }
        .pricingPageContainer .cardBox .switchBox .switchItem.switchItemActive {
          border: 1px solid var(--new-grey-4);
          background: var(--new-grey-1) !important; }
    .pricingPageContainer .cardBox .swiperBox {
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden; }
      .pricingPageContainer .cardBox .swiperBox .swiperButtonPrev, .pricingPageContainer .cardBox .swiperBox .swiperButtonNext {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--new-grey-5);
        border-radius: 50%;
        background: var(--new-grey-1);
        color: var(--new-text-2);
        transition: all 0.3s ease;
        opacity: 0.6; }
        .pricingPageContainer .cardBox .swiperBox .swiperButtonPrev i, .pricingPageContainer .cardBox .swiperBox .swiperButtonNext i {
          display: flex;
          font-size: 20px; }
        .pricingPageContainer .cardBox .swiperBox .swiperButtonPrev:hover, .pricingPageContainer .cardBox .swiperBox .swiperButtonNext:hover {
          opacity: 1 !important; }
        .pricingPageContainer .cardBox .swiperBox .swiperButtonPrev.swiper-button-disabled, .pricingPageContainer .cardBox .swiperBox .swiperButtonNext.swiper-button-disabled {
          opacity: 0 !important;
          pointer-events: none; }
      .pricingPageContainer .cardBox .swiperBox .swiperButtonPrev {
        left: 0; }
        .pricingPageContainer .cardBox .swiperBox .swiperButtonPrev i {
          transform: rotate(180deg); }
      .pricingPageContainer .cardBox .swiperBox .swiperButtonNext {
        right: 0; }
      .pricingPageContainer .cardBox .swiperBox .productSwiper {
        width: 100%;
        height: 100%;
        padding: 16px; }
        .pricingPageContainer .cardBox .swiperBox .productSwiper .swiper-wrapper {
          height: auto !important;
          align-items: stretch; }
      .pricingPageContainer .cardBox .swiperBox .productSlide {
        width: auto;
        height: auto !important;
        align-self: stretch;
        display: flex; }
        .pricingPageContainer .cardBox .swiperBox .productSlide > * {
          flex: 1;
          min-height: 0; }
      .pricingPageContainer .cardBox .swiperBox:hover .swiperButtonPrev, .pricingPageContainer .cardBox .swiperBox:hover .swiperButtonNext {
        opacity: 0.6; }
  .pricingPageContainer .moreDetailButton {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    width: max-content;
    margin-bottom: 80px;
    margin: 0 auto;
    cursor: pointer; }
    .pricingPageContainer .moreDetailButton p {
      color: #00b277;
      font-size: 16px;
      line-height: 24px; }
    .pricingPageContainer .moreDetailButton i {
      font-size: 20px;
      color: #00b277; }
  .pricingPageContainer .recommendProductBox {
    position: relative;
    width: 100%;
    height: auto;
    padding: 56px 64px;
    margin: 0 auto;
    margin-bottom: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; }
    .pricingPageContainer .recommendProductBox .recommendProductBoxTitle {
      color: var(--new-text-5);
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 16px; }
    .pricingPageContainer .recommendProductBox .recommendProductBoxSubTitle {
      color: var(--new-text-2);
      font-size: 32px;
      line-height: 40px;
      font-weight: 600;
      transition: all 0.3s ease; }
    .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      width: max-content;
      height: max-content;
      max-width: 100%;
      margin-top: 40px; }
      .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxLeft {
        width: 400px;
        min-height: 456px;
        padding: 36px 16px 48px 16px;
        border-radius: 16px;
        background: var(--new-grey-3); }
        .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxLeft .recommendProductBoxCardBoxLeftTitle {
          color: var(--new-text-2);
          font-size: 24px;
          line-height: 32px;
          margin-bottom: 36px;
          text-align: center; }
          .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxLeft .recommendProductBoxCardBoxLeftTitle em {
            font-weight: 600; }
        .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxLeft .recommendProductBoxCardBoxLeftItem {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 48px;
          background-color: var(--new-grey-1);
          border-radius: 16px;
          padding: 0 16px;
          margin-bottom: 8px; }
          .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxLeft .recommendProductBoxCardBoxLeftItem span:nth-child(1) {
            color: var(--new-text-2);
            font-size: 16px;
            line-height: 24px; }
            .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxLeft .recommendProductBoxCardBoxLeftItem span:nth-child(1) em {
              font-weight: 600; }
          .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxLeft .recommendProductBoxCardBoxLeftItem span:nth-child(2) {
            color: var(--new-text-4);
            font-size: 16px;
            line-height: 24px;
            font-weight: 600; }
        .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxLeft .recommendProductBoxCardBoxLeftBottom {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 32px; }
          .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxLeft .recommendProductBoxCardBoxLeftBottom span:nth-child(1) {
            color: var(--new-text-2);
            font-size: 20px;
            line-height: 28px;
            font-weight: 600; }
          .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxLeft .recommendProductBoxCardBoxLeftBottom span:nth-child(2) {
            color: var(--new-text-2);
            font-size: 32px;
            line-height: 40px;
            font-weight: 700; }
            .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxLeft .recommendProductBoxCardBoxLeftBottom span:nth-child(2) i {
              font-size: 16px;
              font-weight: 500;
              line-height: 24px; }
            .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxLeft .recommendProductBoxCardBoxLeftBottom span:nth-child(2) em {
              color: var(--new-text-5);
              font-size: 12px;
              line-height: 20px; }
          .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxLeft .recommendProductBoxCardBoxLeftBottom p {
            position: absolute;
            bottom: -20px;
            right: 0;
            color: #A0D911;
            font-size: 12px;
            font-weight: 600;
            line-height: 20px; }
      .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight {
        width: 384px;
        height: 512px;
        border-radius: 16px;
        padding: 28px 24px 24px 24px;
        border: 1px solid #B2FF00;
        background: radial-gradient(55.44% 28.56% at 50% -5.62%, #E5FFA8 0%, var(--new-grey-1) 100%), linear-gradient(180deg, #EBFFF5 0%, var(--new-grey-1) 100%);
        box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        cursor: pointer; }
        .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightTitle {
          color: var(--new-text-5);
          font-size: 20px;
          line-height: 28px;
          margin-bottom: 8px;
          text-align: center; }
        .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightIcon {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 4px;
          margin-bottom: 72px; }
          .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightIcon img {
            width: 32px;
            height: auto; }
          .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightIcon span {
            color: var(--new-text-2);
            font-size: 24px;
            font-weight: 600;
            line-height: 32px; }
        .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightItem {
          display: flex;
          align-items: center;
          gap: 8px;
          margin-bottom: 24px; }
          .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightItem i {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: #A0D911;
            color: #fff;
            font-size: 16px; }
          .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightItem span {
            color: var(--new-text-2);
            font-size: 16px;
            line-height: 24px; }
            .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightItem span em {
              font-weight: 600; }
        .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightLine {
          width: 100%;
          height: 1px;
          background: #B2FF00;
          margin-top: 56px;
          margin-bottom: 24px; }
        .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightPrice {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 36px; }
          .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightPrice span:nth-child(1) {
            color: var(--new-text-4);
            font-size: 16px;
            line-height: 22px; }
          .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightPrice span:nth-child(2) {
            color: var(--new-text-2);
            font-size: 32px;
            line-height: 40px;
            font-weight: 700; }
            .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightPrice span:nth-child(2) i {
              font-size: 16px;
              font-weight: 500;
              line-height: 24px; }
            .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightPrice span:nth-child(2) em {
              color: var(--new-text-5);
              font-size: 12px;
              line-height: 20px; }
          .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightPrice p {
            position: absolute;
            bottom: -20px;
            right: 0;
            color: #A0D911;
            font-size: 12px;
            font-weight: 600;
            line-height: 20px; }
        .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightButton {
          position: relative;
          margin-top: 16px;
          width: max-content;
          height: max-content;
          margin: 0 auto; }
          .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightButton button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 280px;
            height: 48px;
            border-radius: 48px;
            background-color: var(--new-grey-7);
            color: var(--new-text-8);
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s ease;
            cursor: pointer; }
          .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight .recommendProductBoxCardBoxRightButton em {
            position: absolute;
            top: -16px;
            left: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: max-content;
            height: 24px;
            border-radius: 24px;
            background: #B2FF00;
            color: #333;
            font-size: 16px;
            font-weight: 600;
            padding: 0 8px; }
        .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox .recommendProductBoxCardBoxRight:hover .recommendProductBoxCardBoxRightButton button {
          box-shadow: var(--new-shadow-2); }
  .pricingPageContainer .productTableBox {
    position: relative;
    padding: 0 64px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 80px; }
  .pricingPageContainer .qaBox {
    position: relative;
    padding: 0 64px;
    width: 1323px;
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: 80px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center; }
    .pricingPageContainer .qaBox .qaBoxTitle {
      color: var(--new-text-2);
      font-size: 32px;
      line-height: 40px;
      margin-bottom: 32px; }
    .pricingPageContainer .qaBox .qaBoxList {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      width: 100%;
      gap: 24px; }
      .pricingPageContainer .qaBox .qaBoxList > div {
        width: 500px;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px; }
    .pricingPageContainer .qaBox .qaBoxItem {
      position: relative;
      width: 100%;
      border-bottom: 1px solid var(--new-grey-4);
      padding-bottom: 16px; }
      .pricingPageContainer .qaBox .qaBoxItem:last-child {
        border-bottom: none;
        padding-bottom: 0; }
    .pricingPageContainer .qaBox .qaBoxQuestion {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      cursor: pointer;
      color: var(--new-text-3);
      font-size: 16px;
      line-height: 24px;
      transition: all 0.3s ease; }
      .pricingPageContainer .qaBox .qaBoxQuestion span {
        flex: 1;
        padding-right: 16px; }
      .pricingPageContainer .qaBox .qaBoxQuestion .qaBoxIcon {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: var(--new-text-4);
        transition: transform 0.3s ease;
        flex-shrink: 0; }
    .pricingPageContainer .qaBox .qaBoxAnswer {
      position: relative;
      width: 100%;
      margin-top: 16px;
      padding-left: 0;
      color: var(--new-text-4);
      font-size: 14px;
      line-height: 22px; }
      .pricingPageContainer .qaBox .qaBoxAnswer em {
        font-weight: 600;
        color: var(--new-text-3); }
      .pricingPageContainer .qaBox .qaBoxAnswer a {
        color: #1980FF; }
      .pricingPageContainer .qaBox .qaBoxAnswer p {
        margin: 0;
        margin-bottom: 8px; }
        .pricingPageContainer .qaBox .qaBoxAnswer p:last-child {
          margin-bottom: 0; }
      .pricingPageContainer .qaBox .qaBoxAnswer div {
        margin-bottom: 8px; }
        .pricingPageContainer .qaBox .qaBoxAnswer div:last-child {
          margin-bottom: 0; }
      .pricingPageContainer .qaBox .qaBoxAnswer strong {
        color: var(--new-text-2);
        font-weight: 600; }
  .pricingPageContainer .sloganBox {
    position: relative;
    width: 100%;
    padding: 80px 64px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 80px; }
    .pricingPageContainer .sloganBox .sloganBoxContent {
      position: relative;
      width: 100%;
      text-align: center; }
      .pricingPageContainer .sloganBox .sloganBoxContent .sloganBoxTitle {
        color: var(--new-text-2);
        font-size: 32px;
        font-weight: 600;
        line-height: 40px;
        margin-bottom: 16px;
        transition: all 0.3s ease; }
      .pricingPageContainer .sloganBox .sloganBoxContent .sloganBoxSubtitle {
        color: var(--new-text-5);
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 40px;
        transition: all 0.3s ease; }
      .pricingPageContainer .sloganBox .sloganBoxContent a {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        width: 160px;
        height: 40px;
        border-radius: 40px;
        box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
        color: var(--new-text-8);
        background-color: var(--new-grey-7);
        font-size: 16px;
        font-weight: 600;
        transition: all .3s ease; }
        .pricingPageContainer .sloganBox .sloganBoxContent a:hover {
          box-shadow: var(--new-shadow-1); }

@media screen and (max-width: 1545px) {
  .pricingPageContainer .cardBox .singleBuy {
    right: 48px; } }

@media screen and (max-width: 1350px) {
  .pricingPageContainer .freeBox .freeTipsBox {
    display: none; }
  .pricingPageContainer .sloganBox {
    padding: 60px 48px; }
    .pricingPageContainer .sloganBox .sloganBoxContent .sloganBoxTitle {
      font-size: 40px;
      line-height: 48px; }
    .pricingPageContainer .sloganBox .sloganBoxContent .sloganBoxSubtitle {
      font-size: 18px;
      line-height: 26px; } }

@media screen and (max-width: 1010px) {
  .pricingPageContainer .recommendProductBox {
    padding: 56px 0px; }
    .pricingPageContainer .recommendProductBox .recommendProductBoxCardBox {
      gap: 32px; } }

@media screen and (max-width: 840px) {
  .pricingPageContainer .freeTimeBox {
    flex-direction: column;
    align-items: flex-start;
    width: max-content; }
    .pricingPageContainer .freeTimeBox .freeTimeRight .freeTimeRightItem {
      width: 70px; }
  .pricingPageContainer .cardBox .singleBuy {
    opacity: 0;
    pointer-events: none; }
  .pricingPageContainer .recommendProductBox {
    padding: 56px 0px; }
    .pricingPageContainer .recommendProductBox .recommendProductBoxSubTitle {
      font-size: 28px;
      line-height: 32px; }
  .pricingPageContainer .qaBox {
    width: 100%; }
    .pricingPageContainer .qaBox .qaBoxList {
      flex-direction: column;
      align-items: center; } }

@media screen and (max-width: 750px) {
  .pricingPageContainer .titleBox h2 {
    font-size: 40px;
    line-height: 48px; }
  .pricingPageContainer .sloganBox {
    padding: 48px 24px; }
    .pricingPageContainer .sloganBox .sloganBoxContent .sloganBoxTitle {
      font-size: 32px;
      line-height: 40px; }
    .pricingPageContainer .sloganBox .sloganBoxContent .sloganBoxSubtitle {
      font-size: 16px;
      line-height: 24px; }
  .pricingPageContainer .cardBox {
    padding: 0; } }

.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease; }
  .modalOverlay.modalOverlayVisible {
    opacity: 1;
    pointer-events: auto; }
  .modalOverlay .modalOverlayBg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.9);
    filter: blur(10px); }
  .modalOverlay .modalContent {
    position: relative;
    width: 654px;
    height: 472px;
    border-radius: 16px;
    overflow: hidden;
    z-index: 1;
    box-shadow: var(--new-shadow-2); }
    .modalOverlay .modalContent .modalIframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block; }

@charset "UTF-8";
:root {
  --new-grey-1: #000000;
  --new-grey-2: #141414;
  --new-grey-3: #1F1F1F;
  --new-grey-4: #333333;
  --new-grey-5: #4D4D4D;
  --new-grey-6: #D8D8D8;
  --new-grey-7: #FFFFFF;
  --new-text-1: #FFFFFF;
  --new-text-2: #FAFAFA;
  --new-text-3: #999999;
  --new-text-4: #666666;
  --new-text-5: #4D4D4D;
  --new-text-6: #333333;
  --new-text-7: #1F1F1F;
  --new-text-8: #141414;
  --new-shadow-1: 0 3px 6px -4px rgba(255, 255, 255, 0.12), 0 6px 16px 0 rgba(255, 255, 255, 0.08), 0 9px 28px 8px rgba(255, 255, 255, 0.05);
  --new-shadow-2: 0 8px 12px 0 rgba(255, 255, 255, 0.3);
  --new-copyright-bg: transparent;
  --left-color-1: #141414;
  --left-color-2: #1F1F1F;
  --left-color-3: #333333;
  --left-color-4: #4D4D4D;
  --left-color-5: #666666;
  --left-color-6: #999999;
  --left-color-7: #FAFAFA;
  --left-color-8: #FFFFFF;
  --left-color-9: #e8e8e8;
  --left-color-10: #333333;
  --left-text-color-1: #FFFFFF;
  --left-text-color-2: #999999;
  --left-text-color-3: #d8d8d8;
  --tw-inset-shadow: 0 0 #0000;
  --tw-inset-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0px 4px 4px 0px var(--tw-shadow-color, var(--shadow-color-1, #00000012)), 0px 4px 80px 8px var(--tw-shadow-color, var(--shadow-color-1, #0000001f)), 0px 0px 1px 0px var(--tw-shadow-color, var(--shadow-color-2, #000000aa)); }

.qtd-ai-light-mode {
  --new-grey-1: #FFFFFF;
  --new-grey-2: #FAFAFA;
  --new-grey-3: #F5F5F5;
  --new-grey-4: #E8E8E8;
  --new-grey-5: #D8D8D8;
  --new-grey-6: #333333;
  --new-grey-7: #141414;
  --new-text-1: #333333;
  --new-text-2: #333333;
  --new-text-3: #4D4D4D;
  --new-text-4: #666666;
  --new-text-5: #999999;
  --new-text-6: #FAFAFA;
  --new-text-7: #FFFFFF;
  --new-text-8: #FFFFFF;
  --new-shadow-1: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  --new-shadow-2: 0 8px 12px 0 rgba(0, 0, 0, 0.3);
  --new-copyright-bg: #F5FBFF;
  --left-color-1: #FFFFFF;
  --left-color-3: #F5F5F5;
  --left-color-4: #E8E8E8;
  --left-color-9: #e8e8e8;
  --left-color-10: #E8E8E8;
  --left-text-color-1: #333333;
  --left-text-color-2: #666666;
  --left-text-color-3: #666666; }
  .qtd-ai-light-mode \--tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000; }

/* 与 theme.scss --qtd-ai-light-color-6 一致，上传强调仅用此色及 rgba 变体 */
.pageWrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh - 140px);
  max-width: 100%;
  overflow: hidden; }

.pageSpinWrap {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 0 32px;
  flex-direction: column; }
  .pageSpinWrap .ant-spin-container {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column; }

.landingDecor {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 85%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 80% 55% at 18% 12%, rgba(216, 255, 0, 0.12) 0%, transparent 55%), radial-gradient(ellipse 60% 45% at 88% 35%, rgba(216, 255, 0, 0.06) 0%, transparent 50%), linear-gradient(180deg, var(--new-grey-2) 0%, var(--new-grey-1) 42%, var(--new-grey-1) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); }

.landingDecor::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image: linear-gradient(var(--new-grey-4) 1px, transparent 1px), linear-gradient(90deg, var(--new-grey-4) 1px, transparent 1px);
  background-size: 48px 48px; }

/* 左：介绍 + 上传 · 右：分类 + 列表（与 ExtendSizeDrawer 内左右结构一致） */
.splitLayout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 28px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  padding: 8px 0 40px; }

.leftCol {
  flex: 0 0 clamp(260px, 28vw, 320px);
  min-width: 0; }

.rightCol {
  flex: 1;
  min-width: 0;
  min-height: 520px;
  display: flex;
  flex-direction: column; }

@media (max-width: 959px) {
  .splitLayout {
    flex-direction: column;
    align-items: stretch;
    gap: 20px; }
  .leftCol {
    flex: none;
    width: 100%; }
  .rightCol {
    min-height: 65vh; } }

.leftInner {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 16px; }

.landingStepLabel {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--new-text-1);
  line-height: 28px; }
  .landingStepLabel em {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--new-text-1);
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    margin-right: 4px;
    border: 1px solid var(--new-grey-5); }

@media (max-width: 959px) {
  .leftInner {
    position: relative;
    top: auto; } }

.extendPanel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 16px; }
  .extendPanel .extendPageRoot {
    background: transparent;
    overflow: unset; }
    .extendPanel .extendPageRoot .drawerInner {
      background: transparent;
      overflow: unset; }
      .extendPanel .extendPageRoot .drawerInner .body {
        overflow: unset; }
        .extendPanel .extendPageRoot .drawerInner .body .sidebar {
          padding-right: 16px;
          padding-top: 16px; }
      .extendPanel .extendPageRoot .drawerInner .ant-spin-container {
        flex-direction: row; }

.hero {
  margin-bottom: 0; }

.heroEyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qtd-brand-color-5, #25c288); }

.heroEyebrowDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--qtd-brand-color-6, #00b277);
  box-shadow: 0 0 12px var(--qtd-brand-color-outline-2, rgba(0, 178, 119, 0.35));
  animation: extendPulse 2.4s ease-in-out infinite; }

@keyframes extendPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1); }
  50% {
    opacity: 0.65;
    transform: scale(0.92); } }

.heroTitle {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--new-text-1); }

.heroTitleAccent {
  background: linear-gradient(120deg, var(--new-text-1) 0%, var(--qtd-brand-color-4, #4fd19d) 48%, var(--qtd-brand-color-6, #00b277) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; }

.heroLead {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--new-text-4); }

/* 侧栏内上传：不改布局，用体积、光晕与动效拉满注意力 */
.uploadZone {
  position: relative;
  z-index: 0;
  width: 100%;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(216, 255, 0, 0.65) 0%, rgba(216, 255, 0, 0.35) 38%, var(--new-grey-4) 72%, var(--new-grey-4) 100%);
  background-size: 200% 200%;
  animation: uploadBorderShift 5s ease-in-out infinite, uploadGlowPulse 2.8s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(216, 255, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.2) inset, 0 12px 32px rgba(216, 255, 0, 0.2);
  transition: box-shadow 0.35s ease, transform 0.35s ease; }

@keyframes uploadBorderShift {
  0%,
  100% {
    background-position: 0% 50%; }
  50% {
    background-position: 100% 50%; } }

@keyframes uploadGlowPulse {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(216, 255, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.2) inset, 0 12px 32px rgba(216, 255, 0, 0.2); }
  50% {
    box-shadow: 0 0 0 1px rgba(216, 255, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.2) inset, 0 12px 40px rgba(216, 255, 0, 0.38), 0 0 28px rgba(216, 255, 0, 0.28); } }

.uploadZone:hover {
  /* 悬停时暂停脉冲，避免与 hover 冲突 */
  animation: none;
  box-shadow: 0 0 0 1px rgba(216, 255, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 18px 48px rgba(0, 0, 0, 0.35), 0 0 36px rgba(216, 255, 0, 0.35);
  transform: translateY(-2px); }

.uploadZoneInner {
  border-radius: 14px;
  background: linear-gradient(165deg, var(--new-grey-2) 0%, var(--new-grey-3) 100%);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 12px 20px;
  text-align: center;
  cursor: pointer;
  transition: background 0.25s ease; }

.uploadZone:hover .uploadZoneInner {
  background: linear-gradient(165deg, var(--new-grey-3) 0%, var(--new-grey-2) 100%); }

.uploadIconWrap {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border: 1px solid #B2FF00;
  color: #B2FF00;
  box-shadow: 0 4px 14px rgba(178, 255, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  animation: uploadIconPulse 2.4s ease-in-out infinite; }

@keyframes uploadIconPulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 4px 14px rgba(204, 255, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
  50% {
    transform: scale(1.05);
    box-shadow: 0 6px 22px rgba(204, 255, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18); } }

.uploadZone:hover .uploadIconWrap {
  animation: none;
  transform: scale(1.06); }

.uploadIconWrap .icon {
  font-size: 30px;
  line-height: 1; }

.uploadTitle {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--new-text-1); }

.uploadHint {
  margin: 0 0 18px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--new-text-5); }

.uploadCta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: #141414;
  background: linear-gradient(135deg, #EFFF7A 0%, #D8FF00 42%, #B2FF00 100%);
  box-shadow: 0 2px 12px rgba(216, 255, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.2s ease, filter 0.2s ease; }

.uploadCta:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px); }

.uploadCta:disabled {
  opacity: 0.55;
  cursor: not-allowed; }

.uploadCta .icon {
  font-size: 16px; }

.uploadedPanel {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(216, 255, 0, 0.4);
  background: var(--new-grey-2);
  box-shadow: 0 0 0 1px rgba(216, 255, 0, 0.14), 0 8px 24px rgba(0, 0, 0, 0.12); }

.uploadedThumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--new-grey-4);
  background: var(--new-grey-3); }
  .uploadedThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; }

.uploadedMeta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px; }

.uploadedDims {
  font-size: 13px;
  font-weight: 600;
  color: var(--new-text-1); }

.uploadedActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap; }

.replaceBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--new-grey-4);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--new-text-1);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }

.replaceBtn:hover:not(:disabled) {
  border-color: rgba(216, 255, 0, 0.55);
  color: #D8FF00;
  background: rgba(216, 255, 0, 0.1); }

.replaceBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed; }

.replaceBtn .icon {
  font-size: 14px; }

.clearLink {
  padding: 4px 2px;
  border: none;
  background: none;
  font-size: 12px;
  color: var(--new-text-5);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px; }

.clearLink:hover:not(:disabled) {
  color: #C8E830; }

.clearLink:disabled {
  opacity: 0.45;
  cursor: not-allowed; }

.quickTips {
  margin: 0;
  padding: 0 0 0 2px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px; }

.quickTips li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--new-text-5); }

.quickTips .icon {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 14px;
  color: #D8FF00;
  opacity: 0.9; }

.qtd-ai-light-mode .uploadZoneInner {
  background: var(--new-grey-2); }

.qtd-ai-light-mode .uploadCta {
  color: #141414; }

.qtd-ai-light-mode .uploadedPanel {
  background: var(--new-grey-2); }

@media (prefers-reduced-motion: reduce) {
  .uploadZone,
  .uploadIconWrap {
    animation: none !important; }
  .uploadZone:hover {
    transform: none; } }

.sharePageHeader {
  background: var(--new-bg-1); }

.share-page-page .qtdHistoryDetail .qtd-history-new-wrap .qtd-history-detail-center-box {
  width: calc(57.15% - 12px); }

.share-page-page .qtdHistoryDetail .qtd-history-new-wrap .qtd-history-detail-right {
  width: calc(42.85% - 12px); }

.share-page-page .common-content-box {
  width: 100%;
  margin: 0 auto;
  padding-left: 280px;
  padding-right: 280px;
  max-width: 2664px; }

@media screen and (max-width: 2664px) {
  .share-page-page .common-content-box {
    padding-left: 280px;
    padding-right: 280px; } }

@media screen and (max-width: 2384px) {
  .share-page-page .qtdHistoryDetail .qtd-history-new-wrap .qtd-history-detail-center-box {
    width: calc(50% - 12px); }
  .share-page-page .qtdHistoryDetail .qtd-history-new-wrap .qtd-history-detail-right {
    width: calc(50% - 12px); }
  .share-page-page .common-content-box {
    padding-left: 160px;
    padding-right: 160px; } }

@media screen and (max-width: 1880px) {
  .share-page-page .qtdHistoryDetail .qtd-history-new-wrap .qtd-history-detail-center-box {
    width: calc(60% - 12px); }
  .share-page-page .qtdHistoryDetail .qtd-history-new-wrap .qtd-history-detail-right {
    width: calc(40% - 12px); }
  .share-page-page .common-content-box {
    padding-left: 120px;
    padding-right: 120px; } }

@media screen and (max-width: 1536px) {
  .share-page-page .common-content-box {
    padding-left: 80px;
    padding-right: 80px; } }

@media screen and (max-width: 1336px) {
  .share-page-page .qtdHistoryDetail .qtd-history-new-wrap .qtd-history-detail-center-box {
    width: calc(50% - 12px); }
  .share-page-page .qtdHistoryDetail .qtd-history-new-wrap .qtd-history-detail-right {
    width: calc(50% - 12px); }
  .share-page-page .common-content-box {
    padding-left: 80px;
    padding-right: 80px; } }

@media screen and (max-width: 1096px) {
  .share-page-page .common-content-box {
    padding-left: 64px;
    padding-right: 64px; } }

@media screen and (max-width: 824px) {
  .share-page-page .common-content-box {
    padding-left: 32px;
    padding-right: 32px; } }

.picEditCore {
  position: relative;
  width: 100%;
  flex: 1;
  height: 100%;
  min-height: 0; }
  .picEditCore * {
    user-select: none; }
  .picEditCore:focus, .picEditCore:focus-visible {
    outline: none; }
  .picEditCore.picEditCoreReadyOnly {
    pointer-events: none; }

.picEditCoreCanvas {
  position: absolute;
  user-select: none;
  transform-origin: top left; }

@charset "UTF-8";
.elementWrap {
  position: absolute;
  cursor: pointer;
  outline: 1px solid transparent;
  transition: outline 0.3s ease-in-out;
  user-select: none; }
  .elementWrap * {
    user-select: none; }
  .elementWrap:hover {
    outline: 1px solid var(--qtd-ai-text-color-hover-1); }
  .elementWrap.elementWrapNoHover:hover {
    outline: 1px solid transparent; }
  .elementWrap .elementLoadingBox {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(30px); }
    .elementWrap .elementLoadingBox .container {
      position: absolute;
      inset: 0;
      z-index: 20; }
    .elementWrap .elementLoadingBox .generation-box {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 16px;
      background: linear-gradient(101deg, rgba(52, 137, 255, 0.7) -31.27%, rgba(52, 77, 150, 0.7) -6.68%, rgba(71, 71, 71, 0.7) 20.92%, rgba(71, 71, 71, 0.6) 60.05%, rgba(73, 94, 78, 0.7) 88.7%, rgba(117, 240, 179, 0.7) 131.79%);
      backdrop-filter: blur(20px);
      overflow: hidden; }
    .elementWrap .elementLoadingBox .noise {
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, rgba(66, 211, 146, 0.1), rgba(87, 190, 255, 0.1));
      filter: blur(5px);
      animation: noiseAnimation 3s infinite; }
    .elementWrap .elementLoadingBox .scan {
      position: absolute;
      width: 100%;
      height: 2px;
      background: linear-gradient(to right, transparent, #42d392, #57beff, transparent);
      animation: scanning 2s ease-in-out infinite; }
    .elementWrap .elementLoadingBox .progress {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #fff; }
    .elementWrap .elementLoadingBox .progress::after {
      content: "\751F\6210\4E2D";
      opacity: .65;
      animation: loading 2s infinite; }
    .elementWrap .elementLoadingBox .particles {
      position: absolute;
      width: 100%;
      height: 100%; }
    .elementWrap .elementLoadingBox .particle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: #42d392;
      border-radius: 50%; }
    .elementWrap .elementLoadingBox .border-animation {
      position: absolute;
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      top: -2px;
      left: -2px;
      border: 2px solid transparent;
      border-radius: 4px;
      animation: borderRotate 4s linear infinite; }

@keyframes borderRotate {
  0%,
  100% {
    border-image: linear-gradient(45deg, #42d392, #57beff) 1; }
  50% {
    border-image: linear-gradient(225deg, #42d392, #57beff) 1; } }

@keyframes scanning {
  0% {
    top: 0;
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    top: 100%;
    opacity: 0; } }

@keyframes noiseAnimation {
  0%,
  100% {
    opacity: 0.8;
    transform: scale(1); }
  50% {
    opacity: 0.5;
    transform: scale(1.1); } }

@keyframes loading {
  0% {
    content: "\751F\6210\4E2D."; }
  33% {
    content: "\751F\6210\4E2D.."; }
  66% {
    content: "\751F\6210\4E2D..."; } }
    .elementWrap .elementLoadingBox .grid {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
      background-size: 20px 20px;
      animation: gridMove 20s linear infinite; }
    .elementWrap .elementLoadingBox .corners {
      position: absolute;
      width: 100%;
      height: 100%; }
    .elementWrap .elementLoadingBox .corner {
      position: absolute;
      width: 10px;
      height: 10px;
      border: 2px solid #42d392; }
    .elementWrap .elementLoadingBox .corner:nth-child(1) {
      top: -1px;
      left: -1px;
      border-right: 0;
      border-bottom: 0; }
    .elementWrap .elementLoadingBox .corner:nth-child(2) {
      top: -1px;
      right: -1px;
      border-left: 0;
      border-bottom: 0; }
    .elementWrap .elementLoadingBox .corner:nth-child(3) {
      bottom: -1px;
      left: -1px;
      border-right: 0;
      border-top: 0; }
    .elementWrap .elementLoadingBox .corner:nth-child(4) {
      bottom: -1px;
      right: -1px;
      border-left: 0;
      border-top: 0; }

@keyframes gridMove {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(20px); } }
    .elementWrap .elementLoadingBox .status {
      position: absolute;
      top: -25px;
      left: 0;
      width: 100%;
      text-align: center;
      color: #42d392;
      font-family: "Arial", sans-serif;
      font-size: 12px;
      letter-spacing: 1px;
      text-transform: uppercase; }
    .elementWrap .elementLoadingBox .steps {
      position: absolute;
      bottom: -50px;
      left: 0;
      width: 100%;
      height: 3px;
      background: #1a1a1a;
      border-radius: 3px;
      overflow: hidden; }
    .elementWrap .elementLoadingBox .steps::after {
      content: "";
      position: absolute;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, #42d392, #57beff);
      animation: progress 2s ease-in-out infinite; }

@keyframes progress {
  0% {
    left: -50%; }
  100% {
    left: 100%; } }

.imageElementLoading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); }

.imageElementWrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative; }
  .imageElementWrap .imageElement {
    width: 100%;
    height: 100%;
    max-width: unset; }
  .imageElementWrap img {
    user-select: none;
    pointer-events: none;
    background-image: none !important; }

.textElementWrap {
  white-space: pre-line;
  overflow-wrap: break-word; }
  .textElementWrap .textElementspecificLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: inherit; }
  .textElementWrap span:focus {
    outline: none; }
  .textElementWrap .text-loading-box {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); }

.groupElementWrap {
  position: relative; }

.moveToolWrap {
  position: absolute;
  outline: 2px solid var(--qtd-ai-drak-color-6);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), 0px -1px 3px 0px rgba(0, 0, 0, 0.25), 0px 1px 4px 0px rgba(0, 0, 0, 0.45);
  cursor: move;
  z-index: 100;
  pointer-events: none; }
  .moveToolWrap .tip-box {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--qtd-ai-drak-func-color-6);
    border-radius: 4px;
    color: var(--qtd-ai-text-color-2);
    font-size: 12px;
    text-align: center;
    padding: 4px 8px;
    width: 120px; }
  .moveToolWrap .movePoint {
    width: 10px;
    height: 10px;
    position: absolute;
    border-radius: 24px;
    border: 1px solid #e8e8e8;
    background: var(--qtd-ai-drak-color-6);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
    pointer-events: auto; }
    .moveToolWrap .movePoint.movePointTopLeft {
      top: -6px;
      left: -6px;
      cursor: nw-resize; }
    .moveToolWrap .movePoint.movePointTopRight {
      top: -6px;
      right: -6px;
      cursor: ne-resize; }
    .moveToolWrap .movePoint.movePointBottomLeft {
      bottom: -6px;
      left: -6px;
      cursor: sw-resize; }
    .moveToolWrap .movePoint.movePointBottomRight {
      bottom: -6px;
      right: -6px;
      cursor: se-resize; }
    .moveToolWrap .movePoint.movePointLeft {
      top: 50%;
      left: -6px;
      height: 20px;
      width: 8px;
      transform: translateY(-50%);
      cursor: w-resize; }
    .moveToolWrap .movePoint.movePointRight {
      top: 50%;
      right: -6px;
      height: 20px;
      width: 8px;
      transform: translateY(-50%);
      cursor: e-resize; }
    .moveToolWrap .movePoint.movePointTop {
      top: -6px;
      left: 50%;
      width: 20px;
      height: 8px;
      transform: translateX(-50%);
      cursor: n-resize; }
    .moveToolWrap .movePoint.movePointBottom {
      bottom: -6px;
      left: 50%;
      width: 20px;
      height: 8px;
      transform: translateX(-50%);
      cursor: s-resize; }

.textSelectedBoxWrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  z-index: 10; }

.textSelectedBox {
  display: flex;
  padding: 8px;
  gap: 12px;
  justify-content: center;
  z-index: 10;
  border-radius: 12px;
  width: max-content;
  position: relative;
  align-items: center;
  flex-shrink: 0;
  background: linear-gradient(99deg, rgba(52, 137, 255, 0.85) -26.09%, rgba(52, 77, 150, 0.85) 0.26%, rgba(71, 71, 71, 0.85) 29.84%, rgba(71, 71, 71, 0.72) 71.77%, rgba(73, 94, 78, 0.85) 102.46%, rgba(117, 240, 179, 0.85) 148.63%);
  box-shadow: 0 4px 40px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25); }
  .textSelectedBox .ant-divider {
    border-color: var(--qtd-ai-drak-func-color-8); }
  .textSelectedBox .textToolInput {
    width: 240px;
    padding-right: 4px;
    border: 0;
    background: transparent; }
  .textSelectedBox .textToolFontSelect {
    width: 160px;
    color: var(--qtd-ai-text-color-1); }
    .textSelectedBox .textToolFontSelect.ant-select-focused .ant-select-selector {
      border-color: var(--qtd-ai-drak-color-6) !important; }
    .textSelectedBox .textToolFontSelect .ant-select-selector {
      background: var(--qtd-ai-drak-func-color-1);
      border-color: var(--qtd-ai-drak-func-color-4);
      border-radius: 8px; }
    .textSelectedBox .textToolFontSelect:hover .ant-select-selector, .textSelectedBox .textToolFontSelect:focus .ant-select-selector, .textSelectedBox .textToolFontSelect:active .ant-select-selector {
      border-color: var(--qtd-ai-drak-color-6); }
    .textSelectedBox .textToolFontSelect .ant-select-arrow {
      color: var(--qtd-ai-text-color-1); }
  .textSelectedBox .ant-btn-text {
    color: var(--qtd-ai-text-color-2);
    border-radius: 8px;
    font-size: 14px; }
    .textSelectedBox .ant-btn-text:hover {
      color: var(--qtd-ai-text-color-1);
      background: var(--qtd-ai-drak-func-color-3); }
  .textSelectedBox .colorItemBox {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--qtd-ai-drak-func-color-4);
    background: var(--qtd-ai-drak-func-color-3);
    cursor: pointer; }
  .textSelectedBox .selectColorPickerBox {
    position: absolute;
    right: 0;
    bottom: 64px; }
  .textSelectedBox .ui-color-picker {
    flex-shrink: 0;
    padding: 12px;
    border-radius: 8px;
    background: var(--qtd-ai-drak-func-color-4); }
    .textSelectedBox .ui-color-picker .gradient-controls {
      display: none; }
    .textSelectedBox .ui-color-picker .picker-area {
      padding: 0; }
      .textSelectedBox .ui-color-picker .picker-area .picking-area-overlay1 {
        border-radius: 8px; }
      .textSelectedBox .ui-color-picker .picker-area .preview {
        margin-bottom: 0; }
        .textSelectedBox .ui-color-picker .picker-area .preview .color-hue-alpha {
          align-items: center;
          justify-content: center; }
    .textSelectedBox .ui-color-picker .color-preview-area {
      display: none; }

.textToolFontSelectPopup .ant-select-item.ant-select-item-option-selected {
  background: #E8E8E8; }

.moveCanvasMask {
  position: absolute;
  top: 0;
  left: 0;
  cursor: move;
  width: 100%;
  height: 100%;
  z-index: 1000; }

.imageCutWrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  pointer-events: none; }
  .imageCutWrap .imageCutBox {
    position: absolute;
    transform-origin: top left; }
    .imageCutWrap .imageCutBox .imageCutImageBox {
      position: absolute; }
      .imageCutWrap .imageCutBox .imageCutImageBox img {
        width: 100%;
        height: 100%;
        max-width: unset;
        position: absolute;
        opacity: 0.2; }
    .imageCutWrap .imageCutBox .imageCutBackBox {
      position: absolute;
      overflow: hidden;
      outline: 2px dashed var(--qtd-ai-drak-color-6); }
      .imageCutWrap .imageCutBox .imageCutBackBox img {
        position: absolute;
        max-width: unset; }
    .imageCutWrap .imageCutBox .imgCutToolWrapBox {
      position: absolute;
      z-index: 10; }
  .imageCutWrap .imgCutToolWrap {
    display: flex;
    height: 56px;
    padding: 4px 8px 4px 16px;
    align-items: center;
    gap: 8px;
    width: 320px;
    min-width: 320px;
    border-radius: 12px;
    background: linear-gradient(99deg, rgba(52, 137, 255, 0.85) -26.09%, rgba(52, 77, 150, 0.85) 0.26%, rgba(71, 71, 71, 0.85) 29.84%, rgba(71, 71, 71, 0.72) 71.77%, rgba(73, 94, 78, 0.85) 102.46%, rgba(117, 240, 179, 0.85) 148.63%);
    box-shadow: 0 4px 40px 0 rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    position: absolute;
    pointer-events: auto;
    bottom: -68px; }
    .imageCutWrap .imgCutToolWrap > span {
      color: var(--qtd-ai-text-color-2);
      font-size: 14px;
      font-weight: 400;
      min-width: 32px;
      line-height: 22px; }

.toolDetailWrap {
  display: flex;
  min-width: 400px;
  flex-direction: column;
  width: 60vw;
  max-width: 768px;
  position: absolute;
  bottom: 80px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(99deg, rgba(52, 137, 255, 0.85) -26.09%, rgba(52, 77, 150, 0.85) 0.26%, rgba(71, 71, 71, 0.85) 29.84%, rgba(71, 71, 71, 0.72) 71.77%, rgba(73, 94, 78, 0.85) 102.46%, rgba(117, 240, 179, 0.85) 148.63%);
  box-shadow: 0 4px 40px 0 rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px); }
  .toolDetailWrap .toolDetailWrapHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px; }
    .toolDetailWrap .toolDetailWrapHeader .ant-divider {
      border-color: var(--qtd-ai-drak-func-color-8); }
    .toolDetailWrap .toolDetailWrapHeader .toolDetailWrapHeaderLeft {
      display: flex;
      align-items: center;
      gap: 4px; }
      .toolDetailWrap .toolDetailWrapHeader .toolDetailWrapHeaderLeft .title,
      .toolDetailWrap .toolDetailWrapHeader .toolDetailWrapHeaderLeft .titleIcon {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
        background: linear-gradient(97deg, var(--qtd-ai-light-color-5) 0%, var(--qtd-ai-light-color-4) 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent; }
      .toolDetailWrap .toolDetailWrapHeader .toolDetailWrapHeaderLeft .titleIcon {
        font-size: 16px; }
    .toolDetailWrap .toolDetailWrapHeader .toolDetailWrapHeaderCenter {
      display: flex;
      align-items: center;
      flex: 1; }
    .toolDetailWrap .toolDetailWrapHeader .toolDetailWrapHeaderRight {
      display: flex;
      justify-content: center;
      align-items: center; }
    .toolDetailWrap .toolDetailWrapHeader .closeIcon {
      cursor: pointer;
      font-size: 16px;
      color: #999; }

.searchInputWrap {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  transition: all 0.3s ease-in-out; }
  .searchInputWrap:hover {
    width: 240px; }
  .searchInputWrap .searchInputIcon {
    font-size: 16px;
    color: var(--qtd-ai-text-color-3); }
  .searchInputWrap .ant-input-affix-wrapper {
    border-radius: 8px;
    background: var(--qtd-ai-drak-func-color-8);
    border-color: var(--qtd-ai-drak-func-color-10); }
    .searchInputWrap .ant-input-affix-wrapper .ant-input {
      background: var(--qtd-ai-drak-func-color-8); }
      .searchInputWrap .ant-input-affix-wrapper .ant-input:hover, .searchInputWrap .ant-input-affix-wrapper .ant-input:focus {
        border-color: var(--qtd-ai-drak-func-color-8); }
    .searchInputWrap .ant-input-affix-wrapper .ant-input-suffix {
      margin-left: 0; }

.toolTabsWrap {
  display: flex;
  align-items: center;
  gap: 12px; }
  .toolTabsWrap .tabItem {
    color: #999;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    cursor: pointer;
    transition: all 0.3s ease-in-out; }
    .toolTabsWrap .tabItem:hover {
      color: var(--qtd-ai-text-color-1); }
    .toolTabsWrap .tabItem.active {
      color: var(--qtd-ai-text-color-1);
      font-weight: 600; }

.toolDetailContentWrap {
  display: flex;
  max-width: 883px;
  padding: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-height: 220px; }
  .toolDetailContentWrap .toolDetailContentBox {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 16px;
    overflow: hidden;
    flex-wrap: wrap;
    min-height: 104px; }
    .toolDetailContentWrap .toolDetailContentBox .toolDetailContentBoxLoading {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-height: 104px;
      height: 100%;
      color: #999; }

.toolDetailContentTop {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0; }
  .toolDetailContentTop .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px; }
    .toolDetailContentTop .right .lookAllBtn {
      font-size: 14px;
      color: var(--qtd-ai-text-color-2); }
      .toolDetailContentTop .right .lookAllBtn:hover {
        color: var(--qtd-ai-text-color-1); }

.toolDetailPicListWrap {
  display: flex;
  flex-wrap: wrap;
  padding: 16px;
  max-height: 400px;
  min-height: 400px;
  overflow: auto;
  align-content: flex-start;
  gap: 12px; }

.aiInputWrap {
  width: 100%;
  display: flex;
  height: 56px;
  padding: 16px 8px 16px 12px;
  align-items: center;
  border-top: 1px solid var(--qtd-ai-drak-func-color-4);
  border-radius: 0 0 12px 12px; }
  .aiInputWrap .ant-input {
    border: 0;
    background: transparent; }
  .aiInputWrap .ant-btn {
    background: var(--qtd-ai-light-color-6);
    border-color: var(--qtd-ai-light-color-6);
    color: #333;
    border-radius: 26px; }
    .aiInputWrap .ant-btn:hover {
      background: var(--qtd-ai-light-color-6);
      border-color: var(--qtd-ai-light-color-6);
      color: var(--qtd-ai-text-color-1);
      opacity: .8; }
  .aiInputWrap .aiInputIcon {
    font-size: 20px;
    color: var(--qtd-ai-drak-color-6); }
  .aiInputWrap .aiInput {
    flex: 1; }

.cardWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 72px;
  cursor: pointer; }
  .cardWrap.active .cardImgWrap {
    border: 1px solid var(--qtd-ai-drak-color-6); }
  .cardWrap.active .cardTitle {
    color: var(--qtd-ai-drak-color-6); }
  .cardWrap .cardImgWrap {
    display: flex;
    width: 72px;
    height: 72px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: var(--qtd-ai-drak-func-color-2);
    transition: all .3s ease-in-out; }
    .cardWrap .cardImgWrap:hover {
      border: 1px solid var(--qtd-ai-drak-color-6); }
    .cardWrap .cardImgWrap .cardImg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px; }
    .cardWrap .cardImgWrap .ant-color-picker-trigger {
      width: 100%;
      height: 100%;
      border: 0;
      padding: 0; }
      .cardWrap .cardImgWrap .ant-color-picker-trigger .ant-color-picker-clear {
        width: 100%;
        height: 100%; }
      .cardWrap .cardImgWrap .ant-color-picker-trigger .ant-color-picker-color-block {
        width: 100%;
        height: 100%; }
  .cardWrap .cardTitle {
    color: var(--qtd-ai-text-color-2);
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    transition: all .3s ease-in-out; }

.allModalWrap {
  padding: 4px;
  width: max-content;
  max-width: 704px; }
  .allModalWrap .ant-modal-content {
    padding: 0;
    background: linear-gradient(99deg, rgba(52, 137, 255, 0.85) -26.09%, rgba(52, 77, 150, 0.85) 0.26%, rgba(71, 71, 71, 0.85) 29.84%, rgba(71, 71, 71, 0.72) 71.77%, rgba(73, 94, 78, 0.85) 102.46%, rgba(117, 240, 179, 0.85) 148.63%);
    box-shadow: 0 4px 40px 0 rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 12px; }
    .allModalWrap .ant-modal-content .ant-modal-header {
      display: none; }
    .allModalWrap .ant-modal-content .ant-modal-body {
      padding: 0; }
    .allModalWrap .ant-modal-content .ant-modal-close {
      display: none; }
  .allModalWrap .allModalContentWrap {
    display: flex;
    border-radius: 12px;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    width: 100%;
    min-width: 480px; }
    .allModalWrap .allModalContentWrap .allModalLeft {
      border-right: 1px solid var(--qtd-ai-drak-func-color-8);
      background: var(--qtd-ai-drak-func-color-6);
      display: flex;
      flex-direction: column;
      width: 136px;
      flex-shrink: 0;
      padding: 36px 8px 8px 8px;
      align-items: flex-start;
      gap: 10px; }
    .allModalWrap .allModalContentWrap .allModalContent {
      display: flex;
      flex-direction: column;
      width: 100%; }
      .allModalWrap .allModalContentWrap .allModalContent .allModalContentHeader {
        display: flex;
        padding: 12px 16px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--qtd-ai-drak-func-color-8); }
        .allModalWrap .allModalContentWrap .allModalContent .allModalContentHeader .allModalContentHeaderLeft, .allModalWrap .allModalContentWrap .allModalContent .allModalContentHeader .allModalContentHeaderTitle, .allModalWrap .allModalContentWrap .allModalContent .allModalContentHeader .allModalContentHeaderRight {
          flex: 1;
          flex-shrink: 0; }
        .allModalWrap .allModalContentWrap .allModalContent .allModalContentHeader .allModalContentHeaderTitle {
          display: flex;
          align-items: center;
          color: var(--qtd-ai-text-color-1);
          font-size: 12px;
          font-style: normal;
          justify-content: center;
          font-weight: 600;
          line-height: 20px; }
      .allModalWrap .allModalContentWrap .allModalContent .allModalContentFooter {
        display: flex;
        padding: 12px 16px;
        justify-content: flex-end;
        gap: 8px;
        align-items: center;
        border-top: 1px solid var(--qtd-ai-drak-func-color-8); }
        .allModalWrap .allModalContentWrap .allModalContent .allModalContentFooter .ant-btn {
          position: relative;
          height: 40px;
          border-radius: 26px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 4px;
          padding: 0 16px;
          font-size: 16px;
          cursor: pointer;
          background-color: #333;
          border: 1px solid #474747;
          color: rgba(255, 255, 255, 0.65);
          transition: all .3s; }
          .allModalWrap .allModalContentWrap .allModalContent .allModalContentFooter .ant-btn:hover {
            background-color: var(--qtd-ai-drak-color-6);
            border-color: var(--qtd-ai-drak-color-6);
            color: #FFF; }
          .allModalWrap .allModalContentWrap .allModalContent .allModalContentFooter .ant-btn:nth-child(2) {
            background-color: var(--qtd-ai-drak-color-6);
            border-color: var(--qtd-ai-drak-color-6);
            color: #FFF; }
            .allModalWrap .allModalContentWrap .allModalContent .allModalContentFooter .ant-btn:nth-child(2):hover {
              opacity: .8; }

.allModalLeftItem {
  display: flex;
  padding: 5px 8px;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  width: 100%;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  color: var(--qtd-ai-text-color-2);
  transition: all .3s ease-in-out; }
  .allModalLeftItem.active {
    color: var(--qtd-ai-text-color-1);
    background: var(--qtd-ai-drak-func-color-8); }

.changeSizeTool {
  height: 20px;
  width: 100%;
  position: absolute;
  top: -32px;
  right: 0;
  display: flex;
  justify-content: space-between; }
  .changeSizeTool .changeSizeToolRight {
    display: flex;
    gap: 4px;
    font-size: 12px;
    line-height: 20px;
    cursor: pointer;
    transition: all 0.3s ease-in-out; }
    .changeSizeTool .changeSizeToolRight .ant-btn {
      color: #999; }
    .changeSizeTool .changeSizeToolRight > i {
      font-size: 14px; }
  .changeSizeTool .changeSizeListWrap {
    position: fixed;
    top: 0;
    z-index: 9999;
    height: 100vh;
    background: linear-gradient(180deg, #3489FF00 0%, #3489FF 25%, #33BBFF 50%, #75F0B3 75%, #75F0B300 100%);
    padding: 0 2px;
    width: 196px; }
    .changeSizeTool .changeSizeListWrap .changeSizeListWrapBg {
      height: 100%;
      width: 100%;
      padding: 0 8px;
      background: var(--qtd-ai-drak-func-color-3); }
    .changeSizeTool .changeSizeListWrap .swiper {
      height: 100%; }
      .changeSizeTool .changeSizeListWrap .swiper .swiper-slide {
        height: auto; }
    .changeSizeTool .changeSizeListWrap .changeSizeListItem {
      width: 100%;
      display: flex;
      flex-direction: column;
      opacity: .5;
      align-items: center;
      transition: all .3s ease-in-out;
      cursor: pointer; }
      .changeSizeTool .changeSizeListWrap .changeSizeListItem.active {
        opacity: 1;
        width: 100%; }
        .changeSizeTool .changeSizeListWrap .changeSizeListItem.active .changeSizeItemImgBox {
          width: 175px; }
      .changeSizeTool .changeSizeListWrap .changeSizeListItem .changeSizeItemImgBox {
        width: 128px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 8px;
        transition: all .3s ease-in-out; }
      .changeSizeTool .changeSizeListWrap .changeSizeListItem .changeSizeItemTitle {
        color: var(--qtd-ai-text-color-1);
        font-size: 14px;
        line-height: 22px;
        text-align: center; }
      .changeSizeTool .changeSizeListWrap .changeSizeListItem .changeSizeItemSize {
        color: var(--qtd-ai-text-color-2);
        font-size: 12px;
        line-height: 20px;
        text-align: center; }

.moreToolPopover {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  font-size: 14px;
  width: max-content;
  overflow: auto; }
  .moreToolPopover .moreToolRippleWrap {
    display: flex;
    align-items: center;
    padding: 5px 12px;
    cursor: pointer;
    color: var(--qtd-ai-text-color-2);
    min-height: 32px;
    height: 32px;
    gap: 8px;
    border-radius: 4px;
    transition: all 0.3s ease-in-out; }
    .moreToolPopover .moreToolRippleWrap:hover {
      color: var(--qtd-ai-text-color-1);
      background: #fafafa; }
    .moreToolPopover .moreToolRippleWrap > i {
      height: 22px;
      line-height: 22px;
      display: inline-block; }
    .moreToolPopover .moreToolRippleWrap.moreToolRippleWrapSelect {
      background: #f5fffd;
      color: var(--qtd-ai-drak-color-6); }

.textEditBox {
  position: absolute;
  z-index: 100;
  transform-origin: top left; }
  .textEditBox .textEditContentWrap .editorContent {
    outline: none; }

.guideLineWrap {
  position: absolute;
  pointer-events: none;
  z-index: 100;
  transform-origin: top left; }
  .guideLineWrap .guideLineItem {
    position: absolute;
    font-size: 128px;
    background: var(--qtd-ai-drak-color-6); }

.canvas-mask-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none; }
  .canvas-mask-wrap .canvas-mask-top,
  .canvas-mask-wrap .canvas-mask-left,
  .canvas-mask-wrap .canvas-mask-bottom,
  .canvas-mask-wrap .canvas-mask-right {
    background: var(--qtd-ai-drak-bg-3);
    position: absolute; }
  .canvas-mask-wrap .canvas-mask-top {
    width: 100%;
    left: 0;
    right: 0; }
  .canvas-mask-wrap .canvas-mask-left {
    left: 0; }
  .canvas-mask-wrap .canvas-mask-bottom {
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0; }
  .canvas-mask-wrap .canvas-mask-right {
    right: 0; }

.qtd-ai-light-mode .imageCutWrap .imgCutToolWrap {
  background: white;
  box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.12); }

.qtd-ai-light-mode .toolDetailWrap, .qtd-ai-light-mode .textSelectedBox {
  background: white;
  box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.12); }

* {
  box-sizing: border-box; }

.ui-color-picker {
  margin: 8px;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  width: 280px;
  user-select: none; }

.ui-color-picker .gradient-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
  margin-top: 5px;
  height: 24px;
  padding: 0 16px; }

.ui-color-picker .gradient-controls .gradient-type {
  flex: 1;
  display: flex; }

.ui-color-picker .gradient-controls .gradient-type .gradient-type-item {
  height: 28px;
  width: 28px;
  border-radius: 50%;
  position: relative;
  cursor: pointer; }

.ui-color-picker .gradient-controls .gradient-type .gradient-type-item.active::after {
  content: '';
  display: block;
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  border: 2px solid #1F2667;
  border-radius: 50%; }

.ui-color-picker .gradient-controls .gradient-type .gradient-type-item.liner-gradient {
  background: linear-gradient(270deg, #FFFFFF 0%, #1F2667 100%); }

.ui-color-picker .gradient-controls .gradient-type .gradient-type-item.radial-gradient {
  margin-left: 8px;
  background: radial-gradient(circle, #FFFFFF 0%, #1F2667 100%); }

.ui-color-picker .gradient-controls .gradient-degrees-options {
  position: relative; }

.ui-color-picker .gradient-controls .gradient-degrees-options .gradient-degrees {
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  width: 28px;
  height: 28px;
  border: 3px solid #1F2667;
  border-radius: 18px;
  margin-right: 54px; }

.ui-color-picker .gradient-controls .gradient-degrees-options .gradient-degrees .gradient-degree-center {
  position: relative;
  width: 6px;
  height: 22px;
  pointer-events: none; }

.ui-color-picker .gradient-controls .gradient-degrees-options .gradient-degrees .gradient-degree-center .gradient-degree-pointer {
  position: absolute;
  width: 6px;
  height: 6px;
  top: 2px;
  border-radius: 3px;
  background: #1F2667; }

.ui-color-picker .gradient-controls .gradient-degrees-options .gradient-degree-value {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bbbfc5;
  border-radius: 6px; }

.ui-color-picker .gradient-controls .gradient-degrees-options .gradient-degree-value p {
  text-align: center;
  padding: 0 6px; }

.ui-color-picker .picker-area {
  display: flex;
  flex-direction: column;
  padding: 0 16px; }

.ui-color-picker .picker-area.gradient-tab .picking-area {
  margin-bottom: 10px; }

.ui-color-picker .picker-area .picking-area {
  width: 100%;
  height: 160px;
  margin-bottom: 16px;
  position: relative;
  border-radius: 8px; }

.ui-color-picker .picker-area .picking-area:hover {
  cursor: default; }

.ui-color-picker .picker-area .picking-area .picking-area-overlay1 {
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 3px; }

.ui-color-picker .picker-area .picking-area .picking-area-overlay1 .picking-area-overlay2 {
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%);
  border-radius: 8px; }

.ui-color-picker .picker-area .preview {
  display: flex;
  flex-direction: row;
  margin-bottom: 16px; }

.ui-color-picker .picker-area .preview .preview-box {
  box-sizing: border-box;
  height: 36px;
  width: 36px;
  border-radius: 8px;
  border: 1px solid #EBEDF5; }

.ui-color-picker .picker-area .preview .color-hue-alpha {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: 6px; }

.ui-color-picker .picker-area .preview .color-hue-alpha .hue {
  width: 100%;
  position: relative;
  border-radius: 10px;
  margin-bottom: 8px;
  padding: 0 7px;
  background-color: red; }

.ui-color-picker .picker-area .preview .color-hue-alpha .hue .hue-area {
  position: relative;
  height: 14px;
  background: linear-gradient(to right, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080, #ff0000); }

.ui-color-picker .picker-area .preview .color-hue-alpha .alpha {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  height: 14px;
  cursor: pointer; }

.ui-color-picker .picker-area .preview .color-hue-alpha .alpha .gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }

.ui-color-picker .picker-area .preview .color-hue-alpha .alpha .alpha-area {
  width: 100%;
  height: 100%;
  background-size: auto;
  background-position: 50% 50%;
  border-radius: 10px;
  padding: 0 7px; }

.ui-color-picker .picker-area .preview .color-hue-alpha .alpha .alpha-area .alpha-mask {
  width: 100%;
  height: 100%;
  position: relative; }

.ui-color-picker .picker-area .gradient {
  width: 100%;
  height: 14px;
  position: relative;
  cursor: pointer;
  border-radius: 10px;
  margin-bottom: 8px;
  padding: 0 7px; }

.ui-color-picker .picker-area .gradient .gradient-slider-container {
  height: 100%;
  width: 100%;
  position: relative; }

.ui-color-picker .picker-area .picker-pointer {
  position: absolute;
  top: 1px;
  height: 12px;
  width: 12px;
  border: 1px solid #FFFFFF;
  background: transparent;
  border-radius: 50%;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3); }

.ui-color-picker .picker-area .picker-pointer .child-point {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 3px;
  width: 3px;
  background: #FFFFFF;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.33s; }

.ui-color-picker .picker-area .picker-pointer .child-point.active {
  opacity: 1; }

.ui-color-picker .color-preview-area {
  margin-bottom: 8px;
  padding: 0 16px; }

.ui-color-picker .color-preview-area .input-group {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between; }

.ui-color-picker .color-preview-area .input-group .uc-field-group:not(:last-child) {
  margin-right: 7px; }

.ui-color-picker .color-preview-area .hex {
  width: 65px; }

.ui-color-picker .color-preview-area .rgb {
  width: 40px; }

.ui-color-picker .colors {
  padding: 3px 16px 0; }

.ui-color-picker .colors .colors-label {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  cursor: pointer; }

.ui-color-picker .colors .colors-label .uc-icon {
  margin-right: 8px;
  transition: transform 0.3s; }

.ui-color-picker .colors .colors-label .tp-text {
  text-transform: uppercase; }

.ui-color-picker .colors .colors-label.show + .colors-item-container {
  max-height: 80px;
  padding-bottom: 16px; }

.ui-color-picker .colors .colors-label.show .uc-icon {
  transform: rotate(-90deg); }

.ui-color-picker .colors .template {
  display: flex;
  flex-direction: column; }

.ui-color-picker .colors .global {
  display: flex;
  flex-direction: column;
  align-items: flex-start; }

.ui-color-picker .colors .colors-item-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  transition: max-height 0.3s, padding-bottom 0.3s;
  max-height: 0;
  overflow: hidden; }

.ui-color-picker .colors .colors-item-container .colors-item {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background-color: #EBEDF5;
  cursor: pointer;
  position: relative;
  margin-top: 4px;
  flex-shrink: 0; }

.ui-color-picker .colors .colors-item-container .colors-item:not(.plus) {
  border: 1px solid #EBEDF5; }

.ui-color-picker .colors .colors-item-container .colors-item.empty {
  display: flex;
  align-items: center;
  justify-content: center; }

.ui-color-picker .colors .colors-item-container .colors-item.empty .line {
  width: 2px;
  height: 16px;
  background-color: #8892B3;
  border-radius: 1px;
  transform: rotate(45deg); }

.ui-color-picker .colors .colors-item-container .colors-item.plus {
  margin-bottom: 4px; }

.ui-color-picker .colors .colors-item-container .colors-item.plus .uc-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1; }

.ui-color-picker .colors .colors-item-container .colors-item:not(:first-child):not(:nth-child(9)) {
  margin-left: 8px; }

.ui-color-picker .colors .colors-item-container .colors-item .uc-icon {
  position: absolute;
  right: -8px;
  top: -3px;
  opacity: 0;
  transition: opacity 0.3s; }

.ui-color-picker .colors .colors-item-container .colors-item:hover .uc-icon {
  opacity: 1; }

.ui-color-picker .colors .colors-item-container .colors-item.active::after {
  content: '';
  display: block;
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  border: 2px solid #8892B3;
  border-radius: 50%; }

.input-field {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  flex-direction: column; }

.input-field .label {
  font-size: 12px;
  line-height: 15px;
  font-weight: 600;
  margin-top: 6px;
  margin-bottom: 0;
  color: #1F2667; }

.input-field .input-container {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  border-radius: 6px;
  color: #28314d; }

.input-field .input-container .input {
  width: 100%;
  outline: 0;
  color: #1F2667;
  border-radius: inherit;
  border: 1px solid #bbbfc5;
  height: 24px;
  font-size: 12px;
  font-weight: 600;
  padding: 0 6px; }

.posterItemWrap {
  width: 100%; }
  .posterItemWrap .posterItemContent {
    width: 100%;
    height: 100%; }

@charset "UTF-8";
/**
 * 企业工具页 — 延展尺寸上传区（与 CreateBox 输入区宽度/体量对齐，避免沿用全局 800×400 的 upload-box）
 */
.root {
  width: 100%;
  min-width: 0;
  max-width: 100%; }

.spinWrap {
  width: 100%; }
  .spinWrap .ant-spin-container {
    width: 100%; }

.uploadBox {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* 与详情页输入主区域视觉体量接近：约等于多行输入 + 下边距，避免 400px 过高 */
  min-height: 168px;
  max-height: 42vh;
  padding: 20px 16px;
  border-radius: 24px;
  border: 2px dashed var(--new-bg-3);
  background: var(--new-grey-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s; }
  .uploadBox:hover {
    border-color: var(--new-grey-4);
    background: var(--new-grey-3); }

.uploadIcon {
  font-size: 40px;
  line-height: 1;
  color: var(--new-text-1); }

.uploadTitle {
  margin: 0;
  color: var(--new-text-1);
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  text-align: center; }

.uploadHint {
  margin: 0;
  color: var(--new-text-3);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  opacity: 0.85; }

.btnLine {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  height: 36px;
  padding: 0 18px;
  border-radius: 88px;
  background: var(--new-grey-1);
  border: 1px solid var(--new-grey-4);
  color: var(--new-text-1);
  font-size: 14px;
  font-weight: 500; }
  .btnLine .icon {
    font-size: 14px; }

@media screen and (max-width: 960px) {
  .uploadBox {
    min-height: 152px;
    max-height: 50vh;
    padding: 16px 12px; }
  .uploadIcon {
    font-size: 34px; }
  .uploadTitle {
    font-size: 14px; }
  .uploadHint {
    font-size: 12px; } }

@media screen and (max-width: 640px) {
  .uploadBox {
    min-height: 140px;
    border-radius: 20px; } }

.history-panel-text-box {
  width: 100%; }
  .history-panel-text-box .markdown-content {
    color: var(--new-text-2);
    font-size: 14px;
    line-height: 22px;
    word-break: break-word; }
    .history-panel-text-box .markdown-content p:last-of-type {
      display: inline; }
    .history-panel-text-box .markdown-content .copy-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 24px;
      width: 24px;
      margin-left: 4px;
      vertical-align: middle;
      border-radius: 88px;
      background: var(--new-grey-3);
      color: var(--new-text-3);
      cursor: pointer;
      font-size: 12px;
      opacity: 0;
      transition: opacity 0.15s ease; }
      .history-panel-text-box .markdown-content .copy-btn:hover {
        background: var(--new-grey-4);
        color: var(--new-text-1); }
    .history-panel-text-box .markdown-content:hover .copy-btn {
      opacity: 1; }
    .history-panel-text-box .markdown-content p {
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 8px;
      color: var(--new-text-2); }
      .history-panel-text-box .markdown-content p:first-child {
        margin-top: 0; }
      .history-panel-text-box .markdown-content p:last-child {
        margin-bottom: 0; }
    .history-panel-text-box .markdown-content h1 {
      font-size: 20px;
      line-height: 1.4;
      font-weight: 600;
      margin-top: 20px;
      margin-bottom: 8px;
      color: var(--new-text-1); }
    .history-panel-text-box .markdown-content h2 {
      font-size: 18px;
      line-height: 1.4;
      font-weight: 600;
      margin-top: 18px;
      margin-bottom: 8px;
      color: var(--new-text-1); }
    .history-panel-text-box .markdown-content h3, .history-panel-text-box .markdown-content h4, .history-panel-text-box .markdown-content h5, .history-panel-text-box .markdown-content h6 {
      font-size: 16px;
      line-height: 1.4;
      font-weight: 600;
      margin-top: 16px;
      margin-bottom: 8px;
      color: var(--new-text-1); }
    .history-panel-text-box .markdown-content strong {
      font-weight: 600; }
    .history-panel-text-box .markdown-content em {
      font-style: italic; }
    .history-panel-text-box .markdown-content s {
      text-decoration: line-through; }
    .history-panel-text-box .markdown-content u {
      text-decoration: underline; }
    .history-panel-text-box .markdown-content blockquote {
      margin: 12px 0;
      padding-left: 10px;
      border-left: 2px solid var(--new-grey-4);
      color: var(--new-text-3); }
    .history-panel-text-box .markdown-content .code-block-wrap {
      position: relative;
      margin: 16px 0;
      border-radius: 16px;
      border: 1px solid var(--new-grey-4);
      background: var(--new-grey-3);
      overflow: hidden; }
      .history-panel-text-box .markdown-content .code-block-wrap .pre-inner {
        margin: 0;
        padding: 16px;
        background: transparent;
        border: none;
        border-radius: 0; }
        .history-panel-text-box .markdown-content .code-block-wrap .pre-inner code {
          white-space: pre-wrap;
          background: transparent;
          border: none;
          padding: 0;
          height: auto;
          border-radius: 0;
          display: block;
          line-height: 1.5rem; }
      .history-panel-text-box .markdown-content .code-block-wrap .code-copy-btn {
        position: absolute;
        top: 8px;
        right: 8px; }
    .history-panel-text-box .markdown-content code {
      white-space: pre-wrap;
      border-radius: 8px;
      padding: 0 8px;
      line-height: 22px;
      height: 24px;
      display: inline-block;
      border: 1px solid var(--new-grey-4);
      background: var(--new-grey-2);
      font-size: 13px; }
    .history-panel-text-box .markdown-content ul {
      padding-left: 24px;
      margin-bottom: 8px; }
      .history-panel-text-box .markdown-content ul li {
        list-style: disc;
        line-height: 22px; }
    .history-panel-text-box .markdown-content ol {
      padding-left: 24px;
      margin-bottom: 8px; }
      .history-panel-text-box .markdown-content ol li {
        list-style: decimal;
        line-height: 22px; }
    .history-panel-text-box .markdown-content table {
      margin: 16px 0;
      width: 100%;
      border-collapse: collapse; }
      .history-panel-text-box .markdown-content table th,
      .history-panel-text-box .markdown-content table td {
        border: 1px solid var(--new-grey-4);
        border-radius: 4px;
        padding: 8px; }
      .history-panel-text-box .markdown-content table tr:nth-child(even) {
        background: var(--new-grey-2); }
    .history-panel-text-box .markdown-content hr {
      width: 100%;
      height: 1px;
      margin: 16px 0;
      background: var(--new-grey-4);
      border: none; }
    .history-panel-text-box .markdown-content a {
      color: #1890ff;
      text-decoration: underline; }

@charset "UTF-8";
.qyToolDetailContainer {
  background: var(--new-grey-1); }
  .qyToolDetailContainer.is-top-box {
    background: var(--new-grey-2);
    width: 100%; }

/* 与 components/layout/leftNav/index.module.scss .leftNavContainer 宽度一致 */
.qyToolDetailContainerWrap {
  width: 100%;
  height: 100%;
  padding-top: 80px;
  overflow: auto;
  /* ExtendSizeDrawer 固定底栏在视口上 left:0，需让出左侧导航宽度；Layout.leftNavActive 同步展开/收起 */ }
  .qyToolDetailContainerWrap [data-extend-footer] {
    left: 73px;
    right: 0;
    width: auto;
    transition: left 0.3s ease; }
  .qyToolDetailContainerWrap.qyToolDetailLeftNavExpanded [data-extend-footer] {
    left: 241px; }
  .qyToolDetailContainerWrap .extendSizeDrawerInner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: 18px;
    /* ExtendSizeDrawer 页面根节点（Fragment 下首节点） */ }
    .qyToolDetailContainerWrap .extendSizeDrawerInner [data-extend-footer] {
      display: none; }
    .qyToolDetailContainerWrap .extendSizeDrawerInner.extendSizeDrawerInnerActive [data-extend-footer] {
      display: flex; }
    .qyToolDetailContainerWrap .extendSizeDrawerInner .body, .qyToolDetailContainerWrap .extendSizeDrawerInner .extendPageRoot {
      overflow: unset; }
    .qyToolDetailContainerWrap .extendSizeDrawerInner .header {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--new-grey-1); }
    .qyToolDetailContainerWrap .extendSizeDrawerInner .sidebar {
      position: sticky;
      top: 75px;
      height: max-content;
      min-height: calc(100vh - 80px); }
    .qyToolDetailContainerWrap .extendSizeDrawerInner > :first-child {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column; }

/* is-top-box 下方：延展尺寸页面版（仅 ExtendSizeDrawer，上传在顶部 QyToolExtendUploadZone） */
.extendSizeDrawerSection {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 32px;
  box-sizing: border-box;
  background: var(--new-grey-1);
  display: flex;
  flex-direction: column;
  min-height: 400px;
  scroll-margin-top: 96px; }

.detailLoadingContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: var(--new-grey-1); }

.detailHeroSection {
  padding: 80px;
  position: relative; }

.detailHeroContent1 {
  display: flex;
  align-items: center;
  gap: 48px;
  width: 100%;
  min-height: 0;
  max-width: 1720px;
  margin: 0 auto; }
  .detailHeroContent1.hide-upload-reference .qtd-model-list-container-wrap.style-box {
    display: none; }
  .detailHeroContent1.hide-model-type .qtd-model-list-container-wrap.mode-box {
    display: none; }
  .detailHeroContent1.hide-model-select .qtd-model-list-container-wrap.model-box {
    display: none; }
  .detailHeroContent1.hide-param-select .qtd-model-list-container-wrap.attr-box {
    display: none; }

.detailContainerContent {
  position: relative; }

.adminConfigBar {
  display: flex;
  justify-content: flex-end;
  padding: 12px 0 0;
  width: 100%;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  position: absolute; }

.adminConfigBtn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  background: rgba(216, 255, 0, 0.12);
  border: 1px solid rgba(216, 255, 0, 0.4);
  border-radius: 18px;
  color: #D8FF00;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s; }
  .adminConfigBtn:hover {
    background: rgba(216, 255, 0, 0.2);
    border-color: #D8FF00; }
    .adminConfigBtn:hover span {
      display: inline-flex; }
  .adminConfigBtn i {
    font-size: 15px; }
  .adminConfigBtn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0; }
  .adminConfigBtn span {
    display: none; }

.detailCoverWrapper {
  flex-shrink: 0;
  width: calc(50% - 24px);
  max-width: 740px;
  max-height: 492px; }
  .detailCoverWrapper.detailCoverWrapper-portrait {
    max-width: 400px;
    width: 40%;
    max-height: 533px; }
    .detailCoverWrapper.detailCoverWrapper-portrait .detailPhoneFrame {
      max-height: 533px; }
  .detailCoverWrapper.detailCoverWrapper-square {
    max-width: 492px; }

.detailPhoneFrame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cover-aspect, 3/4);
  border-radius: 32px;
  overflow: hidden;
  max-width: 100%;
  max-height: 492px; }

/* 官方账号：封面下方数据条（胶囊条 + 竖分割线，数字在上） */
.detailToolStats {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  margin-top: 8px;
  padding: 12px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box; }

.detailToolStatItem {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 0 10px; }
  .detailToolStatItem:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: rgba(255, 255, 255, 0.14);
    pointer-events: none; }

.detailToolStatValue {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  color: rgba(245, 245, 245, 0.96);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em; }

.detailToolStatLabel {
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.52);
  text-align: center;
  white-space: nowrap; }

.coverSlide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none; }

.coverSlideActive {
  opacity: 1;
  pointer-events: auto; }

.detailCoverImage {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.coverThumbsBar {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  gap: 4px;
  z-index: 10; }

.coverThumb {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--new-grey-3);
  outline: 3px solid transparent;
  transition: border-color 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
  .coverThumb:hover {
    border: 1px solid var(--new-grey-4);
    outline: 3px solid var(--new-grey-5); }
  .coverThumb.coverThumbActive {
    border: 1px solid var(--new-grey-4);
    outline: 3px solid var(--new-grey-5); }

.coverThumbMedia {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.coverThumbProgress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: #D8FF00;
  width: 60%;
  border-radius: 0 2px 0 0; }

.detailAiInputWrapper {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 40px;
  height: 100%; }

.detailAiInputHeader {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center; }

/* Logo + 热度：同一行居中，与下方标题留白 */
.detailToolLogoWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-bottom: 4px; }
  .detailToolLogoWrapper .detailToolLogo {
    margin-bottom: 0;
    flex-shrink: 0; }

.detailToolHotBlock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px; }

.detailToolHotNum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(90deg, #FF962F 0%, #FF5B17 100%);
  height: 30px;
  width: max-content;
  padding: 0 12px;
  font-size: 12px;
  color: #fff;
  gap: 2px; }
  .detailToolHotNum span {
    font-size: 14px; }

.detailToolHotNumAdmin {
  display: inline-flex;
  align-items: center;
  gap: 4px; }

.detailToolHotNumBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(216, 255, 0, 0.45);
  border-radius: 8px;
  background: rgba(216, 255, 0, 0.12);
  color: #D8FF00;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s; }
  .detailToolHotNumBtn:hover:not(:disabled) {
    background: rgba(216, 255, 0, 0.2);
    border-color: #D8FF00; }
  .detailToolHotNumBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed; }

.detailToolTitle {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  color: var(--new-text-1);
  margin: 0;
  text-align: center; }
  .detailToolTitle em {
    color: #D8FF00; }

.detailToolLogo {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 12px; }
  .detailToolLogo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block; }

.has-bg-header {
  background: var(--new-grey-1); }

.detailToolDesc {
  font-size: 16px;
  line-height: 24px;
  color: var(--new-text-3);
  margin: 0;
  max-width: 600px;
  text-align: center; }

.detailCreateBoxWrapper {
  width: 100%; }
  .detailCreateBoxWrapper .qtdCreateTaskBox {
    position: relative !important;
    transform: none !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 3 !important;
    min-width: 0; }
    .detailCreateBoxWrapper .qtdCreateTaskBox .free-tip-box, .detailCreateBoxWrapper .qtdCreateTaskBox .rules {
      display: none; }
    .detailCreateBoxWrapper .qtdCreateTaskBox .create-textarea-input-box, .detailCreateBoxWrapper .qtdCreateTaskBox .placeholder-box {
      text-align: left; }
    .detailCreateBoxWrapper .qtdCreateTaskBox.show-quote-box {
      margin-top: 0; }
    .detailCreateBoxWrapper .qtdCreateTaskBox .quote-img-box {
      display: none; }

.detailSamePicSection {
  padding: 0 0 64px;
  margin-top: 64px; }

.detailSamePicHeader {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 24px;
  flex-wrap: wrap; }

.detailSamePicTitleItem {
  padding: 0;
  border: none;
  background: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--new-text-3);
  cursor: pointer;
  transition: color 0.2s var(--qtd-transition-cubic-1); }
  .detailSamePicTitleItem.detailSamePicTitleActive {
    color: var(--new-text-1); }
  .detailSamePicTitleItem:hover {
    color: var(--new-text-1); }

.detailSamePicEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  border: 1px solid var(--new-grey-4);
  border-radius: 12px;
  background: var(--new-grey-3);
  color: var(--new-text-3);
  font-size: 14px; }

.detailSamePicEmptyLink {
  padding: 0;
  border: none;
  background: none;
  color: var(--qtd-ai-light-color-6);
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px; }
  .detailSamePicEmptyLink:hover {
    opacity: 0.85; }

.detailSamePicLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  border: 1px solid var(--new-grey-4);
  border-radius: 12px;
  background: var(--new-grey-3); }

.detailSectionContent {
  max-width: 1720px;
  margin: 0 auto; }

.detailMasonryWrapper {
  width: 100%; }
  .detailMasonryWrapper .preview-masonry-container {
    width: 100%; }

.detailLoadingMore {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0; }

.detailSamePicPagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 0 8px; }

.paginationTotal {
  font-size: 14px;
  color: var(--new-text-3);
  flex-shrink: 0; }

.paginationBtns {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--new-grey-3);
  border-radius: 42px; }

.paginationBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 4px;
  border-radius: 25px;
  background: transparent;
  border: none;
  color: var(--new-text-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  outline: none;
  user-select: none; }
  .paginationBtn:hover:not(:disabled):not(.paginationBtnActive) {
    background: var(--new-grey-4);
    color: var(--new-text-1); }
  .paginationBtn:disabled {
    opacity: 0.3;
    cursor: not-allowed; }

.paginationBtnActive {
  background: var(--new-grey-4);
  color: var(--new-text-1);
  font-weight: 600;
  cursor: default; }

.paginationArrow {
  font-size: 20px;
  font-weight: 300;
  min-width: 36px; }

.paginationEllipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  color: var(--new-text-4);
  font-size: 14px;
  letter-spacing: 1px;
  pointer-events: none; }

.detailRecommendSection {
  padding: 48px 0; }

.detailRecommendHeader {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px; }

.detailRecommendTitle {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  color: var(--new-text-1);
  margin: 0; }

.detailRecommendDesc {
  font-size: 16px;
  line-height: 24px;
  color: var(--new-text-3);
  margin: 0; }

.detailCategoryTabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 24px;
  padding: 4px;
  width: max-content;
  flex-wrap: wrap;
  background: var(--new-grey-3);
  border-radius: 42px; }

.detailCategoryTab {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 20px;
  border-radius: 25px;
  color: var(--new-text-3);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s var(--qtd-transition-cubic-1);
  white-space: nowrap; }
  .detailCategoryTab:hover, .detailCategoryTab.detailActive {
    background: var(--new-grey-4);
    color: var(--new-text-1);
    font-weight: 600; }

.detailToolGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 4px;
  row-gap: 24px; }

.detailViewMoreWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px; }

.detailViewMoreBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  border: 1px solid var(--new-grey-5);
  border-radius: 22px;
  background: transparent;
  color: var(--new-text-2);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s var(--qtd-transition-cubic-1); }
  .detailViewMoreBtn:hover {
    border-color: var(--new-text-2);
    color: var(--new-text-1); }
  .detailViewMoreBtn i {
    font-size: 16px; }

.detailStepsSection {
  padding-top: 36px; }

.detailStepsContent {
  width: 100%;
  max-width: 1720px;
  margin: 0 auto; }

.detailStepsTitle {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: var(--new-text-1);
  margin: 0 0 24px;
  text-align: left; }

.detailStepsGrid {
  display: grid;
  grid-template-columns: repeat(var(--steps-count, 3), 1fr);
  gap: 24px;
  min-width: 0;
  flex-wrap: wrap; }
  @media screen and (max-width: 1200px) {
    .detailStepsGrid.detailStepsGridMore {
      grid-template-columns: repeat(2, 1fr); } }

.detailStepItem {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 0 0; }

.detailStepItemEmpty {
  flex: 1 0 0; }

.detailStepMediaWrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--new-grey-3); }

.detailStepMedia {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.8); }

.detailStepMediaPlaceholder {
  width: 100%;
  height: 100%;
  background: var(--new-grey-3); }

.detailStepNum {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #1c1e1f;
  line-height: 1;
  z-index: 2; }

.detailStepInfo {
  display: flex;
  flex-direction: column;
  gap: 8px; }

.detailStepName {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--new-text-1);
  margin: 0; }

.detailStepDesc {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--new-text-3);
  margin: 0; }

@media screen and (min-width: 2385px) {
  .detailToolGrid {
    grid-template-columns: repeat(6, 1fr); } }

@media screen and (max-width: 2384px) {
  .detailToolGrid {
    grid-template-columns: repeat(6, 1fr); } }

@media screen and (max-width: 1880px) {
  .detailToolGrid {
    grid-template-columns: repeat(5, 1fr); } }

@media screen and (max-width: 1536px) {
  .detailToolGrid {
    grid-template-columns: repeat(4, 1fr); } }

@media screen and (max-width: 1096px) {
  .detailToolGrid {
    grid-template-columns: repeat(3, 1fr); } }

@media screen and (max-width: 1200px) {
  .detailHeroContent1 {
    gap: 48px; }
  .detailCoverWrapper {
    width: 280px; }
  .detailToolTitle {
    font-size: 28px;
    line-height: 36px; }
  .detailRecommendTitle {
    font-size: 28px;
    line-height: 36px; } }

.qtd-ai-light-mode .detailToolTitle em {
  color: var(--new-text-1); }

.qtd-ai-light-mode .adminConfigBtn, .qtd-ai-light-mode .detailToolHotNumBtn {
  background: #FFF;
  border: 1px solid var(--new-grey-5);
  color: var(--new-text-1); }

@media screen and (max-width: 960px) {
  .detailHeroContent1 {
    align-items: center; }
  .detailCoverWrapper {
    width: 240px; }
  .detailAiInputWrapper {
    width: 100%;
    align-items: center;
    text-align: center;
    padding-top: 0; }
  .detailAiInputHeader {
    align-items: center; }
  .detailCreateBoxWrapper {
    max-width: 100%; }
  .detailCategoryTabs {
    gap: 8px; }
  .detailCategoryTab {
    height: 32px;
    padding: 0 16px;
    font-size: 13px; } }

@media screen and (max-width: 824px) {
  .detailToolGrid {
    grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 1100px) {
  .qyToolDetailContainerWrap .qtdCreateTaskBox .free-tip-box {
    display: none; } }

@media (max-width: 1200px) {
  .qyToolDetailContainerWrap .qtdCreateTaskBox .bottom-box-wrap .create-textarea-model-box .textarea-box-bottom .qtd-model-list-container {
    padding: 0 8px; }
    .qyToolDetailContainerWrap .qtdCreateTaskBox .bottom-box-wrap .create-textarea-model-box .textarea-box-bottom .qtd-model-list-container .model-version {
      display: none; } }

@media (max-width: 1920px) {
  .qyToolDetailContainerWrap.qyToolDetailLeftNavExpanded .qtdCreateTaskBox .bottom-box-wrap .create-textarea-model-box .textarea-box-bottom .qtd-model-list-container {
    padding: 0 8px; }
    .qyToolDetailContainerWrap.qyToolDetailLeftNavExpanded .qtdCreateTaskBox .bottom-box-wrap .create-textarea-model-box .textarea-box-bottom .qtd-model-list-container .model-version {
      display: none; }
    .qyToolDetailContainerWrap.qyToolDetailLeftNavExpanded .qtdCreateTaskBox .bottom-box-wrap .create-textarea-model-box .textarea-box-bottom .qtd-model-list-container .model-name {
      display: none; } }

@media (max-width: 1800px) {
  .qyToolDetailContainerWrap .qtdCreateTaskBox .bottom-box-wrap .create-textarea-model-box .textarea-box-bottom .qtd-model-list-container {
    padding: 0 8px; }
    .qyToolDetailContainerWrap .qtdCreateTaskBox .bottom-box-wrap .create-textarea-model-box .textarea-box-bottom .qtd-model-list-container .model-version {
      display: none; }
    .qyToolDetailContainerWrap .qtdCreateTaskBox .bottom-box-wrap .create-textarea-model-box .textarea-box-bottom .qtd-model-list-container .model-name {
      display: none; } }

@media (max-width: 1200px) {
  .qyToolDetailContainerWrap .qtdCreateTaskBox .bottom-box-wrap .create-textarea-model-box .textarea-box-bottom .attr-box .qtd-model-list-container .value {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    justify-content: flex-start; } }

@media screen and (max-width: 640px) {
  .detailCoverWrapper {
    width: 200px; }
  .ai-tool-header-btn {
    display: none !important; }
  .leftNavContainer {
    display: none !important; }
  .detailContainerContent .detailHeroSection {
    padding: 40px 0; }
  .detailContainerContent .detailHeroSection .detailHeroContent1 .detailCoverWrapper {
    width: 80%; }
  .detailHeroSection .detailHeroContent1 {
    flex-direction: column; }
  .detailToolTitle {
    font-size: 24px;
    line-height: 32px; }
  .detailRecommendTitle {
    font-size: 24px;
    line-height: 32px; }
  .detailToolGrid {
    grid-template-columns: 1fr; } }

@media screen and (max-width: 1660px) {
  .detailHeroSection {
    padding: 80px 48px; } }

@media screen and (max-width: 1440px) {
  .detailHeroSection {
    padding: 80px 48px; }
    .detailHeroSection .detailHeroContent1 {
      gap: 16px; }
      .detailHeroSection .detailHeroContent1 .detailCoverWrapper {
        width: 40%; }
      .detailHeroSection .detailHeroContent1 .detailAiInputWrapper .detailCreateBoxWrapper .qtdCreateTaskBox {
        min-width: 0; } }

@media screen and (max-width: 1220px) {
  .detailHeroSection {
    padding: 80px 48px; }
    .detailHeroSection .detailHeroContent1 {
      gap: 16px; }
      .detailHeroSection .detailHeroContent1 .detailCoverWrapper {
        width: 30%; }
      .detailHeroSection .detailHeroContent1 .detailAiInputWrapper .detailCreateBoxWrapper .qtdCreateTaskBox {
        min-width: 0; } }

.tourPopup {
  background: var(--new-grey-3);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.3);
  pointer-events: auto; }

.tourMediaWrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--new-grey-2);
  flex-shrink: 0; }

.tourMedia {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.tourContent {
  padding: 16px 20px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px; }

.tourStepBadge {
  display: inline-block;
  font-size: 12px;
  color: var(--new-text-4);
  background: var(--new-grey-4);
  border-radius: 20px;
  padding: 2px 10px;
  width: fit-content; }

.tourTitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--new-text-1);
  margin: 0;
  line-height: 1.4; }

.tourDesc {
  font-size: 14px;
  color: var(--new-text-3);
  margin: 0;
  line-height: 1.65; }

.tourFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 16px;
  gap: 12px; }

.tourSkipBtn {
  background: none;
  border: none;
  color: var(--new-text-4);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: color 0.2s; }
  .tourSkipBtn:hover {
    color: var(--new-text-3); }

.tourNavBtns {
  display: flex;
  align-items: center;
  gap: 8px; }

.tourNavBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border: none;
  border-radius: 24px;
  background: var(--new-grey-5);
  color: var(--new-text-2);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
  white-space: nowrap; }
  .tourNavBtn:disabled {
    opacity: 0.35;
    cursor: not-allowed; }
  .tourNavBtn:hover:not(:disabled) {
    background: var(--new-grey-4);
    color: var(--new-text-1); }

.tourNavBtnPrimary {
  background: var(--new-text-1);
  color: var(--new-grey-1); }
  .tourNavBtnPrimary:hover:not(:disabled) {
    opacity: 0.88;
    background: var(--new-text-1);
    color: var(--new-grey-1); }

@charset "UTF-8";
/* Agent流式输出显示组件样式 */
.agent-stream-display {
  position: relative;
  z-index: 19;
  width: 100%;
  border-radius: 22px 22px 0 0;
  background: var(--new-grey-1);
  cursor: auto; }
  .agent-stream-display.mini .ant-card {
    border: none;
    box-shadow: none; }
  .agent-stream-display.mini .ant-card-head {
    border: none; }
  .agent-stream-display.mini .ant-card-head-title {
    padding: 8px 16px; }
  .agent-stream-display.mini .ant-card-body {
    padding: 0; }
  .agent-stream-display.agent-stream-display-history .ant-card {
    border: none;
    background: var(--new-grey-1);
    box-shadow: none; }
  .agent-stream-display.agent-stream-display-history .ant-card-head {
    border: none; }
  .agent-stream-display.agent-stream-display-history .ant-card-head-title {
    display: flex;
    align-items: center;
    padding: 0; }
  .agent-stream-display.agent-stream-display-history .ant-card-body {
    padding: 0; }
  .agent-stream-display.agent-stream-display-history .messages-container {
    padding: 0;
    border: none; }
  .agent-stream-display.agent-stream-display-history .ai-messages-container {
    border: none; }
  .agent-stream-display.agent-stream-display-history.llm-stream-display .messages-container {
    max-height: unset; }
  .agent-stream-display.agent-stream-display-history.llm-stream-display .ai-messages-container {
    max-width: calc(100% - 64px);
    gap: 0; }
  .agent-stream-display.agent-stream-display-history.llm-stream-display .is-message {
    margin-top: 0; }
  .agent-stream-display .stream-card {
    border-radius: 22px; }
    .agent-stream-display .stream-card .ant-card-head {
      min-height: 16px;
      padding: 0; }
    .agent-stream-display .stream-card .stream-header {
      padding: 0 12px;
      padding-left: 0; }
  .agent-stream-display .stream-header {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 4px 4px 4px 0;
    transition: all 0.3s var(--qtd-transition-cubic-1); }
    .agent-stream-display .stream-header .icon-fangda, .agent-stream-display .stream-header .icon-suoxiao {
      color: var(--new-text-5); }
      .agent-stream-display .stream-header .icon-fangda:hover, .agent-stream-display .stream-header .icon-suoxiao:hover {
        color: var(--new-text-4); }
    .agent-stream-display .stream-header .header-content-tool-loading {
      display: flex;
      align-items: center;
      min-width: 0;
      max-width: 100%;
      gap: 4px;
      overflow: hidden;
      cursor: pointer; }
    .agent-stream-display .stream-header .header-loading-info {
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding-right: 8px; }
    .agent-stream-display .stream-header .header-loading-info-top {
      display: flex;
      align-items: center;
      gap: 4px; }
  .agent-stream-display .messages-container {
    transition: all 0.3s var(--qtd-transition-cubic-1); }
    .agent-stream-display .messages-container::-webkit-scrollbar {
      width: 6px; }
    .agent-stream-display .messages-container::-webkit-scrollbar-track {
      border-radius: 3px;
      background: #f1f1f1; }
    .agent-stream-display .messages-container::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background: #c1c1c1; }
      .agent-stream-display .messages-container::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8; }
  .agent-stream-display .message-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px; }
    .agent-stream-display .message-group:last-child {
      margin-bottom: 0; }
  .agent-stream-display .ai-messages-container {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 100%; }
  .agent-stream-display .agent-stream-item {
    display: grid;
    grid-template-rows: 1fr;
    max-width: 100%;
    min-height: 0;
    opacity: 1;
    transform: translateY(0);
    transition: grid-template-rows 0.35s var(--qtd-transition-cubic-1), margin-bottom 0.35s var(--qtd-transition-cubic-1), opacity 0.2s ease, transform 0.35s var(--qtd-transition-cubic-1); }
    .agent-stream-display .agent-stream-item.is-tool-message .agent-stream-item-inner .agent-message.is-message {
      margin-bottom: 16px; }
      .agent-stream-display .agent-stream-item.is-tool-message .agent-stream-item-inner .agent-message.is-message .message-bubble .is-text-model {
        color: var(--new-text-5); }
        .agent-stream-display .agent-stream-item.is-tool-message .agent-stream-item-inner .agent-message.is-message .message-bubble .is-text-model p {
          color: var(--new-text-5); }
    .agent-stream-display .agent-stream-item.stream-item-hidden {
      grid-template-rows: 0fr;
      opacity: 0;
      pointer-events: none; }
  .agent-stream-display .agent-stream-item-inner {
    min-height: 0;
    overflow: hidden; }
    .agent-stream-display .agent-stream-item-inner.is-result-message-inner {
      overflow: unset; }
  .agent-stream-display .agent-task-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--new-text-5);
    font-size: 12px;
    line-height: 20px; }
  .agent-stream-display .agent-cancel-task-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 20px;
    padding: 0 6px;
    border-radius: 88px;
    border: 1px solid var(--new-grey-4);
    color: var(--new-text-3);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease;
    flex-shrink: 0; }
    .agent-stream-display .agent-cancel-task-btn:hover {
      border-color: var(--new-text-2);
      color: var(--new-text-1); }
  .agent-stream-display .agent-message {
    display: flex;
    align-items: flex-start;
    width: 100%;
    gap: 12px;
    border-radius: 6px; }
    .agent-stream-display .agent-message.is-message {
      margin-top: 8px; }
    .agent-stream-display .agent-message.user-message {
      flex-direction: row-reverse; }
      .agent-stream-display .agent-message.user-message .message-bubble {
        margin-right: 0;
        margin-left: auto;
        padding: 8px 16px; }
    .agent-stream-display .agent-message .message-content {
      flex: 1;
      width: 100%;
      min-width: 0; }
      .agent-stream-display .agent-message .message-content .ant-image {
        position: relative;
        display: block;
        border-radius: 8px; }
        .agent-stream-display .agent-message .message-content .ant-image .ant-image-mask {
          border-radius: 8px; }
    .agent-stream-display .agent-message .message-bubble {
      width: max-content;
      max-width: 100%;
      margin-bottom: 0;
      border-radius: 16px;
      background: transparent; }
    .agent-stream-display .agent-message .message-text {
      margin: 0;
      color: var(--new-text-2);
      word-break: break-word; }
      .agent-stream-display .agent-message .message-text p {
        margin-bottom: 8px;
        color: var(--new-text-2);
        font-size: 14px;
        line-height: 22px; }
        .agent-stream-display .agent-message .message-text p:last-child {
          margin-bottom: 0; }
      .agent-stream-display .agent-message .message-text .agent-image-card {
        margin-bottom: 8px; }
    .agent-stream-display .agent-message .message-images {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px; }
    .agent-stream-display .agent-message .generated-image {
      width: 100%;
      height: 100%;
      max-width: 120px;
      max-height: 120px;
      border-radius: 6px;
      transition: transform .2s; }
      .agent-stream-display .agent-message .generated-image:hover {
        transform: scale(1.05); }
    .agent-stream-display .agent-message .error-message {
      padding: 12px;
      border-left: 3px solid #ff4d4f;
      border-radius: 8px;
      background-color: #fff2f0;
      text-align: center; }
  .agent-stream-display .start-loading-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    overflow: hidden;
    border-radius: 6px;
    color: var(--new-text-3);
    font-size: 14px;
    line-height: 22px; }
  .agent-stream-display .thinking-placeholder-message .start-loading-text {
    background: linear-gradient(45deg, var(--qtd-ai-text-color-1) 0%, var(--qtd-ai-text-color-1) 30%, var(--qtd-ai-text-color-1) 40%, var(--qtd-ai-drak-func-color-1) 52%, var(--qtd-ai-text-color-1) 63%, var(--qtd-ai-text-color-1) 70%, var(--qtd-ai-text-color-1) 100%);
    background-size: 200% 100%;
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: agentTextShine 5s linear infinite; }
  .agent-stream-display .start-loading-text {
    color: var(--new-text-3);
    font-size: 14px;
    line-height: 22px; }
  .agent-stream-display .is-text-model {
    --h1-text-font-size: 20px;
    --h1-text-line-height: 1.4;
    --h1-margin-bottom: 8px;
    --h1-margin-top: 20px;
    --h2-text-font-size: 18px;
    --h2-text-line-height: 1.4;
    --h2-margin-bottom: 8px;
    --h2-margin-top: 18px;
    --h3-text-font-size: 16px;
    --h3-text-line-height: 1.4;
    --h3-margin-bottom: 8px;
    --h3-margin-top: 18px;
    --h4-text-font-size: 16px;
    --h4-text-line-height: 1.4;
    --h4-margin-bottom: 8px;
    --h4-margin-top: 18px;
    --h5-text-font-size: 16px;
    --h5-text-line-height: 1.4;
    --h5-margin-bottom: 8px;
    --h5-margin-top: 18px;
    --h6-text-font-size: 16px;
    --h6-text-line-height: 1.4;
    --h6-margin-bottom: 8px;
    --h6-margin-top: 18px;
    --block-text-font-size: 14px;
    --block-text-line-height: 22px;
    --block-text-margin-bottom: 8px;
    --default-text-color: var(--new-text-2); }
    .agent-stream-display .is-text-model blockquote {
      margin: 12px 0;
      padding-left: 10px;
      border-left: 2px solid #f5f5f5; }
    .agent-stream-display .is-text-model h1 {
      margin-top: var(--h1-margin-top);
      margin-bottom: var(--h1-margin-bottom);
      font-size: var(--h1-text-font-size);
      line-height: var(--h1-text-line-height); }
    .agent-stream-display .is-text-model h2 {
      margin-top: var(--h2-margin-top);
      margin-bottom: var(--h2-margin-bottom);
      font-size: var(--h2-text-font-size);
      line-height: var(--h2-text-line-height); }
    .agent-stream-display .is-text-model h3 {
      margin-top: var(--h3-margin-top);
      margin-bottom: var(--h3-margin-bottom);
      font-size: var(--h3-text-font-size);
      line-height: var(--h3-text-line-height); }
    .agent-stream-display .is-text-model h4 {
      margin-top: var(--h4-margin-top);
      margin-bottom: var(--h4-margin-bottom);
      font-size: var(--h4-text-font-size);
      line-height: var(--h4-text-line-height); }
    .agent-stream-display .is-text-model h5 {
      margin-top: var(--h5-margin-top);
      margin-bottom: var(--h5-margin-bottom);
      font-size: var(--h5-text-font-size);
      line-height: var(--h5-text-line-height); }
    .agent-stream-display .is-text-model h6 {
      margin-top: var(--h6-margin-top);
      margin-bottom: var(--h6-margin-bottom);
      font-size: var(--h6-text-font-size);
      line-height: var(--h6-text-line-height); }
    .agent-stream-display .is-text-model p {
      margin-bottom: var(--block-text-margin-bottom);
      color: var(--default-text-color);
      font-size: var(--block-text-font-size);
      line-height: var(--block-text-line-height); }
      .agent-stream-display .is-text-model p:first-child {
        margin-top: 0; }
      .agent-stream-display .is-text-model p:last-child {
        margin-bottom: 0; }
    .agent-stream-display .is-text-model strong {
      font-weight: 600; }
    .agent-stream-display .is-text-model em {
      font-style: italic; }
    .agent-stream-display .is-text-model s {
      text-decoration: line-through; }
    .agent-stream-display .is-text-model u {
      text-decoration: underline; }
    .agent-stream-display .is-text-model table {
      width: 100%;
      margin: 16px 0; }
      .agent-stream-display .is-text-model table th,
      .agent-stream-display .is-text-model table td {
        padding: 8px;
        border: 1px solid #e0e6ed;
        border-radius: 4px; }
      .agent-stream-display .is-text-model table tr:nth-child(even) {
        background: #f5fffd; }
    .agent-stream-display .is-text-model hr {
      width: 100%;
      height: 1px;
      margin: 16px 0;
      background: var(--new-grey-4); }
    .agent-stream-display .is-text-model pre {
      margin: 16px 0;
      padding: 16px;
      border: 1px solid var(--new-grey-4);
      border-radius: 16px;
      background: var(--new-grey-3); }
      .agent-stream-display .is-text-model pre code {
        height: auto;
        border: 1px solid transparent;
        border-radius: 0;
        background: transparent;
        white-space: pre-wrap; }
    .agent-stream-display .is-text-model code {
      display: inline-block;
      height: 24px;
      padding: 0 8px;
      border: 1px solid var(--new-grey-4);
      border-radius: 8px;
      background: var(--new-grey-2);
      line-height: 22px;
      white-space: pre-wrap; }
    .agent-stream-display .is-text-model ul,
    .agent-stream-display .is-text-model ol {
      padding-left: 24px; }
    .agent-stream-display .is-text-model ul li {
      list-style: disc; }
    .agent-stream-display .is-text-model ol li {
      list-style: decimal; }
    .agent-stream-display .is-text-model img {
      display: none;
      width: 100%;
      max-width: 960px;
      margin: 48px auto;
      padding: 0 80px;
      border-radius: 16px;
      object-fit: contain; }
    .agent-stream-display .is-text-model .custom-ai-info {
      display: none !important; }
  .agent-stream-display .thinking-start-content {
    width: max-content;
    max-width: 100%;
    max-height: 600px;
    overflow: auto;
    border-radius: 16px;
    transition: all 0.3s var(--qtd-transition-cubic-1); }
    .agent-stream-display .thinking-start-content.collapsed {
      max-height: 24px;
      overflow: hidden; }
      .agent-stream-display .thinking-start-content.collapsed .thinking-detail {
        max-height: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translateY(-4px); }
    .agent-stream-display .thinking-start-content.thinking-running:not(.collapsed) .thinking-header {
      position: relative;
      overflow: hidden;
      border-radius: 8px; }
      .agent-stream-display .thinking-start-content.thinking-running:not(.collapsed) .thinking-header::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -40%;
        width: 40%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
        animation: thinkingSweep 1.8s ease-in-out infinite;
        pointer-events: none; }
    .agent-stream-display .thinking-start-content .thinking-header {
      display: flex;
      align-items: center;
      width: max-content;
      color: var(--new-text-4);
      cursor: pointer; }
    .agent-stream-display .thinking-start-content .thinking-icon {
      margin-right: 4px;
      font-size: 12px; }
    .agent-stream-display .thinking-start-content .thinking-name {
      color: var(--new-text-4);
      font-size: 12px; }
    .agent-stream-display .thinking-start-content .thinking-status {
      display: flex;
      align-items: center;
      margin-left: 8px;
      gap: 4px;
      color: var(--color-text-secondary);
      font-size: 12px; }
      .agent-stream-display .thinking-start-content .thinking-status svg {
        width: 14px;
        height: 14px; }
    .agent-stream-display .thinking-start-content .thinking-duration {
      color: #52c41a;
      line-height: 20px; }
    .agent-stream-display .thinking-start-content .thinking-text-status {
      color: #1890ff;
      line-height: 20px; }
    .agent-stream-display .thinking-start-content .ant-btn {
      width: 24px;
      min-width: 24px !important;
      height: 24px;
      margin-left: auto;
      border: none;
      box-shadow: none; }
      .agent-stream-display .thinking-start-content .ant-btn:hover {
        background: var(--new-grey-3); }
      .agent-stream-display .thinking-start-content .ant-btn.thinking-collapse-btn.active {
        transform: rotate(180deg); }
      .agent-stream-display .thinking-start-content .ant-btn .icon {
        color: var(--new-text-4); }
    .agent-stream-display .thinking-start-content .thinking-detail {
      height: max-content;
      max-height: 400px;
      margin-top: 4px;
      padding: 8px;
      overflow-y: auto;
      border-radius: 8px;
      background: var(--new-grey-3);
      opacity: 1;
      transform: translateY(0);
      transition: all 0.3s var(--qtd-transition-cubic-1); }
      .agent-stream-display .thinking-start-content .thinking-detail * {
        color: var(--new-text-4);
        font-size: 12px;
        line-height: 20px; }
      .agent-stream-display .thinking-start-content .thinking-detail .agent-md-code-block-wrap {
        margin: 8px 0; }
  .agent-stream-display .planning-content {
    width: 100%;
    padding: 8px 0; }
    .agent-stream-display .planning-content.collapsed .planning-detail {
      max-height: 0;
      margin-top: 0;
      opacity: 0;
      transform: translateY(-4px); }
    .agent-stream-display .planning-content.collapsed .planning-header .icon {
      transform: rotate(-90deg); }
    .agent-stream-display .planning-content.expanded .planning-header .icon {
      transform: rotate(0deg); }
    .agent-stream-display .planning-content .planning-header {
      display: flex;
      align-items: center;
      width: max-content;
      cursor: pointer; }
    .agent-stream-display .planning-content .planning-title {
      color: var(--new-text-5);
      font-size: 14px;
      font-weight: 500;
      line-height: 22px;
      white-space: nowrap; }
    .agent-stream-display .planning-content .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      color: var(--new-text-5);
      font-size: 16px;
      transform: rotate(0deg);
      transition: transform 0.3s var(--qtd-transition-cubic-1); }
    .agent-stream-display .planning-content .planning-detail {
      max-width: 100%;
      max-height: 500px;
      margin-top: 4px;
      overflow: hidden;
      border-radius: 8px;
      color: var(--new-text-5);
      font-size: 14px;
      line-height: 22px;
      opacity: 1;
      transform: translateY(0);
      transition: max-height 0.3s var(--qtd-transition-cubic-1), margin-top 0.3s var(--qtd-transition-cubic-1), opacity 0.2s ease, transform 0.3s var(--qtd-transition-cubic-1); }
      .agent-stream-display .planning-content .planning-detail p {
        color: var(--new-text-5);
        font-size: 14px;
        line-height: 22px; }
        .agent-stream-display .planning-content .planning-detail p:last-child {
          margin-bottom: 16px; }
  .agent-stream-display .agent-step-frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0; }
    .agent-stream-display .agent-step-frame .agent-step-header {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 32px;
      gap: 8px; }
    .agent-stream-display .agent-step-frame .agent-step-title {
      min-width: 0; }
    .agent-stream-display .agent-step-frame .agent-step-marker {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 32px; }
      .agent-stream-display .agent-step-frame .agent-step-marker.tool .icon,
      .agent-stream-display .agent-step-frame .agent-step-marker.tool svg {
        width: 20px;
        height: 20px;
        color: var(--new-text-5);
        font-size: 20px;
        line-height: 20px; }
        .agent-stream-display .agent-step-frame .agent-step-marker.tool .icon path,
        .agent-stream-display .agent-step-frame .agent-step-marker.tool svg path {
          fill: var(--new-text-5); }
      .agent-stream-display .agent-step-frame .agent-step-marker.tool .icon-Frame {
        animation: agentToolLoadingRotate 1s linear infinite; }
      .agent-stream-display .agent-step-frame .agent-step-marker.result::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--new-grey-4); }
      .agent-stream-display .agent-step-frame .agent-step-marker .anticon {
        color: var(--new-text-3);
        font-size: 16px; }
    .agent-stream-display .agent-step-frame .agent-step-content {
      display: flex;
      align-items: stretch;
      width: 100%;
      min-width: 0;
      gap: 8px; }
    .agent-stream-display .agent-step-frame .agent-step-line {
      position: relative;
      flex: 0 0 20px;
      width: 20px; }
      .agent-stream-display .agent-step-frame .agent-step-line::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        transform: translateX(-50%);
        background: var(--new-grey-4); }
    .agent-stream-display .agent-step-frame .agent-step-body {
      flex: 1;
      min-width: 0; }
  .agent-stream-display .tool-start-content {
    width: 100%;
    max-width: 100%;
    max-height: 1600px;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    opacity: 1;
    transform: translateY(0);
    transition: max-height 0.35s var(--qtd-transition-cubic-1), opacity 0.2s ease, transform 0.35s var(--qtd-transition-cubic-1); }
    .agent-stream-display .tool-start-content.collapsed {
      max-height: 0;
      opacity: 0;
      transform: translateY(-4px); }
  .agent-stream-display .tool-header {
    display: flex;
    align-items: center;
    min-height: 32px;
    color: var(--new-text-5);
    font-size: 14px;
    line-height: 22px;
    cursor: pointer; }
    .agent-stream-display .tool-header:hover .tool-title {
      color: var(--new-text-4);
      transition: all 0.3s var(--qtd-transition-cubic-1); }
    .agent-stream-display .tool-header:hover .tool-collapse-btn {
      color: var(--new-text-4);
      transition: all 0.3s var(--qtd-transition-cubic-1); }
    .agent-stream-display .tool-header .tool-title {
      position: relative;
      min-width: 0;
      overflow: hidden;
      border-radius: 6px;
      color: var(--new-text-5);
      font-weight: 500;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .agent-stream-display .tool-header.tool-header-running .tool-title {
      background: linear-gradient(45deg, var(--new-text-5) 0%, var(--new-text-5) 30%, var(--new-text-5) 40%, var(--new-text-3) 52%, var(--new-text-5) 63%, var(--new-text-5) 70%, var(--new-text-5) 100%);
      background-size: 200% 100%;
      background-clip: text;
      color: transparent;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: agentTextShine 5s linear infinite; }
    .agent-stream-display .tool-header .tool-title-divider {
      position: relative;
      flex: 0 0 24px;
      width: 24px;
      height: 22px; }
      .agent-stream-display .tool-header .tool-title-divider::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 4px;
        width: 16px;
        height: 1px;
        transform: translateY(-50%);
        background: var(--new-text-5); }
    .agent-stream-display .tool-header .tool-action-count {
      flex: 0 0 auto;
      color: var(--new-text-5);
      font-weight: 400; }
    .agent-stream-display .tool-header .ant-image {
      margin-left: 8px; }
    .agent-stream-display .tool-header .tool-preview-image {
      flex: 0 0 auto;
      width: 48px;
      height: 32px;
      border: 1px solid var(--new-grey-4);
      border-radius: 4px;
      object-fit: cover;
      cursor: pointer; }
      .agent-stream-display .tool-header .tool-preview-image .tool-preview-loading-card.no-src {
        height: 272px;
        width: 272px; }
    .agent-stream-display .tool-header .tool-preview-loading-card {
      flex: 0 0 48px;
      width: 48px;
      height: 32px;
      margin-left: 8px;
      gap: 0; }
      .agent-stream-display .tool-header .tool-preview-loading-card .img-container {
        width: 48px;
        height: 32px;
        border-radius: 4px; }
        .agent-stream-display .tool-header .tool-preview-loading-card .img-container.no-src {
          height: 32px;
          width: 48px; }
      .agent-stream-display .tool-header .tool-preview-loading-card .loading-text {
        display: none; }
      .agent-stream-display .tool-header .tool-preview-loading-card .star {
        width: 1px;
        height: 1px; }
    .agent-stream-display .tool-header .tool-collapse-btn {
      width: 24px;
      min-width: 24px !important;
      height: 24px;
      margin-left: 4px;
      border: none;
      box-shadow: none;
      color: var(--new-text-5);
      transform: rotate(-90deg);
      transition: transform 0.3s var(--qtd-transition-cubic-1); }
      .agent-stream-display .tool-header .tool-collapse-btn.active {
        transform: rotate(0deg); }
  .agent-stream-display .tool-params {
    display: flex;
    flex-direction: column;
    width: max-content;
    max-width: 100%;
    margin-top: 0;
    padding: 0;
    gap: 4px; }
    .agent-stream-display .tool-params .param-item {
      display: flex;
      gap: 4px;
      color: var(--new-text-1);
      font-size: 14px;
      line-height: 22px;
      word-break: break-word; }
    .agent-stream-display .tool-params .param-label {
      flex: 0 0 auto;
      color: var(--new-text-2); }
    .agent-stream-display .tool-params .param-value {
      min-width: 0;
      color: var(--new-text-2); }
    .agent-stream-display .tool-params .param-list {
      margin: 0;
      padding-left: 18px; }
    .agent-stream-display .tool-params .tool-param-image-card {
      width: 120px;
      gap: 0; }
      .agent-stream-display .tool-params .tool-param-image-card .img-container {
        width: 120px;
        height: 120px;
        border-radius: 8px; }
  .agent-stream-display .tool-error-text {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin-top: 8px;
    padding: 2px 8px;
    border: 1px solid #fcb3bb;
    border-radius: 200px;
    background: #fff8f5;
    color: #fa5555; }
    .agent-stream-display .tool-error-text .ant-typography {
      color: #fa5555;
      font-size: 12px;
      line-height: 20px; }
  .agent-stream-display .tool-collapsed-summary-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    max-width: 100%;
    min-height: 30px;
    margin: 8px 0 16px;
    padding: 5px 8px;
    overflow: hidden;
    border: none;
    border-radius: 88px;
    background: var(--new-grey-3);
    color: var(--new-text-2);
    font-size: 12px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer; }
    .agent-stream-display .tool-collapsed-summary-box:hover {
      color: var(--new-text-1); }
  .agent-stream-display .tool-summary-result-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
    margin-bottom: 16px;
    padding: 12px 16px;
    padding-bottom: 16px;
    border: 1px solid var(--new-grey-3);
    border-radius: 12px;
    background: var(--new-grey-2); }
  .agent-stream-display .tool-summary {
    width: 100%;
    max-width: 100%;
    color: var(--new-text-2);
    font-size: 14px;
    line-height: 22px;
    word-break: break-word; }
    .agent-stream-display .tool-summary p {
      margin: 0 0 8px;
      color: var(--new-text-2);
      font-size: 14px;
      line-height: 22px; }
      .agent-stream-display .tool-summary p:last-child {
        margin-bottom: 0; }
  .agent-stream-display .tool-summary-result-box .tool-result {
    padding: 0;
    padding-top: 4px; }
  .agent-stream-display .tool-loading {
    display: flex;
    align-items: center;
    padding: 8px 0;
    color: #666; }
  .agent-stream-display .tool-complete-marker {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 4px 0;
    gap: 8px;
    color: var(--new-text-5);
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    white-space: nowrap; }
    .agent-stream-display .tool-complete-marker .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      color: var(--new-text-5);
      font-size: 20px;
      line-height: 20px; }
  .agent-stream-display .tool-result {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
    padding: 8px 0 16px;
    gap: 8px; }
    .agent-stream-display .tool-result .tool-result-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 24px;
      padding: 0 8px;
      border-radius: 88px;
      background: var(--new-grey-3);
      color: var(--new-text-2);
      font-size: 12px;
      line-height: 20px;
      white-space: nowrap; }
    .agent-stream-display .tool-result .tool-result-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      max-height: 1600px;
      gap: 8px;
      opacity: 1;
      transform: translateY(0);
      transition: max-height 0.35s var(--qtd-transition-cubic-1), opacity 0.2s ease, transform 0.35s var(--qtd-transition-cubic-1); }
    .agent-stream-display .tool-result.total-result {
      width: 100%; }
      .agent-stream-display .tool-result.total-result .tool-result-label {
        justify-content: flex-start;
        height: 24px;
        padding: 0;
        gap: 4px;
        border-radius: 0;
        background: transparent;
        color: var(--new-text-3);
        font-size: 14px;
        font-weight: 500;
        line-height: 22px;
        cursor: pointer; }
        .agent-stream-display .tool-result.total-result .tool-result-label .icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          color: var(--new-text-3);
          font-size: 16px;
          transform: rotate(0deg);
          transition: transform 0.3s var(--qtd-transition-cubic-1); }
      .agent-stream-display .tool-result.total-result.collapsed {
        padding-bottom: 0; }
        .agent-stream-display .tool-result.total-result.collapsed .tool-result-label .icon {
          transform: rotate(-90deg); }
        .agent-stream-display .tool-result.total-result.collapsed .tool-result-content {
          max-height: 0;
          opacity: 0;
          transform: translateY(-4px); }
    .agent-stream-display .tool-result .tool-result-tool-name {
      color: var(--new-text-3);
      font-size: 12px;
      line-height: 20px; }
    .agent-stream-display .tool-result .tool-result-text {
      width: 100%;
      color: var(--new-text-1);
      font-size: 14px;
      line-height: 22px;
      word-break: break-word; }
      .agent-stream-display .tool-result .tool-result-text p {
        margin: 0 0 8px;
        color: var(--new-text-1);
        font-size: 14px;
        line-height: 22px; }
        .agent-stream-display .tool-result .tool-result-text p:last-child {
          margin-bottom: 0; }
    .agent-stream-display .tool-result .tool-result-list {
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 8px;
      gap: 4px;
      border: 1px solid var(--new-grey-4);
      border-radius: 12px;
      background: var(--new-grey-2); }
    .agent-stream-display .tool-result .tool-result-list-item {
      color: var(--new-text-1);
      font-size: 14px;
      line-height: 22px;
      word-break: break-word; }
    .agent-stream-display .tool-result .tool-result-empty {
      color: var(--new-text-3);
      font-size: 12px;
      line-height: 20px; }
  .agent-stream-display .tool-result-images.history-img-box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 16px; }
    .agent-stream-display .tool-result-images.history-img-box.horizontal-box {
      width: 100%; }
    .agent-stream-display .tool-result-images.history-img-box .img-box {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 180px;
      max-width: 260px;
      max-height: 320px;
      overflow: hidden;
      border: 2px solid transparent;
      border-radius: 12px;
      outline: 8px solid transparent;
      cursor: pointer;
      transition: all 0.3s var(--qtd-transition-cubic-1); }
      .agent-stream-display .tool-result-images.history-img-box .img-box:hover {
        border-color: #d4fd53;
        outline-color: rgba(212, 253, 83, 0.2); }
        .agent-stream-display .tool-result-images.history-img-box .img-box:hover .img-btn-box-new,
        .agent-stream-display .tool-result-images.history-img-box .img-box:hover .card-hover-tool-box-warp {
          opacity: 1; }
        .agent-stream-display .tool-result-images.history-img-box .img-box:hover .video-box {
          opacity: 1; }
        .agent-stream-display .tool-result-images.history-img-box .img-box:hover .play-icon {
          opacity: 0; }
      .agent-stream-display .tool-result-images.history-img-box .img-box > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        background-image: url("//icon.qiantucdn.com/static/images/brandTool/img_bg_3.png");
        background-size: 24px;
        transition: all 0.3s var(--qtd-transition-cubic-1); }
    .agent-stream-display .tool-result-images.history-img-box .img-btn-box-new {
      position: absolute;
      bottom: 12px;
      left: 50%;
      z-index: 5;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding: 0 12px;
      gap: 8px;
      opacity: 0;
      transform: translateX(-50%);
      transition: all 0.3s var(--qtd-transition-cubic-1); }
    .agent-stream-display .tool-result-images.history-img-box .img-btn-box-group {
      position: relative;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      gap: 8px; }
    .agent-stream-display .tool-result-images.history-img-box .img-btn,
    .agent-stream-display .tool-result-images.history-img-box .go-edit-btn {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      max-width: 180px;
      height: 40px;
      padding: 5px 8px;
      gap: 4px;
      border-radius: 28px;
      background: var(--new-bg-1);
      box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
      color: var(--qtd-ai-text-color-1);
      font-size: 14px;
      font-weight: 600;
      line-height: 22px;
      cursor: pointer; }
      .agent-stream-display .tool-result-images.history-img-box .img-btn.qtd-ai-button,
      .agent-stream-display .tool-result-images.history-img-box .go-edit-btn.qtd-ai-button {
        background-color: var(--qtd-ai-drak-color-6); }
      .agent-stream-display .tool-result-images.history-img-box .img-btn:hover,
      .agent-stream-display .tool-result-images.history-img-box .go-edit-btn:hover {
        opacity: .85; }
    .agent-stream-display .tool-result-images.history-img-box .card-hover-tool-box-warp {
      opacity: 0;
      transition: all 0.3s var(--qtd-transition-cubic-1); }
    .agent-stream-display .tool-result-images.history-img-box .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 10;
      color: var(--qtd-ai-text-color-1);
      font-size: 72px;
      opacity: .8;
      transform: translate(-50%, -50%); }
    .agent-stream-display .tool-result-images.history-img-box .video-box {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0;
      transform: translate(-50%, -50%);
      transition: all 0.3s var(--qtd-transition-cubic-1); }
    .agent-stream-display .tool-result-images.history-img-box .music-viewer-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .agent-stream-display .tool-result-images.history-img-box .music-viewer-box .musicViewer {
        min-height: unset !important; }
    .agent-stream-display .tool-result-images.history-img-box .ant-spin {
      position: absolute;
      inset: 0;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.45); }
  .agent-stream-display .tool-callback-message .message-content {
    width: 100%; }
  .agent-stream-display .tool-callback-message .tool-result-images.history-img-box {
    gap: 4px; }
    .agent-stream-display .tool-callback-message .tool-result-images.history-img-box .img-box {
      flex: 1 1 0;
      min-width: 160px;
      max-width: none;
      max-height: none;
      border-radius: 16px;
      background: var(--new-grey-2);
      outline: none; }
      .agent-stream-display .tool-callback-message .tool-result-images.history-img-box .img-box:hover {
        border-color: #d8ff00;
        outline: 6px solid rgba(216, 255, 0, 0.2); }
      .agent-stream-display .tool-callback-message .tool-result-images.history-img-box .img-box > img {
        border-radius: 12px; }
  .agent-stream-display .suggested-actions-message .suggested-actions-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    margin-top: 8px;
    gap: 8px;
    color: var(--new-text-1);
    font-size: 16px;
    font-weight: 600; }
  .agent-stream-display .suggested-actions-message .suggested-title {
    font-size: 16px; }
  .agent-stream-display .suggested-actions-message .suggested-actions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; }
  .agent-stream-display .suggested-actions-message .action-button {
    display: flex;
    align-items: center;
    height: 32px;
    gap: 6px;
    border: 1px solid var(--new-grey-4);
    background: var(--new-grey-1);
    color: var(--new-text-1);
    font-size: 14px;
    cursor: pointer;
    transition: all .2s; }
    .agent-stream-display .suggested-actions-message .action-button:hover {
      border-color: #d8fb16;
      background: #d8fb16;
      color: #333; }
    .agent-stream-display .suggested-actions-message .action-button:disabled {
      opacity: .6;
      cursor: not-allowed;
      transform: none; }
  .agent-stream-display .suggested-actions-message .action-icon {
    font-size: 14px; }
  .agent-stream-display .suggested-actions-message .action-label {
    font-size: 14px;
    font-weight: 500; }
  .agent-stream-display .generated-image-content .image-item {
    display: inline-block;
    margin: 8px 0; }
  .agent-stream-display .generated-image-content .image-info {
    max-width: 120px;
    margin-top: 4px; }
    .agent-stream-display .generated-image-content .image-info .ant-typography {
      display: -webkit-box;
      overflow: hidden;
      word-break: break-all;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical; }
  .agent-stream-display .agent-image-card {
    display: flex;
    flex-direction: column;
    max-width: 272px;
    max-height: 272px;
    gap: 4px; }
    .agent-stream-display .agent-image-card .image-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 100%;
      gap: 16px; }
    .agent-stream-display .agent-image-card .image-card-title {
      flex: 1;
      min-width: max-content;
      max-width: 200px;
      overflow: hidden;
      color: var(--new-text-1);
      font-size: 14px;
      font-weight: 600;
      line-height: 22px;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .agent-stream-display .agent-image-card .tool-name {
      flex: 1;
      width: max-content;
      min-width: 80px;
      overflow: hidden;
      color: var(--new-text-2);
      font-size: 12px;
      line-height: 20px;
      text-align: right;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .agent-stream-display .agent-image-card .img-container {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 1px solid var(--new-grey-4);
      border-radius: 8px; }
      .agent-stream-display .agent-image-card .img-container.no-src {
        height: 272px;
        width: 272px; }
      .agent-stream-display .agent-image-card .img-container .ant-image {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        object-fit: contain;
        background-image: url(//icon.qiantucdn.com/static/images/brandTool/img_bg_3.png);
        background-size: 24px; }
      .agent-stream-display .agent-image-card .img-container img {
        width: 100%;
        height: 100%;
        max-width: 272px;
        max-height: 272px;
        object-fit: contain; }
    .agent-stream-display .agent-image-card .img-placeholder {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.05); }
    .agent-stream-display .agent-image-card .loading-overlay,
    .agent-stream-display .agent-image-card .gradient-background,
    .agent-stream-display .agent-image-card .stars-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
    .agent-stream-display .agent-image-card .loading-overlay {
      display: flex;
      align-items: center;
      justify-content: center; }
    .agent-stream-display .agent-image-card .gradient-background {
      background: linear-gradient(135deg, #667eea 0%, #7b68ee 15%, #9d7ced 30%, #b98fe8 45%, #6fa8dc 60%, #4fc3f7 75%, #667eea 100%);
      background-size: 300% 300%;
      opacity: .9;
      animation: gradientShift 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
    .agent-stream-display .agent-image-card .stars-container {
      pointer-events: none; }
    .agent-stream-display .agent-image-card .star {
      position: absolute;
      width: 2px;
      height: 2px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.8);
      animation: twinkle 2s ease-in-out infinite; }
      .agent-stream-display .agent-image-card .star::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle, white 0%, transparent 70%);
        animation: pulse 2s ease-in-out infinite; }
    .agent-stream-display .agent-image-card .loading-text {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
      .agent-stream-display .agent-image-card .loading-text span {
        animation: fadeInOut 2s ease-in-out infinite; }
  .agent-stream-display .agent-md-code-block-wrap {
    position: relative;
    margin: 16px 0;
    overflow: hidden;
    border: 1px solid var(--new-grey-4);
    border-radius: 16px;
    background: var(--new-grey-3); }
    .agent-stream-display .agent-md-code-block-wrap:hover .agent-md-code-copy {
      opacity: 1; }
    .agent-stream-display .agent-md-code-block-wrap .agent-md-code-copy {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 2;
      padding: 2px 10px;
      border: 1px solid var(--new-grey-4);
      border-radius: 6px;
      background: var(--new-grey-1);
      color: var(--new-text-2);
      font-size: 12px;
      line-height: 20px;
      opacity: 0;
      cursor: pointer;
      transition: opacity .15s ease; }
      .agent-stream-display .agent-md-code-block-wrap .agent-md-code-copy:hover {
        border-color: var(--new-text-3);
        color: var(--new-text-1); }
    .agent-stream-display .agent-md-code-block-wrap pre.agent-md-pre-inner {
      margin: 0 !important;
      padding: 16px 48px 16px 16px !important;
      border: none !important;
      border-radius: 0;
      background: transparent !important; }
      .agent-stream-display .agent-md-code-block-wrap pre.agent-md-pre-inner code {
        display: block;
        height: auto !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        line-height: 1.5rem;
        white-space: pre-wrap !important; }

@keyframes thinkingSweep {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(350%); } }

@keyframes agentTextShine {
  0% {
    background-position: 100% 0; }
  100% {
    background-position: -100% 0; } }

@keyframes agentToolLoadingRotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes gradientShift {
  0% {
    background-position: 0% 50%; }
  25% {
    background-position: 50% 100%; }
  50% {
    background-position: 100% 50%; }
  75% {
    background-position: 50% 0%; }
  100% {
    background-position: 0% 50%; } }

@keyframes twinkle {
  0%,
  100% {
    opacity: .2;
    transform: scale(1); }
  50% {
    opacity: 1;
    transform: scale(1.5); } }

@keyframes pulse {
  0%,
  100% {
    opacity: .5;
    transform: translate(-50%, -50%) scale(1); }
  50% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2); } }

@keyframes fadeInOut {
  0%,
  100% {
    opacity: .6; }
  50% {
    opacity: 1; } }