/* ============================================
   UI 优化增量层 · 2026-09-22/23 · beta 预览版
   依据：《网站UI设计调研报告》+ v1.1 候选清单
   本文件为增量覆盖层，在所有页面最后加载，
   颜色/间距优先引用 tokens.css 的 --tk-* 变量。
   ============================================ */

/* ① P0 键盘焦点可见 (WCAG 2.4.7)
   :focus-visible 只对键盘/开关设备用户显示，鼠标点击不会出现边框 */
:focus-visible {
  outline: 2px solid var(--tk-accent, #0f6b3f);
  outline-offset: 2px;
  border-radius: 6px;
}
/* 深色背景区域换浅色焦点环，保证对比度 */
.site-footer :focus-visible,
.lb :focus-visible,
.jb-section :focus-visible,
.vmodal :focus-visible {
  outline-color: #7ee2b0;
}
/* 胶囊搜索框：高亮整个容器（内部输入框原生 outline 已被置 0） */
.search-row:focus-within,
.jb-search:focus-within {
  outline: 2px solid var(--tk-accent, #0f6b3f);
  outline-offset: 3px;
  border-radius: 999px;
}

/* ② P1 触控目标 ≥ 44px（WCAG 2.5.5 推荐 / Apple HIG） */
.btn { min-height: 44px; }
.chip { min-height: 44px; display: inline-flex; align-items: center; }
.lb-close { width: 44px; height: 44px; }

/* ③ P1 次要文字最小字号 */
.brand-name small { font-size: 11px; }      /* 原 10px：品牌副标 */
.show-photo .badge { font-size: 12px; }     /* 原 11px：实拍图花色角标 */

/* ④ P1 触屏设备去除 hover 位移粘连（保守处理：只禁位移/阴影，不改配色） */
@media (hover: none) {
  .service-card:hover,
  .mat-card:hover,
  .model-card:hover { transform: none; box-shadow: var(--tk-shadow-sm); }
}

/* ============================================================
   2026-09-23 追加：v1.1 候选清单落地
   ============================================================ */

/* ⑤ P0 首屏信任数据条 */
.trust-bar {
  display: flex; justify-content: center; flex-wrap: wrap; gap: var(--tk-s2, 8px) var(--tk-s5, 24px);
  margin: 18px auto 0; padding: 12px 18px;
  max-width: 620px; border: 1px dashed rgba(0,0,0,.18); border-radius: var(--tk-r-lg, 16px);
  background: rgba(255,255,255,.6); color: var(--tk-sub, #5f5e5a); font-size: var(--tk-f-sm, 13px);
}
.trust-bar b { color: var(--tk-ink, #171716); font-size: var(--tk-f-lg, 19px); margin-right: 3px; }
@media (max-width: 480px) { .trust-bar { gap: 4px 18px; } }

/* ⑥ P1 加载骨架屏（首页各区块等待态） */
.skel-block, .skel-line { position: relative; overflow: hidden; background: #e9ebee; }
.skel::after, .skel-block::after, .skel-line::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: tk-shimmer 1.2s infinite;
}
@keyframes tk-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after, .skel-block::after, .skel-line::after { animation: none; } }
.show-card.skel { pointer-events: none; }
.show-card.skel .show-photo { aspect-ratio: 4 / 5; }
.skel-line { display: block; height: 12px; border-radius: 6px; }
/* 分享页骨架占位布局 */
.skel-wrap { display: flex; flex-direction: column; gap: 10px; padding: 48px clamp(20px, 6vw, 64px); max-width: 1080px; margin: 0 auto; }
/* 滚动感知懒加载：占位灰底 + 加载完成渐显，避免裂图图标与闪跳 */
img.lazy-img { opacity: 0; background: #e9ebee; transition: opacity .35s ease; }
img.lazy-img.ld { opacity: 1; }
@media (prefers-reduced-motion: reduce) { img.lazy-img { transition: none; } }
/* 视频提示条：B站高清限制 + 横屏引导（教程页/首页通用） */
.jb-hd-hint { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 12px 14px; border: 1px solid #f0c869; border-radius: 10px; background: #fff8e6; color: #6b4d0e; font-size: 13px; line-height: 1.6; }
.jb-hd-hint b { color: #8a5a00; }
.skel-line + .skel-line { margin-top: 6px; }
.skel-line.w60 { width: 60%; }
.jb-video.skel, .model-card.skel { pointer-events: none; }
.mat-card.skel .mat-swatch { aspect-ratio: 4 / 3; }

/* ⑦ P1 花色对比：入口按钮 / 底部托盘 / 对比弹层 */
.cmp-add {
  position: absolute; right: 8px; bottom: 8px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15); background: rgba(255,255,255,.92);
  color: var(--tk-ink, #171716); font-size: 19px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--tk-shadow-sm); transition: background .15s, transform .15s;
}
.cmp-add:hover { background: var(--tk-ink, #171716); color: #fff; }
.mat-swatch { position: relative; }
.cmp-add.on { background: var(--tk-accent, #0f6b3f); border-color: var(--tk-accent, #0f6b3f); color: #fff; }
.cmp-add.on::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; }

.cmp-tray {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 90; display: none; align-items: center; gap: var(--tk-s3, 12px);
  padding: 10px 14px; border-radius: var(--tk-r-pill, 999px);
  background: var(--tk-ink, #171716); color: #fff; font-size: var(--tk-f-sm, 13px);
  box-shadow: var(--tk-shadow-md); max-width: calc(100vw - 24px);
}
.cmp-tray.show { display: flex; }
.cmp-tray .cmp-chips { display: flex; gap: 6px; overflow-x: auto; max-width: 46vw; }
.cmp-tray .cmp-chip { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.16); white-space: nowrap; }
.cmp-tray button { border: 0; border-radius: 999px; min-height: 36px; padding: 6px 14px; font-weight: 700; cursor: pointer; }
.cmp-tray .cmp-clear { background: transparent; color: rgba(255,255,255,.75); }
.cmp-tray .cmp-go { background: #fff; color: var(--tk-ink, #171716); }
.cmp-tray .cmp-go:disabled { opacity: .4; cursor: default; }
@media (max-width: 560px) { .cmp-tray { width: calc(100vw - 24px); justify-content: space-between; } .cmp-tray .cmp-chips { max-width: 40vw; } }

.cmp-overlay {
  position: fixed; inset: 0; z-index: 95; display: none;
  background: rgba(0,0,0,.55); backdrop-filter: blur(8px);
  padding: 20px; overflow-y: auto;
}
.cmp-overlay.open { display: block; }
.cmp-panel { max-width: 960px; margin: 0 auto; background: var(--tk-card, #fff); border-radius: var(--tk-r-lg, 16px); padding: 18px; }
.cmp-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--tk-s4, 16px); }
.cmp-panel-head h2 { font-size: var(--tk-f-xl, 24px); }
.cmp-close { width: 44px; height: 44px; border: 1px solid rgba(0,0,0,.12); border-radius: 50%; background: #fff; font-size: 22px; cursor: pointer; }
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--tk-s4, 16px); }
.cmp-col { border: 1px solid var(--tk-line, #e7e2d8); border-radius: var(--tk-r-md, 12px); overflow: hidden; background: #fff; }
.cmp-col .cmp-img { aspect-ratio: 4 / 3; background: #e9ebee; }
.cmp-col .cmp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-col .cmp-meta { padding: 12px 14px; display: grid; gap: 6px; font-size: var(--tk-f-sm, 13px); }
.cmp-col .cmp-meta strong { font-size: var(--tk-f-md, 16px); }
.cmp-col .cmp-meta .row { display: flex; justify-content: space-between; gap: 8px; color: var(--tk-sub, #5f5e5a); }
.cmp-col .cmp-meta .row b { color: var(--tk-ink, #171716); font-weight: 500; }
.cmp-col .cmp-hex { display: inline-flex; align-items: center; gap: 6px; }
.cmp-col .cmp-hex i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid rgba(0,0,0,.15); }
.cmp-col .cmp-link { display: block; text-align: center; padding: 10px; border-top: 1px solid var(--tk-line, #e7e2d8); color: var(--tk-ink, #171716); font-weight: 700; text-decoration: none; }
.cmp-col .cmp-link:hover { background: var(--tk-bg-2, #f1ede4); }
@media (max-width: 640px) { .cmp-overlay { padding: 10px; } .cmp-panel { padding: 12px; } }