/* ============================================================================
   cad/pscards.css — 把 /cad/ 的「版本卡」换成 /adobe/ps/ 同款视觉
   ----------------------------------------------------------------------------
   客户 2026-10-08 要求: "版本卡样式就用 https://soft.mxrj.top/adobe/ps/ 这个页面的样式"

   ■ 这份文件的数值不是抄 CSS 源码, 而是抄【PS 页实际渲染出来的计算样式】:
     在 WebKit 里对线上 /adobe/ps/ 的 .version-card 逐个读 getComputedStyle
     (measure_ps.py -> shots/ps_card_spec.json), 然后在这里用同样的值写一遍。
     原因: PS 那张卡叠了 40 多条历史规则(VCARDH/VCARDUI2/VCARDUI3/VCARDUI4/
     GRIDSPACE2/MACFIX...), 后写的覆盖先写的; 直接照搬整段会引入一堆互斥的
     历史分支。按"最终渲染值"复刻, 结果一致且可核对。

   ■ 作用域: 只挂在三个版本网格上(#versionGridWin / #versionGridMac / #subGrid),
     用 ID 选择器保证压过 /cad/app.css(SketchUp 皮肤)里的 .version-card 规则。
     页面其余部分(导航 / hero / 功能 / 场景 / FAQ / 页脚 / 弹窗)一律不碰。

   ■ 故意【没有】搬过来的 (CAD 与 PS 的业务差异, 见交付报告):
     1. .version-card.bundle 金色 VIP 卡 + 👑 角标 —— 那是 Adobe 全家桶会员商品,
        CAD 页没有这个商品; 订阅版只用普通白卡。
     2. 星级评分 .v-rating/.v-stars/.v-score 与下载次数 .v-dlcount ——
        PS 现在的卡上也【没有】这两项(实测卡内文案只有 名称/年份/系统/大小/价格/按钮),
        而且它们属于"编造数据", 本项目早就明确去掉, 绝不引入。
     3. .v-price 价格行 —— DOM 结构保留(和 PS 一样), 但【先隐藏】。
        原因: CAD 接口现在所有版本的价格字段都是占位值 0.01(全站问题, 已报 P0),
        显示出来会误导买家; PS 自己也是 Windows 分支隐藏、Mac 分支才显示。
        客户把真实价格补上之后, 删掉本文件末尾那一条 .v-price{display:none} 即可。
     4. .v-size 文件大小 —— CAD 接口的 file_size 全是 0, 显示出来是 "—"。
        代码里仍然"有值才渲染", 所以现在不出现; 注意 .cc-meta 是横排 flex,
        少一项不会改变行高, 卡片高度与 PS 的 Windows 卡基本一致。
     5. ?btn=narrow / ?btn=outline / ?btn=grad / ?btn=full 这些"候选方案"开关 ——
        客户已经定稿是蓝色实心, 不需要把历史候选一起搬过来。
   ========================================================================== */

/* ---------- 网格: 与 PS 一致的间距 (列间距 24px, 行间距 18px) ----------
   注意: 这里【不改 grid-template-columns】。列数(桌面 4 列 / ≤900px 2 列)沿用
   /cad/app.css 里既有的响应式规则, 与 PS 的表现一致(实测 PS 也是 342px 宽时 2 列)。 */
#versionGridWin, #versionGridMac, #subGrid { gap: 18px 24px; }

/* ★ 为什么下面大量使用 !important -------------------------------------------
   /cad/app.css(SketchUp 皮肤, 四站共用, 本次不动它)里有一组带 !important 的
   版本卡规则(它自己的注释段号 VCARDUI2 / VCARDUI3 / VCARDUI4):
     .version-grid > .version-card                 { border-color/box-shadow/transition !important }
     .version-grid > .version-card:hover           { border-color/box-shadow/transform !important }
     .version-grid > .version-card .v-btn:not(...)  { background: var(--primary) !important ... }
        ↑ 皮肤刻意把卡内按钮定成自己的蓝 --primary #2060B0 (注释写着
          "sketchup 有自己的蓝色设计系统 (--primary #2060b0)")
     .version-grid > .version-card .v-btn:hover     { background: var(--primary-dark) !important }
   这些是"class 选择器 + !important", 优先级 (0,2,0)/(0,4,0)。
   本文件用的是"ID 选择器 + !important", 优先级 (1,1,0)/(1,2,0) —— 同为 !important 时
   比优先级, ID 赢。这样就能【不改公共 app.css】把卡片改成 PS 的样子。
   实测: 不加 !important 时 btn 背景拿到的是 #2060B0 而不是 PS 的 #007AFF, 阴影也拿到
   皮肤的 0.08/0.16 而不是 PS 的 0.07/0.11。
   ------------------------------------------------------------------------- */

/* ---------- 卡片本体 ---------- */
#versionGridWin .version-card,
#versionGridMac .version-card,
#subGrid .version-card {
  background: #FFFFFF;
  border: 1px solid #F2F3F5 !important;
  border-radius: 8px;
  padding: 16.7px 10px;
  box-shadow: 0 4px 12px rgba(0,30,54,0.07), 0 16px 40px rgba(0,30,54,0.11) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease !important;
}
/* 皮肤留下的"热门"角标在 PS 的卡上没有(PS 已删掉该角标), 这里清掉 */
#versionGridWin .version-card::before,
#versionGridMac .version-card::before,
#subGrid .version-card::before { content: none !important; }

/* 皮肤还给每张卡画了一个灰色"○"单选圈(app.css 的 .version-card::after, 配 .version-card.active
   用的——那是"点整张卡选中一个版本"的老交互)。PS 的卡上没有这个圈, CAD 现在也是每张卡各有
   自己的按钮(不是单选), 所以一并清掉, 否则卡片右上角会多一个灰圈、与 PS 不一致。 */
#versionGridWin .version-card::after,
#versionGridMac .version-card::after,
#subGrid .version-card::after { content: none !important; display: none !important; }

#versionGridWin .version-card:hover,
#versionGridMac .version-card:hover,
#subGrid .version-card:hover {
  border-color: #E8EAEE !important;
  box-shadow: 0 6px 16px rgba(0,30,54,0.09), 0 22px 54px rgba(0,30,54,0.15) !important;
  transform: translateY(-2px) !important;
}

/* ---------- 图标: 64x64, 无外层底色方块 ---------- */
#versionGridWin .version-card .v-icon,
#versionGridMac .version-card .v-icon,
#subGrid .version-card .v-icon {
  width: 64px; height: 64px; margin: 0 auto 14px;
  background: transparent !important; border-radius: 0 !important; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
#versionGridWin .version-card .v-icon img,
#versionGridMac .version-card .v-icon img,
#subGrid .version-card .v-icon img {
  width: 64px; height: 64px; border-radius: 0; object-fit: contain; display: block;
}
#versionGridWin .version-card .v-icon-emoji,
#versionGridMac .version-card .v-icon-emoji,
#subGrid .version-card .v-icon-emoji { font-size: 40px; line-height: 1; }

/* ---------- 版本名 + 放大的年份 ---------- */
#versionGridWin .version-card .v-name,
#versionGridMac .version-card .v-name,
#subGrid .version-card .v-name {
  font-size: 16px; font-weight: 600; line-height: 1.3;
  color: #1D1D1F; margin: 0 0 15.3px 0; min-height: 1.3em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 4px; box-sizing: border-box; max-width: 100%;
  display: flex; align-items: center; justify-content: center;
}
#versionGridWin .version-card .v-year,
#versionGridMac .version-card .v-year,
#subGrid .version-card .v-year { font-size: 20px; font-weight: 700; color: #1D1D1F; margin: 0 8px; }

/* ---------- 元信息行(平台/大小): 横排 flex, 12px 灰 ---------- */
#versionGridWin .version-card .cc-meta,
#versionGridMac .version-card .cc-meta,
#subGrid .version-card .cc-meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2px 6px; margin: 0 0 30.77px 0; max-width: 100%;
}
#versionGridWin .version-card .v-system,
#versionGridMac .version-card .v-system,
#subGrid .version-card .v-system,
#versionGridWin .version-card .v-size,
#versionGridMac .version-card .v-size,
#subGrid .version-card .v-size {
  font-size: 12px; font-weight: 400; color: #8E8E93; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ---------- 价格行: 结构保留、暂不显示 (原因见文件头注释 3) ----------
   ★ 客户把真实价格补齐后: 把下面这段的 display:none 改成 display:block 即可 */
#versionGridWin .version-card .v-price,
#versionGridMac .version-card .v-price,
#subGrid .version-card .v-price {
  font-size: 18px; font-weight: 700; color: #1D1D1F; line-height: 1.25; margin: 0 0 6px 0;
  display: none !important;
}

/* ---------- 按钮: 收窄居中 128px, PS 的蓝色实心 #007AFF ----------
   想换回本站蓝: 把下面的 #007AFF / #0066CC 换成 var(--primary) / var(--primary-dark) */
#versionGridWin .version-card .v-btn,
#versionGridMac .version-card .v-btn,
#subGrid .version-card .v-btn {
  width: auto; min-width: 128px; align-self: center;
  padding: 10px 26px; border-radius: 8px; border: 0 !important;
  background: #007AFF none !important; color: #FFFFFF !important;
  font-size: 14px; font-weight: 600; box-shadow: none !important;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer; margin-top: 0;
}
#versionGridWin .version-card .v-btn:hover,
#versionGridMac .version-card .v-btn:hover,
#subGrid .version-card .v-btn:hover {
  background: #0066CC none !important; color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(0,122,255,0.32) !important;
  transform: translateY(-1px) !important;
}
#versionGridWin .version-card .v-btn:active,
#versionGridMac .version-card .v-btn:active,
#subGrid .version-card .v-btn:active {
  background: #0066CC none !important;
  transform: translateY(0) !important;
  box-shadow: 0 3px 10px rgba(0,122,255,0.28) !important;
}

/* ---------- 窄屏: 与 PS 同样收紧卡内竖向留白 ----------
   实测 PS 390x844: 卡宽 159px, 卡高 260px, 名字 16px / 年份 20px(不缩字号), 按钮仍 128px。
   这里保持按钮 128px(实测在 159px 卡内不溢出), 只把元信息行下边距收窄一点。 */
@media (max-width: 900px) {
  #versionGridWin .version-card, #versionGridMac .version-card, #subGrid .version-card { padding: 16.7px 8px; }
  #versionGridWin .version-card .cc-meta, #versionGridMac .version-card .cc-meta,
  #subGrid .version-card .cc-meta { margin-bottom: 22px; }
}

/* ---------- Mac 分支的两个防溢出保护 (PS 的 MACFIX 规则, 原样搬) ----------
   .version-card 是 grid item, 默认 min-width:auto 会被 nowrap 长文本撑开,
   窄屏可能顶出横向滚动条。CAD 的版本名较短, 但保留这两条防御。 */
html.is-mac #versionGridWin .version-card,
html.is-mac #versionGridMac .version-card,
html.is-mac #subGrid .version-card { min-width: 0; }
html.is-mac #versionGridWin .version-card .v-name,
html.is-mac #versionGridMac .version-card .v-name,
html.is-mac #subGrid .version-card .v-name { white-space: normal; max-width: 100%; }

/* ---------- CAD_MOBILEFIX_20261014 (修 P1-2 窄屏横向溢出) ----------
   实测(Windows UA): /cad/ 在 390px 视口 scrollWidth=589(溢出 199px)、1024px 时 1178(溢出 154px);
   /maya/ 同视口都正常。根因有两层:
     ① 上面那两条防溢出保护只写在 html.is-mac 下 —— Windows 访客完全没生效
        (.version-card 仍是 grid item 的 min-width:auto)。
     ② .v-system 是 white-space:nowrap(单行省略号是设计意图), 长文本把卡片的最小宽度顶到 270px,
        而栅格是写死的 repeat(4,1fr)/repeat(2,1fr) -> 轨道不会低于内容最小宽 -> 整页顶宽。
   修法(已在浏览器注入验证: 390px 溢出自 199px 归零, 卡片 159px; 1024px 归零):
     · 卡片给 min-width:0 (去掉平台限制, Windows 也生效) —— 让 grid 轨道能收缩;
     · app.css 里把轨道改成 minmax(0,1fr) (见 app.css 顶部两处);
     · ≤640px 改单列(手机上 2 列 × 159px 太挤, 单列 342px 更可读);
     · .v-system 允许换行并钳两行 —— 与 /maya/ 同款, 避免窄卡里系统要求被截成"…"看不清。
   只加声明, 不动配色/字号/间距/按钮。回滚: 删掉本段 + app.css 两处 minmax 改回 1fr。 */
#versionGridWin .version-card,
#versionGridMac .version-card,
#subGrid .version-card { min-width: 0; }
#versionGridWin .version-card .v-system,
#versionGridMac .version-card .v-system,
#subGrid .version-card .v-system {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3em;
}
@media (max-width: 640px) {
  .version-grid { grid-template-columns: 1fr !important; }
}