:root{
  --pink:#ff71ce;
  --cyan:#01cdfe;
  --mint:#05ffa1;
  --lav:#b967ff;
  --sun:#fffb96;
  --ink:#f2e8ff;
  --dim:#b8a0d4;
  --mute:#7f68a0;
  --bg:#12071f;
  --cjk:"PingFang SC","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif;
  --mono:"Courier New",ui-monospace,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, #2b0f4d 0%, transparent 62%),
    linear-gradient(180deg,#180a2c 0%,#12071f 45%,#1a0a30 100%);
  background-attachment:fixed;
  color:var(--ink);
  font:15px/1.75 var(--cjk);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

code{font-family:var(--mono);font-size:.9em;color:var(--mint)}

.scan{
  position:fixed;inset:0;z-index:900;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
  opacity:.45;
}

/* ============ 顶栏 ============ */
.vhs{
  position:fixed;top:0;left:0;right:0;z-index:800;
  display:flex;align-items:center;gap:12px;
  padding:8px 22px;
  font:11px/1 var(--mono);letter-spacing:.18em;
  color:var(--sun);
  background:rgba(18,7,31,.82);
  border-bottom:1px solid rgba(255,113,206,.2);
  backdrop-filter:blur(8px);
}
.vhs-rec{color:var(--pink);animation:blink 1.8s steps(2,end) infinite}
@keyframes blink{50%{opacity:.2}}
.vhs-name{letter-spacing:.26em}
.vhs-dim{color:var(--mute)}
.vhs-sp{flex:1}

/* ============ 背景 ============ */
.sky{position:absolute;top:0;left:0;right:0;height:100vh;z-index:0;pointer-events:none;overflow:hidden}

.sun{
  position:absolute;left:50%;top:0.5vh;transform:translateX(-50%);
  width:min(48vw,410px);height:min(48vw,410px);border-radius:50%;z-index:0;
  background:linear-gradient(180deg,#fffbb0 0%,#ffb072 30%,#ff71ce 62%,#a855f7 100%);
  opacity:.62;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 40%,transparent 44%,#000 44%,#000 49%,transparent 49%,transparent 54%,#000 54%,#000 60%,transparent 60%,transparent 66%,#000 66%,#000 72%,transparent 72%,transparent 79%,#000 79%,#000 86%,transparent 86%,transparent 94%,#000 94%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 40%,transparent 44%,#000 44%,#000 49%,transparent 49%,transparent 54%,#000 54%,#000 60%,transparent 60%,transparent 66%,#000 66%,#000 72%,transparent 72%,transparent 79%,#000 79%,#000 86%,transparent 86%,transparent 94%,#000 94%);
}

.horizon{
  position:absolute;left:0;right:0;top:calc(30vh + min(26vw,230px));
  height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,113,206,.6),rgba(1,205,254,.6),rgba(255,113,206,.6),transparent);
  filter:blur(1px);
}

.floor{
  position:fixed;left:-70%;right:-70%;bottom:0;height:62vh;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(1,205,254,.7) 1px,transparent 1px),
    linear-gradient(90deg,rgba(1,205,254,.7) 1px,transparent 1px);
  background-size:96px 96px;
  transform:perspective(300px) rotateX(66deg);
  transform-origin:bottom center;
  opacity:.75;
  -webkit-mask-image:linear-gradient(transparent 0%,#000 34%,#000 74%,transparent 100%);
  mask-image:linear-gradient(transparent 0%,#000 34%,#000 74%,transparent 100%);
}

/* ============ 容器 ============ */
main{position:relative;z-index:10;max-width:720px;margin:0 auto;padding:0 24px 60px}

/* ============ HERO ============ */
.hero{padding:9vh 0 40px;text-align:center;position:relative}

.chrome{
  position:relative;
  display:inline-block;
  font-family:"Arial Black","Helvetica Neue",Impact,sans-serif;
  font-size:clamp(64px,15vw,132px);
  font-weight:900;
  font-style:italic;
  letter-spacing:.01em;
  line-height:1;
  z-index:2;
  background:linear-gradient(180deg,
    #ffffff 0%,#ffe4fa 16%,#ff8dd6 34%,#ff71ce 44%,
    #b967ff 54%,#4a1080 62%,#9a44e0 70%,#01cdfe 84%,#ffffff 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(22,6,40,.9);
  filter:drop-shadow(0 0 26px rgba(185,103,255,.55)) drop-shadow(0 0 60px rgba(255,113,206,.3));
}
.chrome::before,.chrome::after{
  content:attr(data-text);position:absolute;inset:0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:0;pointer-events:none;
}
.chrome::before{-webkit-text-fill-color:rgba(1,205,254,.42);transform:translate(-2px,2px);mix-blend-mode:screen}
.chrome::after{-webkit-text-fill-color:rgba(255,113,206,.42);transform:translate(2px,-2px);mix-blend-mode:screen}

.hero-sub{
  margin-top:22px;
  display:flex;width:fit-content;margin-left:auto;margin-right:auto;
  align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font:11.5px/1 var(--mono);letter-spacing:.2em;
  color:#c9f7ff;
  padding:6px 12px;
  background:rgba(18,7,31,.55);
  backdrop-filter:blur(4px);
  border-radius:2px;
  text-shadow:0 0 10px rgba(1,205,254,.9),0 1px 3px rgba(0,0,0,.9);
  position:relative;z-index:2;
}
.hero-sub i{color:var(--pink);font-style:normal;opacity:.7}

.hero-line{
  margin-top:16px;
  font-size:clamp(17px,2.4vw,21px);
  font-weight:600;letter-spacing:.05em;
  color:#fff;
  text-shadow:0 0 22px rgba(185,103,255,.85),0 0 44px rgba(255,113,206,.4);
  position:relative;z-index:2;
}

/* ============ 铸造面板（暗玻璃） ============ */
.panel{
  position:relative;
  border:1px solid rgba(255,113,206,.32);
  background:rgba(24,10,44,.72);
  backdrop-filter:blur(14px);
  box-shadow:
    0 0 0 1px rgba(1,205,254,.08),
    0 24px 70px -24px rgba(185,103,255,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.panel::before,.panel::after{
  content:"";position:absolute;width:14px;height:14px;
  border:1px solid var(--cyan);opacity:.55;
}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

.panel-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;
  background:linear-gradient(90deg,rgba(90,20,140,.55),rgba(255,113,206,.18));
  border-bottom:1px solid rgba(255,113,206,.25);
  font:11.5px/1 var(--mono);letter-spacing:.2em;color:var(--pink);
}
.pb-dots{display:flex;gap:5px}
.pb-dots b{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;font-size:8px;font-weight:400;
  border:1px solid rgba(255,113,206,.4);color:var(--pink);opacity:.8;
}

.panel-body{padding:20px 20px 18px}

/* 进度 */
.prog-num{display:flex;align-items:baseline;gap:8px}
.prog-num b{
  font:700 38px/1 var(--mono);letter-spacing:-.02em;
  color:#fff;
  text-shadow:0 0 20px rgba(255,113,206,.7),0 0 40px rgba(185,103,255,.5);
}
.prog-num em{font:13px var(--mono);font-style:normal;color:var(--mute)}
.prog-num i{
  margin-left:auto;font:11px var(--cjk);font-style:normal;
  letter-spacing:.14em;color:var(--mint);
  text-shadow:0 0 10px rgba(5,255,161,.6);
}

.prog-bar{
  height:8px;margin:14px 0 9px;
  background:rgba(255,255,255,.07);
  border-radius:99px;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
.prog-bar s{
  display:block;height:100%;width:0;text-decoration:none;
  border-radius:99px;
  background:linear-gradient(90deg,var(--lav),var(--pink),var(--cyan),var(--mint));
  box-shadow:0 0 14px rgba(255,113,206,.85);
  transition:width .7s cubic-bezier(.2,.8,.2,1);
}
.prog-meta{display:flex;gap:20px;font:11.5px var(--mono);color:var(--dim);letter-spacing:.06em}
.prog-meta b{color:var(--cyan);font-weight:700}

/* 下单 */
.order{
  display:grid;grid-template-columns:auto 1fr 1fr;gap:16px;align-items:end;
  margin:20px 0 18px;padding:16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}
.o-cell{display:flex;flex-direction:column;gap:8px;min-width:0}
.o-cell label{font:10.5px var(--cjk);letter-spacing:.16em;color:var(--mute)}
.o-val{display:flex;align-items:baseline;gap:5px}
.o-val b{
  font:700 19px var(--mono);color:#fff;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 12px rgba(1,205,254,.5);
}
.o-val em{font:10px var(--mono);font-style:normal;color:var(--mute)}

.spin{display:flex;gap:4px;align-items:center}
.spin button,.spin input{
  height:30px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,113,206,.3);
  color:var(--ink);
  font:bold 13px var(--mono);
  transition:.14s;
}
.spin button{width:30px;cursor:pointer;line-height:1}
.spin button:hover{background:rgba(255,113,206,.2);border-color:var(--pink)}
.spin input{
  width:54px;text-align:center;border-color:rgba(1,205,254,.35);
  color:var(--cyan);font-family:var(--mono);
}
.spin .mx{width:auto;padding:0 10px;font-size:10.5px;letter-spacing:.06em;color:var(--pink);font-family:var(--cjk)}

/* 按钮 */
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn-main,.btn-alt{
  padding:13px 10px;cursor:pointer;
  font:bold 13.5px var(--cjk);letter-spacing:.08em;
  transition:.15s;
}
.btn-main{
  background:linear-gradient(180deg,#ff92d9,#e04bb0);
  color:#26002e;border:1px solid #ff9ade;
  box-shadow:0 0 24px -4px rgba(255,113,206,.75);
}
.btn-main:hover{filter:brightness(1.12);box-shadow:0 0 32px -2px rgba(255,113,206,.9)}
.btn-alt{
  background:rgba(1,205,254,.09);
  color:var(--cyan);
  border:1px solid rgba(1,205,254,.45);
}
.btn-alt:hover{background:rgba(1,205,254,.18);box-shadow:0 0 22px -6px rgba(1,205,254,.8)}
.btn-main:active,.btn-alt:active{transform:translateY(1px)}

.note{margin-top:13px;font-size:11px;line-height:1.7;color:var(--mute);text-align:center}

/* ============ 数字条 ============ */
.nums{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:22px;
  border:1px solid rgba(255,113,206,.18);
  background:rgba(24,10,44,.5);
}
.nums div{padding:16px 8px;text-align:center;border-right:1px solid rgba(255,113,206,.12)}
.nums div:last-child{border-right:0}
.nums b{
  display:block;font:700 20px/1.2 var(--mono);
  color:var(--sun);
  text-shadow:0 0 16px rgba(255,251,150,.55);
}
.nums span{display:block;margin-top:5px;font-size:11px;color:var(--dim);letter-spacing:.04em}

/* ============ 章节 ============ */
.sec h2{
  font:800 16px/1 var(--cjk);
  letter-spacing:.24em;color:var(--sun);
  text-shadow:0 0 16px rgba(255,251,150,.5);
  margin:54px 0 16px;
}
.sec h2 small{
  font:10px var(--mono);letter-spacing:.24em;
  color:var(--mint);margin-left:10px;
}

/* 规则 */
.rules{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(255,113,206,.14);
  border:1px solid rgba(255,113,206,.14);
}
.rules > div{
  background:rgba(24,10,44,.92);
  padding:13px 16px;
  display:flex;flex-direction:column;gap:4px;
}
.rules dt{font:11px var(--cjk);letter-spacing:.1em;color:var(--cyan)}
.rules dd{font-size:13.5px;color:var(--ink);line-height:1.6}

/* 成交 */
.trade-list{
  border:1px solid rgba(1,205,254,.24);
  background:rgba(14,6,28,.85);
  max-height:180px;overflow-y:auto;
}
.tr{
  display:flex;gap:12px;align-items:baseline;
  padding:7px 14px;
  font:11.5px/1.7 var(--mono);
  border-bottom:1px solid rgba(1,205,254,.07);
}
.tr:last-child{border-bottom:0}
.tr-t{color:var(--mute);flex:0 0 58px}
.tr-k{flex:0 0 52px;color:var(--cyan)}
.tr-k.free{color:var(--pink)}
.tr-k.sys{color:var(--mute)}
.tr-x{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 合约 */
.addr-list{border:1px solid rgba(1,205,254,.2);background:rgba(14,6,28,.8)}
.addr-list > div{
  display:flex;gap:16px;align-items:baseline;
  padding:13px 16px;border-bottom:1px solid rgba(1,205,254,.1);
}
.addr-list > div:last-child{border-bottom:0}
.addr-list span{font:10.5px var(--cjk);letter-spacing:.14em;color:var(--pink);flex:0 0 96px}
.addr-list code{font-size:11.5px;word-break:break-all;color:var(--ink)}
.addr-list code.verified{
  color:var(--mint);
  text-shadow:0 0 12px rgba(5,255,161,.55);
  font-family:var(--cjk);font-size:12px;letter-spacing:.04em;
}

/* ============ 页脚 ============ */
footer{
  position:relative;z-index:10;
  max-width:720px;margin:0 auto;
  padding:28px 24px 70px;
  border-top:1px solid rgba(185,103,255,.2);
}
.f-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.f-brand{
  font:800 14px "Arial Black",Impact,sans-serif;
  letter-spacing:.34em;color:var(--pink);
  text-shadow:0 0 16px rgba(255,113,206,.7);
}
.f-dim{font:11px var(--mono);letter-spacing:.12em;color:var(--mute)}
.f-links{margin-left:auto;display:flex;gap:18px;font-size:11.5px}
.f-links a{color:var(--dim);text-decoration:none}
.f-links a:hover{color:var(--sun)}
.f-note{margin-top:13px;font-size:11px;line-height:1.9;color:#604a7d}

/* ============ 响应式 ============ */
@media (max-width:680px){
  .hero{padding-top:9vh}
  .panel-body{padding:16px 15px 15px}
  .prog-num b{font-size:30px}
  .order{grid-template-columns:1fr 1fr;gap:13px}
  .o-cell:first-child{grid-column:1 / -1}
  .acts{grid-template-columns:1fr}
  .nums{grid-template-columns:1fr 1fr}
  .nums div:nth-child(2){border-right:0}
  .nums div:nth-child(-n+2){border-bottom:1px solid rgba(255,113,206,.12)}
  .rules{grid-template-columns:1fr}
  .addr-list span{flex:0 0 84px}
  .sun{width:70vw;height:70vw;top:26vh}
  .floor{opacity:.32}
}