:root{
    --zn-bg: #f6fff7;
    --zn-card: #ffffff;
    --zn-border: #d7efe0;
    --zn-green: #2ea44f;
    --zn-green-2:#1f8a3f;
    --zn-text: #12301b;
    --zn-muted:#4b6b56;
  }

  /* 通用容器：不依赖 Bootstrap */
  .zn-nav-wrap{
    background: var(--zn-bg);
    border-bottom: 1px solid var(--zn-border);
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  }
  .zn-nav{
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
  }

  .zn-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--zn-card);
    border: 1px solid var(--zn-border);
    border-radius: 999px;
    color: var(--zn-muted);
    font-size: 14px;
    line-height: 1;
    user-select: none;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
  }
  .zn-dot{
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--zn-green);
    box-shadow: 0 0 0 3px rgba(46,164,79,.12);
  }

  .zn-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--zn-card);
    border: 1px solid var(--zn-border);
    border-radius: 12px;
    color: var(--zn-text);
    text-decoration: none;
    font-size: 16px;          /* 文字更大更清晰 */
    line-height: 1.2;
    box-shadow: 0 1px 0 rgba(0,0,0,.02);
    transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
    white-space: nowrap;
  }
  .zn-link:hover{
    border-color: rgba(46,164,79,.55);
    box-shadow: 0 2px 10px rgba(46,164,79,.10);
    transform: translateY(-1px);
  }
  .zn-link strong{
    color: var(--zn-green-2);
    font-weight: 700;
  }
  .zn-link .zn-domain{
    font-size: 13px;
    color: var(--zn-muted);
  }

  /* 顶部：主站链接更突出 */
  .zn-top .zn-link{
    border-left: 4px solid rgba(46,164,79,.60);
  }

  /* 底部：区块样式 */
  .zn-footer-wrap{
    background: #f3fff5;
    border-top: 1px solid var(--zn-border);
    margin-top: 18px;
  }
  .zn-footer{
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 12px 10px;
  }
  .zn-footer-title{
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
  }
  .zn-footer small{
    color: var(--zn-muted);
    font-size: 13px;
  }
  .zn-footer-links{
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
  }

/* 手机端更舒服 */
@media (max-width: 520px){
  .zn-link{
    font-size: 15px;
    padding: 10px 12px;
  }

  .zn-link .zn-domain{
    display: inline;        /* 确保显示 */
    font-size: 12px;        /* 更小 */
    opacity: 0.7;           /* 更淡 */
  }
}


/* ============================================================
   Footer：分组布局（竖向一组一行）
   说明：颜色“严格按 HTML 从上到下”逐渐变淡
   目标：不改 HTML，只靠 CSS 让视觉层级更有秩序
============================================================ */

/* 把 footer 变成“竖向分组”，每组内部再 flex */
.zn-footer-groups{
  display:flex;
  flex-direction:column;
  gap:12px;              /* 组与组之间的间距：统一且稳定 */
}

/* 每一组内部：按钮自动换行、居中 */
.zn-tier{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 12px;          /* 行间距 + 列间距 */
  width: 100%;
  box-sizing: border-box;

  /* 组级变量（默认值） */
  --zn-tier-bg: var(--zn-card);
  --zn-tier-border: rgba(46,164,79,.45);
  --zn-tier-strong: rgba(31,138,63,.92);
  --zn-tier-domain: rgba(75,107,86,.85);
  --zn-tier-opacity: 1;
  --zn-tier-border-style: solid;
  --zn-tier-border-width: 4px;
}

/* 每组的“导航条”（整行大条）：真正 100% 宽 */
.zn-tier-head{
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 18px;
}

/* 统一按钮节奏 */
.zn-tier .zn-link{
  min-height:20px;
  align-items:center;

  /* 按组变量渲染 */
  background: var(--zn-tier-bg);
  border-left: var(--zn-tier-border-width) var(--zn-tier-border-style) var(--zn-tier-border);
  opacity: var(--zn-tier-opacity);
}

.zn-tier .zn-link strong{
  color: var(--zn-tier-strong);
}

.zn-tier .zn-link .zn-domain{
  color: var(--zn-tier-domain);
  opacity: 1; /* 由变量控制，不叠加淡化 */
}

/* ============================================================
   Footer：严格按 HTML 顺序（从上到下）逐渐变淡
   你的当前 footer 顺序一共 7 组：1..7
============================================================ */

/* 1）最上：最醒目 */
.zn-footer-groups > .zn-tier:nth-of-type(1){
  --zn-tier-bg: #eaffef;
  --zn-tier-border: rgba(46,164,79,.70);
  --zn-tier-border-width: 6px;
  --zn-tier-strong: rgba(31,138,63,.98);
  --zn-tier-domain: rgba(75,107,86,.92);
  --zn-tier-opacity: 1;
}

/* 2）略淡 */
.zn-footer-groups > .zn-tier:nth-of-type(2){
  --zn-tier-bg: #f1fff4;
  --zn-tier-border: rgba(46,164,79,.55);
  --zn-tier-border-width: 5px;
  --zn-tier-strong: rgba(31,138,63,.90);
  --zn-tier-domain: rgba(75,107,86,.86);
  --zn-tier-opacity: .92;
}

/* 3）再淡 */
.zn-footer-groups > .zn-tier:nth-of-type(3){
  --zn-tier-bg: #f6fff8;
  --zn-tier-border: rgba(46,164,79,.42);
  --zn-tier-border-width: 4px;
  --zn-tier-strong: rgba(31,138,63,.82);
  --zn-tier-domain: rgba(75,107,86,.80);
  --zn-tier-opacity: .85;
}

/* 4）中等偏淡 */
.zn-footer-groups > .zn-tier:nth-of-type(4){
  --zn-tier-bg: #f9fffb;
  --zn-tier-border: rgba(46,164,79,.32);
  --zn-tier-border-width: 4px;
  --zn-tier-strong: rgba(31,138,63,.74);
  --zn-tier-domain: rgba(75,107,86,.74);
  --zn-tier-opacity: .78;
}

/* 5）更淡 */
.zn-footer-groups > .zn-tier:nth-of-type(5){
  --zn-tier-bg: #fbfffd;
  --zn-tier-border: rgba(46,164,79,.25);
  --zn-tier-border-width: 3px;
  --zn-tier-strong: rgba(31,138,63,.66);
  --zn-tier-domain: rgba(75,107,86,.68);
  --zn-tier-opacity: .72;
}

/* 6）接近最淡 */
.zn-footer-groups > .zn-tier:nth-of-type(6){
  --zn-tier-bg: #fcfffe;
  --zn-tier-border: rgba(46,164,79,.20);
  --zn-tier-border-width: 3px;
  --zn-tier-strong: rgba(31,138,63,.58);
  --zn-tier-domain: rgba(75,107,86,.62);
  --zn-tier-opacity: .66;
}

/* 7）最下：最淡最细（虚线更“外围”） */
.zn-footer-groups > .zn-tier:nth-of-type(7){
  --zn-tier-bg: #ffffff;
  --zn-tier-border: rgba(46,164,79,.18);
  --zn-tier-border-style: dashed;
  --zn-tier-border-width: 3px;
  --zn-tier-strong: rgba(31,138,63,.52);
  --zn-tier-domain: rgba(75,107,86,.56);
  --zn-tier-opacity: .60;
}

/* 悬停：统一提亮（不改变层级关系） */
.zn-footer .zn-link:hover{
  opacity: 1;
}

/* 导航条里的域名：稍微清楚一点（避免标题条过淡） */
.zn-tier-head .zn-domain{
  opacity: .9 !important;
}

/* 手机端：保持舒适 */
@media (max-width:520px){
  .zn-footer-groups{ gap:16px; }
  .zn-tier{ gap:10px 10px; }
  .zn-tier-head{ padding:12px 14px; }
}