:root {
  /* 严按同行 b1.ruanvip.cn/ct-nfgmwz/ 严色码 (深蓝灰 + 浅蓝白) */
  --primary: #0E7490;
  --primary-dark: #155E75;
  --primary-light: #35B9C6;
  --primary-soft: #E7F3F4;
  --primary-deeper: #0B3A40;
  --primary-deep: #124A52;
  --primary-shadow: 0 4px 14px rgba(14,116,144,0.25);
  /* 背景层次 (严按同行 5 层渐变) */
  --bg-page: #12454E;            /* 最深主背景 */
  --bg-section: #12454E;         /* 极深 sections */
  --bg-card-on-dark: #12454E;    /* 深色上的卡片 */
  --bg-soft: #E7F3F4;            /* 浅蓝白 sections */
  --bg-soft-2: #D8ECEE;          /* 略深浅蓝 */
  --bg-soft-3: #EEF8F9;          /* 极浅蓝 */
  --bg-soft-4: #DCEFF1;          /* 极浅蓝 2 */
  --bg-card-light: #ffffff;      /* 卡片白底 (在深色 section 上) */
  /* 文字 (严按同行) */
  --ink: #0B3A40;
  --ink-2: #124A52;
  --ink-3: #21656E;
  --text-muted: #43777D;
  --text-light: #54878E;
  --text-pale: #9CCFD4;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #C6E2E4;
  --border: #C3E0E2;
  --border-2: #B3D6D9;
  --border-on-dark: #124A52;
  /* 状态色 */
  --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(53,185,198,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, #12454E 0%, #12454E 45%, #12454E 100%); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(53,185,198,0.18) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(14,116,144,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); }
/* MAYA_JUSTIFY_20261014: 客户口径 —— hero 这段正文要"两端对齐"(右边缘参差看着没对齐)。
   text-align: justify 对中英混排生效: 行内按字距摊开, 除末行外左右都齐(末行按默认仍左对齐)。
   只加这一条声明, 字号/行高/宽度/颜色一字未动; 只作用于本页 hero 正文。
   ★ 未动 .hero-desc 的 max-width(它被别的规则覆盖成 100%, cad 也一样, 属既有状态, 本次不碰)。 */
.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(53,185,198,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(14,116,144,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, #35B9C6 0%, #0E7490 100%) !important; padding: 14px 28px !important; font-size: 15px !important; box-shadow: 0 4px 20px rgba(53,185,198,0.55); border: 1px solid #6FD3DE !important; flex: 1; white-space: nowrap; color: #fff; }
.hero-cta-win:hover { background: linear-gradient(135deg, #0E7490 0%, #155E75 100%) !important; box-shadow: 0 6px 26px rgba(53,185,198,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(11,58,64,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, #12454E 0%, #12454E 55%, #12454E 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(14,116,144,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); }
/* MAYA_JUSTIFY2_20261014: 客户拍板"其它长段落也一起两端对齐" ——
   除 hero 正文外, 再给这两处加 text-align: justify:
     · .feature-desc  「为什么选择 Maya」四张功能卡的说明
     · .faq-a         FAQ 展开后的答案(display:none -> 展开才显示; text-align 会被内部 <p> 继承)
   ★ 刻意【不碰】任何居中元素: .section-subtitle / .section-title / .version-card 等都是 center,
     给它们套 justify 会把居中变成左对齐(justify 的末行按 start 对齐) —— 那是错的。
   只加声明, 字号/行高/颜色/间距一字未动。 */
.feature-desc { font-size: 14px; color: var(--text-muted); line-height: 1.55; text-align: justify; }

/* ============== Scene List (严按同行: 中间浅蓝白) ============== */
.scene-section { background: linear-gradient(135deg, #12454E 0%, #12454E 55%, #12454E 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, #12454E 0%, #12454E 60%, #12454E 100%); }
.faq-list { max-width: 760px; margin: 0 auto; }
.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, #12454E 0%, #12454E 50%, #12454E 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; }
.review-card:hover { border-color: var(--primary-light); background: linear-gradient(135deg, #ffffff 0%, #F7FCFC 100%); box-shadow: 0 12px 32px rgba(53,185,198,0.40), 0 0 0 1px rgba(53,185,198,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, #12454E 0%, #12454E 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; }
  .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: #0E7490;
    }
    .version-card.active {
      border-color: #0E7490 !important;
      background: #EFF9FA !important;
      box-shadow: 0 4px 16px rgba(14,116,144,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) ==============
   客户口径: 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,32,36,0.08), 0 16px 40px rgba(0,32,36,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,32,36,0.12), 0 22px 54px rgba(0,32,36,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 #0E7490 / --primary-dark #155E75),
     不套用 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(14,116,144,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;
}
/* ===== REFWORKFLOW_20261013: 制作流程段外观照参考站（只追加，不改已有规则） ===== */
.usecase-section .usecase {
  border: 1px solid #e5e5e5; display: flex; align-items: center; gap: 52px; flex-wrap: wrap; background: #ffffff; border-radius: 16px; padding: 48px 52px; box-shadow: 0 8px 32px rgba(14,116,144,.10); }
.usecase-section .usecase-media { position: relative; flex: 0 0 420px; max-width: 420px; }
.usecase-section .usecase-media img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 6px 20px rgba(14,116,144,.12); position: relative; z-index: 1; }
.usecase-section .uc-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 300px; height: 200px; background: radial-gradient(ellipse, rgba(14,116,144,.14) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.usecase-section .usecase-text { flex: 1; min-width: 260px; }
.usecase-section .sec-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: #0E7490; margin-bottom: 10px; }
.usecase-section .usecase-title { font-size: 26px; font-weight: 800; color: #fff; margin-bottom: 20px; }
.usecase-section .ticks { list-style: none; margin: 0 0 30px; padding: 0; }
.usecase-section .ticks li { font-size: 15px; color: #5c5c5c; padding: 8px 0 8px 28px; border-bottom: 1px solid rgba(255,255,255,.12); position: relative; }
.usecase-section .ticks li:last-child { border-bottom: none; }
.usecase-section .ticks li:before { content: "\2714"; position: absolute; left: 0; color: #0E7490; font-weight: 800; font-size: 14px; }
.usecase-section .btn-dl { display: inline-block; background: #0E7490; color: #fff; border-radius: 8px; padding: 14px 30px; font-size: 16px; font-weight: 700; text-decoration: none; }
.usecase-section .btn-dl:hover { background: #155bb0; color: #fff; }
@media (max-width: 900px) { .usecase-section .usecase {
  border: 1px solid #e5e5e5; padding: 30px 24px; gap: 28px; } .usecase-section .usecase-media { flex: 1 1 100%; max-width: 100%; } }
/* ===== REFCARD_20261013: 版本卡改版（客户要求：图标不裁切 / 标题可见空格 / 小灰字系统要求 / 按钮贴底 / 空卡等高 / 去掉右上角圆圈） ===== */
.version-grid > .version-card { position: relative; display: flex; flex-direction: column; min-height: 208px; padding: 20px 18px; background: #fff; border: 1px solid #E4EEEF; border-radius: 12px; box-shadow: 0 1px 3px rgba(16,24,40,.05); text-align: center; padding-right: 18px !important; }
.version-grid > .version-card:hover { border-color: var(--primary-light); box-shadow: 0 8px 24px rgba(14,116,144,.18); transform: translateY(-3px); }
.version-grid > .version-card::after { display: none !important; content: none !important; }
.version-grid > .version-card .v-icon { width: 44px; height: 44px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; overflow: visible; background: transparent !important; border-radius: 0 !important; }
.version-grid > .version-card .v-icon img { width: 44px; height: 44px; object-fit: contain; display: block; }
.version-grid > .version-card .v-name { font-size: 15px; font-weight: 600; color: #000000; line-height: 1.3; min-height: 1.3em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; }
.version-grid > .version-card .v-name .v-year { margin-left: 5px; }
.version-grid > .version-card .cc-meta { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 0; }
.version-grid > .version-card .v-system { font-size: 12px; color: #6B7280; line-height: 1.5; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 3em; }
.version-grid > .version-card .v-size:empty { display: none; }
.version-grid > .version-card .v-btn:not(.v-btn-bundle) { margin-top: auto; width: 100%; padding: 11px 16px; font-size: 14px; font-weight: 600; background: var(--primary); color: #fff; border: none; border-radius: 8px; }
.version-grid > .version-card .v-btn:not(.v-btn-bundle):disabled,
.version-grid > .version-card .v-btn[disabled] { background: #F3F4F6; color: #9CA3AF; cursor: default; box-shadow: none; }
@media (max-width: 900px) { .version-grid > .version-card { min-height: 190px; } }
/* ===== ADTCARD_20261013: 版本卡改 Autodesk 元素风格（客户要求：深底 + 小圆角 + 44x44 不裁切图标 + Maya 20xx 可见空格 + 12px 灰系统要求 + 蓝色实心按钮贴底 + 空卡等高灰胶囊 + 去掉右上角圆圈）。
   配色为按客户提供截图目测取值（近黑底 #111111 / 主蓝 #22A5B5 / 细边 #2A2A2A / 次要灰 #9AA0A6 / 胶囊底 #2A2A2A 字 #8A8A8A），非官方品牌规范。 ===== */
.version-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; }
.version-grid > .version-card {
  display: flex !important; flex-direction: column !important; position: relative !important;
  min-height: 246px !important; padding: 26px 20px !important; padding-right: 20px !important;
  background: #FFFFFF !important; border: 1px solid #E5E5E5 !important; border-radius: 2px !important;
  box-shadow: none !important; text-align: center !important; cursor: pointer !important;
  transition: border-color .18s, transform .18s, box-shadow .18s !important;
}
.version-grid > .version-card:hover { border-color: #22A5B5 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(34,165,181,.22) !important; }
.version-grid > .version-card::after, .version-grid > .version-card::before { display: none !important; content: none !important; }
.version-grid > .version-card .v-icon { width: 44px !important; height: 44px !important; margin: 0 auto 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; background: transparent !important; border-radius: 0 !important; }
.version-grid > .version-card .v-icon img { width: 44px !important; height: 44px !important; object-fit: contain !important; display: block !important; }
.version-grid > .version-card .v-name { font-size: 15px !important; font-weight: 600 !important; color: #000000 !important; line-height: 1.3 !important; min-height: 1.3em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; padding: 0 !important; }
.version-grid > .version-card .v-name .v-year { margin-left: 5px !important; }
.version-grid > .version-card .cc-meta { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; margin: 10px 0 0 !important; }
.version-grid > .version-card .v-system { font-size: 12px !important; color: #000000 !important; line-height: 1.5 !important; text-align: center !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; max-height: 3em !important; }
.version-grid > .version-card .v-btn:not(.v-btn-bundle) { margin-top: auto !important; width: 100% !important; padding: 11px 16px !important; font-size: 14px !important; font-weight: 600 !important; background: #22A5B5 !important; color: #FFFFFF !important; border: none !important; border-radius: 2px !important; box-shadow: none !important; }
.version-grid > .version-card .v-btn:not(.v-btn-bundle):hover { background: #0581BA !important; }
.version-grid > .version-card .v-btn:not(.v-btn-bundle):disabled,
.version-grid > .version-card .v-btn[disabled] { background: #F5F5F5 !important; color: #000000 !important; border: 1px solid #E0E0E0 !important; cursor: default !important; box-shadow: none !important; }
@media (max-width: 900px) { .version-grid { grid-template-columns: repeat(2, 1fr) !important; } .version-grid > .version-card { min-height: 228px !important; } }
/* KEYA11Y_20261014 (审计 C1): 键盘可见焦点。
   原来两页 app.css 里【没有任何 :focus 规则】—— 键盘用户 Tab 到按钮/链接/输入框时看不出焦点在哪。
   :focus-visible 只在键盘操作时出现(鼠标点击不触发) -> 对现有视觉零影响。
   颜色用本页自己的 --primary-light, 不写死色值, 两页各自保持配色。 */
[role="button"]:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--primary-light, #4a8ed4);
  outline-offset: 2px;
}

/* ============== MAYA_CAD_CARDSAME_20261014: 版本卡用 sketchup 同款(瑞士网格派)
   作用域 #versions .version-card (1,1,0) -> 稳压各页既有 .version-card 规则, 与文件加载顺序无关。
   只改卡片内部排版, 不动网格/区块布局。 ============== */
#versions .version-card { text-align: center; padding: 24px 20px 20px !important; border: 1px solid #E3E8EE; border-radius: 8px; transition: border-color .15s ease, box-shadow .15s ease; }
#versions .version-card:hover { border-color: #B7CBDF; box-shadow: 0 6px 18px rgba(31,60,90,.07); }
#versions .version-card::before, #versions .version-card::after { content: none !important; display: none !important; }
#versions .version-card .v-icon { width: 60px; height: 60px; margin: 0 auto 18px; }
#versions .version-card .v-icon img { width: 40px; height: 40px; }
#versions .version-card .v-name { font-size: 16px; font-weight: 700; letter-spacing: -.2px; min-height: 0; margin: 0 0 8px; text-align: center; }
#versions .version-card .v-tag { font-size: 13px; color: #5b6470; text-align: center; margin: 0 0 12px; }
#versions .version-card .v-rating { justify-content: center; margin-bottom: 8px; }
#versions .version-card .v-dlcount { text-align: center; font-size: 12px; color: #5b6470; margin: 0 0 16px; }
#versions .version-card .v-system { display: block; text-align: center; font-size: 12px; color: #5b6470;
  border-top: 1px solid #E3E8EE; padding-top: 16px; margin: 0 0 16px; min-height: 0; }
#versions .version-card .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; }
#versions .version-card .v-btn:hover { background: #1B5499; }
#versions .version-card .v-btn:active { background: #17477F; transform: translateY(1px); }
#versions .version-card .v-btn:focus-visible { outline: 2px solid #2060B0; outline-offset: 2px; }
#versions .version-card .v-meta { display: none; }

/* ============== MAYA_CAD_CARDTAG_20261014: 卡片平台行文案(按平台自适应, 与 sketchup 同款) ==============
   .v-tag 已有内容(如"一键安装") -> 前面加上平台前缀; 为空 -> 直接给整句。 */
#versions .version-card .v-tag::before { content: "Windows 版 · "; }
html.is-mac #versions .version-card .v-tag::before { content: "Mac 版 · "; }
#versions .version-card .v-tag:empty::before { content: "Windows 版 · 一键安装"; }
html.is-mac #versions .version-card .v-tag:empty::before { content: "Mac 版 · 一键安装"; }
#versions .version-card .v-tag { font-size: 13px; color: #5b6470; text-align: center; margin: 0 0 12px; }

/* ============== MAYA_CAD_CARDTAG2_20261014: 卡片缺 .v-tag 元素 -> 平台行改挂在 .v-name 下(块级伪元素) ============== */
#versions .version-card .v-name::after { content: "Windows 版 · 一键安装"; display: block; margin-top: 6px;
  font-size: 13px; font-weight: 400; color: #5b6470; letter-spacing: 0; }
html.is-mac #versions .version-card .v-name::after { content: "Mac 版 · 一键安装"; }

/* ============== MAYA_CAD_CARDTAG3_20261014: 标题原本 nowrap+ellipsis 把平台行挤没了 -> 放开; 图标一并放大到同款 ============== */
#versions .version-card .v-name { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
#versions .version-card .v-icon { width: 60px !important; height: 60px !important; margin: 0 auto 18px !important; }
#versions .version-card .v-icon img, #versions .version-card .v-icon svg { width: 40px !important; height: 40px !important; }

/* ============== MAYA_CAD_CARDTAG4_20261014: .v-name 是 flex 容器 -> 平台行被排在同一行; 改为 block 让它独占一行 ============== */
#versions .version-card .v-name { display: block !important; }

/* ============== MAYA_CAD_CARDFONT_20261014: 卡片元素/字号/字体 与 sketchup 完全同款 ============== */
#versions .version-card { font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#versions .version-card .v-name { font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
#versions .version-card .v-name::after { font-family: inherit; font-size: 13px; font-weight: 400; color: #5b6470; margin-top: 6px; letter-spacing: 0; }
#versions .version-card .v-system { font-family: inherit; font-size: 12px; font-weight: 600; color: #5b6470; letter-spacing: .2px; border-top: 1px solid #E3E8EE; padding-top: 16px; margin: 16px 0; }
#versions .version-card .v-dlcount, #versions .version-card .v-rating { font-family: inherit; font-size: 12px; color: #5b6470; }
#versions .version-card .v-btn { font-family: inherit; font-size: 14px; font-weight: 600; }
/* 注: sketchup 的系统要求行前面有"系统要求"四字(它是 12px 值 + 60px 标签 = 未超 230px 可用宽);
   maya/cad 的要求文案更长("Windows 10 22H2 / 11（64 位）"≈175px), 加标签会达 ≈237px > 230px 会折行,
   按客户"超出界限的就去掉"的口径, 这两页不加标签。 */

/* ============== MAYA_CAD_MACREQ_20261014: Mac 卡片上的系统版本字号偏小看不清 -> 加粗加大加深 ============== */
html.is-mac #versions .version-card .v-system { font-size: 14px !important; font-weight: 700 !important; color: #2A3742 !important; letter-spacing: .2px; }
html.is-mac #versions .version-card .v-system * { font-weight: 700 !important; }

/* ============== MAYA_CAD_MACREQ2_20261014: 客户要求"加黑" -> 字重 800 + 近黑色 ============== */
html.is-mac #versions .version-card .v-system { font-size: 14px !important; font-weight: 800 !important; color: #111111 !important; letter-spacing: .2px; }
html.is-mac #versions .version-card .v-system * { font-weight: 800 !important; color: #111111 !important; }

/* ============== MAYA_CAD_CARDSIZE_20261014: 卡片外框尺寸与 sketchup 对齐(同宽由 4 列网格决定, 这里统一最小高度) ============== */
#versions .version-card { min-height: 292px !important; display: flex !important; flex-direction: column; }
#versions .version-card .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; }