/* 中转站（/navigate，中转域名根）。模板 web/templates/layouts/cyber-go-home-nav.tpl。
 * 设计稿（Figma JyNjksz6eIFQt8nEMwVJgM，2026-10-23 版）：H5「中转页」405:18068：750 宽 @2x，1 设计 px = 0.5 css px（视口 375）。
 * 本文件前半写一套 375 宽的 H5 样式（基础样式，<=768 直接用）；PC（>=769）在文件末尾按黄果中转（huangguoai.ai）的口径
 *   收成固定 520px 居中单列、24px 列内边距（内容宽 472），组件保持手机级紧凑尺寸，不随视口缩放（1440 与 1920 完全一致）。
 * 下面注释里的「稿」数值均为 750 设计 px，/2 即 css px。 */
:root {
  --nv-bg: #151522;
  --nv-card: #191925;
  --nv-line: #30303b;
  --nv-blue: #5c8dff;
  --nv-text: #fff;
  --nv-sub: #999;
  --nv-muted: #666;
  --nv-foot: #929aa7;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--nv-bg); }
body.nv {
  margin: 0;
  min-width: 320px;
  background: var(--nv-bg);
  color: var(--nv-text);
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.nv h1, .nv h2, .nv h3, .nv h4, .nv p { margin: 0; font: inherit; }
:where(.nv) a { color: inherit; text-decoration: none; }
:where(.nv) button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
.nv-ic { display: block; flex: none; }
/* PC 与 H5 现在是同一套稿，PC 也显示 H5 文案（稿 486:18028「蓝果短剧 官方最新地址」、线路描述等同 H5）。 */
.nv-pc-only { display: none; }

/* ---------- Hero（稿 750x647）----------
   背景 image1 → rect x=-831 y=0 2476×687，取 hero 750×647，0.6 透明叠 #151522，再叠渐变（#000 59% → #07070E 85%，整体 90%）
   → nav-hero-m.webp（750×647 @2x）。中转页专用，不引用回家的路共用的 hw-hero-m.webp。 */
.nv-hero {
  position: relative;
  height: 323.5px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.nv-hero__bg {
  position: absolute;
  inset: 0;
  background: #0a0f1d url(/static/web/images/ll/nav-hero-m.webp?v=20261023a) center top / cover no-repeat;
}
.nv-hero__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 0 27.5px; }
/* 稿 405:18433/18434：圆点 26、间距 4，「官方最新地址」32px Medium #5C8DFF、行高 45。 */
/* 选择器带 .nv 前缀：.nv p { font: inherit } 特异性更高，单类名会被它盖掉（之前线上 14px/400 的原因）。 */
.nv .nv-eyebrow { display: inline-flex; align-items: center; gap: 2px; font-size: 16px; line-height: 22.5px; font-weight: 500; color: var(--nv-blue); }
.nv-eyebrow__dot { width: 13px; height: 13px; border-radius: 50%; background: var(--nv-blue); }
/* 稿 405:18436 logo 254x120，距角标 40。 */
.nv-logo { display: block; height: 60px; width: auto; margin-top: 20px; }
/* 稿 405:18437 36px Semibold 行高 39，距 logo 30。 */
.nv .nv-title { margin-top: 15px; font-size: 18px; line-height: 19.5px; font-weight: 600; letter-spacing: 0; }
/* 稿 405:18438 24px 行高 1.6 #999，宽 640，距标题 30。 */
.nv .nv-desc { margin-top: 15px; max-width: 320px; font-size: 12px; line-height: 19.2px; color: var(--nv-sub); }

/* ---------- 通用 ---------- */
.nv-main { margin: 0 16px; }
/* 稿 44px Semibold 行高 66。 */
.nv .nv-sec-title { font-size: 22px; line-height: 33px; font-weight: 600; text-align: center; }

/* ---------- 线路卡（稿 RouteCard 686x421 pad 40/32，区块上下 pad 40，卡间距 24）---------- */
.nv-routes { margin-top: 20px; display: grid; grid-template-columns: 1fr; gap: 12px; }
.nv-route {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 16px 19px;
  background: var(--nv-card);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}
.nv-route__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* 稿 405:18083「线路 01 · 首选线路」30px Semibold #E5E5E5 行高 45。 */
.nv .nv-route__title { font-size: 15px; line-height: 22.5px; font-weight: 600; color: #e5e5e5; }
.nv-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.nv-badge .nv-ic { width: 13px; height: 13px; }
.nv-badge--recommend { background: #352e26; border-color: #866b28; color: #ffc62a; }
.nv-badge--stable { background: #1e2d2e; border-color: #2e5b45; color: #4ade80; }
.nv-badge--backup { background: #20202b; border-color: #42424a; color: #888; }
.nv .nv-route__desc { margin-top: 10px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--nv-muted); }
.nv-route__domain {
  margin-top: 16px;
  width: 100%;
  height: 43.5px; /* 稿 620x87 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 1em 0 .9em; /* em 随字号走（PC 放大到 28px 时左右留白同比），原写死 14/12px 稿值 */
  border-radius: 8px;
  background: #20202c;
  border: 1px solid #2a2a35;
  font-size: 14px;
}
/* 稿 vca6l 域名文字（PC 486:18052）28px Semibold #FFFFFF。 */
.nv-route__host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: #fff; }
.nv-route__domain .nv-ic { width: 16px; height: 16px; color: var(--nv-muted); }
/* 稿 486:18061 619x88 满宽胶囊 #5C8DFF，gap 16，图标 28、文字 28px Semibold，投影 0 0 16 #FFC62A@25%。 */
.nv-route__go {
  margin-top: 14px;
  width: 100%;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 22px;
  background: var(--nv-blue);
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  box-shadow: 0 0 8px rgba(255, 198, 42, .25);
  transition: filter .2s;
}
.nv-route__go .nv-ic { width: 14px; height: 14px; }
.nv-route__go:hover, .nv-hot__btn:hover { filter: brightness(1.08); }

/* ---------- 热门内容 ----------
   按钮个数/文字/图标/链接全部来自后台「中转页热门内容」，这里只管样式。
   稿 HotContentSection pad 40/32；标题 44px 行高 66；标题下 56；NavBtn 332x100 #5C8DFF 描边 #FFF@15% 2、
   投影 0 8 12 #000@25%，图标 40、图标与文字 20，文字 30px Semibold；两列间距 22。 */
.nv-hot { margin-top: 40px; }
.nv-hot__grid { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 11px; }
.nv-hot__btn {
  min-width: 0;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: 14px;
  background: var(--nv-blue);
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 4px 6px rgba(0, 0, 0, .25);
  font-size: 15px;
  line-height: 22.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: filter .2s;
}
.nv-hot__btn .nv-ic { width: 20px; height: 20px; stroke-width: 1.8; flex-shrink: 0; }
/* 长名称（后台允许 10 字）在窄格里省略号截断，完整文字在 <a title>；图标不收缩。 */
.nv-hot__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 入口卡（稿 EntryCard 330x464 pad 48/24/40/24 gap 24，投影 0 8 20 #000@30%）---------- */
.nv-entries { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nv-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 12px 20px;
  background: var(--nv-card);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
}
.nv-entry__icon { width: 60px; height: 60px; border-radius: 50%; background: #20253b; color: var(--nv-blue); display: flex; align-items: center; justify-content: center; }
.nv-entry__icon .nv-ic { width: 24px; height: 24px; }
/* 稿 405:18231 30px Semibold 行高 45。 */
.nv .nv-entry__title { margin-top: 12px; font-size: 15px; line-height: 22.5px; font-weight: 600; }
.nv .nv-entry__desc { margin-top: 4px; font-size: 12px; line-height: 18px; min-height: 36px; color: var(--nv-muted); }
/* 稿 405:18234 280x80 胶囊，描边 #5C8DFF 2，文字 26px Semibold #5C8DFF。 */
.nv-entry__btn {
  margin-top: 12px;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nv-blue);
  border-radius: 20px;
  color: var(--nv-blue) !important;
  font-size: 13px;
  line-height: 19.5px;
  font-weight: 600;
  transition: background .2s;
}
.nv-entry__btn:hover { background: rgba(92, 141, 255, .1); }

/* ---------- FAQ（稿 FaqSection pad 0/32/40/32；FaqItem 686 宽，问题行 128 高 pad 32 gap 24；展开项答案区 pad 24/32/32/120）---------- */
.nv-faq { margin-top: 20px; }
.nv .nv-faq__sub { margin-top: 8px; font-size: 13px; line-height: 19.5px; color: var(--nv-muted); text-align: center; }
.nv-faq__list { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.nv-faq__item { background: var(--nv-card); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, .2); }
.nv-faq__item[open] { background: #212132; border-color: var(--nv-blue); box-shadow: 0 8px 32px rgba(0, 0, 0, .4); }
.nv-faq__q { list-style: none; display: flex; align-items: center; gap: 12px; height: 63.5px; padding: 0 16px; cursor: pointer; } /* 稿 FaqItem 131 = 问题行 128 + 上下描边 */
.nv-faq__q::-webkit-details-marker { display: none; }
.nv-faq__ic { width: 32px; height: 32px; flex: none; border-radius: 8px; background: #272c47; color: var(--nv-blue); display: flex; align-items: center; justify-content: center; }
.nv-faq__ic .nv-ic { width: 16px; height: 16px; }
/* 稿 405:18288 / 405:18306：28px Semibold 行高 39.2；展开项 #FFFFFF，收起项 #E5E5E5。 */
.nv .nv-faq__text { flex: 1; min-width: 0; font-size: 14px; line-height: 19.6px; font-weight: 600; color: #e5e5e5; }
.nv-faq__item[open] .nv-faq__text { color: #fff; }
.nv-faq__chev { color: var(--nv-blue); transition: transform .2s; }
.nv-faq__chev .nv-ic { width: 18px; height: 18px; }
.nv-faq__item[open] .nv-faq__chev { transform: rotate(180deg); }
/* 稿 405:18292 683x286，pad 24/32/32/120，正文 26px 行高 45.5 #999。 */
.nv-faq__a { border-top: 1px solid rgba(255, 255, 255, .04); padding: 12px 16px 16px 60px; }
.nv-faq__a p { font-size: 13px; line-height: 22.75px; color: var(--nv-sub); }

/* ---------- 页脚（稿 484:17704 750x463 #171722 描边 #343038）----------
   logo 169x80 居中、距页脚顶 42；版权与三行地址居中、行高 34 间距 18（标签 24px #929AA7，值 22px Medium #5C8DFF，间距 10）；
   分隔线 #FFF@10% 通栏、距页脚顶 386；底部一行 4 个链接 21px #929AA7（隐私政策 / 使用协议 / DMCA / 2257），x 26..725 两端对齐。
   链接数据仍是 go_home_nav.go navFooterCols 的三栏（关于 / 政策 / 其他），DOM 不变（golden 测试）：
   这里只把「政策」两条 + 「其他」前两条摊成一行，隐藏栏标题、「关于」栏和「其他」第三条（回家的路）。 */
.nv-footer { position: relative; margin-top: 16px; background: #171722; border-top: 1px solid #343038; }
.nv-footer__in { padding: 20px 12.5px 0; display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.nv-footer__brand { display: flex; flex-direction: column; align-items: center; }
.nv-footer__logo { display: block; height: 40px; width: auto; }
.nv .nv-footer__copy { margin-top: 16px; font-size: 12px; line-height: 17px; color: var(--nv-foot); }
.nv .nv-footer__addr { margin-top: 9px; height: 17px; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 17px; color: var(--nv-foot); }
.nv-footer__addr a { margin-left: 5px; line-height: 17px; font-size: 11px; font-weight: 500; color: var(--nv-blue); }
.nv-footer__addr a:hover, .nv-footer__cols a:hover { color: #fff; }
.nv-footer__cols {
  margin: 21px -12.5px 0;
  padding: 11px 12.5px 12px 13px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  justify-content: space-between;
}
.nv-footer__col { display: contents; }
.nv-footer__col:first-child, .nv-footer__head, .nv-footer__col a:nth-of-type(n+3) { display: none; }
/* min-width 31.5 = 稿里 DMCA / 2257 文本框宽（63/2），保证四个链接 x 与稿一致（13 / 122.5 / 232 / 331）。 */
.nv-footer__cols a { min-width: 31.5px; text-align: left; font-size: 10.5px; line-height: 14.5px; color: var(--nv-foot); white-space: nowrap; text-transform: uppercase; }


/* ---------- Toast ---------- */
.nv-toast {
  position: fixed;
  left: 50%;
  bottom: 80px;
  z-index: 20;
  transform: translate(-50%, 20px);
  padding: 10px 18px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .82);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.nv-toast.is-show { opacity: 1; transform: translate(-50%, 0); }


/* ---------- PC（>=769）：黄果中转口径，固定 520 居中单列 ----------
   769~1023 与 >=1024 同一套：列宽恒 520、内容宽 472（.nv-main 左右 24），不做任何随视口缩放（无内联脚本、无比例换算）。
   列外 #151522（html 底色），列内 hero 底/正文/页脚统一 #121219（页脚无描边），列投影保留。
   组件按 H5 级尺寸放大到 520 栏：立即使用 430x48、域名框 430x44、热门按钮高 56 一行排（2 个各 230、4 个各 109，超过 4 个自动换行）、
   入口卡一行 4 个（约 109x194）、hero 373、FAQ 收起项 80。H5（<=768）不受影响。 */
@media (min-width: 769px) {
  body.nv {
    width: 520px;
    max-width: 100%;
    margin: 0 auto;
    background: #121219;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
  }
  .nv-hero__bg { background-color: #121219; }
  .nv-footer { background: #121219; border-top-color: transparent; }

  .nv-hero { height: 373px; }
  .nv-hero__in { padding: 0 40px; }
  .nv-logo { height: 72px; margin-top: 24px; }
  .nv .nv-title { margin-top: 18px; font-size: 26px; line-height: 34px; }
  .nv .nv-desc { margin-top: 16px; max-width: 440px; font-size: 14px; line-height: 22px; }

  .nv-main { margin: 0 24px; }
  .nv .nv-sec-title { font-size: 26px; line-height: 36px; }

  .nv-routes { margin-top: 40px; gap: 16px; }
  .nv-route { padding: 24px 20px; border-radius: 14px; box-shadow: 0 4px 24px rgba(0, 0, 0, .4); }
  .nv .nv-route__title { font-size: 16px; line-height: 24px; }
  .nv-badge { height: 26px; padding: 0 12px; font-size: 12px; }
  .nv .nv-route__desc { margin-top: 12px; font-size: 14px; line-height: 22px; }
  .nv-route__domain { margin-top: 16px; height: 44px; padding: 0 16px; font-size: 14px; }
  .nv-route__host { font-size: 15px; }
  .nv-route__go { margin-top: 16px; height: 48px; border-radius: 24px; font-size: 15px; line-height: 22.5px; box-shadow: 0 0 16px rgba(255, 198, 42, .25); }
  .nv-route__go .nv-ic { width: 15px; height: 15px; }

  .nv-hot { margin-top: 32px; }
  .nv-hot__grid { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
  .nv-hot__btn { flex: 1 1 0; min-width: calc((100% - 36px) / 4); height: 56px; padding: 0 8px; gap: 6px; font-size: 14px; line-height: normal; }
  .nv-hot__btn .nv-ic { width: 18px; height: 18px; }

  .nv-entries { margin-top: 32px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .nv-entry { padding: 18px 8px 16px; border-radius: 14px; box-shadow: 0 4px 20px rgba(0, 0, 0, .3); }
  .nv-entry__icon { width: 48px; height: 48px; }
  .nv-entry__icon .nv-ic { width: 22px; height: 22px; }
  .nv .nv-entry__title { margin-top: 10px; font-size: 13px; line-height: 20px; white-space: nowrap; }
  .nv .nv-entry__desc { margin-top: 4px; font-size: 11px; line-height: 17px; min-height: 34px; }
  .nv-entry__btn { margin-top: 10px; height: 32px; border-radius: 16px; padding: 0 4px; font-size: 12px; line-height: 18px; white-space: nowrap; }

  .nv-faq { margin-top: 40px; }
  .nv .nv-faq__sub { margin-top: 10px; font-size: 13px; line-height: 20px; }
  .nv-faq__list { margin-top: 20px; gap: 12px; }
  .nv-faq__q { height: auto; min-height: 78px; padding: 0 18px; }
  .nv .nv-faq__text { font-size: 15px; line-height: 23px; }
  .nv-faq__a { padding: 12px 18px 18px 62px; }
  .nv-faq__a p { font-size: 13px; line-height: 23px; }

  .nv-footer { margin-top: 48px; }
  .nv-footer__in { padding: 32px 24px 0; }
  .nv-footer__logo { height: 48px; }
  .nv .nv-footer__copy { margin-top: 14px; font-size: 12px; line-height: 21.6px; }
  .nv .nv-footer__addr { margin-top: 8px; height: 18px; font-size: 12px; line-height: 18px; }
  .nv-footer__addr a { font-size: 12px; line-height: 18px; }
  .nv-footer__cols { margin: 20px -24px 0; padding: 16px 24px 48px; }
  .nv-footer__cols a { font-size: 12px; line-height: 18px; }
  .nv-toast { bottom: 48px; padding: 12px 24px; font-size: 14px; }
}