:root {
  --ink: #111827;
  --text: #3a4256;
  --mute: #767e92;
  --line: #e3e8f3;
  --paper: #f6f8fd;
  --white: #ffffff;
  --pri: #3c6df0;
  --pri-deep: #2a53c8;
  --accent: #ff9f43;
  --soft: #e8effe;
  --soft-2: #fff2e2;
}

/* 悬浮窗外观台：浅色应用窗 + 顶部状态条 + 左下版本块 */
.hv-app .hero { padding: 46px 0 38px; }
.hv-app .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 42px; }
.hv-app .hero::before { right: -8%; top: -14%; width: 60%; height: 122%;
  background: radial-gradient(circle at 46% 40%, rgba(60,109,240,.14), rgba(255,159,67,.10) 52%, transparent 72%); }
.hv-app .hero-visual { min-height: 540px; }
.hv-app .hero-visual::before {
  content: ""; position: absolute; inset: 8% -2% 5% 4%; border-radius: 30px;
  background: linear-gradient(152deg, #e8effe, #ffffff 58%);
  border: 1px solid var(--line); rotate: -2deg;
  box-shadow: 0 26px 56px rgba(28,38,66,.10);
}
.hv-app .hero-visual::after {
  content: "运行中 · 已转发 0 Bytes"; position: absolute; left: 2%; top: 2.5%;
  padding: 9px 15px; border-radius: 12px; background: var(--pri); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 12px 26px rgba(60,109,240,.28);
}
.hv-app .hero-glow { width: 78%; opacity: .65; }
.hv-app .stage-phone {
  width: min(238px, 50%); justify-self: center; align-self: start; margin-top: 50px;
  padding: 6px; border-radius: 22px; background: #fff; border-color: var(--line);
  rotate: 1deg; animation: none; box-shadow: 0 20px 44px rgba(28,38,66,.18);
}
.hv-app .stage-phone img { border-radius: 16px; }
.hv-app .hero-badge {
  left: 1%; right: auto; top: auto; bottom: 24%; width: 94px; height: 94px;
  border-radius: 24px; background: var(--white); border: 1px solid var(--line);
  rotate: -3deg; box-shadow: 0 16px 34px rgba(28,38,66,.12);
}
.hv-app .hero-badge strong { color: var(--pri); font-size: 30px; }
.hv-app .hero-badge span { color: var(--mute); font-size: 10px; }
.hv-app .hero-strip {
  left: 5%; right: 5%; bottom: 4%; justify-content: center; gap: 7px;
  background: var(--white); border-color: var(--line); box-shadow: 0 10px 24px rgba(28,38,66,.08);
}
.sv-frames .shot { background: #fff; }

@media (max-width: 640px) {
  .hv-app .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hv-app .hero-visual { min-height: 470px; }
  .hv-app .hero-visual::before { inset: 6% 0 4% 0; border-radius: 22px; rotate: 0deg; }
  .hv-app .hero-visual::after { left: 12px; top: 10px; font-size: 10px; padding: 7px 11px; }
  .hv-app .hero-glow { width: 72%; }
  .hv-app .stage-phone { width: min(196px, 58%); margin-top: 46px; }
  .hv-app .hero-badge { display: grid; left: 12px; right: auto; top: 44px; bottom: auto; width: 62px; height: 62px; border-radius: 16px; }
  .hv-app .hero-badge strong { font-size: 20px; }
  .hv-app .hero-strip { left: 12px; right: 12px; bottom: 10px; flex-wrap: nowrap; gap: 4px; padding: 6px 8px; }
  .hv-app .hero-strip span { padding: 3px 7px; font-size: 10px; }
}