:root {
  --bg-dark: #090d16;
  --bg-card: rgba(18, 24, 38, 0.75);
  --bg-card-hover: rgba(26, 35, 54, 0.85);
  --cyber-cyan: #00ffff;
  --cyber-cyan-glow: rgba(0, 255, 255, 0.4);
  --neon-pink: #ff007f;
  --neon-pink-glow: rgba(255, 0, 127, 0.4);
  --glowing-blue: #38bdf8;
  --text-primary: #f0f6fc;
  --text-muted: #8b949e;
  --glass-border: rgba(0, 255, 255, 0.22);
  --glass-border-pink: rgba(255, 0, 127, 0.25);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-primary);
  font-family: var(--font-main);
  line-height: 1.6;
  overflow-x: hidden;
  /* 赛博星域底纹：左上角青色辉光 + 细网格。
     历史沿革（避免再反复）：
       初版  circle at 15% 15% / circle at 85% 60%，尺寸按整个 body 计算，
             40% 止点在长页面上会摊开成几千像素 —— 左侧被拉出一大片青绿，
             观感别扭（用户反馈）。
       二版  改成顶部水平居中，左右对称，解决了拉长问题，但丢了「左上角」的
             原设计取向。
       现版  回到左上角，但把尺寸**固定**为 760x920 px —— 不再随页面长度伸缩，
             因此既有角落辉光的味道，又不会像初版那样被拉成一大片。
     注：这是有意的左右不对称（角光），被限制在顶部约 900px 内（实测可达 ~600px）。 */
  background-image:
    radial-gradient(ellipse 760px 920px at 0% 0%, rgba(0, 255, 255, 0.07), transparent 74%),
    linear-gradient(rgba(0, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 760px 920px, 40px 40px, 40px 40px;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat;
}

a {
  color: var(--glowing-blue);
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--cyber-cyan);
  text-shadow: 0 0 8px var(--cyber-cyan-glow);
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ================= Navbar ================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(9, 13, 22, 0.8);
  border-bottom: 1px solid var(--glass-border);
  padding: 14px 0;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 10px var(--cyber-cyan-glow);
}

.brand-text {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, var(--cyber-cyan), var(--glowing-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
}

.nav-links a {
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 500;
}

.nav-links a:hover, .nav-links a.active {
  color: var(--cyber-cyan);
}

.lang-switch {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 3px;
  cursor: pointer;
}

.lang-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.lang-btn.active {
  background: var(--cyber-cyan);
  color: #090d16;
  box-shadow: 0 0 8px var(--cyber-cyan-glow);
}

/* ================= Hero Section ================= */
.hero {
  padding: 80px 0 60px;
  text-align: center;
}

.badge-tag {
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--cyber-cyan);
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid var(--cyber-cyan);
  border-radius: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 12px var(--cyber-cyan-glow);
}

.hero h1 {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #ffffff 30%, var(--cyber-cyan) 80%, var(--neon-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero p.lead {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto 36px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 24px;
  font-size: 0.95rem;
  font-weight: bold;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.25s ease;
  text-decoration: none;
}

.btn-primary {
  background: var(--cyber-cyan);
  color: #090d16;
  border: none;
  box-shadow: 0 0 16px var(--cyber-cyan-glow);
}

.btn-primary:hover {
  background: #33ffff;
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(0, 255, 255, 0.6);
}

.btn-secondary {
  background: rgba(255, 0, 127, 0.12);
  color: #ff3399;
  border: 1px solid var(--neon-pink);
  box-shadow: 0 0 12px var(--neon-pink-glow);
}

.btn-secondary:hover {
  background: var(--neon-pink);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(255, 0, 127, 0.6);
}

.btn-outline {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--glass-border);
}

.btn-outline:hover {
  color: var(--cyber-cyan);
  border-color: var(--cyber-cyan);
}

/* ================= Feature Grid ================= */
.section {
  padding: 60px 0;
}

.section-title {
  text-align: center;
  margin-bottom: 44px;
}

.section-title h2 {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
}

.section-title p {
  color: var(--text-muted);
  font-size: 1rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 28px;
  transition: all 0.3s ease;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyber-cyan), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.card:hover {
  background: var(--bg-card-hover);
  border-color: var(--cyber-cyan);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 255, 255, 0.12);
}

.card:hover::before {
  opacity: 1;
}

.card-icon {
  font-size: 2rem;
  margin-bottom: 16px;
  display: inline-block;
}

.card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.card p {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ================= License & VIP Section ================= */
.vip-box {
  background: linear-gradient(135deg, rgba(22, 27, 34, 0.9), rgba(30, 41, 59, 0.7));
  border: 1px solid var(--glass-border-pink);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 0 30px rgba(255, 0, 127, 0.08);
}

.vip-box h3 {
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 14px;
}

.vip-price {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--neon-pink);
  margin-bottom: 16px;
  text-shadow: 0 0 16px var(--neon-pink-glow);
}

.vip-desc {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 24px;
  line-height: 1.7;
}

.steps-list {
  text-align: left;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-bottom: 24px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.steps-list li {
  margin-bottom: 8px;
  list-style-position: inside;
}

/* ================= Legal / Article Content ================= */
.doc-article {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 44px;
  margin: 40px 0 60px;
  backdrop-filter: blur(12px);
}

.doc-article h1 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: var(--cyber-cyan);
}

.doc-article .doc-date {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 30px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.doc-article h2 {
  font-size: 1.35rem;
  color: #fff;
  margin: 28px 0 12px;
}

.doc-article h3 {
  font-size: 1.1rem;
  color: var(--glowing-blue);
  margin: 18px 0 8px;
}

.doc-article p, .doc-article ul {
  color: #c9d1d9;
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: 14px;
}

.doc-article ul {
  padding-left: 24px;
}

/* ================= FAQ Accordion ================= */
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  overflow: hidden;
}

.faq-q {
  padding: 18px 24px;
  font-weight: bold;
  font-size: 1.05rem;
  color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.faq-q:hover {
  color: var(--cyber-cyan);
}

.faq-a {
  padding: 0 24px 18px;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 14px;
}

/* ================= Footer ================= */
.footer {
  border-top: 1px solid var(--glass-border);
  background: rgba(9, 13, 22, 0.9);
  padding: 40px 0 30px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--text-muted);
}

.footer-links a:hover {
  color: var(--cyber-cyan);
}

/* ================= Mobile Responsive ================= */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.2rem;
  }
  .nav-links {
    display: none;
  }
  .doc-article {
    padding: 24px 18px;
  }
  .vip-box {
    padding: 24px 18px;
  }
}

/* ===== Docs pages (generated by scripts/build_docs_to_html.py) ===== */
    /* Docs Specific Layout & Responsive Typography */
    .docs-layout {
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      gap: 32px;
      margin: 30px 0 60px;
      align-items: start;
    }
    .docs-sidebar {
      background: var(--bg-card);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-md);
      padding: 20px;
      position: sticky;
      top: 80px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .docs-sidebar h3 {
      font-size: 1.1rem;
      color: var(--cyber-cyan);
      margin-bottom: 16px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      letter-spacing: 0.5px;
    }
    .docs-menu {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .docs-menu li {
      margin-bottom: 6px;
    }
    .docs-menu a {
      display: block;
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      color: var(--text-muted);
      font-size: 0.9rem;
      font-weight: 500;
      transition: all 0.2s ease;
      line-height: 1.4;
    }
    .docs-menu a:hover, .docs-menu a.active {
      background: rgba(0, 255, 255, 0.1);
      color: var(--cyber-cyan);
      border-left: 3px solid var(--cyber-cyan);
      padding-left: 11px;
    }
    .docs-body {
      background: var(--bg-card);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-md);
      padding: 36px 44px;
      min-height: 600px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
      overflow-wrap: break-word;
      word-break: break-word;
    }
    .docs-body h1 {
      font-size: 2rem;
      color: var(--cyber-cyan);
      margin-bottom: 20px;
      line-height: 1.3;
      scroll-margin-top: 90px;
    }
    .docs-body h2 {
      font-size: 1.4rem;
      color: #fff;
      margin: 36px 0 16px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(0, 255, 255, 0.15);
      line-height: 1.4;
      scroll-margin-top: 90px;
    }
    .docs-body h3 {
      font-size: 1.15rem;
      color: var(--glowing-blue);
      margin: 24px 0 12px;
      line-height: 1.4;
      scroll-margin-top: 90px;
    }
    .docs-body h4 {
      scroll-margin-top: 90px;
    }
    .docs-body p {
      color: #c9d1d9;
      font-size: 0.95rem;
      line-height: 1.85;
      margin-bottom: 16px;
    }
    .docs-body ul, .docs-body ol {
      color: #c9d1d9;
      font-size: 0.95rem;
      line-height: 1.85;
      margin-bottom: 16px;
      padding-left: 24px;
    }
    .docs-body li {
      margin-bottom: 6px;
    }
    .docs-body li > ul, .docs-body li > ol {
      margin-top: 6px;
      margin-bottom: 6px;
    }
    .docs-body strong {
      color: #fff;
      font-weight: 600;
    }
    .docs-body em {
      color: #e6edf3;
    }
    .docs-body code {
      font-family: var(--font-mono);
      background: rgba(255, 255, 255, 0.08);
      padding: 2px 6px;
      border-radius: 4px;
      color: var(--neon-pink);
      font-size: 0.88em;
    }
    .docs-body pre {
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 16px 20px;
      border-radius: var(--radius-sm);
      overflow-x: auto;
      margin: 20px 0;
    }
    .docs-body pre code {
      background: transparent;
      padding: 0;
      color: #38bdf8;
      font-size: 0.9rem;
    }
    .docs-body blockquote {
      border-left: 4px solid var(--cyber-cyan);
      background: rgba(0, 255, 255, 0.05);
      padding: 14px 20px;
      margin: 20px 0;
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      color: #8b949e;
    }
    .docs-body hr {
      border: 0;
      height: 1px;
      background: linear-gradient(90deg, rgba(0, 255, 255, 0.3), rgba(255, 0, 127, 0.1), transparent);
      margin: 36px 0;
    }
    /* Responsive Table Container
       表格线可读性演进：
         初版 rgba(255,255,255,0.08)  对比度 1.22:1  几乎看不见（用户反馈「看不到线」）
         二版 rgba(0,255,255,0.40)    对比度 3.25:1  看得见了，但饱和度 92%，
                                                    整片青色网格太抢眼（用户反馈「喧宾夺主」）
         现版 中性灰 rgba(139,148,158,0.50)  对比度 2.40:1、饱和度 19%
               —— 可读性接近，但视觉重量低得多，网格线回归「结构」而非「装饰」。
       青色只保留在表头下边线与外框两处，品牌调性不丢，又不喧宾夺主。 */
    .table-responsive {
      width: 100%;
      overflow-x: auto;
      margin: 24px 0;
      border-radius: var(--radius-sm);
      /* 外框与内部网格线用同一种中性灰。
         原先外框用 var(--glass-border)（青色，饱和度 86%），而内线已是中性灰
         （饱和度 19%）—— 饱和度差 4.5 倍，在变灰的网格旁这条青线就显得格外重，
         观感上就是「外框有点粗」（用户反馈）。统一颜色后整张表读作一个整体网格，
         青色只留在表头下边线一处作点缀。 */
      border: 1px solid rgba(139, 148, 158, 0.50);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    }
    .docs-body table {
      width: 100%;
      min-width: 580px;
      border-collapse: collapse;
      font-size: 0.9rem;
    }
    .docs-body th, .docs-body td {
      border: 1px solid rgba(139, 148, 158, 0.50);
      padding: 12px 16px;
      text-align: left;
      vertical-align: top;
      line-height: 1.6;
    }
    .docs-body th {
      background: rgba(0, 255, 255, 0.10);
      color: var(--cyber-cyan);
      font-weight: 600;
      white-space: nowrap;
      border-bottom: 1px solid rgba(0, 255, 255, 0.40);
    }
    .docs-body tr:nth-child(even) td {
      background: rgba(255, 255, 255, 0.03);
    }
    .docs-body tr:hover td {
      background: rgba(0, 255, 255, 0.07);
    }
    /* 去掉与容器外框重复的最外圈单元格边线。
       容器 .table-responsive 自己有 1px 边线，而表格首/末列与首/末行也各带
       1px —— 两条线紧挨在一起（实测表格边缘正好在容器内侧 1px 处），
       外框看起来就是 2px 的粗线（用户反馈「外框有点粗」）。
       这里只去掉最外圈，内部网格线保留，外框由容器单线负责。 */
    .docs-body tr > *:first-child {
      border-left: 0;
    }
    .docs-body tr > *:last-child {
      border-right: 0;
    }
    .docs-body thead tr:first-child > * {
      border-top: 0;
    }
    .docs-body tbody tr:last-child > * {
      border-bottom: 0;
    }
    @media (max-width: 860px) {
      .docs-layout {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .docs-sidebar {
        position: relative;
        top: 0;
      }
      .docs-body {
        padding: 24px 18px;
      }
      .docs-body h1 {
        font-size: 1.6rem;
      }
    }

/* ===== 官网导航：移动端折叠菜单 =====
   此前 .nav-links 在 ≤768px 被隐藏且没有替代入口，手机用户点不到
   「使用指南 / FAQ」—— 而本站受众正是手机用户。现改为汉堡菜单。 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 16px;
  background: var(--cyber-cyan);
  color: #04121a;
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--cyber-cyan);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }
  .nav-content {
    position: relative;
    flex-wrap: wrap;
  }
  /* 覆盖上方 @media 中的 display:none —— 关闭态仍是 none，展开态才显示 */
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    z-index: 120;
  }
  .nav-links.open li {
    width: 100%;
  }
  .nav-links.open a {
    display: block;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 1rem;
  }
  .nav-links.open a:hover,
  .nav-links.open a.active {
    background: rgba(0, 255, 255, 0.1);
    border-left: 3px solid var(--cyber-cyan);
    padding-left: 11px;
  }
}

/* ===== 生成页补充：容器间距与 FAQ 列表 ===== */
.page-pad {
  padding-top: 40px;
  padding-bottom: 60px;
}
.faq-list {
  max-width: 860px;
  margin: 0 auto;
}

/* FAQ 折叠态改由 class 控制（此前依赖内联 style.display，JS 一改就失效） */
.faq-a {
  display: none;
}
.faq-a.open {
  display: block;
}