/* ============================================================
   xyn.lgbt · Aurora
   ------------------------------------------------------------
   深色底 + 极光。换成深色不是为了好看而好看——
   跨性别旗的浅蓝 #5BCEFA 和粉 #F5A9B8 在白底上对比度不到 4.5:1，
   之前只能用压深一档的替代色，旗子的颜色其实一次都没真正出现过。
   放到近黑的底上，这两个原色对比度都在 9:1 以上，
   终于可以直接当正文色和主色用。

   CSP 是 style-src 'self'，没有 unsafe-inline —— 任何内联 style 属性
   都会被浏览器丢掉。所以所有样式必须写在这里，HTML 里一个 style= 都不能留。
   ============================================================ */

:root {
  /* 旗面原色。深色底上直接可用，不再需要压深版 */
  --flag-blue: #5bcefa;
  --flag-pink: #f5a9b8;
  --flag-white: #ffffff;

  /* 提亮一档，用于需要更抢眼的文字和图标 */
  --blue: #8adfff;
  --blue-deep: #2aa9e0;
  --pink: #ffc0d2;
  --pink-deep: #e87fa0;

  /* 深色底上的「极浅底色」= 极淡的色膜 */
  --blue-wash: rgba(91, 206, 250, .12);
  --pink-wash: rgba(245, 169, 184, .12);

  --ink: #f4f7fc;
  --ink-2: #c2ccdc;
  /* 玻璃卡自己带一层浅色膜，次级文字压得太暗会直接糊在上面。
     #9aa7bd 在卡片底上大约 7:1，小字也稳。 */
  --ink-3: #9aa7bd;
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .18);
  --bg: #06070c;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .07);

  --ok: #4ade9f;
  --warn: #ffc16b;
  --err: #ff8f9c;

  --radius: 20px;
  --radius-sm: 12px;

  --glow-blue: 0 0 0 1px rgba(91, 206, 250, .35), 0 8px 30px -6px rgba(91, 206, 250, .45);
  --glow-pink: 0 0 0 1px rgba(245, 169, 184, .35), 0 8px 30px -6px rgba(245, 169, 184, .45);

  /* 缓动：spring 用于「东西落位」，smooth 用于颜色和透明度 */
  --spring: cubic-bezier(.22, 1.4, .36, 1);
  --smooth: cubic-bezier(.4, 0, .2, 1);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.6;
}

/* 底色只能给 html，不能给 body。
   .scene 是 z-index:-1 的固定层，在根层叠上下文里它排在
   「根元素背景」之后、「普通流后代的背景」之前——
   body 一旦有不透明底色，就会整片盖在极光上面，背景看上去纯黑。
   这个坑很隐蔽：两个元素设同一个颜色，看起来完全合理。 */
html { background: var(--bg); }
body { background: transparent; min-height: 100vh; overflow-x: hidden; }

::selection { background: rgba(91, 206, 250, .3); color: #fff; }

a { color: var(--blue); }

/* ============================================================
   1. 极光背景
   三团大色斑在固定层上慢慢飘，叠一层细网格找回结构感。
   全部 fixed + pointer-events:none，不参与布局也不吃点击。
   ============================================================ */

.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* 不加 size：固定定位靠 inset 撑开，加了 size 反而要靠浏览器兜底 */
  contain: layout paint style;
}

/* 页头后面那团底光。放在 ::before 上，它是 .scene 的第一个子盒，
   会画在三团色斑下面，负责把标题托起来。 */
.scene::before {
  content: "";
  position: absolute;
  left: 50%; top: -12vh;
  width: min(980px, 130vw);
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(138, 223, 255, .34) 0%, rgba(245, 169, 184, .18) 44%, transparent 72%);
  filter: blur(40px);
}

/* 暗角。::after 是最后一个子盒，压在所有色斑之上，
   把注意力收回中间，顺便保证边缘文字始终够黑。 */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 105% 75% at 50% 38%,
    transparent 28%, rgba(3, 4, 9, .55) 72%, rgba(3, 4, 9, .85) 100%);
}

.scene i {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* 中心留一段实色再往外化：光晕才有「厚度」，
     全程线性渐变再一模糊，能量摊太开，看着就是一片灰。 */
  filter: blur(62px);
  mix-blend-mode: screen;
  opacity: .8;
  will-change: transform;
}

.scene i:nth-child(1) {
  width: 72vw; height: 72vw;
  min-width: 460px; min-height: 460px;
  top: -20vh; left: -16vw;
  background: radial-gradient(circle,
    rgba(91, 206, 250, .95) 0%, rgba(91, 206, 250, .5) 38%, rgba(91, 206, 250, 0) 72%);
  animation: drift-a 26s var(--smooth) infinite alternate;
}

.scene i:nth-child(2) {
  width: 64vw; height: 64vw;
  min-width: 420px; min-height: 420px;
  top: 20vh; right: -20vw;
  background: radial-gradient(circle,
    rgba(245, 169, 184, .9) 0%, rgba(245, 169, 184, .45) 38%, rgba(245, 169, 184, 0) 72%);
  animation: drift-b 31s var(--smooth) infinite alternate;
}

.scene i:nth-child(3) {
  width: 84vw; height: 56vw;
  min-width: 480px; min-height: 340px;
  bottom: -20vh; left: 4vw;
  background: radial-gradient(circle,
    rgba(160, 225, 255, .7) 0%, rgba(200, 180, 240, .3) 42%, rgba(255, 255, 255, 0) 74%);
  opacity: .5;
  animation: drift-c 37s var(--smooth) infinite alternate;
}

/* 网格：两条 1px 线重复铺开，再用径向遮罩把边缘化掉 */
.scene .grid {
  position: absolute;
  inset: -10%;
  border-radius: 0;
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 72% 60% at 50% 26%, #000 0%, transparent 76%);
  mask-image: radial-gradient(ellipse 72% 60% at 50% 26%, #000 0%, transparent 76%);
  animation: none;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14vw, 10vh, 0) scale(1.18); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-16vw, 16vh, 0) scale(.9); }
}
@keyframes drift-c {
  from { transform: translate3d(-8vw, 0, 0) scale(1); }
  to   { transform: translate3d(10vw, -8vh, 0) scale(1.22); }
}

/* ============================================================
   2. 顶部旗带
   还是蓝粉白粉蓝五道，但加一道光沿着它跑过去。
   ============================================================ */

.flagbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  z-index: 50;
  overflow: hidden;
}
.flagbar i { display: block; }
.flagbar i:nth-child(1), .flagbar i:nth-child(5) { background: var(--flag-blue); }
.flagbar i:nth-child(2), .flagbar i:nth-child(4) { background: var(--flag-pink); }
.flagbar i:nth-child(3) { background: var(--flag-white); }

.flagbar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
  transform: translateX(-100%);
  animation: beam 5.5s var(--smooth) infinite;
}
@keyframes beam {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ============================================================
   3. 布局与页头
   ============================================================ */

.wrap {
  max-width: 580px;
  margin: 0 auto;
  padding: 56px 20px 80px;
  position: relative;
}

.head { text-align: center; margin-bottom: 34px; }

/* 标志外面套一圈转动的锥形光，慢到不抢注意力 */
.logo-wrap {
  position: relative;
  width: 76px; height: 76px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  animation: float 6s var(--smooth) infinite alternate;
}
.logo-wrap::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--flag-blue), var(--flag-pink), #fff, var(--flag-pink), var(--flag-blue));
  filter: blur(13px);
  opacity: .55;
  animation: spin 9s linear infinite;
}
@keyframes float {
  from { transform: translateY(-3px); }
  to   { transform: translateY(3px); }
}

.logo {
  position: relative;
  width: 68px; height: 68px;
  display: block;
  border-radius: 20px;
  box-shadow: 0 10px 34px -8px rgba(91, 206, 250, .6);
}

h1 {
  font-size: clamp(30px, 8vw, 42px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.12;
  margin: 0 0 10px;
  background: linear-gradient(105deg, var(--flag-blue) 0%, #ffffff 42%, var(--flag-pink) 82%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s var(--smooth) infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.sub { color: var(--ink-3); font-size: 14.5px; margin: 0; }

/* ============================================================
   4. 卡片
   玻璃质感 + 渐变描边。描边用 padding-box / border-box 两层背景做，
   比伪元素叠一圈要干净，也不会在圆角处露出锯齿。
   ============================================================ */

.card {
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
  overflow: hidden;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(145deg, rgba(91, 206, 250, .42), rgba(245, 169, 184, .3) 48%, rgba(255, 255, 255, .06) 88%) border-box;
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, .06) inset,
    0 24px 60px -30px rgba(0, 0, 0, .9);
  transition: transform .4s var(--smooth), box-shadow .4s var(--smooth);
}

/* 鼠标跟随的聚光。--mx/--my 由 fx.js 写入（CSSOM 赋值不受 CSP 限制） */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%),
    rgba(138, 223, 255, .16), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--smooth);
}
.card:hover::before { opacity: 1; }
.card:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, .1) inset,
    0 30px 70px -30px rgba(0, 0, 0, .95);
}

.card h2 {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-2);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 小标题后面拖一条渐隐的线，把每段内容分得更清楚 */
.card h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

/* 强调卡：赞助位价格那张，底色换成更明显的双色膜 */
.card.feature {
  background:
    linear-gradient(150deg, rgba(91, 206, 250, .13), rgba(245, 169, 184, .11)) padding-box,
    linear-gradient(145deg, rgba(91, 206, 250, .6), rgba(245, 169, 184, .45)) border-box;
}
/* 强调卡底色更亮，次级文字要跟着抬一档才压得住 */
.card.feature .tiny,
.card.feature .lead-sm { color: var(--ink-2); }

/* ============================================================
   5. 入场动画
   只有 fx.js 跑起来了才预先藏内容（html[data-fx]），
   没有 JS 的情况下一切照常显示。
   ============================================================ */

html[data-fx="on"] .reveal {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  filter: blur(6px);
}
html[data-fx="on"] .reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity .7s var(--smooth) var(--d, 0ms),
    transform .8s var(--spring) var(--d, 0ms),
    filter .7s var(--smooth) var(--d, 0ms);
}

/* ============================================================
   6. 胶囊选择器
   ============================================================ */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  appearance: none;
  position: relative;
  /* z-index 建一个层叠上下文，好让下面的 ::before 用 -1 沉到文字底下 */
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  transition: color .2s var(--smooth), border-color .2s var(--smooth),
              transform .35s var(--spring), box-shadow .3s var(--smooth);
}
/* 渐变填充放在伪元素上，靠 opacity 切换——background 属性本身没法平滑过渡。
   z-index:-1 是关键：绝对定位的伪元素默认画在文字之上，会把标签盖住。 */
.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(120deg, var(--flag-blue), var(--blue-deep));
  opacity: 0;
  transition: opacity .25s var(--smooth);
}

.chip:hover { border-color: var(--flag-blue); color: var(--blue); transform: translateY(-2px); }
.chip:active { transform: translateY(0) scale(.96); }

.chip[aria-pressed="true"] {
  color: #04222f;
  font-weight: 700;
  border-color: transparent;
  box-shadow: var(--glow-blue);
  animation: pop .45s var(--spring);
}
.chip[aria-pressed="true"]::before { opacity: 1; }

/* 代币那排用粉色，跟链那排不会看混 */
.chips.token .chip::before { background: linear-gradient(120deg, var(--flag-pink), var(--pink-deep)); }
.chips.token .chip:hover { border-color: var(--flag-pink); color: var(--pink); }
.chips.token .chip[aria-pressed="true"] { color: #33101d; box-shadow: var(--glow-pink); }

@keyframes pop {
  0%   { transform: scale(.9); }
  55%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ============================================================
   7. 输入
   ============================================================ */

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }

label {
  display: block;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 8px;
  font-weight: 500;
}

input[type="text"], input[type="number"], input[type="url"], textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: rgba(0, 0, 0, .28);
  outline: none;
  transition: border-color .2s var(--smooth), box-shadow .3s var(--smooth), background .2s var(--smooth);
}
input::placeholder, textarea::placeholder { color: #5d6a7e; }
input:focus, textarea:focus {
  border-color: var(--flag-blue);
  background: rgba(0, 0, 0, .4);
  box-shadow: 0 0 0 4px rgba(91, 206, 250, .16);
}
textarea { resize: vertical; min-height: 84px; line-height: 1.6; }

input[type="file"] {
  font-size: 13px;
  font-family: inherit;
  color: var(--ink-3);
  width: 100%;
}
input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 13px;
  margin-right: 12px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--blue);
  cursor: pointer;
  transition: .2s var(--smooth);
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--flag-blue);
  background: var(--blue-wash);
}

/* 金额输入单独放大，它是这一页最重要的一个数 */
#amount {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: 15px 16px;
}

/* ============================================================
   8. 按钮
   ============================================================ */

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 15px;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  color: #08202c;
  /* 四色渐变来回推，按钮本身一直在缓慢呼吸 */
  background: linear-gradient(100deg, var(--flag-pink) 0%, #e9c7ea 28%, var(--flag-blue) 62%, #9ae0ff 100%);
  background-size: 220% 100%;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .5) inset,
    0 10px 34px -12px rgba(91, 206, 250, .75);
  transition: transform .3s var(--spring), box-shadow .3s var(--smooth), filter .2s var(--smooth);
  animation: flow 9s var(--smooth) infinite;
}
@keyframes flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* hover 时一道高光斜着扫过去 */
.btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 55%;
  left: -70%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn:hover::after { animation: sheen .85s var(--smooth); }
@keyframes sheen { to { left: 130%; } }

.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .6) inset,
    0 16px 42px -12px rgba(91, 206, 250, .9);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled] {
  opacity: .4;
  cursor: not-allowed;
  filter: grayscale(.5);
  animation: none;
  box-shadow: none;
}
.btn[disabled]:hover { transform: none; }

.btn.ghost {
  background: var(--surface);
  color: var(--blue);
  border: 1px solid var(--line-2);
  box-shadow: none;
  animation: none;
  font-weight: 600;
}
.btn.ghost:hover {
  border-color: var(--flag-blue);
  background: var(--blue-wash);
  box-shadow: 0 10px 30px -14px rgba(91, 206, 250, .7);
}

.btn.tg {
  background: linear-gradient(100deg, #37bbfe, #6fd3ff 50%, #2aa2e0);
  background-size: 200% 100%;
  color: #04222f;
}

.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-row .btn { font-size: 14px; padding: 13px 14px; }

.actions { margin-bottom: 16px; }

/* ============================================================
   9. 钱包跳转
   ============================================================ */

.hint {
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  margin: 22px 0 12px;
}

.wallet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}

.wallet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  text-decoration: none;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  transition: transform .35s var(--spring), border-color .2s var(--smooth),
              color .2s var(--smooth), background .2s var(--smooth);
}
.wallet:hover {
  border-color: var(--flag-blue);
  color: var(--blue);
  background: var(--blue-wash);
  transform: translateY(-4px);
}
.wallet:active { transform: translateY(-1px) scale(.97); }

/* 首字母当图标：不引第三方 logo，省掉授权和外链两件麻烦事 */
.wallet .mark {
  width: 34px; height: 34px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800;
  color: #09202b;
  background: linear-gradient(140deg, var(--flag-pink), var(--flag-blue));
  box-shadow: 0 6px 18px -8px rgba(91, 206, 250, .9);
  transition: transform .4s var(--spring);
}
.wallet:hover .mark { transform: scale(1.1) rotate(-4deg); }

details.more { margin-top: 18px; }
details.more summary {
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
  text-align: center;
  padding: 8px;
  border-radius: 10px;
  transition: .2s var(--smooth);
}
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: " ↓"; opacity: .6; }
details.more[open] summary::after { content: " ↑"; }
details.more summary:hover { color: var(--blue); background: var(--surface); }
details.more[open] .btn-row { animation: rise .45s var(--spring); }
@keyframes rise {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   10. 二维码
   白底是必须的（扫码需要对比度），所以它天然会成为页面上最亮的一块。
   顺势把它做成主角：四角取景框 + 一道扫描光。
   ============================================================ */

.qr {
  position: relative;
  display: block;
  width: 224px; height: 224px;
  margin: 6px auto 20px;
  padding: 12px;
  background: #fff;
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .25),
    0 0 44px -6px rgba(91, 206, 250, .55),
    0 20px 50px -20px rgba(0, 0, 0, .9);
}
.qr img, .qr canvas {
  width: 100%; height: 100%;
  display: block;
  image-rendering: pixelated;
}

/* 四角取景框：四个 corner gradient 拼出来，不占 DOM */
.qr::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 20px;
  pointer-events: none;
  background:
    linear-gradient(var(--flag-blue), var(--flag-blue)) 0 0 / 2px 20px no-repeat,
    linear-gradient(var(--flag-blue), var(--flag-blue)) 0 0 / 20px 2px no-repeat,
    linear-gradient(var(--flag-pink), var(--flag-pink)) 100% 0 / 2px 20px no-repeat,
    linear-gradient(var(--flag-pink), var(--flag-pink)) 100% 0 / 20px 2px no-repeat,
    linear-gradient(var(--flag-pink), var(--flag-pink)) 0 100% / 2px 20px no-repeat,
    linear-gradient(var(--flag-pink), var(--flag-pink)) 0 100% / 20px 2px no-repeat,
    linear-gradient(var(--flag-blue), var(--flag-blue)) 100% 100% / 2px 20px no-repeat,
    linear-gradient(var(--flag-blue), var(--flag-blue)) 100% 100% / 20px 2px no-repeat;
}

/* 扫描光。放在伪元素上，JS 清空 innerHTML 重画二维码时不会被抹掉。
   透明度压在 .28：再高一点，盖住黑色码块之后对比度会掉到扫不出来。 */
.qr::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 12px; right: 12px;
  height: 36%;
  border-radius: 14px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(91, 206, 250, 0), rgba(91, 206, 250, .28));
  border-bottom: 2px solid var(--flag-blue);
  animation: scan 2.8s var(--smooth) infinite;
}
@keyframes scan {
  0%        { top: 12px; opacity: 0; }
  12%, 72%  { opacity: 1; }
  88%, 100% { top: calc(100% - 12px - 36%); opacity: 0; }
}

/* ============================================================
   11. 键值表 / 金额 / 等宽
   ============================================================ */

dl { margin: 0 0 18px; }

.kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.kv:last-child { border-bottom: 0; }
.kv dt { color: var(--ink-3); font-size: 12.5px; flex: none; margin: 0; }
.kv dd { margin: 0; text-align: right; font-size: 14px; word-break: break-all; }

.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 13px;
  letter-spacing: -.01em;
}
.mono.dim { color: var(--ink-3); }

.amount {
  text-align: center;
  font-size: clamp(40px, 12vw, 58px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.05;
  margin: 4px 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  background: linear-gradient(100deg, var(--flag-pink) 0%, #ffffff 46%, var(--flag-blue) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s var(--smooth) infinite;
}
.amount small {
  font-size: .32em;
  font-weight: 600;
  color: var(--ink-3);
  margin-left: 8px;
  letter-spacing: 0;
  -webkit-text-fill-color: var(--ink-3);
}
/* 金额变化时闪一下，让人注意到数字换了 */
.amount.flash { animation: shimmer 6s var(--smooth) infinite, flash .7s var(--smooth); }
@keyframes flash {
  0%  { transform: scale(1.06); filter: brightness(1.6); }
  100% { transform: scale(1); filter: none; }
}

/* 排版小工具。CSP 禁掉了内联 style，凡是过去写在 style= 里的间距
   都得在这里有个名字。 */
.center   { text-align: center; }
.strong   { font-weight: 700; }
.tiny     { font-size: 12.5px; color: var(--ink-3); }
.lead     { color: var(--ink-2); font-size: 14px; margin: 0 0 16px; }
.lead-sm  { color: var(--ink-2); font-size: 14px; margin: 0 0 12px; }
.mt       { margin-top: 16px; }
.mt-sm    { margin-top: 8px; }
.mb-md    { margin-bottom: 16px; }
.mb-xs    { margin-bottom: 4px; }
.mb0      { margin-bottom: 0; }
.tick + p { margin-top: 0; }
.pay-meta { margin: 0 0 20px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }

.copy {
  appearance: none;
  position: relative;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--blue);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  margin-left: 10px;
  transition: .2s var(--smooth), transform .35s var(--spring);
}
.copy:hover { border-color: var(--flag-blue); background: var(--blue-wash); }
.copy:active { transform: scale(.93); }
.copy.copied {
  border-color: var(--ok);
  color: var(--ok);
  background: rgba(74, 222, 159, .14);
  animation: pop .45s var(--spring);
}

/* ============================================================
   12. 提示条 / 状态 / 成功
   ============================================================ */

.note {
  position: relative;
  border-radius: 14px;
  padding: 13px 15px 13px 17px;
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0 0 16px;
  border: 1px solid transparent;
}
/* 左边一道竖色条，比整块染色更克制 */
.note::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: currentColor;
  opacity: .8;
}
.note.info { background: var(--blue-wash); color: #a9e3ff; border-color: rgba(91, 206, 250, .2); }
.note.warn { background: rgba(255, 193, 107, .1); color: #ffcf90; border-color: rgba(255, 193, 107, .2); }
.note.err  { background: rgba(255, 143, 156, .1); color: var(--err); border-color: rgba(255, 143, 156, .22); }
.note.ok   { background: rgba(74, 222, 159, .1); color: var(--ok); border-color: rgba(74, 222, 159, .22); }
.note.pink { background: var(--pink-wash); color: #ffc9d8; border-color: rgba(245, 169, 184, .22); }
.note:last-child { margin-bottom: 0; }
.note b { color: #fff; }

.status {
  display: flex;
  align-items: center;
  gap: 11px;
  justify-content: center;
  font-size: 14px;
  color: var(--ink-2);
  padding: 6px 0;
}

/* 锥形渐变 + 圆环遮罩，比 border-top 那种缺口转圈干净得多 */
.spin {
  width: 17px; height: 17px; flex: none;
  border-radius: 50%;
  background: conic-gradient(from 0turn, transparent 0 18%, var(--flag-pink) 52%, var(--flag-blue) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 盯链那张卡：整张在呼吸，表示「还活着、还在看」 */
.watching { position: relative; overflow: hidden; }
.watching::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 120% at 50% 50%, rgba(91, 206, 250, .18), transparent 70%);
  animation: breathe 2.6s var(--smooth) infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}

.tick {
  position: relative;
  width: 58px; height: 58px;
  margin: 4px auto 16px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--ok), #2bb984);
  display: grid; place-items: center;
  color: #04241a;
  font-size: 28px; font-weight: 800;
  box-shadow: 0 0 34px -4px rgba(74, 222, 159, .8);
  animation: pop .6s var(--spring);
}
/* 两圈向外炸开的光环 */
.tick::before, .tick::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--ok);
  animation: ring 2.4s var(--smooth) infinite;
}
.tick::after { animation-delay: 1.2s; }
@keyframes ring {
  0%   { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.9); opacity: 0; }
}

.stock { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
.stock b {
  color: var(--flag-pink);
  font-size: 16px;
  font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
.stock.err { color: var(--err); }
.err-text { color: var(--err); }

.timer {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  color: var(--ink-2);
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.hide { display: none !important; }

/* ============================================================
   13. 页脚
   ============================================================ */

.foot {
  text-align: center;
  color: var(--ink-3);
  font-size: 12.5px;
  margin-top: 36px;
  line-height: 1.9;
}
.foot a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 223, 255, .3);
  padding-bottom: 1px;
  transition: .2s var(--smooth);
}
.foot a:hover { border-bottom-color: var(--blue); text-shadow: 0 0 14px rgba(138, 223, 255, .8); }

/* ============================================================
   14. 窄屏
   ============================================================ */

@media (max-width: 440px) {
  .wrap { padding: 44px 14px 56px; }
  .card { padding: 18px; border-radius: 17px; }
  .btn-row { grid-template-columns: 1fr; }
  .wallet-grid { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .wallet { font-size: 10.5px; padding: 10px 2px; }
  .wallet .mark { width: 30px; height: 30px; font-size: 13px; }
  .qr { width: 200px; height: 200px; }
  h1 { letter-spacing: -.03em; }
}

/* 触屏设备去掉毛玻璃。
   backdrop-filter 要在每一帧重新采样它背后的东西，而背后正好是一直在飘的极光——
   等于每帧都做一次大半径模糊，手机上直接掉帧。
   换成一层不透明度够高的实色，观感几乎一样，代价是零。 */
@media (hover: none) {
  .card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background:
      linear-gradient(rgba(18, 23, 33, .76), rgba(18, 23, 33, .76)) padding-box,
      linear-gradient(145deg, rgba(91, 206, 250, .42), rgba(245, 169, 184, .3) 48%, rgba(255, 255, 255, .06) 88%) border-box;
  }
  .card.feature {
    background:
      linear-gradient(150deg, rgba(30, 48, 64, .88), rgba(48, 34, 42, .88)) padding-box,
      linear-gradient(145deg, rgba(91, 206, 250, .6), rgba(245, 169, 184, .45)) border-box;
  }

  /* 触屏上 :hover 会在点完之后赖着不走，抬起来的卡片、放大的图标全卡在那儿 */
  .card:hover, .chip:hover, .wallet:hover, .btn:hover { transform: none; }
  .card:hover::before { opacity: 0; }
  .wallet:hover .mark { transform: none; }
  .btn:hover::after { animation: none; }
}

/* ============================================================
   15. 减少动态效果
   勾了系统那个开关的人，整站退化成静态：极光不飘、光不扫、
   扫描线和光环全部停掉，但颜色和层级一点不少。
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .spin { animation: spin 1.2s linear infinite !important; }
  .qr::after, .flagbar::after, .tick::before, .tick::after, .watching::after { display: none; }
  .scene i { filter: blur(70px); }
  html[data-fx="on"] .reveal { opacity: 1; transform: none; filter: none; }
}