:root {
  --ink: #0e1c2e;
  --text: #33445a;
  --mute: #7286a0;
  --line: #dfe8f3;
  --paper: #f5f8fc;
  --white: #ffffff;
  --pri: #1f6fe0;
  --pri-deep: #1554b0;
  --accent: #4fc3f7;
  --soft: #e7f1fd;
  --soft-2: #e2f6ff;
}

/* 仪表盘：通栏浅色监控面板，手机居左、指标卡居中、模式条右下 */
.hv-dash .hero { padding: 42px 0 38px; }
.hv-dash .hero-grid { grid-template-columns: 1fr; gap: 26px; }
.hv-dash .hero-copy { max-width: 780px; }
.hv-dash .hero::before { right: -8%; top: -22%; width: 54%; height: 130%;
  background: radial-gradient(circle at 50% 40%, rgba(31,111,224,.14), rgba(79,195,247,.10) 54%, transparent 74%); }
.hv-dash .hero-visual {
  display: block; min-height: 392px; padding: 0; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, rgba(31,111,224,.05) 0 1px, transparent 1px 42px),
    linear-gradient(118deg, #f2f7fd, #ffffff 66%);
  border: 1px solid var(--line); border-radius: 26px;
  box-shadow: 0 24px 54px rgba(14,28,46,.08);
}
.hv-dash .hero-visual::before {
  content: "内存 15% · 5.8 GB"; position: absolute; left: 330px; top: 96px;
  padding: 14px 18px; border-radius: 14px; background: var(--white);
  border: 1px solid var(--line); color: var(--ink); font-size: 15px; font-weight: 800;
  box-shadow: 0 12px 26px rgba(14,28,46,.08);
}
.hv-dash .hero-visual::after {
  content: "CPU 负载 0% · GPU --MHz"; position: absolute; left: 330px; top: 176px;
  padding: 14px 18px; border-radius: 14px; background: var(--white);
  border: 1px solid var(--line); color: var(--mute); font-size: 13px; font-weight: 700;
  box-shadow: 0 12px 26px rgba(14,28,46,.06);
}
.hv-dash .hero-glow { display: none; }
.hv-dash .stage-phone {
  position: absolute; left: 36px; top: 30px; width: min(180px, 22%);
  padding: 6px; border-radius: 22px; background: #0b1727;
  border-color: rgba(11,23,39,.14); rotate: -2deg; animation: none;
  box-shadow: 0 18px 38px rgba(14,28,46,.22);
}
.hv-dash .stage-phone img { border-radius: 17px; }
.hv-dash .hero-badge {
  left: auto; right: 30px; top: 26px; width: 82px; height: 82px;
  border-radius: 20px; background: var(--pri); rotate: 2deg;
  box-shadow: 0 14px 30px rgba(31,111,224,.26);
}
.hv-dash .hero-badge strong { color: #fff; font-size: 25px; }
.hv-dash .hero-badge span { color: rgba(255,255,255,.82); font-size: 10px; }
.hv-dash .hero-strip {
  left: auto; right: 30px; top: auto; bottom: 28px; max-width: 560px;
  justify-content: flex-end; flex-wrap: wrap; gap: 6px;
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
.hv-dash .hero-strip span { background: var(--soft); color: var(--pri-deep); }
.sv-dark .showcase { background: #0b1727; }

@media (max-width: 640px) {
  .hv-dash .hero-grid { gap: 18px; }
  .hv-dash .hero-visual { min-height: 352px; border-radius: 20px; }
  .hv-dash .hero-visual::before { left: 168px; top: 150px; font-size: 12px; padding: 10px 12px; }
  .hv-dash .hero-visual::after { left: 168px; top: 202px; font-size: 10px; padding: 9px 11px; }
  .hv-dash .stage-phone { left: 16px; top: 20px; width: min(128px, 40%); padding: 5px; border-radius: 18px; }
  .hv-dash .stage-phone img { border-radius: 14px; }
  .hv-dash .hero-badge { display: none; }
  .hv-dash .hero-strip { left: 14px; right: 14px; bottom: 12px; max-width: none; justify-content: center; gap: 4px; }
  .hv-dash .hero-strip span { padding: 3px 7px; font-size: 10px; }
}