/* ==========================================================================
   天启大陆 · 新人攻略（子页面样式）
   与主站共用设计 token：暗色底 + 余烬金 + 奥术蓝 + 3D 体素
   ========================================================================== */

@font-face{
  font-family:"Cinzel";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/cinzel-700.woff2") format("woff2");
}
@font-face{
  font-family:"Rajdhani";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/rajdhani-500.woff2") format("woff2");
}
@font-face{
  font-family:"Rajdhani";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/rajdhani-700.woff2") format("woff2");
}

:root{
  --void:#05060a;
  --panel:#0b0e15;
  --panel-2:#10141e;
  --panel-3:#151a26;
  --line:rgba(255,255,255,.075);
  --line-strong:rgba(255,255,255,.14);

  --ember:#ff6a1a;
  --gold:#ffc861;
  --gold-soft:#ffe3b3;
  --arcane:#54e6ff;
  --violet:#8b5cf6;
  --jade:#39e6a8;
  --rose:#ff5a7a;

  --ink:#eceef6;
  --muted:#98a1b6;
  --muted-2:#6d768c;

  --font-cn:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-display:"Cinzel","Times New Roman",serif;
  --font-tech:"Rajdhani","Bahnschrift",sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --shell:min(1320px,92vw);
  --nav-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-cn);
  font-size:15px;
  line-height:1.78;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58% 46% at 50% -8%, rgba(255,106,26,.16), transparent 70%),
    radial-gradient(44% 38% at 90% 4%, rgba(84,230,255,.07), transparent 70%),
    radial-gradient(70% 55% at 50% 110%, rgba(139,92,246,.09), transparent 72%),
    linear-gradient(180deg,#05060a 0%,#070910 46%,#05060a 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 82% 62% at 50% 24%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 82% 62% at 50% 24%, #000 0%, transparent 78%);
  opacity:.75;
}

img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,dl,dd,dt,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
::selection{background:rgba(255,106,26,.35);color:#fff}
:focus-visible{outline:2px solid var(--arcane);outline-offset:3px}

*{scrollbar-width:thin;scrollbar-color:rgba(255,106,26,.4) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#07080d}
::-webkit-scrollbar-thumb{background:#242a3a;border-radius:9px;border:2px solid #07080d}
::-webkit-scrollbar-thumb:hover{background:#37405a}

/* ---------------- 顶部导航 ---------------- */
.gnav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(5,6,10,.72);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:background .35s var(--ease), border-color .35s;
}
.gnav.is-solid{background:rgba(5,6,10,.94);border-bottom-color:var(--line-strong)}
.gnav__inner{
  width:var(--shell);margin:0 auto;
  display:flex;align-items:center;gap:18px;
}
.gnav__brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.gnav__brand svg{width:26px;height:26px}
.gnav__brand .f-top{fill:var(--gold)}
.gnav__brand .f-left{fill:#b03d05}
.gnav__brand .f-right{fill:#ff8a3c}
.gnav__brand b{font-size:15px;letter-spacing:2px}
.gnav__brand em{
  display:block;font-family:var(--font-tech);font-style:normal;
  font-size:9px;letter-spacing:2.6px;color:var(--muted-2);
}
.gnav__divider{width:1px;height:22px;background:var(--line-strong);flex:0 0 auto}
.gnav__title{
  font-family:var(--font-tech);font-weight:700;font-size:14px;letter-spacing:2px;
  color:var(--gold-soft);
}
.gnav__spacer{flex:1}
.gnav__back{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border:1px solid var(--line-strong);border-radius:2px;
  font-size:12.5px;letter-spacing:1px;color:var(--muted);
  transition:color .25s, border-color .25s, background .25s;
}
.gnav__back:hover{color:var(--gold);border-color:rgba(255,200,97,.5);background:rgba(255,200,97,.06)}
.gnav__back svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.gnav__progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--ember),var(--gold));box-shadow:0 0 12px rgba(255,106,26,.8)}

/* ---------------- Hero ---------------- */
.ghero{
  position:relative;padding:calc(var(--nav-h) + 62px) 0 48px;
  overflow:hidden;
}
.ghero__inner{width:var(--shell);margin:0 auto;position:relative;z-index:2}
.ghero__kicker{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-tech);font-size:11.5px;letter-spacing:3px;color:var(--gold);
  text-transform:uppercase;margin-bottom:14px;
}
.ghero__kicker::before{content:"";width:24px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.ghero h1{
  font-size:clamp(34px,5.4vw,62px);line-height:1.06;letter-spacing:.06em;font-weight:700;
}
.ghero h1 .hl{
  color:var(--gold);
  background:linear-gradient(100deg,var(--gold-soft) 8%,var(--gold) 40%,var(--ember) 96%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ghero__lead{
  max-width:640px;margin-top:16px;color:var(--muted);font-size:15px;line-height:1.9;
}
.ghero__tag{
  display:inline-block;margin-top:18px;padding:5px 15px;border-radius:999px;
  border:1px solid rgba(255,200,97,.35);background:rgba(255,200,97,.07);
  color:var(--gold);font-size:12px;letter-spacing:1.4px;
}
.ghero__stats{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;
}
.gstat{
  min-width:126px;padding:13px 18px;border:1px solid var(--line);border-radius:3px;
  background:linear-gradient(160deg,rgba(21,26,38,.9),rgba(11,14,21,.9));
  position:relative;overflow:hidden;
}
.gstat::before{
  content:"";position:absolute;left:0;top:0;width:2px;height:100%;
  background:linear-gradient(180deg,var(--ember),transparent);
}
.gstat b{display:block;font-family:var(--font-tech);font-size:24px;line-height:1.2;color:var(--gold-soft)}
.gstat span{font-size:11.5px;letter-spacing:1.4px;color:var(--muted-2);text-transform:uppercase}

/* 3D 体素装饰 */
.ghero__art{
  position:absolute;right:-40px;top:calc(var(--nav-h) - 10px);
  width:420px;height:420px;pointer-events:none;z-index:1;
  perspective:900px;opacity:.85;
}
.cube{
  position:absolute;width:var(--s);height:var(--s);
  transform-style:preserve-3d;animation:cube-spin 26s linear infinite;
}
.cube i{
  position:absolute;inset:0;
  background:linear-gradient(140deg,rgba(255,200,97,.10),rgba(255,106,26,.03));
  border:1px solid rgba(255,200,97,.24);
  box-shadow:inset 0 0 22px rgba(255,106,26,.09);
}
.cube i:nth-child(1){transform:translateZ(calc(var(--s)/2))}
.cube i:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.cube i:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.cube i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.cube--a{--s:132px;left:40px;top:120px;animation-duration:30s}
.cube--b{--s:74px;left:236px;top:36px;animation-duration:22s;animation-direction:reverse}
.cube--c{--s:52px;left:196px;top:250px;animation-duration:18s}
.cube--a i{border-color:rgba(84,230,255,.20);background:linear-gradient(140deg,rgba(84,230,255,.08),rgba(84,230,255,.01))}
.cube--c i{border-color:rgba(139,92,246,.24);background:linear-gradient(140deg,rgba(139,92,246,.10),rgba(139,92,246,.01))}
@keyframes cube-spin{
  from{transform:rotateX(-18deg) rotateY(0deg)}
  to{transform:rotateX(-18deg) rotateY(360deg)}
}

/* ---------------- 目录（桌面左栏） ---------------- */
.glayout{
  width:var(--shell);margin:0 auto 60px;
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:38px;
  align-items:start;
}
.gtoc{
  position:sticky;top:calc(var(--nav-h) + 24px);
  padding:18px 16px;border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(180deg,rgba(16,20,30,.85),rgba(8,10,16,.85));
}
.gtoc__label{
  font-family:var(--font-tech);font-size:10.5px;letter-spacing:2.6px;
  color:var(--muted-2);margin-bottom:12px;text-transform:uppercase;
}
.gtoc a{
  display:flex;align-items:baseline;gap:9px;
  padding:6px 8px;border-radius:2px;font-size:13px;color:var(--muted);
  border-left:2px solid transparent;
  transition:color .2s,border-color .2s,background .2s;
}
.gtoc a em{
  font-family:var(--font-tech);font-style:normal;font-size:10.5px;
  color:var(--muted-2);width:16px;flex:0 0 auto;
}
.gtoc a:hover{color:var(--ink);background:rgba(255,255,255,.03)}
.gtoc a.is-active{color:var(--gold);border-left-color:var(--ember);background:rgba(255,106,26,.06)}
.gtoc a.is-active em{color:var(--ember)}

/* ---------------- 内容 ---------------- */
.gmain{min-width:0}
.gsec{
  position:relative;
  padding:26px 28px;margin-bottom:22px;
  border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(165deg,rgba(16,20,30,.92),rgba(8,10,16,.92));
  scroll-margin-top:92px;
  transition:border-color .35s var(--ease);
}
.gsec::after{
  content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,106,26,.05),transparent 40%);
  opacity:0;transition:opacity .4s;
}
.gsec:hover{border-color:rgba(255,200,97,.22)}
.gsec:hover::after{opacity:1}

.gsec__head{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.gsec__no{
  flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
  font-family:var(--font-tech);font-weight:700;font-size:15px;
  color:#1a0d02;border-radius:3px;
  background:linear-gradient(140deg,var(--gold),var(--ember));
  box-shadow:0 0 18px rgba(255,106,26,.28);
}
.gsec h2{
  font-size:clamp(18px,2.1vw,22px);letter-spacing:.04em;font-weight:700;
  color:var(--gold-soft);
}
.gsec h3{
  margin:24px 0 10px;font-size:15.5px;font-weight:700;letter-spacing:.03em;
  color:#f3e2c4;display:flex;align-items:center;gap:8px;
}
.gsec h3::before{
  content:"";width:3px;height:14px;border-radius:1px;
  background:linear-gradient(180deg,var(--gold),var(--ember));
}
.gsec p{margin:9px 0;color:#c6cbd8}
.gsec b{color:var(--gold-soft);font-weight:700}
.gsec ul,.gsec ol{margin:10px 0 10px 4px;padding-left:18px}
.gsec ul li,.gsec ol li{margin:6px 0;color:#c6cbd8;position:relative}
.gsec ul li::before{
  content:"";position:absolute;left:-14px;top:.72em;width:5px;height:5px;
  background:var(--ember);transform:rotate(45deg);
}
.gsec ol{counter-reset:oli}
.gsec ol li{counter-increment:oli}
.gsec ol li::before{
  content:counter(oli);position:absolute;left:-20px;top:.1em;
  font-family:var(--font-tech);font-size:12px;font-weight:700;color:var(--ember);
}

code,.k{
  background:#070a10;border:1px solid var(--line);border-radius:3px;
  padding:1px 6px;font-family:Consolas,"JetBrains Mono",monospace;
  font-size:12.5px;color:var(--gold-soft);
}

/* 表格 */
.gtable{
  margin:14px 0;overflow-x:auto;border:1px solid var(--line);border-radius:3px;
  background:rgba(6,8,13,.55);
}
.gtable table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.gtable th,.gtable td{
  padding:10px 13px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);
}
.gtable th{
  background:rgba(21,26,38,.9);color:var(--gold);font-weight:700;
  font-size:12.5px;letter-spacing:.06em;white-space:nowrap;
}
.gtable tr:last-child td{border-bottom:0}
.gtable tbody tr:hover td{background:rgba(255,200,97,.028)}
.gtable td:first-child{color:#dfe3ee;font-weight:600;white-space:nowrap}

/* 提示块 */
.gnote{
  margin:14px 0;padding:11px 15px 11px 16px;
  border-left:3px solid var(--gold);
  background:linear-gradient(90deg,rgba(255,200,97,.07),rgba(255,200,97,.012));
  border-radius:0 3px 3px 0;font-size:13.5px;color:#cdd3e0;
}
.gnote--warn{border-left-color:var(--rose);background:linear-gradient(90deg,rgba(255,90,122,.08),rgba(255,90,122,.012))}
.gnote--tip{border-left-color:var(--jade);background:linear-gradient(90deg,rgba(57,230,168,.08),rgba(57,230,168,.012))}

/* 卡片网格 */
.ggrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin:16px 0;
}
.gcard{
  padding:14px 16px;border:1px solid var(--line);border-radius:3px;
  background:linear-gradient(160deg,rgba(21,26,38,.75),rgba(10,13,20,.75));
  transition:border-color .3s,transform .3s var(--ease);
}
.gcard:hover{border-color:rgba(255,200,97,.28);transform:translateY(-2px)}
.gcard b{display:block;margin-bottom:5px;color:var(--gold-soft);font-size:14px}
.gcard span{color:var(--muted);font-size:12.8px;line-height:1.75}

/* 药丸 */
.pill{
  display:inline-block;font-size:11.5px;padding:1px 9px;border-radius:999px;
  margin-right:6px;letter-spacing:.4px;white-space:nowrap;
}
.p-free{background:rgba(57,230,168,.12);color:var(--jade);border:1px solid rgba(57,230,168,.35)}
.p-pay{background:rgba(255,90,122,.12);color:var(--rose);border:1px solid rgba(255,90,122,.35)}
.p-soon{background:rgba(139,92,246,.12);color:#b39cf7;border:1px solid rgba(139,92,246,.35)}

/* 流程 */
.gflow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0;font-size:13px}
.gflow .step{
  padding:6px 13px;border:1px solid rgba(255,200,97,.3);border-radius:3px;
  background:rgba(255,200,97,.05);color:#f0e2c0;
}
.gflow .arrow{color:var(--ember);font-weight:700}

/* ---------------- 页脚 ---------------- */
.gfoot{
  border-top:1px solid var(--line);
  padding:38px 0 56px;text-align:center;
}
.gfoot__inner{width:var(--shell);margin:0 auto}
.gfoot p{color:var(--muted-2);font-size:12.5px;letter-spacing:.6px;line-height:1.9}
.gfoot__links{display:flex;justify-content:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.gfoot__links a{
  padding:8px 18px;border:1px solid var(--line-strong);border-radius:2px;
  font-size:12.5px;letter-spacing:1px;color:var(--muted);
  transition:color .25s,border-color .25s,background .25s;
}
.gfoot__links a:hover{color:var(--gold);border-color:rgba(255,200,97,.5);background:rgba(255,200,97,.06)}

/* ---------------- 回到顶部 ---------------- */
.gtop{
  position:fixed;right:22px;bottom:24px;z-index:90;
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--line-strong);border-radius:3px;
  background:rgba(10,13,20,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s,transform .3s,border-color .3s;
}
.gtop.is-on{opacity:1;transform:none;pointer-events:auto}
.gtop:hover{border-color:rgba(255,200,97,.5)}
.gtop svg{width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:2}

/* ---------------- 移动端目录抽屉 ---------------- */
.gdrawer{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(3,4,7,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.gdrawer.is-open{display:block}
.gdrawer__panel{
  position:absolute;left:0;top:0;bottom:0;width:min(300px,84vw);
  background:#0a0d14;border-right:1px solid var(--line-strong);
  padding:22px 18px;overflow-y:auto;
  animation:drawer-in .32s var(--ease);
}
@keyframes drawer-in{from{transform:translateX(-100%)}to{transform:none}}
.gdrawer__head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;
}
.gdrawer__head b{font-family:var(--font-tech);letter-spacing:2px;font-size:13px;color:var(--gold)}
.gdrawer__close{width:30px;height:30px;display:grid;place-items:center;font-size:20px;color:var(--muted)}
.gdrawer a{
  display:flex;gap:10px;align-items:baseline;
  padding:9px 8px;font-size:13.5px;color:var(--muted);
  border-bottom:1px solid rgba(255,255,255,.04);
}
.gdrawer a em{font-family:var(--font-tech);font-style:normal;font-size:11px;color:var(--muted-2);width:16px}
.gdrawer a:active{color:var(--gold)}

.gmenu-btn{
  display:none;align-items:center;gap:7px;
  padding:7px 12px;border:1px solid var(--line-strong);border-radius:2px;
  font-size:12.5px;color:var(--muted);letter-spacing:1px;
}
.gmenu-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}

/* ---------------- 滚动揭示 ---------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------------- 响应式 ---------------- */
@media (max-width:1080px){
  .glayout{grid-template-columns:1fr;gap:0}
  .gtoc{display:none}
  .gmenu-btn{display:inline-flex}
  .ghero__art{opacity:.4;right:-120px}
}
@media (max-width:720px){
  body{font-size:14.5px}
  .ghero{padding-top:calc(var(--nav-h) + 40px)}
  .ghero__art{display:none}
  .ghero__stats{gap:8px}
  .gstat{min-width:calc(50% - 4px);padding:11px 14px}
  .gstat b{font-size:20px}
  .gsec{padding:20px 17px}
  .gsec__head{gap:10px}
  .gsec__no{width:30px;height:30px;font-size:13px}
  .gnav__title,.gnav__divider{display:none}
  .gtop{right:14px;bottom:16px}
  .gtable table{min-width:460px;font-size:12.8px}
  .gtable th,.gtable td{padding:8px 10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}