:root {
  /* 严按同行 b1.ruanvip.cn/ct-nfgmwz/ 严色码 (深蓝灰 + 浅蓝白) */
  --primary: #2060b0;
  --primary-dark: #1a4e98;
  --primary-light: #4a8ed4;
  --primary-soft: #edf3fb;
  --primary-deeper: #112754;
  --primary-deep: #1B3A6B;
  --primary-shadow: 0 4px 14px rgba(32,96,176,0.25);
  /* 背景层次 (严按同行 5 层渐变) */
  --bg-page: #112754;            /* 最深主背景 */
  --bg-section: #0d1c38;         /* 极深 sections */
  --bg-card-on-dark: #1B3A6B;    /* 深色上的卡片 */
  --bg-soft: #edf3fb;            /* 浅蓝白 sections */
  --bg-soft-2: #ddeaf5;          /* 略深浅蓝 */
  --bg-soft-3: #EEF5FF;          /* 极浅蓝 */
  --bg-soft-4: #E0EDFF;          /* 极浅蓝 2 */
  --bg-card-light: #ffffff;      /* 卡片白底 (在深色 section 上) */
  /* 文字 (严按同行) */
  --ink: #112754;
  --ink-2: #1B3A6B;
  --ink-3: #2D5A8E;
  --text-muted: #4A7AAA;
  --text-light: #5A8AC0;
  --text-pale: #9EC4F0;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #C8DCEE;
  --border: #C8D9EE;
  --border-2: #B8D0EA;
  --border-on-dark: #1B3A6B;
  /* 状态色 */
  --success: #10B981;
  --warning: #F59E0B;
  --rating: #FF9500;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg-page);
  line-height: 1.65;
  font-size: 18px;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.5px; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; }
strong, b { font-weight: 600; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-title { font-size: 36px; font-weight: 800; letter-spacing: -0.5px; text-align: center; margin-bottom: 12px; color: var(--text-on-dark); }
.section-subtitle { font-size: 18px; text-align: center; color: var(--text-on-dark-muted); margin-bottom: 56px; max-width: 720px; margin-left: auto; margin-right: auto; }

/* ============== Nav (严按同行: 深蓝底 + 白字) ============== */
.nav { position: sticky; top: 0; z-index: 100; background: var(--bg-page); border-bottom: 2px solid var(--primary-light); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--text-on-dark); }
.nav-logo img { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { font-size: 14px; color: var(--text-pale); transition: color 0.2s; }
.nav-links a:hover { color: #fff; }
.nav-actions { display: flex; gap: 8px; align-items: center; }
.nav-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; transition: all 0.2s; white-space: nowrap; }
.nav-btn-outline { background: transparent; color: var(--text-pale); border: 1px solid var(--primary-light); }
.nav-btn-outline:hover { background: rgba(74,142,212,0.15); color: #fff; border-color: var(--primary); }
.nav-btn-primary { background: var(--primary); color: #fff; border: 1px solid var(--primary); }
.nav-btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--primary-shadow); }

/* ============== Hero (严按同行: 深蓝渐变背景) ============== */
.hero { padding: 80px 0 96px; background: var(--bg-page); background-image: linear-gradient(135deg, #0A1A3E 0%, #1B3A6B 45%, #2563B0 100%); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(74,142,212,0.18) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(32,96,176,0.15) 0%, transparent 50%); pointer-events: none; }
.hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.hero-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255,255,255,0.10); border: 1px solid var(--primary-light); border-radius: 999px; font-size: 13px; color: var(--text-pale); margin-bottom: 20px; }
.hero-tag .dot { width: 6px; height: 6px; background: var(--primary-light); border-radius: 50%; }
.hero-title { font-size: 52px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; margin-bottom: 18px; color: #fff; }
.hero-title .accent { color: var(--primary-light); }
.hero-desc { font-size: 18px; color: var(--text-on-dark-muted); margin-bottom: 28px; max-width: 480px; line-height: 1.55; text-align: justify; }
.hero-trust { display: flex; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.hero-trust-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #fff; font-weight: 600; }
.hero-trust-item::before { content: "✓"; color: var(--primary-light); font-weight: 800; }
.hero-cta-row { display: flex; gap: 14px; margin-top: 8px; flex-wrap: nowrap; }
.hero-img { width: 100%; border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,0.40), 0 0 0 1px rgba(74,142,212,0.30); border: 1px solid var(--border-on-dark); }

/* ============== Versions (严按同行: 深蓝灰底 + 白卡) ============== */
.versions-section { background: var(--bg-page); }
.version-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.version-card { background: var(--bg-card-light); border: 1px solid var(--border-on-dark); border-radius: 14px; padding: 22px 18px; text-align: center; position: relative; transition: all 0.2s; }
.version-card:hover { border-color: var(--primary-light); box-shadow: 0 8px 24px rgba(32,96,176,0.35); transform: translateY(-3px); }
.version-card.hot::before { content: "热 门"; position: absolute; top: -10px; left: 12px; background: #c0392b; color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 6px; font-weight: 700; }
.v-icon { width: 56px; height: 56px; margin: 0 auto 10px; background: var(--primary-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.v-icon img { width: 36px; height: 36px; }
.v-name { font-size: 14px; font-weight: 800; line-height: 1.3; min-height: 2.6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; color: var(--ink); margin-bottom: 2px; }
.v-tag { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.v-rating { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 4px; }
.v-stars { color: var(--rating); font-size: 14px; letter-spacing: 1px; }
.v-score { font-size: 13px; font-weight: 700; color: var(--ink); }
.v-dlcount { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.v-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; background: var(--primary); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 700; transition: all 0.2s; border: none; text-decoration: none; }
.v-btn:hover { background: var(--primary-dark); }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-cta-win { background: linear-gradient(135deg, #4a8ed4 0%, #2060b0 100%) !important; padding: 14px 28px !important; font-size: 15px !important; box-shadow: 0 4px 20px rgba(74,142,212,0.55); border: 1px solid #7ec0f0 !important; flex: 1; white-space: nowrap; color: #fff; }
.hero-cta-win:hover { background: linear-gradient(135deg, #2060b0 0%, #1a4e98 100%) !important; box-shadow: 0 6px 26px rgba(74,142,212,0.70); transform: translateY(-2px); }
.hero-cta-mac { background: rgba(255,255,255,0.25) !important; color: #fff !important; padding: 14px 28px !important; font-size: 15px !important; border: 1px solid rgba(255,255,255,0.65) !important; backdrop-filter: blur(8px); flex: 1; white-space: nowrap; box-shadow: 0 4px 20px rgba(255,255,255,0.15); }
.hero-cta-mac:hover { background: rgba(255,255,255,0.40) !important; border-color: #fff !important; transform: translateY(-2px); box-shadow: 0 6px 26px rgba(255,255,255,0.25); }
.v-meta { font-size: 12px; color: var(--text-muted); margin-top: 12px; display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.v-meta .check { color: var(--primary); font-weight: 800; }

/* ============== Modal (严按同行) ============== */
.modal-mask { position: fixed; inset: 0; background: rgba(17,39,84,0.85); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal-mask.open { display: flex; }
.modal { background: #fff; border-radius: 16px; padding: 32px 28px; max-width: 480px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,0.50); position: relative; max-height: 88vh; overflow: auto; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-soft); color: var(--ink); font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.modal-close:hover { background: var(--border); }
.modal-title { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 6px; text-align: center; }
.modal-sub { text-align: center; font-size: 13px; color: var(--text-muted); margin-bottom: 22px; }
.modal-options { display: grid; gap: 12px; }
.modal-opt { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--bg-soft-3); border: 2px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--ink); transition: all 0.2s; cursor: pointer; }
.modal-opt:hover { border-color: var(--primary); background: #fff; box-shadow: var(--primary-shadow); transform: translateY(-1px); }
.modal-opt-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; border: 1px solid var(--border); }
.modal-opt-icon.win { color: var(--primary); }
.modal-opt-icon.mac { color: var(--ink-2); }
.modal-opt-text { flex: 1; }
.modal-opt-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.modal-opt-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.modal-opt-arrow { color: var(--text-muted); font-size: 18px; }

/* ============== Features (严按同行: 深蓝渐变背景) ============== */
.features-section { background: var(--bg-section); background-image: linear-gradient(135deg, #0A1A3E 0%, #1B3A6B 55%, #0A1A3E 100%); }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.feature-card { background: var(--bg-card-light); border: 1px solid var(--border); border-radius: 16px; padding: 26px; display: flex; gap: 18px; align-items: flex-start; transition: all 0.25s; }
.feature-card:hover { border-color: var(--primary-light); box-shadow: 0 12px 32px rgba(32,96,176,0.30); transform: translateY(-2px); }
.feature-img { width: 100%; max-width: 200px; height: 130px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: var(--bg-soft-2); }
.feature-body { flex: 1; }
.feature-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.feature-desc { font-size: 14px; color: var(--text-muted); line-height: 1.55; text-align: justify; }

/* ============== Scene List (严按同行: 中间浅蓝白) ============== */
.scene-section { background: linear-gradient(135deg, #0A1A3E 0%, #1B3A6B 55%, #0A1A3E 100%); }
.scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.scene-item { display: flex; gap: 14px; padding: 20px 22px; background: #fff; border: 1px solid var(--border); border-radius: 12px; align-items: flex-start; transition: all 0.2s; }
.scene-item:hover { border-color: var(--primary); box-shadow: var(--primary-shadow); transform: translateY(-2px); }
.scene-num { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.scene-name { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.scene-desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; }

/* ============== FAQ (严按同行: 深蓝渐变) ============== */
.faq-section { background: linear-gradient(135deg, #112754 0%, #1B3A6B 60%, #112754 100%); }
/* SU_FAQ_2COL_20261017: 「一行两条」= 6 条排成 3 行 × 2 列。

   必须带 #faq 前缀 —— 共享的 /cad/engine.css 第 168 行有

     #faq .faq-list{display:flex;flex-direction:column;gap:11px;max-width:820px;margin:18px auto 0}

   它含 ID(特异性 1,1,0), 压过本文件原来这条 .faq-list(0,1,0) 的 display:grid ——

   特异性优先于加载顺序, 所以 2026-10-14 加的“两列”在线上从未生效, 页面一直是一行一条。

   这里改用同特异性的 #faq 前缀(本文件在 engine.css 之后加载), 夺回控制权。

   ⚠ 只在 SketchUp 页生效(#faq 只存在于本页), 不碰共享 CSS, cad/maya/3dsmax/office 不受影响。 */

#faq .faq-list {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px 16px;        /* 行距 12px / 列距 16px —— 沿用原值, 间距视觉不变 */

  align-items: start;    /* 展开一条时, 同行的另一条保持自身高度, 不被拉伸变形 */

  max-width: 820px;      /* = engine.css 实际生效值, 版心宽度视觉不变 */

  margin: 18px auto 0;   /* = engine.css 实际生效的外边距, 视觉不变 */

}

/* 老浏览器兜底: 不支持【非前缀】CSS Grid 的浏览器(如 Safari ≤10、Chrome <57)退回 flex 两列。

   注: 本页 .review-grid / .footer-grid / .version-grid 本来就依赖非前缀 grid,

   这里只是不让 FAQ 比页面其它区块更差, 并非新增浏览器门槛。

   (更老的、连 @supports 都不支持的浏览器会忽略本块, 退回 engine.css 的一行一条 —— 与页面其它 grid 区块一致。) */

@supports not (display: grid) {

  #faq .faq-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px 16px; }

  #faq .faq-item { flex: 0 0 calc(50% - 8px); }   /* 列距 16px 的一半 */

}
.faq-item { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: all 0.2s; }
.faq-item.open { border-color: var(--primary); }
.faq-q { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; cursor: pointer; font-weight: 600; color: var(--ink); font-size: 15px; }
.faq-arrow { color: var(--primary); transition: transform 0.25s; font-weight: 700; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-a { padding: 0 22px 20px; color: var(--text-muted); font-size: 14px; line-height: 1.7; display: none; text-align: justify; }
.faq-item.open .faq-a { display: block; }

/* ============== Reviews (严按同行: 深蓝渐变) ============== */
.reviews-section { background: linear-gradient(135deg, #0d1c38 0%, #1B3A6B 50%, #0d1c38 100%); }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 24px; transition: all 0.25s ease; cursor: pointer; }
.review-card:hover { border-color: var(--primary-light); background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%); box-shadow: 0 12px 32px rgba(74,142,212,0.40), 0 0 0 1px rgba(74,142,212,0.20); transform: translateY(-4px); }
.review-card:hover .review-stars { color: #FFB400; text-shadow: 0 0 8px rgba(255,180,0,0.50); transform: scale(1.05); }
.review-card:hover .review-text { color: var(--ink); }
.review-stars { color: var(--rating); font-size: 16px; margin-bottom: 10px; letter-spacing: 2px; transition: all 0.25s ease; display: inline-block; }
.review-text { font-size: 14px; color: var(--ink-3); line-height: 1.65; margin-bottom: 14px; transition: color 0.25s ease; }

/* ============== Footer (严按同行: 中蓝渐变到深) ============== */
.footer { background: var(--bg-card-on-dark); background-image: linear-gradient(to right, #1B3A6B 0%, #2563B0 100%); padding: 48px 0 32px; border-top: 1px solid var(--border-on-dark); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 32px; }
.footer-brand { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.footer-sub { font-size: 13px; color: var(--text-on-dark-muted); max-width: 280px; line-height: 1.55; }
.footer-title { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.footer-link { display: block; font-size: 13px; color: var(--text-on-dark-muted); margin-bottom: 8px; transition: color 0.2s; }
.footer-link:hover { color: #fff; }
.footer-bottom { border-top: 1px solid var(--border-on-dark); padding-top: 22px; text-align: center; font-size: 12px; color: var(--text-pale); }

/* ============== Responsive ============== */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; }
  .hero-title { font-size: 38px; }
  .version-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: 1fr; }
  .scene-grid { grid-template-columns: 1fr; }
  #faq .faq-list { grid-template-columns: 1fr; }   /* ≤900px: 窄屏回退一行一条 */
  #faq .faq-item { flex-basis: 100%; }             /* 老浏览器 flex 兜底同步回退 */
  .review-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .nav-links { display: none; }
}

    /* 圆圈选中 (JSON 渲染版本卡) */
    .version-card { position: relative; cursor: pointer; transition: all .15s; }
    .version-card { padding-right: 44px !important; }
    .version-card::after {
      content: '○';
      position: absolute;
      top: 14px;
      right: 16px;
      width: 22px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      line-height: 1;
      color: #c8c8c8;
    }
    .version-card.active::after {
      content: '●';
      color: #2060b0;
    }
    .version-card.active {
      border-color: #2060b0 !important;
      background: #f0f7ff !important;
      box-shadow: 0 4px 16px rgba(32,96,176,0.18) !important;
    }

/* hero-keywords (v54 chip) */
.hero-keywords { display: flex; gap: 8px; margin-top: 24px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.hero-keywords-label { display: inline-flex; align-items: center; justify-content: center; font-size: 15px; margin-right: 2px; opacity: 0.65; line-height: 1; cursor: help; }
.kw-chip { display: inline-flex; align-items: center; padding: 6px 14px; background: rgba(0,122,255,0.08); color: var(--primary); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.1px; border: 1px solid rgba(0,122,255,0.20); transition: all .15s ease; line-height: 1.3; }
.kw-chip:hover { background: rgba(0,122,255,0.15); transform: translateY(-1px); border-color: rgba(0,122,255,0.40); }
@media (max-width: 768px) { .hero-keywords { gap: 6px; margin-top: 16px; } .kw-chip { padding: 5px 11px; font-size: 12px; } .hero-keywords-label { font-size: 14px; } }


/* ============== 平台自适应 · 蓄水版 (V45s_os) ==============
   客户口径(2026-10-14 更新): Windows / Mac 分支 = 各自的正常下载入口
   (Mac 版各版本安装包已齐全; 平台不对就不显示, 也绝不给"点了没反应"的死按钮)
   机制: nginx 在 head 最前面给 html 打上 is-win / is-mac
   兜底: 没有平台类时 (no-JS / 爬虫) -> 只露 Windows 分支, 页面自洽
   注意: 本站按钮是 .v-btn / .nav-btn (display:inline-flex), 所以"显示"规则要给回 inline-flex
*/
html:not(.is-mac) [data-os-only="mac"] { display: none !important; }
html.is-mac [data-os-only="win"] { display: none !important; }
html.is-mac a[data-os-only="mac"],
html.is-mac button[data-os-only="mac"],
html.is-mac div[data-os-only="mac"] { display: inline-flex !important; }
html.is-mac p[data-os-only="mac"] { display: block !important; }

/* ============== 授权方式与价格咨询 (浅底区: 本站 .section-title 默认是深底用的浅色, 必须显式改色) ============== */
#licenseBuy { background: #fff; }
#licenseBuy .section-title { color: var(--ink); }
#licenseBuy .section-subtitle { color: var(--ink-3); }
#licenseBuy .lic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { #licenseBuy .lic-grid { grid-template-columns: 1fr; } }
#licenseBuy .lic-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 24px 22px; }
#licenseBuy .lic-card h3 { margin: 0 0 12px; font-size: 18px; font-weight: 800; color: var(--ink); }
#licenseBuy .lic-card ul { margin: 0; padding-left: 20px; }
#licenseBuy .lic-card li { font-size: 14px; line-height: 1.9; color: var(--ink-2); }
#licenseBuy .lic-card li b { color: var(--ink); }
#licenseBuy .lic-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; }

/* ===== VCARDH 20261005: 版本名两行预留收紧 (sketchup, 同款问题) =====
 * .v-name 固定 min-height:2.6em=36.4px(两行预留, 14px 字号), 但版本名
 * ("SketchUp 2026") 且 white-space:nowrap -> 永远 1 行(内容 18.19px),
 * 每张卡白占 18.2px。改为按实际行数占高(1 行)。sketchup 自有设计
 * (22px 内边距 / 56px 图标 / 评分与下载量行)一律不动, 本文件为 CRLF。 */
.version-grid > .version-card .v-name { min-height: 1.3em; }
/* ===== VCARDUI2 20261005: 版本卡「悬浮立体」 (客户 2026-10-05 参考图) =====
   目标: 白底卡片 + 柔和藏青调投影 = 明显"浮起来"; 同时弱化"描边"以便投影唱主角
   (避免"描边 + 投影"同时重 -> 显脏)。
   ★ 不动按钮配色/尺寸 (客户待定) ★ 不动价格字重 (参考图价格即加粗) ★ 不动任何文案/数字 ★
   box-shadow 不参与布局 -> 卡片高度不变 (实测 Mac 269.73 / Win 241.23 前后一致) */
.version-grid > .version-card {
  border-color: #F2F3F5 !important;   /* 原 #D2D2D7 描边 -> 近白, 弱化到几乎只剩投影 */
  box-shadow: 0 4px 12px rgba(0,30,54,0.08), 0 16px 40px rgba(0,30,54,0.16) !important;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease !important;
}
/* hover: 投影加深 + 上浮 2px (与站内主 CTA 的 hover 语言一致) */
.version-grid > .version-card:hover {
  border-color: #E8EAEE !important;
  box-shadow: 0 6px 16px rgba(0,30,54,0.12), 0 22px 54px rgba(0,30,54,0.22) !important;
  transform: translateY(-2px) !important;
}
/* 全家桶(VIP)卡: 金色描边保留(身份标识), 投影分两档, 与普通卡同一套"悬浮"逻辑 */
.version-grid > .version-card.bundle {
  border-color: #F59E0B !important;
  box-shadow: 0 4px 12px rgba(245,158,11,0.18), 0 16px 40px rgba(245,158,11,0.26) !important;
}
.version-grid > .version-card.bundle:hover {
  border-color: #D97706 !important;
  box-shadow: 0 6px 16px rgba(245,158,11,0.24), 0 22px 54px rgba(245,158,11,0.34) !important;
}
/* 图标: 去掉外层灰底圆角方块(图标自带的蓝/渐变底色保留) -> 少一层视觉噪音;
   万一图片加载失败走 emoji 兜底, 仍给一层浅底, 避免图标"裸奔" */
.version-grid > .version-card .v-icon { background: transparent !important; border-radius: 0 !important; }
.version-grid > .version-card .v-icon:has(.v-icon-emoji) { background: #F5F5F7 !important; border-radius: 8px !important; }

/* ===== VCARDUI3 20261005: 版本卡按钮 -> 蓝色实心 (客户选 ⓐ, 照参考图) =====
   ★ sketchup 有自己的蓝色设计系统 (--primary #2060b0 / --primary-dark #1a4e98),
     不套用 adobe 的 #007AFF, 改用本站自己的 token -> 仍是"蓝色实心按钮", 但配色不打架 ✓
   ★ 尺寸/圆角/内边距/字重 未动 -> 卡高不变 ✓; 金色 VIP 规则不存在于本站 ✓
   选择器特异性 (0,6,0) > 现有 .v-btn:not(.v-btn-bundle) (0,3,0) -> 稳定生效 ✓ */
.version-grid > .version-card .v-btn:not(.v-btn-bundle) {
  background: var(--primary) none !important;
  color: #FFFFFF !important;
  border: none !important;              /* 不加边框: 避免撑高按钮/卡片 ✓ */
  box-shadow: none !important;
}
.version-grid > .version-card .v-btn:not(.v-btn-bundle):hover {
  background: var(--primary-dark) none !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 16px rgba(32,96,176,0.32) !important;
  transform: translateY(-1px) !important;
}
.version-grid > .version-card .v-btn:not(.v-btn-bundle):active {
  background: var(--primary-dark) none !important;
  transform: translateY(0) !important;
}
/* ===== VCARDUI4 20261005: 软件卡收窄 + 卡内左右留白收紧 =====
   客户: "软件卡修窄一点, 软件卡里面的内容左右留白太多了"
   实测改前: 子页 .version-grid 1152px / 卡 274.5px / 卡内左右 padding 各 14px (合计 28px);
             主站 .version-grid 1102px / 卡 262px / 同上。
   ★ 做法: ① 整排上限 1152 -> 1140px 且居中 (卡片 274.5 -> 271.5px, 主站 262 -> 261.5px)
            ② 卡内左右 padding 14 -> 10px (每张卡左右各少 4px, 合计 -8px)
   ★ 为什么是 1140 而不是更窄(1080): 版本名是内容最宽项, /adobe/me/ 的
     "Media Encoder 2026 For Mac" 实测需要 237px, 在 max-width:1080 + padding:10 时
     可用宽只有 235px -> 版本名换 2 行 -> 卡高 269.73 -> 285.33px (违反"不许变高")。
     1140+10 时可用 250px, 余量 13px; 全 12 页 × Mac/Win × 1440/1024 实测卡高均未增加 ✓
   ★ 不动: 按钮(尺寸/配色)、价格、系统胶囊字号、卡片圆角/投影、任何文案数字 ✓ */
.version-grid {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.version-grid > .version-card {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* ===== RVSK-START 20261011 | /sketchup/ 评价区改版 =====
   目标: 深蓝底 + 6 张白色极简卡（橙色 SVG 五星 + 正文），2 行 x 3 列。
   范围: 只作用于本页 .reviews-section（不动全局 --rating，不动 .v-stars）。
   文案: 一个字未改。图标: 内联 SVG，非 emoji / 非字符。
   外框: padding 补偿 = 内部重排后区块外框高度与改前逐位相同（680.42px）。
   回滚: 删除本块 + index.html 的 6 处 SVG 还原为 ★★★★★ + 缓存戳回退。 ===== */
.reviews-section { padding: 78.4px 0; }

.reviews-section .review-grid { gap: 22px; }

/* 白色圆角卡片: 去边框, 大圆角 (深蓝底上更跳) */
.reviews-section .review-card {
  border: 0;
  border-radius: 14px;
  padding: 24px;
  cursor: default;          /* 卡片不可点 -> 去掉误导性的手型 */
  transition: none;
  box-shadow: none;
}
.reviews-section .review-card:hover {
  background: #fff;
  box-shadow: none;
  transform: none;
}
.reviews-section .review-card:hover .review-text { color: var(--ink); }

/* 顶部五颗橙色星: 内联 SVG, 等距等大 */
.reviews-section .review-stars {
  display: flex;
  align-items: center;
  gap: 1px;
  height: 15px;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  margin: 9px 0 13px;
  transition: none;
}
.reviews-section .review-stars svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: #D97A00;            /* 站内 --rating(#FF9500) 同色相压暗一档, 与白卡对比 3.12:1 */
}
.reviews-section .review-card:hover .review-stars {
  color: inherit;
  text-shadow: none;
  transform: none;
}

/* 正文: 深灰蓝 (站内 --ink), 行距不变; 下留白按截图放大一档 */
.reviews-section .review-text { color: var(--ink); margin-bottom: 18px; transition: none; }

@media (max-width: 900px) {
  .reviews-section .review-grid { gap: 20px; }   /* 单列堆叠时保持改前节奏 */
}
/* ===== RVSK-END ===== */

/* ============== SKETCHUP_PAYFOCUS_20261014: 弹窗输入框只保留一条边框(聚焦变蓝), 去掉叠加的外描边 ============== */
#payMask .pay-input, #suMask .pay-input { border: 1px solid var(--border); border-radius: 4px; }
#payMask .pay-input:focus, #suMask .pay-input:focus { border-color: var(--primary); }
#payMask .pay-input:focus-visible, #suMask .pay-input:focus-visible { outline: none !important; }

/* ============== SKETCHUP_SYSCHIP_20261014: Mac 版本卡上"支持的系统版本"独立成显眼标签(不再显示文件大小) ============== */
.v-sysreq { display: flex; width: max-content; align-items: center; margin: 8px auto 12px; padding: 4px 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .2px; color: var(--primary);
  background: #EAF3FB; border: 1px solid var(--primary-light); border-radius: 999px; }

/* ============== SKETCHUP_CARDPOLISH_20261014: Mac 卡片视觉微调(只作用于带系统版本标签的卡, 用 :has 精确圈定) ============== */
#versionGrid .version-card:has(.v-sysreq) { padding: 24px 20px 22px !important; }
#versionGrid .version-card:has(.v-sysreq)::after { display: none; }           /* 右上角那个空圆点 */
#versionGrid .version-card:has(.v-sysreq) .v-name { min-height: 0; margin-bottom: 4px; }
#versionGrid .version-card:has(.v-sysreq) .v-tag { margin-bottom: 2px; }
#versionGrid .version-card:has(.v-sysreq) .v-sysreq { margin: 10px auto 14px; }
#versionGrid .version-card:has(.v-sysreq) .v-btn { min-width: 132px; padding: 11px 22px; border-radius: 10px; }
#versionGrid .version-card:has(.v-sysreq) .v-meta { gap: 8px; margin-top: 14px; font-size: 11.5px; }

/* ============== SKETCHUP_CARDA_20261014: Mac 版本卡采用【A 瑞士网格派】(评审 8.0 -> 按 9 分改法补齐)
   约束: 只作用于带系统版本标签的卡(:has(.v-sysreq)), 不动网格/区块布局。
   字号 12/13/16 · 间距 8/16/24 · 1px 分隔线分组 · 蓝色只出现在按钮上(1 次) ============== */
#versionGrid .version-card:has(.v-sysreq) {
  text-align: left; padding: 24px 20px 20px !important; border: 1px solid #E3E8EE;
  border-radius: 8px; transition: border-color .15s ease, box-shadow .15s ease;
}
#versionGrid .version-card:has(.v-sysreq):hover { border-color: #B7CBDF; box-shadow: 0 6px 18px rgba(31,60,90,.07); }
#versionGrid .version-card:has(.v-sysreq)::before,
#versionGrid .version-card:has(.v-sysreq)::after { content: none !important; display: none !important; }
#versionGrid .version-card:has(.v-sysreq) .v-icon { width: 34px; height: 34px; margin: 0 0 16px; }
#versionGrid .version-card:has(.v-sysreq) .v-icon img { width: 22px; height: 22px; }
#versionGrid .version-card:has(.v-sysreq) .v-name { font-size: 16px; font-weight: 700; letter-spacing: -.2px; min-height: 0; margin: 0 0 8px; }
#versionGrid .version-card:has(.v-sysreq) .v-tag { font-size: 13px; color: #5b6470; margin: 0; }
#versionGrid .version-card:has(.v-sysreq) .v-sysreq {
  display: block; width: auto; margin: 16px 0; padding: 0; background: none; border: 0; border-radius: 0;
  font-size: 12px; font-weight: 400; color: #5b6470; letter-spacing: .2px;
  border-top: 1px solid #E3E8EE; padding-top: 16px;
}
#versionGrid .version-card:has(.v-sysreq) .v-sysreq::before { content: "系统要求　"; color: #8A929C; }
#versionGrid .version-card:has(.v-sysreq) .v-sysreq b,
#versionGrid .version-card:has(.v-sysreq) .v-sysreq { font-weight: 600; }
#versionGrid .version-card:has(.v-sysreq) .v-btn {
  display: flex; width: 100%; min-height: 44px; margin: 0; padding: 0 16px; border-radius: 6px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background-color .15s ease, transform .06s ease;
}
#versionGrid .version-card:has(.v-sysreq) .v-btn:hover { background: #1B5499; }
#versionGrid .version-card:has(.v-sysreq) .v-btn:active { background: #17477F; transform: translateY(1px); }
#versionGrid .version-card:has(.v-sysreq) .v-btn:focus-visible { outline: 2px solid #2060B0; outline-offset: 2px; }
#versionGrid .version-card:has(.v-sysreq) .v-meta { display: none; }

/* ============== SKETCHUP_CARDA2_20261014: 按客户要求 —— 图标加大并居中, 平台行居中 ============== */
#versionGrid .version-card:has(.v-sysreq) { text-align: center; }
#versionGrid .version-card:has(.v-sysreq) .v-icon { width: 48px; height: 48px; margin: 0 auto 16px; }
#versionGrid .version-card:has(.v-sysreq) .v-icon img { width: 32px; height: 32px; }
#versionGrid .version-card:has(.v-sysreq) .v-name { text-align: center; }
#versionGrid .version-card:has(.v-sysreq) .v-tag { text-align: center; }
/* 系统要求那行仍保持左对齐(它是规格行, 居中会跟平台行糊在一起) */
#versionGrid .version-card:has(.v-sysreq) .v-sysreq { text-align: left; }

/* ============== SKETCHUP_CARDA3_20261014: 图标再加大(60/40) + 系统要求行居中 ============== */
#versionGrid .version-card:has(.v-sysreq) .v-icon { width: 60px; height: 60px; margin: 0 auto 18px; }
#versionGrid .version-card:has(.v-sysreq) .v-icon img { width: 40px; height: 40px; }
#versionGrid .version-card:has(.v-sysreq) .v-sysreq { text-align: center; }

/* ============== SKETCHUP_TAGFIX_20261014: Mac 卡片的平台行本身就是"Mac 版 · 一键安装",
   不能再叠加给 maya/cad 用的平台前缀(否则出现 "Mac 版 · Mac 版 · 一键安装" 重复)。 ============== */
#versionGrid .version-card:has(.v-sysreq) .v-tag::before { content: none !important; }

/* ============== SKETCHUP_TAGFIX2_20261014: 本页为支付样式引入了 /cad/app.css,
   而 cad 那条 `#versions .version-card .v-name::after{content:"Mac 版 · 一键安装"}`
   会命中本页同样在 #versions 里的卡片 -> 多出一行。本页卡片自带平台行, 这里关掉。 ============== */
#versions .version-card .v-name::after, #versions .version-card .v-tag::before, #versions .version-card .v-tag:empty::before { content: none !important; }

/* ============== SKETCHUP_CARDSIZE_20261014: 与 maya/cad 统一最小高度 ============== */
#versionGrid .version-card:has(.v-sysreq) { min-height: 292px !important; display: flex !important; flex-direction: column; }
#versionGrid .version-card:has(.v-sysreq) .v-btn { margin-top: auto !important; }

/* ============== CARDS_ACTIVE_20261014: 三页卡片"选中态"统一同一效果(点击卡片高亮: 蓝描边+浅蓝底+投影+上浮2px)
   说明: 我用 #versions 作用域统一卡片后, 各页原来的 .version-card.active 被更高的优先级压住了,
   这里用同等优先级把选中态补回来; sketchup 里上一步临时关掉的选中态同时撤销。 ============== */
#versions .version-card.active, #versionGrid .version-card.active {
  border-color: #2060B0 !important; background: #F5FAFF !important;
  box-shadow: 0 8px 22px rgba(32,96,176,.18) !important; transform: translateY(-2px) !important;
}
#versions .version-card.active .v-name, #versionGrid .version-card.active .v-name { color: #112754 !important; }