/* ============================================================
   可玩 KEWAN · 复古未来 CRT 主题
   方向：碳黑蓝基底 / 电光蓝主色 / 琥珀购买强调 / 等宽终端细节
   展示字 Chakra Petch · 等宽 IBM Plex Mono · 中文黑体 900
   ============================================================ */
:root {
  /* -- 颜色令牌 -- */
  --bg: #05070d;
  --bg-2: #070b14;
  --surface: #0a101c;
  --panel: #0c1322;
  --panel-2: #101a30;
  --line: rgba(148, 184, 255, .13);
  --line-strong: rgba(148, 184, 255, .3);
  --text: #e8eef8;
  --muted: #97a3b8;            /* 对 --bg 对比度 ≥ 5:1 */
  --accent: #5aa9ff;           /* 电光蓝 */
  --accent-dim: rgba(90, 169, 255, .1);
  --amber: #ffb347;            /* 关键动作专用 */
  --amber-dim: rgba(255, 179, 71, .12);
  --danger: #ff7a7a;
  --warn: #ffd166;
  /* -- 字体 -- */
  --f-disp: "Chakra Petch", "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-mono: "IBM Plex Mono", Consolas, monospace;
  --f-body: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  /* -- 字阶（1.25 比例） -- */
  --t-xs: 12px; --t-sm: 13.5px; --t-base: 15px; --t-md: 17px;
  --t-lg: 21px; --t-xl: 27px; --t-2xl: 36px; --t-hero: clamp(44px, 6.4vw, 84px);
  /* -- 间距 -- */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px; --s7: 104px;
  /* -- 几何 -- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px;
  --shadow-1: 0 2px 8px rgba(0,0,0,.35);
  --shadow-2: 0 8px 28px rgba(0,0,0,.45);
  --shadow-3: 0 24px 64px rgba(0,0,0,.55);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 160ms; --dur-base: 320ms; --dur-slow: 640ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.75;
  letter-spacing: .02em;
  min-height: 100vh;
  display: flex; flex-direction: column;
  overflow-x: hidden;
}
/* 全站颗粒氛围层 */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
a { color: var(--accent); text-decoration: none; }
a:hover { opacity: .85; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.mono { font-family: var(--f-mono); letter-spacing: 0; }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
.ok-text { color: var(--accent); }
.mt { margin-top: var(--s4); }
.center { text-align: center; }
::selection { background: var(--accent); color: #041020; }

/* 宽幅容器：1320px，两侧 64px 呼吸留白 */
.shell { width: min(1320px, calc(100% - 128px)); margin-inline: auto; }
/* 中窄容器：下载/教程/商城专用，内容向中间收拢 */
.shell-mid { width: min(1080px, calc(100% - 128px)); margin-inline: auto; }
main { flex: 1; display: block; }

/* ============ 公告 / 头部 ============ */
.announce {
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 7px 24px; font-size: var(--t-xs); color: var(--muted);
}
.announce-tag { color: var(--accent); margin-right: 6px; }
.site-header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(5, 7, 13, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-logo { width: 30px; height: 30px; }
.brand-name {
  font-family: var(--f-disp); font-weight: 700; font-size: 18px;
  letter-spacing: .12em; color: var(--text);
}
.brand-name em { color: var(--accent); font-style: normal; margin: 0 2px; }
.nav { display: flex; gap: 2px; flex: 1; }
.nav a {
  color: var(--muted); padding: 8px 14px; border-radius: var(--r-sm);
  font-size: var(--t-sm); position: relative; transition: color var(--dur-fast) ease-out;
}
.nav a i { font-style: normal; color: var(--accent); opacity: .55; font-size: 10px; margin-right: 5px; vertical-align: 2px; }
.nav a:hover { color: var(--text); opacity: 1; background: var(--accent-dim); }
.nav a.on { color: var(--accent); }
.nav a.on::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1px;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
}
.nav-user { display: flex; gap: 8px; }

/* ============ 按钮 ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 24px; border-radius: var(--r-sm);
  font-size: var(--t-base); font-weight: 600; font-family: var(--f-body);
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: transform var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out,
              background var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out;
  position: relative; overflow: hidden;
}
.btn:hover { opacity: 1; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
/* 琥珀主按钮（购买动作专用）：填充擦除悬停 */
.btn-amber { background: var(--amber); color: #1d1204; font-weight: 700; }
.btn-amber::before {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  transform: translateX(-101%); transition: transform var(--dur-base) var(--ease-out); z-index: 0;
}
.btn-amber:hover::before { transform: translateX(0); }
.btn-amber:hover { color: #041020; box-shadow: 0 0 24px rgba(90,169,255,.35); }
.btn-amber > * { position: relative; z-index: 1; }
.btn-primary { background: var(--accent); color: #041020; }
.btn-primary:hover { box-shadow: 0 0 20px rgba(90,169,255,.3); }
.btn-line { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn-line:hover { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 18px rgba(90,169,255,.08); }
.btn-ghost { background: var(--panel); color: var(--text); border-color: var(--line); }
.btn-danger { background: rgba(255,122,122,.1); color: var(--danger); border-color: rgba(255,122,122,.3); }
.btn-sm { padding: 6px 14px; font-size: var(--t-sm); }
.btn-lg { padding: 14px 34px; font-size: var(--t-md); }
.btn-block { display: flex; width: 100%; }
.btn-arrow { transition: transform var(--dur-fast) ease-out; }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn.disabled, button:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.5); transform: none; }

/* ============ HERO ============ */
.hero { position: relative; padding: clamp(56px, 9vh, 110px) 0 clamp(64px, 10vh, 120px); overflow: hidden; }
.hero-fx { position: absolute; inset: 0; pointer-events: none; }
/* 网格地平线：透视网格向下滚动 */
.fx-grid {
  position: absolute; inset: 40% -20% -10% -20%;
  background-image:
    linear-gradient(rgba(90,169,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,169,255,.14) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(520px) rotateX(58deg);
  mask-image: linear-gradient(to top, black 5%, transparent 72%);
  animation: gridflow 3.2s linear infinite;
}
@keyframes gridflow { to { background-position: 0 48px, 0 0; } }
/* 顶部辉光 */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52rem 30rem at 12% -6%, rgba(90,169,255,.13), transparent 62%),
    radial-gradient(44rem 28rem at 92% 6%, rgba(255,179,71,.07), transparent 58%);
}
/* CRT 扫描亮线 */
.fx-scan {
  position: absolute; left: 0; right: 0; height: 120px; top: -140px;
  background: linear-gradient(to bottom, transparent, rgba(90,169,255,.05) 45%, rgba(90,169,255,.12) 50%, rgba(90,169,255,.05) 55%, transparent);
  animation: scan 7s linear infinite;
}
@keyframes scan { to { transform: translateY(calc(100vh + 280px)); } }
/* CRT 横纹 */
.fx-horizon {
  position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.14) 3px 4px);
}

.hero-in {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.hero-status {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--t-xs); color: var(--accent);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 5px 14px; margin-bottom: var(--s4); background: var(--accent-dim);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block;
  animation: blink 1.6s ease-in-out infinite; box-shadow: 0 0 8px var(--accent); }
@keyframes blink { 50% { opacity: .25; } }
.hero-title {
  font-family: var(--f-disp); font-weight: 700;
  font-size: var(--t-hero); line-height: 1.04; letter-spacing: -.02em;
  margin-bottom: var(--s4); min-height: 2.2em;
}
.ht-line { display: block; }
.ht-accent { color: var(--accent); text-shadow: 0 0 32px rgba(90,169,255,.35); }
.ht-line .caret {
  display: inline-block; width: .55em; height: .12em; margin-left: 8px;
  background: var(--accent); vertical-align: baseline; animation: blink 1s steps(1) infinite;
}
.hero-sub { color: var(--muted); font-size: var(--t-md); max-width: 34em; margin-bottom: var(--s5); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-meta { display: flex; gap: 26px; margin-top: var(--s5); flex-wrap: wrap; }
.hero-meta li { list-style: none; color: var(--muted); font-size: var(--t-sm); display: flex; align-items: center; gap: 8px; }
.hero-meta li::before { content: "▸"; color: var(--accent); }

/* -- HUD 面板（记忆点） -- */
.hud {
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--panel-2), var(--surface) 70%);
  box-shadow: var(--shadow-3), inset 0 0 60px rgba(90,169,255,.04);
  overflow: hidden; transform: rotate(.4deg);
}
.hud-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--muted); background: rgba(0,0,0,.25);
  letter-spacing: .08em;
}
.hud-dots { display: inline-flex; gap: 5px; }
.hud-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.hud-dots i:first-child { background: var(--accent); }
.hud-live { margin-left: auto; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.hud-body { display: grid; grid-template-columns: 1.2fr 1fr; }
.hud-col { padding: 18px; }
.hud-col + .hud-col { border-left: 1px solid var(--line); }
.hud-label { font-size: 10.5px; color: var(--muted); letter-spacing: .14em; margin-bottom: 12px; }
.hud-keys { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.hud-keys li {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: var(--r-sm); font-size: var(--t-xs); color: var(--muted);
  border-left: 2px solid transparent; transition: all var(--dur-fast) ease-out;
}
.hud-keys li b { color: var(--text); font-weight: 600; min-width: 74px; font-size: 11px; }
.hud-keys li em { margin-left: auto; font-style: normal; opacity: 0; color: var(--accent); transition: opacity var(--dur-fast); }
.hud-keys li.active {
  background: var(--accent-dim); border-left-color: var(--accent); color: var(--text);
}
.hud-keys li.active em { opacity: 1; }
.hud-wave { width: 100%; height: auto; display: block; margin-bottom: 14px; }
.hud-wave polyline:last-child { filter: blur(6px); }
.hud-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hud-stats > div { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; }
.hud-stats span { display: block; font-size: 9.5px; color: var(--muted); letter-spacing: .1em; }
.hud-stats b { font-size: 17px; color: var(--accent); font-weight: 600; }
.hud-stats i { font-style: normal; font-size: 10px; color: var(--muted); margin-left: 3px; }

/* ============ 跑马灯 ============ */
.marquee {
  border-block: 1px solid var(--line); background: var(--bg-2);
  overflow: hidden; transform: rotate(-.6deg) scale(1.01); margin-block: var(--s6);
}
.marquee-track {
  display: flex; align-items: center; gap: 28px; width: max-content;
  padding: 13px 0; font-size: var(--t-sm); color: var(--muted);
  letter-spacing: .18em; white-space: nowrap;
  animation: marquee 22s linear infinite;
}
.marquee-track span { color: var(--text); }
.marquee-track i { color: var(--accent); font-style: normal; font-size: 10px; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============ 区块通用 ============ */
.section { padding-block: var(--s7); }
.sec-head { margin-bottom: var(--s6); }
.sec-kicker { color: var(--accent); font-size: var(--t-xs); letter-spacing: .2em; margin-bottom: 10px; }
.sec-title-lg {
  font-family: var(--f-disp); font-weight: 700; font-size: var(--t-2xl);
  letter-spacing: -.01em; line-height: 1.15;
}
.sec-title-lg em { font-style: normal; color: var(--accent); }
.narrow { max-width: 660px; margin-inline: auto; }
.narrow-sm { max-width: 430px; margin-inline: auto; }
.center { text-align: center; }

/* ============ 编号行式特性（打破卡片阵列） ============ */
.feature-rows { border-top: 1px solid var(--line); }
.frow {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 22px; align-items: center;
  padding: 26px 18px; border-bottom: 1px solid var(--line); color: var(--text);
  position: relative; transition: background var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
}
.frow::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transition: transform var(--dur-base) var(--ease-out);
}
.frow:hover { background: var(--accent-dim); padding-left: 30px; opacity: 1; }
.frow:hover::before { transform: scaleY(1); }
.frow-no { color: var(--accent); font-size: var(--t-lg); font-weight: 600; opacity: .8; }
.frow-main h3 { font-family: var(--f-disp); font-size: var(--t-lg); font-weight: 700; margin-bottom: 4px; }
.frow-main p { color: var(--muted); font-size: var(--t-base); max-width: 46em; }
.frow-tag {
  font-size: 10.5px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; letter-spacing: .14em;
  transition: all var(--dur-fast) ease-out;
}
.frow:hover .frow-tag { color: #041020; background: var(--accent); border-color: var(--accent); }

/* ============ 数据带 ============ */
.section-band {
  background: var(--bg-2); border-block: 1px solid var(--line);
  background-image: radial-gradient(46rem 22rem at 50% 120%, rgba(90,169,255,.07), transparent 70%);
}
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s4); }
.stat { text-align: left; padding: 10px 4px; }
.stat-n { font-size: clamp(40px, 4.4vw, 60px); font-weight: 600; color: var(--accent); line-height: 1; letter-spacing: -.02em; }
.stat-u { font-size: var(--t-md); color: var(--muted); margin-left: 6px; }
.stat p { color: var(--muted); font-size: var(--t-sm); margin-top: 8px; }

/* ============ 步骤流 ============ */
.steps-flow {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s3);
  counter-reset: step;
}
.steps-flow li {
  position: relative; padding: 22px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-fast);
}
.steps-flow li:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.step-no { color: var(--accent); font-size: 10.5px; letter-spacing: .18em; }
.steps-flow h3 { font-family: var(--f-disp); font-size: var(--t-md); margin: 10px 0 6px; }
.steps-flow p { color: var(--muted); font-size: var(--t-sm); }
.steps-flow li:not(:last-child)::after {
  content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  color: var(--accent); z-index: 1; font-size: 15px;
}
@media (max-width: 900px) { .steps-flow li::after { display: none; } }

/* ============ 商城 CTA ============ */
.shop-cta {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s5); flex-wrap: wrap;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 48px);
  background:
    radial-gradient(30rem 16rem at 90% 10%, rgba(255,179,71,.08), transparent 60%),
    linear-gradient(160deg, var(--panel-2), var(--surface));
  box-shadow: var(--shadow-2);
}

/* ============ 内页兼容组件（重绘为 CRT 风） ============ */
.section-alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.hero-sm { padding: clamp(44px, 7vh, 72px) 0 clamp(36px, 6vh, 56px); }
.hero-sm .hero-sub { margin-bottom: 0; }
.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s4);
  transition: border-color var(--dur-fast) ease-out, box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.feature h3 { margin: 12px 0 6px; font-size: var(--t-md); }
.feature p { color: var(--muted); font-size: var(--t-base); }
.feature-icon { font-size: 28px; }
.notice { border-color: rgba(255,209,102,.4); background: rgba(255,209,102,.06); margin-top: var(--s4); }
.doc h3 { margin: var(--s4) 0 10px; font-size: var(--t-md); }
.doc p, .doc li { color: #c6d2e4; }
.doc ul, .doc ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.desc { white-space: pre-wrap; font-family: inherit; margin-top: 10px; background: none; border: 0; color: var(--muted); }
.faq dt { font-weight: 700; margin: var(--s4) 0 4px; }
.faq dd { color: var(--muted); font-size: var(--t-base); }
.dl-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dl-card .btn { margin-top: 10px; min-width: 210px; }

/* 商城 */
.shop-item { margin-bottom: var(--s4); }
.shop-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; }
.shop-item-title { font-family: var(--f-disp); font-size: var(--t-xl); }
.price-from { font-family: var(--f-mono); font-size: 26px; font-weight: 600; color: var(--accent); }
.variant-row { display: flex; gap: 12px; flex-wrap: wrap; margin: var(--s4) 0 8px; }
.variant-chip {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 132px; padding: 14px 20px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  transition: all var(--dur-fast) ease-out; position: relative; overflow: hidden;
}
.variant-chip::after {
  content: ""; position: absolute; left: -60%; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(90,169,255,.14), transparent);
  transition: left var(--dur-slow) var(--ease-out);
}
.variant-chip:hover { border-color: var(--accent); transform: translateY(-3px); opacity: 1; box-shadow: 0 0 22px rgba(90,169,255,.14); }
.variant-chip:hover::after { left: 130%; }
.variant-chip b { font-size: var(--t-base); }
.variant-price { font-family: var(--f-mono); color: var(--accent); font-weight: 600; font-size: 19px; }
.variant-chip.soldout { opacity: .45; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--t-xs); font-family: var(--f-mono); }
.tag-delivered, .tag-paid { background: rgba(90,169,255,.12); color: var(--accent); }
.tag-pending { background: rgba(255,209,102,.12); color: var(--warn); }
.tag-no_stock { background: rgba(255,179,71,.12); color: var(--amber); }
.tag-closed, .tag-red { background: rgba(255,122,122,.12); color: var(--danger); }

/* 表单 */
.form { display: flex; flex-direction: column; gap: var(--s4); margin-top: var(--s2); }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-base); color: var(--muted); }
.form input, .form textarea, .form select, .search-bar input {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 14px; color: var(--text); font-size: var(--t-base); outline: none;
  font-family: var(--f-mono); width: 100%; transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form input:focus, .form textarea:focus, .form select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(90,169,255,.12);
}
.radio-line { flex-direction: row !important; align-items: center; gap: 10px !important; color: var(--text) !important; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.form-grid .span2 { grid-column: span 2; }
.form-grid .chk { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
.msg-err { color: var(--danger); font-size: var(--t-base); margin-top: 10px; }
.msg-ok { color: var(--accent); font-size: var(--t-base); margin-bottom: var(--s3); }

/* 订单 / 卡密 */
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: var(--t-base); }
.kv span { color: var(--muted); flex-shrink: 0; }
.kv-total { border-bottom: none; padding-top: var(--s4); }
.price-big { font-family: var(--f-mono); font-size: 30px; color: var(--amber); font-weight: 600; }
.pay-order-pw {
  margin: var(--s4) 0; padding: 16px; border-radius: var(--r-md);
  background: var(--accent-dim); border: 1px dashed var(--line-strong); font-size: var(--t-base);
}
.big-pw { font-size: 26px; font-weight: 600; color: var(--accent); margin-top: 6px; user-select: all; letter-spacing: .1em; }
.card-codes { margin-top: var(--s4); }
.card-codes-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.codes {
  background: #040814; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px; color: var(--accent); font-size: 16px; user-select: all;
  white-space: pre-wrap; word-break: break-all; font-family: var(--f-mono);
  text-shadow: 0 0 10px rgba(90,169,255,.4); position: relative; overflow: hidden;
}
.codes::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.16) 3px 4px);
}
.pay-box {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: 12px; background: var(--panel);
  transition: border-color var(--dur-fast);
}
.pay-box:hover { border-color: var(--line-strong); }

/* ============ 后台 ============ */
.admin-wrap { display: flex; gap: 0; width: min(1320px, calc(100% - 128px)); margin: 0 auto; padding: 26px 0 60px; flex: 1; align-items: flex-start; }
.admin-nav { display: flex; flex-direction: column; gap: 4px; min-width: 150px; position: sticky; top: 88px; }
.admin-nav a { padding: 9px 14px; border-radius: var(--r-sm); color: var(--muted); font-size: var(--t-base); font-family: var(--f-mono); }
.admin-nav a.on, .admin-nav a:hover { background: var(--accent-dim); color: var(--accent); }
.admin-body { flex: 1; min-width: 0; padding-left: var(--s5); }
.admin-body .sec-title { text-align: left; font-size: var(--t-xl); margin-bottom: var(--s4); font-family: var(--f-disp); }
.sec-title { font-size: var(--t-xl); font-weight: 700; text-align: center; font-family: var(--f-disp); }
.sec-sub { text-align: center; color: var(--muted); margin: 10px 0 var(--s5); }
.stat-n { font-size: 30px; }
.warn { color: var(--warn); }
.prod-sum { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.sub summary { cursor: pointer; color: var(--accent); margin: 8px 0; }
.mini-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.mini-table td, .mini-table th { padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.mini-table input { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); padding: 5px 8px; width: 100%; min-width: 70px; }
.row-acts { display: flex; gap: 6px; }
.table-wrap { overflow-x: auto; padding: 0; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.table-wrap th, .table-wrap td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.search-bar { display: flex; gap: 8px; margin-bottom: var(--s4); }
.search-bar input { width: 300px; }

/* ============ 页脚 ============ */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: var(--s6) 0 var(--s4); margin-top: var(--s6); }
.footer-grid { display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.footer-brand p { margin-top: 10px; max-width: 30em; }
/* 售后群二维码 */
.qq-box { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.qq-qr { display: block; flex: 0 0 auto; border-radius: 10px; overflow: hidden; background: #fff; padding: 4px; line-height: 0; transition: transform .18s ease; }
.qq-qr:hover { transform: translateY(-2px); }
.qq-qr img { width: 68px; height: auto; border-radius: 6px; display: block; }
.qq-box .footer-sys { margin-top: 0; }
.footer-sys { font-size: var(--t-xs); color: var(--muted); margin-top: 14px; letter-spacing: .08em; }
.footer-links { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 40px; align-content: start; }
.footer-links a { color: var(--muted); font-size: var(--t-sm); transition: color var(--dur-fast); }
.footer-links a:hover { color: var(--accent); opacity: 1; }
.copyright { color: #5a667c; font-size: var(--t-xs); margin-top: var(--s5); letter-spacing: .08em; }

/* ============ 入场动效编排 ============ */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal[data-rv="1"] { transition-delay: 90ms; }
.reveal[data-rv="2"] { transition-delay: 180ms; }
.reveal[data-rv="3"] { transition-delay: 270ms; }
.feature-rows .reveal:nth-child(even) { transition-delay: 70ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .fx-grid, .fx-scan, .marquee-track, .dot, .ht-line .caret { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ============ 响应式 ============ */
@media (max-width: 1080px) {
  .hero-in { grid-template-columns: 1fr; }
  .hud { max-width: 640px; transform: none; }
}
@media (max-width: 760px) {
  .header-in { flex-wrap: wrap; height: auto; padding: 10px 0; row-gap: 4px; }
  .nav { order: 3; width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .nav-user { margin-left: auto; }
  .frow { grid-template-columns: 52px 1fr; }
  .frow-tag { display: none; }
  .hud-body { grid-template-columns: 1fr; }
  .hud-col + .hud-col { border-left: 0; border-top: 1px solid var(--line); }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span2 { grid-column: span 1; }
  .admin-wrap { flex-direction: column; }
  .admin-body { padding-left: 0; width: 100%; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; position: static; }
  .shell { width: calc(100% - 40px); }
}

/* ============ V3：下载 / 教程 / 商城 板块重做 ============ */
/* -- 下载：平台面板 -- */
.dl-panel { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dl-panel-head { display: flex; align-items: center; gap: 16px; padding: 24px 28px; border-bottom: 1px solid var(--line); background: linear-gradient(160deg, var(--panel-2), transparent 80%); }
.dl-icon { width: 48px; height: 48px; flex-shrink: 0; border: 1px solid var(--line-strong); border-radius: var(--r-md); display: grid; place-items: center; font-size: 23px; background: var(--accent-dim); }
.dl-panel-head h3 { font-family: var(--f-disp); font-size: var(--t-lg); font-weight: 700; }
.dl-panel-head .mono { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: .14em; margin-top: 3px; }
.dl-spec { padding: 14px 28px; }
.spec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: var(--t-sm); }
.spec-row:last-child { border-bottom: none; }
.spec-row span { color: var(--muted); flex-shrink: 0; }
.spec-row b { font-weight: 500; color: var(--text); font-family: var(--f-mono); font-size: 12.5px; text-align: right; }
.dl-act { padding: 6px 28px 26px; margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.dl-act .btn { width: 100%; }
.dl-note { font-size: var(--t-xs); color: var(--muted); text-align: center; }
.ios-strip { display: flex; gap: 14px; align-items: flex-start; margin-top: var(--s5); border: 1px dashed rgba(255,209,102,.45); background: rgba(255,209,102,.05); border-radius: var(--r-md); padding: 18px 22px; }
.ios-strip .ios-ic { font-size: 20px; line-height: 1.4; }
.ios-strip b { color: var(--warn); }
.ios-strip p { color: var(--muted); font-size: var(--t-sm); }
.quick-start { margin-top: var(--s6); }
.quick-start .sec-head { margin-bottom: var(--s4); }

/* -- 教程：左目录右内容 -- */
.help-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--s6); align-items: start; }
.help-toc { position: sticky; top: 96px; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.help-toc .toc-cap { font-size: 10.5px; letter-spacing: .18em; color: var(--muted); padding: 0 16px 10px; }
.help-toc a { padding: 9px 16px; color: var(--muted); font-size: var(--t-sm); border-left: 2px solid transparent; margin-left: -1.5px; transition: color var(--dur-fast), border-color var(--dur-fast); }
.help-toc a:hover { color: var(--accent); border-left-color: var(--accent); opacity: 1; }
.doc-block { border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px 32px; background: var(--surface); margin-bottom: var(--s4); scroll-margin-top: 96px; }
.doc-kicker { color: var(--accent); font-size: 10.5px; letter-spacing: .2em; margin-bottom: 10px; font-family: var(--f-mono); }
.doc-block h2 { font-family: var(--f-disp); font-size: var(--t-xl); font-weight: 700; margin-bottom: 14px; }
.doc-block ol, .doc-block ul { padding-left: 22px; display: flex; flex-direction: column; gap: 9px; color: #c6d2e4; font-size: var(--t-base); }
.doc-block li::marker { color: var(--accent); font-family: var(--f-mono); font-weight: 600; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 20px; background: var(--bg-2); transition: border-color var(--dur-fast); }
.faq-item + .faq-item { margin-top: 12px; }
.faq-item:hover { border-color: var(--line-strong); }
.faq-item dt { font-weight: 600; color: var(--text); margin: 0 0 6px; }
.faq-item dt::before { content: "Q "; color: var(--accent); font-family: var(--f-mono); font-weight: 600; }
.faq-item dd { color: var(--muted); font-size: var(--t-sm); margin: 0; }
@media (max-width: 900px) {
  .help-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .help-toc { position: static; flex-direction: row; flex-wrap: wrap; border-left: 0; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  .help-toc .toc-cap { width: 100%; padding: 0 0 8px; }
  .help-toc a { border-left: 0; margin-left: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }
  .doc-block { padding: 22px; }
}

/* -- 商城：信任条 + 方案板 -- */
.trust-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s3); margin-bottom: var(--s6); }
.trust { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px 20px; background: var(--surface); transition: border-color var(--dur-fast); }
.trust:hover { border-color: var(--line-strong); }
.trust i { font-style: normal; font-size: 20px; }
.trust b { display: block; color: var(--text); font-size: var(--t-base); font-weight: 600; }
.trust small { color: var(--muted); font-size: var(--t-xs); }
.plan { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: var(--s4); overflow: hidden; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.plan:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); padding: 26px 30px 0; flex-wrap: wrap; }
.plan-tag { display: inline-block; font-size: 10.5px; letter-spacing: .16em; color: var(--accent); border: 1px solid var(--line-strong); padding: 3px 12px; border-radius: 999px; margin-bottom: 12px; background: var(--accent-dim); font-family: var(--f-mono); }
.plan-head h3 { font-family: var(--f-disp); font-size: var(--t-xl); font-weight: 700; margin-bottom: 6px; }
.plan-head .muted { font-size: var(--t-sm); }
.plan-price { text-align: right; flex-shrink: 0; }
.plan-price .price-from { font-size: 30px; }
.plan-price a { display: inline-block; margin-top: 6px; font-size: var(--t-xs); color: var(--muted); }
.plan-price a:hover { color: var(--accent); opacity: 1; }
.plan-body { padding: 20px 30px 28px; }
.plan .variant-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 0 0 16px; }
.plan .variant-chip { min-width: 0; width: 100%; align-items: flex-start; padding: 16px 18px; }
.plan-foot-note { color: var(--muted); font-size: var(--t-xs); display: flex; align-items: center; gap: 8px; }
.plan-foot-note::before { content: "▸"; color: var(--accent); }
.shop-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s6); border-top: 1px solid var(--line); padding-top: var(--s5); }
.shop-foot .muted { font-size: var(--t-sm); }