/* ===========================================================
   uwb-tag.html — UWB Tag 物品查找完整方案（详情页）
   基础组件复用 cbu5000v210.css + uwb-remote.css（.cb-* / .ur-* 体系）；
   本表只保留页面专属覆盖：#how 分区卡片增强 + 视频原比例完整显示。
   =========================================================== */

/* ---------- #how 分区：文本卡片 + 视觉容器（沿用 lock/radar 页模式） ---------- */
.cb-page #how .cb-split { gap: 40px; align-items: stretch; grid-template-columns: 1.12fr .88fr; }
.cb-page #how .cb-split-text.ur-radar-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 40px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
  position: relative;
}
.cb-page #how .cb-split-text.ur-radar-card::before {
  content: "";
  position: absolute;
  left: 24px; right: 24px; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-100));
  border-radius: 0 0 3px 3px;
}
.cb-page #how .cb-split-visual.ur-radar-visual {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* 竖版视频在宽栏中会大量留白，用同帧海报做模糊底衬填满卡片（仅装饰） */
.cb-page #how .ur-radar-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/img/UWB-Tag-poster.jpg?v=2") center / cover no-repeat;
  filter: blur(30px) saturate(1.15);
  transform: scale(1.25);
  opacity: .5;
}
/* 视频：原比例完整显示，不裁切；高度与左侧文案卡片对齐。
   边缘用径向 mask 羽化，溶入模糊底衬，消除"实拍图 vs 纯白卡"的硬边。 */
.cb-page #how .ur-gallery-radar video {
  border: 0;
  background: transparent;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 430px;
  aspect-ratio: auto;
  border-radius: 14px;
  position: relative;
  z-index: 1;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
  -webkit-mask-image: radial-gradient(132% 126% at 50% 44%, #000 76%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(132% 126% at 50% 44%, #000 76%, rgba(0,0,0,0) 100%);
}
.cb-page #how .ur-radar-card .cb-feat-list li { padding: 14px 0 14px 28px; border-bottom: 1px dashed var(--line); position: relative; }
.cb-page #how .ur-radar-card .cb-feat-list li:last-child { border-bottom: 0; }

/* ---------- Hero 右侧图：4 张 App 截图扇形铺开 ---------- */
.cb-page .cb-hero-fan {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 460px;
  margin: 0 auto;
}
.cb-page .cb-hero-fan .cb-fan-card {
  position: absolute;
  bottom: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 5px solid #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .28);
  transform-origin: 50% 100%;
  transition: transform .35s ease;
}
.cb-page .cb-hero-fan .cb-fan-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
/* 错位重叠加：前面那张大且居中，后面的从左右探出边 */
.cb-page .cb-hero-fan .cb-fan-card--map   { left: calc(50% - 198px); width: 130px; z-index: 1; transform: rotate(-20deg); }
.cb-page .cb-hero-fan .cb-fan-card--detail{ left: calc(50% - 158px); width: 150px; z-index: 2; transform: rotate(-10deg); }
.cb-page .cb-hero-fan .cb-fan-card--radar { left: calc(50% - 92px);  width: 184px; z-index: 4; transform: rotate(3deg); }
.cb-page .cb-hero-fan .cb-fan-card--found { left: calc(50% + 8px);   width: 150px; z-index: 3; transform: rotate(10deg); }
/* 苹果手表精确查找：抠图透明 PNG，作为右侧叠加层（不撑宽容器，避免被 Hero overflow 裁切） */
.cb-page .cb-hero-fan .cb-fan-card--watch {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  filter: drop-shadow(0 16px 28px rgba(13, 27, 42, .32));
}
.cb-page .cb-hero-fan .cb-fan-card--watch img {
  border-radius: 0;
  background: transparent;
  filter: none;
}
.cb-page .cb-hero-fan .cb-fan-card--watch1 { left: calc(50% + 50px);  width: 110px; z-index: 5; transform: rotate(15deg); }
.cb-page .cb-hero-fan .cb-fan-card--watch2 { left: calc(50% + 115px); width: 105px; z-index: 6; transform: rotate(-3deg); }

/* ---------- App 展示区：官方 App 截图 ---------- */
#app .cb-subhead { margin-bottom: 44px; }
.ur-app-grid { align-items: start; grid-template-columns: repeat(5,1fr); }
@media (max-width: 1024px){ .ur-app-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px){ .ur-app-grid { grid-template-columns: 1fr; } }
.ur-app-grid .ur-shot { margin: 0; }
.ur-shot {
  background: #0f0f0f;
  border-radius: 28px;
  padding: 9px;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  overflow: hidden;
}
.ur-shot img,
.ur-shot video {
  width: 100%;
  aspect-ratio: 1242 / 2688;
  height: auto;
  object-fit: contain;
  border-radius: 20px;
  display: block;
  background: #0f0f0f;
}
.ur-shot figcaption {
  margin-top: 8px;
  padding: 14px 8px 6px;
  border-top: 1px solid rgba(255,255,255,.28);
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,.92);
}
.ur-app-cta {
  margin-top: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ur-app-store { padding: 12px 22px !important; gap: 12px; }
.ur-app-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.ur-app-note {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* ---------- 方案价值：5 卡单行网格（与 #app 一致，避免 3 列留空） ---------- */
.cb-page #value .cb-grid-3 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px){ .cb-page #value .cb-grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px){ .cb-page #value .cb-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .cb-page #value .cb-grid-3 { grid-template-columns: 1fr; } }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .cb-page #how .ur-gallery-radar video { max-height: 380px; }
  .cb-page .cb-hero-fan { height: 400px; max-width: 360px; }
  .cb-page .cb-hero-fan .cb-fan-card { border-width: 4px; }
  .cb-page .cb-hero-fan .cb-fan-card--map   { left: calc(50% - 162px); width: 106px; transform: rotate(-18deg); }
  .cb-page .cb-hero-fan .cb-fan-card--detail{ left: calc(50% - 129px); width: 122px; transform: rotate(-9deg); }
  .cb-page .cb-hero-fan .cb-fan-card--radar { left: calc(50% - 75px);  width: 150px; transform: rotate(3deg); }
  .cb-page .cb-hero-fan .cb-fan-card--found { left: calc(50% + 7px);   width: 122px; transform: rotate(9deg); }
  .cb-page .cb-hero-fan .cb-fan-card--watch1 { left: calc(50% + 41px);  width: 90px;  transform: rotate(15deg); }
  .cb-page .cb-hero-fan .cb-fan-card--watch2 { left: calc(50% + 95px);  width: 86px;  transform: rotate(-3deg); }
}
@media (max-width: 620px) {
  .cb-page #how .ur-radar-card { padding: 24px !important; }
  .cb-page #how .ur-radar-visual { padding: 10px !important; }
  .cb-page #how .ur-gallery-radar video { max-height: 340px; }
  .cb-page .cb-hero-fan { height: 340px; max-width: 300px; }
  .cb-page .cb-hero-fan .cb-fan-card { border-width: 3px; }
  .cb-page .cb-hero-fan .cb-fan-card--map   { left: calc(50% - 135px); width: 88px;  transform: rotate(-18deg); }
  .cb-page .cb-hero-fan .cb-fan-card--detail{ left: calc(50% - 108px); width: 102px; transform: rotate(-8deg); }
  .cb-page .cb-hero-fan .cb-fan-card--radar { left: calc(50% - 63px);  width: 126px; transform: rotate(2deg); }
  .cb-page .cb-hero-fan .cb-fan-card--found { left: calc(50% + 6px);   width: 102px; transform: rotate(8deg); }
  .cb-page .cb-hero-fan .cb-fan-card--watch1 { left: calc(50% + 34px);  width: 75px;  transform: rotate(15deg); }
  .cb-page .cb-hero-fan .cb-fan-card--watch2 { left: calc(50% + 78px);  width: 72px;  transform: rotate(-3deg); }
}

/* ---------- 应用场景：左侧 2x2 卡片 + 右侧 3D 旋转卡片 ---------- */
.cb-page #scenarios .tag-scenarios-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
.cb-page #scenarios .tag-scenarios-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.cb-page #scenarios .tag3d-col {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}
/* 3D 卡片组件（从 preview-3d-card.html 迁移，命名空间 tag3d-*，无鼠标交互、抛物线转速、每转一圈换轴） */
.tag3d-stage {
  --card-w: 300px;
  --card-h: 408px;
  --radius: 26px;
  --ink: #f2f5fb;
  --muted: rgba(226, 233, 246, .55);
  --blue: #6f9dff;
  --blue-400: #9dbcff;
  --line: rgba(255, 255, 255, .12);
  --thick: 8px;
  --face-1: #1a1f2a;
  --face-2: #0a0d13;
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  perspective: 1200px;
}
.tag3d-shadow {
  position: absolute;
  inset: 18px -18px -18px 18px;
  border-radius: var(--radius);
  background: radial-gradient(60% 60% at 30% 30%, rgba(4, 8, 20, .48), transparent 60%),
              radial-gradient(70% 70% at 80% 80%, rgba(10, 18, 45, .32), transparent 55%);
  filter: blur(34px);
  opacity: .85;
  pointer-events: none;
}
.tag3d-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  transform-style: preserve-3d;
  will-change: transform;
}
.tag3d-flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1.9s cubic-bezier(.42, .02, .2, 1);
  will-change: transform;
}
.tag3d-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  overflow: hidden;
}
.tag3d-face.tag3d-front { transform: translateZ(calc(var(--thick) / 2)); }
.tag3d-face.tag3d-back  { transform: rotateY(180deg) translateZ(calc(var(--thick) / 2)); }
.tag3d-slice {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #2c333f 0%, #12161e 100%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tag3d-border {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(135deg, rgba(140, 175, 255, .6), rgba(120, 160, 255, .14) 45%, rgba(255, 255, 255, .08) 55%, rgba(140, 175, 255, .45));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transform: translateZ(1px);
}
.tag3d-bg {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: radial-gradient(120% 110% at 86% 6%, rgba(111, 157, 255, .22), transparent 46%),
              radial-gradient(90% 80% at 12% 96%, rgba(60, 100, 220, .14), transparent 52%),
              linear-gradient(165deg, var(--face-1) 0%, var(--face-2) 100%);
  transform: translateZ(-40px) scale(1.08);
}
.tag3d-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 255, 255, .028) 2px, rgba(255, 255, 255, .028) 3px);
  opacity: .7;
}
.tag3d-shine {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: radial-gradient(260px 260px at 50% 50%, rgba(150, 185, 255, .3), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .35s ease;
  transform: translateZ(2px);
  pointer-events: none;
}
.tag3d-content {
  position: absolute;
  inset: 0;
  padding: 30px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transform-style: preserve-3d;
}
.tag3d-flow { position: relative; transform: translateZ(var(--z)); text-shadow: 0 8px 26px rgba(0, 0, 0, .75); }
.tag3d-top {
  --z: 26px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tag3d-top::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
}
.tag3d-logo {
  --z: 48px;
  width: 70px;
  height: 70px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(111, 157, 255, .14);
  border: 1px solid rgba(140, 175, 255, .34);
  box-shadow: 0 0 44px rgba(90, 140, 255, .3), inset 0 0 26px rgba(120, 165, 255, .1);
}
.tag3d-logo svg { width: 36px; height: 36px; stroke: var(--blue); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tag3d-title {
  --z: 64px;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.04em;
  background: linear-gradient(180deg, #ffffff 0%, rgba(226, 233, 246, .68) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.tag3d-sub {
  --z: 54px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
}
.tag3d-bl {
  --z: 34px;
  position: absolute;
  bottom: 22px;
  left: 24px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--blue-400);
}
.tag3d-br {
  --z: 34px;
  position: absolute;
  bottom: 22px;
  right: 24px;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
}
.tag3d-backcontent {
  position: absolute;
  inset: 0;
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transform-style: preserve-3d;
}
.tag3d-backtitle {
  --z: 42px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  background: linear-gradient(180deg, #ffffff, rgba(226, 233, 246, .66));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.tag3d-statement {
  --z: 34px;
  max-width: 252px;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
  text-align: center;
}
/* 窄屏堆叠：卡片置顶 */
@media (max-width: 860px) {
  .cb-page #scenarios .tag-scenarios-split { grid-template-columns: 1fr; gap: 30px; }
  .cb-page #scenarios .tag3d-col { min-height: 0; }
}