/*
 * 妙想成片 · 令牌层与卡片层（重生）
 * ============================================================================
 * 这个文件取代 design-system.css 里分散在 6 个 :root 块中的主题定义，以及
 * 6 轮叠加出来的 .catalog-item 卡片规则。
 *
 * 两条不可动摇的契约：
 *
 * 1. 变量名冻结、值可换。appearance.js 的过渡列表和 12 个方向的 interpolate
 *    测试逐一点名这些变量；改名即失效。
 * 2. 类名冻结、样式可换。14 个验收测试用 .catalog-item / .catalog-copy /
 *    .catalog-meta / .catalog-arrow / .workflow-logo 等类名定位元素。
 *
 * 与前作最大的区别：三套配色各自是一份【完整、自洽】的定义，不再有
 * "默认值 + 增量覆盖"。旧文件里 jade 靠 :root 兜底、blue 靠属性覆盖、
 * opal 又另开一个专用暗色块——三种策略混用正是主题栈失控的根源。
 */

/* ---------------------------------------------------------------------------
 * 一、过渡机制（保留）
 * 只注册会被主题切换插值的变量。--tool-tone 单独列在卡片层。
 * ------------------------------------------------------------------------- */
@property --bg{syntax:"<color>";inherits:true;initial-value:#f1f5f5}
@property --panel{syntax:"<color>";inherits:true;initial-value:#fff}
@property --soft{syntax:"<color>";inherits:true;initial-value:#e1eeeb}
@property --strong{syntax:"<color>";inherits:true;initial-value:#d8e9e5}
@property --ink{syntax:"<color>";inherits:true;initial-value:#123e47}
@property --text{syntax:"<color>";inherits:true;initial-value:#264f58}
@property --muted{syntax:"<color>";inherits:true;initial-value:#526f77}
@property --line{syntax:"<color>";inherits:true;initial-value:#d1dddd}
@property --line2{syntax:"<color>";inherits:true;initial-value:#c7d8d8}
@property --gold{syntax:"<color>";inherits:true;initial-value:#866327}
@property --gold2{syntax:"<color>";inherits:true;initial-value:#ead0a0}
@property --teal{syntax:"<color>";inherits:true;initial-value:#1c626a}
@property --danger{syntax:"<color>";inherits:true;initial-value:#bd554b}
@property --success{syntax:"<color>";inherits:true;initial-value:#2d8168}
@property --art-wash{syntax:"<color>";inherits:true;initial-value:transparent}
@property --hero-shade-a{syntax:"<color>";inherits:true;initial-value:rgba(9,18,24,.92)}
@property --hero-shade-b{syntax:"<color>";inherits:true;initial-value:rgba(9,18,24,.55)}
@property --hero-shade-c{syntax:"<color>";inherits:true;initial-value:rgba(9,18,24,.08)}
@property --catalog-price{syntax:"<color>";inherits:true;initial-value:#866327}
@property --navigation-accent{syntax:"<color>";inherits:true;initial-value:#866327}
@property --primary-end{syntax:"<color>";inherits:true;initial-value:#bc9759}
@property --page-heading{syntax:"<color>";inherits:true;initial-value:#0a3a45}
@property --brand-accent{syntax:"<color>";inherits:true;initial-value:#866327}
@property --workflow-icon{syntax:"<color>";inherits:true;initial-value:#866327}
@property --header-surface{syntax:"<color>";inherits:true;initial-value:#e8f0ef}
@property --navigation-surface{syntax:"<color>";inherits:true;initial-value:#e8f0ef}
@property --mobile-navigation-surface{syntax:"<color>";inherits:true;initial-value:#e8f0ef}
@property --field-surface{syntax:"<color>";inherits:true;initial-value:#f5f8f7}
@property --chrome-art-opacity{syntax:"<number>";inherits:true;initial-value:.07}
@property --tool-tone{syntax:"<color>";inherits:true;initial-value:#397fe0}
@property --opal-tint{syntax:"<number>";inherits:true;initial-value:.1}
@property --opal-shine{syntax:"<color>";inherits:true;initial-value:#ffffff94}
@property --opal-credit{syntax:"<color>";inherits:true;initial-value:#92651e}
@property --opal-on-action{syntax:"<color>";inherits:true;initial-value:#173039}

@media(prefers-reduced-motion:no-preference){
  :root.appearance-ready{
    transition-property:--bg,--panel,--soft,--strong,--ink,--text,--muted,--line,--line2,--gold,--gold2,--teal,--catalog-price,--navigation-accent,--primary-end,--page-heading,--brand-accent,--workflow-icon,--header-surface,--navigation-surface,--mobile-navigation-surface,--field-surface,--chrome-art-opacity,--danger,--success,--art-wash,--hero-shade-a,--hero-shade-b,--hero-shade-c,--opal-tint,--opal-shine,--opal-credit,--opal-on-action;
    transition-duration:480ms;transition-timing-function:ease-in-out;
  }
}

/* ---------------------------------------------------------------------------
 * 二、几何与节奏（唯一基准）
 * 旧文件把半径、阴影、间距散落在多处，这里收成一套。任何组件都引用这些，
 * 而不是各自写死像素。
 * ------------------------------------------------------------------------- */
:root{
  --radius:12px;
  --ui-radius:14px;
  --ui-radius-small:10px;
  --ui-control-height:44px;
  --ui-field-gap:16px;
  --ui-action-gap:12px;
  --ui-section-gap:24px;
  --ui-motion:180ms;
  --ui-ease:cubic-bezier(.22,1,.36,1);

  /* 卡片专用几何。图标 36px 是验收硬指标，不要随手改。 */
  --card-radius:14px;
  --card-icon:36px;
  --card-rail:3px;
  --card-shadow:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent),0 6px 18px color-mix(in srgb,var(--ink) 6%,transparent);
  --card-shadow-hover:0 2px 4px color-mix(in srgb,var(--ink) 6%,transparent),0 14px 30px color-mix(in srgb,var(--ink) 13%,transparent);
}

/* ---------------------------------------------------------------------------
 * 三、两套配色 × 亮暗 = 四份完整定义
 * 每块都写全所有基准变量，不依赖任何其它块的兜底。
 *
 * 默认配色是 opal，它同时占据 :root 兜底位——所以在没有 JS 执行、
 * data-palette 从未被写入时（首屏首帧、脚本被拦截、noscript），页面仍然是
 * opal 而不是无样式。此前兜底位由已删除的 jade 占据，导致删掉它后无 JS
 * 场景会掉成裸样式，所以这里把兜底换成 opal 的取值。
 * ------------------------------------------------------------------------- */

/* opal / light —— 默认皮肤，同时是 :root 兜底。
 * 选择器顺序有意义：:root 与原 [data-palette=opal] 同优先级，靠源序后者胜；
 * 而 blue 块写在后面，故 [data-palette=blue] 仍能覆盖 :root。 */
:root,
[data-palette=opal][data-theme=light],
[data-palette=opal]{
  color-scheme:light;
  --bg:#eff3f9;--panel:#fff;--soft:#f5f7fb;--strong:#e8efff;
  --ink:#1b2639;--text:#263449;--muted:#5b687c;--line:#dce4ef;--line2:#b8c6dc;
  --gold:#355bd4;--gold2:#355bd4;--teal:#355bd4;
  --catalog-price:#1b2639;--navigation-accent:#284bbb;--primary-end:#355bd4;
  --danger:#b83d4b;--success:#25795f;
  --shadow:0 1px 2px #2e48740a,0 8px 24px #2e48740f;
  --page-heading:#1b2639;--brand-accent:#ae761f;--workflow-icon:#355bd4;
  --header-surface:#f8faff;--navigation-surface:#fff;--mobile-navigation-surface:#fff;--field-surface:#fff;
  --chrome-art-opacity:0;--art-wash:transparent;
  --hero-shade-a:rgba(9,18,24,.92);--hero-shade-b:rgba(9,18,24,.55);--hero-shade-c:rgba(9,18,24,.08);
  --opal-tint:.1;--opal-shine:#ffffff94;--opal-credit:#92651e;--opal-on-action:#fff;
}

/* opal / dark —— 同时是 [data-theme=dark] 的兜底 */
[data-theme=dark],
[data-palette=opal][data-theme=dark]{
  color-scheme:dark;
  --bg:#15171c;--panel:#23272f;--soft:#2a303a;--strong:#303d60;
  --ink:#f0f4fb;--text:#e2e9f3;--muted:#b3bdcc;--line:#394352;--line2:#59677e;
  --gold:#a0b9ff;--gold2:#a0b9ff;--teal:#a0b9ff;
  --catalog-price:#f0f4fb;--navigation-accent:#c0d0ff;--primary-end:#a0b9ff;
  --danger:#ff9aab;--success:#86d9b7;
  --shadow:0 1px 2px #0000001a,0 10px 26px #00000024;
  --page-heading:#f0f4fb;--brand-accent:#ecc675;--workflow-icon:#a0b9ff;
  --header-surface:#2c3038;--navigation-surface:#23272f;--mobile-navigation-surface:#23272f;--field-surface:#23272f;
  --chrome-art-opacity:0;--art-wash:transparent;
  --hero-shade-a:rgba(9,18,24,.92);--hero-shade-b:rgba(9,18,24,.55);--hero-shade-c:rgba(9,18,24,.08);
  --opal-tint:.2;--opal-shine:#3c44524d;--opal-credit:#ecc675;--opal-on-action:#172343;
}

/* blue / light */
[data-palette=blue][data-theme=light],
[data-palette=blue]{
  color-scheme:light;
  --bg:#f4f7fc;--panel:#fff;--soft:#edf3fc;--strong:#dfeafb;
  --ink:#172b4d;--text:#38506f;--muted:#7185a1;--line:#d6e1f0;--line2:#b7c9e4;
  --gold:#356dd4;--gold2:#8bbbf7;--teal:#2876c7;
  --catalog-price:#38506f;--navigation-accent:#2876c7;--primary-end:#356dd4;
  --danger:#c35662;--success:#2b8a78;
  --shadow:0 16px 40px rgba(31,76,143,.1);
  --page-heading:#172b4d;--brand-accent:#2876c7;--workflow-icon:#2876c7;
  --header-surface:#f4f7fc;--navigation-surface:#edf3fc;--mobile-navigation-surface:#fff;--field-surface:#edf3fc;
  --chrome-art-opacity:.13;--art-wash:rgba(49,109,211,.33);
  --hero-shade-a:rgba(9,22,46,.91);--hero-shade-b:rgba(11,37,71,.58);--hero-shade-c:rgba(12,42,81,.09);
  --opal-tint:.1;--opal-shine:#ffffff94;--opal-credit:#92651e;--opal-on-action:#fff;
}

/* blue / dark */
[data-palette=blue][data-theme=dark]{
  color-scheme:dark;
  --bg:#101b2d;--panel:#18273e;--soft:#20344f;--strong:#294561;
  --ink:#edf4ff;--text:#dae6f5;--muted:#a4b7d0;--line:#344b69;--line2:#4b6687;
  --gold:#89b8ff;--gold2:#b4d5ff;--teal:#88c1f5;
  --catalog-price:#dae6f5;--navigation-accent:#88c1f5;--primary-end:#89b8ff;
  --danger:#ef97a3;--success:#7cd7ba;
  --shadow:0 18px 50px rgba(0,0,0,.26);
  --page-heading:#edf4ff;--brand-accent:#88c1f5;--workflow-icon:#88c1f5;
  --header-surface:#101b2d;--navigation-surface:#20344f;--mobile-navigation-surface:#18273e;--field-surface:#20344f;
  --chrome-art-opacity:.13;--art-wash:rgba(49,109,211,.33);
  --hero-shade-a:rgba(9,22,46,.91);--hero-shade-b:rgba(11,37,71,.58);--hero-shade-c:rgba(12,42,81,.09);
  --opal-tint:.2;--opal-shine:#3c44524d;--opal-credit:#ecc675;--opal-on-action:#172343;
}

/* ---------------------------------------------------------------------------
 * 四、功能色相（data-tone）
 * 卡片身份由左侧色轨和图标承载。色相只影响 --tool-tone，几何一律不动——
 * 这是"换配色不换版式"的保证。
 *
 * 只有这一套色表。design-system.css 里曾并存一套 data-visual 色表，两套
 * 同时写 --tool-tone，谁生效取决于当前配色：同一张 violet 卡片在 opal 下
 * 取到 data-visual=video 的蓝色、切到 blue 又变回紫色。那套已删除。
 * ------------------------------------------------------------------------- */
.function-directory .catalog-item[data-tone]{--tool-tone:var(--workflow-icon)}
.function-directory .catalog-item[data-tone=violet]{--tool-tone:#7654f6}
.function-directory .catalog-item[data-tone=blue]{--tool-tone:#397fe0}
.function-directory .catalog-item[data-tone=emerald]{--tool-tone:#159174}
.function-directory .catalog-item[data-tone=rose]{--tool-tone:#e54878}
.function-directory .catalog-item[data-tone=lime]{--tool-tone:#2da75e}
.function-directory .catalog-item[data-tone=orange]{--tool-tone:#ef741f}
.function-directory .catalog-item[data-tone=cyan]{--tool-tone:#00a0b6}
.function-directory .catalog-item[data-tone=coral]{--tool-tone:#ed6255}
.function-directory .catalog-item[data-tone=indigo]{--tool-tone:#596be0}
.function-directory .catalog-item[data-tone=amber]{--tool-tone:#d58a17}
.function-directory .catalog-item[data-tone=purple]{--tool-tone:#a54cbd}
[data-theme=dark] .function-directory .catalog-item[data-tone=violet]{--tool-tone:#8b6cff}
[data-theme=dark] .function-directory .catalog-item[data-tone=blue]{--tool-tone:#5598f4}
[data-theme=dark] .function-directory .catalog-item[data-tone=emerald]{--tool-tone:#22b08e}
[data-theme=dark] .function-directory .catalog-item[data-tone=rose]{--tool-tone:#f45c8c}
[data-theme=dark] .function-directory .catalog-item[data-tone=lime]{--tool-tone:#3bc66f}
[data-theme=dark] .function-directory .catalog-item[data-tone=orange]{--tool-tone:#ff8c32}
[data-theme=dark] .function-directory .catalog-item[data-tone=cyan]{--tool-tone:#14bed1}
[data-theme=dark] .function-directory .catalog-item[data-tone=coral]{--tool-tone:#ff7164}
[data-theme=dark] .function-directory .catalog-item[data-tone=indigo]{--tool-tone:#7b8cff}
[data-theme=dark] .function-directory .catalog-item[data-tone=amber]{--tool-tone:#f0a125}
[data-theme=dark] .function-directory .catalog-item[data-tone=purple]{--tool-tone:#c05ed7}

/* ---------------------------------------------------------------------------
 * 五、卡片（网格视图 = compact-grid）
 *
 * 手机优先。参考项目的卡片语言被完整继承，但按甲方三点要求改写：
 *   1. logo 不再套小方框——图标是无边框图形，直接落在卡片上
 *   2. 高对比度——纯白卡 + 顶部实色强调条 + 深色文字
 *   3. 辨识度——每个工具一个色相，贯穿强调条、图标、标签、按钮
 *
 * 布局契约（official-cards.cjs 逐项断言，改动前先读测试）：
 *   - 图标宽必须恰好 36px
 *   - 标题字号 >= 15px，描述字号 >= 13px
 *   - 图标 → 标题 → 描述 → 积分 的纵向顺序不可颠倒
 *   - 网格视图下必须有阴影（raised）
 *   - 内容不得溢出卡片，元素之间不得重叠
 * ------------------------------------------------------------------------- */
.function-directory .catalog-grid.compact-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.function-directory .compact-grid .catalog-item{
  position:relative;
  display:grid;
  grid-template-columns:var(--card-icon) minmax(0,1fr);
  /* 全部 auto 行，不用 1fr：1fr 会让"可交付"区块吸收全部余高，
   * 在卡片中间撑出一块空白。底部对齐改由 meta 的 margin-top:auto 负责。 */
  grid-template-rows:var(--card-icon) auto auto auto auto;
  align-items:start;
  align-content:start;
  gap:9px 10px;
  min-height:238px;
  padding:16px 15px 14px;
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  background:var(--panel);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  text-align:left;
  transition:transform var(--ui-motion) var(--ui-ease),box-shadow var(--ui-motion) ease,border-color var(--ui-motion) ease;
}
/* 顶部实色强调条：低对比度问题的直接解法，也是每张卡最醒目的身份信号 */
.function-directory .compact-grid .catalog-item::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,var(--tool-tone),color-mix(in srgb,var(--tool-tone) 55%,var(--panel)));
}
/* 右下装饰圆弧。必须几何上完全落在卡内：负偏移或 transform 位移都会把
 * scrollWidth 撑到 clientWidth 之上，即使 overflow:hidden 裁掉视觉部分，
 * official-cards.cjs 的 fit 断言仍会失败（实测 201 vs 174）。 */
.function-directory .compact-grid .catalog-item::after{
  content:"";
  position:absolute;
  right:7px;
  bottom:7px;
  width:30px;
  height:30px;
  border:1px solid color-mix(in srgb,var(--tool-tone) 14%,transparent);
  border-radius:50%;
  pointer-events:none;
}

/* 图标：完全去框。甲方明确否决了"小方块圈住 logo"的形态。 */
.function-directory .compact-grid .workflow-logo,
.function-directory .catalog-item[data-tone] .workflow-logo{
  display:grid;
  place-items:center;
  width:var(--card-icon);
  height:var(--card-icon);
  border:0;
  border-radius:0;
  background:none;
  background-image:none;
  color:var(--tool-tone);
  box-shadow:none;
  filter:none;
  grid-column:1;
  grid-row:1;
}
.function-directory .catalog-item .workflow-logo::before{content:none}
.function-directory .catalog-item .workflow-logo svg{width:30px;height:30px;stroke-width:1.65}

/* 卡片首行：无框图标靠左，分类标签紧跟图标，两者左对齐。
 *
 * 这行横跨整卡（grid-column:1/-1）。之前写成 grid-column:2 + flex-end，
 * 而 workflowIcon() 渲染的 .workflow-logo 是 kicker 的子元素——图标被一起
 * 推到第 2 列右端，第 1 列整列空着，视觉上"左边空、图标卡在中间"。
 * 图标不占独立网格列，首行由 kicker 自己排。
 *
 * 标签不再是居右的满底色胶囊。甲方嫌"小方框"，而任何带底色的形状读起来
 * 都是一个方框——只是换了个颜色。现在标签直接取图标同一个 --tool-tone
 * 并以 55% 混入 --ink：同色相邻让"图标 + 标签"成为一个识别单元，不需要
 * 任何框；混入 --ink 把它压到第二层，标题仍然是先被读到的那个。
 *
 * 混入目标必须是 --ink 而不是 --muted。实测 --muted 自身太浅，任何比例
 * （直到 100%）在亮色配色下都够不到 WCAG AA 的 4.5:1（最低 2.81）；
 * 换成 --ink 后六组配色/亮暗的最低对比度是 5.48:1。 */
.function-directory .compact-grid .catalog-kicker{
  grid-column:1/-1;
  grid-row:1;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  min-width:0;
}
.function-directory .compact-grid .catalog-tag{
  padding:0;
  border-radius:0;
  background:none;
  color:color-mix(in srgb,var(--tool-tone) 55%,var(--ink));
  font-size:12px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* 标题与描述 */
.function-directory .compact-grid .catalog-copy{display:contents}
.function-directory .compact-grid .catalog-copy b{
  grid-column:1/-1;
  grid-row:2;
  color:var(--ink);
  font-size:17px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:-.015em;
  overflow-wrap:anywhere;
}
.function-directory .compact-grid .catalog-copy small{
  grid-column:1/-1;
  grid-row:3;
  display:-webkit-box;
  min-height:40px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:normal;
}

/* "本次可交付"引导行：甲方要的"其他文字引导" */
.function-directory .compact-grid .catalog-outcome{
  grid-column:1/-1;
  grid-row:4;
  align-self:start;
  display:flex;
  align-items:flex-start;
  gap:6px;
  min-height:36px;
  padding:9px 10px;
  border-radius:9px;
  background:color-mix(in srgb,var(--tool-tone) 7%,var(--panel));
  color:color-mix(in srgb,var(--tool-tone) 60%,var(--ink));
  font-size:12.5px;
  font-weight:700;
  line-height:1.5;
}
.function-directory .compact-grid .catalog-outcome svg{width:15px;height:15px;flex:0 0 15px;margin-top:2px;color:var(--tool-tone)}
.function-directory .compact-grid .catalog-outcome>span{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 底部：价格与 CTA 合并成一行（参考项目的 footer 形态）。
 * 合并是控制卡片高度的关键——三层堆叠会把卡片顶到 327px，两列手机上首屏
 * 只能看到一行半。 */
.function-directory .compact-grid .catalog-foot{
  grid-column:1/-1;
  grid-row:5;
  /* 推到底部，卡片不等高时底部仍然齐平 */
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.function-directory .compact-grid .catalog-meta{
  display:grid;
  gap:2px;
  min-width:0;
  /* 必须显式左对齐：design-system.css:33 那份旧规则写着 text-align:right，
   * 只改 display 的话它仍会生效，导致"每条"右对齐飘着。 */
  text-align:left;
  justify-items:start;
}
/* 两个子项必须显式复位网格位置，而不只是对齐。
 *
 * design-system.css:1702 那层把两个子项放进了【不同的网格列】：
 *   small{grid-column:2;grid-row:1;justify-self:end;text-align:right}
 *   b{grid-column:1;grid-row:4;text-align:left}
 * 所以"每张"和"2 积分起"从来就不在同一列——它们在并排的两个隐式列里
 * （实测 meta 被撑成 grid-template-columns:49px 21px），视觉上就成了
 * "每张"缩进、价格贴左，甲方截图里那个"歪"。
 *
 * 只写 justify-items:start 或 justify-self:start 都无效：前者是容器给
 * 子项的默认值，被子项自己声明的 justify-self 覆盖；后者不改变列位置。
 * 必须把 grid-column / grid-row 一起复位，两者才会回到同一列的上下两行。 */
.function-directory .compact-grid .catalog-meta small{
  grid-column:1;
  grid-row:auto;
  justify-self:start;
  text-align:left;
  color:var(--muted);
  font-size:10.5px;
  font-weight:600;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.function-directory .compact-grid .catalog-meta b{
  display:flex;
  align-items:baseline;
  grid-column:1;
  grid-row:auto;
  justify-self:start;
  text-align:left;
  gap:3px;
  color:var(--catalog-price);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.function-directory .compact-grid .catalog-points{
  color:color-mix(in srgb,var(--tool-tone) 72%,var(--ink));
  font-size:19px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
/* "立即使用"：文字按钮，hover 填充实色。参考项目的 CTA 形态。
 *
 * width/height 必须显式重置：design-system.css:1726 的旧规则把箭头写成
 * 24×24 的图标盒子，而本层只改 min-height/padding 的话，旧层的 width:24px
 * 依然生效，会把按钮压成 30px 宽、文字换行成两行（实测 foot 高 77px）。
 * 这也是必须清掉旧层、而不是继续叠加的原因。 */
.function-directory .compact-grid .catalog-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex:0 0 auto;
  width:auto;
  height:auto;
  min-height:38px;
  margin:0;
  padding:0 14px;
  border:1px solid color-mix(in srgb,var(--tool-tone) 45%,var(--line));
  border-radius:10px;
  background:transparent;
  color:color-mix(in srgb,var(--tool-tone) 85%,var(--ink));
  font-size:12.5px;
  font-weight:800;
  white-space:nowrap;
  transition:background-color var(--ui-motion) ease,color var(--ui-motion) ease,border-color var(--ui-motion) ease;
}
.function-directory .compact-grid .catalog-arrow svg{width:14px;height:14px}
.function-directory .compact-grid .catalog-cta-text{display:inline}

/* 悬停 / 聚焦：整卡上浮 2px。
 * official-cards.cjs 断言 transform.m42 === -2，数值不可改。 */
.function-directory .compact-grid .catalog-item:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--tool-tone) 40%,var(--line));
  box-shadow:var(--card-shadow-hover);
}
.function-directory .compact-grid .catalog-item:hover .catalog-arrow{
  background:var(--tool-tone);
  border-color:var(--tool-tone);
  color:#fff;
}
.function-directory .compact-grid .catalog-item:focus-visible{
  outline:2px solid var(--tool-tone);
  outline-offset:2px;
}
/* 触控反馈：按下时轻微内收，让"点了有反应"可感知 */
.function-directory .compact-grid .catalog-item:active{transform:translateY(0) scale(.985)}

/* ---------------------------------------------------------------------------
 * 六、响应式
 * 手机两列是 directory-layout.cjs 与 theme-ui-consistency.cjs 的硬断言。
 * 手机是主场景（甲方：客户 90% 以上用手机），所以手机规格写得最细。
 * ------------------------------------------------------------------------- */
@media(max-width:1200px) and (min-width:821px){
  .function-directory .catalog-grid.compact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
  .function-directory .catalog-grid.compact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .function-directory .catalog-grid.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .function-directory .compact-grid .catalog-item{
    min-height:0;
    padding:14px 13px 13px;
    gap:9px;
    border-radius:var(--card-radius);
  }
  /* 手机上加粗强调条，两列窄卡更需要辨识度 */
  .function-directory .compact-grid .catalog-item::before{height:5px}
  .function-directory .catalog-item .workflow-logo svg{width:28px;height:28px}
  .function-directory .compact-grid .catalog-copy b{font-size:16px}
  .function-directory .compact-grid .catalog-copy small{font-size:13px;min-height:0;-webkit-line-clamp:2}
  .function-directory .compact-grid .catalog-outcome{
    font-size:12px;
    padding:8px 9px;
    min-height:0;
  }
  .function-directory .compact-grid .catalog-outcome>span{-webkit-line-clamp:2}
  .function-directory .compact-grid .catalog-points{font-size:17px}
  /* 两列布局下内容区只有约 150px：带文字按钮会把价格挤成两行，
   * 所以手机端 CTA 收成纯图标按钮，文字在更宽的屏幕上才出现。 */
  .function-directory .compact-grid .catalog-cta-text{display:none}
  .function-directory .compact-grid .catalog-arrow{
    width:38px;
    min-height:38px;
    padding:0;
  }
  .function-directory .compact-grid .catalog-arrow svg{width:16px;height:16px}
}
/* 超窄屏：两列已经不够放引导文案，收起可交付行，保住标题与价格 */
@media(max-width:360px){
  .function-directory .catalog-grid.compact-grid{gap:10px}
  .function-directory .compact-grid .catalog-item{padding:13px 11px 12px;gap:8px}
  .function-directory .compact-grid .catalog-copy b{font-size:15px}
  .function-directory .compact-grid .catalog-outcome{display:none}
  .function-directory .compact-grid .catalog-meta small{display:none}
  .function-directory .compact-grid .catalog-points{font-size:16px}
  .function-directory .compact-grid .catalog-arrow{min-height:36px;font-size:12px}
}

/* ---------------------------------------------------------------------------
 * 七、列表视图
 * 桌面表格化，手机转为两行块，保证窄屏仍可读。
 * ------------------------------------------------------------------------- */
.function-directory .catalog-grid:not(.compact-grid){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:26px}
.function-directory .catalog-grid:not(.compact-grid) .catalog-item{
  position:relative;
  display:grid;
  grid-template-columns:var(--card-icon) minmax(0,1fr) auto 22px;
  align-items:center;
  gap:13px;
  min-height:92px;
  padding:15px 6px 15px 14px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:none;
  box-shadow:none;
  color:var(--text);
  text-align:left;
}
.function-directory .catalog-grid:not(.compact-grid) .catalog-item::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:3px;
  height:34px;
  transform:translateY(-50%);
  border-radius:3px;
  background:var(--tool-tone);
}
.function-directory .catalog-grid:not(.compact-grid) .catalog-item::after{content:none}
.function-directory .catalog-grid:not(.compact-grid) .workflow-logo{
  width:var(--card-icon)!important;
  height:var(--card-icon)!important;
}
.function-directory .catalog-grid:not(.compact-grid) .catalog-copy{display:grid;gap:5px;min-width:0}
.function-directory .catalog-grid:not(.compact-grid) .catalog-copy b{color:var(--ink);font-size:17px;font-weight:700;line-height:1.35}
.function-directory .catalog-grid:not(.compact-grid) .catalog-copy small{
  display:block;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  white-space:normal;
  overflow:visible;
}
.function-directory .catalog-grid:not(.compact-grid) .catalog-meta{display:grid;gap:4px;text-align:right;white-space:nowrap}
.function-directory .catalog-grid:not(.compact-grid) .catalog-meta small{color:var(--muted);font-size:12px}
.function-directory .catalog-grid:not(.compact-grid) .catalog-meta b{color:var(--catalog-price);font-size:13px}
.function-directory .catalog-grid:not(.compact-grid) .catalog-points{color:var(--ink);font-size:15px;font-weight:800}
.function-directory .catalog-grid:not(.compact-grid) .catalog-arrow{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  color:var(--muted);
  transition:color var(--ui-motion) ease,transform var(--ui-motion) var(--ui-ease);
}
.function-directory .catalog-grid:not(.compact-grid) .catalog-item:hover .catalog-arrow{
  color:var(--tool-tone);
  transform:translateX(3px);
}
.function-directory .catalog-grid:not(.compact-grid) .catalog-item:hover .catalog-copy b{color:var(--tool-tone)}

@media(max-width:1050px){
  .function-directory .catalog-grid:not(.compact-grid){grid-template-columns:1fr}
}
@media(max-width:600px){
  .function-directory .catalog-grid:not(.compact-grid) .catalog-item{
    grid-template-columns:var(--card-icon) minmax(0,1fr) 22px;
    gap:10px;
    padding:15px 4px 15px 13px;
  }
  .function-directory .catalog-grid:not(.compact-grid) .catalog-meta{
    grid-row:2;
    grid-column:2;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    text-align:left;
  }
  .function-directory .catalog-grid:not(.compact-grid) .catalog-arrow{grid-column:3;grid-row:1/span 2}
}

/* ---------------------------------------------------------------------------
 * 八、减少动效
 * ------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .function-directory .compact-grid .catalog-item,
  .function-directory .compact-grid .catalog-item:hover,
  .function-directory .compact-grid .catalog-item:active,
  .function-directory .compact-grid .catalog-arrow,
  .function-directory .catalog-grid:not(.compact-grid) .catalog-arrow{transition:none;transform:none}
}