/* ============================================================
   2026 年 8 月双榜专用排版(本地改版草稿 v2)
   作用域:仅 .na-aug(挂在三个 8 月页面的 <main> 上),
   不影响 base.css 的导航、页脚与其他期次页面。
   设计口径:单栏阅读、名次悬挂在竖线上、条目按同一组问题排列;
   不用卡片墙、渐变、阴影、入场动画与横向宽表。
   ============================================================ */

.na-aug {
  --a-ink: #E9EEF5;          /* 标题与强调 */
  --a-body: #A9B4C4;         /* 正文 */
  --a-quiet: #79859B;        /* 字段名、注脚 */
  --a-rule: rgba(126, 158, 196, 0.20);
  --a-rule-2: rgba(126, 158, 196, 0.38);
  --a-key: #4FF0D4;          /* VPN 榜主色 */
  --a-key-soft: rgba(79, 240, 212, 0.34);
  --a-flag: #FFB454;         /* 草稿、沿用、未核验 */
  --a-warn: #E8B08C;         /* 要留意 */
  --a-risk: #FF9A8C;         /* 付款前查不到 */

  display: block;
  color: var(--a-body);
  font-size: 17px;
  line-height: 1.95;
}

/* 机场榜换主色,其余排版完全相同 */
.na-aug.aug-air,
.na-aug .a-sec--air {
  --a-key: #8AA3FF;
  --a-key-soft: rgba(138, 163, 255, 0.36);
}

/* —— 阅读框 —— */
.na-aug .a-page { max-width: 812px; margin: 0 auto; padding: 0 36px; }
.na-aug .a-col { max-width: 644px; }
.na-aug .a-list { max-width: 740px; }

.na-aug p { margin: 0 0 18px; overflow-wrap: anywhere; }
.na-aug p:last-child { margin-bottom: 0; }

.na-aug a { color: var(--a-key); border-bottom: 1px solid var(--a-key-soft); }
.na-aug a:hover { border-bottom-color: var(--a-key); }
.na-aug a:focus-visible,
.na-aug summary:focus-visible {
  outline: 2px solid var(--a-key); outline-offset: 3px; border-radius: 2px;
}

/* —— 页头:四行封顶,桌面第一屏要留给榜首 —— */
.na-aug .a-head { padding: 30px 0 0; }
.na-aug .a-head .crumbs { margin-bottom: 18px; }

.na-aug .a-h1 {
  margin: 0 0 8px;
  font-size: 36px; font-weight: 800; line-height: 1.22;
  text-wrap: balance;
  letter-spacing: -0.4px; color: var(--a-ink);
}
.na-aug .a-sub {
  margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: var(--a-quiet);
}
.na-aug .a-lead {
  max-width: 640px; margin: 0 0 12px;
  font-size: 17px; line-height: 1.85; color: var(--a-body);
}
.na-aug .a-lead strong { color: var(--a-ink); font-weight: 600; }
.na-aug .a-edge {
  max-width: 700px; margin: 0;
  border-left: 3px solid var(--a-flag); padding: 1px 0 1px 16px;
  font-size: 13.5px; line-height: 1.8; color: var(--a-quiet);
}

.na-aug .crumbs {
  font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; color: var(--a-quiet);
}
.na-aug .crumbs a { border-bottom: 0; color: var(--a-key); }
.na-aug .crumbs [aria-current="page"] { color: var(--a-quiet); }

/* —— 章节 —— */
.na-aug .a-sec {
  position: relative; margin-top: 72px; padding-top: 28px;
  border-top: 1px solid var(--a-rule-2);
}
.na-aug .a-sec--first { margin-top: 34px; padding-top: 22px; }
.na-aug .a-sec::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 52px; height: 3px; background: var(--a-key);
}
.na-aug .a-sec > h2 {
  margin: 0 0 12px; font-size: 25px; font-weight: 700; line-height: 1.45;
  letter-spacing: -0.2px; color: var(--a-ink);
}
.na-aug .a-count {
  font-family: var(--font-num); font-size: 17px; font-weight: 500;
  color: var(--a-key); vertical-align: 2px;
}
.na-aug .a-sec > .a-intro {
  max-width: 640px; margin: 0 0 6px; font-size: 15.5px; line-height: 1.9;
  color: var(--a-quiet);
}

/* —— 榜单条目:名次悬挂在一条贯通的竖线上 —— */
.na-aug .a-sec--first > h2 { margin-bottom: 0; }
.na-aug .a-list { margin-top: 18px; border-top: 1px solid var(--a-rule); }
.na-aug .a-entry {
  display: grid; grid-template-columns: 72px 1fr; column-gap: 24px;
  border-bottom: 1px solid var(--a-rule);
}
.na-aug .a-entry__rank {
  border-right: 1px solid var(--a-rule);
  padding: 30px 16px 34px 0; text-align: right;
}
.na-aug .a-entry__body { padding: 30px 0 34px; min-width: 0; }

.na-aug .a-num {
  display: block; font-family: var(--font-num);
  font-size: 38px; font-weight: 300; line-height: 1;
  letter-spacing: -1px; color: var(--a-key);
}

.na-aug .a-entry__name {
  margin: 0 0 6px; font-size: 20.5px; font-weight: 700; line-height: 1.45;
  letter-spacing: -0.2px; color: var(--a-ink);
}
.na-aug .ed-tag {
  display: inline-block; margin-left: 10px; vertical-align: 2px;
  font-size: 13px; font-weight: 400; color: var(--a-key);
}
.na-aug .ed-tag::before { content: "／"; margin-right: 6px; color: var(--a-rule-2); }

.na-aug .a-price {
  margin: 0 0 16px; font-size: 15.5px; line-height: 1.8; color: var(--a-ink);
}

/* 每条按同一组问题排列:买多少钱、适合谁、不适合谁、要留意 */
.na-aug .a-facts { margin: 0 0 16px; }
.na-aug .a-fact {
  display: grid; grid-template-columns: 6.5em 1fr; column-gap: 18px;
  padding: 7px 0; border-top: 1px dotted var(--a-rule);
}
.na-aug .a-fact:first-child { border-top: 0; padding-top: 0; }
.na-aug .a-fact dt {
  font-size: 13.5px; line-height: 1.85; color: var(--a-quiet); white-space: nowrap;
}
.na-aug .a-fact dd {
  margin: 0; font-size: 15.5px; line-height: 1.85; color: var(--a-body);
  overflow-wrap: anywhere;
}
.na-aug .a-fact--watch dd { color: var(--a-warn); }
.na-aug .a-fact--risk dd { color: var(--a-risk); }
/* 风险与边界行末尾的原文链接:就近可点击,弱化成小字 */
.na-aug .a-fact--risk .a-src { display: block; margin-top: 5px; font-size: 13px; line-height: 1.6; color: var(--a-quiet); }
.na-aug .a-fact--risk .a-src a { color: var(--a-key); }

.na-aug .a-visit { margin: 16px 0 0; }
.na-aug .a-visit a {
  display: inline-block; border: 1px solid var(--a-key-soft); border-radius: 3px;
  padding: 9px 18px; font-size: 14.5px; font-weight: 600; color: var(--a-key);
}
.na-aug .a-visit a:hover { border-color: var(--a-key); background: rgba(255, 255, 255, 0.03); }

.na-aug .a-note-line {
  margin: 14px 0 0; max-width: 700px;
  font-size: 13px; line-height: 1.8; color: var(--a-quiet);
}

/* —— 正文段落 —— */
.na-aug .a-prose p { max-width: 644px; font-size: 17px; line-height: 1.95; }
.na-aug .a-prose strong { color: var(--a-ink); font-weight: 600; }

/* 提醒块:一条竖线,不做红盒子 */
.na-aug .a-caution {
  max-width: 660px; margin: 22px 0 0;
  border-left: 3px solid var(--a-risk); padding: 2px 0 2px 18px;
  font-size: 15px; line-height: 1.9; color: var(--a-body);
}
.na-aug .a-caution strong { color: var(--a-risk); font-weight: 600; }

/* —— 步骤:内容确实是顺序,才用编号 —— */
.na-aug .a-steps { max-width: 660px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: step; }
.na-aug .a-steps li {
  counter-increment: step; position: relative;
  padding: 16px 0 16px 42px; border-top: 1px solid var(--a-rule);
  font-size: 16px; line-height: 1.9;
}
.na-aug .a-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 15px;
  font-family: var(--font-num); font-size: 16px; color: var(--a-key);
}

/* —— FAQ —— */
.na-aug .a-faq { max-width: 700px; margin-top: 24px; border-top: 1px solid var(--a-rule); }
.na-aug .a-faq details { border-bottom: 1px solid var(--a-rule); }
.na-aug .a-faq .faq-q {
  cursor: pointer; padding: 17px 0; font-size: 16.5px; font-weight: 600;
  line-height: 1.65; color: var(--a-ink);
}
.na-aug .a-faq .faq-q::after { color: var(--a-key); }
.na-aug .a-faq p {
  margin: 0 0 20px; max-width: 640px; font-size: 15.5px; line-height: 1.9;
}

/* —— 相邻内容:一行一条,不做卡片 —— */
.na-aug .a-more { max-width: 700px; margin-top: 24px; border-top: 1px solid var(--a-rule); }
.na-aug .a-more a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  padding: 16px 0; border-bottom: 1px solid var(--a-rule);
  color: var(--a-ink); font-size: 16px; line-height: 1.6;
}
.na-aug .a-more a:hover { color: var(--a-key); }
.na-aug .a-more .a-more__kind { font-size: 13px; color: var(--a-quiet); flex: 0 0 5.5em; }

.na-aug .a-foot-note {
  max-width: 700px; margin: 64px 0 0; padding-top: 22px;
  border-top: 1px solid var(--a-rule);
  font-size: 13px; line-height: 1.85; color: var(--a-quiet);
}

/* —— 总入口页:两张榜各占一段,不并排成卡片 —— */
.na-aug .a-board { margin-top: 24px; }
.na-aug .a-board__pick {
  display: grid; grid-template-columns: 72px 1fr; column-gap: 24px;
  border-top: 1px solid var(--a-rule);
}
.na-aug .a-board__pick:last-of-type { border-bottom: 1px solid var(--a-rule); }
.na-aug .a-board__no {
  border-right: 1px solid var(--a-rule); padding: 20px 16px 22px 0;
  text-align: right; font-family: var(--font-num); font-size: 26px;
  font-weight: 300; line-height: 1.2; color: var(--a-key);
}
.na-aug .a-board__text { padding: 20px 0 22px; min-width: 0; }
.na-aug .a-board__head {
  margin: 0 0 4px; font-size: 17.5px; font-weight: 700; line-height: 1.5; color: var(--a-ink);
}
.na-aug .a-board__why { margin: 0; font-size: 15.5px; line-height: 1.85; color: var(--a-body); }
.na-aug .a-board__go { margin: 20px 0 0; font-size: 15.5px; }

/* —— 条目:真实购买周期(价格下面一行,比价格轻) —— */
.na-aug .a-period {
  margin: -10px 0 16px; font-size: 13.5px; line-height: 1.75; color: var(--a-quiet);
}

/* —— 逐项算分:折叠的账目,不是第二套名次 ——
   收起时只有一行分数区间;展开后整段靠一条竖线缩进,表示它是条目的下级证据。 */
.na-aug .a-calc { margin: 4px 0 0; border-top: 1px dotted var(--a-rule); }
.na-aug .a-calc__q {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 12px 0; cursor: pointer; list-style: none;
}
.na-aug .a-calc__q::-webkit-details-marker { display: none; }
.na-aug .a-calc__band {
  font-family: var(--font-num); font-size: 15px; font-weight: 600; color: var(--a-ink);
}
.na-aug .a-calc__hint { font-size: 13px; color: var(--a-key); white-space: nowrap; }
.na-aug .a-calc__hint::after { content: " +"; }
.na-aug .a-calc[open] .a-calc__hint::after { content: " −"; }
.na-aug .a-calc[open] .a-calc__q { padding-bottom: 6px; }
.na-aug .a-calc__note,
.na-aug .a-calc__list {
  margin: 0; padding-left: 18px; border-left: 1px solid var(--a-rule-2);
}
.na-aug .a-calc__note { padding-top: 2px; padding-bottom: 10px; font-size: 14px; color: var(--a-quiet); }
.na-aug .a-calc__list { padding-bottom: 16px; }
.na-aug .a-calc__row { padding: 9px 0; border-top: 1px dotted var(--a-rule); }
.na-aug .a-calc__row:first-child { border-top: 0; padding-top: 0; }
.na-aug .a-calc__row dt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 14px; color: var(--a-ink);
}
.na-aug .a-calc__got {
  font-family: var(--font-num); font-size: 13.5px; color: var(--a-quiet);
  text-align: right; white-space: nowrap;
}
.na-aug .a-calc__row dd {
  margin: 3px 0 0; font-size: 14.5px; line-height: 1.8; color: var(--a-body);
  overflow-wrap: anywhere;
}
.na-aug .a-calc__ev {
  display: block; margin-top: 2px; font-size: 12.5px; color: var(--a-quiet);
}

/* —— 评分规则:正文里的折叠区,上下各一条实线 —— */
.na-aug .a-rules {
  max-width: 700px; margin: 22px 0; border-top: 1px solid var(--a-rule);
  border-bottom: 1px solid var(--a-rule);
}
.na-aug .a-rules__q {
  padding: 13px 0; cursor: pointer; font-size: 15px; color: var(--a-key); list-style: none;
}
.na-aug .a-rules__q::-webkit-details-marker { display: none; }
.na-aug .a-rules__q::after { content: " +"; }
.na-aug .a-rules[open] .a-rules__q::after { content: " −"; }
.na-aug .a-rules .a-facts { margin: 0 0 12px; }
.na-aug .a-rules .a-fact { grid-template-columns: 11em 1fr; }
.na-aug .a-rules .a-fact dt { white-space: normal; color: var(--a-ink); }
.na-aug .a-rules .a-fact dd { font-size: 14.5px; }
.na-aug .a-rules__max {
  font-family: var(--font-num); font-size: 12.5px; color: var(--a-quiet);
}
.na-aug .a-rules__foot { padding-bottom: 14px; font-size: 13.5px; color: var(--a-quiet); }

/* —— 评分情景:所有数字的前提,用主色竖线标出 —— */
.na-aug .a-scen {
  max-width: 740px; margin: 26px 0 4px; padding: 2px 0 2px 18px;
  border-left: 2px solid var(--a-key);
}
.na-aug .a-scen__t { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--a-ink); }
.na-aug .a-scen__l { margin: 0 0 10px; padding: 0; list-style: none; }
.na-aug .a-scen__l li {
  font-size: 15px; line-height: 1.85; color: var(--a-body); padding-left: 16px; position: relative;
}
.na-aug .a-scen__l li::before {
  content: ""; position: absolute; left: 0; top: 0.85em;
  width: 6px; height: 1px; background: var(--a-rule-2);
}
.na-aug .a-scen__w { margin: 0 0 8px; font-size: 15px; line-height: 1.85; color: var(--a-body); }
.na-aug .a-scen__n { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--a-quiet); }

/* —— 观察候选:虚线竖线表示未定,没有名次列、没有购买入口 —— */
.na-aug .a-list--obs { border-top: 0; margin-top: 22px; }
.na-aug .a-obs {
  max-width: 740px; padding: 0 0 4px 18px; margin-bottom: 30px;
  border-left: 1px dashed var(--a-rule-2);
}
.na-aug .a-obs__name {
  margin: 0 0 2px; font-size: 19px; font-weight: 700; line-height: 1.45; color: var(--a-ink);
}
.na-aug .a-obs__why {
  font-size: 13px; font-weight: 500; color: var(--a-flag);
}
.na-aug .a-obs__why::before { content: "／"; margin-right: 6px; color: var(--a-rule-2); }
.na-aug .a-obs__lead { margin: 0 0 10px; font-size: 14.5px; color: var(--a-quiet); }
.na-aug .a-obs__facts { margin: 0 0 12px; padding: 0; list-style: none; }
.na-aug .a-obs__facts li {
  position: relative; padding: 8px 0 8px 16px; font-size: 15.5px; line-height: 1.85;
  color: var(--a-body); border-top: 1px dotted var(--a-rule);
}
.na-aug .a-obs__facts li:first-child { border-top: 0; }
.na-aug .a-obs__facts li::before {
  content: ""; position: absolute; left: 0; top: 1.55em;
  width: 6px; height: 1px; background: var(--a-rule-2);
}
.na-aug .a-obs__note { margin: 0; font-size: 15px; line-height: 1.85; color: var(--a-warn); }

/* —— 优惠入口说明:紧挨按钮 —— */
.na-aug .a-offer {
  max-width: 640px; margin: 9px 0 0; font-size: 13.5px; line-height: 1.75; color: var(--a-quiet);
}

/* —— 总入口页条目的补充行 —— */
.na-aug .a-board__tag { font-size: 13.5px; font-weight: 500; color: var(--a-quiet); }
.na-aug .a-board__tag::before { content: "／"; margin-right: 6px; color: var(--a-rule-2); }
.na-aug .a-board__price { margin: 0 0 8px; font-size: 15px; line-height: 1.8; color: var(--a-ink); }
.na-aug .a-board__per { display: block; font-size: 13.5px; color: var(--a-quiet); }
.na-aug .a-board__fit,
.na-aug .a-board__lim { margin: 6px 0 0; font-size: 15px; line-height: 1.85; }
.na-aug .a-board__fit { color: var(--a-body); }
.na-aug .a-board__lim { color: var(--a-warn); }
.na-aug .a-board__fit b,
.na-aug .a-board__lim b { font-weight: 600; color: var(--a-quiet); }
.na-aug .a-board__band {
  display: block; margin-bottom: 4px; font-family: var(--font-num);
  font-size: 14.5px; font-weight: 600; color: var(--a-ink);
}

/* —— 断点 —— */
@media (max-width: 900px) {
  .na-aug .a-page { padding: 0 28px; }
  .na-aug .a-h1 { font-size: 33px; }
}

@media (max-width: 720px) {
  .na-aug { font-size: 16px; }
  .na-aug .a-page { padding: 0 22px; }
  .na-aug .a-head { padding-top: 26px; }
  .na-aug .a-h1 { font-size: 29px; letter-spacing: -0.2px; }
  .na-aug .a-lead { font-size: 16.5px; }
  .na-aug .a-edge { font-size: 13px; }
  .na-aug .a-sec { margin-top: 56px; }
  .na-aug .a-sec--first { margin-top: 32px; padding-top: 20px; }
  .na-aug .a-sec > h2 { font-size: 22px; }

  .na-aug .a-entry,
  .na-aug .a-board__pick { grid-template-columns: auto 1fr; column-gap: 14px; }
  .na-aug .a-entry__rank { border-right: 0; padding: 26px 0 0; text-align: left; }
  .na-aug .a-entry__body { padding: 22px 0 28px; }
  .na-aug .a-num { font-size: 24px; }
  .na-aug .a-entry__name { font-size: 19px; }

  .na-aug .a-board__no { border-right: 0; padding: 20px 0 0; text-align: left; font-size: 20px; }
  .na-aug .a-board__text { padding: 17px 0 20px; }

  .na-aug .a-fact,
  .na-aug .a-rules .a-fact { grid-template-columns: 1fr; column-gap: 0; padding: 9px 0; }
  .na-aug .a-fact dt { line-height: 1.6; margin-bottom: 1px; }
  .na-aug .a-calc__q { flex-direction: column; gap: 2px; }
  .na-aug .a-calc__row dt { flex-direction: column; gap: 0; }
  .na-aug .a-calc__got { text-align: left; }
  .na-aug .a-obs__name { font-size: 18px; }
  .na-aug .a-more a { gap: 2px 0; }
  .na-aug .a-more .a-more__kind { flex: 0 0 100%; }
}