:root {
  --ink: #0f1a17;
  --text: #3a4a45;
  --mute: #75847e;
  --line: #e0e9e5;
  --paper: #f5f8f7;
  --white: #ffffff;
  --pri: #12a06b;
  --pri-deep: #0c7d53;
  --accent: #ffb020;
  --soft: #e4f5ee;
  --soft-2: #fff2d9;
}

/* 开关台：左侧竖排开关列表 + 右侧手机 + 底部权限条 */
.hv-switch .hero { padding: 46px 0 40px; }
.hv-switch .hero-grid { grid-template-columns: 1.06fr 0.94fr; gap: 38px; }
.hv-switch .hero::before { right: -8%; top: -12%; width: 56%; height: 118%;
  background: radial-gradient(circle at 50% 42%, rgba(18,160,107,.15), rgba(255,176,32,.08) 55%, transparent 74%); }
.hv-switch .hero-visual { min-height: 520px; }
.hv-switch .hero-visual::before {
  content: ""; position: absolute; inset: 7% 2% 9% 16%; border-radius: 30px;
  background: linear-gradient(168deg, #eef7f2, #ffffff 62%);
  border: 1px solid var(--line); rotate: -2deg;
  box-shadow: 0 24px 54px rgba(15,26,23,.10);
}
.hv-switch .hero-visual::after {
  content: "Shizuku 未授权"; position: absolute; right: 5%; bottom: 5%;
  padding: 7px 13px; border-radius: 999px; background: var(--soft-2);
  border: 1px solid #f4dfb4; color: #8a5a00; font-size: 11px; font-weight: 800;
}
.hv-switch .hero-glow { width: 72%; opacity: .5; }
.hv-switch .stage-phone {
  width: min(204px, 50%); justify-self: end; align-self: start; margin: 26px 8% 0 0;
  padding: 6px; border-radius: 24px; background: #0f1a17;
  border-color: rgba(15,26,23,.14); rotate: 1.2deg; animation: none;
  box-shadow: 0 20px 42px rgba(15,26,23,.24);
}
.hv-switch .stage-phone img { border-radius: 19px; }
.hv-switch .hero-badge {
  left: 0; right: auto; top: auto; bottom: 3%; width: 84px; height: 84px;
  border-radius: 20px; background: var(--pri); rotate: -2deg;
  box-shadow: 0 14px 30px rgba(18,160,107,.28);
}
.hv-switch .hero-badge strong { color: #fff; font-size: 25px; }
.hv-switch .hero-badge span { color: rgba(255,255,255,.8); font-size: 10px; }
.hv-switch .hero-strip {
  left: 0; right: auto; top: 50%; bottom: auto; translate: 0 -50%;
  flex-direction: column; align-items: stretch; gap: 8px; padding: 12px;
  border-radius: 16px; background: var(--white); border-color: var(--line);
  box-shadow: 0 14px 30px rgba(15,26,23,.10);
}
.hv-switch .hero-strip span {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 138px; padding: 5px 10px; border-radius: 8px;
  background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 700;
}
.hv-switch .hero-strip span::after {
  content: ""; width: 26px; height: 15px; border-radius: 999px;
  background: #cdd8d3; position: relative; flex: none;
}
.hv-switch .hero-strip span:first-child { background: var(--soft); color: var(--pri-deep); }
.hv-switch .hero-strip span:first-child::after { background: var(--pri); }
.sv-dark .showcase { background: #0f1a17; }

@media (max-width: 640px) {
  .hv-switch .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hv-switch .hero-visual { min-height: 512px; }
  .hv-switch .hero-visual::before { inset: 3% 0 5% 0; border-radius: 22px; rotate: 0deg; }
  .hv-switch .hero-visual::after { right: 12px; bottom: 58px; font-size: 10px; padding: 6px 10px; }
  .hv-switch .stage-phone { width: min(196px, 54%); justify-self: center; margin: 14px 0 0; }
  .hv-switch .hero-badge { display: grid; left: 10px; right: auto; top: auto; bottom: 13%; width: 62px; height: 62px; border-radius: 15px; }
  .hv-switch .hero-badge strong { font-size: 20px; }
  .hv-switch .hero-strip {
    left: 12px; right: 12px; top: auto; bottom: 10px; translate: 0 0;
    flex-direction: row; align-items: center; justify-content: center;
    gap: 4px; padding: 6px; border-radius: 12px;
  }
  .hv-switch .hero-strip span { width: auto; padding: 3px 7px; font-size: 10px; background: var(--soft); }
  .hv-switch .hero-strip span::after { display: none; }
}