/* 分镜台 / 直播页共用：PPT 画面 + 圆头像 pip */
.main-pane { position: absolute; inset: 0; }
.face-full, .vis-full {
  width: 100%; height: 100%;
  border-radius: 12px;
}
.face-full {
  position: relative;
  overflow: hidden;
  background: #000;
  border: 1.5px solid rgba(45,212,191,.35);
}
.vis-full {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 20% 0%, rgba(251,191,36,.08), transparent 40%),
    radial-gradient(circle at 100% 80%, rgba(56,189,248,.1), transparent 45%),
    rgba(15,23,42,.92);
  border: 1px solid rgba(148,163,184,.28);
  flex-direction: column; gap: 5px; padding: 8px; text-align: center;
  overflow: hidden;
}
.talk-crop {
  position: absolute; inset: 0;
  overflow: hidden; background: #000;
  border-radius: inherit;
}
.talk-crop video {
  width: 100%; height: 100%;
  display: block; background: #000;
  object-fit: cover;
  object-position: center;
  transform: scaleX(-1);
}
.vis-full .kind { font-size: 8px; color: #64748b; letter-spacing: .08em; text-transform: uppercase; }
.vis-full .lab { font-size: 12px; font-weight: 700; color: #e2e8f0; }
.vis-full .big { font-size: 26px; font-weight: 900; color: #38bdf8; word-break: break-all; }
.vis-render { width:100%; height:100%; display:flex; flex-direction:column; gap:6px; text-align:left; overflow:hidden; }
.vis-render .vr-title { font-size:9px; color:#64748b; letter-spacing:.06em; text-transform:uppercase; }
.vis-render .vr-big { font-size:22px; font-weight:900; color:#38bdf8; line-height:1.1; word-break:break-all; }
.vis-render img.vr-img, .vis-render video.vr-img { width:100%; height:100%; object-fit:cover; border-radius:8px; background:#0b1220; }
.vis-render.vis-html { position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0; }
.vis-render iframe.vr-html {
  display:block; width:100%; height:100%; border:0; background:#080d16;
}
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes flowIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none;} }
.vr-bars { display:flex; flex-direction:column; gap:8px; flex:1; justify-content:center; }
.vr-bar-row { display:flex; flex-direction:column; gap:3px; }
.vr-bar-row span { font-size:9px; color:#94a3b8; }
.vr-bar-track { height:14px; border-radius:7px; background:#1e293b; overflow:hidden; }
.vr-bar-fill { height:100%; border-radius:7px; transform-origin:left center; animation: barGrow .55s ease-out both; }
.vr-bar-fill.hi { background:#ef4444; }
.vr-bar-fill.lo { background:#38bdf8; }
.vr-cards { display:flex; flex-direction:column; gap:7px; flex:1; justify-content:center; position:relative; }
.vr-cards.recipe-duel { flex-direction:row; align-items:stretch; gap:0; }
.vr-cards.recipe-punch { justify-content:center; align-items:stretch; }
.vr-cards.recipe-term { gap:5px; justify-content:center; }
.vr-vs {
  align-self:center; flex:0 0 auto; width:18px; height:18px; margin:0 2px;
  border-radius:50%; font-size:7px; font-weight:800; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center;
  color:#94a3b8; background:rgba(15,23,42,.7); border:1px solid rgba(148,163,184,.35);
  backdrop-filter: blur(8px); z-index:2;
}
.vr-card {
  --card-alpha: .58;
  --card-accent: rgba(148,163,184,.55);
  --card-glow: rgba(148,163,184,.12);
  flex:1; position:relative; overflow:hidden; min-width:0;
  border-radius:10px; padding:8px 9px 8px 11px;
  background: rgba(15, 23, 42, var(--card-alpha));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 28px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  animation: flowIn .4s ease both;
}
.vr-card::before {
  content:""; position:absolute; left:0; top:10%; bottom:10%; width:2px;
  border-radius:2px; background: var(--card-accent);
  box-shadow: 0 0 10px var(--card-glow);
}
.vr-card::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 42%);
}
.vr-card.solid {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: rgba(11, 18, 32, calc(var(--card-alpha) + .25));
}
.vr-card.outline {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; border-color: var(--card-accent);
}
.vr-card .kicker {
  font-size:7.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(148,163,184,.95); margin-bottom:3px;
}
.vr-card .metric {
  font-size:18px; font-weight:900; line-height:1; letter-spacing:-.02em;
  color:#f8fafc; margin:2px 0 3px; text-shadow:0 0 16px var(--card-glow);
}
.vr-card .title-main { font-size:11px; font-weight:800; color:#e2e8f0; line-height:1.25; }
.vr-card .body-sub { font-size:8.5px; color:#94a3b8; margin-top:3px; line-height:1.3; }
.vr-card .idx {
  position:absolute; top:6px; right:7px; font-size:7px; font-weight:800;
  letter-spacing:.08em; color:rgba(148,163,184,.55);
}
.vr-card.recipe-duel { text-align:center; padding:12px 8px 14px; min-height:72px; }
.vr-card.recipe-duel::before { left:18%; right:18%; top:0; bottom:auto; width:auto; height:2px; }
.vr-card.recipe-duel .kicker { margin-bottom:8px; opacity:.95; }
.vr-card.recipe-duel .title-main { font-size:13px; font-weight:800; }
.vr-cards.recipe-duel .vr-vs {
  width:22px; height:22px; font-size:8px; color:#e2e8f0;
  border-color: rgba(56,189,248,.45); background: rgba(15,23,42,.85);
  box-shadow: 0 0 12px rgba(56,189,248,.25);
}
.stage:has(.recipe-duel) .pip { width: 20%; opacity: .92; }
.stage:has(.recipe-duel) .pip.br { bottom: 8px; right: 6px; }
.stage:has(.recipe-duel) .pip.bl { bottom: 8px; left: 6px; }
.vr-card.recipe-punch { text-align:center; padding:12px 10px 10px; border-radius:12px; }
.vr-card.recipe-punch::before { display:none; }
.vr-card.recipe-punch .kicker { margin-bottom:6px; opacity:.9; }
.vr-card.recipe-punch .metric {
  font-size:28px; margin:4px 0 6px; letter-spacing:-.03em;
  text-shadow: 0 0 22px var(--card-glow);
}
.vr-card.recipe-punch .title-main { font-size:10px; font-weight:700; color:#cbd5e1; }
.vr-card.recipe-punch .body-sub { font-size:8px; }
.vr-card.recipe-term {
  display:flex; flex-direction:column; justify-content:center;
  padding:7px 28px 7px 12px; border-radius:8px;
}
.vr-card.recipe-term .kicker { margin-bottom:2px; font-size:7px; }
.vr-card.recipe-term .title-main { font-size:11px; }
.vr-card.recipe-term .metric { font-size:14px; margin:0 0 2px; }
.vr-card.accent { --card-accent:#2dd4bf; --card-glow:rgba(45,212,191,.4); }
.vr-card.accent .metric, .vr-card.accent .title-main { color:#5eead4; }
.vr-card.danger { --card-accent:#fb7185; --card-glow:rgba(251,113,133,.35); }
.vr-card.danger .metric, .vr-card.danger .title-main { color:#fda4af; }
.vr-card.ok { --card-accent:#a3e635; --card-glow:rgba(163,230,53,.3); }
.vr-card.ok .metric, .vr-card.ok .title-main { color:#d9f99d; }
.vr-card:not(.accent):not(.danger):not(.ok) {
  --card-accent: rgba(251,191,36,.7);
  --card-glow: rgba(251,191,36,.18);
}
.vr-card .kicker { color: rgba(253,230,138,.9); }
.vr-card.emphasis {
  border-color: color-mix(in srgb, var(--card-accent) 55%, rgba(255,255,255,.2));
  box-shadow:
    0 12px 32px rgba(0,0,0,.42),
    0 0 0 1px color-mix(in srgb, var(--card-accent) 35%, transparent),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.vr-flow { display:flex; flex-wrap:wrap; gap:4px; align-items:center; justify-content:center; flex:1; }
.vr-flow .step {
  font-size:10px; font-weight:700; padding:5px 7px; border-radius:7px;
  color:#e2e8f0; position:relative;
  background: rgba(15,23,42,.55);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  animation: flowIn .35s ease both;
}
.vr-flow .step.strike::after {
  content:""; position:absolute; left:10%; right:10%; top:50%; height:2px; background:#ef4444; transform:rotate(-12deg);
}
.vr-flow .arrow { color:#64748b; font-size:10px; }
.vr-motion {
  flex:1; display:flex; align-items:center; justify-content:center;
  position:relative; min-height:78px; width:100%;
}
.vr-motion[data-preset="occupy"] .blob {
  width:42%; aspect-ratio:1; border-radius:42% 58% 55% 45% / 48% 42% 58% 52%;
  background: radial-gradient(circle at 35% 30%, #7dd3fc, #0284c7 55%, #0369a1);
  animation: blobGrow 2.4s ease-in-out infinite alternate;
  box-shadow: 0 0 28px rgba(14,165,233,.45);
}
@keyframes blobGrow {
  from { transform: scale(.55) rotate(-8deg); opacity:.75; }
  to { transform: scale(1.15) rotate(10deg); opacity:1; }
}
.vr-motion[data-preset="pulse"] { flex-direction:column; gap:2px; }
.vr-motion[data-preset="pulse"] .pulse-core {
  width:22px; height:22px; border-radius:50%;
  background:#f472b6;
  box-shadow: 0 0 18px rgba(244,114,182,.65);
  animation: numBeat .9s ease-in-out infinite;
  z-index:1;
}
.vr-motion[data-preset="pulse"] .pulse-ring {
  position:absolute; width:64px; height:64px; border-radius:50%;
  border:2px solid rgba(244,114,182,.7);
  animation: ringBeat .9s ease-out infinite;
}
@keyframes numBeat {
  0%,100% { transform: scale(1); }
  40% { transform: scale(1.12); }
  55% { transform: scale(.96); }
}
@keyframes ringBeat {
  0% { transform: scale(.55); opacity:.9; }
  100% { transform: scale(1.85); opacity:0; }
}
.vr-motion[data-preset="stack"] {
  flex-direction:column; gap:5px; padding:0 12%; align-items:stretch;
}
.vr-motion[data-preset="stack"] .bar {
  height:11px; border-radius:6px;
  background: linear-gradient(90deg,#38bdf8,#818cf8);
  transform-origin:left center;
  animation: barGrow .55s ease both;
}
.vr-motion[data-preset="drain"] .tank {
  width:34%; max-width:72px; height:86px; border-radius:10px;
  border:2px solid rgba(248,113,113,.65);
  background: rgba(15,23,42,.6);
  overflow:hidden; position:relative;
}
.vr-motion[data-preset="drain"] .liquid {
  position:absolute; left:0; right:0; bottom:0; height:78%;
  background: linear-gradient(180deg,#f87171,#b91c1c);
  animation: liquidDrain 2.2s ease-in-out infinite;
}
.vr-motion[data-preset="drain"] .tank::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);
}
@keyframes liquidDrain {
  0%,15% { height:82%; }
  70%,100% { height:12%; }
}
.vr-motion[data-preset="sweep"] .rail {
  width:88%; height:14px; border-radius:8px;
  background: #1e293b; overflow:hidden; position:relative;
  box-shadow: inset 0 0 0 1px #334155;
}
.vr-motion[data-preset="sweep"] .beam {
  position:absolute; top:0; bottom:0; width:28%;
  background: linear-gradient(90deg,transparent,#2dd4bf,transparent);
  animation: beamSweep 1.4s linear infinite;
}
.vr-motion[data-preset="sweep"] .ticks {
  position:absolute; inset:0; display:flex; justify-content:space-between; padding:0 4px;
  pointer-events:none;
}
.vr-motion[data-preset="sweep"] .ticks span {
  width:2px; height:100%; background:rgba(45,212,191,.25);
}
@keyframes beamSweep {
  from { left: -30%; }
  to { left: 100%; }
}
.vr-motion[data-preset="ripple"] { min-height:88px; }
.vr-motion[data-preset="ripple"] .rip {
  position:absolute; width:22px; height:22px; border-radius:50%;
  border:2px solid rgba(167,139,250,.9);
  animation: rippleOut 1.8s ease-out infinite;
}
.vr-motion[data-preset="ripple"] .rip-core {
  width:12px; height:12px; border-radius:50%;
  background:#a78bfa; box-shadow:0 0 14px rgba(167,139,250,.8);
  z-index:1;
}
@keyframes rippleOut {
  0% { transform: scale(.4); opacity:1; }
  100% { transform: scale(4.2); opacity:0; }
}
.vr-table { width:100%; border-collapse:collapse; font-size:9px; }
.vr-table th, .vr-table td { border:1px solid #334155; padding:4px 5px; color:#cbd5e1; }
.vr-table th { background:rgba(30,41,59,.7); color:#94a3b8; font-weight:600; }

.pip {
  position: absolute; z-index: 7; width: 28%; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(253,230,138,.95);
  box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 0 1px rgba(45,212,191,.35);
  background: #000;
}
.pip.tl { top: 14px; left: 12px; }
.pip.tr { top: 14px; right: 12px; }
.pip.bl { bottom: 56px; left: 12px; }
.pip.br { bottom: 56px; right: 12px; }
.pip.safe { width: 22%; }
.stage:has(.recipe-duel) .pip { width: 22%; }

.live-caption {
  position: absolute; left: 8%; right: 8%; bottom: 4.5%; z-index: 9;
  text-align: center; pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
  font-size: clamp(14px, 3.2vw, 22px); font-weight: 800; color: #fff; line-height: 1.35;
}
.live-caption .key {
  font-weight: 900; color: #fffef5;
  text-shadow: 0 0 8px rgba(56,189,248,.5), 1px 1px 0 #0284c7;
}
.punchline {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
}
.punchline span {
  max-width: 88%; text-align: center;
  font-size: clamp(22px, 6vw, 40px); font-weight: 900; line-height: 1.1;
  color: #fffef5; letter-spacing: -.02em;
  text-shadow: 0 0 16px rgba(56,189,248,.55), 0 2px 0 #0284c7, 0 6px 18px rgba(0,0,0,.55);
}
.vis-full.pad-safe-bl { padding-bottom: 26%; padding-left: 4%; }
.vis-full.pad-safe-br { padding-bottom: 26%; padding-right: 4%; }
.vis-full.pad-safe-tl { padding-top: 22%; padding-left: 4%; }
.vis-full.pad-safe-tr { padding-top: 22%; padding-right: 4%; }