/* godz66.com 注册教程页共用样式 · 与首页同一套黑金视觉(静态背景,无 canvas) */
:root{
  --bg:#07070a;
  --card:rgba(16,16,21,.84); --card-2:rgba(0,0,0,.3);
  --line:rgba(255,255,255,.07); --line-h:rgba(255,255,255,.15);
  --text:#f4efe4; --body:#d8d2c4; --muted:#a6a092; --dim:#716c62;
  --gold:#e8c170; --gold-hi:#fde9b8; --gold-lo:#b4842f;
  --gold-grad:linear-gradient(135deg,#fdebbb 0%,#e8c170 36%,#c58f38 70%,#f0cf86 100%);
  --jade:#7ee0b5; --jade-soft:rgba(126,224,181,.08);
  --red:#f08a7e; --red-soft:rgba(240,138,126,.08);
  --radius:20px;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  --serif:"Songti SC","Noto Serif CJK SC","Noto Serif SC","Source Han Serif SC","STSong",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-padding-top:64px}
body{min-height:100vh;color:var(--text);overflow-x:hidden;font:15.5px/1.75 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

/* 静态背景:顶部金色光晕 + 底部 K 线剪影 + 暗角与颗粒 */
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body::before{
  background:
    radial-gradient(760px 420px at 50% -160px,rgba(232,193,112,.15),transparent 70%),
    radial-gradient(520px 520px at 110% 50%,rgba(126,224,181,.045),transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='220' opacity='.12'%3E%3Cpath d='M7.5 104.8V128.4' stroke='%23e46e68'/%3E%3Crect x='4.0' y='110.0' width='7' height='15.5' fill='%23e46e68'/%3E%3Cpath d='M22.5 122.4V136.8' stroke='%23e46e68'/%3E%3Crect x='19.0' y='125.5' width='7' height='2' fill='%23e46e68'/%3E%3Cpath d='M37.5 114.4V137.6' stroke='%237ee0b5'/%3E%3Crect x='34.0' y='123.3' width='7' height='3.2' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M52.5 117.1V124.9' stroke='%237ee0b5'/%3E%3Crect x='49.0' y='122.7' width='7' height='2' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M67.5 110.9V127.1' stroke='%237ee0b5'/%3E%3Crect x='64.0' y='111.7' width='7' height='11.0' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M82.5 103.0V129.1' stroke='%23e46e68'/%3E%3Crect x='79.0' y='111.7' width='7' height='11.9' fill='%23e46e68'/%3E%3Cpath d='M97.5 116.2V133.7' stroke='%237ee0b5'/%3E%3Crect x='94.0' y='122.6' width='7' height='2' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M112.5 100.1V133.2' stroke='%237ee0b5'/%3E%3Crect x='109.0' y='104.6' width='7' height='18.0' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M127.5 89.0V116.3' stroke='%237ee0b5'/%3E%3Crect x='124.0' y='97.3' width='7' height='7.3' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M142.5 93.5V114.5' stroke='%23e46e68'/%3E%3Crect x='139.0' y='97.3' width='7' height='11.4' fill='%23e46e68'/%3E%3Cpath d='M157.5 105.2V118.1' stroke='%23e46e68'/%3E%3Crect x='154.0' y='108.7' width='7' height='7.0' fill='%23e46e68'/%3E%3Cpath d='M172.5 88.6V126.3' stroke='%237ee0b5'/%3E%3Crect x='169.0' y='100.2' width='7' height='15.5' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M187.5 85.4V104.0' stroke='%237ee0b5'/%3E%3Crect x='184.0' y='90.2' width='7' height='10.0' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M202.5 90.0V96.3' stroke='%23e46e68'/%3E%3Crect x='199.0' y='90.2' width='7' height='4.7' fill='%23e46e68'/%3E%3Cpath d='M217.5 89.9V104.6' stroke='%23e46e68'/%3E%3Crect x='214.0' y='94.9' width='7' height='2' fill='%23e46e68'/%3E%3Cpath d='M232.5 94.2V106.9' stroke='%237ee0b5'/%3E%3Crect x='229.0' y='95.4' width='7' height='2' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M247.5 89.6V103.4' stroke='%23e46e68'/%3E%3Crect x='244.0' y='95.4' width='7' height='3.5' fill='%23e46e68'/%3E%3Cpath d='M262.5 87.9V115.9' stroke='%23e46e68'/%3E%3Crect x='259.0' y='98.9' width='7' height='5.5' fill='%23e46e68'/%3E%3Cpath d='M277.5 93.3V125.8' stroke='%23e46e68'/%3E%3Crect x='274.0' y='104.4' width='7' height='11.7' fill='%23e46e68'/%3E%3Cpath d='M292.5 100.7V126.8' stroke='%237ee0b5'/%3E%3Crect x='289.0' y='104.1' width='7' height='12.0' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M307.5 96.0V104.5' stroke='%237ee0b5'/%3E%3Crect x='304.0' y='101.5' width='7' height='2.6' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M322.5 99.3V104.9' stroke='%237ee0b5'/%3E%3Crect x='319.0' y='101.4' width='7' height='2' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M337.5 84.6V111.2' stroke='%237ee0b5'/%3E%3Crect x='334.0' y='88.7' width='7' height='12.7' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M352.5 87.3V99.6' stroke='%23e46e68'/%3E%3Crect x='349.0' y='88.7' width='7' height='6.1' fill='%23e46e68'/%3E%3Cpath d='M367.5 93.0V115.8' stroke='%23e46e68'/%3E%3Crect x='364.0' y='94.8' width='7' height='12.9' fill='%23e46e68'/%3E%3Cpath d='M382.5 98.6V116.4' stroke='%237ee0b5'/%3E%3Crect x='379.0' y='100.7' width='7' height='7.0' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M397.5 98.8V101.9' stroke='%237ee0b5'/%3E%3Crect x='394.0' y='100.0' width='7' height='2' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M412.5 82.4V109.9' stroke='%237ee0b5'/%3E%3Crect x='409.0' y='93.4' width='7' height='6.6' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M427.5 90.0V102.3' stroke='%237ee0b5'/%3E%3Crect x='424.0' y='90.8' width='7' height='2.6' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M442.5 81.4V108.7' stroke='%23e46e68'/%3E%3Crect x='439.0' y='90.8' width='7' height='16.9' fill='%23e46e68'/%3E%3Cpath d='M457.5 85.0V110.3' stroke='%237ee0b5'/%3E%3Crect x='454.0' y='90.8' width='7' height='16.9' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M472.5 87.6V114.8' stroke='%23e46e68'/%3E%3Crect x='469.0' y='90.8' width='7' height='15.6' fill='%23e46e68'/%3E%3Cpath d='M487.5 105.4V123.9' stroke='%23e46e68'/%3E%3Crect x='484.0' y='106.4' width='7' height='8.5' fill='%23e46e68'/%3E%3Cpath d='M502.5 112.9V129.1' stroke='%23e46e68'/%3E%3Crect x='499.0' y='114.9' width='7' height='11.7' fill='%23e46e68'/%3E%3Cpath d='M517.5 123.6V139.2' stroke='%23e46e68'/%3E%3Crect x='514.0' y='126.6' width='7' height='11.8' fill='%23e46e68'/%3E%3Cpath d='M532.5 136.9V158.9' stroke='%23e46e68'/%3E%3Crect x='529.0' y='138.4' width='7' height='15.8' fill='%23e46e68'/%3E%3Cpath d='M547.5 126.3V160.8' stroke='%237ee0b5'/%3E%3Crect x='544.0' y='136.3' width='7' height='17.9' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M562.5 125.2V150.1' stroke='%23e46e68'/%3E%3Crect x='559.0' y='136.3' width='7' height='10.6' fill='%23e46e68'/%3E%3Cpath d='M577.5 137.2V151.9' stroke='%237ee0b5'/%3E%3Crect x='574.0' y='143.9' width='7' height='3.0' fill='%2307070a' stroke='%237ee0b5'/%3E%3Cpath d='M592.5 133.1V153.0' stroke='%23e46e68'/%3E%3Crect x='589.0' y='143.9' width='7' height='7.8' fill='%23e46e68'/%3E%3C/svg%3E") repeat-x left bottom 6vh / 600px 220px;
}
body::after{
  background:
    radial-gradient(130% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.72) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.5;mix-blend-mode:soft-light;
}

.wrap{position:relative;z-index:1;max-width:640px;margin:0 auto;
  padding:18px max(16px,env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}

/* 1 顶栏 */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 -16px;padding:10px 16px;background:rgba(7,7,10,.78);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid rgba(232,193,112,.12)}
.back{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 4px;color:var(--muted);font-size:14px;font-weight:500}
.topbar .code{margin:0;height:30px;font-size:12.5px}

/* 通用卡片 + 渐变描边 */
.panel,.hero{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px -18px rgba(0,0,0,.8)}
@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .panel,.hero{border-color:transparent}
  .panel::before,.hero::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
    background:linear-gradient(145deg,rgba(232,193,112,.42),rgba(255,255,255,.07) 28%,rgba(255,255,255,.03) 62%,rgba(232,193,112,.24));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
  .hero::before{background:linear-gradient(145deg,rgba(253,233,184,.8),rgba(232,193,112,.22) 40%,rgba(232,193,112,.06) 70%,rgba(232,193,112,.45))}
}

/* 2 首屏 */
.hero{margin-top:22px;padding:24px 20px 22px;text-align:center;overflow:hidden;
  background:linear-gradient(160deg,rgba(232,193,112,.13),rgba(232,193,112,.02) 55%,transparent),rgba(12,12,16,.88);
  box-shadow:0 22px 60px -24px rgba(232,193,112,.3)}
.hero .ic{display:block;width:64px;height:64px;margin:0 auto 12px;border-radius:18px;object-fit:cover;background:#16161c;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 0 6px rgba(232,193,112,.06),0 10px 30px -8px rgba(0,0,0,.9)}
.hero h1{font:700 26px/1.3 var(--serif);letter-spacing:2px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero .sub{margin-top:4px;color:var(--muted);font-size:13px}
.pct{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.3px;color:var(--jade);background:var(--jade-soft);
  border:1px solid rgba(126,224,181,.24);padding:2px 10px;border-radius:99px;font-variant-numeric:tabular-nums}
.hero .summary{margin:14px auto 0;max-width:30em;color:var(--body);font-size:14.5px;line-height:1.7}
.hero .acts{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:18px}
.meta{margin-top:14px;color:var(--dim);font-size:12px}

.code{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 6px 0 12px;max-width:100%;
  border-radius:11px;background:rgba(0,0,0,.4);border:1px dashed rgba(232,193,112,.42);
  font:700 15px/1 var(--mono);letter-spacing:.6px;color:var(--gold-hi);cursor:pointer;transition:border-color .15s,background .15s}
.code .lb{font:500 12px/1 var(--sans);letter-spacing:0;color:var(--dim)}
.code .cp{font:600 12px/1 var(--sans);letter-spacing:0;color:#1b1405;background:var(--gold);padding:6px 8px;border-radius:7px}

.go{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  height:48px;width:100%;max-width:320px;padding:0 22px;border-radius:14px;
  font-size:16px;font-weight:700;letter-spacing:1px;color:#1b1405;background:var(--gold-grad);
  box-shadow:0 12px 30px -12px rgba(232,193,112,.75),inset 0 1px 0 rgba(255,255,255,.45);transition:filter .18s,transform .18s}
.go::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .6s}
.go svg{width:17px;height:17px;fill:currentColor}

/* 正文区块 */
main > section,.steps{margin-top:30px}
.sec-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;font:700 19px/1.4 var(--serif);letter-spacing:1px;color:var(--gold-hi)}
.sec-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(232,193,112,.35),transparent)}
p + p{margin-top:10px}
main p,main li{color:var(--body)}
main strong{color:var(--text)}
main a:not(.go):not(.back){color:var(--gold);border-bottom:1px solid rgba(232,193,112,.35)}
kbd,.k{font:600 .92em var(--mono);color:var(--gold-hi);background:rgba(232,193,112,.08);border:1px solid rgba(232,193,112,.2);
  padding:0 5px;border-radius:5px}

/* 3 开始前准备 */
.prep{padding:18px 18px 16px}
.check{list-style:none;display:grid;gap:10px}
.check li{position:relative;padding-left:30px;font-size:14.5px;line-height:1.65}
.check li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;
  background:rgba(126,224,181,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2 5.3 12l-1.4 1.4 5.6 5.6 11-11-1.4-1.4z' fill='%237ee0b5'/%3E%3C/svg%3E") center/13px no-repeat;
  border:1px solid rgba(126,224,181,.3)}

/* 4 步骤:金色序号 + 竖向轨道 */
.steps{counter-reset:step}
.step{counter-increment:step;position:relative;padding:0 0 26px 46px}
.step::before{content:"";position:absolute;left:15px;top:34px;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(232,193,112,.45),rgba(232,193,112,.06))}
.step:last-child{padding-bottom:4px}
.step:last-child::before{display:none}
.step h2{position:relative;font:700 17.5px/1.45 var(--sans);color:var(--text);margin-bottom:8px;padding-top:4px}
.step h2::before{content:counter(step);position:absolute;left:-46px;top:0;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;font:700 14px/1 var(--mono);color:#1b1405;background:var(--gold-grad);
  box-shadow:0 0 0 4px rgba(7,7,10,.9),0 0 18px -2px rgba(232,193,112,.55)}
.step ul,.step ol{padding-left:20px;margin-top:8px}
.step li + li{margin-top:4px}

figure{margin:16px auto 6px;max-width:360px;text-align:center}
figure img{display:block;width:100%;height:auto;border-radius:20px;background:#121217;cursor:zoom-in;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 0 0 6px rgba(255,255,255,.02),0 24px 50px -22px rgba(0,0,0,.95)}
figcaption{margin-top:9px;color:var(--dim);font-size:12.5px;line-height:1.55}

.note,.warn{position:relative;margin-top:14px;padding:12px 14px 12px 42px;border-radius:14px;font-size:14px;line-height:1.65}
.note{background:var(--jade-soft);border:1px solid rgba(126,224,181,.2);color:#cfe9dc}
.warn{background:var(--red-soft);border:1px solid rgba(240,138,126,.28);color:#f2d3cd}
.note::before,.warn::before{position:absolute;left:13px;top:12px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font:800 12px/1 var(--sans)}
.note::before{content:"i";color:#07070a;background:var(--jade)}
.warn::before{content:"!";color:#07070a;background:var(--red)}
.note b,.warn b{color:var(--text)}

/* 5 确认邀请码已生效 */
.verify{padding:18px}
.verify ol{counter-reset:v;list-style:none;display:grid;gap:10px}
.verify li{counter-increment:v;position:relative;padding-left:32px;font-size:14.5px}
.verify li::before{content:counter(v);position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:7px;
  display:grid;place-items:center;font:700 12px/1 var(--mono);color:var(--gold-hi);border:1px solid rgba(232,193,112,.4);background:rgba(232,193,112,.07)}

/* 6 FAQ */
.faq{display:grid;gap:10px}
.faq details{border-radius:14px;background:var(--card);border:1px solid var(--line);transition:border-color .2s}
.faq details[open]{border-color:rgba(232,193,112,.3)}
.faq summary{list-style:none;position:relative;cursor:pointer;padding:14px 46px 14px 16px;font-weight:600;font-size:15px;line-height:1.55;color:var(--text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;
  background:linear-gradient(var(--gold),var(--gold)) center/10px 1.6px no-repeat,linear-gradient(var(--gold),var(--gold)) center/1.6px 10px no-repeat;
  border-radius:50%;border:1px solid rgba(232,193,112,.35);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 16px 15px;font-size:14.5px;color:var(--body)}

/* 7 底部 CTA */
.cta{margin-top:34px;padding:24px 18px;text-align:center;
  background:radial-gradient(120% 140% at 50% 0%,rgba(232,193,112,.14),transparent 60%),rgba(12,12,16,.88)}
.cta h2{font:700 19px/1.4 var(--serif);color:var(--gold-hi);letter-spacing:1px}
.cta p{margin-top:6px;color:var(--muted);font-size:13.5px}
.cta .acts{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:16px}

footer{margin-top:44px;padding-top:22px;text-align:center;color:var(--dim);font-size:12px;line-height:1.9;
  border-top:1px solid;border-image:linear-gradient(90deg,transparent,rgba(232,193,112,.25),transparent) 1}
footer a{color:var(--muted)}

.toast{position:fixed;z-index:30;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;
  max-width:calc(100% - 32px);text-align:center;background:rgba(20,18,14,.94);color:var(--gold-hi);font-weight:600;font-size:14px;
  padding:11px 20px;border-radius:99px;border:1px solid rgba(232,193,112,.4);
  box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 24px -6px rgba(232,193,112,.35);transition:.22s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* 截图放大层(guide.js 生成) */
.zoom{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,4,6,.92);opacity:0;pointer-events:none;transition:opacity .2s;cursor:zoom-out}
.zoom.on{opacity:1;pointer-events:auto}
.zoom img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.8)}

@media (hover:hover){
  .back:hover{color:var(--gold-hi)}
  .code:hover{border-color:var(--gold);background:rgba(232,193,112,.06)}
  .go:hover{filter:brightness(1.06)}
  .go:hover::after{left:120%}
  .faq summary:hover{color:var(--gold-hi)}
  main a:not(.go):not(.back):hover{border-bottom-color:var(--gold)}
  footer a:hover{color:var(--gold)}
}
.go:active,.code:active{transform:scale(.97)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media (max-width:400px){
  .hero{padding:22px 16px 20px}
  .hero h1{font-size:23px}
  .topbar .code .lb{display:none}
  .step{padding-left:42px}
  .step h2::before{left:-42px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* 手机端可读性:正文类文字不小于 13px */
figcaption,.meta,footer,.topbar .code{font-size:13px}