/* ============================================================
   球镜 · 共享设计系统增强层 (2026-09-29)
   作用：统一「系统级」体验（点击高亮 / 滚动 / 文本缩放），
        补齐移动端安全区与触摸反馈，提供入场淡入与骨架屏。
   原则：只补充、不覆盖各页既有卡片视觉。
   引入顺序：放在各页 <style> 之前 —— 页面样式在后，可覆盖本文件同名规则；
             本文件凡涉及与页面冲突的属性，均用更高特异度选择器（如 nav.bottom）
             或通用选择器（*）确保生效。
   ============================================================ */

/* ---- 系统级：点击 / 滚动 / 文本（跨页一致） ---- */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body { overscroll-behavior-y: contain; }

/* ---- 移动端底部导航：安全区 + 触摸反馈 ---- */
nav.bottom { bottom: calc(10px + env(safe-area-inset-bottom)); }
nav.bottom a { transition: transform .12s ease; }
nav.bottom a:active { transform: scale(.93); }
nav.bottom a b, nav.bottom a svg { transition: transform .12s ease; }

/* ---- 入场淡入（首屏静态区块一次性；动态注入容器不重播） ---- */
@keyframes qj-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.app > .card, .app > section,
.shell > .hero, .shell > section,
main > section, main > header {
  animation: qj-rise .55s cubic-bezier(.2, .7, .3, 1) both;
}
.qj-rise { animation: qj-rise .55s cubic-bezier(.2, .7, .3, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .qj-rise { animation: none; }
  .app > .card, .app > section, .shell > .hero, .shell > section, main > section, main > header { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ---- 骨架屏（异步数据区占位，shimmer 流光） ---- */
@keyframes qj-shimmer {
  0%   { background-position: -240px 0; }
  100% { background-position: 240px 0; }
}
.qj-skel {
  border-radius: 10px;
  background: linear-gradient(90deg, #e9e7e2 25%, #f3f1ec 37%, #e9e7e2 63%);
  background-size: 480px 100%;
  animation: qj-shimmer 1.35s ease-in-out infinite;
}
.qj-skel-line { height: 11px; margin: 9px 0; }
.qj-skel-line.w70 { width: 70%; }
.qj-skel-line.w50 { width: 50%; }
.qj-skel-line.w90 { width: 90%; }
.qj-skel-card { height: 150px; }
.qj-skel-row { height: 56px; border-radius: 12px; margin: 10px 0; }
.qj-skel-circle { width: 42px; height: 42px; border-radius: 50%; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .qj-skel { animation: none; }
}