/* ============================================================
   Orae — 爆款复刻 section
   ============================================================ */
.viral { display: grid; grid-template-columns: 188px 1fr; gap: 28px; align-items: stretch; }

/* left flow: reference reel → 拆解 */
.viral-flow { display: flex; flex-direction: column; gap: 12px; }
.viral-reel {
  position: relative; aspect-ratio: 9/16; border-radius: 14px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.viral-reel.ref { flex: 1; aspect-ratio: auto; min-height: 360px; }
.viral-reel .ph { position: absolute; inset: 0; }
.viral-reel.out { border-color: var(--accent-line); box-shadow: 0 0 0 1.5px var(--accent-line), var(--shadow); }
.vr-grad { position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.15 0.02 60 / 0.12) 0%, transparent 32%, transparent 60%, oklch(0.12 0.02 60 / 0.5) 100%); }
.vr-chip {
  position: absolute; top: 9px; left: 9px; font-family: var(--font-latin); font-size: 10px; font-weight: 600;
  color: #fff; background: oklch(0.14 0.02 60 / 0.6); padding: 4px 9px; border-radius: 100px;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.vr-chip.hot { background: var(--accent); color: var(--accent-ink); }
.vr-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%; background: oklch(1 0 0 / 0.92);
  display: grid; place-items: center; box-shadow: var(--shadow);
}
.vr-stat { position: absolute; left: 10px; bottom: 10px; color: #fff; font-size: 11px; font-weight: 540; white-space: nowrap; text-shadow: 0 1px 6px oklch(0.1 0.02 60 / 0.5); }
.vr-stat .num { font-weight: 680; font-family: var(--font-latin); }
.vr-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.3; text-shadow: 0 1px 6px oklch(0.1 0.02 60 / 0.5); }
.viral-dec { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--accent); font-size: 12px; font-weight: 600; padding: 2px 0; white-space: nowrap; }

/* anatomy card */
.anat { padding: 22px 24px 24px; display: flex; flex-direction: column; }
.anat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.anat-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 660; letter-spacing: -0.01em; color: var(--accent); }
.anat-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.anat-beats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.anat-beat { position: relative; padding: 0 4px 10px; text-align: center; }
.anat-beat::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 1px; height: 8px; background: var(--line-2); }
.ab-time { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 560; }
.ab-name { display: block; font-size: 13.5px; font-weight: 680; letter-spacing: -0.01em; margin-top: 2px; }

/* chart */
.anat-chart { position: relative; display: flex; gap: 10px; height: 140px; flex: none; }
.anat-yaxis { display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0; }
.anat-yaxis span { font-size: 9.5px; color: var(--ink-3); white-space: nowrap; writing-mode: vertical-rl; text-orientation: mixed; }
.anat-svg { flex: 1; height: 140px; overflow: visible; }
.anat-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.anat-line { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.anat-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }

/* storyboard */
.anat-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.ab-cell { display: flex; flex-direction: column; gap: 8px; }
.ab-shot { position: relative; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.ab-shot .ph { position: absolute; inset: 0; }
.ab-idx { position: absolute; top: 5px; left: 5px; width: 17px; height: 17px; border-radius: 5px; background: var(--ink); color: var(--bg); font-size: 9.5px; font-weight: 660; display: grid; place-items: center; }
.ab-line { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; letter-spacing: -0.01em; }

/* footer: replicate to your product */
.anat-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.anat-foot-txt { display: flex; flex-direction: column; gap: 3px; }
.aft-t { font-size: 14.5px; font-weight: 640; letter-spacing: -0.01em; }
.aft-s { font-size: 12.5px; color: var(--ink-3); }
.anat-out { display: flex; align-items: center; gap: 12px; }
.ao-reel { position: relative; width: 44px; aspect-ratio: 9/16; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.ao-reel.hot { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent-line), var(--shadow-sm); }
.ao-reel .ph { position: absolute; inset: 0; }
.ao-chip { position: absolute; left: 0; right: 0; bottom: 0; font-size: 8px; font-weight: 600; text-align: center; color: var(--ink-2); background: var(--surface); padding: 2px 0; border-top: 1px solid var(--line); white-space: nowrap; }
.ao-chip.on { color: var(--accent); }

@media (max-width: 940px) {
  .viral { grid-template-columns: 1fr; gap: 24px; }
  .viral-flow { flex-direction: row; align-items: stretch; }
  .viral-flow .viral-reel { flex: 1; }
  .viral-dec { flex-direction: column; width: 56px; flex: none; }
  .viral-dec svg { transform: none !important; }
}
@media (max-width: 680px) {
  .anat-beats, .anat-board { grid-template-columns: repeat(5, 1fr); }
  .ab-line { display: none; }
  .anat-board .ab-cell { gap: 0; }
}

/* ============================================================
   爆款基因裂变（首页王牌板块）
   ============================================================ */
.vfis { display: grid; grid-template-columns: 184px 108px 1fr; gap: 18px; align-items: center; }
.vfis-ref { display: flex; flex-direction: column; gap: 10px; }
.vfis-ref .viral-reel.ref { min-height: 300px; }
.vfis-ref-cap { font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-align: center; }

.vfis-gene { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 0 4px; }
.vfis-gene-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--accent); background: color-mix(in oklch, var(--accent) 12%, oklch(1 0 0 / 0.5)); border: 1px solid var(--accent-line); }
.vfis-gene-t { font-size: 13px; font-weight: 660; margin-top: 6px; }
.vfis-gene-s { font-size: 11px; color: var(--ink-3); }
.vfis-gene-arrow { color: var(--accent); margin-top: 4px; }

.vfis-out {
  padding: 18px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--accent-line);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--glass-sh);
}
.vfis-out-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 13px; font-weight: 640; color: var(--ink); }
.vfis-out-n { font-family: var(--font-latin); font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 2px 10px; border-radius: 100px; }
.vfis-fan { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.vfis-cell { position: relative; aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.vfis-cell.lead { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent-line); }
.vfis-cell .ph { position: absolute; inset: 0; }
.vfis-cell-grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, oklch(0.1 0.02 60 / 0.62) 100%); }
.vfis-cell-flag { position: absolute; top: 6px; left: 6px; font-size: 13px; filter: drop-shadow(0 1px 2px oklch(0.1 0 0 / 0.4)); }
.vfis-cell-hook { position: absolute; left: 6px; right: 6px; bottom: 6px; font-size: 9.5px; font-weight: 560; color: #fff; line-height: 1.3; text-shadow: 0 1px 4px oklch(0.1 0.02 60 / 0.6); }

.vfis-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.vfis-pillar {
  padding: 26px 26px 24px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-bd2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); backdrop-filter: blur(var(--glass-blur)) saturate(1.4); box-shadow: var(--glass-sh);
}
.vfis-p-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: var(--accent); background: color-mix(in oklch, var(--accent) 12%, oklch(1 0 0 / 0.5)); border: 1px solid var(--accent-line); }
.vfis-p-h { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin-top: 16px; }
.vfis-p-d { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-top: 9px; text-wrap: pretty; }
.vfis-metrics { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.vfis-metric { flex: 1; min-width: 140px; padding: 12px 14px; border-radius: var(--r); background: oklch(1 0 0 / 0.5); border: 1px solid var(--glass-bd2); }
html[data-theme="deep"] .vfis-metric { background: oklch(1 0 0 / 0.05); }
.vfis-metric .k { display: block; font-size: 11.5px; color: var(--ink-3); margin-bottom: 5px; }
.vfis-metric .v { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; color: var(--ink-3); }
.vfis-metric .v b { font-weight: 640; color: var(--ink-2); }
.vfis-metric .v b.hot { color: var(--accent); }
.vfis-metric .v svg { color: var(--accent); }

@media (max-width: 940px) {
  .vfis { grid-template-columns: 1fr; gap: 16px; }
  .vfis-ref .viral-reel.ref { min-height: 240px; }
  .vfis-gene { flex-direction: row; gap: 10px; }
  .vfis-gene-arrow { transform: rotate(90deg); }
  .vfis-pillars { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .vfis-fan { grid-template-columns: repeat(3, 1fr); }
}