/* ============================================================================
   Mirage 官网样式（2026-10-05 改版）
   和 App 同一套：深色底、暖橙主色、琥珀 → 粉 → 紫的品牌渐变。
   贯穿全站的图形是「地平线」：上面是实物，下面是被热浪切成条的倒影（就是标志本身）。
   只用系统字体，不引任何外部图片和字体。

   ⚠️ 变量名沿用旧版（--label / --surface / --separator …），四个页面的行内样式都在用，
      改名会让引用它的整条声明失效。要换颜色只改这里的值。
   ========================================================================= */

:root {
  color-scheme: dark;

  --bg:            #0A0914;
  --bg-elevated:   #100E1B;
  --surface:       #14121F;   /* 卡片 */
  --border:        #262338;   /* 描边 */
  --border-strong: #3B3655;   /* 强描边 */
  --separator:     #262338;
  --fill:          #1B1829;   /* 次要按钮、输入框里的底 */
  --fill-strong:   #262338;

  --label:         #F4F3F8;
  --label-1b:      #C9C6D6;   /* 正文段落 */
  --label-2:       #A29FB3;
  --label-3:       #8A8799;

  --accent:        #FF8F6B;
  --accent-ink:    #1A0F0A;   /* 主色按钮上的字 */
  --accent-strong: #FF8F6B;
  --red:           #FF5E7A;
  --green:         #5FD6A0;   /* 「成功 / 已到账」提示用，品牌色板里没有，自己配的 */
  --orange:        #FFC46B;

  --g1: #FFC46B;  --g2: #FF6B8B;  --g3: #8B6BFF;
  --grad:      linear-gradient(100deg, var(--g1) 0%, var(--g2) 52%, var(--g3) 100%);
  --grad-warm: linear-gradient(100deg, var(--g1) 0%, var(--accent) 48%, var(--g2) 100%);

  --r-s: 10px;  --r-m: 14px;  --r-l: 20px;  --r-xl: 26px;

  --spring:  cubic-bezier(.32,.72,0,1);
  --out:     cubic-bezier(.23,1,.32,1);
  --ease:    cubic-bezier(.25,.1,.25,1);
  --t-press: .12s;
  --t-fast:  .18s;
  --t-base:  .24s;
  --t-enter: .42s;

  --shadow-card: 0 1px 0 rgba(255,255,255,.02) inset;
  --shadow-hero: 0 30px 80px rgba(0,0,0,.55);
  --maxw: 1160px;
  --gutter: max(20px, env(safe-area-inset-left));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "HarmonyOS Sans SC",
               "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--label);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: rgba(255,143,107,.32); }

/* ============================ 字体层级 ============================ */
.t-large-title { font-size: clamp(44px, 9vw, 104px); line-height: 1.04; letter-spacing: -.02em; font-weight: 800; }
.t-title-1     { font-size: clamp(30px, 5vw, 44px); line-height: 1.12; letter-spacing: -.015em; font-weight: 800; }
.t-title-2     { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; font-weight: 700; }
.t-headline    { font-size: 17px; line-height: 1.3; font-weight: 700; }
.t-body        { font-size: 17px; line-height: 1.5; }
.t-callout     { font-size: 16px; line-height: 1.45; }
.t-subhead     { font-size: 15px; line-height: 1.5; }
.t-footnote    { font-size: 13px; line-height: 1.45; }
.t-caption     { font-size: 12px; line-height: 1.4; }
.dim  { color: var(--label-2); }
.dim2 { color: var(--label-3); }

/* 品牌渐变字：大标题的强调行、大数字 */
.grad {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ============================ 导航 ============================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10,9,20,.76);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid rgba(38,35,56,.7);
}
.nav-in {
  max-width: var(--maxw); margin: 0 auto; height: 60px;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; flex-shrink: 0; }
.brand-mark { width: 26px; height: 26px; display: block; flex-shrink: 0; }
.nav-links { display: flex; gap: 28px; font-size: 15px; color: var(--label-2); }
.nav-links a { transition: color var(--t-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--label); } }
.nav-cta { display: flex; align-items: center; gap: 10px; }
@media (max-width: 900px) { .nav-links { display: none; } }

/* ============================ 按钮 ============================ */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border-strong); border-radius: 12px;
  font-weight: 700; letter-spacing: 0;
  background: var(--fill); color: var(--label);
  padding: 9px 16px; font-size: 15px; line-height: 1.3;
  transition: transform var(--t-press) var(--out), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--fill-strong); border-color: #4A4468; } }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }

.btn-primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: #FFA283; border-color: transparent; }
}
/* 大号主按钮用品牌渐变（暖的那一半，深色字在上面读得清） */
.btn-primary.btn-lg { background: var(--grad-warm); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary.btn-lg:hover { background: var(--grad-warm); filter: brightness(1.07); }
}

.btn-lg { padding: 14px 26px; font-size: 17px; border-radius: 14px; }
.btn-block { display: flex; width: 100%; padding-top: 13px; padding-bottom: 13px; border-radius: 14px; }
.btn-plain { background: transparent; border-color: transparent; color: var(--label-2); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .btn-plain:hover { background: transparent; border-color: transparent; color: var(--label); } }

/* ============================ 版心 ============================ */
.wrap-page { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 760px; margin: 0 auto; }

/* 地平线：一条两头淡出的亮线，中间带一点辉光。首屏用大的，区块之间用小的 */
.horizon {
  position: relative; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--g2) 14%, var(--g1) 44%, var(--g2) 72%, rgba(139,107,255,.7) 90%, transparent 100%);
}
.horizon::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: -22px; height: 46px; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,107,139,.42), transparent 72%);
  filter: blur(12px);
}
.rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent); }

/* ============================ 首页 · 首屏 ============================
   标题站在地平线上，第二行在线下面有一份倒影，被切成越来越细的条（和标志同一个画法）。
   右边的大标志也骑在同一条线上：三角在线上，条纹在线下。 */
.stage {
  --title-size: clamp(54px, 9.4vw, 132px);
  position: relative; overflow: hidden;
  padding: clamp(52px, 8vw, 104px) 0 clamp(28px, 4vw, 48px);
}
html[data-lang="en"] .stage { --title-size: clamp(34px, 6.4vw, 76px); }
.stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52% 44% at 80% 46%, rgba(139,107,255,.20), transparent 72%),
    radial-gradient(34% 26% at 78% 50%, rgba(255,107,139,.13), transparent 72%),
    radial-gradient(60% 30% at 20% 58%, rgba(255,196,107,.05), transparent 70%);
}
.stage > * { position: relative; }
.stage-title { margin: 0; font-size: var(--title-size); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
.stage-title .st-1, .stage-title .st-2 { display: block; width: max-content; max-width: 100%; }
.stage-title .st-2 { line-height: 1; margin-bottom: -.025em; }
html[data-lang="en"] .stage-title { letter-spacing: -.035em; }
html[data-lang="en"] .stage-title .st-2 { margin-bottom: -.1em; }

.stage .horizon { animation: horizon-in 1.1s var(--out) both; transform-origin: 28% 50%; }
.stage .horizon .wrap-page { position: relative; height: 0; }
.stage-mark {
  position: absolute; right: var(--gutter); top: 0;
  width: clamp(112px, 27vw, 348px); height: auto; aspect-ratio: 1;
  transform: translateY(-52.9%);          /* 标志里三角和倒影之间的缝，正好落在线上 */
  filter: drop-shadow(0 0 48px rgba(255,107,139,.22));
  animation: mark-in 1.2s var(--out) .15s both;
  pointer-events: none;
}
.stage-mark .strip { animation: haze 7s ease-in-out infinite; }
.stage-mark .strip:nth-child(2) { animation-delay: -1.4s; animation-duration: 8s; }
.stage-mark .strip:nth-child(3) { animation-delay: -2.8s; animation-duration: 6.4s; }
.stage-mark .strip:nth-child(4) { animation-delay: -4.2s; animation-duration: 9s; }
.stage-mark .strip:nth-child(5) { animation-delay: -5.6s; animation-duration: 7.6s; }
/* 英文标题长，窄屏放不下标志。用 visibility 不用 display：display 来回切会让入场动画重放 */
@media (max-width: 640px) { html[data-lang="en"] .stage-mark { visibility: hidden; } }

.stage-refl {
  height: calc(var(--title-size) * .9); overflow: hidden; margin-top: calc(var(--title-size) * -.025);
  font-size: var(--title-size); font-weight: 800; line-height: 1; letter-spacing: -.02em; white-space: nowrap;
  user-select: none; pointer-events: none;
  animation: refl-in 1.3s var(--out) .35s both;
}
html[data-lang="en"] .stage-refl { letter-spacing: -.035em; }
.stage-refl > span {
  display: block; width: max-content;
  transform: scaleY(-1); transform-origin: 50% 50%;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  /* 元素是上下翻过来的，所以这里的「to top」对应屏幕上的从线往下：条越来越细、越来越淡 */
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.62) 0 30%, transparent 30% 37%, rgba(0,0,0,.4) 37% 53%, transparent 53% 61%, rgba(0,0,0,.24) 61% 71%, transparent 71% 80%, rgba(0,0,0,.12) 80% 86%, transparent 86%);
          mask-image: linear-gradient(to top, rgba(0,0,0,.62) 0 30%, transparent 30% 37%, rgba(0,0,0,.4) 37% 53%, transparent 53% 61%, rgba(0,0,0,.24) 61% 71%, transparent 71% 80%, rgba(0,0,0,.12) 80% 86%, transparent 86%);
}
html[data-lang="en"] .stage-refl { margin-top: -.1em; }

.stage-bottom { margin-top: calc(var(--title-size) * -.06); }
.stage-lead .nb { display: inline-block; }
.stage-lead { margin: 0; max-width: 26em; color: var(--label-1b); font-size: clamp(18px, 1.9vw, 22px); line-height: 1.5; }
.stage-cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 480px) { .stage-cta .btn-lg { padding: 13px 18px; font-size: 16px; } }
.stage-os { margin: 30px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--label-3); font-size: 14px; }
.stage-os li { display: flex; align-items: center; gap: 8px; }
.stage-os li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

@keyframes horizon-in { from { transform: scaleX(0); opacity: 0; } }
@keyframes mark-in { from { opacity: 0; transform: translateY(-50.5%); } }
@keyframes refl-in { from { opacity: 0; } }
@keyframes haze { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }

/* ============================ 首页 · 区块 ============================ */
.band { padding: clamp(72px, 10vw, 128px) 0; }
.h-sec { margin: 0; font-size: clamp(30px, 4.6vw, 54px); line-height: 1.14; letter-spacing: -.015em; font-weight: 800; text-wrap: balance; }
.p-lead { margin: 18px 0 0; max-width: 30em; color: var(--label-1b); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; }
.band-head { margin-bottom: clamp(36px, 5vw, 60px); }

/* 电脑端 / 手机端：一边说明，一边界面示意 */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.duo.flip .duo-text { order: 2; }
@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
  .duo.flip .duo-text { order: -1; }
}
.os-row { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.os-chip { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--label-1b); }

.genres { margin: 30px 0 0; padding: 0; }
.genres > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid var(--border); }
.genres > div:last-child { border-bottom: 1px solid var(--border); }
.genres dt { font-weight: 700; font-size: 18px; }
.genres dd { margin: 0; color: var(--label-2); font-size: 16px; text-align: right; }

/* 界面示意图：纯 CSS 画的，文字都是 App 里真有的那几个词 */
.shot { position: relative; display: grid; place-items: center; min-width: 0; }
.shot::before {
  content: ""; position: absolute; inset: 6% 4%; pointer-events: none; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(139,107,255,.22), rgba(255,107,139,.08) 55%, transparent 74%);
  filter: blur(26px);
}
.win {
  position: relative; width: 100%; max-width: 540px; border-radius: 16px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-hero);
}
.win-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--label-3); font-size: 13px; font-weight: 600; }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.win-bar span.win-name { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.win-bar img { width: 15px; height: 15px; display: block; }
.win-body { padding: clamp(18px, 3vw, 26px); }
.win-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ms-label { color: var(--label-3); font-size: 13px; }
.ms { font-size: clamp(40px, 6vw, 60px); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 6px; width: max-content; }
.ms small { font-size: .42em; font-weight: 700; letter-spacing: 0; margin-left: .18em; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: var(--fill); border: 1px solid var(--border); color: var(--label-1b); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--label-3); }
.pill.live::before { background: var(--accent); box-shadow: 0 0 0 4px rgba(255,143,107,.18); }
.chart { display: block; width: 100%; height: auto; margin-top: 18px; }
.chart-x { display: flex; justify-content: space-between; margin-top: 6px; color: var(--label-3); font-size: 12px; }
.kv { margin-top: 18px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: rgba(10,9,20,.5); }
.kv > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; font-size: 14px; color: var(--label-2); }
.kv > div + div { border-top: 1px solid var(--border); }
.kv b { color: var(--label); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.kv b em { font-style: normal; color: var(--accent); font-variant-numeric: tabular-nums; }
.kv b::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--label-3); border-top: 2px solid var(--label-3); transform: rotate(45deg); margin-left: 2px; }

.phone {
  position: relative; width: min(292px, 76vw); border-radius: 42px; padding: 20px 16px 22px;
  background: #07060F; border: 1px solid var(--border-strong);
  box-shadow: 0 0 0 7px #12101C, 0 0 0 8px var(--border), var(--shadow-hero);
}
.phone-head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 19px; letter-spacing: -.02em; padding: 4px 4px 14px; }
.phone-head img { width: 22px; height: 22px; display: block; }
.phone-head i { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); }
.phone-card { border: 1px solid var(--border); border-radius: 22px; background: var(--bg-elevated); padding: 14px 14px 16px; text-align: center; }
.ring {
  width: 132px; height: 132px; margin: 14px auto 12px; border-radius: 50%; display: grid; place-items: center;
  background: #0B0A12; border: 3px solid #2E2947; box-shadow: inset 0 0 0 14px #0B0A12, inset 0 0 0 15px var(--border);
}
.ring img { width: 54px; height: 54px; display: block; }
.fake-btn { display: block; border-radius: 13px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 15px; padding: 11px; }
.fake-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); margin: 14px 0 12px; font-size: 13px; font-weight: 600; }
.fake-seg span.on { background: var(--accent); color: var(--accent-ink); }
.fake-seg > span { padding: 6px 12px; border-radius: 9px; color: var(--label-1b); }
.phone .kv { margin-top: 0; border-radius: 16px; }

/* 功能 */
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border); }
.feat { padding: 30px clamp(18px, 2.6vw, 34px) 34px 0; }
.feat + .feat { padding-left: clamp(18px, 2.6vw, 34px); border-left: 1px solid var(--border); }
.feat svg { display: block; color: var(--accent); margin-bottom: 20px; }
.feat h3 { margin: 0 0 10px; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.feat p { margin: 0; color: var(--label-2); font-size: 16px; line-height: 1.6; }
@media (max-width: 760px) {
  .feats { grid-template-columns: 1fr; }
  .feat, .feat + .feat { padding: 26px 0; border-left: 0; }
  .feat + .feat { border-top: 1px solid var(--border); }
}

.modes {
  position: relative; margin-top: 28px; border-radius: var(--r-xl); border: 1px solid var(--border-strong);
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(255,143,107,.10), transparent 60%),
    radial-gradient(60% 120% at 100% 100%, rgba(139,107,255,.12), transparent 62%),
    var(--surface);
  padding: clamp(24px, 3.4vw, 40px);
}
.modes > h3 { margin: 0 0 22px; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.modes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3.4vw, 44px); }
.modes-grid > div + div { padding-left: clamp(20px, 3.4vw, 44px); border-left: 1px solid var(--border-strong); }
.modes h4 { margin: 0 0 10px; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.modes h4 .tag { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); }
.modes p { margin: 0; color: var(--label-1b); font-size: 16px; line-height: 1.65; }
.modes .modes-note { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border-strong); color: var(--label-3); font-size: 14px; }
@media (max-width: 760px) {
  .modes-grid { grid-template-columns: 1fr; }
  .modes-grid > div + div { padding-left: 0; border-left: 0; padding-top: 20px; border-top: 1px solid var(--border-strong); }
}

.also { margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; list-style: none; }
.also li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 28px; padding: 17px 0; border-top: 1px solid var(--border); align-items: baseline; }
.also li:last-child { border-bottom: 1px solid var(--border); }
.also b { font-size: 17px; font-weight: 700; }
.also span.d { color: var(--label-2); font-size: 16px; line-height: 1.55; }
@media (max-width: 760px) { .also li { grid-template-columns: 1fr; } }

/* ============================ 下载 ============================ */
.dl-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .dl-groups { grid-template-columns: 1fr; } }
.dl-group { border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--surface); padding: 10px 10px 10px; }
.dl-group > h3 { margin: 0; padding: 14px 16px 12px; font-size: 14px; font-weight: 600; color: var(--label-3); }
.dl {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "os go" "meta go";
  column-gap: 14px; row-gap: 3px; align-items: center;
  padding: 16px; border-radius: 18px;
  transition: background var(--t-fast) var(--ease), transform var(--t-press) var(--out);
}
.dl + .dl { margin-top: 2px; }
.dl .os { grid-area: os; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--label-2); }
.dl .meta { grid-area: meta; color: var(--label-3); }
.dl .go { grid-area: go; }
.dl.on .os { color: var(--label); }
@media (hover: hover) and (pointer: fine) { .dl.on:hover { background: var(--fill); } }
.dl.on:active { transform: scale(.985); }

.note {
  margin-top: 20px; padding: 15px 17px; border-radius: var(--r-m);
  background: rgba(255,196,107,.08); border: 1px solid rgba(255,196,107,.28);
  color: var(--label-1b);
}
.note b { color: var(--orange); }

/* ============================ 分组列表 ============================ */
.list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l); overflow: hidden; }
.sheet .list { background: var(--bg); }
.list-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; position: relative; }
.list-row + .list-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--separator); }
.list-row .k { flex: 1; min-width: 0; color: var(--label-2); }
.list-row .v { color: var(--label); text-align: right; font-weight: 600; }
.list-row .v.ok { color: var(--green); }
.list-row .t-body { font-size: 15px; }

/* 首页以外的页面还在用的通用卡片 */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 34px); }
.card h3 { margin: 0 0 12px; }
.card p { margin: 0; color: var(--label-2); }

/* ============================ 表单 ============================ */
label { display: block; margin: 0 0 7px 2px; color: var(--label-2); font-size: 13px; }
input {
  width: 100%; padding: 13px 15px; border-radius: var(--r-m);
  border: 1px solid var(--border); background: var(--bg);
  color: var(--label); font: inherit; font-size: 16px; outline: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input::placeholder { color: #6B687B; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,143,107,.16); }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.field + .field { margin-top: 14px; }

/* ============================ 用户中心 / 隐私政策的页头 ============================ */
.hero { max-width: 560px; margin: 0 auto; padding: clamp(36px, 6vw, 64px) var(--gutter) 28px; text-align: left; }
.hero h1 { margin: 0; }
.hero .lead { margin: 12px 0 0; color: var(--label-2); }
.hero::after { content: ""; display: block; height: 2px; margin-top: 24px; border-radius: 2px; background: linear-gradient(90deg, var(--g1), var(--g2) 38%, rgba(139,107,255,.5) 70%, transparent); }
.plat-row { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.plat { font-size: 13px; padding: 5px 12px; border-radius: 999px; color: var(--label-1b); border: 1px solid var(--border-strong); }
.plat.on { color: var(--accent-ink); background: var(--accent); border-color: transparent; font-weight: 600; }

.wrap { max-width: 560px; margin: 0 auto; padding: 0 var(--gutter) 72px; }
.sheet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 22px; margin-bottom: 14px; }
.sheet h2 { margin: 0 0 16px; }
.sheet > .btn { margin-top: 12px; }

.days { text-align: center; padding: 22px 0 20px; }
.days b {
  display: block; width: max-content; margin: 0 auto; font-size: 68px; font-weight: 800; letter-spacing: -.04em;
  line-height: 1.05; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.days b i { font-style: normal; font-size: 22px; font-weight: 700; letter-spacing: 0; margin-left: 5px; }
.days span { display: block; margin-top: 8px; color: var(--label-2); }
.idle { text-align: center; padding: 22px 0; }
.idle b { display: block; margin-bottom: 5px; font-size: 19px; }
.idle span { color: var(--label-2); }

.opt {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--r-m); background: var(--bg);
  cursor: pointer; margin-bottom: 9px;
  border: 1px solid var(--border);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-press) var(--out);
}
.opt:active { transform: scale(.985); }
.opt.sel { border-color: var(--accent); background: rgba(255,143,107,.09); box-shadow: 0 0 0 1px var(--accent) inset; }
.opt .meta { color: var(--label-2); margin-top: 3px; font-size: 14px; }
.opt .right { text-align: right; white-space: nowrap; }
.opt .right b { font-size: 19px; font-variant-numeric: tabular-nums; }

.way {
  display: block; width: 100%; text-align: left; cursor: pointer; border: 1px solid transparent;
  padding: 15px 17px; border-radius: var(--r-m); margin-top: 10px;
  background: var(--grad-warm); color: var(--accent-ink);
  transition: transform var(--t-press) var(--out), filter var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.way + .way { background: var(--fill); color: var(--label); border-color: var(--border-strong); }
.way:active { transform: scale(.985); }
.way:disabled { background: var(--fill); color: var(--label-3); border-color: var(--border); cursor: default; transform: none; }
.way b { display: block; font-weight: 700; margin-bottom: 3px; }
.way span { display: block; font-size: 13px; opacity: .78; }
.way .tag {
  font-style: normal; font-size: 11px; font-weight: 700; margin-left: 7px;
  padding: 2px 8px; border-radius: 999px; background: rgba(26,15,10,.16); vertical-align: 1px;
}

code {
  display: block; padding: 13px 15px; border-radius: var(--r-m);
  background: var(--bg); border: 1px solid var(--border); color: var(--label);
  font: 500 14px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  word-break: break-all; user-select: all;
}
.addr-row { display: flex; gap: 10px; align-items: stretch; }
.addr-row code { flex: 1; min-width: 0; }
.btn-copy { flex: 0 0 96px; border-radius: var(--r-m); }
.btn-copy.done { background: var(--green); border-color: transparent; color: #06140D; }
@media (max-width: 480px) { .addr-row { flex-direction: column; } .btn-copy { flex: none; width: 100%; } }

/* 充值记录 */
/* ⚠️ .row 在表单里是"等分两列"，记录里需要的是"两端对齐"。
   同名不同意，所以这里必须把 flex 显式覆盖回去。 */
.dep-hist .row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 0; position: relative;
}
.dep-hist .row > * { flex: 0 1 auto; }
.dep-hist .row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.dep-hist .row + .row::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--separator);
}
.dep-hist b { color: var(--green); font-weight: 600; }
.dep-hist .zero { color: var(--orange); }

.msg { margin-top: 12px; min-height: 20px; color: var(--label-2); font-size: 15px; }
.msg:empty { display: none; }
.msg.err { color: var(--red); } .msg.ok { color: var(--green); } .msg.warn { color: var(--orange); }
.steps {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--r-m);
  background: var(--bg); border: 1px solid var(--border); font-size: 14px; color: var(--label-2);
}
.steps div { padding: 3px 0; }
.steps .done { color: var(--green); } .steps .cur { color: var(--label); font-weight: 600; }
.hide { display: none !important; }
/* hidden 属性说了算：有些块本身带 display（比如 .lang-row 是 flex），不加这条藏不住 */
[hidden] { display: none !important; }

/* ============================ 页脚 ============================ */
.footer { border-top: 1px solid var(--border); padding: 36px var(--gutter) 52px; color: var(--label-3); }
.footer-in { max-width: calc(var(--maxw) - 2 * 20px); margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.footer .brand { color: var(--label); font-size: 18px; margin-bottom: 10px; }
.footer .links { display: flex; gap: 10px 24px; flex-wrap: wrap; }
.footer .links a { color: var(--label-2); font-size: 15px; transition: color var(--t-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .footer .links a:hover { color: var(--label); } }
/* 隐私政策页的页脚没有两栏结构：居中排 */
.footer > .links { justify-content: center; margin-bottom: 14px; }
.footer > .t-footnote { text-align: center; }

/* 旧版的滚动入场已经去掉；类名留着不出错 */
.reveal { opacity: 1; transform: none; }

/* ============================ 偏好设置 ============================ */
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .12s !important;
  }
  .btn:active, .opt:active, .way:active, .dl.on:active { transform: none; }
}

/* ---------- 下载前的平台提示弹窗 ----------
   点哪个平台弹哪条，看完再开始下载。
   ⚠️ display:none 的元素 transition 根本不会启动，所以要 allow-discrete 配 @starting-style。 */
.dlg-back {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(5,4,12,.66);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: grid; place-items: center; padding: 20px;
  opacity: 1;
  transition: opacity var(--t-base) var(--out), display var(--t-base) allow-discrete;
}
.dlg-back[hidden] { display: none; }
@starting-style { .dlg-back { opacity: 0; } }

.dlg {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-xl);
  padding: 26px 24px 20px; width: min(440px, 100%);
  box-shadow: var(--shadow-hero);
  text-align: left;
  transform: scale(1); opacity: 1;
  transition: transform var(--t-base) var(--spring), opacity var(--t-base) var(--out);
}
@starting-style { .dlg { transform: scale(.96); opacity: 0; } }

.dlg h3 { margin: 0 0 12px; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.dlg p  { margin: 0 0 8px; color: var(--label-1b); font-size: 15px; line-height: 1.65; }
.dlg .step { display: flex; gap: 11px; margin: 11px 0; }
.dlg .step i {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-style: normal; font-size: 13px; font-weight: 700;
  display: grid; place-items: center; margin-top: 2px;
}
.dlg-act { display: flex; gap: 10px; margin-top: 22px; }
.dlg-act .btn { flex: 1; justify-content: center; padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 420px) { .dlg-act { flex-direction: column-reverse; } }

/* 页脚「BNG 销毁」弹层 */
.burn-dlg .burn-num { font-size: clamp(38px, 7vw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; width: max-content; max-width: 100%; overflow-wrap: anywhere; }
.burn-dlg .burn-unit { color: var(--label-2); font-size: 14px; margin: 4px 0 18px; }
.burn-dlg .burn-rows { border-top: 1px solid var(--border); }
.burn-dlg .burn-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); color: var(--label-2); font-size: 15px; }
.burn-dlg .burn-row b { color: var(--label); font-weight: 600; font-variant-numeric: tabular-nums; }
.burn-dlg .burn-addr { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.burn-dlg .burn-note { margin-top: 14px; color: var(--label-3); font-size: 13px; }
.burn-dlg .dlg-act { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .dlg-back, .dlg { transition-duration: .01ms; }
  .dlg { transform: none; }
  @starting-style { .dlg { transform: none; } }
}

/* ============================ 帮助与支持 ============================ */
.help { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .help { grid-template-columns: 1fr; } }
.help-label { margin: 0 0 12px; color: var(--label-3); font-size: 14px; font-weight: 600; }
.help-contact {
  border: 1px solid var(--border-strong); border-radius: var(--r-xl); padding: clamp(22px, 3vw, 30px);
  background: radial-gradient(110% 90% at 100% 0%, rgba(255,107,139,.14), transparent 60%), var(--surface);
}
.help-mail {
  display: block; margin: 0 0 10px;
  font-size: clamp(20px, 2.3vw, 26px); line-height: 1.25; font-weight: 800; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.help-contact p { margin: 0; color: var(--label-2); font-size: 16px; }
.help-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  display: flex; align-items: center; gap: 14px; padding: 18px 2px;
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
  font-size: 18px; font-weight: 700;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q .k { flex: 1; min-width: 0; }
.faq-ico { flex: none; display: flex; color: var(--accent); }
.faq-chev { flex: none; color: var(--label-3); transition: transform var(--t-base) var(--out); }
.faq-item[open] .faq-chev { transform: rotate(90deg); }
.faq-a { padding: 0 2px 22px 37px; color: var(--label-2); font-size: 16px; line-height: 1.55; }
.faq-item[open] .faq-a { animation: faq-in var(--t-base) var(--out); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }
.faq-a p { margin: 12px 0 0; }
.faq-a p:first-child { margin-top: 0; }
.faq-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: step; }
.faq-steps li { counter-increment: step; display: flex; gap: 12px; align-items: flex-start; color: var(--label-1b); overflow-wrap: anywhere; }
.faq-steps li::before {
  content: counter(step); flex: none; margin-top: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fill); border: 1px solid var(--border-strong); color: var(--label-1b);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) { .faq-a { padding-left: 2px; } }

/* ============================ 中英文 ============================
   页面里的文字写两份：lang="zh" / lang="en"。<html data-lang> 由每页 <head> 里的小脚本定好（在渲染之前），
   这里只负责藏掉另一种语言，所以不会先闪一下中文再变英文。 */
html[data-lang="en"] [lang="zh"], html:not([data-lang="en"]) [lang="en"] { display: none !important; }
/* 分中英文用的 span 只是个容器，不能被「某某 span」这类规则改掉样子，一律按外面的元素来。
   比 .way span 这类规则多一层（html），盖得住；藏另一种语言的规则带 !important，不受影响 */
html span[lang] { display: inline; margin: 0; padding: 0; font: inherit; color: inherit; opacity: 1; letter-spacing: inherit; border: 0; background: none; border-radius: 0; }
/* 套餐、币种后面的「省 2 个月」「立减 20%」小标签 */
.opt .tag {
  font-style: normal; font-size: 11px; font-weight: 700; margin-left: 7px; vertical-align: 1px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(255,143,107,.16); color: var(--accent);
}

/* 第一次进站：选语言 */
.lang-pick {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px;
  background: rgba(5,4,12,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: lang-fade var(--t-base) var(--out);
}
.lang-card {
  width: min(340px, 100%); display: grid; gap: 10px; text-align: center;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-xl); padding: 28px 22px 20px;
  box-shadow: var(--shadow-hero); animation: lang-rise var(--t-enter) var(--spring);
}
.lang-card .mark { width: 56px; height: 56px; margin: 0 auto 2px; display: block; }
.lang-card .mark img { width: 100%; height: 100%; display: block; }
.lang-card h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.lang-card h2 span { display: block; margin-top: 2px; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--label-2); }
.lang-card .btn { width: 100%; }
.lang-card p { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--label-3); }
@keyframes lang-fade { from { opacity: 0; } }
@keyframes lang-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* 分段控件：用户中心切换语言（和 App 里选模式的那个一样） */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.seg button {
  border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  padding: 6px 13px; border-radius: 9px; font-size: 14px; color: var(--label-1b);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.lang-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ============================================================================
   ACCT-BEGIN
   用户中心（pay.html）和推广页（agent.html）的版式，2026-10-05 重做。
   全部挂在 <body class="acct"> 下面：首页、隐私政策、后台没有这个类，不受影响。上面的旧规则一条没动。

   整页只有一条地平线（和首页首屏、和标志同一个意思）：
   · 电脑端两栏。左栏是账户状态，剩余天数站在线上、线下面是它被切成条的倒影（没登录时站在线上的是标志）；
     右栏的页面标题站在同一条线上，内容都在线下面。左栏跟着滚动，线分两段画：左栏那段跟着左栏走。
   · 手机端单栏。状态区通栏在最上面，下面用细线分区，不再是一张张卡片。
   ⚠️ 两栏靠「线离顶部多远」这个固定值（--ac-hz）对齐，右栏线上面只放一行标题，别往里加会折行的东西。
   ⚠️ .ac-shell 的直接子元素里 #cardAuth 要排在 .ac-art 前面（用「#cardAuth.hide ~」判断是否已登录）。
   ========================================================================= */
body.acct {
  --ac-rail: 300px;   /* 左栏宽 */
  --ac-gap:  52px;    /* 两栏之间 */
  --ac-hz:   150px;   /* 地平线离版面顶部多远 */
  --ac-num:  min(88px, 25vw);   /* 剩余天数的字号（很窄的手机上跟着缩，免得「23.6 hours」这种顶出去） */
  --ac-mark: 200px;   /* 没登录时那个标志的边长 */
  --ac-lift: 9px;     /* 站在线上的东西离线多高；倒影离线同样远 */
}
@media (min-width: 960px)  { body.acct { --ac-hz: 212px; --ac-num: 116px; --ac-mark: 400px; } }
@media (min-width: 1180px) { body.acct { --ac-rail: 360px; --ac-gap: 72px; } }

/* ---------- 骨架 ---------- */
body.acct .ac-shell {
  position: relative; display: grid; align-content: start;
  grid-template-columns: [full-start] var(--gutter) [rail-start main-start] minmax(0, 1fr) [rail-end main-end] var(--gutter) [full-end];
  padding-bottom: 64px;
}
body.acct .ac-shell > * { grid-column: main-start / main-end; min-width: 0; }
body.acct .ac-rail, body.acct .ac-art { position: relative; isolation: isolate; order: 1; }
/* 单栏时从上到下：状态区（或标志）→ 标题 → 说明 → 登录表单 → 其余内容。源码里 #cardAuth 排在最前面，所以要重新排 */
body.acct .ac-head { order: 2; }
body.acct .ac-lede { order: 3; }
body.acct .ac-auth { order: 4; }
body.acct .ac-body { order: 5; }
@media (min-width: 960px) {
  body.acct .ac-shell {
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [rail-start] var(--ac-rail) [rail-end] var(--ac-gap)
      [main-start] minmax(0, calc(1120px - var(--ac-rail) - var(--ac-gap))) [main-end]
      minmax(var(--gutter), 1fr) [full-end];
    grid-template-rows: var(--ac-hz) auto auto 1fr;
    min-height: calc(100vh - 61px);
    padding-bottom: 96px;
  }
  /* 地平线的右半段：从两栏中间一直到屏幕右边 */
  body.acct .ac-shell::before {
    content: ""; grid-column: rail-end / full-end; grid-row: 1; align-self: end; height: 2px;
    background: linear-gradient(90deg, var(--g2) 0%, rgba(139,107,255,.85) 44%, rgba(139,107,255,0) 100%);
  }
  body.acct .ac-rail, body.acct .ac-art { grid-column: rail-start / rail-end; grid-row: 1 / -1; }
  body.acct .ac-rail { position: sticky; top: 61px; align-self: start; }
  /* 展开了改密码 / 删除账户，或者窗口太矮：左栏会比窗口高，不能再吸顶 */
  body.acct .ac-rail:has(.ac-drawer:not(.hide)) { position: relative; top: 0; }
  body.acct .ac-head { grid-row: 1; align-self: end; }
  body.acct .ac-lede { grid-row: 2; }
  body.acct .ac-auth { grid-row: 3; }
  body.acct .ac-body { grid-row: 4; }
}
@media (min-width: 960px) and (max-height: 720px) { body.acct .ac-rail { position: relative; top: 0; } }

/* 用户中心的每一块都还带着 .sheet（脚本和验证按它找），在这套版式里它不再是卡片 */
body.acct .sheet { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
body.acct :where(.sheet) h2 { margin: 0; }
body.acct :where(.sheet) > .btn { margin-top: 0; }

/* ---------- 左栏：账户状态 / 没登录时的标志 ---------- */
body.acct .ac-rail { padding: calc(var(--ac-hz) + var(--ac-lift) + var(--ac-num) * .5 + 16px) 0 0; }
/* 地平线的左半段，跟着左栏走。手机端它就是整条线，通到屏幕两边 */
body.acct .ac-rail::before, body.acct .ac-art::before {
  content: ""; position: absolute; top: calc(var(--ac-hz) - 2px); height: 2px;
  left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter));
  background: linear-gradient(90deg, transparent 0%, var(--g1) 10%, var(--g2) 50%, rgba(139,107,255,.85) 80%, transparent 100%);
}
body.acct .ac-rail::after, body.acct .ac-art::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -14%; width: 104%; top: calc(var(--ac-hz) - 44px); height: 88px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,107,139,.30), rgba(139,107,255,.10) 55%, transparent 74%);
  filter: blur(16px);
}
@media (min-width: 960px) {
  body.acct .ac-rail::before, body.acct .ac-art::before {
    left: -100vw; right: 0;
    background: linear-gradient(270deg, var(--g2) 0, var(--g1) 300px, rgba(255,196,107,0) 680px);
  }
}

body.acct .ac-rail > h2 {
  position: absolute; left: 0; top: 24px;
  font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; color: var(--label-3);
}
@media (min-width: 960px) { body.acct .ac-rail > h2 { top: 38px; } }

/* 剩余天数：站在线上，下面是倒影。倒影用 -webkit-box-reflect（Chrome / Safari / Edge 都有；Firefox 没有，只是少了倒影）。
   遮罩是跟着倒影一起上下翻的，所以这里的「to top」对应屏幕上的从线往下：条越来越细、越来越淡。
   倒影离盒子底 20px = --ac-lift 的两倍加线宽（这里不写 calc，老一点的 Safari 在这个属性里不认） */
body.acct .ac-rail .days, body.acct .ac-rail .idle { padding: 0; text-align: left; }
body.acct .ac-rail .days b, body.acct .ac-rail .idle b {
  position: absolute; left: 0; bottom: calc(100% - var(--ac-hz) + var(--ac-lift) + 2px);
  margin: 0; white-space: nowrap;
}
body.acct .ac-rail .days b {
  font-size: var(--ac-num); line-height: .76; letter-spacing: -.045em; margin-left: -.035em;
}
/* 倒影只给数字：单位是汉字，倒过来像乱码 */
body.acct .ac-rail .days b em.dn {
  font-style: normal; display: inline-block; line-height: .76;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  -webkit-box-reflect: below 20px linear-gradient(to top, rgba(0,0,0,.50) 0 21%, transparent 21% 27%, rgba(0,0,0,.32) 27% 38%, transparent 38% 44%, rgba(0,0,0,.18) 44% 52%, transparent 52% 58%, rgba(0,0,0,.09) 58% 62%, transparent 62%);
}
body.acct .ac-rail .days b i { position: relative; top: -.1em; font-size: .225em; line-height: 1; letter-spacing: 0; margin-left: .3em; }
/* 没开通：线上只有一行字，没有倒影（汉字倒过来像乱码），提示语紧跟在线下面 */
body.acct .ac-rail .idle b { font-size: clamp(30px, 8.4vw, 38px); line-height: .98; font-weight: 800; letter-spacing: -.02em; color: var(--label); }
body.acct .ac-rail .days span { display: block; margin: 0; color: var(--label-1b); font-size: 16px; line-height: 1.5; }
body.acct .ac-rail .idle span { display: block; margin: 0; color: var(--label-2); font-size: 15px; line-height: 1.5; }
body.acct .ac-rail .idle { margin-top: calc(10px - var(--ac-num) * .5); }
@supports not (-webkit-box-reflect: below 0px) {
  body.acct .ac-rail { padding-top: calc(var(--ac-hz) + 24px); }
  body.acct .ac-rail .idle { margin-top: 0; }
}

body.acct .ac-who {
  margin: 4px 0 0; color: var(--label-3); font-size: 14px; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.acct .ac-who:empty { display: none; }
body.acct .ac-rail > .btn-block { margin-top: 24px; }

/* 修改密码 / 退出登录 / 删除账户：手机端横排三格，电脑端竖排三行，都只用细线分开 */
body.acct .ac-acts { display: flex; flex-wrap: wrap; margin-top: 24px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
body.acct .ac-acts > .btn {
  flex: 1 1 auto; min-height: 52px; padding: 10px 8px; border-radius: 0;
  font-size: 15px; font-weight: 500; color: var(--label-1b);
}
body.acct .ac-acts > .btn:not(:first-child) { box-shadow: -1px 0 0 var(--border); }
body.acct .ac-acts > .ac-danger { color: var(--red); }
body.acct .ac-drawer { order: 2; flex: 0 0 100%; padding: 20px 0 24px; border-top: 1px solid var(--border); }
body.acct .ac-drawer > p { margin: 0 0 14px; }
body.acct .ac-drawer .btn-block { margin-top: 16px; }
body.acct .ac-btn-danger { background: var(--red); border-color: transparent; color: #fff; }
@media (hover: hover) and (pointer: fine) {
  body.acct .ac-acts > .btn:hover { color: var(--label); }
  body.acct .ac-acts > .ac-danger:hover { color: #FF8198; }
  body.acct .ac-btn-danger:hover { background: #FF7890; border-color: transparent; }
}
@media (min-width: 960px) {
  body.acct .ac-acts { display: block; border-bottom: 0; }
  body.acct .ac-acts > .btn { display: flex; width: 100%; justify-content: flex-start; padding: 12px 0; min-height: 50px; border-bottom: 1px solid var(--border); }
  body.acct .ac-acts > .btn:not(:first-child) { box-shadow: none; }
  body.acct .ac-drawer { border-top: 0; border-bottom: 1px solid var(--border); }
}

/* 没登录：标志站在线上（三角在线上，倒影在线下） */
body.acct .ac-art { --ac-hz: 122px; height: calc(var(--ac-hz) + var(--ac-mark) * .4); pointer-events: none; user-select: none; }
body.acct #cardAuth.hide ~ .ac-art { display: none; }
/* 图片盒子只留中间六成宽（object-fit: cover 把两边的空白裁掉），这样三角的左右尖正好贴着栏边，也不会有看不见的部分伸出屏幕 */
body.acct .ac-art img {
  position: absolute; display: block; max-width: none; object-fit: cover;
  width: calc(var(--ac-mark) * .6); height: var(--ac-mark);
  left: 0; top: calc(var(--ac-hz) - 1px - var(--ac-mark) * .529);
  filter: drop-shadow(0 0 44px rgba(255,107,139,.2));
}
@media (min-width: 960px) {
  body.acct .ac-art { --ac-hz: 212px; height: auto; }
  /* 付款入口关着、已经登录：右栏只有标题和语言，把标志请到右边，站在同一条线上（和首页首屏一个构图） */
  body.acct.pay-off #cardAuth.hide ~ .ac-art {
    --ac-mark: 250px; display: block; grid-column: main-start / main-end; justify-self: end; width: calc(var(--ac-mark) * .6);
  }
  body.acct.pay-off #cardAuth.hide ~ .ac-art::before { display: none; }
  body.acct.pay-off #cardAuth.hide ~ .ac-art::after { left: -70%; width: 170%; }   /* 右边不许超出栏边，否则窄一点的窗口会横向溢出 */
}

/* ---------- 右栏：标题站在线上 ---------- */
body.acct .ac-head { margin-top: 44px; }
body.acct #cardAuth:not(.hide) ~ .ac-head { margin-top: 4px; }
body.acct .ac-head h1 { margin: 0; font-size: clamp(32px, 9vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
body.acct .ac-lede { padding-top: 12px; }
body.acct .ac-lede .lead { margin: 0; max-width: 34em; color: var(--label-1b); font-size: 17px; line-height: 1.5; }
body.acct .plat-row { margin-top: 14px; gap: 8px 22px; }
body.acct .plat { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; border-radius: 0; color: var(--label-3); font-size: 14px; line-height: 1.45; }
body.acct .plat::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (min-width: 960px) {
  body.acct .ac-head, body.acct #cardAuth:not(.hide) ~ .ac-head { margin: 0; padding-bottom: calc(var(--ac-lift) + 2px); }
  body.acct .ac-head h1 { font-size: clamp(44px, 4.3vw, 58px); line-height: 1; white-space: nowrap; }
  body.acct .ac-lede { padding-top: 26px; }
}

/* ---------- 登录 / 注册 ---------- */
body.acct .ac-auth { max-width: 440px; padding-top: 32px; }
body.acct .ac-auth > h2 { margin: 0 0 20px; font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
body.acct .ac-auth input, body.acct .ac-drawer input, body.acct .ac-row input { background: var(--surface); padding: 15px 16px; }
body.acct input:focus-visible { outline: none; }   /* 输入框的焦点已经有描边变色加一圈光，不再叠一层 outline */
body.acct .ac-auth > .btn-block { margin-top: 22px; }
body.acct .ac-auth-alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; margin-top: 6px; }
body.acct .ac-auth-alt .btn { min-height: 48px; padding: 12px 2px; color: var(--accent); font-weight: 600; white-space: normal; text-align: left; }
@media (hover: hover) and (pointer: fine) { body.acct .ac-auth-alt .btn:hover { color: #FFB095; } }
@media (min-width: 960px) { body.acct .ac-auth { padding-top: 40px; } }

body.acct .ac-body { padding-top: 36px; }
@media (min-width: 960px) { body.acct .ac-body { padding-top: 48px; } }

/* ---------- 付款流程：选套餐 → 选币种 → 怎么付 → 专属充值地址。序号是样式自己数的 ---------- */
body.acct .ac-flow { position: relative; counter-reset: ac-step; padding-bottom: 48px; }
body.acct .ac-dep { counter-reset: ac-step 3; }
body.acct .ac-step {
  counter-increment: ac-step; display: flex; align-items: center; gap: 12px;
  margin: 40px 0 16px; font-size: 20px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em;
}
body.acct .ac-flow > .ac-step:first-child { margin-top: 0; }
body.acct .ac-step::before {
  content: counter(ac-step); flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; box-sizing: border-box;
  font-size: 14px; line-height: 1; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums;
  color: var(--label-1b); background: var(--bg); border: 1px solid var(--border-strong);
}
/* 选好了的那一步、以及正在进行的「专属充值地址」这一步，序号点亮 */
body.acct .ac-step:has(+ .ac-opts > .sel)::before,
body.acct .ac-dep > .ac-step::before { color: var(--accent-ink); background: var(--accent); border-color: transparent; }
@media (min-width: 720px) {
  body.acct .ac-flow { padding-left: 50px; }
  body.acct .ac-flow::before {
    content: ""; position: absolute; left: 14.5px; top: 34px; bottom: 40px; width: 1px;
    background: linear-gradient(var(--border-strong), var(--border) 70%, transparent);
  }
  body.acct .ac-step { display: block; position: relative; }
  body.acct .ac-step::before { position: absolute; left: -50px; top: -3px; }
}

/* 套餐、币种：并排的格子，连成一条，格子之间只有一根细线 */
body.acct .ac-opts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
}
body.acct .ac-opts:empty { display: none; }
body.acct .ac-opts > .opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 560px) {
  body.acct .ac-opts { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  body.acct .ac-opts > .opt:last-child:nth-child(odd) { grid-column: auto; }
}
body.acct .ac-opts .opt {
  position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 16px;
  margin: 0; padding: 16px 16px 17px; min-height: 148px;
  border: 0; border-radius: 0; box-shadow: none; background: var(--bg-elevated);
}
body.acct .ac-opts .opt b { display: block; padding-right: 24px; font-size: 16px; line-height: 1.3; }   /* 右边让出单选圆点的位置 */
body.acct .ac-opts .opt .tag { display: inline-block; margin: 7px 0 0; vertical-align: 0; white-space: nowrap; }
/* 说明文字只在空格处折行（中文不会把「每月」「流量」拆成两行），两行尽量一样长；实在放不下才硬折 */
body.acct .ac-opts .opt .meta { margin-top: 7px; font-size: 13px; line-height: 1.45; color: var(--label-2); word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
body.acct .ac-opts .opt .right { margin-top: auto; text-align: left; white-space: normal; }
body.acct .ac-opts .opt .right b { display: inline; padding-right: 0; font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
body.acct .ac-opts .opt .right .meta { display: inline; margin: 0 0 0 6px; }
/* 右上角的单选圆点 */
body.acct .ac-opts .opt::after {
  content: ""; position: absolute; right: 14px; top: 16px; width: 18px; height: 18px; border-radius: 50%;
  box-sizing: border-box; border: 1.5px solid var(--border-strong);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
body.acct .ac-opts .opt.sel {
  background: linear-gradient(180deg, rgba(255,143,107,.17), rgba(255,107,139,.05) 72%), var(--bg-elevated);
}
body.acct .ac-opts .opt.sel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--grad-warm); }
body.acct .ac-opts .opt.sel::after {
  border-color: transparent;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.7 2.7L13 6.6' fill='none' stroke='%231A0F0A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}
@media (hover: hover) and (pointer: fine) { body.acct .ac-opts .opt:not(.sel):hover { background: #161323; } }
/* 只有一个可选（比如体验档只收一种币）：横着摆成一条 */
body.acct .ac-opts > .opt:only-child { flex-direction: row; align-items: center; justify-content: space-between; min-height: 0; padding-right: 48px; }
body.acct .ac-opts > .opt:only-child .right { margin-top: 0; text-align: right; white-space: nowrap; }
body.acct .ac-opts > .opt:only-child::after { top: 50%; margin-top: -9px; }

/* 怎么付：两种方式并排 */
body.acct .ac-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px; }
body.acct .ac-ways .way { margin: 0; padding: 18px 20px 19px; border-radius: 16px; min-height: 96px; }
body.acct .ac-ways .way b { margin-bottom: 5px; }
body.acct .ac-ways .way span { line-height: 1.5; text-wrap: balance; }

/* 专属充值地址：数量和地址放在一张「转账单」上，这是整页唯一一块有底色的面板 */
body.acct .ac-p { margin: 0 0 22px; max-width: 42em; color: var(--label-2); font-size: 15px; line-height: 1.6; }
body.acct .ac-p b, body.acct .ac-hint b { color: var(--label); }
body.acct .ac-ticket {
  position: relative; overflow: hidden; padding: 24px 22px 22px; border-radius: 20px;
  border: 1px solid var(--border-strong);
  background: radial-gradient(90% 120% at 0% 0%, rgba(255,143,107,.11), transparent 60%), radial-gradient(70% 120% at 100% 100%, rgba(139,107,255,.10), transparent 62%), var(--surface);
}
body.acct .ac-ticket::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); }
body.acct .ac-tk-label { margin: 0 0 8px; color: var(--label-3); font-size: 13px; line-height: 1.4; }
body.acct .ac-tk-note { margin: 10px 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border-strong); color: var(--label-2); font-size: 13px; line-height: 1.55; }
body.acct .addr-row { flex-direction: row; gap: 8px; }
body.acct .addr-row code { background: var(--surface); border-radius: 12px; }
body.acct .ac-ticket .addr-row code { background: var(--bg); }
body.acct .btn-copy { flex: 0 0 auto; width: auto; min-width: 78px; padding-left: 14px; padding-right: 14px; border-radius: 12px; }
body.acct .ac-amt { align-items: center; }
body.acct .ac-ticket .ac-amt code {
  padding: 0; border: 0; border-radius: 0; background: none;
  font-family: inherit; font-size: clamp(30px, 8vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; word-break: normal; overflow-wrap: anywhere;
}
body.acct .ac-amt .btn-copy { align-self: center; padding-top: 11px; padding-bottom: 11px; }

body.acct .ac-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 26px;
  background: none; border: 0; border-radius: 0; overflow: visible;
}
body.acct .ac-facts .list-row { display: block; padding: 12px 0 13px; border-top: 1px solid var(--border); }
body.acct .ac-facts .list-row::before { display: none; }
body.acct .ac-facts .list-row .k { display: block; font-size: 13px; line-height: 1.4; color: var(--label-3); }
body.acct .ac-facts .list-row .v { display: block; margin-top: 3px; text-align: left; font-size: 15px; line-height: 1.45; }
body.acct .ac-dep .note { margin-top: 20px; padding: 2px 0 2px 16px; border: 0; border-left: 2px solid var(--orange); border-radius: 0; background: none; }
body.acct .ac-dep .note p { margin: 4px 0 0; color: var(--label-2); }
body.acct #depHit {
  margin-top: 22px; min-height: 0; padding: 15px 18px; border-radius: 14px;
  background: rgba(95,214,160,.10); border: 1px solid rgba(95,214,160,.36);
  font-size: 16px; line-height: 1.45; font-weight: 600;
}
body.acct .ac-sub { margin: 36px 0 4px; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: 0; }
body.acct .ac-dep > .btn { margin-top: 20px; min-height: 46px; padding-left: 22px; padding-right: 22px; }

/* ---------- 成组的行：左边名字，右边内容，行与行之间一根细线（推广链接 / 专属地址 / 提现地址 / 你的助力 / 语言） ---------- */
body.acct .ac-group { border-bottom: 1px solid var(--border); }
body.acct .ac-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 0; border-top: 1px solid var(--border); }
body.acct .ac-row > h2, body.acct .ac-row > .ac-k { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: 0; color: var(--label); }
body.acct .ac-row-main { min-width: 0; }
body.acct .ac-row-main > .dep-hist { text-wrap: balance; }
body.acct .ac-row-main > .btn { min-height: 46px; padding-left: 20px; padding-right: 20px; }
body.acct .ac-hint { margin: 10px 0 0; color: var(--label-2); font-size: 13px; line-height: 1.55; }
body.acct .ac-row .dep-hist .row:first-child { padding-top: 0; }
body.acct .ac-row .dep-hist .row:last-child { padding-bottom: 0; }
body.acct .ac-row .seg { background: var(--surface); }
body.acct .ac-row .seg button { padding: 10px 16px; min-height: 42px; }
/* 记录每一行：左边放不下就折行，右边的状态不折 */
body.acct .dep-hist .row > :last-child { flex: none; white-space: nowrap; }
body.acct .lang-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
@media (min-width: 720px) {
  body.acct .ac-row { grid-template-columns: 176px minmax(0, 1fr); gap: 8px 32px; padding: 26px 0; }
  body.acct .ac-row > h2 { padding-top: 12px; }
  body.acct .ac-row-main > .dep-hist { padding-top: 13px; padding-bottom: 12px; }
  body.acct .lang-row { grid-template-columns: 176px minmax(0, 1fr); }
  body.acct .lang-row .seg { justify-self: start; }
}

body.acct .ac-foot { margin: 28px 0 0; max-width: 46em; color: var(--label-3); font-size: 13px; line-height: 1.6; }
body.acct .ac-foot a { text-decoration: underline; text-underline-offset: 3px; }
/* ACCT-END ================================================================= */