/* ══════════════════════════════════════════════════════════════
   ui-v2.css —— 视觉规范层（整洁 / 高级感）
   设计原则：中性色为主 + 品牌色只做点睛；字号 6 档、圆角 3 档、阴影 2 档、
             间距 8px 网格、数字等宽对齐。挂在各页既有样式之后即可生效。
   ────────────────────────────────────────────────────────────── */
:root{
  /* 中性色（页面 90% 的面积用它） */
  --v2-ink:#171c2b; --v2-ink2:#3b4358; --v2-ink3:#6b7488; --v2-ink4:#9aa3b5;
  --v2-line:#e7ebf2; --v2-line2:#f1f4f9; --v2-bg:#f6f7fa; --v2-card:#ffffff;
  /* 品牌色（只做点睛：细条、标签、按钮、数字强调） */
  --v2-brand:#d94f7e; --v2-brand-soft:#fdeef4;
  --v2-teal:#12a1a1; --v2-amber:#b7791f; --v2-green:#2f9e5f; --v2-red:#c0392b;
  /* 字号 6 档 */
  --v2-f1:28px; --v2-f2:20px; --v2-f3:16px; --v2-f4:14px; --v2-f5:13px; --v2-f6:12px;
  /* 圆角 3 档 */
  --v2-r-card:16px; --v2-r-pill:999px; --v2-r-sm:10px;
  /* 阴影 2 档 */
  --v2-sh1:0 1px 2px rgba(16,24,40,.06);
  --v2-sh2:0 10px 28px rgba(16,24,40,.10);
}

/* ── 页面：中性底 + 白卡片感 ── */
html{background:var(--v2-bg)}
body.pg{background:var(--v2-card);color:var(--v2-ink);font-size:var(--v2-f4);line-height:1.65;
  box-shadow:0 0 0 1px var(--v2-line),0 18px 50px rgba(16,24,40,.06)}
.pgwrap{padding:20px 24px 40px}

/* ── 页头：品牌渐变保留，但加深、收窄、加一层细描边 ── */
.pghead{
  background:linear-gradient(115deg,#c9456f 0%,#d96a92 42%,#e39a48 72%,#0f8f8f 100%);
  border-radius:0 0 var(--v2-r-card) var(--v2-r-card);
  padding:22px 28px 18px; box-shadow:0 10px 30px rgba(16,24,40,.14);
}
.pghead h1{font-size:var(--v2-f1);letter-spacing:.4px;font-weight:800}
.pghead p{font-size:var(--v2-f5);margin-top:6px;opacity:.94;max-width:76ch}

/* ── 区块：白卡片 + 编号 + 标题层级 ── */
.sec{
  background:var(--v2-card);border:1px solid var(--v2-line);border-radius:var(--v2-r-card);
  box-shadow:var(--v2-sh1);padding:18px 20px 20px;margin:0 0 20px;counter-increment:v2sec;
  scroll-margin-top:calc(var(--v2navh,44px) + var(--v2toch,0px) + 66px);
}
.sec>h2{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  background:none;border:0;border-radius:0;padding:0;margin:0 0 14px;
  font-size:var(--v2-f2);font-weight:800;color:var(--v2-ink);letter-spacing:.2px;
}
.sec>h2::before{
  content:counter(v2sec,decimal-leading-zero);
  font:800 var(--v2-f6)/1 ui-monospace,Consolas,monospace;
  color:var(--v2-brand);background:var(--v2-brand-soft);border:1px solid #f7d5e2;
  border-radius:var(--v2-r-pill);padding:5px 9px;transform:translateY(-2px);
}
.sec>h2 small{font-size:var(--v2-f6);font-weight:500;color:var(--v2-ink3)}
.sec>.sub,.sec .sub{color:var(--v2-ink3)}
/* 宽带表格（梯队列 840px／技能表 760px）在窄屏里独立横向滚动，别把整页撑破 */
.sec{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{max-width:100%;overflow-x:auto}

/* ── 表格：干净线条 + 表头浅底 + 行悬停 + 数字等宽 ── */
table{border:1px solid var(--v2-line);border-radius:var(--v2-r-sm);font-size:var(--v2-f5);
  font-variant-numeric:tabular-nums}
th{background:#f8fafc;color:var(--v2-ink2);font-size:var(--v2-f6);font-weight:700;
  letter-spacing:.02em;border-bottom:1px solid var(--v2-line)}
td{border-top:1px solid var(--v2-line2);color:var(--v2-ink2)}
tbody tr:hover td{background:#fbfcfe}
td.n,td.mono,.mono,.num{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-variant-numeric:tabular-nums;color:var(--v2-ink);font-weight:600}

/* ── 小标签 / 技能牌：统一胶囊、降低描边饱和度 ── */
.tag,.sktag{border-radius:var(--v2-r-pill);border-color:var(--v2-line);background:#fafbfd;color:var(--v2-ink2);
  font-size:var(--v2-f6)}
.chip{border:1px solid var(--v2-line);border-radius:var(--v2-r-pill);background:#fff;box-shadow:var(--v2-sh1);
  font-size:var(--v2-f5);padding:5px 13px}
.chip b{color:var(--v2-brand)}
.sk{border-radius:var(--v2-r-pill);border-color:var(--v2-line);box-shadow:var(--v2-sh1)}
.note{border-radius:var(--v2-r-sm);border-color:#f0e2c0;background:#fffdf6;color:#7d6316;font-size:var(--v2-f6)}
.card{border-radius:var(--v2-r-sm);border-color:var(--v2-line);background:#fff;box-shadow:var(--v2-sh1)}

/* ── 吸顶导航（由 JS 注入 .v2toc）── */
.v2toc{
  position:sticky;top:var(--v2navh,44px);z-index:30;margin:0 0 18px;padding:9px 0 10px;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--v2-line);
}
/* 站点既有 .row 带 min-width:840px（表格行），这里必须重置，否则导航条会撑破窄屏 */
.v2toc .row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  min-width:0;width:100%;max-width:100%;padding-bottom:2px}
.v2toc .row::-webkit-scrollbar{display:none}
.v2toc a{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-size:var(--v2-f6);color:var(--v2-ink2);background:#fff;border:1px solid var(--v2-line);
  border-radius:var(--v2-r-pill);padding:5px 11px;transition:.16s;white-space:nowrap;
}
.v2toc a i{font-style:normal;font:700 var(--v2-f6)/1 ui-monospace,Consolas,monospace;color:var(--v2-ink4)}
.v2toc a:hover{border-color:#f0c3d4;box-shadow:var(--v2-sh1)}
.v2toc a.on{background:var(--v2-brand-soft);border-color:#f2c2d5;color:#a83b62;font-weight:700}
.v2toc a.on i{color:var(--v2-brand)}

/* ── 统一表格里的“档位色带”（1〜5 等 / 夯爆了）── */
.row.t5 .lab .rank em{font-style:normal}
.row.t5:nth-of-type(1) .g1{background:#fffdf4}
.row.t5:nth-of-type(2) .g1{background:#fffdf9}

/* ── 移动端 ── */
@media(max-width:900px){
  .pgwrap{padding:14px 12px 28px}
  .pghead{padding:18px 16px 14px}
  .pghead h1{font-size:22px}
  .sec{padding:14px 13px 16px;border-radius:12px}
  .sec>h2{font-size:17px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ══════════════════════════════════════════════════════════════
   统一外壳：页头（.hd / .pghead / .tophead 统一成一种）+ 页脚 + 工具箱入口
   ══════════════════════════════════════════════════════════════ */
.hd,.pghead{
  background:linear-gradient(115deg,#c9456f 0%,#d96a92 42%,#e39a48 72%,#0f8f8f 100%)!important;
  border-radius:0 0 var(--v2-r-card) var(--v2-r-card)!important;
  padding:22px 26px 18px!important;margin:0 0 16px!important;
  box-shadow:0 10px 30px rgba(16,24,40,.14)!important;color:#fff!important;
}
.hd h1,.pghead h1{
  font-size:var(--v2-f1)!important;font-weight:800!important;letter-spacing:.4px;
  text-shadow:0 1px 0 rgba(0,0,0,.12);margin:0!important;line-height:1.25;
}
.hd p,.hd .sub,.pghead p,.pghead .sub{
  color:rgba(255,255,255,.94)!important;font-size:var(--v2-f5)!important;margin-top:6px!important;max-width:78ch;
}

/* 页脚（由 site-shell.js 注入） */
.v2foot{
  margin:26px 22px 30px;padding:16px 18px;border:1px solid var(--v2-line);border-radius:var(--v2-r-card);
  background:#fbfcfe;color:var(--v2-ink3);font-size:var(--v2-f6);line-height:1.85;
}
.v2foot b{color:var(--v2-ink2)}
.v2foot .src{margin-top:4px;color:var(--v2-ink4)}

/* 按钮 / 徽章（各页共用） */
.v2btn{
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--v2-line);background:#fff;color:var(--v2-ink2);
  border-radius:var(--v2-r-pill);padding:6px 14px;font-size:var(--v2-f6);font-weight:600;text-decoration:none;
  box-shadow:var(--v2-sh1);transition:.16s;cursor:pointer;
}
.v2btn:hover{border-color:#f0c3d4;color:#a83b62;transform:translateY(-1px);box-shadow:var(--v2-sh2)}
.v2btn.primary{background:linear-gradient(180deg,#e2568a,#c9456f);border-color:#bf3f66;color:#fff}
.v2btn.primary:hover{color:#fff}
.v2badge{
  display:inline-block;font:700 var(--v2-f6)/1.5 ui-monospace,Consolas,monospace;color:var(--v2-brand);
  background:var(--v2-brand-soft);border:1px solid #f7d5e2;border-radius:var(--v2-r-pill);padding:2px 8px;
}

/* 首页「工具箱」入口区 */
.v2tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:0 0 20px}
.v2tool{
  position:relative;display:block;text-decoration:none;color:inherit;background:#fff;
  border:1px solid var(--v2-line);border-radius:var(--v2-r-card);padding:16px 18px 15px;
  box-shadow:var(--v2-sh1);transition:.18s;overflow:hidden;
}
.v2tool::before{content:'';position:absolute;left:0;top:0;right:0;height:4px;
  background:linear-gradient(90deg,#c9456f,#e39a48,#0f8f8f)}
.v2tool:hover{transform:translateY(-2px);box-shadow:var(--v2-sh2);border-color:#f0c3d4}
.v2tool .no{font:800 var(--v2-f6)/1 ui-monospace,Consolas,monospace;color:var(--v2-brand);
  background:var(--v2-brand-soft);border:1px solid #f7d5e2;border-radius:var(--v2-r-pill);padding:4px 8px}
.v2tool h3{margin:10px 0 6px;font-size:var(--v2-f3);font-weight:800;color:var(--v2-ink)}
.v2tool p{margin:0;font-size:var(--v2-f6);color:var(--v2-ink3);line-height:1.7}
.v2tool .go{margin-top:10px;font-size:var(--v2-f6);font-weight:700;color:var(--v2-brand)}
.v2tool.soon{opacity:.6;border-style:dashed;pointer-events:none}

/* 顶部导航里的「工具箱」入口（site-shell.js 注入） */
.sitenav .v2home{display:inline-flex;align-items:center;gap:5px;margin:0 8px 0 0;padding:4px 12px;border-radius:var(--v2-r-pill);
  flex:0 0 auto;
  background:rgba(255,255,255,.9);color:#a83b62!important;font-weight:700;text-decoration:none;font-size:var(--v2-f6);border:1px solid #f2c2d5}

@media(max-width:900px){
  .v2tools{grid-template-columns:1fr;gap:10px}
  .v2foot{margin:18px 12px 22px;padding:13px 14px}
  .hd,.pghead{padding:18px 16px 14px!important}
  .hd h1,.pghead h1{font-size:22px!important}
}

/* ══════════════════════════════════════════════════════════════
   Stage 2：内容页内部组件统一
   目标：把「梯队表 / 筛选条 / 表单控件 / 配卡墙 / 状态卡」都换成同一套中性＋点睛的样式
   ══════════════════════════════════════════════════════════════ */

/* ── 跑法筛选条：吸顶 + 胶囊按钮 ── */
.sfbar{
  position:sticky;top:calc(var(--v2navh,44px) + var(--v2toch,0px) + 6px);z-index:25;
  margin:0 0 16px!important;padding:9px 12px!important;
  background:rgba(255,255,255,.94)!important;backdrop-filter:saturate(180%) blur(8px);
  border:1px solid var(--v2-line)!important;border-radius:var(--v2-r-pill)!important;box-shadow:var(--v2-sh1)!important;
}
.sfbar button{
  border:1px solid var(--v2-line)!important;background:#fff!important;color:var(--v2-ink2)!important;
  border-radius:var(--v2-r-pill)!important;padding:4px 13px!important;font-size:var(--v2-f6)!important;
  transition:.16s;cursor:pointer;
}
.sfbar button:hover{border-color:#f0c3d4!important}
.sfbar button.on{background:var(--v2-brand-soft)!important;border-color:#f2c2d5!important;color:#a83b62!important;font-weight:700}
.sfbar .sflab{color:var(--v2-ink4);font-size:var(--v2-f6)}

/* ── 梯队表：去掉米黄底与深蓝表头，改中性分层 + 细色带 ── */
.tbl{border:1px solid var(--v2-line)!important;border-radius:var(--v2-r-card)!important;background:#fff;
  box-shadow:var(--v2-sh1);overflow:hidden}
.tbl .row{border-bottom:1px solid var(--v2-line2)!important}
.tbl .row:last-child{border-bottom:0!important}
.tbl .colhd{
  background:#f8fafc!important;color:var(--v2-ink2)!important;font-weight:700!important;
  border-bottom:1px solid var(--v2-line)!important;font-size:var(--v2-f6)!important;letter-spacing:.02em;
}
.tbl .lab{background:#fbfcfe!important;border-right:1px solid var(--v2-line2)!important}
.tbl .lab .rank em{color:var(--v2-ink)!important;font-weight:800!important;font-size:var(--v2-f3)!important}
.tbl .lab .rank em.txt{font-size:var(--v2-f5)!important;color:var(--v2-brand)!important}
.tbl .lab .sub{color:var(--v2-ink4)!important;font-size:var(--v2-f6)!important}
.tbl .g1,.tbl [class^="g"]{
  background:#fff!important;border-right:1px solid var(--v2-line2)!important;padding:8px 10px!important;
}
.tbl .row:hover [class^="g"]{background:#fcfdff!important}
/* 1〜5 等：左侧一条细分档色带（金/银/铜/蓝/灰），比整块底色干净 */
.tbl .row.t5:nth-of-type(n+2) .lab{position:relative}
.tbl .row.t5:nth-of-type(n+2) .lab::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:0 3px 3px 0}
.tbl .row.t5:nth-of-type(2) .lab::before{background:#d9a441}
.tbl .row.t5:nth-of-type(3) .lab::before{background:#9aa6b8}
.tbl .row.t5:nth-of-type(4) .lab::before{background:#c98a5a}
.tbl .row.t5:nth-of-type(5) .lab::before{background:#8fb3d9}
.tbl .row.t5:nth-of-type(6) .lab::before{background:#c2c9d6}

/* ── 表单控件（赛道/属性/适性/模拟器/相性 等页共用）── */
select,input[type="text"],input[type="search"],input[type="number"],input[type="file"],textarea{
  border:1px solid var(--v2-line)!important;border-radius:var(--v2-r-sm)!important;background:#fff!important;
  color:var(--v2-ink)!important;font-size:var(--v2-f5)!important;padding:7px 10px!important;
  font-variant-numeric:tabular-nums;transition:.16s;
}
select:focus,input:focus,textarea:focus{outline:none!important;border-color:#e79cb8!important;box-shadow:0 0 0 3px rgba(217,79,126,.12)!important}
button{border-radius:var(--v2-r-pill)!important;font-size:var(--v2-f6)!important;transition:.16s}
label{color:var(--v2-ink2)!important;font-size:var(--v2-f5)!important}

/* ── 配卡墙 / 状态卡 / 技能行：统一圆角与描边 ── */
.cards{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important;gap:10px!important}
.cards .card{border:1px solid var(--v2-line)!important;border-radius:var(--v2-r-sm)!important;background:#fff!important;
  box-shadow:var(--v2-sh1);padding:10px 12px!important}
.cardgp{background:#f8fafc!important;border:1px solid var(--v2-line)!important;border-radius:var(--v2-r-pill)!important;
  color:var(--v2-ink2)!important;font-size:var(--v2-f6)!important;padding:4px 12px!important;margin:14px 0 8px!important;display:inline-flex;gap:8px;align-items:center}
.statrow{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;gap:10px!important}
.statcard{border:1px solid var(--v2-line)!important;border-radius:var(--v2-r-sm)!important;background:#fff!important;box-shadow:var(--v2-sh1)}
.statcard .t{color:var(--v2-ink3)!important;font-size:var(--v2-f6)!important}
.statcard .vals b{font-variant-numeric:tabular-nums;color:var(--v2-ink)}
/* 技能牌的色系降饱和（保留区分度，但不再刺眼） */
.sk.acc{background:#fff6fa!important;border-color:#f6d8e6!important}
.sk.spd{background:#f5f8ff!important;border-color:#dbe6fa!important}
.sk.uni{background:#faf7ff!important;border-color:#e6dcf7!important}
.sk.inh{background:#f5f9ff!important;border-color:#d9e6f7!important}
.sk.gold{background:#fffdf3!important;border-color:#f1e4b8!important}
.horse{border:1px solid var(--v2-line)!important;border-radius:var(--v2-r-pill)!important;background:#fff;box-shadow:var(--v2-sh1)}

@media(max-width:900px){
  .sfbar{top:calc(var(--v2navh,40px) + var(--v2toch,0px) + 4px);border-radius:var(--v2-r-sm)!important}
  .cards{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important}
}

/* ══════════════════════════════════════════════════════════════
   Stage 3：07「配卡能拿的白技能」/ 10「推荐配卡」细化 + 移动端收紧
   ══════════════════════════════════════════════════════════════ */
/* 筛选条右侧的速度曲线入口 */
.v2simcta{margin-left:auto;white-space:nowrap}
.sfbar .sfhint{margin-left:12px!important}

/* 07 配卡能拿的白技能：卡片化 + 悬停 */
.cwgrid{gap:12px!important}
.cwcard{
  border:1px solid var(--v2-line)!important;border-radius:var(--v2-r-sm)!important;background:#fff!important;
  box-shadow:var(--v2-sh1);padding:11px 13px!important;transition:.16s;
}
.cwcard:hover{border-color:#f0c3d4!important;box-shadow:var(--v2-sh2);transform:translateY(-1px)}
.cwhd b{font-size:var(--v2-f5)!important;color:var(--v2-ink)!important}
.cwtag{border-radius:var(--v2-r-pill)!important;border-color:var(--v2-line)!important;background:#f8fafc!important;
  color:var(--v2-ink3)!important;font-size:var(--v2-f6)!important}
.cwcard .sk{margin:0 3px 3px 0!important}

/* 10 推荐配卡：卡面统一比例 + 悬停上浮（卡墙更整） */
.cards .card{display:flex;flex-direction:column;gap:6px}
.cards .card img,.cards .card .cart,.cards .card img[src*="sc_"]{
  width:100%!important;height:auto!important;aspect-ratio:100/140;object-fit:cover!important;
  border-radius:8px!important;
}
.cards .card:hover{border-color:#f0c3d4!important;box-shadow:var(--v2-sh2);transform:translateY(-2px)}
.cards .card b{font-size:var(--v2-f6)!important;color:var(--v2-ink)!important}
.cards .card .sub,.cards .card ul li{color:var(--v2-ink3)!important;font-size:var(--v2-f6)!important}
.cards .card ul{padding-left:14px!important;margin:0!important}

/* ── 移动端收紧：梯队表更紧凑、技能牌更小、卡片单列 ── */
@media(max-width:600px){
  .tbl .g1,.tbl [class^="g"]{padding:5px 6px!important}
  .tbl .lab{padding:5px 6px!important}
  .tbl .lab .rank em{font-size:var(--v2-f5)!important}
  .tbl .hchip .ava2{width:34px!important;height:34px!important}
  .tbl .hchip{margin:0 2px 2px 0!important}
  .sk{font-size:11px!important;padding:1px 7px!important;gap:4px!important}
  .sk .ico{width:15px!important;height:15px!important}
  .sec>h2{font-size:16px!important;gap:7px}
  .sec>h2::before{padding:4px 7px!important}
  .cwgrid{grid-template-columns:1fr!important}
  .npcgrid,.statrow{grid-template-columns:1fr!important}
  .v2simcta{order:9}
}

/* ══════════════════════════════════════════════════════════════
   Stage 4：动效与手感
   参考 61444 的做法（实测）：他全站只用两档时长 —— .15s ×54 / .12s ×17，
   配 hover 位移 + 阴影加深、:focus-visible 键盘描边、4 个状态反馈 keyframes。
   我们照这个思路把「点下去、悬上去、切过去」都做成同一套手感。
   ══════════════════════════════════════════════════════════════ */
:root{
  --v2-e1:120ms;                          /* 微反馈：按压 / 描边 */
  --v2-e2:150ms;                          /* 常态：悬停 / 位移 / 变色 */
  --v2-ease:cubic-bezier(.2,.7,.3,1);     /* 起步快、收尾稳，观感“高档”的关键 */
}

/* ── 1) 统一微交互：可点/可悬停的东西共用一套时长与曲线 ── */
a,button,select,input,textarea,label,
.chip,.sk,.sktag,.tag,.note,.card,.v2tool,.cwcard,.cards .card,.hchip,.horse,
.tbl .row,.sfbar button,.v2toc a,.v2btn,.v2home{
  transition:transform var(--v2-e2) var(--v2-ease),box-shadow var(--v2-e2) var(--v2-ease),
    border-color var(--v2-e2) var(--v2-ease),background-color var(--v2-e2) var(--v2-ease),
    color var(--v2-e2) var(--v2-ease),opacity var(--v2-e2) var(--v2-ease),
    filter var(--v2-e2) var(--v2-ease);
}
/* 表格行：悬停整行点亮（原来是突变） */
.tbl .row:hover{background:#fcfdff!important;box-shadow:inset 3px 0 0 var(--v2-brand)}
/* 头像筹码：悬停轻微放大 + 提亮，比单纯换边框更“活” */
.hchip:hover,.horse:hover{transform:translateY(-2px) scale(1.04);filter:saturate(1.12) brightness(1.03)}
/* 技能牌：悬停上浮一档 */
.sk:hover{transform:translateY(-1px);box-shadow:var(--v2-sh2)!important}
/* 头像/技能牌按下：压回去（像真按钮） */
.hchip:active,.horse:active,.sk:active,.chip:active,.sfbar button:active,
.v2toc a:active,.v2btn:active,button:active{transform:translateY(1px) scale(.985)}

/* ── 2) 键盘可达：只有键盘操作时才出现描边（鼠标点击不打扰） ── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--v2-brand);outline-offset:2px;border-radius:var(--v2-r-sm);
}
.hchip:focus-visible,.sk:focus-visible{outline-offset:3px}

/* ── 3) 状态反馈动画（对标他的 compatPulse / goalFlash） ── */
@keyframes v2In{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes v2Ring{0%{box-shadow:0 0 0 0 rgba(217,79,126,.32)}100%{box-shadow:0 0 0 9px rgba(217,79,126,0)}}
@keyframes v2Draw{to{stroke-dashoffset:0}}
@keyframes v2Tick{0%{opacity:.35;transform:translateY(3px)}100%{opacity:1;transform:none}}
/* 切换跑法筛选 / 换赛道后，内容整块淡入，避免“啪”地跳变 */
.v2in{animation:v2In 240ms var(--v2-ease) both}
/* 点击目录跳转时，目标区块闪一下光圈 */
.v2ring{animation:v2Ring 600ms var(--v2-ease)}
/* 数字更新时轻微上浮 */
.v2tick{animation:v2Tick var(--v2-e2) var(--v2-ease) both}
/* 速度曲线描线动画（sim.html 用 pathLength="1" 配合） */
.chart svg path.v2draw{stroke-dasharray:1;stroke-dashoffset:1;animation:v2Draw 560ms var(--v2-ease) both}

/* ── 4) 滚动进入：JS 才会加 .v2rv，没 JS 时内容照常显示（不会白屏） ── */
.v2rv{opacity:0;transform:translateY(10px)}
.v2rv.on{opacity:1;transform:none;
  transition:opacity 380ms var(--v2-ease),transform 380ms var(--v2-ease)}

/* ── 5) 顶部滚动进度条 ── */
.v2prog{position:fixed;left:0;top:0;height:2px;width:0;z-index:10050;pointer-events:none;
  background:linear-gradient(90deg,#c9456f,#e39a48,#0f8f8f);
  transition:width 90ms linear,opacity 200ms linear}

/* ── 6) 站内翻页的平滑过渡（跨文档 View Transitions，Chrome/Edge 支持时自动生效） ── */
@view-transition{navigation:auto}
.sitenav{view-transition-name:v2nav}
@keyframes v2VtOut{to{opacity:0;transform:translateY(-4px)}}
@keyframes v2VtIn{from{opacity:0;transform:translateY(6px)}}
::view-transition-old(root){animation:v2VtOut 160ms var(--v2-ease) both}
::view-transition-new(root){animation:v2VtIn 220ms var(--v2-ease) both}
::view-transition-old(v2nav),::view-transition-new(v2nav){animation:none}

/* ── 7) 无障碍：系统开了「减少动态效果」就全部关掉 ── */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .v2rv{opacity:1!important;transform:none!important}
  .chart svg path.v2draw{stroke-dashoffset:0}
  .v2prog{transition:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}