/* ========== 基础变量 ========== */
:root{
  --nav-h: 60px;
  --radius: 8px;
  --ease: cubic-bezier(.22,.61,.36,1);
    --nav-bg:   rgba(245,249,248,.78);
  --panel-bg: rgba(248,251,250,.97);
  --fg:       #17221f;
  --muted:    #7d8c88;
  --hover:    rgba(37,70,63,.055);
  --line:     rgba(30,62,55,.10);
  --btn-bg:   #24413c;
  --btn-fg:   #f7faf9;
  --btn-bg-h: #31544d;
  --logo:     #1c3a34;
  --dot:      #4a7a70;
  --shadow:   0 1px 2px rgba(28,58,52,.05), 0 8px 24px rgba(28,58,52,.07);
}
/* ========== 深色模式（两套各自适配） ========== */
@media (prefers-color-scheme: dark){
  .theme-b{
    --nav-bg: rgba(14,22,20,.74);  --panel-bg: rgba(18,26,24,.97);
    --fg:#e6efec; --muted:#8a9a95; --hover:rgba(255,255,255,.055);
    --line:rgba(255,255,255,.10);
    --btn-bg:#dfe9e5; --btn-fg:#16211f; --btn-bg-h:#f0f6f4;
    --logo:#eef5f3; --dot:#7fb3a7;
    --shadow:0 8px 24px rgba(0,0,0,.5);
  }
}

/* ========== 导航骨架（两套共用，改配色不影响这里） ========== */
*{ box-sizing: border-box; }
body{ margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
      "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      -webkit-font-smoothing: antialiased; }

.head{
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 28px;
  height: var(--nav-h);
  padding: 0 clamp(16px, 4vw, 40px);
  background: var(--nav-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.head.is-scrolled{ box-shadow: var(--shadow); }

/* 不支持毛玻璃时降级为实色 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
  .head{ background: var(--panel-bg); }
}

/* ---- Logo：站点名，唯一强调元素 ---- */
.brand{
  flex-shrink: 0; position: relative;
  display: inline-flex; align-items: center;
  font-size: 17px; font-weight: 600; letter-spacing: .14em;
  color: var(--logo); text-decoration: none;
}
.brand::before{
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--dot); margin-right: 10px;
  transition: transform .35s var(--ease);
}
.brand:hover::before{ transform: scale(1.6); }

/* ---- 菜单 ---- */
.li1{
  display: flex; align-items: center; gap: 2px;
  margin: 0 0 0 auto; padding: 0; list-style: none;
}
.li1 a{
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 13px;
  border-radius: var(--radius);
  font-size: 14px; font-weight: 450; letter-spacing: .01em;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.li1 a:hover{ color: var(--fg); background: var(--hover); }
.li1 a:focus-visible{ outline: 2px solid var(--fg); outline-offset: 2px; }

/* 最后一项自动渲染为实心按钮 */
.li1 li:last-child a{
  margin-left: 12px; padding: 0 16px;
  color: var(--btn-fg); background: var(--btn-bg); font-weight: 500;
}
.li1 li:last-child a:hover{ background: var(--btn-bg-h); color: var(--btn-fg); }

/* ---- 汉堡按钮 ---- */
.nav-btn{
  display: none; margin-left: auto;
  width: 36px; height: 36px; place-content: center; gap: 5px;
  border-radius: 9px; cursor: pointer;
  transition: background-color .2s var(--ease);
}
.nav-btn:hover{ background: var(--hover); }
.nav-btn span{
  display: block; width: 18px; height: 1.5px; border-radius: 2px;
  background: var(--fg);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle:checked ~ .nav-btn span:nth-child(1){ transform: translateY(6.5px)  rotate(45deg); }
.nav-toggle:checked ~ .nav-btn span:nth-child(2){ opacity: 0; }
.nav-toggle:checked ~ .nav-btn span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* ---- 移动端 ---- */
@media (max-width: 768px){
  .head{ gap: 12px; }
  .nav-btn{ display: grid; }
  .li1{
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: 0 12px;
    background: var(--panel-bg);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height .34s var(--ease), opacity .24s var(--ease),
                visibility .34s var(--ease), padding .34s var(--ease);
  }
  .nav-toggle:checked ~ .li1{
    max-height: 70vh; opacity: 1; visibility: visible;
    padding: 8px 12px 16px; box-shadow: var(--shadow);
  }
  .li1 a{ height: 46px; padding: 0 12px; font-size: 15px; border-radius: 9px; }
  .li1 li:last-child a{ margin: 8px 0 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}