/* ═══════════════════════════════════════════════════════════════════════
   QRCard 投影大屏样式（screen.css）—— /c/{shortId}/d 大屏页专用，独立于 site.css
   ─────────────────────────────────────────────────────────────────────────
   职责边界（docs/v3/01-qrcard-live-screen.md §8.1）：大屏布局（顶栏 / 主舞台 /
   底栏 / 常驻码区 / 控制条）+ 动效（计数弹跳 / +1 脉冲 / 故事入场）+
   body[data-tpl] 模版样式段（模版是纯展示层：只改视觉权重与氛围，不改结构）。
   布局全部由本文件自持（不依赖 Tailwind CDN——会场网络受限时 CDN 挂了页面也不散架，
   Tailwind 仅为引入链与 form.html 同构而保留）。
   基调：深色玻璃（站内既有视觉语言天然适合大屏），字号全面放大（远距离可读）；
   变量驱动：模版段只覆盖 CSS 变量与少量结构参数（列数 / 动效档）。
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 基础变量（generic 缺省值；模版段按 §3.5 视觉特征覆盖） ── */
.sc-root {
  --sc-ink: #fff;                          /* 主文字 */
  --sc-dim: rgba(255, 255, 255, .55);      /* 次文字 */
  --sc-faint: rgba(255, 255, 255, .32);    /* 弱文字 */
  --sc-accent: #8B5CF6;                    /* 品牌紫（与站内 change-ring 同源） */
  --sc-accent-2: #3B74F6;                  /* 渐变副色 */
  --sc-ring: #A78BFA;                      /* 进度环主色 */
  --sc-good: #34D399;                      /* 开放态 */
  --sc-warn: #FBBF24;                      /* 满员 / 候补态 */
  --sc-idle: #94A3B8;                      /* 结束态 */
  --sc-panel: rgba(255, 255, 255, .05);    /* 玻璃面板底 */
  --sc-line: rgba(255, 255, 255, .12);     /* 玻璃描边 */
  --sc-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  /* 动效档（模版可关）：medical 低动效候诊环境，其余常开 */
  --sc-motion: 1;
}

/* ── 画布骨架：三行网格（顶栏 / 舞台 / 底栏），码区与控制条绝对定位 ── */
#screen.sc-root {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 2.2vh 3vw 0;
  box-sizing: border-box;
  overflow: hidden;
  color: var(--sc-ink);
  background:
    radial-gradient(1100px 520px at 50% -80px, rgba(139, 92, 246, .14), transparent 65%),
    radial-gradient(820px 460px at 88% 8%, rgba(62, 116, 246, .07), transparent 70%),
    linear-gradient(180deg, #0A0A0C 0%, #090A0B 55%, #0B0A10 100%);
}
.sc-hide { display: none !important; }

/* ── 顶栏：模版氛围字 + 卡名（大字） + 徽章 / 截止（右缘） ── */
.sc-top {
  display: flex;
  align-items: center;
  gap: 2vw;
  min-height: 9vh;
  border-bottom: 1px solid var(--sc-line);
  padding-bottom: 1.6vh;
}
.sc-mood {
  font-size: clamp(.7rem, 1.1vh, .95rem);
  font-weight: 800;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--sc-accent);
  opacity: .85;
  white-space: nowrap;
}
.sc-name {
  margin: 0;
  font-size: clamp(1.5rem, 4.2vh, 3rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-top-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.2vw;
  flex-shrink: 0;
}
.sc-badge {
  font-size: clamp(.72rem, 1.3vh, 1rem);
  font-weight: 800;
  padding: .5em 1.2em;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.sc-badge-open { color: var(--sc-good); border-color: color-mix(in srgb, var(--sc-good) 45%, transparent); background: color-mix(in srgb, var(--sc-good) 10%, transparent); }
.sc-badge-full, .sc-badge-waitlist { color: var(--sc-warn); border-color: color-mix(in srgb, var(--sc-warn) 45%, transparent); background: color-mix(in srgb, var(--sc-warn) 10%, transparent); }
.sc-badge-closed { color: var(--sc-idle); border-color: color-mix(in srgb, var(--sc-idle) 45%, transparent); background: color-mix(in srgb, var(--sc-idle) 10%, transparent); }
.sc-deadline {
  font-size: clamp(.72rem, 1.3vh, 1rem);
  font-weight: 700;
  color: var(--sc-dim);
  white-space: nowrap;
}

/* ── 主舞台（两种卡型互斥；模版只决定视觉权重，两种舞台都实现） ── */
.sc-stage {
  position: relative;
  min-height: 0;
  padding: 2.5vh 2vw 2vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* form 舞台：巨型进度环 + 巨型数字 + 提交脉冲 */
.sc-stage-form { position: relative; }
.sc-ring {
  position: relative;
  width: min(52vh, 40vw);
  aspect-ratio: 1;
}
.sc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.sc-ring-bg { fill: none; stroke: var(--sc-panel); stroke-width: 8; }
.sc-ring-fg {
  fill: none;
  stroke: var(--sc-ring);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset .8s cubic-bezier(.2, .7, .2, 1);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--sc-ring) 45%, transparent));
}
.sc-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5vh;
}
.sc-count {
  margin: 0;
  font-size: clamp(3.4rem, 13vh, 9rem);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.sc-count-sub {
  margin: 0;
  font-size: clamp(1rem, 2.6vh, 1.9rem);
  font-weight: 800;
  color: var(--sc-dim);
  font-variant-numeric: tabular-nums;
}
.sc-bounce { animation: sc-bounce .55s cubic-bezier(.2, .7, .3, 1); }
@keyframes sc-bounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
/* 「+N」提交脉冲：自舞台中心上方浮起渐隐（不含任何字段值——纯计数增量） */
.sc-pulse {
  position: absolute;
  top: 6%;
  left: 50%;
  margin: 0;
  font-size: clamp(2rem, 6vh, 4.2rem);
  font-weight: 900;
  color: var(--sc-good);
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 4px 24px color-mix(in srgb, var(--sc-good) 55%, transparent);
}
.sc-pulse-on { animation: sc-pulse-up 1.5s ease-out; }
@keyframes sc-pulse-up {
  0% { opacity: 0; transform: translate(-50%, 26px) scale(.8); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(1.18); }
}

/* story 舞台：故事流满屏（列数由 JS 密度自适应写入 --sc-wall-columns，缺省 2） */
.sc-stage-story { width: 100%; height: 100%; min-height: 0; }
.sc-wall {
  height: 100%;
  overflow: hidden;
  display: grid;
  /* A1 老内核降级：不支持在 grid-template-columns 简写里用 var() 时，基线先落 2 列，
     下行带 var 的声明由新内核覆盖——旧投影仪不会因整条失效而塌成单列堆叠 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-columns: repeat(var(--sc-wall-columns, 2), minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 1.4vh 1.2vw;
  align-content: start;
}
.sc-story {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 2vh 1.6vw;
  border-radius: 18px;
  background: var(--sc-panel);
  border: 1px solid var(--sc-line);
  box-shadow: var(--sc-shadow);
  overflow: hidden;
}
.sc-story-text {
  margin: 0;
  flex: 0 1 auto;
  min-height: 0;
  font-size: clamp(1rem, 2.4vh, 1.6rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--sc-ink);
  display: -webkit-box;
  /* 行数上限由 JS 按实测单元高度写入 --sc-clamp（问题3：卡多时截断可见而非整卡被挤出屏外）；
     A1 老内核降级：不支持在 -webkit-line-clamp 里用 var() 时基线先落 4 行，下行新内核覆盖 */
  -webkit-line-clamp: 4;
  -webkit-line-clamp: var(--sc-clamp, 4);
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sc-story-meta {
  margin: 1.1vh 0 0;
  font-size: clamp(.72rem, 1.5vh, 1.05rem);
  font-weight: 700;
  color: var(--sc-faint);
  text-align: right;
}
/* 新故事入场：顶部 slide-in + 边框高亮渐隐（≈4s 上墙节奏） */
.sc-story-new { animation: sc-slide-in .6s cubic-bezier(.2, .7, .3, 1), sc-glow 2.6s ease-out; }
@keyframes sc-slide-in {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: none; }
}
@keyframes sc-glow {
  0%, 45% { border-color: var(--sc-accent); box-shadow: 0 0 26px color-mix(in srgb, var(--sc-accent) 38%, transparent); }
  100% { border-color: var(--sc-line); box-shadow: var(--sc-shadow); }
}
.sc-wall-empty {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  margin: 0;
  font-size: clamp(1rem, 2.4vh, 1.6rem);
  color: var(--sc-faint);
  font-weight: 600;
}
/* 问题 V2：开场 0 提交时“还没有故事”不再缩在左上——空墙唯一子项时整块居中于舞台 */
.sc-wall:has(> .sc-wall-empty:only-child) { align-content: center; }

/* 封存计数态（publicWall=false）：只投影计数，不出任何内容 */
.sc-sealed {
  text-align: center;
  padding: 0 4vw;
}
.sc-sealed-count {
  margin: 0;
  font-size: clamp(2.2rem, 8vh, 6rem);
  font-weight: 900;
  letter-spacing: -.02em;
}
.sc-sealed-tip {
  margin: 1.6vh 0 0;
  font-size: clamp(.85rem, 2vh, 1.3rem);
  color: var(--sc-dim);
  font-weight: 600;
}

/* 胶囊倒计时：开启时刻为舞台中心（wedding / 时间胶囊场景） */
.sc-capsule { text-align: center; padding: 0 4vw; }
.sc-capsule-title {
  margin: 0;
  font-size: clamp(.9rem, 2.2vh, 1.4rem);
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--sc-dim);
  text-transform: uppercase;
}
.sc-capsule-time {
  margin: 1.6vh 0;
  font-size: clamp(3.4rem, 15vh, 10rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.05;
  background: linear-gradient(120deg, var(--sc-accent), var(--sc-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sc-capsule-sub {
  margin: 0;
  font-size: clamp(.85rem, 2vh, 1.3rem);
  color: var(--sc-faint);
  font-weight: 700;
}

/* ── 底栏计数条：已提交 N · 扫码 M · 本场新增 X + 重连提示 ── */
.sc-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2vw;
  min-height: 8vh;
  border-top: 1px solid var(--sc-line);
  padding: 1.4vh 0 2vh;
}
.sc-meta {
  font-size: clamp(.8rem, 1.8vh, 1.2rem);
  font-weight: 700;
  color: var(--sc-dim);
  font-variant-numeric: tabular-nums;
}
.sc-conn {
  font-size: clamp(.75rem, 1.6vh, 1.05rem);
  font-weight: 800;
  color: var(--sc-warn);
  animation: sc-blink 1.1s ease-in-out infinite;
}
@keyframes sc-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* 底栏居中独立提示槽（问题2）：演示数据 / 主持人暂停 / 总线接管等运营态提示——
   绝对居中且 pointer-events:none，不受右侧速率 sparkline 宽度影响而位移 */
.sc-notice {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 62vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(.75rem, 1.6vh, 1.05rem);
  font-weight: 800;
  color: var(--sc-warn);
  pointer-events: none;
}

/* ── 常驻码区（右下）：白底黑码（深色页面上可扫性最优，站内已验证搭配）；
     码内容与印刷码同源（/c/{shortId} 观众路径）——迟到的人扫大屏即可加入 ── */
.sc-qr {
  position: absolute;
  right: 2.4vw;
  bottom: 9vh;
  width: clamp(110px, 13vw, 190px);
  z-index: 3;
  text-align: center;
}
.sc-qr-box {
  aspect-ratio: 1;
  background: #fff;
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
}
.sc-qr-box svg { width: 100%; height: 100%; display: block; fill: #000; }
.sc-qr-cta {
  margin: 1.2vh 0 0;
  font-size: clamp(.8rem, 1.7vh, 1.1rem);
  font-weight: 800;
  color: var(--sc-ink);
}
.sc-qr-tip {
  margin: .4vh 0 0;
  font-size: clamp(.65rem, 1.3vh, .85rem);
  font-weight: 600;
  color: var(--sc-faint);
}

/* ── 控制条（演讲者用）：半透明小字，悬停显形；暂停/全屏/模版 ── */
.sc-ctrl {
  position: absolute;
  left: 50%;
  bottom: 1.4vh;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .8vw;
  opacity: .3;
  transition: opacity .25s;
  z-index: 4;
}
.sc-ctrl:hover, .sc-ctrl:focus-within { opacity: 1; }
.sc-ctrl button, .sc-ctrl select {
  font: inherit;
  font-size: clamp(.68rem, 1.4vh, .85rem);
  font-weight: 700;
  color: var(--sc-dim);
  background: var(--sc-panel);
  border: 1px solid var(--sc-line);
  border-radius: 999px;
  padding: .45em 1.1em;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.sc-ctrl button:hover, .sc-ctrl select:hover { color: var(--sc-ink); border-color: color-mix(in srgb, var(--sc-accent) 55%, transparent); }
.sc-ctrl-on { color: var(--sc-warn) !important; border-color: color-mix(in srgb, var(--sc-warn) 55%, transparent) !important; }

/* ── 演示引导带（P1 2026-10-11，仅 ?demo=1 屏出现）：左下胶囊，看完有下一步——
     做卡（首页 #hero）与模板画廊（trainer 落地页）；不碰右下码区与底中控制条 ── */
.sc-demo-band {
  position: absolute;
  left: 2.4vw;
  bottom: 1.6vh;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: .9vw;
  padding: .9vh 1.4vw;
  border-radius: 999px;
  background: var(--sc-panel);
  border: 1px solid var(--sc-line);
  backdrop-filter: blur(10px);
}
.sc-demo-band-tip {
  font-size: clamp(.72rem, 1.5vh, 1rem);
  font-weight: 800;
  color: var(--sc-dim);
  white-space: nowrap;
}
.sc-demo-band-cta {
  font-size: clamp(.72rem, 1.5vh, 1rem);
  font-weight: 900;
  color: #fff;
  background: linear-gradient(90deg, var(--sc-accent), var(--sc-accent-2));
  border-radius: 999px;
  padding: .5em 1.2em;
  white-space: nowrap;
}
.sc-demo-band-link {
  font-size: clamp(.7rem, 1.4vh, .95rem);
  font-weight: 700;
  color: var(--sc-faint);
  text-decoration: underline;
  text-underline-offset: .3em;
  white-space: nowrap;
}
.sc-demo-band-link:hover { color: var(--sc-ink); }
@media (max-width: 880px) { .sc-demo-band-tip { display: none; } }

/* 先审后上提示胶囊 + 场次环节位置胶囊（顶栏右侧，P2 2026-10-11） */
.sc-review {
  font-size: clamp(.68rem, 1.4vh, .92rem);
  font-weight: 800;
  color: var(--sc-warn);
  border: 1px solid color-mix(in srgb, var(--sc-warn) 45%, transparent);
  background: color-mix(in srgb, var(--sc-warn) 10%, transparent);
  border-radius: 999px;
  padding: .35em 1em;
  white-space: nowrap;
}
.sc-seq-pill {
  font-size: clamp(.68rem, 1.4vh, .92rem);
  font-weight: 900;
  color: var(--sc-dim);
  border: 1px solid var(--sc-line);
  background: var(--sc-panel);
  border-radius: 999px;
  padding: .35em .9em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── 投影比例适配：4:3 老投影（纵横比 <1.4）下三列故事墙收成两列——窄列会挤破字号；
   此适配现已内核到 qrcard-screen.js fitWall（写 --sc-wall-columns）——CSS 不再静态覆盖列数 ── */

/* ── 动效降级：系统偏好 + medical 模版低动效（候诊环境友好） ── */
@media (prefers-reduced-motion: reduce) {
  .sc-root * { animation: none !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   增强层（对标培训师大屏软件，v1 投影体验加固；全部覆盖式挂载，壳零改动）
   ═══════════════════════════════════════════════════════════════════════ */

/* 通用倒计时顶栏：贴顶细进度条 + 大字倒数（?timer=秒 / ?timerEnd=epoch 或 T 键就地起钟时出现） */
.sc-timerbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: .8vh 3vw .6vh;
  pointer-events: none;
}
.sc-timer-track {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--sc-panel);
  overflow: hidden;
}
.sc-timer-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sc-accent), var(--sc-accent-2));
  transition: width 1s linear;
}
.sc-timer-text {
  font-size: clamp(.8rem, 1.8vh, 1.15rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--sc-dim);
  white-space: nowrap;
}

/* 里程碑彩带画布：全屏覆盖、不吃事件、不拦截扫码（pointer-events none） */
.sc-confetti {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* 庆祝角标：档位数字从舞台中心弹起渐隐 */
.sc-cheer {
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 7;
  transform: translate(-50%, -50%);
  font-size: clamp(2.4rem, 9vh, 6rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--sc-good);
  text-shadow: 0 6px 30px color-mix(in srgb, var(--sc-good) 55%, transparent);
  opacity: 0;
  pointer-events: none;
}
.sc-cheer-on { animation: sc-cheer-pop 2.2s cubic-bezier(.2, .7, .3, 1); }
@keyframes sc-cheer-pop {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%, -52%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -78%) scale(1.04); }
}

/* 提交速率 sparkline：底栏右侧迷你柱状（每轮增量），一眼看现场热度 */
.sc-spark {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.sc-spark-lbl {
  font-size: clamp(.7rem, 1.5vh, 1rem);
  font-weight: 800;
  color: var(--sc-faint);
}
.sc-spark-svg { display: block; }
.sc-spark-on rect, .sc-spark-on { fill: var(--sc-good); opacity: .85; }
.sc-spark-off { fill: var(--sc-panel); }

/* 故事聚光（问题 V1）：单击放大——不再靠 scale（放大后正文仍被 clamp 截断、观众读不到全文），
   改为原位抬层 + 解除行数限制（限高可滚），卡背沿用主题 panel 不叠中性遮罩（避开浅底模版反色） */
.sc-story { cursor: zoom-in; transition: box-shadow .3s, opacity .3s; }
.sc-story.sc-focus {
  cursor: zoom-out;
  position: relative;
  z-index: 5;
  border-color: var(--sc-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-accent) 45%, transparent), var(--sc-shadow);
}
.sc-story.sc-focus .sc-story-text { -webkit-line-clamp: unset; max-height: 74vh; overflow: auto; }
.sc-stage-story:has(.sc-focus) .sc-story:not(.sc-focus) { opacity: .28; }

/* 卡面 ⇄ 聚合相轮播：卡面相覆盖层（居中一张放大的二维卡，暖场用） */
.sc-face {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 6vw;
  animation: sc-face-in .6s cubic-bezier(.2, .7, .3, 1);
}
.sc-face-card {
  max-width: min(78vw, 900px);
  width: 100%;
  text-align: center;
  padding: clamp(28px, 6vh, 64px) clamp(24px, 5vw, 60px);
  border-radius: 28px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .12), transparent 60%),
    var(--sc-panel);
  border: 1px solid var(--sc-line);
  box-shadow: var(--sc-shadow);
}
.sc-face-title {
  margin: 0;
  font-size: clamp(1.8rem, 6vh, 3.6rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--sc-ink);
}
.sc-face-note {
  margin: 1.4vh 0 0;
  font-size: clamp(.95rem, 2.4vh, 1.4rem);
  font-weight: 600;
  color: var(--sc-dim);
}
.sc-face-qr { margin: clamp(16px, 3vh, 32px) auto 0; width: clamp(120px, 20vh, 220px); }
.sc-face-qrbox {
  aspect-ratio: 1;
  background: #fff;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.sc-face-qrbox svg { width: 100%; height: 100%; display: block; fill: #000; }
.sc-face-cta {
  margin: 1.6vh 0 0;
  font-size: clamp(1rem, 2.6vh, 1.6rem);
  font-weight: 900;
  color: var(--sc-accent);
}
/* 卡面相主题档（与站内 theme 同名，浅底自动翻文字色） */
.sc-face-theme-paper .sc-face-title, .sc-face-theme-warm .sc-face-title,
.sc-face-theme-mint .sc-face-title, .sc-face-theme-sky .sc-face-title,
.sc-face-theme-sakura .sc-face-title { color: #1a1a1e; }
.sc-face-theme-paper .sc-face-note, .sc-face-theme-warm .sc-face-note,
.sc-face-theme-mint .sc-face-note, .sc-face-theme-sky .sc-face-note,
.sc-face-theme-sakura .sc-face-note { color: rgba(26, 26, 30, .72); }
@keyframes sc-face-in { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
/* 轮播态聚合相让位卡面（右下码在卡面相隐藏，避免两码打架；V1.8 连点击一起摘掉——
     不可见的码区不该能弹放大层） */
#screen.sc-rot-face .sc-qr { opacity: 0; pointer-events: none; }

/* 参与码放大（单击码区 / Q 开合）：全屏居中大白码 + 可念可拍短链，点任意处还原；
     后排手机对不上焦、口头引导「打开地址」的兼容态；z-index 低于 PIN 锁（锁定不放大） */
.sc-qr { cursor: zoom-in; }
.sc-zoom {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 14, .82);
  backdrop-filter: blur(8px);
  cursor: zoom-out;
  animation: sc-face-in .35s cubic-bezier(.2, .7, .3, 1);
}
.sc-zoom-card { display: flex; flex-direction: column; align-items: center; }
.sc-zoom-qr {
  width: min(62vh, 82vw);
  aspect-ratio: 1;
  background: #fff;
  border-radius: 24px;
  padding: clamp(16px, 3vh, 36px);
  box-shadow: var(--sc-shadow);
}
.sc-zoom-qr svg { width: 100%; height: 100%; display: block; fill: #000; }
.sc-zoom-url {
  margin: 2.2vh 0 0;
  font-size: clamp(1.1rem, 3.6vh, 2.3rem);
  font-weight: 900;
  letter-spacing: .01em;
  color: #fff;
  user-select: text;
}
.sc-zoom-tip {
  margin: .8vh 0 0;
  font-size: clamp(.8rem, 1.8vh, 1.1rem);
  font-weight: 600;
  color: rgba(255, 255, 255, .62);
}

/* 落幕屏（V1.9）：卡 closed——大字收场语 + 结束计数居中；复用 var(--sc-*) 令牌，
   十一套模版自动适配零 per-tpl 改动；右下参与码不受影响继续常驻 */
.sc-finale { text-align: center; padding: 0 4vw; }
.sc-finale-title {
  margin: 0;
  font-size: clamp(2rem, 7vh, 4.6rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--sc-ink);
}
.sc-finale-count {
  margin: 2.4vh 0 0;
  font-size: clamp(1.2rem, 3.6vh, 2.4rem);
  font-weight: 900;
  color: var(--sc-accent);
}
.sc-finale-sub {
  margin: 1.2vh 0 0;
  font-size: clamp(.85rem, 2vh, 1.2rem);
  font-weight: 600;
  color: var(--sc-dim);
}

/* PIN 锁解锁浮层 */
.sc-pin {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 8, 14, .72);
  backdrop-filter: blur(10px);
}
.sc-pin-card {
  width: min(90vw, 360px);
  text-align: center;
  padding: 4vh 5vw;
  border-radius: 22px;
  background: var(--sc-panel);
  border: 1px solid var(--sc-line);
  box-shadow: var(--sc-shadow);
}
.sc-pin-title { margin: 0; font-size: clamp(1.1rem, 3vh, 1.7rem); font-weight: 900; color: var(--sc-ink); }
.sc-pin-hint { margin: 1vh 0 2vh; font-size: clamp(.8rem, 1.8vh, 1.05rem); color: var(--sc-dim); }
.sc-pin-input {
  width: 100%;
  font: inherit;
  font-size: clamp(1.1rem, 3vh, 1.5rem);
  text-align: center;
  letter-spacing: .3em;
  color: var(--sc-ink);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--sc-line);
  border-radius: 12px;
  padding: .6em .8em;
}
.sc-pin-input:focus { outline: none; border-color: var(--sc-accent); }
.sc-pin-msg { margin: 1vh 0 0; min-height: 1.2em; font-size: .9rem; font-weight: 700; color: var(--sc-warn); }
.sc-pin-btn {
  margin-top: 2vh;
  font: inherit; font-weight: 800;
  color: #0b0b10;
  background: var(--sc-accent);
  border: 0; border-radius: 999px;
  padding: .6em 1.6em;
  cursor: pointer;
}

/* 键盘 H：隐藏控制条（纯净投影，演讲者需要时再 H 唤回） */
.sc-ctrl-hidden { opacity: 0 !important; pointer-events: none; }

/* ═════════════════════════════════════════════════════════════════════
   模版样式段（body[data-tpl]）——只改视觉权重与氛围，数据语义 / 结构 / JS 全同
   ═════════════════════════════════════════════════════════════════════ */

/* 2. meeting 会议：庄重深蓝，进度环视觉中心，超大计数 */
body[data-tpl=meeting] #screen.sc-root {
  --sc-accent: #E8B84B;
  --sc-accent-2: #F59E0B;
  --sc-ring: #E8B84B;
  --sc-good: #7DD3FC;
  --sc-panel: rgba(148, 178, 255, .06);
  --sc-line: rgba(148, 178, 255, .16);
  background:
    radial-gradient(1100px 520px at 50% -80px, rgba(59, 130, 246, .18), transparent 65%),
    linear-gradient(180deg, #0A1428 0%, #081020 55%, #0A1226 100%);
}
body[data-tpl=meeting] .sc-ring { width: min(58vh, 44vw); }   /* 进度环视觉中心：比缺省更大 */

/* 4. workshop 工作坊：暖色共创，故事流满屏瀑布（三列小卡） */
body[data-tpl=workshop] #screen.sc-root {
  --sc-accent: #F59E0B;
  --sc-accent-2: #FB7185;
  --sc-ring: #FBBF24;
  --sc-good: #A3E635;
  background:
    radial-gradient(1100px 520px at 50% -80px, rgba(245, 158, 11, .16), transparent 65%),
    radial-gradient(820px 460px at 10% 90%, rgba(251, 113, 133, .08), transparent 70%),
    linear-gradient(180deg, #16100A 0%, #120C07 55%, #150E08 100%);
}
body[data-tpl=workshop] .sc-wall { gap: 1.2vh 1vw; }

/* 5. medical 医疗：低饱和柔色浅底、大字、低动效（候诊环境友好） */
body[data-tpl=medical] #screen.sc-root {
  --sc-ink: #23343B;
  --sc-dim: rgba(35, 52, 59, .6);
  --sc-faint: rgba(35, 52, 59, .42);
  --sc-accent: #0D9488;
  --sc-accent-2: #0891B2;
  --sc-ring: #14B8A6;
  --sc-good: #059669;
  --sc-warn: #B45309;
  --sc-idle: #64748B;
  --sc-panel: rgba(13, 148, 136, .06);
  --sc-line: rgba(13, 148, 136, .18);
  --sc-shadow: 0 8px 28px rgba(35, 52, 59, .12);
  background:
    radial-gradient(900px 460px at 50% -60px, rgba(20, 184, 166, .1), transparent 60%),
    linear-gradient(180deg, #F3F8F6 0%, #EEF5F2 60%, #EAF3F0 100%);
}
/* 浅底覆盖：site.css 的深色 body 底与白字兜底在此翻面；星空在浅底候诊环境关掉 */
body[data-tpl=medical] { background: #F3F8F6; color: #23343B; }
body[data-tpl=medical] #starfield { display: none; }
body[data-tpl=medical] .sc-qr-cta { color: #23343B; }
/* 低动效档：入场只淡入不位移，计数不弹跳（候诊环境不扰人） */
body[data-tpl=medical] .sc-story-new { animation: sc-glow 2.6s ease-out; }
body[data-tpl=medical] .sc-bounce { animation: none; }

/* 11. award 颁奖：奖状金红——故事流即奖状墙（衬线大字署名，金边奖章装饰） */
body[data-tpl=award] #screen.sc-root {
  --sc-accent: #E8B84B;
  --sc-accent-2: #F43F5E;
  --sc-ring: #E8B84B;
  --sc-good: #FBBF24;
  --sc-panel: rgba(232, 184, 75, .05);
  --sc-line: rgba(232, 184, 75, .28);
  background:
    radial-gradient(1100px 520px at 50% -80px, rgba(232, 184, 75, .18), transparent 65%),
    radial-gradient(820px 460px at 88% 96%, rgba(244, 63, 94, .1), transparent 70%),
    linear-gradient(180deg, #170D0D 0%, #140A0A 55%, #190E0B 100%);
}
body[data-tpl=award] .sc-mood { color: #F43F5E; }
body[data-tpl=award] .sc-wall { gap: 1.4vh 1vw; }
/* 每条故事 = 一张奖状：金边、衬线、奖章徽记，署名大字居中（获奖者名字是舞台主角） */
body[data-tpl=award] .sc-story {
  position: relative;
  text-align: center;
  border: 2px solid rgba(232, 184, 75, .55);
  border-radius: 6px;
  background:
    linear-gradient(160deg, rgba(232, 184, 75, .1), rgba(232, 184, 75, .03) 40%),
    rgba(20, 10, 10, .55);
  padding: 3.2vh 1.4vw 2vh;
}
body[data-tpl=award] .sc-story::before {
  content: '★';
  display: block;
  font-size: clamp(1.2rem, 3vh, 2.2rem);
  color: #E8B84B;
  text-shadow: 0 2px 14px rgba(232, 184, 75, .6);
  margin-bottom: 1vh;
}
body[data-tpl=award] .sc-story-text {
  font-family: 'Songti SC', 'Noto Serif SC', 'Times New Roman', serif;
}
body[data-tpl=award] .sc-story-meta {
  text-align: center;
  font-size: clamp(.95rem, 2.2vh, 1.5rem);
  font-weight: 900;
  color: #E8B84B;
  letter-spacing: .04em;
}
@keyframes sc-glow-award {
  0%, 45% { border-color: #F43F5E; box-shadow: 0 0 30px rgba(244, 63, 94, .4); }
  100% { border-color: rgba(232, 184, 75, .55); }
}
body[data-tpl=award] .sc-story-new { animation: sc-slide-in .6s cubic-bezier(.2, .7, .3, 1), sc-glow-award 2.6s ease-out; }

/* 3. training 培训：蓝灰冷静，双栏观感由三列故事墙 + 居中大环承担 */
body[data-tpl=training] #screen.sc-root {
  --sc-accent: #7DD3FC;
  --sc-accent-2: #60A5FA;
  --sc-ring: #60A5FA;
  --sc-good: #34D399;
  --sc-panel: rgba(148, 178, 255, .06);
  --sc-line: rgba(148, 178, 255, .16);
  background:
    radial-gradient(1100px 520px at 50% -80px, rgba(56, 189, 248, .14), transparent 65%),
    linear-gradient(180deg, #0E1A2B 0%, #0B1522 55%, #0E1A28 100%);
}
body[data-tpl=training] .sc-wall { gap: 1.2vh 1vw; }

/* 6. wedding 婚礼：暖金喜庆，故事流双列大字（衬线），胶囊倒计时为舞台中心 */
body[data-tpl=wedding] #screen.sc-root {
  --sc-accent: #E8B84B;
  --sc-accent-2: #F472B6;
  --sc-ring: #E8B84B;
  --sc-good: #FBBF24;
  --sc-panel: rgba(244, 114, 182, .07);
  --sc-line: rgba(232, 184, 75, .24);
  background:
    radial-gradient(1100px 520px at 50% -80px, rgba(244, 114, 182, .16), transparent 65%),
    radial-gradient(820px 460px at 10% 92%, rgba(232, 184, 75, .1), transparent 70%),
    linear-gradient(180deg, #241018 0%, #1C0C14 55%, #221018 100%);
}
body[data-tpl=wedding] .sc-story-text {
  font-family: 'Songti SC', 'Noto Serif SC', 'Times New Roman', serif;
  font-size: clamp(1.1rem, 2.8vh, 1.9rem);
}

/* 7. classroom 课堂：高对比活泼，进度环更大、徽章化计数 */
body[data-tpl=classroom] #screen.sc-root {
  --sc-accent: #F59E0B;
  --sc-accent-2: #38BDF8;
  --sc-ring: #F59E0B;
  --sc-good: #22C55E;
  --sc-warn: #F97316;
  background:
    radial-gradient(1100px 520px at 50% -80px, rgba(56, 189, 248, .16), transparent 65%),
    linear-gradient(180deg, #0F172A 0%, #0C1424 55%, #101828 100%);
}
body[data-tpl=classroom] .sc-ring { width: min(60vh, 46vw); }

/* 8. party 派对：高饱和渐变、强动效，三列故事瀑布满屏 */
body[data-tpl=party] #screen.sc-root {
  --sc-accent: #A855F7;
  --sc-accent-2: #EC4899;
  --sc-ring: #C084FC;
  --sc-good: #22D3EE;
  background:
    radial-gradient(1100px 560px at 30% -80px, rgba(168, 85, 247, .22), transparent 65%),
    radial-gradient(820px 460px at 92% 96%, rgba(236, 72, 153, .18), transparent 70%),
    linear-gradient(180deg, #160A1E 0%, #12081A 55%, #1A0B22 100%);
}
body[data-tpl=party] .sc-wall { gap: 1.2vh 1vw; }
body[data-tpl=party] .sc-ring-fg { animation: sc-party-throb 2.4s ease-in-out infinite; }
@keyframes sc-party-throb {
  0%, 100% { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--sc-ring) 45%, transparent)); }
  50% { filter: drop-shadow(0 0 32px color-mix(in srgb, var(--sc-accent-2) 60%, transparent)); }
}

/* 9. nonprofit 公益：温暖感召绿，两列大字计数 */
body[data-tpl=nonprofit] #screen.sc-root {
  --sc-accent: #34D399;
  --sc-accent-2: #10B981;
  --sc-ring: #34D399;
  --sc-good: #A3E635;
  --sc-panel: rgba(52, 211, 153, .07);
  --sc-line: rgba(52, 211, 153, .2);
  background:
    radial-gradient(1100px 520px at 50% -80px, rgba(16, 185, 129, .16), transparent 65%),
    linear-gradient(180deg, #0E1A14 0%, #0B1610 55%, #0E1C14 100%);
}

/* 10. community 社区：安静文艺、衬线标题、纸感浅底（浅底翻面同 medical） */
body[data-tpl=community] #screen.sc-root {
  --sc-ink: #2A2622;
  --sc-dim: rgba(42, 38, 34, .62);
  --sc-faint: rgba(42, 38, 34, .44);
  --sc-accent: #B45309;
  --sc-accent-2: #8A5A2B;
  --sc-ring: #B45309;
  --sc-good: #4D7C0F;
  --sc-warn: #B45309;                    /* 浅底上琥珀提示胶囊/居中提示需深色才可读 */
  --sc-panel: rgba(180, 83, 9, .06);
  --sc-line: rgba(122, 92, 58, .22);
  --sc-shadow: 0 8px 28px rgba(42, 38, 34, .12);
  background:
    radial-gradient(900px 460px at 50% -60px, rgba(180, 83, 9, .08), transparent 60%),
    linear-gradient(180deg, #F4EFE6 0%, #EFE7DA 60%, #ECE3D6 100%);
}
body[data-tpl=community] { background: #F4EFE6; color: #2A2622; }
body[data-tpl=community] #starfield { display: none; }
body[data-tpl=community] .sc-qr-cta { color: #2A2622; }
body[data-tpl=community] .sc-name { font-family: 'Songti SC', 'Noto Serif SC', Georgia, serif; }
body[data-tpl=community] .sc-story {
  font-family: 'Songti SC', 'Noto Serif SC', Georgia, serif;
  background: rgba(255, 255, 255, .6);
}

/* ═══════════════════════════════════════════════════════════════════
   场景背景装饰层（问题4：拉大 11 套场景的视觉差异）
   ────────────────────────────────────────────────
   每个 body[data-tpl] 在 #screen 背层（::before，位于渐变之上、内容之下）叠一层内联
   data-URI SVG 平铺图案。零外链、零新文件、壳 HTML 零改动（维持「屏壳零外链」纪律）；
   浅底模版（medical/community）用深色描边保证对比；::before z-index:0 自然位于网格内容之下，
   不参与交互（pointer-events:none），prefers-reduced-motion 无需特殊处理（本层无动画）。
   ═══════════════════════════════════════════════════════════════════ */
#screen.sc-root::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;   /* 落在 #screen（position:fixed 自成层叠上下文）自身渐变之上、内容之下；
                   不用 z:0 + 给 .sc-stage 抬 z-index:1——那会把 .sc-stage 变成层叠上下文，
                   使聚光的 .sc-focus(z:5) 被困在 stage(z:1) 内、反而低于右下参与码(z:3)/控制条(z:4) */
  pointer-events: none;
  background-repeat: repeat;
  background-position: center;
}

body[data-tpl=generic] #screen.sc-root::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 40L40 0 M-10 10L10 -10 M30 50L50 30' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
}
body[data-tpl=meeting] #screen.sc-root::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 0H60 M0 0V60' stroke='%23E8B84B' stroke-opacity='.10' stroke-width='1'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%23E8B84B' fill-opacity='.10'/%3E%3C/svg%3E");
}
body[data-tpl=training] #screen.sc-root::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg stroke='%237DD3FC' stroke-opacity='.12' stroke-width='1'%3E%3Cpath d='M20 20L60 20M60 20L60 60M60 60L20 60M20 60L20 20'/%3E%3C/g%3E%3Cg fill='%237DD3FC' fill-opacity='.20'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='60' cy='20' r='3'/%3E%3Ccircle cx='60' cy='60' r='3'/%3E%3Ccircle cx='20' cy='60' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-tpl=workshop] #screen.sc-root::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg transform='rotate(-8 45 45)'%3E%3Crect x='14' y='14' width='24' height='24' rx='3' fill='%23FBBF24' fill-opacity='.10'/%3E%3Crect x='52' y='22' width='24' height='24' rx='3' fill='%23FB7185' fill-opacity='.10'/%3E%3Crect x='30' y='54' width='24' height='24' rx='3' fill='%23A3E635' fill-opacity='.08'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-tpl=medical] #screen.sc-root::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg stroke='%230D9488' stroke-opacity='.14' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 12V28M12 20H28'/%3E%3C/g%3E%3Cg stroke='%230891B2' stroke-opacity='.12' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M48 40V52M42 46H54'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-tpl=wedding] #screen.sc-root::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cg fill='%23F472B6' fill-opacity='.12'%3E%3Cellipse cx='24' cy='30' rx='6' ry='10' transform='rotate(30 24 30)'/%3E%3Cellipse cx='70' cy='60' rx='6' ry='10' transform='rotate(-20 70 60)'/%3E%3C/g%3E%3Cg fill='%23E8B84B' fill-opacity='.12'%3E%3Cellipse cx='52' cy='18' rx='5' ry='9' transform='rotate(-40 52 18)'/%3E%3Cellipse cx='16' cy='76' rx='5' ry='9' transform='rotate(20 16 76)'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-tpl=classroom] #screen.sc-root::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 48L48 0' stroke='%23F59E0B' stroke-opacity='.08' stroke-width='2'/%3E%3Cpath d='M24 48L48 24' stroke='%2338BDF8' stroke-opacity='.06' stroke-width='2'/%3E%3C/svg%3E");
}
body[data-tpl=party] #screen.sc-root::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg stroke='%23EC4899' stroke-opacity='.12' stroke-width='2'%3E%3Cpath d='M40 12V68M12 40H68M22 22L58 58M58 22L22 58'/%3E%3C/g%3E%3Ccircle cx='40' cy='40' r='3' fill='%23A855F7' fill-opacity='.18'/%3E%3C/svg%3E");
}
body[data-tpl=nonprofit] #screen.sc-root::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg fill='%2334D399' fill-opacity='.10'%3E%3Cpath d='M20 56Q20 28 48 24Q44 52 20 56Z'/%3E%3C/g%3E%3Cg fill='%23A3E635' fill-opacity='.08'%3E%3Cpath d='M48 64Q72 60 72 36Q52 40 48 64Z'/%3E%3C/g%3E%3C/svg%3E");
}
body[data-tpl=community] #screen.sc-root::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40'%3E%3Cpath d='M0 20Q15 6 30 20T60 20T90 20' fill='none' stroke='%238A5A2B' stroke-opacity='.10' stroke-width='2'/%3E%3C/svg%3E");
}
body[data-tpl=award] #screen.sc-root::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='%23E8B84B' fill-opacity='.12'%3E%3Cpath d='M24 8l4 10 11 1-8 8 3 11-10-6-10 6 3-11-8-8 11-1z'/%3E%3C/g%3E%3Cg fill='%23F43F5E' fill-opacity='.10'%3E%3Cpath d='M68 52l3 8 9 1-6 6 2 9-8-5-8 5 2-9-6-6 9-1z'/%3E%3C/g%3E%3C/svg%3E");
}