/* ===========================================================================
   顶部 3D 计数器 · 方案 A「机械翻牌 · 主色版」（R94）
   由 /assets/js/pageview.js 自动插到 <body> 最顶端。
   横幅底色 = 各站品牌主色（--pv1/--pv2/--pvdeep），翻牌卡为白色 3D 卡。
   三站配色由 .pvbar--xls / .pvbar--hospital / .pvbar--device 决定。
   =========================================================================== */

/* ---------- 各站主色 ---------- */
.pvbar--xls {
  --pv1:#0e7c66; --pv2:#0b6d59; --pvdeep:#06483c;
  --pvink:#0a5c4c; --pvlight:#e6f4f0; --pvring:rgba(14,124,102,.20);
}
.pvbar--hospital {
  --pv1:#b8894a; --pv2:#a87c40; --pvdeep:#75521c;
  --pvink:#8a5f22; --pvlight:#f7efe0; --pvring:rgba(184,137,74,.22);
}
.pvbar--device {
  --pv1:#1f6fb2; --pv2:#1a6099; --pvdeep:#113f68;
  --pvink:#15588e; --pvlight:#e8f1fa; --pvring:rgba(31,111,178,.20);
}

/* ---------- 横幅主体 ---------- */
.pvbar--flap {
  position: relative;
  /* 必须高于站点各类 sticky/fixed 顶栏（xls 移动端预约浮条、header 等），
     否则小屏上横幅会被盖在下面看不见 */
  z-index: 9999;
  overflow: hidden;
  background: linear-gradient(180deg, var(--pv1) 0%, var(--pv2) 58%, var(--pvdeep) 100%);
  border-top: 1px solid rgba(255, 255, 255, .32);
  box-shadow: 0 10px 26px rgba(10, 26, 34, .30),
              inset 0 1px 0 rgba(255, 255, 255, .34),
              inset 0 -1px 0 rgba(0, 0, 0, .18);
}
.pvbar--flap .pvbar__in {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 24px;
}
.pvbar__label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pvbar__t1 {
  font-size: 16px; font-weight: 800; letter-spacing: .8px; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .38); white-space: nowrap;
}
.pvbar__t2 {
  font-size: 11.5px; letter-spacing: .3px;
  color: rgba(255, 255, 255, .84); white-space: nowrap;
}
.pvbar__digits {
  display: flex; align-items: stretch; gap: 7px; margin-left: auto;
}
.pvbar__meta {
  font-size: 11px; font-weight: 800; letter-spacing: 3px;
  color: rgba(255, 255, 255, .78); writing-mode: vertical-rl;
  text-orientation: mixed; align-self: stretch; padding: 6px 0;
}

/* ---------- 翻牌卡 ---------- */
.pvcell {
  position: relative;
  width: 46px; height: 62px;
  perspective: 540px;
  border-radius: 7px;
  background: linear-gradient(180deg, #fff 0%, var(--pvlight) 100%);
  box-shadow: 0 6px 15px rgba(0, 0, 0, .30),
              0 2px 0 rgba(0, 0, 0, .20),
              inset 0 0 0 1px rgba(255, 255, 255, .95),
              inset 0 0 0 2px var(--pvring);
}
.pvcell__a,
.pvcell__b,
.pvcell__n {
  position: absolute; left: 0; width: 100%; height: 50%;
  overflow: hidden; backface-visibility: hidden; transform-style: preserve-3d;
  font-family: "DIN Alternate", "Bahnschrift", Consolas, "Courier New", monospace;
  font-size: 40px; font-weight: 800; line-height: 62px; text-align: center;
  color: var(--pvink);
}
.pvcell__a { top: 0; border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.pvcell__b { bottom: 0; line-height: 0; border-radius: 0 0 7px 7px;
  background: linear-gradient(180deg, #eef1f5 0%, var(--pvlight) 100%); }
.pvcell__b:after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(0, 0, 0, .38);
}
.pvcell__n {
  top: 0; height: 100%; line-height: 62px; border-radius: 7px;
  background: transparent; transform: rotateX(0);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
}
.pvcell__sep {
  width: 10px; line-height: 62px; text-align: center;
  font-size: 26px; font-weight: 800; color: rgba(255, 255, 255, .72);
}

/* ---------- 翻页动画（0.34s） ---------- */
.flip .pvcell__a { animation: pvfa .34s ease-in forwards; }
.flip .pvcell__n { animation: pvfn .34s ease-in forwards; }
@keyframes pvfa { to { transform: rotateX(-90deg); } }
@keyframes pvfn { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }

/* ---------- 主色高光扫过（3D 金属感） ---------- */
.pvbar--flap .pvbar__in:after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 26%,
              rgba(255, 255, 255, .18) 46%, transparent 64%);
}

/* ---------- 无障碍 / 打印 / 小屏 ---------- */
@media print {
  .pvbar--flap { display: none !important; }
}
@media (max-width: 640px) {
  .pvbar--flap .pvbar__in { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .pvbar__t1 { font-size: 14px; }
  .pvbar__t2 { font-size: 10.5px; }
  .pvbar__digits { margin-left: 0; width: 100%; justify-content: flex-start; }
  .pvbar__meta { display: none; }
  .pvcell { width: 38px; height: 52px; }
  .pvcell__a, .pvcell__n { line-height: 52px; font-size: 32px; }
  .pvcell__b { line-height: 0; }
  .pvcell__sep { line-height: 52px; font-size: 22px; }
}