/* 耀帧用户端隔离主题：仅供五个 customer-theme 页面引用 */
@font-face {
  font-family: "PangMen ZhengDao Title";
  src: url("../assets/fonts/PangMenZhengDaoBiaoTi-4.0.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "ZT YueDongHei";
  src: url("../assets/fonts/ZTYueDongHei-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.customer-theme {
  --customer-bg: #05060a;
  --customer-panel: #0b0e16;
  --customer-panel-strong: #101522;
  --customer-text: #f4f7ff;
  --customer-muted: #8992a8;
  --customer-purple: #8757ff;
  --customer-blue: #2f9dff;
  --customer-red: #ff3d59;
  --customer-line: rgba(142, 157, 190, 0.2);
  --customer-cut: 18px;
  --type-display: "Arial Narrow", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  --type-heading: "Helvetica Neue", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  --type-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  --type-data: "DIN Alternate", "DIN Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --text-primary: #f2f5fb;
  --text-secondary: #a5adbd;
  --text-tertiary: #747e91;
  --text-disabled: #4d5668;
  --type-display-xl: clamp(3.2rem, 6.25vw, 5.7rem);
  --type-display-l: clamp(2rem, 4.8vw, 4rem);
  --type-heading-1: clamp(1.75rem, 3vw, 2.5rem);
  --type-heading-2: clamp(1.35rem, 2vw, 1.7rem);
  --type-heading-3: 1rem;
  --type-body-l: 1rem;
  --type-body: 0.875rem;
  --type-caption: 0.75rem;
  --type-micro: 0.625rem;
  --type-data-xl: clamp(2rem, 3vw, 2.7rem);
  --type-data-l: clamp(1.55rem, 2.2vw, 2.1rem);
  --type-data-m: 1rem;
  background:
    radial-gradient(circle at 16% 8%, rgba(111, 62, 255, 0.13), transparent 26rem),
    radial-gradient(circle at 86% 16%, rgba(255, 34, 82, 0.1), transparent 30rem),
    #05060a;
  color: var(--customer-text);
}

.customer-theme,
.customer-theme button,
.customer-theme input,
.customer-theme select,
.customer-theme textarea {
  font-family: var(--type-ui);
  font-synthesis: none;
  text-rendering: geometricPrecision;
}

.customer-theme::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.36;
  background-image:
    linear-gradient(rgba(115, 128, 166, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 128, 166, 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

.customer-theme .main-content {
  position: relative;
  min-height: 100vh;
}

/* 五项导航：保持现有 DOM 和跳转行为，仅覆盖视觉 */
.customer-theme .desktop-nav {
  height: 5.35rem;
  padding: 0 clamp(1.25rem, 4vw, 4.75rem);
  background: rgba(3, 4, 8, 0.9);
  border-bottom: 1px solid rgba(130, 84, 255, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38), 0 1px 18px rgba(95, 55, 205, 0.1);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.customer-theme .desktop-nav .nav-logo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 12rem;
  padding-left: 3.35rem;
  font-size: 1.28rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 0 18px rgba(139, 88, 255, 0.38);
}

.customer-theme .desktop-nav .nav-logo::before {
  content: 'YZ';
  position: absolute;
  left: 0;
  top: 50%;
  width: 2.55rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  transform: translateY(-50%) skewX(-12deg);
  clip-path: polygon(13% 0, 100% 0, 84% 100%, 0 100%);
  background: linear-gradient(135deg, #9b70ff 0%, #5e35db 48%, #2f9dff 100%);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  box-shadow: 0 0 20px rgba(126, 75, 255, 0.42);
}

.customer-theme .desktop-nav .nav-logo::after {
  content: '专业调校 · 释放性能';
  display: block;
  margin-top: 0.3rem;
  color: #7d869c;
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  white-space: nowrap;
}

.customer-theme .desktop-nav .nav-menu {
  align-self: stretch;
  align-items: stretch;
  gap: clamp(1.4rem, 3vw, 3.35rem);
}

.customer-theme .desktop-nav .nav-menu a {
  display: flex;
  align-items: center;
  padding: 0 0.25rem;
  color: #aab1c2;
  font-size: 0.96rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.customer-theme .desktop-nav .nav-menu a:hover,
.customer-theme .desktop-nav .nav-menu a.active {
  color: #fff;
  text-shadow: 0 0 14px rgba(149, 103, 255, 0.72);
}

.customer-theme .desktop-nav .nav-menu a.active::after {
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--customer-purple) 20%, #bc9cff 50%, var(--customer-purple) 80%, transparent);
  box-shadow: 0 -3px 14px rgba(135, 87, 255, 0.8);
}

.customer-theme .desktop-nav .login-btn,
.customer-theme .desktop-nav .user-avatar {
  border: 1px solid rgba(180, 192, 220, 0.32);
  background: rgba(10, 12, 20, 0.78);
  box-shadow: inset 0 0 14px rgba(84, 109, 171, 0.08), 0 0 12px rgba(47, 157, 255, 0.06);
  color: #eff4ff;
}

.customer-theme .desktop-nav .login-btn {
  min-height: 2.7rem;
  border-radius: 0;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

.customer-theme .desktop-nav .login-btn:hover {
  border-color: rgba(147, 103, 255, 0.78);
  background: rgba(68, 42, 127, 0.26);
  box-shadow: 0 0 18px rgba(135, 87, 255, 0.2);
}

.customer-theme .desktop-nav.scrolled {
  background: rgba(3, 4, 8, 0.96);
  border-bottom-color: rgba(47, 157, 255, 0.3);
}

.customer-theme .mobile-bottom-tab {
  height: 4.35rem;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(4, 5, 10, 0.96);
  border-top: 1px solid rgba(128, 88, 255, 0.35);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.42), 0 -1px 16px rgba(105, 64, 221, 0.11);
}

.customer-theme .mobile-bottom-tab .tab-item {
  position: relative;
  color: #6f778b;
  font-weight: 650;
  letter-spacing: 0.03em;
}

.customer-theme .mobile-bottom-tab .tab-item.active {
  color: #bda7ff;
  text-shadow: 0 0 10px rgba(135, 87, 255, 0.7);
}

.customer-theme .mobile-bottom-tab .tab-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  width: 2.4rem;
  height: 2px;
  background: var(--customer-purple);
  box-shadow: 0 0 12px var(--customer-purple);
}

/* 首页视觉样板 */
.customer-theme.home-page .hero-section {
  min-height: 42rem;
  padding: 10.2rem 0 5.25rem;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(4, 5, 11, 0.42), rgba(5, 6, 10, 0.82) 68%, #05060a 100%),
    radial-gradient(ellipse at 18% 50%, rgba(85, 39, 220, 0.26), transparent 35%),
    radial-gradient(ellipse at 83% 50%, rgba(255, 31, 73, 0.2), transparent 36%),
    linear-gradient(115deg, #070916 0%, #101225 48%, #13070c 100%);
}

.customer-theme.home-page .hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.54;
  background:
    linear-gradient(115deg, transparent 0 8%, rgba(115, 74, 255, 0.32) 8.2% 8.5%, transparent 8.8% 100%),
    linear-gradient(65deg, transparent 0 82%, rgba(255, 57, 89, 0.27) 82.2% 82.5%, transparent 82.8% 100%);
}

.customer-theme.home-page .hero-section::after {
  content: '';
  position: absolute;
  inset: 5.3rem 0 0;
  z-index: -1;
  opacity: 0.26;
  background-image:
    linear-gradient(rgba(146, 160, 195, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(146, 160, 195, 0.1) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: perspective(700px) rotateX(62deg) scale(1.6) translateY(20%);
  transform-origin: center bottom;
  mask-image: linear-gradient(to bottom, transparent, #000 45%, transparent 95%);
}

.customer-theme.home-page .hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
}

.customer-theme .hero-eyebrow,
.customer-theme .section-kicker {
  color: #a88aff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.36em;
  text-transform: uppercase;
}

.customer-theme.home-page .metal-plate {
  display: block;
  width: min(100%, 980px);
  margin: 1rem auto 1.35rem;
  padding: 1rem 1.5rem 1.2rem;
  overflow: hidden;
  border: 0;
  border-top: 1px solid rgba(218, 225, 243, 0.52);
  border-bottom: 1px solid rgba(99, 64, 194, 0.72);
  clip-path: polygon(3.5% 0, 96.5% 0, 100% 50%, 96.5% 100%, 3.5% 100%, 0 50%);
  background: linear-gradient(90deg, transparent, rgba(22, 24, 37, 0.84) 16%, rgba(27, 29, 43, 0.94) 50%, rgba(22, 24, 37, 0.84) 84%, transparent);
  box-shadow: 0 0 34px rgba(118, 76, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.customer-theme.home-page .hero-title {
  font-size: clamp(3rem, 7.2vw, 6.4rem);
  font-weight: 950;
  font-style: italic;
  letter-spacing: -0.045em;
  line-height: 1.02;
  background: linear-gradient(180deg, #fff 0%, #eef1f7 35%, #9ca3b3 68%, #fff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 5px 0 rgba(31, 34, 46, 0.9)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.12));
}

.customer-theme.home-page .hero-subtitle {
  max-width: none;
  margin: 0 auto 0.7rem;
  color: #d8ddea;
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  letter-spacing: 0.18em;
}

.customer-theme.home-page .hero-trust-text {
  margin: 0 auto 1.85rem;
  color: #8e97aa;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.customer-theme .btn {
  border-radius: 0;
  clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
  letter-spacing: 0.08em;
}

.customer-theme .btn-primary {
  background: linear-gradient(115deg, #7543ed, #9c6cff 55%, #2f9dff);
  color: #fff;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.12), 0 0 22px rgba(122, 72, 238, 0.28);
}

.customer-theme .btn-ghost {
  border-color: rgba(142, 157, 190, 0.38);
  background: rgba(7, 9, 16, 0.72);
}

.customer-theme .section-title {
  margin-bottom: 2.4rem;
  color: #f5f7ff;
  font-size: clamp(1.7rem, 3vw, 2.55rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.customer-theme .section-title::after {
  width: 6.5rem;
  height: 2px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, var(--customer-purple), var(--customer-blue), transparent);
  box-shadow: 0 0 12px rgba(99, 104, 255, 0.6);
}

.customer-theme .performance-section {
  position: relative;
  z-index: 3;
  margin-top: -2.5rem;
}

.customer-theme .performance-band {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1.55rem 2.25rem;
  clip-path: polygon(1.6% 0, 98.4% 0, 100% 50%, 98.4% 100%, 1.6% 100%, 0 50%);
  background: linear-gradient(90deg, rgba(12, 14, 23, 0.96), rgba(4, 6, 12, 0.99) 50%, rgba(17, 9, 15, 0.96));
  border-top: 1px solid rgba(119, 87, 230, 0.68);
  border-bottom: 1px solid rgba(255, 61, 89, 0.5);
  box-shadow: 0 0 34px rgba(45, 24, 104, 0.32);
}

.customer-theme .performance-label {
  padding: 0.72rem 1rem;
  min-width: 5.8rem;
  text-align: center;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  border: 1px solid rgba(174, 184, 208, 0.28);
  background: linear-gradient(145deg, #242936, #11141d);
  font-weight: 800;
}

.customer-theme .performance-label.after {
  border-color: rgba(255, 68, 94, 0.55);
  background: linear-gradient(145deg, #51131f, #220a10);
  color: #ffb4bf;
}

.customer-theme .performance-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.customer-theme .metric {
  padding: 0 1rem;
  text-align: center;
  border-right: 1px solid rgba(142, 157, 190, 0.22);
}

.customer-theme .metric:last-child { border-right: 0; }

.customer-theme .metric span {
  display: block;
  color: #9098aa;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.customer-theme .metric strong {
  display: block;
  margin-top: 0.2rem;
  color: #dce1ed;
  font-size: clamp(1.45rem, 2.4vw, 2.45rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.customer-theme .performance-metrics.after .metric:nth-child(1) strong { color: #9a6fff; }
.customer-theme .performance-metrics.after .metric:nth-child(2) strong { color: #4aabff; }
.customer-theme .performance-metrics.after .metric:nth-child(3) strong { color: #ff596f; }

.customer-theme .performance-arrow {
  color: #9167ff;
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.25em;
  text-shadow: 0 0 16px rgba(135, 87, 255, 0.72);
}

.customer-theme .performance-note {
  margin-top: 0.75rem;
  text-align: center;
  color: #737c90;
  font-size: 0.72rem;
}

.customer-theme .section-packages,
.customer-theme .section-services,
.customer-theme .section-advantages,
.customer-theme .section-showcases,
.customer-theme .section-about,
.customer-theme .closing-cta {
  padding-top: 5.25rem;
  padding-bottom: 5.25rem;
}

.customer-theme .package-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
  align-items: stretch;
}

.customer-theme .package-preview-card,
.customer-theme .advantage-item,
.customer-theme .about-content,
.customer-theme .closing-cta-inner {
  position: relative;
  clip-path: polygon(var(--customer-cut) 0, 100% 0, 100% calc(100% - var(--customer-cut)), calc(100% - var(--customer-cut)) 100%, 0 100%, 0 var(--customer-cut));
  background: linear-gradient(145deg, rgba(17, 20, 31, 0.98), rgba(7, 9, 16, 0.98));
  border: 1px solid rgba(142, 157, 190, 0.22);
  box-shadow: inset 0 0 28px rgba(73, 91, 135, 0.05), 0 20px 44px rgba(0, 0, 0, 0.24);
}

.customer-theme .package-preview-card {
  display: flex;
  flex-direction: column;
  min-height: 23rem;
  padding: 2.2rem 2rem 1.75rem;
  --card-accent: var(--customer-purple);
}

.customer-theme .package-preview-card.blue { --card-accent: var(--customer-blue); }
.customer-theme .package-preview-card.red { --card-accent: var(--customer-red); }

.customer-theme .package-preview-card.featured {
  transform: translateY(-0.75rem);
  border-color: color-mix(in srgb, var(--card-accent) 72%, transparent);
  box-shadow: inset 0 0 36px color-mix(in srgb, var(--card-accent) 8%, transparent), 0 0 25px color-mix(in srgb, var(--card-accent) 18%, transparent), 0 24px 48px rgba(0, 0, 0, 0.35);
}

.customer-theme .package-badge {
  align-self: flex-start;
  margin: -2.2rem 0 1.25rem -2rem;
  padding: 0.45rem 2.2rem 0.45rem 1rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--card-accent) 78%, #10101a), color-mix(in srgb, var(--card-accent) 36%, #0b0d14));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.customer-theme .package-preview-card h4 {
  color: #f7f8ff;
  font-size: 1.62rem;
  font-style: italic;
  letter-spacing: 0.04em;
}

.customer-theme .package-preview-card > p {
  min-height: 3rem;
  margin: 0.55rem 0 1rem;
  color: var(--customer-muted);
  font-size: 0.9rem;
}

.customer-theme .package-price {
  margin-bottom: 1rem;
  color: var(--card-accent);
  font-size: 2.2rem;
  font-weight: 900;
}

.customer-theme .package-price small {
  color: #8992a8;
  font-size: 0.75rem;
  font-weight: 600;
}

.customer-theme .package-features {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
  color: #c3c9d7;
  font-size: 0.88rem;
}

.customer-theme .package-features li::before {
  content: '✓';
  margin-right: 0.55rem;
  color: var(--card-accent);
  font-weight: 900;
}

.customer-theme .package-preview-card .btn {
  width: 100%;
  margin-top: auto;
  color: #fff;
  background: linear-gradient(90deg, color-mix(in srgb, var(--card-accent) 30%, #090b13), color-mix(in srgb, var(--card-accent) 62%, #0c1020));
  border: 1px solid color-mix(in srgb, var(--card-accent) 62%, transparent);
}

.customer-theme .advantages-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.customer-theme .advantage-item {
  max-width: none;
  min-height: 11rem;
  padding: 1.5rem;
}

.customer-theme .advantage-icon .icon-circle {
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  background: linear-gradient(135deg, rgba(135, 87, 255, 0.9), rgba(47, 157, 255, 0.82));
  box-shadow: 0 0 18px rgba(101, 91, 255, 0.22);
}

.customer-theme .advantage-text h4 { color: #f3f5fb; }
.customer-theme .advantage-text p { color: #8992a8; }

.customer-theme .showcase-viewport {
  border-radius: 0;
  clip-path: polygon(var(--customer-cut) 0, 100% 0, 100% calc(100% - var(--customer-cut)), calc(100% - var(--customer-cut)) 100%, 0 100%, 0 var(--customer-cut));
  border-color: rgba(47, 157, 255, 0.34);
  background: linear-gradient(145deg, #0d111b, #07090f);
  box-shadow: 0 0 25px rgba(47, 157, 255, 0.1);
}

.customer-theme .showcase-carousel { max-width: 820px; }
.customer-theme .showcase-note { color: #747e92; }
.customer-theme .card-tag { border-radius: 0; color: #65b6ff; }
.customer-theme .showcase-arrow { border-radius: 0; clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%); }

.customer-theme .about-content {
  max-width: 960px;
  padding: clamp(2rem, 4vw, 3.25rem);
  text-align: left;
}

.customer-theme .about-heading {
  margin-bottom: 0.9rem;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
}

.customer-theme .about-text { color: #9da6b9; }

.customer-theme .closing-cta-inner {
  padding: clamp(2.4rem, 6vw, 5rem);
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(circle at 50% 130%, rgba(100, 61, 218, 0.32), transparent 52%),
    linear-gradient(135deg, #0e111b, #07080e);
}

.customer-theme.home-page .closing-evil-eye {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: auto;
  opacity: 0.76;
}

.customer-theme.home-page .closing-evil-eye::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(3, 5, 10, 0.12) 0 18%, rgba(3, 5, 10, 0.42) 48%, rgba(3, 5, 10, 0.78) 100%),
    linear-gradient(180deg, rgba(3, 5, 10, 0.28), transparent 35%, rgba(3, 5, 10, 0.34));
}

.customer-theme.home-page .closing-evil-eye canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.customer-theme.home-page .closing-evil-eye.is-webgl-unavailable {
  background: radial-gradient(ellipse at center, rgba(104, 81, 230, 0.28), transparent 62%);
}

.customer-theme.home-page .closing-cta-content {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.customer-theme.home-page .closing-cta-content .btn {
  pointer-events: auto;
}

.customer-theme.home-page .closing-cta-content h3 {
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.88), 0 0 28px rgba(11, 13, 28, 0.72);
}

.customer-theme.home-page .closing-cta-content p {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.92);
}

@media (max-width: 767px) {
  .customer-theme.home-page .closing-evil-eye {
    opacity: 0.66;
  }
}

/* ========================================================================== */
/* 「我的」页底部 Retro Grid：紫色网格作为整段环境背景 */
/* ========================================================================== */
.customer-theme.profile-view .retro-grid-background {
  --retro-grid-line: rgba(139, 92, 246, 0.72);
  --retro-grid-cell: 60px;
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: 100vw;
  height: clamp(34rem, 68vw, 52rem);
  overflow: hidden;
  pointer-events: none;
  opacity: 0.78;
  transform: translateX(-50%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 23%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 23%, #000 100%);
}

.customer-theme.profile-view .profile-page {
  position: relative;
  z-index: 1;
}

.customer-theme.profile-view .retro-grid-projection,
.customer-theme.profile-view .retro-grid-rotation {
  position: absolute;
  inset: 0;
}

.customer-theme.profile-view .retro-grid-projection {
  perspective: 200px;
  perspective-origin: 50% 42%;
}

.customer-theme.profile-view .retro-grid-rotation {
  transform: rotateX(65deg);
  transform-origin: 50% 100%;
}

.customer-theme.profile-view .retro-grid-scroll {
  position: absolute;
  top: -150%;
  left: -250%;
  width: 600%;
  height: 300%;
  background-image:
    linear-gradient(to right, var(--retro-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--retro-grid-line) 1px, transparent 1px);
  background-repeat: repeat;
  background-position: 0 0, 0 0;
  background-size: var(--retro-grid-cell) var(--retro-grid-cell);
  filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.52));
  transform: translateY(0);
  animation: retro-grid-bottom-motion 2.8s linear infinite;
  will-change: background-position;
}

.customer-theme.profile-view .retro-grid-fade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(109, 58, 226, 0.13), transparent 56%),
    linear-gradient(to bottom, #030407 0%, transparent 31%, rgba(3, 4, 7, 0.08) 72%, #030407 100%);
}

@keyframes retro-grid-bottom-motion {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 var(--retro-grid-cell), 0 var(--retro-grid-cell); }
}

@media (max-width: 767px) {
  .customer-theme.profile-view .retro-grid-background {
    --retro-grid-cell: 46px;
    height: 42rem;
    opacity: 0.68;
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-theme.profile-view .retro-grid-scroll {
    animation: none !important;
    background-position: 0 0, 0 0 !important;
    transform: translateY(0) !important;
  }
}

.customer-theme .closing-cta h3 {
  margin: 0.55rem 0 0.75rem;
  font-size: clamp(2rem, 5vw, 4.1rem);
  font-weight: 950;
  font-style: italic;
}

.customer-theme .closing-cta p {
  margin-bottom: 1.7rem;
  color: var(--customer-muted);
}

/* 开屏 */
.customer-theme .splash {
  background:
    radial-gradient(circle at 32% 50%, rgba(107, 59, 232, 0.28), transparent 34%),
    radial-gradient(circle at 68% 50%, rgba(41, 127, 240, 0.2), transparent 34%),
    #040509;
}

.customer-theme .splash-content::before {
  content: 'YZ';
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4rem;
  margin: 0 auto 1.3rem;
  transform: skewX(-12deg);
  clip-path: polygon(15% 0, 100% 0, 84% 100%, 0 100%);
  background: linear-gradient(135deg, #9d71ff, #4933c8 58%, #2f9dff);
  color: #fff;
  font-weight: 950;
  letter-spacing: -0.06em;
  box-shadow: 0 0 36px rgba(111, 67, 244, 0.36);
}

.customer-theme .splash-title {
  font-weight: 900;
  letter-spacing: 0.16em;
  text-shadow: 0 0 24px rgba(147, 104, 255, 0.34);
}

.customer-theme .splash-subtitle {
  color: #8790a5;
  font-size: 0.82rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.customer-theme .splash-entry {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  margin-top: 2.4rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}

.customer-theme .splash.is-ready .splash-entry {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.customer-theme .splash-enter-button {
  position: relative;
  min-width: 15.5rem;
  min-height: 3.6rem;
  padding: 0.85rem 2.4rem;
  overflow: hidden;
  border: 1px solid rgba(218, 225, 255, 0.72);
  clip-path: polygon(0.7rem 0, 100% 0, calc(100% - 0.7rem) 100%, 0 100%);
  background: linear-gradient(110deg, rgba(229, 233, 246, 0.98), rgba(145, 156, 184, 0.92));
  box-shadow: 0 0 2rem rgba(126, 91, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: #080a10;
  cursor: pointer;
  font: 800 0.92rem/1 var(--type-ui);
  letter-spacing: 0.17em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.customer-theme .splash-enter-button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.85) 48%, transparent 66%);
  transform: translateX(-130%);
  transition: transform 0.55s ease;
}

.customer-theme .splash-enter-button span {
  position: relative;
  z-index: 1;
}

.customer-theme .splash-enter-button:hover,
.customer-theme .splash-enter-button:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 0 2.6rem rgba(126, 91, 255, 0.42), inset 0 1px 0 #fff;
  outline: 2px solid rgba(139, 103, 255, 0.78);
  outline-offset: 4px;
}

.customer-theme .splash-enter-button:hover::after,
.customer-theme .splash-enter-button:focus-visible::after {
  transform: translateX(130%);
}

.customer-theme .splash-entry-hint {
  color: #667087;
  font: 600 0.65rem/1.4 var(--type-data);
  letter-spacing: 0.24em;
}

@media (prefers-reduced-motion: reduce) {
  .customer-theme .splash-entry,
  .customer-theme .splash-enter-button,
  .customer-theme .splash-enter-button::after {
    transition: none;
  }
}

@media (max-width: 1023px) {
  .customer-theme .desktop-nav { padding: 0 1.4rem; }
  .customer-theme .desktop-nav .nav-logo { min-width: 10rem; font-size: 1.05rem; }
  .customer-theme .desktop-nav .nav-menu { gap: 1.25rem; }
  .customer-theme .performance-band { grid-template-columns: auto 1fr auto; }
  .customer-theme .performance-arrow { grid-column: 2; }
  .customer-theme .performance-metrics.after { grid-column: 2; }
  .customer-theme .performance-label.after { grid-column: 3; }
  .customer-theme .package-preview-grid { gap: 0.85rem; }
  .customer-theme .package-preview-card { padding-inline: 1.25rem; }
  .customer-theme .package-badge { margin-left: -1.25rem; }
  .customer-theme .advantages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-theme .showcase-arrow.left-arrow { left: 0; }
  .customer-theme .showcase-arrow.right-arrow { right: 0; }
}

@media (min-width: 768px) and (max-width: 900px) {
  .customer-theme .package-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-theme .package-preview-card:last-child { grid-column: 1 / -1; width: calc(50% - 0.425rem); justify-self: center; }
}

@media (max-width: 767px) {
  .customer-theme { padding-bottom: calc(4.35rem + env(safe-area-inset-bottom)); }
  .customer-theme .desktop-nav { height: 3.7rem; padding: 0 1rem; }
  .customer-theme .desktop-nav .nav-logo { min-width: 0; padding-left: 2.55rem; font-size: 1rem; }
  .customer-theme .desktop-nav .nav-logo::before { width: 2rem; height: 1.75rem; font-size: 0.65rem; }
  .customer-theme .desktop-nav .nav-logo::after { display: none; }
  .customer-theme .desktop-nav .login-btn { min-height: 2.4rem; padding: 0.45rem 0.85rem; font-size: 0.78rem; }
  .customer-theme.home-page .hero-section { min-height: 35rem; padding: 7.5rem 0 4.5rem; }
  .customer-theme.home-page .metal-plate { padding-inline: 0.65rem; clip-path: polygon(2% 0, 98% 0, 100% 50%, 98% 100%, 2% 100%, 0 50%); }
  .customer-theme.home-page .hero-title { font-size: clamp(2.5rem, 13vw, 4rem); }
  .customer-theme.home-page .hero-subtitle { padding: 0 0.75rem; font-size: 0.92rem; line-height: 1.8; letter-spacing: 0.1em; }
  .customer-theme .performance-section { margin-top: -1.7rem; }
  .customer-theme .performance-band { display: grid; grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 1rem; clip-path: polygon(4% 0, 96% 0, 100% 3%, 100% 97%, 96% 100%, 4% 100%, 0 97%, 0 3%); }
  .customer-theme .performance-label,
  .customer-theme .performance-label.after,
  .customer-theme .performance-metrics.after,
  .customer-theme .performance-arrow { grid-column: 1; }
  .customer-theme .performance-label { justify-self: center; }
  .customer-theme .performance-arrow { transform: rotate(90deg); justify-self: center; font-size: 1.8rem; }
  .customer-theme .metric { padding: 0 0.4rem; }
  .customer-theme .section-packages,
  .customer-theme .section-services,
  .customer-theme .section-advantages,
  .customer-theme .section-showcases,
  .customer-theme .section-about,
  .customer-theme .closing-cta { padding-top: 3.6rem; padding-bottom: 3.6rem; }
  .customer-theme .package-preview-grid { grid-template-columns: 1fr; gap: 1.15rem; }
  .customer-theme .package-preview-card,
  .customer-theme .package-preview-card.featured { min-height: 0; transform: none; }
  .customer-theme .advantages-grid { grid-template-columns: 1fr; }
  .customer-theme .advantage-item { width: 100%; min-height: 0; }
  .customer-theme .about-text { padding: 0; }
  .customer-theme .left-arrow { left: 0; }
  .customer-theme .right-arrow { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .customer-theme .fade-in-target {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .customer-theme *,
  .customer-theme *::before,
  .customer-theme *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .customer-theme .package-preview-card.featured { transform: none; }
  .customer-theme .sweep-light { display: none; }
}

/* 用户端五页进入 / 离开过渡；仅 common.js 确认是用户端后启用。 */
body.customer-theme {
  animation: customer-page-enter 320ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

body.customer-theme.customer-page-leaving {
  animation: customer-page-leave 220ms cubic-bezier(0.4, 0, 1, 1) both;
  pointer-events: none;
}

@keyframes customer-page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes customer-page-leave {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.customer-theme,
  body.customer-theme.customer-page-leaving {
    animation: none;
  }
}

/* ========================================================================== */
/* V2 商业落地视觉：职业电竞赛事 + 高端硬件控制台 */
/* ========================================================================== */
.customer-theme {
  --v2-ink: #030407;
  --v2-gunmetal: #0a0d13;
  --v2-panel: rgba(6, 9, 15, 0.94);
  --v2-panel-top: rgba(15, 19, 29, 0.96);
  --v2-steel: rgba(176, 190, 218, 0.24);
  --v2-purple: #7b4dff;
  --v2-blue: #238cff;
  --v2-red: #f3334f;
  --v2-text: #f5f7fb;
  --v2-muted: #8993a6;
  background: #030407;
}

.customer-theme::before {
  opacity: 0.18;
  background-size: 56px 56px;
}

/* Magic UI Flickering Grid 的原生 Canvas 适配：统一铺在五个用户端页面的内容底层。 */
.customer-theme {
  isolation: isolate;
}

.customer-theme .flickering-grid-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: 0.82;
  mix-blend-mode: screen;
  transition: clip-path 80ms linear;
}

.customer-theme.home-page .flickering-grid-canvas {
  /* JS 按 Hero 的当前视口底边动态更新裁剪，图一主视觉不受影响。 */
  clip-path: inset(100vh 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .customer-theme .flickering-grid-canvas {
    transition: none;
  }
}

.customer-theme:not(.home-page)::after {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: min(44rem, 78vh);
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 3, 7, 0.38), #030407 92%),
    linear-gradient(90deg, rgba(33, 12, 81, 0.22), transparent 38%, transparent 62%, rgba(96, 8, 20, 0.18)),
    url('../assets/images/esports-arena-bg-v2.png') center top / cover no-repeat;
  filter: saturate(0.82) contrast(1.08);
  opacity: 0.58;
  mask-image: linear-gradient(to bottom, #000 0 62%, transparent 100%);
}

.customer-theme .desktop-nav {
  height: 5.25rem;
  border-bottom: 1px solid rgba(111, 76, 211, 0.34);
  background: rgba(2, 3, 6, 0.96);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.035) inset;
}

.customer-theme .desktop-nav .nav-logo::before {
  content: 'YF';
  transform: translateY(-50%) skewX(-16deg);
  clip-path: polygon(8% 0, 100% 0, 80% 100%, 0 72%);
  background:
    linear-gradient(150deg, rgba(255,255,255,0.34), transparent 34%),
    linear-gradient(135deg, #9f75ff, #6431e8 56%, #267cdd);
  border-right: 1px solid rgba(255,255,255,0.32);
  box-shadow: 0 0 14px rgba(116, 66, 245, 0.36);
}

.customer-theme .desktop-nav .nav-menu a {
  color: #b9bec8;
  font-weight: 700;
}

.customer-theme .desktop-nav .nav-menu a.active::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, #8b56ff 20%, #c6aaff 50%, #8b56ff 80%, transparent);
  box-shadow: 0 -2px 9px rgba(128, 75, 255, 0.7);
}

.customer-theme .desktop-nav .login-btn {
  border-color: rgba(196, 205, 224, 0.26);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background: linear-gradient(180deg, rgba(17, 20, 29, 0.9), rgba(5, 7, 12, 0.96));
}

.customer-theme .btn {
  position: relative;
  min-height: 2.85rem;
  border: 1px solid rgba(167, 179, 205, 0.24);
  background: linear-gradient(180deg, rgba(22, 27, 39, 0.96), rgba(7, 10, 17, 0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -12px 22px rgba(0,0,0,0.28);
  color: #eef2fb;
  text-transform: none;
}

.customer-theme .btn::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -1px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  box-shadow: 0 0 7px currentColor;
}

.customer-theme .btn-primary {
  border-color: rgba(126, 79, 255, 0.7);
  background: linear-gradient(105deg, #25164d, #5c31c9 52%, #1e4f98);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -14px 24px rgba(0,0,0,0.3), 0 0 11px rgba(112, 65, 235, 0.2);
}

.customer-theme .btn:hover {
  transform: translateY(-1px);
  border-color: rgba(170, 142, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 13px rgba(111, 70, 231, 0.18);
}

/* 首屏：一块悬浮在职业赛事舞台前的数字控制面板 */
.customer-theme.home-page .main-content::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 72rem;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2,3,7,0.08), rgba(2,3,7,0.18) 38%, #030407 96%),
    linear-gradient(90deg, rgba(41, 15, 94, 0.2), transparent 38%, transparent 62%, rgba(111, 7, 22, 0.17)),
    url('../assets/images/esports-arena-bg-v3-screens.png') center top / 100% auto no-repeat;
  filter: saturate(0.92) contrast(1.1);
  opacity: 0.88;
  mask-image: linear-gradient(to bottom, #000 0 78%, transparent 100%);
}

/* React Bits CursorGrid 的原生适配：首屏结束后，仅在裸露背景上响应指针。 */
.customer-theme.home-page .main-content {
  isolation: isolate;
}

.customer-theme.home-page .main-content > section {
  position: relative;
  z-index: 1;
}

.customer-theme.home-page .home-cursor-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.9;
}

@media (hover: none), (pointer: coarse) {
  .customer-theme.home-page .home-cursor-grid {
    display: none;
  }
}

/* ========================================================================== */
/* 首页性能对比长框：两束对称的彗星式银白沿边高光 */
/* ========================================================================== */
.customer-theme .flow-border-target {
  isolation: isolate;
}

.customer-theme .modal-card.flow-border-target,
.customer-theme .large-avatar.flow-border-target {
  position: relative;
}

.customer-theme .flow-border-layer {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  mix-blend-mode: screen;
}

.customer-theme .flow-border-path {
  fill: none;
  stroke: #eef5ff;
  stroke-linecap: butt;
  stroke-linejoin: round;
  animation: customer-border-flow var(--flow-duration, 16400ms) linear infinite;
}

.customer-theme .flow-border-tail-far {
  --flow-tail-shift: 14.4px;
  stroke-width: 0.8px;
  stroke-dasharray: 15 85;
  opacity: 0.06;
}

.customer-theme .flow-border-tail-9 {
  --flow-tail-shift: 11.9px;
  stroke-width: 0.92px;
  stroke-dasharray: 12.5 87.5;
  opacity: 0.1;
}

.customer-theme .flow-border-tail-8 {
  --flow-tail-shift: 9.9px;
  stroke-width: 1.04px;
  stroke-dasharray: 10.5 89.5;
  opacity: 0.15;
}

.customer-theme .flow-border-tail-7 {
  --flow-tail-shift: 8.2px;
  stroke-width: 1.16px;
  stroke-dasharray: 8.8 91.2;
  opacity: 0.21;
}

.customer-theme .flow-border-tail-6 {
  --flow-tail-shift: 6.7px;
  stroke-width: 1.28px;
  stroke-dasharray: 7.3 92.7;
  opacity: 0.28;
}

.customer-theme .flow-border-tail-5 {
  --flow-tail-shift: 5.4px;
  stroke-width: 1.4px;
  stroke-dasharray: 6 94;
  opacity: 0.36;
}

.customer-theme .flow-border-tail-4 {
  --flow-tail-shift: 4.2px;
  stroke-width: 1.52px;
  stroke-dasharray: 4.8 95.2;
  opacity: 0.45;
}

.customer-theme .flow-border-tail-3 {
  --flow-tail-shift: 3.1px;
  stroke-width: 1.64px;
  stroke-dasharray: 3.7 96.3;
  opacity: 0.55;
}

.customer-theme .flow-border-tail-2 {
  --flow-tail-shift: 2.1px;
  stroke-width: 1.76px;
  stroke-dasharray: 2.7 97.3;
  opacity: 0.67;
}

.customer-theme .flow-border-tail-1 {
  --flow-tail-shift: 1.1px;
  stroke-width: 1.88px;
  stroke-dasharray: 1.7 98.3;
  opacity: 0.81;
}

.customer-theme .flow-border-head {
  --flow-tail-shift: 0px;
  stroke: #ffffff;
  stroke-width: 2px;
  stroke-dasharray: 0.6 99.4;
  stroke-linecap: round;
  opacity: 1;
}

.customer-theme .flow-border-target.flow-border-paused .flow-border-path {
  animation-play-state: paused;
}

@keyframes customer-border-flow {
  from { stroke-dashoffset: var(--flow-tail-shift, 0px); }
  to { stroke-dashoffset: calc(var(--flow-tail-shift, 0px) - 100px); }
}

@media (prefers-reduced-motion: reduce) {
  .customer-theme .flow-border-path {
    animation: none !important;
    opacity: 0.34;
  }
}

/* 首页方案、结尾 CTA 与商城方案：纯色底的金属按钮，不使用彩色渐变 */
.customer-theme.home-page .package-preview-card .btn,
.customer-theme.home-page .closing-cta .btn-primary,
.customer-theme.home-page .hero-actions .btn-primary,
.customer-theme .shop-page .package-card .buy-btn {
  --metal-button-base: #473080;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(215, 221, 235, 0.42);
  background: var(--metal-button-base) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 3px 0 rgba(255, 255, 255, 0.06),
    inset 0 -10px 0 rgba(0, 0, 0, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.48),
    0 5px 14px rgba(0, 0, 0, 0.28);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

.customer-theme.home-page .package-preview-card.purple .btn {
  --metal-button-base: #4b3084;
}

.customer-theme.home-page .package-preview-card.blue .btn {
  --metal-button-base: #175c91;
}

.customer-theme.home-page .package-preview-card.red .btn {
  --metal-button-base: #8b2a3b;
}

.customer-theme .shop-page .package-card .buy-btn {
  --metal-button-base: color-mix(in srgb, var(--shop-accent) 48%, #0b101a);
}

.customer-theme.home-page .package-preview-card .btn::before,
.customer-theme.home-page .closing-cta .btn-primary::before,
.customer-theme.home-page .hero-actions .btn-primary::before,
.customer-theme .shop-page .package-card .buy-btn::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -35%;
  left: -18%;
  width: 15%;
  height: 170%;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.22);
  box-shadow:
    8px 0 12px rgba(255, 255, 255, 0.1),
    -4px 0 8px rgba(255, 255, 255, 0.06);
  opacity: 0.72;
  transform: skewX(-18deg);
  transition: left 0.52s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s ease;
}

.customer-theme.home-page .package-preview-card .btn:hover,
.customer-theme.home-page .closing-cta .btn-primary:hover,
.customer-theme.home-page .hero-actions .btn-primary:hover,
.customer-theme .shop-page .package-card .buy-btn:hover {
  border-color: rgba(238, 242, 251, 0.66);
  background: var(--metal-button-base) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 3px 0 rgba(255, 255, 255, 0.09),
    inset 0 -10px 0 rgba(0, 0, 0, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 6px 16px rgba(0, 0, 0, 0.32);
}

.customer-theme.home-page .package-preview-card .btn:hover::before,
.customer-theme.home-page .closing-cta .btn-primary:hover::before,
.customer-theme.home-page .hero-actions .btn-primary:hover::before,
.customer-theme .shop-page .package-card .buy-btn:hover::before {
  left: 106%;
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  .customer-theme.home-page .package-preview-card .btn::before,
  .customer-theme.home-page .closing-cta .btn-primary::before,
  .customer-theme.home-page .hero-actions .btn-primary::before,
  .customer-theme .shop-page .package-card .buy-btn::before {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-theme.home-page .home-cursor-grid {
    display: none;
  }
}

.customer-theme.home-page .hero-section {
  min-height: 0;
  padding: 7.55rem 0 0.9rem;
  background: transparent;
}

.customer-theme.home-page .hero-section::before,
.customer-theme.home-page .hero-section::after {
  display: none;
}

.customer-theme.home-page .hero-eyebrow {
  margin-bottom: 0.35rem;
  color: #a68aff;
  font-size: 0.62rem;
  letter-spacing: 0.5em;
  text-shadow: 0 0 8px rgba(135, 84, 255, 0.42);
}

.customer-theme.home-page .metal-plate {
  width: min(100%, 960px);
  margin: 0 auto 0.25rem;
  padding: 0.25rem 1.4rem 0.45rem;
  border-top-color: rgba(230, 234, 242, 0.38);
  border-bottom-color: rgba(119, 70, 233, 0.68);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 28%),
    linear-gradient(90deg, transparent, rgba(9, 12, 20, 0.78) 13%, rgba(17, 20, 29, 0.88) 50%, rgba(9, 12, 20, 0.78) 87%, transparent);
  box-shadow: 0 0 16px rgba(82, 48, 169, 0.14), inset 0 1px 0 rgba(255,255,255,0.05);
}

.customer-theme.home-page .hero-title {
  font-size: clamp(3.2rem, 6.25vw, 5.7rem);
  line-height: 1.04;
  letter-spacing: -0.055em;
  -webkit-text-stroke: 1px rgba(255,255,255,0.48);
  filter: drop-shadow(0 4px 0 #222732) drop-shadow(0 7px 0 #090b10) drop-shadow(0 0 8px rgba(255,255,255,0.1));
}

.customer-theme.home-page .hero-subtitle {
  margin: 0.45rem auto 0.08rem;
  color: #e0e3ea;
  font-size: 1.05rem;
}

.customer-theme.home-page .hero-trust-text {
  margin-bottom: 0.55rem;
  font-size: 0.7rem;
}

.customer-theme.home-page .hero-actions {
  margin: 0.45rem 0 0;
}

.customer-theme.home-page .hero-actions .btn {
  min-height: 2.6rem;
  padding: 0.58rem 1.6rem;
  font-size: 0.88rem;
}

.customer-theme .performance-section {
  margin-top: 0;
}

.customer-theme .performance-band {
  gap: 0.9rem;
  padding: 0.9rem 2rem;
  border-top-color: rgba(119, 78, 234, 0.72);
  border-bottom-color: rgba(207, 41, 68, 0.58);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 28%),
    linear-gradient(90deg, rgba(7,9,15,0.97), rgba(2,5,10,0.985) 50%, rgba(12,5,10,0.97));
  box-shadow: inset 0 0 26px rgba(20,25,39,0.6), 0 5px 20px rgba(0,0,0,0.42);
}

.customer-theme .performance-label {
  min-width: 5.4rem;
  padding: 0.62rem 0.9rem;
  font-size: 0.86rem;
  border-color: rgba(160,170,191,0.35);
  background: linear-gradient(155deg, #282d38, #0f1219 72%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.11), 0 0 8px rgba(104,83,173,0.14);
}

.customer-theme .performance-label.after {
  background: linear-gradient(155deg, #521521, #19080d 72%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 8px rgba(224,40,68,0.16);
}

.customer-theme .metric strong {
  font-size: clamp(1.45rem, 2vw, 2.1rem);
}

.customer-theme .performance-arrow {
  font-size: 2rem;
}

.customer-theme .performance-note {
  margin-top: 0.35rem;
  font-size: 0.62rem;
}

.customer-theme.home-page .section-packages {
  padding-top: 0.7rem;
  padding-bottom: 0.85rem;
}

.customer-theme.home-page .section-packages > .section-kicker,
.customer-theme.home-page .section-packages > .section-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.customer-theme .package-preview-grid {
  gap: 1.05rem;
}

.customer-theme .package-preview-card {
  min-height: 19.3rem;
  padding: 1.6rem 1.65rem 1.25rem;
  border-color: color-mix(in srgb, var(--card-accent) 68%, #252b38);
  background:
    radial-gradient(circle at 85% 27%, color-mix(in srgb, var(--card-accent) 9%, transparent), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.045), transparent 18%),
    linear-gradient(145deg, rgba(12,16,25,0.98), rgba(3,6,11,0.985));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 0 32px color-mix(in srgb, var(--card-accent) 5%, transparent),
    0 13px 30px rgba(0,0,0,0.38),
    0 0 9px color-mix(in srgb, var(--card-accent) 12%, transparent);
}

.customer-theme .package-preview-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inherit;
  background:
    linear-gradient(90deg, var(--card-accent), transparent 18%) top left / 45% 1px no-repeat,
    linear-gradient(180deg, var(--card-accent), transparent 22%) top left / 1px 48% no-repeat,
    linear-gradient(270deg, var(--card-accent), transparent 18%) bottom right / 42% 1px no-repeat,
    linear-gradient(0deg, var(--card-accent), transparent 22%) bottom right / 1px 48% no-repeat;
  opacity: 0.78;
}

.customer-theme .package-preview-card::after {
  content: '';
  position: absolute;
  top: 4.25rem;
  right: 1.35rem;
  width: 4.7rem;
  aspect-ratio: 1;
  opacity: 0.34;
  background:
    radial-gradient(circle, transparent 0 20%, var(--card-accent) 21% 22%, transparent 23% 38%, var(--card-accent) 39% 40%, transparent 41%),
    linear-gradient(var(--card-accent), var(--card-accent)) center / 1px 100% no-repeat,
    linear-gradient(90deg, var(--card-accent), var(--card-accent)) center / 100% 1px no-repeat;
  clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
}

.customer-theme .package-preview-card.featured {
  transform: translateY(-0.28rem) scale(1.012);
}

.customer-theme .package-badge {
  margin: -1.6rem 0 0.85rem -1.65rem;
  padding: 0.34rem 2rem 0.34rem 0.9rem;
  font-size: 0.7rem;
  box-shadow: 0 0 8px color-mix(in srgb, var(--card-accent) 22%, transparent);
}

.customer-theme .package-preview-card h4 {
  max-width: 75%;
  font-size: 1.45rem;
}

.customer-theme .package-preview-card > p {
  min-height: 2.6rem;
  max-width: 76%;
  margin: 0.35rem 0 0.65rem;
  font-size: 0.78rem;
  line-height: 1.55;
}

.customer-theme .package-price {
  margin-bottom: 0.55rem;
  font-size: 1.95rem;
}

.customer-theme .package-features {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.38rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.72rem;
}

.customer-theme .package-preview-card .btn {
  min-height: 2.35rem;
  padding: 0.48rem 1rem;
  font-size: 0.82rem;
}

.customer-theme.home-page .section-advantages {
  padding-top: 0;
  padding-bottom: 1.3rem;
}

.customer-theme.home-page .section-advantages > .section-kicker,
.customer-theme.home-page .section-advantages > .section-title {
  display: none;
}

.customer-theme .advantages-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0.75rem 1rem;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  border: 1px solid rgba(134, 148, 177, 0.28);
  background: linear-gradient(180deg, rgba(13,16,24,0.98), rgba(4,6,11,0.985));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 12px 30px rgba(0,0,0,0.34);
}

.customer-theme .advantage-item {
  min-height: 5.6rem;
  padding: 0.8rem 1rem;
  clip-path: none;
  border: 0;
  border-right: 1px solid rgba(140,153,180,0.15);
  background: transparent;
  box-shadow: none;
}

.customer-theme .advantage-item:last-child { border-right: 0; }

.customer-theme .advantage-icon .icon-circle {
  width: 2.45rem;
  height: 2.45rem;
  background: linear-gradient(135deg, rgba(121,72,255,0.75), rgba(35,140,255,0.62));
  font-size: 0.9rem;
}

.customer-theme .advantage-text h4 { font-size: 0.9rem; }
.customer-theme .advantage-text p { font-size: 0.7rem; line-height: 1.45; }

/* 首屏以下保持高端控制台材质，但拉开信息呼吸 */
.customer-theme.home-page .section-services,
.customer-theme.home-page .section-showcases,
.customer-theme.home-page .section-about,
.customer-theme.home-page .closing-cta {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.customer-theme.home-page .section-services::before,
.customer-theme.home-page .section-showcases::before,
.customer-theme.home-page .section-about::before {
  content: '';
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(105,73,199,0.34), rgba(38,132,220,0.26), transparent);
}

.customer-theme .carousel-card,
.customer-theme .showcase-viewport,
.customer-theme .about-content,
.customer-theme .closing-cta-inner {
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 18%),
    linear-gradient(145deg, rgba(13,17,26,0.98), rgba(4,7,12,0.985));
}

/* 四个内页的命令台标题 */
.customer-theme .page-command-header,
.customer-theme .section-header {
  position: relative;
  margin: 0 0 1.6rem;
  padding: 1.25rem 1.5rem 1.3rem;
  overflow: hidden;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  border: 1px solid rgba(150,164,194,0.24);
  background:
    linear-gradient(90deg, rgba(103,57,220,0.13), transparent 34%, transparent 66%, rgba(197,35,59,0.08)),
    linear-gradient(180deg, rgba(18,22,32,0.95), rgba(5,8,13,0.97));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 12px 30px rgba(0,0,0,0.3);
}

.customer-theme .page-command-header::before,
.customer-theme .section-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 36%;
  height: 2px;
  background: linear-gradient(90deg, var(--v2-purple), transparent);
  box-shadow: 0 0 8px rgba(123,77,255,0.4);
}

.customer-theme .page-command-kicker,
.customer-theme .section-header::after {
  color: #8d70e9;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.32em;
}

.customer-theme .page-command-header h1,
.customer-theme .section-header .section-title {
  margin: 0.2rem 0 0.25rem;
  color: #f3f5fa;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-style: italic;
  font-weight: 900;
  text-align: left;
  letter-spacing: 0.025em;
}

.customer-theme .page-command-header h1::after,
.customer-theme .section-header .section-title::after { display: none; }

.customer-theme .page-command-header p,
.customer-theme .section-header .section-subtitle {
  color: #8d96a8;
  font-size: 0.82rem;
  text-align: left;
}

.customer-theme .shop-page,
.customer-theme .orders-page,
.customer-theme .profile-page {
  margin-top: 0;
  padding-top: 7rem;
  padding-bottom: 4rem;
}

.customer-theme .chat-shell { padding-top: 7rem; padding-bottom: 2rem; }
.customer-theme .chat-shell .chat-page { margin-top: 0; padding-top: 0; height: calc(100vh - 17rem); min-height: 31rem; }

/* 商城 */
.customer-theme .package-section {
  margin-bottom: 2.7rem;
}

.customer-theme .package-section-title {
  position: relative;
  margin: 0 0 1rem;
  padding: 0.5rem 0 0.5rem 1rem;
  color: #f1f3f8;
  font-size: 1rem;
  font-style: italic;
  text-align: left;
  border-left: 3px solid var(--v2-purple);
  background: linear-gradient(90deg, rgba(110,65,229,0.12), transparent 34%);
}

.customer-theme .package-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.customer-theme .package-card {
  --shop-accent: var(--v2-purple);
  width: auto;
  max-width: none;
  min-height: 24rem;
  align-items: center;
  gap: 0.72rem;
  padding: 1.65rem 1.5rem 1.35rem;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--shop-accent) 58%, #27303f);
  border-radius: 0;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  background:
    radial-gradient(circle at 86% 17%, color-mix(in srgb, var(--shop-accent) 11%, transparent), transparent 23%),
    linear-gradient(180deg, rgba(255,255,255,0.045), transparent 16%),
    linear-gradient(145deg, rgba(13,17,26,0.97), rgba(3,6,11,0.985));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 30px rgba(0,0,0,0.34), 0 0 8px color-mix(in srgb, var(--shop-accent) 10%, transparent);
}

.customer-theme .package-card .package-dot-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.88;
}

.customer-theme .package-card .package-dot-field canvas,
.customer-theme .package-card .package-dot-field svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.customer-theme .package-card .package-dot-field.is-canvas-unavailable {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--shop-accent) 32%, transparent) 0 1px, transparent 1.5px);
  background-size: 15.5px 15.5px;
}

.customer-theme .package-card > :not(.package-dot-field) {
  z-index: 1;
}

@media (max-width: 767px) {
  .customer-theme .package-card .package-dot-field {
    opacity: 0.76;
  }
}

.customer-theme .package-list .package-card:nth-child(3n + 2) { --shop-accent: var(--v2-blue); }
.customer-theme .package-list .package-card:nth-child(3n) { --shop-accent: var(--v2-red); }

.customer-theme .package-card.recommended,
.customer-theme .package-card.featured:not(.recommended) {
  transform: none;
  border-width: 1px;
  border-color: color-mix(in srgb, var(--shop-accent) 82%, #303644);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 0 28px color-mix(in srgb, var(--shop-accent) 5%, transparent), 0 0 14px color-mix(in srgb, var(--shop-accent) 16%, transparent), 0 16px 34px rgba(0,0,0,0.4);
}

.customer-theme .recommend-badge {
  top: 0;
  left: 0;
  transform: none;
  padding: 0.35rem 1.7rem 0.35rem 0.8rem;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--shop-accent) 82%, #16111f), color-mix(in srgb, var(--shop-accent) 35%, #080a0f));
  font-size: 0.7rem;
}

.customer-theme .package-card.recommended .package-name { margin-top: 1.4rem; }
.customer-theme .package-name { font-size: 1.35rem; font-style: italic; }
.customer-theme .package-card .package-price { color: var(--shop-accent); font-size: 2rem; }
.customer-theme .package-card .package-subtitle { color: #8c96a9; }
.customer-theme .package-card .package-tags { justify-content: center; }
.customer-theme .package-card .tag { border-radius: 0; border: 1px solid color-mix(in srgb, var(--shop-accent) 35%, transparent); background: color-mix(in srgb, var(--shop-accent) 8%, transparent); color: color-mix(in srgb, var(--shop-accent) 78%, #fff); }
.customer-theme .package-card .package-services { text-align: center; }
.customer-theme .package-services li { border-bottom-color: rgba(141,153,180,0.11); }
.customer-theme .package-services li::before { content: '◈'; margin-right: 0.55rem; color: var(--shop-accent); }
.customer-theme .package-card .buy-btn { border-color: color-mix(in srgb, var(--shop-accent) 62%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--shop-accent) 24%, #070910), color-mix(in srgb, var(--shop-accent) 55%, #0b101a)); color: #fff; }

/* 通用弹窗与表单 */
.customer-theme .modal-overlay {
  background: rgba(0, 1, 4, 0.82);
  backdrop-filter: blur(10px) saturate(0.7);
  -webkit-backdrop-filter: blur(10px) saturate(0.7);
}

.customer-theme .modal-card,
.customer-theme .modal-overlay > .glass-effect {
  border: 1px solid rgba(73, 143, 229, 0.42) !important;
  border-radius: 0 !important;
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 14%),
    linear-gradient(145deg, rgba(15,20,31,0.99), rgba(4,7,13,0.995)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 28px rgba(31,106,202,0.14), 0 24px 70px rgba(0,0,0,0.72) !important;
}

.customer-theme .modal-title {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(123,145,184,0.18);
  font-style: italic;
  font-weight: 800;
}

.customer-theme .modal-input,
.customer-theme .chat-input-area input[type=text] {
  border: 1px solid rgba(121,140,178,0.25);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(4,7,12,0.96), rgba(10,13,20,0.96));
  box-shadow: inset 0 1px 7px rgba(0,0,0,0.58);
}

.customer-theme .modal-input:focus,
.customer-theme .chat-input-area input[type=text]:focus {
  border-color: rgba(45,145,255,0.72);
  box-shadow: inset 0 1px 7px rgba(0,0,0,0.58), 0 0 9px rgba(35,140,255,0.12);
}

.customer-theme .payment-methods .btn,
.customer-theme .pay-method-btn {
  border-color: rgba(96,128,176,0.28);
  background: linear-gradient(90deg, rgba(12,18,29,0.97), rgba(5,8,13,0.98));
}

/* 订单中心 */
.customer-theme .orders-list { gap: 0.9rem; }

.customer-theme .order-card {
  position: relative;
  gap: 0.65rem;
  padding: 1.2rem 1.35rem;
  overflow: hidden;
  border: 1px solid rgba(112,135,174,0.25);
  border-radius: 0;
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  background:
    linear-gradient(90deg, rgba(105,62,222,0.055), transparent 25%),
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 18%),
    linear-gradient(145deg, rgba(12,16,24,0.96), rgba(4,7,12,0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(0,0,0,0.28);
}

.customer-theme .order-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(var(--v2-purple), var(--v2-blue), transparent);
  box-shadow: 0 0 7px rgba(85,106,244,0.35);
}

.customer-theme .order-id { color: #8cbfff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.05em; }
.customer-theme .order-time { color: #737e92; }
.customer-theme .order-hardware { padding: 0.65rem 0.75rem; border: 1px solid rgba(121,139,174,0.12); background: rgba(2,5,9,0.38); }
.customer-theme .package-link { color: #7bb7ff; text-decoration: none; }
.customer-theme .status-tag { border-radius: 0; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.customer-theme .pagination-controls { padding: 0.7rem; border-top: 1px solid rgba(127,145,177,0.15); }
.customer-theme .page-btn { border-radius: 0; border-color: rgba(108,130,170,0.3); background: linear-gradient(180deg, #161b25, #090c12); }

/* 聊天指挥台 */
.customer-theme .chat-session-panel,
.customer-theme .chat-window {
  border: 1px solid rgba(88,130,185,0.28);
  border-radius: 0;
  clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 15%),
    linear-gradient(145deg, rgba(11,15,23,0.97), rgba(3,6,10,0.985));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 28px rgba(0,0,0,0.33);
}

.customer-theme .chat-panel-title,
.customer-theme .chat-window-header {
  color: #eef2f8;
  font-style: italic;
  letter-spacing: 0.06em;
  border-bottom-color: rgba(92,136,196,0.2);
}

.customer-theme .chat-session-item {
  border: 1px solid transparent;
  border-radius: 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.customer-theme .chat-session-item:hover,
.customer-theme .chat-session-item.active {
  border-color: rgba(49,143,255,0.32);
  background: linear-gradient(90deg, rgba(35,140,255,0.15), rgba(91,66,204,0.08));
}

.customer-theme .chat-session-avatar {
  border-radius: 0;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  background: linear-gradient(135deg, #5831b6, #1769b8);
  box-shadow: 0 0 8px rgba(70,107,222,0.2);
}

.customer-theme .chat-unread-badge { border-radius: 0; background: #c82f49; }
.customer-theme .chat-msg { border-radius: 0; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.customer-theme .chat-msg.mine { border: 1px solid rgba(41,145,255,0.3); background: linear-gradient(135deg, rgba(23,88,161,0.48), rgba(28,54,102,0.52)); }
.customer-theme .chat-msg.theirs { border: 1px solid rgba(135,147,172,0.16); background: rgba(18,22,31,0.76); }
.customer-theme .chat-input-area { border-top-color: rgba(84,130,189,0.2); background: rgba(2,5,9,0.48); }
.customer-theme .chat-send-btn { border-radius: 0; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); background: linear-gradient(135deg, #195ca7, #268ce9); color: #fff; }
.customer-theme .chat-img-btn { border-radius: 0; color: #8dbfff; background: #090d14; }

/* 个人中心 */
.customer-theme .profile-card,
.customer-theme .account-section,
.customer-theme .account-overview-card {
  border: 1px solid rgba(108,132,174,0.25);
  border-radius: 0;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 17%),
    linear-gradient(145deg, rgba(12,16,24,0.97), rgba(4,7,12,0.985));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 28px rgba(0,0,0,0.3);
}

.customer-theme .profile-card { padding: 1.6rem; }

.customer-theme .large-avatar {
  width: 4.4rem;
  height: 4.4rem;
  border: 1px solid rgba(125,83,255,0.7);
  border-radius: 0;
  clip-path: polygon(13px 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
  background: linear-gradient(135deg, #512aab, #1b66b0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 13px rgba(89,71,221,0.22);
}

.customer-theme .user-role-tag { border-radius: 0; border: 1px solid rgba(39,143,255,0.32); background: rgba(35,140,255,0.08); }
.customer-theme .account-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.customer-theme .account-overview-card { padding: 1.25rem; }
.customer-theme .account-overview-label { color: #7c879b; font-size: 0.7rem; letter-spacing: 0.14em; }
.customer-theme .account-overview-value { display: block; margin-top: 0.35rem; color: #eef3fb; font-size: 1.5rem; font-weight: 800; }
.customer-theme .account-overview-note { margin-top: 0.35rem; color: #687286; font-size: 0.68rem; }
.customer-theme .account-section { padding: 1.2rem; }

@media (max-width: 1023px) {
  .customer-theme.home-page .main-content::before { height: 82rem; }
  .customer-theme .package-preview-card { min-height: 20.5rem; }
  .customer-theme .package-preview-card h4,
  .customer-theme .package-preview-card > p { max-width: 100%; }
  .customer-theme .package-preview-card::after { display: none; }
  .customer-theme .advantages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-theme .advantage-item:nth-child(2) { border-right: 0; }
  .customer-theme .advantage-item:nth-child(-n+2) { border-bottom: 1px solid rgba(140,153,180,0.15); }
  .customer-theme .package-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .customer-theme:not(.home-page)::after { opacity: 0.38; }
  .customer-theme.home-page .main-content::before { height: 118rem; background-position: 42% top; opacity: 0.72; }
  .customer-theme.home-page .hero-section { padding-top: 5.8rem; padding-bottom: 1rem; }
  .customer-theme.home-page .hero-title { font-size: clamp(2.5rem, 13vw, 3.7rem); }
  .customer-theme.home-page .hero-subtitle { font-size: 0.82rem; }
  .customer-theme.home-page .hero-trust-text { font-size: 0.62rem; }
  .customer-theme .performance-band { padding: 1.2rem 0.85rem; }
  .customer-theme.home-page .section-packages { padding-top: 0.65rem; }
  .customer-theme .package-preview-card { min-height: 0; }
  .customer-theme .package-features { grid-template-columns: 1fr 1fr; }
  .customer-theme .advantages-grid { grid-template-columns: 1fr; padding: 0.55rem 0.75rem; }
  .customer-theme .advantage-item,
  .customer-theme .advantage-item:nth-child(2) { border-right: 0; border-bottom: 1px solid rgba(140,153,180,0.15); }
  .customer-theme .advantage-item:last-child { border-bottom: 0; }
  .customer-theme .page-command-header,
  .customer-theme .section-header { padding: 1rem; }
  .customer-theme .shop-page,
  .customer-theme .orders-page,
  .customer-theme .profile-page { padding-top: 4.8rem; }
  .customer-theme .chat-shell { padding-top: 4.8rem; padding-bottom: 1rem; }
  .customer-theme .chat-shell .chat-page { padding-top: 0; height: auto; min-height: calc(100vh - 15rem); }
  .customer-theme .package-list { grid-template-columns: 1fr; }
  .customer-theme .package-card { min-height: 0; }
  .customer-theme .order-actions { flex-direction: column; }
  .customer-theme .account-overview-grid { grid-template-columns: 1fr; }
}

/* V3 Typography System：五页共享同一套展示、标题、正文、标签与工业数字角色 */
.customer-theme {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-primary);
}

.customer-theme p,
.customer-theme li,
.customer-theme label,
.customer-theme input,
.customer-theme textarea,
.customer-theme select {
  font-style: normal;
  line-height: 1.65;
}

.customer-theme p,
.customer-theme .package-subtitle,
.customer-theme .order-desc,
.customer-theme .card-desc,
.customer-theme .about-text,
.customer-theme .closing-cta p {
  color: var(--text-secondary);
  font-size: var(--type-body);
  font-weight: 400;
}

.customer-theme .showcase-note,
.customer-theme .performance-note,
.customer-theme .order-time,
.customer-theme .chat-session-time,
.customer-theme .chat-msg-time,
.customer-theme .account-overview-note,
.customer-theme .hero-trust-text {
  color: var(--text-tertiary);
  font-size: var(--type-caption);
  font-weight: 400;
}

.customer-theme.home-page .hero-title,
.customer-theme .splash-title,
.customer-theme .closing-cta h3 {
  font-family: var(--type-display);
  font-size: var(--type-display-xl);
  font-style: normal;
  font-weight: 900;
  font-stretch: condensed;
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.customer-theme.home-page .hero-title {
  background: linear-gradient(180deg, #ffffff 0%, #f1f3f7 46%, #aeb4c0 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.6px rgba(255, 255, 255, 0.38);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18)) drop-shadow(0 3px 1px rgba(0, 0, 0, 0.78)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.08));
}

.customer-theme .page-command-header h1,
.customer-theme .section-header .section-title {
  font-family: var(--type-display);
  font-size: var(--type-heading-1);
  font-style: normal;
  font-weight: 900;
  font-stretch: condensed;
  line-height: 1.08;
  letter-spacing: -0.035em;
  background: linear-gradient(180deg, #ffffff 0%, #eef1f6 55%, #b4bbc7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.customer-theme .section-title,
.customer-theme .package-preview-card h4,
.customer-theme .package-name,
.customer-theme .package-section-title,
.customer-theme .modal-title,
.customer-theme .chat-panel-title,
.customer-theme .chat-window-header,
.customer-theme .advantage-text h4,
.customer-theme .user-nickname,
.customer-theme .account-section h3 {
  font-family: var(--type-heading);
  font-style: normal;
  font-weight: 750;
  font-stretch: condensed;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  text-shadow: none;
}

.customer-theme .section-title {
  font-size: var(--type-heading-1);
}

.customer-theme .package-preview-card h4,
.customer-theme .package-name {
  font-size: var(--type-heading-2);
}

.customer-theme .package-section-title,
.customer-theme .modal-title,
.customer-theme .chat-panel-title,
.customer-theme .chat-window-header,
.customer-theme .advantage-text h4,
.customer-theme .account-section h3 {
  font-size: var(--type-heading-3);
}

.customer-theme .hero-eyebrow,
.customer-theme .page-command-kicker,
.customer-theme .section-kicker,
.customer-theme .package-badge,
.customer-theme .recommend-badge,
.customer-theme .tag,
.customer-theme .card-tag,
.customer-theme .account-overview-label,
.customer-theme .user-role-tag {
  font-family: var(--type-data);
  font-size: var(--type-micro);
  font-style: normal;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.customer-theme .hero-eyebrow,
.customer-theme .page-command-kicker,
.customer-theme .section-kicker {
  letter-spacing: 0.22em;
  text-shadow: 0 0 5px rgba(129, 84, 255, 0.26);
}

.customer-theme .desktop-nav .nav-menu a,
.customer-theme .mobile-bottom-tab .tab-item,
.customer-theme .btn,
.customer-theme button {
  font-family: var(--type-ui);
  font-style: normal;
  font-weight: 650;
}

.customer-theme .desktop-nav .nav-menu a {
  letter-spacing: 0.075em;
  text-shadow: none;
}

.customer-theme .desktop-nav .nav-menu a:hover,
.customer-theme .desktop-nav .nav-menu a.active {
  text-shadow: 0 0 6px rgba(149, 103, 255, 0.34);
}

.customer-theme .mobile-bottom-tab .tab-item.active {
  text-shadow: 0 0 5px rgba(135, 87, 255, 0.32);
}

.customer-theme .btn,
.customer-theme button {
  letter-spacing: 0.035em;
  text-shadow: none !important;
}

.customer-theme .metric strong,
.customer-theme .package-price,
.customer-theme .price-number,
.customer-theme .price-original,
.customer-theme .account-overview-value,
.customer-theme .order-id,
.customer-theme .page-info,
.customer-theme .chat-session-time,
.customer-theme .chat-msg-time,
.customer-theme .order-time,
.customer-theme .chat-unread-badge {
  font-family: var(--type-data);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-style: normal;
  letter-spacing: -0.025em;
}

.customer-theme .metric strong {
  font-size: var(--type-data-l);
  font-weight: 800;
  line-height: 1;
  text-shadow: none;
}

.customer-theme .performance-metrics.after .metric strong {
  text-shadow: 0 0 6px currentColor;
}

.customer-theme .package-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12em;
  font-size: inherit;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 6px color-mix(in srgb, currentColor 25%, transparent);
}

.customer-theme .package-price .price-currency {
  font-size: 0.52em;
  font-weight: 650;
  opacity: 0.82;
}

.customer-theme .package-price .price-number {
  font-size: var(--type-data-xl);
  letter-spacing: -0.045em;
}

.customer-theme .package-price small,
.customer-theme .package-price .price-unit {
  margin-left: 0.1em;
  color: var(--text-tertiary);
  font-family: var(--type-ui);
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0;
  text-shadow: none;
}

.customer-theme .package-price s {
  display: inline-flex;
  align-items: baseline;
  gap: 0.08em;
  margin-right: 0.45rem;
  color: var(--text-tertiary) !important;
  font-size: 0.72em;
  font-weight: 500;
  text-shadow: none;
}

.customer-theme .order-id {
  color: #91bfff;
  font-size: var(--type-data-m);
  font-weight: 700;
  letter-spacing: 0.035em;
}

.customer-theme .status-tag {
  position: relative;
  padding: 0.24rem 0.68rem;
  border: 1px solid rgba(135, 151, 179, 0.28);
  background: rgba(126, 141, 167, 0.08);
  color: #aeb7c7;
  font-size: var(--type-caption);
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0.035em;
  text-shadow: none;
}

.customer-theme .status-tag::before {
  content: '';
  display: inline-block;
  width: 0.34rem;
  height: 0.34rem;
  margin-right: 0.38rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 4px currentColor;
  vertical-align: 0.08em;
}

.customer-theme .status-tag.pending,
.customer-theme .status-tag.unpaid {
  border-color: rgba(184, 151, 95, 0.38) !important;
  background: rgba(184, 151, 95, 0.08) !important;
  color: #c9ad78 !important;
}

.customer-theme .status-tag.assigned,
.customer-theme .status-tag.ongoing,
.customer-theme .status-tag.debugging {
  border-color: rgba(66, 153, 235, 0.4) !important;
  background: rgba(43, 136, 224, 0.09) !important;
  color: #75b9f5 !important;
}

.customer-theme .status-tag.finished,
.customer-theme .status-tag.paid {
  border-color: rgba(91, 168, 180, 0.36) !important;
  background: rgba(64, 145, 158, 0.08) !important;
  color: #8fc7cf !important;
}

.customer-theme .status-tag.cancelled,
.customer-theme .status-tag.refunded {
  border-color: rgba(203, 67, 88, 0.38) !important;
  background: rgba(184, 46, 68, 0.08) !important;
  color: #df7a8a !important;
}

.customer-theme .chat-status {
  color: var(--text-tertiary);
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: none;
}

.customer-theme .global-login-overlay {
  background: rgba(0, 1, 4, 0.84);
  backdrop-filter: blur(10px) saturate(0.72);
  -webkit-backdrop-filter: blur(10px) saturate(0.72);
}

.customer-theme .global-login-card {
  border: 1px solid rgba(97, 132, 191, 0.34);
  border-radius: 0;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), transparent 16%),
    linear-gradient(145deg, rgba(14,18,28,0.99), rgba(4,7,12,0.995));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 24px 70px rgba(0,0,0,0.7), 0 0 18px rgba(64,103,184,0.12);
}

.customer-theme .auth-tab {
  color: var(--text-tertiary);
  font-family: var(--type-heading);
  font-size: var(--type-heading-3);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: none;
}

.customer-theme .auth-tab.active {
  color: var(--text-primary);
  text-shadow: 0 0 5px rgba(71, 153, 255, 0.28);
}

.customer-theme .switch-text,
.customer-theme .switch-link {
  font-size: var(--type-caption);
  font-style: normal;
}

.customer-theme .switch-text { color: var(--text-tertiary); }
.customer-theme .switch-link { color: #82baff; }

.customer-theme .desktop-nav .nav-logo {
  font-family: var(--type-heading);
  font-style: normal;
  letter-spacing: 0.035em;
  text-shadow: none;
}

.customer-theme .desktop-nav .nav-logo::before,
.customer-theme .desktop-nav .nav-logo::after {
  font-family: var(--type-data);
}

@media (max-width: 767px) {
  .customer-theme.home-page .hero-title {
    font-size: clamp(2.6rem, 13vw, 3.7rem);
    line-height: 0.96;
  }

  .customer-theme .page-command-header h1,
  .customer-theme .section-header .section-title {
    font-size: clamp(1.65rem, 8vw, 2.1rem);
  }

  .customer-theme .package-price .price-number {
    font-size: clamp(1.9rem, 10vw, 2.35rem);
  }
}

/* V6 Hero Title：庞门正道标题体 4.0，仅作用于首页主标题 */
.customer-theme.home-page .metal-plate {
  width: min(100%, 1080px);
  padding-inline: clamp(1.8rem, 4vw, 3.8rem);
}

.customer-theme.home-page .hero-title {
  display: inline-block;
  margin: 0;
  font-family: "PangMen ZhengDao Title", "ZT YueDongHei", "PingFang SC", "Microsoft YaHei UI", sans-serif;
  font-size: clamp(3.5rem, 7.8vw, 7rem);
  font-style: normal;
  font-weight: 400;
  font-synthesis: none;
  white-space: nowrap;
  line-height: 0.94;
  letter-spacing: -0.055em;
  transform: scaleX(0.96);
  transform-origin: 50% 56%;
  color: #fff;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-text-stroke: 0;
  filter: drop-shadow(3px 4px 0 rgba(16, 19, 27, 0.98)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.08));
}

.customer-theme.home-page .sweep-light {
  display: none !important;
}

@media (min-width: 768px) {
  .customer-theme.home-page .metal-glare {
    display: block !important;
    z-index: 4;
    mix-blend-mode: screen;
  }
}

@media (max-width: 767px) {
  .customer-theme.home-page .metal-plate {
    padding-inline: 0.35rem;
  }

  .customer-theme.home-page .hero-title {
    font-size: clamp(2.25rem, 10.5vw, 3rem);
    line-height: 0.92;
    letter-spacing: -0.06em;
    transform: scaleX(0.96);
  }

  .customer-theme.home-page .metal-glare {
    display: none !important;
  }
}

/* Hero 主标题试用：低强度、仅悬停触发的故障切片 */
.customer-theme.home-page .hero-glitch {
  position: relative;
  isolation: isolate;
}

.customer-theme.home-page .hero-glitch::before,
.customer-theme.home-page .hero-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  color: #f7f8fc;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #f7f8fc;
  -webkit-text-stroke: 0;
  filter: none;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .customer-theme.home-page .metal-plate:hover .hero-glitch::before {
    opacity: 0.52;
    text-shadow: -3px 0 rgba(67, 196, 255, 0.88);
    animation: hero-glitch-before 0.92s steps(1, end) infinite alternate-reverse;
  }

  .customer-theme.home-page .metal-plate:hover .hero-glitch::after {
    opacity: 0.42;
    text-shadow: 3px 0 rgba(255, 55, 91, 0.82);
    animation: hero-glitch-after 1.18s steps(1, end) infinite alternate-reverse;
  }
}

@keyframes hero-glitch-before {
  0%, 100% { clip-path: inset(12% 0 72% 0); transform: translateX(-1px); }
  24% { clip-path: inset(62% 0 18% 0); transform: translateX(2px); }
  48% { clip-path: inset(36% 0 46% 0); transform: translateX(-2px); }
  72% { clip-path: inset(78% 0 8% 0); transform: translateX(1px); }
}

@keyframes hero-glitch-after {
  0%, 100% { clip-path: inset(68% 0 14% 0); transform: translateX(1px); }
  28% { clip-path: inset(18% 0 64% 0); transform: translateX(-2px); }
  56% { clip-path: inset(48% 0 30% 0); transform: translateX(2px); }
  82% { clip-path: inset(30% 0 56% 0); transform: translateX(-1px); }
}

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
  .customer-theme.home-page .hero-glitch::before,
  .customer-theme.home-page .hero-glitch::after {
    content: none;
    animation: none !important;
  }
}

/* ========================================================================== */
/* 首页统一竞技场卡片框：方案 / 服务 / 实机案例 */
/* ========================================================================== */
.customer-theme.home-page .package-preview-card,
.customer-theme.home-page .carousel-card,
.customer-theme.home-page .showcase-viewport {
  --arena-frame-dark: #182a49;
  --arena-left-light: #5aa9ff;
  --arena-left-mid: #2e67b2;
  --arena-center: #318edb;
  --arena-right-mid: #2e67b2;
  --arena-right-light: #5aa9ff;
  --arena-frame-shape: polygon(
    16px 0,
    calc(100% - 38px) 0,
    100% 30px,
    calc(100% - 1px) calc(100% - 26px),
    calc(100% - 27px) 100%,
    24px 100%,
    0 calc(100% - 24px),
    2px 18px
  );
  border: 0;
  border-radius: 0;
  clip-path: var(--arena-frame-shape);
  background:
    linear-gradient(180deg, rgba(62, 114, 179, 0.08), transparent 16%),
    radial-gradient(circle at 82% 9%, rgba(34, 93, 161, 0.09), transparent 27%),
    linear-gradient(145deg, rgba(8, 14, 24, 0.99), rgba(2, 7, 13, 0.995));
  box-shadow:
    inset 0 0 32px rgba(42, 96, 162, 0.07),
    0 16px 36px rgba(0, 0, 0, 0.36),
    0 0 13px rgba(44, 126, 218, 0.1);
}

.customer-theme.home-page .package-preview-card.purple {
  --arena-frame-dark: #291852;
  --arena-left-light: #ad8cff;
  --arena-left-mid: #7149df;
  --arena-center: #794fe9;
  --arena-right-mid: #653bcf;
  --arena-right-light: #9b72ff;
}

.customer-theme.home-page .package-preview-card.blue {
  --arena-frame-dark: #182a49;
  --arena-left-light: #5aa9ff;
  --arena-left-mid: #2e67b2;
  --arena-center: #318edb;
  --arena-right-mid: #2e67b2;
  --arena-right-light: #5aa9ff;
}

.customer-theme.home-page .package-preview-card.red {
  --arena-frame-dark: #581823;
  --arena-left-light: #ff7b84;
  --arena-left-mid: #d94355;
  --arena-center: #e34b5d;
  --arena-right-mid: #c93347;
  --arena-right-light: #ff6572;
}

.customer-theme.home-page .package-preview-card.purple .package-price {
  color: var(--customer-purple);
}

.customer-theme.home-page .carousel-card,
.customer-theme.home-page .showcase-viewport {
  --arena-frame-dark: #1c2340;
  --arena-left-light: #a783ff;
  --arena-left-mid: #7046dc;
  --arena-center: #537dff;
  --arena-right-mid: #318edb;
  --arena-right-light: #5aa9ff;
  background:
    radial-gradient(circle at 7% 16%, rgba(128, 76, 237, 0.09), transparent 24%),
    radial-gradient(circle at 52% 0%, rgba(83, 125, 255, 0.075), transparent 28%),
    radial-gradient(circle at 94% 84%, rgba(49, 142, 219, 0.075), transparent 25%),
    linear-gradient(145deg, rgba(8, 14, 24, 0.99), rgba(2, 7, 13, 0.995));
}

.customer-theme.home-page .package-preview-card,
.customer-theme.home-page .showcase-viewport {
  position: relative;
}

.customer-theme.home-page .carousel-card {
  position: absolute;
}

@media (max-width: 900px) {
  .customer-theme.home-page .carousel-card {
    position: static;
  }
}

.customer-theme.home-page .package-preview-card::before,
.customer-theme.home-page .carousel-card::before,
.customer-theme.home-page .showcase-viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  height: auto;
  padding: 2px;
  pointer-events: none;
  clip-path: var(--arena-frame-shape);
  background: linear-gradient(
    90deg,
    var(--arena-left-light) 0%,
    var(--arena-left-mid) 25%,
    var(--arena-center) 52%,
    var(--arena-right-mid) 76%,
    var(--arena-right-light) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.78;
}

.customer-theme.home-page .package-preview-card::after,
.customer-theme.home-page .carousel-card::after,
.customer-theme.home-page .showcase-viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  pointer-events: none;
  clip-path: var(--arena-frame-shape);
  opacity: 0.94;
  background:
    linear-gradient(to bottom right, transparent 42%, var(--arena-left-light) 45% 57%, transparent 60%) top left / 18px 20px no-repeat,
    linear-gradient(to bottom left, transparent 42%, var(--arena-right-light) 45% 59%, transparent 62%) top right / 40px 32px no-repeat,
    linear-gradient(to bottom right, transparent 41%, var(--arena-right-mid) 45% 60%, transparent 63%) bottom right / 29px 28px no-repeat,
    linear-gradient(to bottom left, transparent 42%, var(--arena-left-mid) 46% 59%, transparent 63%) bottom left / 26px 26px no-repeat,
    linear-gradient(90deg, var(--arena-left-light), var(--arena-left-mid) 25%, var(--arena-center) 52%, var(--arena-right-mid) 76%, var(--arena-right-light)) top left 16px / calc(100% - 54px) 3px no-repeat,
    linear-gradient(180deg, var(--arena-right-light), var(--arena-frame-dark) 58%, var(--arena-right-mid)) top 30px right / 5px calc(100% - 56px) no-repeat,
    linear-gradient(90deg, var(--arena-left-mid), var(--arena-center) 52%, var(--arena-right-mid) 78%, var(--arena-right-light)) bottom left 24px / calc(100% - 51px) 5px no-repeat,
    linear-gradient(180deg, var(--arena-left-light), var(--arena-frame-dark) 54%, var(--arena-left-mid)) top 18px left 1px / 2px calc(100% - 42px) no-repeat;
  filter:
    drop-shadow(0 0 3px rgba(60, 148, 255, 0.38))
    drop-shadow(0 0 8px rgba(28, 88, 166, 0.16));
}

@media (max-width: 767px) {
  .customer-theme.home-page .package-preview-card,
  .customer-theme.home-page .carousel-card,
  .customer-theme.home-page .showcase-viewport {
    --arena-frame-shape: polygon(
      12px 0,
      calc(100% - 28px) 0,
      100% 22px,
      calc(100% - 1px) calc(100% - 20px),
      calc(100% - 21px) 100%,
      18px 100%,
      0 calc(100% - 18px),
      1px 14px
    );
  }

  .customer-theme.home-page .package-preview-card::after,
  .customer-theme.home-page .carousel-card::after,
  .customer-theme.home-page .showcase-viewport::after {
    background:
      linear-gradient(to bottom right, transparent 42%, var(--arena-left-light) 45% 58%, transparent 61%) top left / 14px 16px no-repeat,
      linear-gradient(to bottom left, transparent 42%, var(--arena-right-light) 45% 60%, transparent 63%) top right / 30px 24px no-repeat,
      linear-gradient(to bottom right, transparent 41%, var(--arena-right-mid) 45% 61%, transparent 64%) bottom right / 23px 22px no-repeat,
      linear-gradient(to bottom left, transparent 42%, var(--arena-left-mid) 46% 60%, transparent 64%) bottom left / 20px 20px no-repeat,
      linear-gradient(90deg, var(--arena-left-light), var(--arena-left-mid) 25%, var(--arena-center) 52%, var(--arena-right-mid) 76%, var(--arena-right-light)) top left 12px / calc(100% - 40px) 3px no-repeat,
      linear-gradient(180deg, var(--arena-right-light), var(--arena-frame-dark) 58%, var(--arena-right-mid)) top 22px right / 4px calc(100% - 42px) no-repeat,
      linear-gradient(90deg, var(--arena-left-mid), var(--arena-center) 52%, var(--arena-right-mid) 78%, var(--arena-right-light)) bottom left 18px / calc(100% - 39px) 4px no-repeat,
      linear-gradient(180deg, var(--arena-left-light), var(--arena-frame-dark) 54%, var(--arena-left-mid)) top 14px left / 2px calc(100% - 32px) no-repeat;
  }
}

/* 品牌 Logo：五个用户端页面共用同一份高清透明图 */
.customer-theme .desktop-nav .nav-logo {
  padding-left: 3.85rem;
}

.customer-theme .desktop-nav .nav-logo::before {
  content: '';
  left: 0;
  top: 50%;
  width: 3.15rem;
  height: 3.15rem;
  display: block;
  transform: translateY(-50%);
  clip-path: none;
  background: url('../assets/images/branding/yaozhen-logo-hd.png') center / contain no-repeat;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 9px rgba(116, 72, 255, 0.28));
}

@media (max-width: 767px) {
  .customer-theme .desktop-nav .nav-logo {
    padding-left: 3rem;
  }

  .customer-theme .desktop-nav .nav-logo::before {
    width: 2.55rem;
    height: 2.55rem;
  }
}

/* 首页开屏：Seedance 性能核心视频 + 真实品牌与入口控件 */
.customer-theme .splash {
  isolation: isolate;
  background: #020308;
}

.customer-theme .splash-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  background: #020308;
  transition: opacity 0.2s ease;
}

.customer-theme .splash-video-intro {
  opacity: 1;
}

.customer-theme .splash-video-idle {
  opacity: 0;
}

.customer-theme .splash.is-idle-loop .splash-video-intro {
  opacity: 0;
}

.customer-theme .splash.is-idle-loop .splash-video-idle {
  opacity: 1;
}

.customer-theme .splash-video-vignette {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 41%, transparent 0 18%, rgba(2, 3, 8, 0.08) 30%, rgba(2, 3, 8, 0.38) 72%, rgba(2, 3, 8, 0.7) 100%),
    linear-gradient(180deg, rgba(2, 3, 8, 0.08), transparent 55%, rgba(2, 3, 8, 0.44));
}

.customer-theme .splash-content {
  position: relative;
  z-index: 4;
  width: min(34rem, 90vw);
  transform: translateY(-10vh);
  text-align: center;
}

.customer-theme .splash-sound-toggle {
  position: absolute;
  z-index: 5;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.45rem;
  padding: 0.58rem 0.8rem;
  border: 1px solid rgba(182, 169, 255, 0.28);
  border-radius: 999px;
  background: rgba(7, 8, 16, 0.58);
  box-shadow: 0 0 1.2rem rgba(103, 70, 210, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  color: #b8c0d2;
  cursor: pointer;
  font: 650 0.72rem/1 var(--type-ui);
  letter-spacing: 0.08em;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.customer-theme .splash-sound-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
  overflow: visible;
  fill: currentColor;
}

.customer-theme .splash-sound-toggle .sound-wave {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.customer-theme .splash-sound-toggle:hover,
.customer-theme .splash-sound-toggle:focus-visible,
.customer-theme .splash-sound-toggle[aria-pressed="true"] {
  border-color: rgba(189, 151, 255, 0.7);
  background: rgba(45, 24, 88, 0.62);
  color: #f0eaff;
  transform: translateY(-1px);
  outline: none;
}

.customer-theme .splash-content::before {
  content: none;
}

.customer-theme .splash-logo,
.customer-theme .splash-title,
.customer-theme .splash-subtitle {
  opacity: 0;
  transform: translateY(0.8rem) scale(0.94);
  transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.customer-theme .splash-logo {
  display: block;
  width: clamp(5.4rem, 8vw, 7.5rem);
  height: auto;
  margin: 0 auto 0.5rem;
  filter: drop-shadow(0 0 1.3rem rgba(116, 72, 255, 0.5));
}

.customer-theme .splash-title {
  margin: 0;
  color: #f6f7ff;
  font-size: clamp(2rem, 4.2vw, 3.55rem);
  letter-spacing: 0.1em;
  text-shadow: 0 0 1.5rem rgba(147, 104, 255, 0.36), 0 0.12rem 0.35rem rgba(0, 0, 0, 0.92);
}

.customer-theme .splash-subtitle {
  margin: 0.65rem 0 0;
  color: #aeb7cc;
  font-size: clamp(0.72rem, 1.15vw, 0.86rem);
  letter-spacing: 0.42em;
  text-shadow: 0 0.12rem 0.35rem rgba(0, 0, 0, 0.92);
  transition-delay: 0.08s;
}

.customer-theme .splash.is-brand-visible .splash-logo,
.customer-theme .splash.is-brand-visible .splash-title,
.customer-theme .splash.is-brand-visible .splash-subtitle {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.customer-theme .splash-entry {
  margin-top: 2rem;
}

.customer-theme .splash.is-ready .splash-enter-button::after {
  animation: splash-button-scan 2.6s ease-in-out 1.1s infinite;
}

.customer-theme .splash.is-settled .splash-logo {
  animation: splash-logo-breathe 3.8s ease-in-out infinite;
}

.customer-theme .splash.is-video-fallback .splash-video {
  display: none;
}

@keyframes splash-button-scan {
  0%, 56% { transform: translateX(-130%); }
  76%, 100% { transform: translateX(130%); }
}

@keyframes splash-logo-breathe {
  0%, 100% { filter: drop-shadow(0 0 1rem rgba(116, 72, 255, 0.38)); }
  50% { filter: drop-shadow(0 0 1.7rem rgba(116, 72, 255, 0.64)); }
}

@media (max-width: 767px) {
  /* Keep normal scrolling and pinch gestures, but disable double-tap zoom. */
  .customer-theme {
    touch-action: manipulation;
  }

  .customer-theme .splash-video {
    object-position: 50% 42%;
  }

  .customer-theme .splash-content {
    width: min(25rem, 88vw);
    transform: translateY(-10vh);
  }

  .customer-theme .splash-sound-toggle {
    top: max(0.7rem, env(safe-area-inset-top));
    right: max(0.7rem, env(safe-area-inset-right));
    min-height: 2.25rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.66rem;
  }

  .customer-theme .splash-logo {
    width: clamp(4.6rem, 22vw, 6.2rem);
  }

  .customer-theme .splash-title {
    font-size: clamp(1.75rem, 9vw, 2.45rem);
  }

  .customer-theme .splash-subtitle {
    font-size: 0.68rem;
    letter-spacing: 0.3em;
  }

  .customer-theme .splash-entry {
    margin-top: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .customer-theme .splash-logo,
  .customer-theme .splash-title,
  .customer-theme .splash-subtitle,
  .customer-theme .splash.is-ready .splash-enter-button::after,
  .customer-theme .splash.is-settled .splash-logo {
    animation: none;
    transition: none;
  }

  .customer-theme .splash-video {
    transition: none;
  }
}

/* 首页底部两张大卡片紧凑衔接 */
.customer-theme.home-page .section-about {
  padding-bottom: 0.5rem;
}

.customer-theme.home-page .closing-cta {
  padding-top: 0.5rem;
}