:root{
  --bg:#0f172a; --card:#111827; --text:#e5e7eb; --muted:#9ca3af;
  --border:#1f2937; --primary:#6366f1; --ring:rgba(99,102,241,.35);
}
*{ box-sizing:border-box; } html,body{height:100%}
body{ margin:0; font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",Arial;
  color:var(--text); background:linear-gradient(180deg,#0b1220,var(--bg)); }
.container{ width:min(960px,94vw); margin:0 auto; padding:20px 0; }
.site-header{ position:sticky; top:0; z-index:10; backdrop-filter: blur(8px);
  background:rgba(15,23,42,.85); border-bottom:1px solid var(--border); }
.brand{ margin:0 0 10px; font-size:20px; }
.tabs{ display:inline-flex; gap:10px; padding:6px; background:rgba(255,255,255,.04);
  border:1px solid var(--border); border-radius:12px; }
.tab-link{ display:inline-block; padding:10px 16px; border-radius:10px; text-decoration:none;
  color:var(--muted); border:1px solid transparent; transition:.18s; }
.tab-link:hover{ color:#fff; background:rgba(255,255,255,.05) }
.tab-link.is-active{ color:#fff; background:rgba(99,102,241,.18);
  border-color:rgba(99,102,241,.35); box-shadow:0 0 0 3px var(--ring) inset; }
.panel{ margin-top:18px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.25); }
.title{ margin:0 0 12px; font-size:18px; }
.form{ display:grid; gap:12px; max-width:520px; }
.field label{ display:block; margin-bottom:6px; font-weight:600; }
input[type="text"], input[type="password"]{ color: var(--text);
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background:rgba(255,255,255,.03); color:#111827; outline:none; transition:.18s; }
input::placeholder{ color:#6b7280; }
input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); background:rgba(255,255,255,.05) }
.btn{ appearance:none; border:none; cursor:pointer; padding:12px 18px; border-radius:12px; font-weight:700; }
.btn-primary{ color:#fff; background:var(--primary); box-shadow:0 8px 18px rgba(99,102,241,.35); }
.btn-primary:hover{ filter:brightness(.97); }
.site-footer{ margin-top:24px; padding:16px 0; color:var(--muted); border-top:1px solid var(--border); text-align:center; }
@media (prefers-color-scheme: light){
  :root{ --bg:#f3f4f6; --card:#fff; --text:#0f172a; --muted:#6b7280; --border:#e5e7eb; --ring:rgba(99,102,241,.2); }
  body{ background:linear-gradient(180deg,#fff,var(--bg)); }
  .card{ box-shadow:0 10px 24px rgba(2,6,23,.06); }
}
/* === 注册成功弹窗 === */
.modal[hidden]{ display:none; }
.modal{
  position: fixed; inset: 0; z-index: 50;
}
.modal-backdrop{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.modal-dialog{
  position: relative;
  width: min(520px, 92vw);
  margin: 10vh auto 0;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  padding: 18px 18px 16px;
}
.modal-title{ margin: 0 0 6px; font-size: 18px; }
.modal-desc{ margin: 0 0 12px; color: var(--muted); }
.kv{ border:1px dashed var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; background: rgba(255,255,255,.03); }
.kv-row{ display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.kv-row span{ width: 56px; color: var(--muted); }
.kv-row code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(0,0,0,.24);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  user-select: all;
}
.modal-actions{ display: flex; gap: 10px; justify-content: flex-end; }

/* 1) 输入框文字对比度 */
input[type="text"], input[type="password"]{ color: var(--text); }

/* 3) 子分页颜色 */
.subtab-link:hover{ color: var(--text); }
.subtab-link.is-active{ color: var(--text); }

/* 6) 正文与注释分层 */
.prose{ color: var(--text); }
.note, .faq ul{ color: var(--muted); }

/* 7) 统一焦点可见性 */
:where(a, button, input, select, textarea):focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
  border-color: var(--primary);
}

/* 11) 仅在链接处放宽断行，避免中文被硬断 */
.card a{ overflow-wrap:anywhere; word-break:normal; }
/* 只改两个跳转按钮的颜色 */
#goto-buy.btn-primary{
  background: #10b981; /* 绿色 */
  box-shadow: 0 8px 18px rgba(16,185,129,.35);
  color:#fff;
}
#goto-buy.btn-primary:hover{ filter: brightness(.97); }

#goto-guide.btn-primary{
  background: #f59e0b; /* 橙色 */
  box-shadow: 0 8px 18px rgba(245,158,11,.35);
  color:#fff;
}
#goto-guide.btn-primary:hover{ filter: brightness(.97); }

/* ===== 更醒目的头部导航 ===== */
:root{
  --header-border: rgba(255,255,255,.14);
  --header-glow: rgba(99,102,241,.35);
}

.site-header{
  position: sticky; top: 0; z-index: 30;
  /* 更亮的半透明背景 + 顶部高光 */
  backdrop-filter: blur(12px) saturate(135%);
  background:
    radial-gradient(900px 220px at 10% -20%, rgba(99,102,241,.25), transparent 60%),
    linear-gradient(180deg, rgba(5,10,25,.92), rgba(5,10,25,.80));
  border-bottom: 1px solid var(--header-border);
  box-shadow: 0 8px 24px rgba(2,6,23,.5);
}
.site-header .container{ padding: 16px 0 18px; }

.brand{
  margin: 6px 0 12px;
  font-size: 24px; font-weight: 800; letter-spacing: .2px;
}

/* 强化“药丸式”分页条 */
.tabs{
  display: inline-flex; gap: 10px; padding: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--header-border);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 8px 30px var(--header-glow);
}

/* 标签：默认更清晰，悬停更亮，激活有渐变与光晕 */
.tab-link{
  position: relative;
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
  color: #cbd5e1;         /* 比原来更亮一点 */
  font-weight: 700;
  transition: .18s;
}
.tab-link:hover{
  color:#fff;
  background: rgba(255,255,255,.10);
}
.tab-link.is-active{
  color: #fff;
  background: linear-gradient(180deg, #7c82f7, #6366f1); /* 主色渐变 */
  border-color: transparent;
  box-shadow:
    0 6px 18px rgba(99,102,241,.45),
    0 0 0 3px var(--ring) inset;
}
.tab-link.is-active::after{
  content: "";
  position: absolute; inset: -2px; border-radius: inherit;
  box-shadow: 0 0 0 8px rgba(99,102,241,.15); /* 外圈柔光，提升存在感 */
  pointer-events: none;
}

/* 浅色模式的对比优化 */
@media (prefers-color-scheme: light){
  .site-header{
    background:
      radial-gradient(900px 220px at 12% -20%, rgba(99,102,241,.18), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 8px 26px rgba(15,23,42,.08);
  }
  .tabs{
    background: rgba(0,0,0,.03);
    border-color: #e5e7eb;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
  }
  .tab-link{ color:#475569; }
  .tab-link:hover{ background: rgba(0,0,0,.05); }
}


/* === Moved from index.html <style> (merged) === */
.prose{ color:var(--muted); }
    .media-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
    .media-grid img{
      width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
      border-radius:12px; border:1px solid var(--border); background:rgba(0,0,0,.08);
    }
    .cta-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0 0; }
    .btn-link{ text-decoration:none; }
    .note{ color:var(--muted); font-size:14px; }
    .card a{ word-break: break-all; }
    figure{ margin:8px 0; }
    figcaption{ font-size:12px; color:var(--muted); margin-top:4px; }

    /* 购买充值卡图片：上下排列 + 原比例（不裁剪） */
    :root{ --buy-img-max: 560px; }
    #buy .media-grid{ grid-template-columns: 1fr; justify-items:center; gap:14px; }
    #buy .media-grid figure{ width:min(var(--buy-img-max),92vw); margin:8px auto; }
    #buy .media-grid img{ width:100%; height:auto; aspect-ratio:auto; object-fit:contain; background:transparent; }

    /* 二级分页（buy） */
    .subtabs{
      display:inline-flex; gap:8px; padding:6px;
      background:rgba(255,255,255,.04);
      border:1px solid var(--border); border-radius:12px; margin:6px 0 14px;
    }
    .subtab-link{
      display:inline-block; padding:8px 14px; border-radius:10px; text-decoration:none;
      color:var(--muted); border:1px solid transparent; transition:.18s;
    }
    .subtab-link:hover{ color:#000; background:rgba(255,255,255,.05) }
    .subtab-link.is-active{
      color:#000; background:rgba(99,102,241,.18);
      border-color:rgba(99,102,241,.35); box-shadow:0 0 0 3px rgba(99,102,241,.35) inset;
    }
    .subpanel[hidden]{ display:none; }

    /* 下载直链 + 复制按钮 */
    .copy-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0 0; }
    .copy-input{
      flex:1 1 360px; min-width:220px;
      padding:10px 12px; border-radius:10px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.03);
      color:var(--text); outline:none;
    }
    .copy-input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); }
    .copy-btn{ white-space:nowrap; }

    /* —— 教程排版优化（语义化 + 网格） —— */
    .guide-grid{ display:grid; gap:14px; grid-template-columns:1fr; }
    @media(min-width: 900px){ .guide-grid{ grid-template-columns:1fr 1fr; } }
    .guide-card{
      border:1px solid var(--border); border-radius:12px;
      background:rgba(255,255,255,.03); padding:14px;
    }
    .guide-card h3{ margin:0 0 8px; color:var(--text); font-size:16px; }
    .steps{ margin:0; padding-left:20px; color:var(--text); }
    .steps > li{ margin:8px 0; }
    .steps ul{ margin:6px 0 0 18px; color:var(--muted); }
    .callout{
      border:1px dashed var(--border); border-radius:10px;
      padding:10px 12px; background:rgba(255,255,255,.04); margin:10px 0;
      color:var(--text);
    }
    .callout.important{
      background:rgba(250,204,21,.12); border-color:rgba(250,204,21,.35);
    }
    .faq details{
      border:1px solid var(--border); border-radius:10px;
      background:rgba(255,255,255,.03); padding:10px 12px; margin:10px 0;
    }
    .faq summary{ cursor:pointer; font-weight:600; color:var(--text); }
    .faq ul{ margin:8px 0 0 18px; color:var(--muted); }
/* === End moved block === */
/* 红色 + 加粗（只针对这两条） */
li strong.text-danger,
p.note.text-danger{
  color: #dc2626 !important;  /* 红色 */
  font-weight: 700 !important; /* 加粗 */
}
/* 让红色提示显眼：覆盖 .note 的灰色 */
.note.text-danger {
  color: #dc2626 !important;  /* 红色 */
  font-weight: 700 !important; /* 加粗 */
}