:root{
  --bg:#070b14;
  --card:#0b1224;
  --text:#eaf0ff;
  --muted:#aebad6;
  --line:rgba(255,255,255,.10);
  --accent:#6aa6ff;
  --accent2:#59ffd7;
  --glow: rgba(106,166,255,.35);
  --glow2: rgba(89,255,215,.20);
  --shadow: 0 18px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box}

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",Arial;
  color:var(--text);
  line-height:1.65;
  background: var(--bg);
  overflow-x:hidden;
}

/* ===== 科技风背景：动态渐变 + 网格 + 轻噪点 ===== */
body::before{
  content:"";
  position:fixed;
  inset:-20%;
  background:
    radial-gradient(900px 600px at 18% 12%, rgba(106,166,255,.22), transparent 60%),
    radial-gradient(900px 600px at 88% 18%, rgba(89,255,215,.12), transparent 55%),
    radial-gradient(800px 500px at 50% 95%, rgba(170,120,255,.10), transparent 60%);
  filter: blur(0px);
  opacity: 1;
  z-index:-3;
  animation: floatBG 12s ease-in-out infinite alternate;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.05), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.04), transparent 60%);
  background-size: 54px 54px, 54px 54px, 100% 100%, 100% 100%;
  opacity:.20;
  z-index:-2;
  pointer-events:none;
  mix-blend-mode: overlay;
}

@keyframes floatBG{
  0%   { transform: translate3d(-1%, -1%, 0) scale(1); }
  100% { transform: translate3d(1%, 1.2%, 0) scale(1.02); }
}

/* ===== 滚动进度条（提示可滑动） ===== */
.scrollbar{
  position:fixed;
  top:0; left:0;
  height:3px;
  width:0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 0 18px rgba(106,166,255,.35);
  z-index:9999;
  will-change: width;
}

/* ===== 光标跟随微光 ===== */
.cursor-glow{
  position:fixed;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  left:0;
  top:0;
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
  pointer-events:none;
  z-index: 9998;
  background: radial-gradient(circle, rgba(106,166,255,.22), transparent 60%);
  filter: blur(2px);
  opacity:.0;
  transition: opacity .2s ease;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* ===== 主体布局 ===== */
.container{max-width:980px;margin:0 auto;padding:24px}
.header{padding-top:44px;padding-bottom:10px}

h1{
  margin:0 0 8px;
  font-size:32px;
  letter-spacing:.3px;
  text-shadow: 0 0 22px rgba(106,166,255,.18);
}
.sub{margin:0;color:var(--muted)}

h2{margin:0 0 10px;font-size:18px}

/* ===== 卡片：玻璃拟态 + 边缘微光 ===== */
.card{
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(11,18,36,.60);
  border-radius:18px;
  padding:18px;
  margin:14px 0;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  overflow:hidden;
  transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
  will-change: transform;
}

/* 卡片边缘微光 */
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:18px;
  padding:2px;
  background: linear-gradient(135deg,
    rgba(106,166,255,.35),
    rgba(89,255,215,.18),
    rgba(170,120,255,.12),
    rgba(255,255,255,0)
  );
  -webkit-mask:
     linear-gradient(#000 0 0) content-box,
     linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.45;
  pointer-events:none;
}

.card:hover{
  border-color: rgba(106,166,255,.28);
}

/* ===== 徽章/按钮：霓虹边框 ===== */
.badges{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.badge{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding:6px 10px;
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  user-select:none;
  transition: transform .10s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.badge:hover{
  background: rgba(106,166,255,.10);
  border-color: rgba(106,166,255,.35);
  box-shadow: 0 0 0 4px rgba(106,166,255,.08);
}
.badge:active{ transform: translateY(1px); }

a.badge{
  color: var(--text);
  text-decoration:none;
}

/* ===== 列表/提示 ===== */
.steps{margin:0;padding-left:20px}
.steps li{margin:6px 0}

ul{padding-left:20px}
li{margin:6px 0}

.hint{color:var(--muted);margin-top:10px}
.small{font-size:12px;color:var(--muted);margin:8px 0 0}

#copyHintLink, #copyHintTpl, #qrHint{
  color: rgba(89,255,215,.95);
  font-weight: 700;
  text-shadow: 0 0 14px rgba(89,255,215,.22);
}

/* ===== details：更“产品化”一点 ===== */
details{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:10px 12px;
  margin:10px 0;
  background: rgba(255,255,255,.03);
}
summary{
  cursor:pointer;
  color:var(--text);
  font-weight:650;
  list-style:none;
}
summary::-webkit-details-marker{display:none}
summary::before{
  content:"▸";
  display:inline-block;
  margin-right:8px;
  color: rgba(255,255,255,.75);
}
details[open] summary::before{ content:"▾"; }
details p, details li{color:var(--muted)}

/* ===== 链接：霓虹下划线 ===== */
a{
  color: var(--accent);
  text-decoration:none;
  border-bottom: 1px dashed rgba(106,166,255,.42);
  padding-bottom: 1px;
}
a:hover{
  border-bottom-color: rgba(89,255,215,.75);
  color: rgba(89,255,215,.95);
}

/* ===== 二维码区 ===== */
.qr{
  display:flex;
  gap:18px;
  align-items:stretch;
  flex-wrap:wrap;
}
.qr-text{flex:1;min-width:260px}

.qr-box{
  width:260px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background: rgba(255,255,255,.03);
  padding:12px;
  text-align:center;
  overflow:hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 18px 60px rgba(0,0,0,.35);
}
.qr-box img{
  width:100%;
  height:auto;
  border-radius:14px;
  display:block;
  border: 1px solid rgba(255,255,255,.10);
}
#qrPlaceholder{
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
}

/* footer */
.footer{padding:18px 24px}

/* 移动端优化 */
@media (max-width: 520px){
  .container{padding:18px}
  h1{font-size:26px}
  .qr-box{width:100%}
  .badge{font-size:12px;padding:6px 9px}
  .card{padding:16px}
}

/* 减少动态：尊重系统设置 */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  body::before{ animation:none; }
}