/* ============================================================
 * perf.css —— 流畅度专项（字体闪烁 / 重排 / 合成层）
 * 1) 消除 FOUT 字重闪烁：UI 统一用系统字体，且禁止字体合成
 * 2) 视图切换用合成层，避免整页重排
 * 3) 触控反馈用 transform，不触发 layout
 * ============================================================ */

/* ── ① 字体：UI 用系统字体（零下载、零闪烁）；日语内容保留字体但固定字重 ── */
:root:root body {
  font-synthesis: none !important;          /* 禁止浏览器伪造粗体/斜体（字重跳变的元凶之一） */
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}
:root:root body button,
:root:root body .tab,
:root:root body .sv-*,
:root:root body [class^="sv-"],
:root:root body #tabbar em,
:root:root body .p4-title,
:root:root body .p4-mode b {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans", "Helvetica Neue", sans-serif !important;
}

/* ── ② 视图切换：用合成层，只动 opacity/transform ── */
:root:root body .view {
  contain: layout style paint !important;              /* 隔离每个视图的布局/绘制，切换时不做全页重排 */
  backface-visibility: hidden;
}
:root:root body #view-home, :root:root body #view-course,
:root:root body #view-listen, :root:root body #view-record, :root:root body #view-mine {

}

/* ── ③ 触控反馈：只用 transform，不要改 font/height ── */
:root:root body button,
:root:root body .tab,
:root:root body .sv-level,
:root:root body .sv-unit,
:root:root body .sv-row,
:root:root body .p4-mode,
:root:root body .p4-opt,
:root:root body .p4-lv {
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease !important;
  ;                     /* 防止 :active 时字重变化 */
}
/* 明确禁止按下时改变字重/字号（这是"点一下字变粗"的另一半原因） */
:root:root body button:active,
:root:root body button:focus,
:root:root body .tab:active,
:root:root body .tab.active,
:root:root body .sv-level:active,
:root:root body .sv-unit:active,
:root:root body .sv-row:active,
:root:root body .p4-mode:active,
:root:root body .p4-opt:active {
  ;
  font-size: inherit !important;
  letter-spacing: inherit !important;
}

/* ── ④ 长列表：跳过屏幕外渲染（单词全表 200 行） ── */
:root:root body #study-root .sv-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 52px;
}
:root:root body #course-body .lesson-item,
:root:root body .lv-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 60px;
}

/* ── ⑤ 去掉会引发重绘的装饰效果（影响流畅度的） ── */
:root:root body .view, :root:root body #tabbar, :root:root body .sv-card, :root:root body .p4-q {
  filter: none !important;
  backdrop-filter: none !important;         /* backdrop-filter 在 iOS 上很贵，关掉换纯色 */
}
:root:root body #tabbar {
  background: rgba(255,253,250,.99) !important;
}
@media (prefers-color-scheme: dark) {
  :root:root body #tabbar { background: rgba(30,27,24,.99) !important; }
}