/* ==========================================================================
   富奥东机工减振器 · 产品手册 —— 版本总览
   ========================================================================== */

:root{
  --bg:#0b1017;
  --card:#141a23;
  --ink:#eef3f9;
  --dim:rgba(238,243,249,.52);
  --line:rgba(255,255,255,.09);
  --accent:#7fb2ff;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0; min-height:100%;
  background:var(--bg); color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(90% 46% at 50% -8%, rgba(32,69,139,.5) 0%, rgba(32,69,139,0) 62%),
    radial-gradient(70% 40% at 92% 104%, rgba(110,231,255,.16) 0%, rgba(110,231,255,0) 60%);
}

#page{ position:relative; z-index:1; max-width:1080px; margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 40px) 18px calc(env(safe-area-inset-bottom,0px) + 56px); }

/* ---------------- 页头 ---------------- */

.hero{ margin-bottom:34px; }
.hero .logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:11px; margin-bottom:16px;
  background:linear-gradient(140deg,#2f6fd0,#20458b);
  font-weight:700; font-size:19px; font-family:Arial,Helvetica,sans-serif;
}
.hero h1{ margin:0 0 8px; font-size:25px; line-height:1.28; font-weight:600; letter-spacing:.01em; }
.hero .en{ margin:0 0 16px; font-size:11px; letter-spacing:.16em; color:var(--dim); text-transform:uppercase; }
.hero p{ margin:0; font-size:13.5px; line-height:1.85; color:var(--dim); max-width:60ch; }
.hero .stats{ display:flex; flex-wrap:wrap; gap:22px; margin-top:22px; }
.hero .stats div{ display:flex; flex-direction:column; gap:2px; }
.hero .stats b{ font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; }
.hero .stats span{ font-size:10.5px; letter-spacing:.1em; color:var(--dim); }

/* ---------------- 分组 ---------------- */

.sect{ margin-top:38px; }
.sect > h2{
  margin:0 0 14px; font-size:12px; font-weight:500;
  letter-spacing:.22em; color:var(--dim);
  display:flex; align-items:center; gap:12px;
}
.sect > h2::after{ content:""; flex:1; height:1px; background:var(--line); }

.cards{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); }

.vcard{
  position:relative; display:flex; flex-direction:column;
  border-radius:14px; overflow:hidden; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line);
  transition:transform .2s var(--ease), border-color .2s, box-shadow .2s;
}
.vcard:hover{ transform:translateY(-3px); border-color:rgba(127,178,255,.4); box-shadow:0 18px 40px rgba(0,0,0,.45); }
.vcard:active{ transform:translateY(-1px); }

.vcard .prev{
  position:relative; height:132px; overflow:hidden;
  background-position:center; background-size:cover;
  border-bottom:1px solid var(--line);
}
.vcard .prev::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,26,35,.85) 0%, rgba(20,26,35,0) 55%);
}
.vcard .prev img{
  position:absolute; right:14px; bottom:-24px;
  width:auto; height:112px; border-radius:4px;
  box-shadow:0 12px 30px rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
}

.vcard .body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:5px; flex:1; }
.vcard .name{ font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px; }
.vcard .name em{ font-style:normal; font-size:9.5px; letter-spacing:.14em; color:var(--dim); text-transform:uppercase; }
.vcard .desc{ font-size:12px; line-height:1.7; color:var(--dim); }
.vcard .go{
  margin-top:auto; padding-top:12px;
  font-size:11.5px; color:var(--accent); letter-spacing:.06em;
  display:flex; align-items:center; gap:6px;
}
.vcard .go::after{ content:""; width:7px; height:7px; border-top:1.6px solid currentColor; border-right:1.6px solid currentColor; transform:rotate(45deg); }

/* 每个版本的招牌配色，直接画在预览条上 */
.vcard[data-v="original"] .prev{ background-image:linear-gradient(140deg,#16325f,#08131f); }
.vcard[data-v="minimal"]  .prev{ background-image:linear-gradient(140deg,#f4f5f7,#dcdfe4); }
.vcard[data-v="magazine"] .prev{ background-image:linear-gradient(140deg,#0d2942,#061420); }
.vcard[data-v="card"]     .prev{ background-image:linear-gradient(140deg,#4a5cff,#8b4bff 42%,#00d0d6); }
.vcard[data-v="scroll"]   .prev{ background-image:linear-gradient(140deg,#eef1f5,#d7dfe9); }
.vcard[data-v="snap"]     .prev{ background-image:linear-gradient(140deg,#132a45,#070f1a); }
.vcard[data-v="album"]    .prev{ background-image:linear-gradient(140deg,#1b222c,#0a0e13); }
.vcard[data-v="hub"]      .prev{ background-image:linear-gradient(140deg,#20458b,#0b1017); }

/* ---------------- 页脚 ---------------- */

#foot{
  margin-top:46px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 20px;
  font-size:12px; color:var(--dim);
}
#foot a{ color:var(--dim); text-decoration:none; }
#foot a:hover{ color:var(--accent); }
#foot .copy{ flex:1 1 100%; font-size:10.5px; color:rgba(238,243,249,.28); letter-spacing:.04em; }

/* ==========================================================================
   移动端点击区域修正（2026-11-01 手机端审计）
   审计发现：目录覆盖层的行高只有 11px、若干文字链接只有 14~16px，手机上点不准。
   这里用负边距扩大可点范围，视觉排版完全不变。
   ========================================================================== */

/* 目录覆盖层：每行填满自己的槽位，可点高度直接翻倍 */
.tf-row{ flex:1 1 0; min-height:0; align-items:center; }

/* 抽屉里的目录项：保证 42px 以上的可点高度 */
.toc-item{ min-height:42px; }

/* 文字链接：视觉不动，四周扩 8px 热区 */
.back, .link, .fol, .more, a.r{
  padding:8px; margin:-8px;
}

/* 底部/页脚链接 */
.foot a, .pagefoot a, .toc-foot a{ padding:6px; margin:-6px; }

/* 语言切换按钮 */
.langsw button{ min-height:30px; padding:5px 12px; }

@media (max-width:640px){
  .toc-fill .list{ padding:5% 6%; }
}

/* 通用：按 data-lang 只显示对应语言（未标记的元素两种都显示） */
html[data-lang="cn"] [data-lang="en"]{ display:none !important; }
html[data-lang="en"] [data-lang="cn"]{ display:none !important; }