AI Marketing Brain — Improving Control over AI-Generated Designs

背景目的

背景：已有完整设计组件库，并通过AI建立了代码组件库；但是在通过原型图产出UI时，经常出现组件错用、交互状态错用情况；

目的：完善AI对组件库的消费机制，保证AI可以100%准确调用组件；

完善设计系统

从【Style】到【多层级 Variables】

建立分层 Token 架构：
通过 Primitive → Semantic → Component 的层级关系，将基础值、语义和具体组件解耦；
提升全局维护效率：
通过 Alias 引用建立依赖关系，底层变量调整后可自动向上同步，显著降低全局改版和品牌升级的维护成本；
强化语义化表达：
组件不再直接引用具体色值，而是引用如 Text/Primary、Button/Primary/BG 等语义变量，提升规范的可读性和一致性；
支持多主题与多场景：
借助 Variables Mode，可统一管理 Light/Dark、品牌主题、多业务线及多端适配，减少重复维护多套 Style；
提升设计与研发一致性：
Variables 的 Token 层级、命名和引用关系更容易与前端 Design Token 建立映射，降低设计稿与代码实现之间的转换成本；

colors_and_type.css下载

/**
 * 营销大脑 Design System — Tokens(Light-only)
 * 结构参考 TraeWork colors_and_type.css:分组 + 语义别名两层。
 * 值来源标注:实测 = MasterGo 设计稿直读;推导 = 按逻辑生成待确认;待补 = 无来源。
 * 设计稿来源:产品规范页 752:113639 / 左导航 835:113476 / 顶导航 835:114527 / 资产留存页 705:132860
 *
 * @light-only
 * @group-priority: radius, spacer, icon-size, control, font, type, bg, text, border, brand, nav, status, gradient, shadow, effect
 */
:root {

  /* ===== radius ===== */
  --radius-0: 0px;      /* 直角/硬分隔 */
  --radius-2: 2px;      /* 推导 — 细线圆角 */
  --radius-4: 4px;    /* 实测 — 控件统一圆角(输入框/按钮/Select/标签)*/
  --radius-8: 8px;    /* 实测 — 卡片/容器 */
  --radius-12: 12px;  /* 推导 — 大容器 */
  --radius-full: 999px; /* 胶囊/圆形(圆形图标按钮) */
  /* 语义别名 */
  --radius-control: var(--radius-4);
  --radius-card:    var(--radius-8);
  --border-width-default: 1px;

  /* ===== spacer(4px 基准系统)===== */
  --spacer-0: 0px;     /* 无间距 */
  --spacer-2: 2px;     /* 细间距(描边/微调) */
  --spacer-4: 4px;     /* 推导 — 4px 基准(按钮垂直内边距/图标内边距) */
  --spacer-5: 5px;    /* 实测 — 顶导航 icon↔文字 */
  --spacer-8: 8px;    /* 实测 — 按钮 icon↔文字 */
  --spacer-10: 10px;  /* 实测 — 侧栏内缩 */
  --spacer-12: 12px;  /* 推导 — 紧凑块间距 */
  --spacer-16: 16px;  /* 实测 — 按钮水平内边距(md) */
  --spacer-18: 18px;  /* 推导 — 用户提供 Frame-1.png，创建任务表单行间距 */
  --spacer-20: 20px;  /* 实测 — 页面左右边距 / 侧栏组间距 */
  --spacer-24: 24px;  /* 推导 — 常规块间距 */
  --spacer-32: 32px;  /* 推导 — 区块间距 */
  --spacer-36: 36px;  /* 实测 — 顶导航项间距 */
  --spacer-40: 40px;  /* 推导 — 大区块间距 */
  --spacer-48: 48px;  /* 推导 — 页面级间距 */

  /* ===== icon-size ===== */
  --icon-size-12: 12px;  /* 实测 — 可清空×图标 199157067752492/2:5321 */
  --icon-size-14: 14px;  /* 按钮内/正文行内/表格操作 */
  --icon-size-16: 16px;  /* 输入框前后缀/菜单项/侧栏组头 */
  --icon-size-20: 20px;  /* 卡片标题操作/Toast 状态 */
  --icon-size-24: 24px;  /* 空状态/引导位 */
  --icon-stroke-width: 3; /* 推导 — IconPark outline 线宽,待确认 3 vs 4 */

  /* ===== control-height(通用控件高度）===== */
  --control-height-lg: 40px;  /* 推导 — large 按钮/输入框 */
  --control-height-md: 32px;  /* 实测 — 规范页按钮高度 default */
  --control-height-sm: 24px;  /* 推导 — small 按钮/输入框 */
  --control-height-topnav: 56px; /* 现有页面 topbar，待确认 */
  --page-min-width: 1280px; /* 用户确认 — 页面最小布局宽度 */
  --page-gutter: 20px; /* 实测 — 页面左右外边距 199157067752492/15:6449、15:7342 */
  --page-sidenav-width: 160px; /* 实测 — 页面左导航 */
  --page-column-gap: 10px; /* 实测 — 左导航与内容区间距 */
  --page-shell-top: 72px; /* 实测 — 固定导航后内容起点 */
  --page-brand-logo-width: 150px; /* 推导 — 页面顶部 Logo 缩小规格 */
  --page-brand-logo-height: 18px; /* 推导 — 保持 Logo 原始比例 */
  --avatar-size-topnav: 32px; /* 实测 — 顶导航用户头像设计稿 */
  --page-content-intro-height: 168px; /* 实测 — 首个一级内容区域 199157067752492/15:7402 */
  --page-content-section-gap: 10px; /* 实测 — 内容区块 y=647 至下一块 y=657，199157067752492/15:7342 */
  --card-padding: 20px; /* 实测 — 嵌套内容容器 x=210 至内容 x=230，199157067752492/15:7342 */
  --card-body-gap: 20px; /* 实测 — 卡片标题区 32px 后至内容体间距，15:8030、15:7714 */
  --card-stack-gap: 40px; /* 实测 — 嵌套卡片与分隔线之间的纵向间距，15:8030、15:7711、15:7714 */
  --control-width-select: 180px; /* 实测 — Select 默认宽度 199157067752492/2:5548 */
  --select-option-height: 34px; /* 实测 — Select 下拉选项行高 199157067752492/2:5548 */
  --dropdown-panel-offset: 4px; /* 用户确认 — 下拉面板距触发器 4px，2026-07-28 */
  --dropdown-option-padding-inline: 9px; /* 实测 — 1px 描边内侧至内容 9px，距面板外缘 10px，MasterGo 39:6349 */
  --dropdown-control-label-gap: 10px; /* 实测 — Checkbox 右缘至文字左缘，39:5818 */
  --dropdown-panel-padding-top: 8px; /* 用户确认 — 下拉面板顶部内边距，2026-07-28 */
  --dropdown-panel-padding-bottom: 8px; /* 用户确认 — 下拉面板底部内边距，2026-07-28 */
  --checkbox-size: 14px; /* 实测 — Checkbox 外框，39:5818 */
  --switch-width: 44px; /* 实测 — Switch 轨道，39:5818 */
  --switch-height: 22px; /* 实测 — Switch 轨道，39:5818 */
  --switch-thumb-size: 16px; /* 实测 — Switch 滑块，39:5818 */
  --switch-thumb-inset: 3px; /* 实测 — Switch 滑块距轨道边缘，39:5818 */
  --cascader-column-width: 159px; /* 实测 — 320px 外框减 1px 双侧描边后的双等分列，MasterGo 39:6349 */
  --cascader-panel-max-height: 247px; /* 实测取整 — 展开面板高 246.9998px，39:6349 */
  --dialog-width-form: 524px; /* 实测 — 表单弹窗 199157067752492/15:4783 */
  --dialog-height-form: 336px; /* 实测 — 表单弹窗 199157067752492/15:4783 */
  --dialog-width-message: 300px; /* 实测 — 消息弹窗 199157067752492/15:4869、15:4894、15:4758 */
  --dialog-height-message: 183px; /* 实测 — 消息弹窗 199157067752492/15:4869、15:4894、15:4758 */
  --dialog-form-control-width: 357px; /* 实测 — 表单弹窗输入控件宽度 199157067752492/15:4783 */
  --dialog-form-label-width: 107px; /* 实测 — 表单弹窗内容 x=30 至控件 x=137 */
  --dialog-form-row-gap: 20px; /* 实测 — 32px 控件按 52px 节距排列 */
  --dialog-form-padding: 30px; /* 实测 — 标题及底部操作区距弹窗边缘 30px */
  --dialog-message-padding: 28px; /* 实测 — 消息图标、正文及底部操作区距边缘 28px */
  --dialog-action-gap-form: 10px; /* 实测 — 表单弹窗 68px 操作按钮间距 */
  --dialog-action-gap-message: 12px; /* 实测 — 消息弹窗 56px 操作按钮间距 */
  --tabs-module-height: 56px; /* 实测 — 模块级 Tab，MasterGo 199157067752492/39:2636 */
  --tabs-inner-height: 26px; /* 实测 — 模块内 Tab，MasterGo 199157067752492/39:3465 */
  --tabs-module-gap: 8px; /* 实测 — 模块级 Tab 间距，39:2637 */
  --tabs-inner-gap: 40px; /* 实测 — 模块内 Tab 间距，39:3466 */
  --tabs-indicator-width: 16px; /* 实测 — 模块内选中指示条，39:3474 */
  --tabs-indicator-height: 3px; /* 实测 — 模块内选中指示条，39:3474 */
  --tag-height-label: 22px; /* 实测 — 普通标签，MasterGo 199157067752492/39:3833 */
  --tag-height-status: 20px; /* 实测 — 状态标签，39:3842、39:3852、39:3862 */
  --tag-padding-inline: 6px; /* 实测 — 标签文字左右留白 */
  --pagination-item-size: 32px; /* 推导 — 用户提供 Frame.png，分页按钮 */
  --pagination-page-size-width: 128px; /* 推导 — 用户提供 Frame.png，每页条数选择器 */
  --date-picker-trigger-width: 240px; /* 实测 — 日期触发器 199157067752492/15:0964，15:2056 */
  --date-picker-range-width: 340px; /* 实测 — 区间触发器 199157067752492/15:0964，15:2074 */
  --date-picker-panel-width: 280px; /* 实测 — 单日期面板 199157067752492/15:0964，15:2135 */
  --date-picker-panel-height: 300px; /* 推导 — 日期与时间拆分后移除顶部日期/时间输入区 */
  --date-picker-range-panel-width: 587px; /* 实测 — 双日历面板 199157067752492/15:0964，15:2733 */
  --date-picker-range-panel-height: 300px; /* 推导 — 日期与时间拆分后移除顶部日期/时间输入区 */
  --date-picker-calendar-width: 288px; /* 实测 — 双日历单侧宽度 15:3016、15:2994 */
  --date-picker-divider-width: 11px; /* 实测 — 双日历中间分隔区 15:2692、15:2741 */
  --date-picker-calendar-header-height: 42px; /* 实测 — 月份切换栏 */
  --date-picker-weekdays-height: 29px; /* 实测 — 月份栏底部至日期首行 */
  --date-picker-day-size: 28px; /* 实测 — 日期选中块 15:2662、15:2679 */
  --date-picker-day-column-step: 38px; /* 实测 — 星期/日期列 x 坐标间隔 */
  --date-picker-day-row-step: 36px; /* 实测 — 日期行 y 坐标间隔 */
  --date-picker-footer-height: 54px; /* 实测取整 — y=516.38 至面板底部 569.69 */
  --date-picker-nav-size: 24px; /* 实测 — 月/年切换按钮 */
  --date-picker-action-width: 56px; /* 用户确认 — 日期面板取消/确定按钮统一宽度 */
  --date-picker-panel-offset: var(--dropdown-panel-offset); /* 用户确认复用 — 下拉浮层统一间距，2026-07-28 */
  --time-picker-trigger-width: 168px; /* 推导 — 独立组件触发器与实测时间面板同宽 */
  --time-picker-range-width: 240px; /* 推导 — 开始/结束时间联选触发器 */
  --time-picker-panel-width: 168px; /* 实测 — 时分秒选择面板 15:2564 */
  --time-picker-range-panel-width: 346px; /* 推导 — 两个 168px 时间面板 + 10px 分隔 */
  --time-picker-range-gap: 10px; /* 推导 — 沿用表单控件间距 */
  --time-picker-panel-height: 234px; /* 实测取整 — 原始 233.692px */
  --time-picker-column-width: 56px; /* 实测 — 时/分/秒三等分 */
  --time-picker-header-height: 36px; /* 实测取整 — 时间面板内容区 y=36.213px */
  --time-picker-row-height: 32px; /* 实测 — 时间选项节距 */
  --time-picker-panel-offset: var(--dropdown-panel-offset); /* 用户确认复用 — 下拉浮层统一间距，2026-07-28 */

  /* ===== font ===== */
  --font-family-default: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif;
  --font-weight-default: 400;  /* 实测 — 正文 */
  --font-weight-medium:  500;  /* 实测 — 选中子项(中黑体）*/
  --font-weight-strong:  600;  /* 实测 — 标题/激活/强调 */

  /* ===== type(字号 + 行高，成对）===== */
  --body-caption-font-size: 12px;  --body-caption-line-height: 20px; /* 辅助/时间戳 */
  --body-base-font-size:    14px;  --body-base-line-height:    22px; /* 正文/菜单/导航 */
  --heading-section-font-size: 16px; --heading-section-line-height: 24px; /* 模块标题 */
  --heading-content-section-line-height: 20px; /* 实测 — 一级内容区域标题 199157067752492/15:8237 */
  --heading-card-line-height: 16px; /* 实测 — 嵌套卡片标题 199157067752492/15:8030、15:7714 */
  --heading-page-font-size:    18px; --heading-page-line-height:    26px; /* 页面大标题/Logo */
  --metric-font-size: 24px;  --metric-line-height: 32px;  /* 指标数字 */

  /* ===== bg / surface ===== */
  --bg-page:        #E9F1FE;  /* 实测 — 页面底色 */
  --bg-container:   #FFFFFF;  /* 实测 — 卡片/弹窗 */
  --bg-popup-inner: #F9F9F9;  /* 实测 — 弹窗内部 */
  --bg-fill-light:  #F5F7FA;  /* 实测 — 浅填充/次级区 */
  --bg-card-nested: #FAFAFA;  /* 实测 — 嵌套内容卡片 199157067752492/15:7434 */
  --bg-tag:         #EDF0F5;  /* 实测 — 多选 Select 已选标签 199157067752492/15:0416 */
  --bg-disabled-control: rgba(237, 240, 245, 0.1495); /* 实测 — 输入框禁用底色 199157067752492/2:5321 */
  --bg-hover-soft:  rgba(17,30,54,0.06);  /* 推导 — 通用 hover 浅底(text 按钮/菜单项 hover) */
  --bg-active-soft: rgba(17,30,54,0.15); /* 推导 — 通用 active 浅底(text 按钮 active) */
  --dropdown-option-hover-bg: #F5F7FA; /* 实测 — 下拉选项整行 hover，39:6349 */
  --tag-bg-label: rgba(17, 30, 54, 0.05); /* 实测 — 普通标签背景，39:3833 */
  --tag-bg-processing: #E6F8F4; /* 实测 — 进行中标签背景，39:3842 */
  --tag-bg-error: rgba(255, 34, 0, 0.1039109007); /* 实测 — 任务失败背景，39:3857 */
  --tag-bg-complete: #F4F4F9; /* 实测 — 任务完成背景，39:3867 */
  --bg-overlay:     rgba(0,0,0,0.5);     /* 用户确认 — 弹窗/抽屉蒙层 */

  /* ===== text ===== */
  --text-default:    #111E36;  /* 实测 — 主要文字/标题 */
  --text-regular:    #6F7A91;  /* 实测 — 常规文字/未激活导航 */
  --text-secondary:  #828CA0;  /* 实测 — 次要文字/占位符 */
  --text-tertiary:   #909399;  /* 实测 — 第三级文字/操作图标(可清空×) 199157067752492/2:5321 */
  --text-disabled:   #C0C4CC;  /* 实测 — 禁用文字 */
  --text-action-muted: #CDCDD7; /* 实测 — 日期选择器取消操作 199157067752492/15:0964，15:2969 */
  --dropdown-option-text: #303133; /* 实测 — 下拉选项文字，MasterGo 199157067752492/39:6349 */
  --tabs-module-text: #303133; /* 实测 — 模块级未选中文字，MasterGo 199157067752492/39:2636 */
  --tabs-inner-text: rgba(17, 30, 54, 0.7); /* 实测 — 模块内未选中文字，39:3465 */
  --tag-text-processing: #0BBC96; /* 实测 — 进行中标签文字，39:3844 */
  --tag-text-error: #FF2200; /* 实测 — 任务失败标签文字，39:3853 */
  --tag-text-complete: #6F7A91; /* 实测 — 任务完成标签文字，39:3863 */
  --text-inverse:    #FFFFFF;
  --text-on-primary-disabled: rgba(255, 255, 255, 0.6); /* 实测 — 主按钮禁用白字 */

  /* ===== border ===== */
  --border-control: #C5CAD4;  /* 实测 — 输入框/控件边框 */
  --checkbox-border: #DCDFE6; /* 实测 — Checkbox 默认描边，MasterGo 199157067752492/39:5818 */
  --border-split:   #EDF0F5;  /* 实测 — 分割线 */
  --dropdown-panel-border: #EBEEF5; /* 实测 — 下拉面板 1px 外描边，MasterGo 199157067752492/39:6349 */
  --dropdown-divider: var(--dropdown-panel-border); /* 实测 — 两列下拉菜单 2px 分隔线，39:6349 */
  --border-card-divider: rgba(17,30,54,0.08); /* 实测 — 嵌套内容卡片分隔线 199157067752492/15:7711 */
  --border-demo:    #E4E8F0;  /* 文档演示用浅边框 */

  /* ===== brand(主色 + 状态；主色阶为「透明度阶」，非混色）===== */
  --brand-primary:        #3170FF;             /* 实测 */
  --brand-primary-hover:  #006AE4;             /* 实测 — 产品逻辑压暗 */
  --brand-primary-active: #006AE4;             /* 实测 — 与 hover 同值 */
  --brand-primary-a90: rgba(49,112,255,0.9);
  --brand-primary-a80: rgba(49,112,255,0.8);
  --brand-primary-a70: rgba(49,112,255,0.7);
  --brand-primary-a60: rgba(49,112,255,0.6);
  --brand-primary-a50: rgba(49,112,255,0.5);   /* 实测 — 主按钮禁用底 */
  --brand-primary-a40: rgba(49,112,255,0.4);
  --brand-primary-a30: rgba(49,112,255,0.3);
  --brand-primary-a20: rgba(49,112,255,0.2);
  --brand-primary-a10: rgba(49,112,255,0.1);   /* 实测取整 — Select 选项 hover 199157067752492/2:5548 */
  --brand-primary-a06: rgba(49,112,255,0.06);  /* hover 浅底/下拉项 hover */
  --checkbox-selected-bg: #0078FF; /* 实测 — Checkbox 选中底色，MasterGo 199157067752492/39:5818 */
  --tabs-module-bg: rgba(255, 255, 255, 0.5); /* 实测 — 模块级未选中背景，39:2636 */

  /* ===== nav(导航专用激活色，区别于 brand-primary）===== */
  --nav-default: #6F7A91;  /* 实测 — 导航默认（同 text-regular）*/
  --nav-active:  #2A6CFF;  /* 实测 — 顶/左导航激活 + hover */

  /* ===== status ===== */
  --status-success: #1AC45D;  /* 实测 — 辅助色1,成功提示/正向状态 */
  --status-warning: #FF742A;  /* 实测 — 辅助色2,警告提示/需注意状态 */
  --status-danger:  #E91736;  /* 实测 — 辅助色3,危险/错误/删除 */
  --status-danger-hover:  #EC4660;  /* 推导 */
  --status-danger-active: #BA122B;  /* 推导 */
  --status-danger-a06: rgba(233,23,54,0.06);

  /* ===== gradient(数据可视化，渐变色 1–10 全实测）===== */
  --gradient-1:  linear-gradient(289deg, #469DFF 0%, #1E66F8 100%);
  --gradient-2:  linear-gradient(109deg, #59C5BA 0%, #43D1B7 100%);
  --gradient-3:  linear-gradient(109deg, #F9C14E 3%, #FFD35A 100%);
  --gradient-4:  linear-gradient(109deg, #F88254 0%, #F5975B 99%);
  --gradient-5:  linear-gradient(109deg, #A8AEFE 0%, #97B0FE 100%);
  --gradient-6:  linear-gradient(111deg, #7DE79F -3%, #9CF6AE 118%);
  --gradient-7:  linear-gradient(109deg, #FF6BBF 3%, #FB9CB9 100%);
  --gradient-8:  linear-gradient(109deg, #8164E0 0%, #857BF3 100%);
  --gradient-9:  linear-gradient(109deg, #A7BF62 0%, #BFD57D 100%);
  --gradient-10: linear-gradient(109deg, #AFD8FF 0%, #97D7FE 100%);
  /* 图表分类纯色序（取渐变起始色）*/
  --chart-1: #469DFF; --chart-2: #59C5BA; --chart-3: #F9C14E; --chart-4: #F88254; --chart-5: #A8AEFE;
  --chart-6: #7DE79F; --chart-7: #FF6BBF; --chart-8: #8164E0; --chart-9: #A7BF62; --chart-10: #AFD8FF;

  /* ===== chart-line（折线图，MasterGo 199157067752492 / 39:3976）===== */
  --chart-line-height: 305px; /* 实测 — 图表主体 Frame 高度 */
  --chart-line-compact-height: 132px; /* 推导 — 人群资产六期分层趋势截图，紧凑行高 */
  --chart-line-compact-grid-left: 44px; /* 推导 — 为紧凑图纵轴标签保留空间 */
  --chart-line-compact-grid-right: 8px; /* 推导 — 分层趋势右侧安全间距 */
  --chart-line-compact-grid-top: 8px; /* 推导 — 分层趋势顶部安全间距 */
  --chart-line-compact-grid-bottom: 26px; /* 推导 — 仅保留横轴，不保留重复图例 */
  --chart-line-compact-axis-font-size: 10px; /* 推导 — 分层趋势紧凑刻度 */
  --chart-line-grid-left: 32px; /* 实测 — 网格线与图表左边界 */
  --audience-trend-main-grid-left: 48px; /* 推导 — 总资产趋势为纵轴刻度额外预留 16px，避免覆盖左侧摘要 */
  --chart-line-grid-right: 1px; /* 实测 — 网格线右侧余量 */
  --chart-line-grid-top: 5px; /* 实测 — 首条网格线距主体顶部 */
  --chart-line-grid-bottom: 55px; /* 实测 — 绘图区底线 y=250，主体高 305 */
  --chart-line-grid-color: #EDF0F5; /* 实测 — 6 条横向网格线 */
  --chart-line-grid-width: 1px; /* 实测 — 横向网格线 */
  --chart-line-axis-font-size: 12px; /* 实测 — 横纵轴标签 */
  --chart-line-axis-line-height: 12px; /* 实测 — 横纵轴标签行高 */
  --chart-line-axis-label-gap: 11px; /* 实测 — 绘图区底线 y=250 至横轴标签 y=261 */
  --chart-line-value-label-gap: 12px; /* 实测 — 纵轴标签右缘至网格线 x=32 */
  --chart-line-axis-color: #111E36; /* 实测 — 横纵轴标签 */
  --chart-line-category-font-family: var(--font-family-default); /* 实测 — 横轴 PingFangSC */
  --chart-line-value-font-family: Arial, sans-serif; /* 实测 — 纵轴 ArialMT */
  --chart-line-legend-bottom: 0px; /* 实测 — 图例贴主体底部 */
  --chart-line-legend-gap: 32px; /* 实测 — 相邻图例项间距 */
  --chart-line-legend-icon-width: 14px; /* 用户提供图例 SVG — 整体宽度 */
  --chart-line-legend-icon-height: 7px; /* 用户提供图例 SVG — 整体高度 */
  --chart-line-legend-label-gap: 8px; /* 实测 — 图例图形至文字 */
  --chart-line-stroke-width: 2px; /* 用户确认 — 曲线线宽 */
  --chart-line-primary-stroke-width: 3px; /* 用户指定 — 本品曲线加粗，突出主系列 */
  --chart-line-secondary-opacity: 0.46; /* 推导 — 本品与竞品同图时降低竞品曲线权重，突出本品 */
  --chart-line-legend-text-color: #6F7A91; /* 实测 — 图例文字 */
  --chart-line-series-1: #226BF9; /* 实测 — 营销活动图例 */
  --chart-line-series-1-start: #469DFF; /* 实测 — 营销活动折线渐变起点 */
  --chart-line-series-1-end: #1E66F8; /* 实测 — 营销活动折线渐变终点 */
  --chart-line-series-2: #16AE9F; /* 实测 — 搜索广告图例 */
  --chart-line-series-2-start: #2DC1B2; /* 实测 — 搜索广告折线渐变起点 */
  --chart-line-series-2-end: #4AE7CA; /* 实测 — 搜索广告折线渐变终点 */
  --chart-line-series-3: #FF9265; /* 实测 — 智能关注图例/折线渐变起点 */
  --chart-line-series-3-end: #F7AB74; /* 实测 — 智能关注折线渐变终点 */
  --chart-line-series-4: #FFCD6F; /* 实测 — 拦截广告图例/折线渐变起点 */
  --chart-line-series-4-end: #FDDDA2; /* 实测 — 拦截广告折线渐变终点 */
  --chart-line-series-5: #A8AEFE; /* 实测 — 优效订图例/折线渐变起点 */
  --chart-line-series-5-end: #97B0FE; /* 实测 — 优效订折线渐变终点 */
  --chart-tooltip-bg: #FFFFFF; /* 实测 — hover 浮层背景 39:5709 */
  --chart-tooltip-border-color: rgba(216,220,230,0.6641); /* 实测 — hover 浮层描边 39:5737 */
  --chart-tooltip-border-width: 1px; /* 实测 — hover 浮层细描边 39:5736 */
  --chart-tooltip-radius: var(--radius-control); /* 推导 — 沿用浮层 4px 圆角 */
  --chart-tooltip-padding-block: var(--spacer-16); /* 实测 — 文本距浮层上下约 16px，39:5709 */
  --chart-tooltip-padding-inline: var(--spacer-16); /* 实测 — 内容左侧 x≈17px，39:5709 */
  --chart-tooltip-content-min-width: 210px; /* 实测 — 244px 实例宽减边框与 16px 双侧内边距 */
  --chart-tooltip-header-font-size: 14px; /* 实测 — 日期标题 39:5732 */
  --chart-tooltip-header-line-height: 14px; /* 实测 — 日期标题 39:5732 */
  --chart-tooltip-body-font-size: 12px; /* 实测 — 系列名与数值 39:5710–39:5728 */
  --chart-tooltip-body-line-height: 12px; /* 实测 — 系列名与数值 39:5710–39:5728 */
  --chart-tooltip-row-gap: var(--spacer-18); /* 实测 — 标题与两行数据的 y 方向间隔 */
  --chart-tooltip-marker-label-gap: 11px; /* 实测 — 13px 标记右缘至文本 x=41px */
  --chart-tooltip-shadow: 0 2px 5px 0 rgba(83,97,255,0.1499); /* 实测 — 39:5739 */
  --chart-axis-pointer-start-color: rgba(49,112,255,0.05); /* 用户指定 — hover 类目带（原实测 39:5754 rgba(30,145,255,0.082)，用户要求加深至 5%） */
  --chart-axis-pointer-end-color: rgba(49,112,255,0.05); /* 用户指定 — 与 start 同色实现纯色（原实测 rgba(30,145,255,0)） */
  --chart-hover-point-size: 8px; /* 实测 — 两条线的 hover 交点 39:5752、39:5756 */
  --chart-hover-point-fill: #FFFFFF; /* 实测 — hover 交点内芯 */
  --chart-hover-point-border-width: 2px; /* 实测 — hover 交点系列色描边 */
  --chart-legend-inactive-color: var(--text-disabled); /* 推导 — 未选图例沿用禁用文字色 */
  --chart-loading-mask: rgba(255,255,255,0.8); /* 推导 — ECharts loading 白色遮罩 */
  --chart-loading-spinner-radius: var(--spacer-10); /* 推导 — ECharts 默认量级 */
  --chart-state-empty-color: var(--text-secondary); /* 推导 — 空状态沿用次要文字 */
  --chart-state-error-color: var(--status-danger); /* 推导 — 错误状态沿用错误色 */
  --chart-bubble-height: 404px; /* 实测 — 气泡图主体 372px + 图例区 32px，39:4484 */
  --chart-bubble-grid-left: 34px; /* 实测 — 气泡图网格起点 39:4502 */
  --chart-bubble-grid-right: 18px; /* 实测换算 — 为 100% 末端刻度保留可见宽度 */
  --chart-bubble-grid-top: 31px; /* 实测 — 首条网格线 y=31px */
  --chart-bubble-grid-bottom: 79px; /* 实测 — 网格底线 y=325px，组件高 404px */
  --chart-bubble-x-font-size: 14px; /* 实测 — 横轴百分比刻度 */
  --chart-bubble-y-font-size: 12px; /* 实测 — 纵轴数值刻度 */
  --chart-bubble-x-title-bottom: 32px; /* 实测 — 横轴标题位于刻度与图例之间 */
  --chart-bubble-x-title-width: 72px; /* 实测 — “用户访问占比”标题宽度 */
  --chart-bubble-axis-title-color: #6F7A91; /* 实测 — 两个轴标题 */
  --chart-bubble-series-1: #0078FF; /* 实测 — 宝马5系描边 39:4547 等 */
  --chart-bubble-series-1-fill: rgba(0,120,255,0.3); /* 实测 — 宝马5系气泡填充 */
  --chart-bubble-series-2: #FF9265; /* 实测 — 奥迪A6L描边 39:4549 等 */
  --chart-bubble-series-2-fill: rgba(255,146,101,0.3); /* 实测 — 奥迪A6L气泡填充 */
  --chart-donut-height: 288px; /* 实测 — 环形图与图例总高 39:4688 */
  --chart-donut-center-y: 39%; /* 实测换算 — 圆心 y≈112.68 / 288 */
  --chart-donut-inner-radius: 50%; /* 推导 — DSL 未暴露内环直径，按实测外观换算 */
  --chart-donut-outer-radius: 78%; /* 实测换算 — ECharts 百分比基于半个短边，外径约 225px */
  --chart-donut-label-color: #111E36; /* 实测 — 百分比与中心文字 */
  --chart-donut-label-font-size: 12px; /* 实测 — 外部百分比 */
  --chart-donut-center-line-height: 16px; /* 实测 — 中心两行文字 */
  --chart-donut-label-line-length: 22px; /* 实测 — 外部引导线段约 22px */
  --chart-donut-series-1: #226BF9; /* 实测 — OGC 图例 */
  --chart-donut-series-1-start: #469DFF; /* 实测 — OGC 蓝色渐变 */
  --chart-donut-series-1-end: #1E66F8; /* 实测 — OGC 蓝色渐变 */
  --chart-donut-series-2: #16AE9F; /* 实测 — PGC 图例 */
  --chart-donut-series-2-start: #59C5BA; /* 实测 — PGC 绿色渐变 */
  --chart-donut-series-2-end: #43D1B7; /* 实测 — PGC 绿色渐变 */
  --chart-donut-series-3: #FF9265; /* 实测 — 口碑图例 */
  --chart-donut-series-3-start: #FF9265; /* 实测 — 口碑橙色渐变 */
  --chart-donut-series-3-end: #F7AB74; /* 实测 — 口碑橙色渐变 */
  --chart-donut-series-4: #FFCD6F; /* 实测 — 论坛图例 */
  --chart-donut-series-4-start: #FFCD6F; /* 实测 — 论坛黄色渐变 */
  --chart-donut-series-4-end: #FDDDA2; /* 实测 — 论坛黄色渐变 */
  --chart-bar-row-height: 32px; /* 实测 — 单行占位高度 39:4865 等 */
  --chart-bar-row-gap: 12px; /* 实测 — 相邻行间距 */
  --chart-bar-height: 24px; /* 实测 — 条形高度 */
  --chart-bar-category-width: 75px; /* 实测 — 左侧分类标签列 */
  --chart-bar-column-gap: 12px; /* 实测 — 标签、条形、数值之间间距 */
  --chart-bar-grid-left: 87px; /* 实测 — 75px 标签列 + 12px 间距 */
  --chart-bar-grid-right: 72px; /* 推导 — 为动态条尾数值预留最小空间 */
  --chart-bar-category-font-size: 12px; /* 实测 — 分类标签 */
  --chart-bar-category-line-height: 16px; /* 实测 — 两行分类标签 39:4916 */
  --chart-bar-value-font-size: 14px; /* 实测 — 条尾数值 */
  --chart-bar-gradient-start: #1E66F8; /* 实测 — 横向条形蓝色渐变 */
  --chart-bar-gradient-end: #469DFF; /* 实测 — 横向条形蓝色渐变 */

  /* ===== audience-assets-overview（人群资产总览，MasterGo 199157067752492 / 64:6593）===== */
  --audience-assets-card-padding: 20px; /* 实测 — 卡片内容 x=146，相对卡片 x=126 */
  --audience-assets-card-min-width: 1230px; /* 实测 — 两套状态卡片均为 1230px */
  --audience-assets-funnel-width: 1005px; /* 实测 — 64:6178 / 64:7015 */
  --audience-assets-track-width: 1189px; /* 推导 — 177px 机会列 + 5×193px 阶段列 + 5×8px 间距 */
  --audience-assets-funnel-height: 572px; /* 实测 — 64:6178 / 64:7015 */
  --audience-assets-stage-width: 193px; /* 实测 — 1D / 2D / 5D / 6D */
  --audience-assets-opportunity-ratio: .917fr; /* 推导 — 机会列与阶段列按 177:193 等比伸缩 */
  --audience-assets-stage-gap: 8px; /* 实测 — 相邻阶段 x 坐标差 */
  --audience-assets-help-size: 14px; /* 实测 — 帮助图标占位 */
  --audience-assets-value-gap: 6px; /* 实测 — 阶段数值图标与数字间距 */
  --audience-assets-opportunity-width: 177px; /* 实测 — 64:7016 */
  --audience-assets-stage-bg: #F8F8F8; /* 实测 — paint_64:3941 */
  --audience-assets-stage-head-bg: #EBEFF3; /* 实测 — paint_64:4578 */
  --audience-assets-selected-bg: rgba(49,112,255,0.03); /* 实测 — paint_64:4646 */
  --audience-assets-own-gradient: linear-gradient(180deg, #3170FF 1%, rgba(49,112,255,0.42) 100%); /* 实测 */
  --audience-assets-own-gradient-soft: linear-gradient(180deg, rgba(49,112,255,0.3) 0%, rgba(49,112,255,0.1) 100%); /* 实测 */
  --audience-assets-loss-gradient: linear-gradient(147deg, #59C5BA 0%, #43D1B7 99%); /* 实测 */
  --audience-assets-loss-gradient-soft: linear-gradient(147deg, rgba(89,197,186,0.40) 0%, rgba(67,209,183,0.30) 99%); /* 推导 — 实测绿色侧面透明度约 40% */
  --audience-assets-competitor-gradient: linear-gradient(180deg, rgba(252,170,136,0.5) 1%, rgba(255,146,101,0.3) 100%); /* 实测 */
  --audience-assets-competitor-solid: #FF9265; /* 推导 — 竞品渐变基色实心版，柱状图竞品柱用（用户确认 2026-08-06） */
  --audience-assets-competitor-gradient-soft: linear-gradient(180deg, rgba(255,146,101,0.3) 0%, rgba(255,146,101,0.1) 100%); /* 实测 */
  --audience-assets-competitor-loss-gradient: linear-gradient(180deg, rgba(255,216,142,0.5) 0%, rgba(255,228,178,0.5) 100%); /* 实测 */
  --audience-assets-competitor-loss-gradient-soft: linear-gradient(180deg, rgba(255,205,111,0.3) 0%, rgba(250,227,182,0.2) 100%); /* 实测 */
  --audience-assets-opportunity-front: linear-gradient(180deg, rgba(49,112,255,0.14) 0%, rgba(49,112,255,0.04) 100%); /* 推导 — 机会柱正面，按原稿组透明度折算 */
  --audience-assets-opportunity-side: linear-gradient(180deg, rgba(49,112,255,0.08) 0%, rgba(49,112,255,0.02) 100%); /* 推导 — 机会柱斜侧面 */
  --audience-assets-positive: #FB4949; /* 实测 — 阶段正向环比 */
  --audience-assets-negative: #59C5BA; /* 实测 — 阶段负向环比 */
  --audience-assets-own-icon-bg: rgba(49,112,255,0.15); /* 实测 — paint_64:4628 */
  --audience-assets-loss-icon-bg: rgba(81,202,185,0.15); /* 实测 — paint_64:4613 */
  --audience-assets-hover-shadow: 0 5px 30px 5px rgba(0,67,138,0.12); /* 实测 — hover投影 */

  /* ===== shadow ===== */
  --shadow-card:  0 0 10px 0 rgba(0,0,0,0.06);   /* 实测 — 卡片/浮层 */
  --dropdown-shadow: 0 0 10px 0 rgba(0,0,0,0.06); /* 实测 — 下拉浮层，MasterGo 199157067752492/39:6349 */
  --shadow-float: 0 3px 5px 0 rgba(0,0,0,0.13);  /* 实测 — 气泡 */
  --gradient-table-fixed-right: linear-gradient(90deg, rgba(17,30,54,0) 0%, rgba(17,30,54,0.1) 100%); /* 推导 — 固定操作列左侧满高渐隐，垂直方向保持一致 */
  --shadow-btn-primary: 0 2px 0 var(--brand-primary-a06); /* 按钮底部微投影,待确认去留 */
  --shadow-btn-default: 0 2px 0 rgba(17,30,54,0.02);
  --shadow-btn-danger:  0 2px 0 var(--status-danger-a06);

  /* ===== focus(键盘聚焦态,a11y)===== */
  --color-focus: var(--brand-primary);  /* 推导 — focus 描边色,用主色(用户确认) */

  /* ===== effect(侧栏毛玻璃）===== */
  --glass-sidebar-bg:   linear-gradient(180deg, rgba(255,255,255,0.5345) -8%, #FFFFFF 99%); /* 实测 */
  --glass-sidebar-blur: 24.48px;  /* 实测 */

  /* ===== z-index(层叠顺序,数字越大越在上)===== */
  --z-dropdown: 1000;  /* 下拉菜单(Select/TopNav 子菜单) */
  --z-sticky:   1100;  /* 吸顶/吸底元素 */
  --z-modal:    1200;  /* Dialog/Drawer(含蒙层) */
  --z-toast:    1300;  /* Toast/Notification */
  --z-tooltip:  1400;  /* Tooltip(最顶层) */
}