:root {
  --ink: #141223;
  --text: #3c3950;
  --mute: #78748c;
  --line: #e4e2ee;
  --paper: #f7f6fb;
  --white: #ffffff;
  --pri: #5b3df0;
  --pri-deep: #432bd0;
  --accent: #ffc44d;
  --soft: #eeebff;
  --soft-2: #fff5df;
}

/* 暗色皮肤库台：横屏资源面板 + 居中阔屏 + 底部标签条 */
.hv-arena .hero { padding: 44px 0 36px; }
.hv-arena .hero-grid { grid-template-columns: 0.96fr 1.04fr; gap: 40px; }
.hv-arena .hero::before { right: -6%; top: -16%; width: 64%; height: 126%;
  background: radial-gradient(circle at 44% 38%, rgba(91,61,240,.18), rgba(20,18,35,.06) 48%, transparent 70%); }
.hv-arena .hero-visual { min-height: 442px; align-content: start; }
.hv-arena .hero-visual::before {
  content: ""; position: absolute; inset: 4% 0 7% 0; border-radius: 26px;
  background: linear-gradient(158deg, #241d42, #141223 62%, #2b1d47);
  box-shadow: 0 30px 66px rgba(20,18,35,.26);
}
.hv-arena .hero-visual::after {
  content: "套装 853 / 主题 558"; position: absolute; left: 6%; top: 5.5%;
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18); color: #efeaff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.hv-arena .hero-glow { display: none; }
.hv-arena .stage-phone {
  width: min(470px, 92%); justify-self: center; align-self: start; margin-top: 58px;
  padding: 6px; border-radius: 16px; background: #0b0a12;
  border-color: rgba(255,255,255,.16); rotate: 0deg; animation: none;
  box-shadow: 0 20px 44px rgba(0,0,0,.38);
}
.hv-arena .stage-phone img { border-radius: 11px; }
.hv-arena .hero-badge {
  left: auto; right: 6%; top: auto; bottom: 8%; width: 84px; height: 84px; border-radius: 18px;
  background: var(--accent); rotate: 0deg;
  box-shadow: 0 14px 30px rgba(255,196,77,.34);
}
.hv-arena .hero-badge strong { color: #241a00; font-size: 25px; }
.hv-arena .hero-badge span { color: #4a3600; }
.hv-arena .hero-strip {
  left: 6%; right: 32%; bottom: 8.5%; justify-content: center; gap: 6px;
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); box-shadow: none;
}
.hv-arena .hero-strip span { background: rgba(255,255,255,.10); color: #e6e0f8; }
.hv-arena .hero-strip span:first-child { background: var(--accent); color: #241a00; }
.sv-dark .showcase { background: #141223; }
.dv-center .download-panel { background: #141223; border-color: #141223; }

@media (max-width: 640px) {
  .hv-arena .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hv-arena .hero-visual { min-height: 372px; }
  .hv-arena .hero-visual::before { inset: 2% 0 7% 0; border-radius: 20px; }
  .hv-arena .hero-visual::after { left: 12px; top: 6px; font-size: 10px; padding: 5px 10px; }
  .hv-arena .stage-phone { width: 94%; margin-top: 44px; padding: 5px; border-radius: 13px; }
  .hv-arena .stage-phone img { border-radius: 9px; }
  .hv-arena .hero-badge { display: grid; right: 8px; top: auto; bottom: 21%; width: 68px; height: 68px; border-radius: 14px; }
  .hv-arena .hero-badge strong { font-size: 19px; }
  .hv-arena .hero-strip { left: 12px; right: 12px; bottom: 9%; flex-wrap: nowrap; gap: 4px; padding: 6px 8px; }
  .hv-arena .hero-strip span { padding: 3px 7px; font-size: 10px; }
}

