/* ==========================================================================
   首页 · 清新导航站
   结构严格对应画布节点树：
   3:1 首页容器
   ├─ 3:2 Hero 区（渐变）
   │  ├─ 3:3  导航栏
   │  ├─ 3:20 主标题行（一言 + 骰子）
   │  ├─ 3:23 副标题
   │  ├─ 3:24 搜索框
   │  └─ 3:31 热词行
   ├─ 3:41 主内容区
   │  ├─ 3:42 分组侧栏（含 3:221 快速入口）
   │  └─ 3:72 内容列
   │     ├─ 3:73 区块 AI创作
   │     ├─ 3:165 区块 AI工具
   │     └─ 3:291 见月笔记区块
   └─ 3:202 页脚
   ========================================================================== */

/* ---------- 顶部导航条（sticky 吸顶，2026-10-06 参照 top.06ah.cn） ---------- */

.topbar {
  /* 通栏 sticky：纯 CSS，无滚动 JS。
     ⛔ 必须与 .hero 平级（body 直接层级）——sticky 的作用范围是最近的
        块级祖先，放进 .hero 里滚出 hero 就会跟着脱离视口。
     ⛔ 用 sticky 而不是 fixed：sticky 初始仍在文档流里占位，
        滚动到顶后才吸住，不遮挡内容、无需给下面补 padding-top。 */
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 8px var(--gutter);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  /* 滚动边界衔接：细描边把吸顶条与穿过的正文分开（参照站同款常驻底边框） */
  border-bottom: 1px solid var(--glass-brd);
}

/* ---------- Hero ---------- */

.hero {
  background: var(--hero-grad);
  /* 原 16px：navbar 还在 hero 里时的上边距；nav 移入 .topbar 后
     改 24px，让一言与导航条的间距保持原样（原来靠 flex gap: 24px） */
  padding: 24px var(--gutter) 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid transparent;
  transition: background 0.25s;
}

/* ⛔ body.dark .hero 规则已删除（2026-10-07 主题实装）：
   深色 hero 由 --hero-grad 令牌在 html[data-theme="dark"] 下统一提供，
   不再依赖 body.dark 布尔类（那正是榜页深色不生效的根因之一）。 */

/* 导航栏 */

.navbar {
  width: 100%;
  max-width: var(--maxw);
  /* .topbar 通栏内水平居中（原在 .hero 里由 flex align-items:center 居中） */
  margin-inline: auto;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.navbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.navbar__logo {
  width: 34px;
  height: 34px;
  /* 2026-10-07：品牌位换「月牙包 JY」新标识（logo-mark 系列）。
     logo 自带蓝渐变，故去掉原方块底色与 currentColor 字形；
     深色模式切白色版 —— 蓝 logo 压在深底上偏暗。 */
  background: url("/brand/logo-mark.png") center / contain no-repeat;
  flex: none;
}
html[data-theme="dark"] .navbar__logo,
body.dark .navbar__logo {
  background-image: url("/brand/logo-mark-dark.png");
}

.navbar__name {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-1);
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.navbar__link {
  font-size: 15px;
  color: var(--ink-3);
  transition: color 0.18s;
}

.navbar__link:hover {
  color: var(--brand);
}

.navbar__link.is-active {
  font-weight: 500;
  color: var(--brand);
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  display: grid;
  place-items: center;
  transition: border-color 0.18s;
}

.icon-toggle:hover {
  border-color: var(--brand);
}

.btn-submit {
  height: 34px;
  padding: 0 18px;
  border-radius: 999px;
  /* 2026-10-07：实心绿"太深" → 清透浅青（与 .search__btn 同一配方，令牌派生） */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand) 30%, transparent),
    color-mix(in srgb, var(--brand) 15%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  color: var(--brand-ink);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: background .18s, border-color .18s, transform .18s;
}

.btn-submit:hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand) 40%, transparent),
    color-mix(in srgb, var(--brand) 22%, transparent));
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  transform: translateY(-1px);
}

.btn-submit:active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand) 20%, transparent),
    color-mix(in srgb, var(--brand) 10%, transparent));
}

/* ⛔ 一言行样式（.quote-row / .quote-text / .quote-text.is-swapping /
   .quote-roll / .quote-roll:hover）与 .hero__sub 已于 2026-10-07 随标记一起删除。
   保留无用规则会让人误以为页面上还有那一块 —— 本项目已多次因"注释宣称有、实际没有"
   而误判（如 api.go 里那套从未生效的 SSR 占位符注入）。 */

/* 搜索框 */

.search {
  width: min(680px, 100%);
  height: 62px;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: 31px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 24px;
  padding-right: 10px;
  box-shadow: var(--shadow-search);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search:focus-within {
  border-color: var(--brand);
}

.search__icon {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--brand);
}

.search__input {
  flex: 1;
  font-size: 15px;
  min-width: 0;
}

.search__input::placeholder {
  color: var(--ink-4);
}

.search__btn {
  height: 44px;
  padding: 0 30px;
  border-radius: 22px;
  /* 2026-10-07：实心品牌绿"太深"（用户反馈），改为清透浅青。
     颜色全部由令牌派生（color-mix）→ 6 套主题自动适配。 */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand) 30%, transparent),
    color-mix(in srgb, var(--brand) 15%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  color: var(--brand-ink);
  font-size: 15px;
  font-weight: 500;
  flex: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: background 0.18s, border-color 0.18s;
}

.search__btn:hover {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand) 40%, transparent),
    color-mix(in srgb, var(--brand) 22%, transparent));
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
}

.search__btn:active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand) 20%, transparent),
    color-mix(in srgb, var(--brand) 10%, transparent));
}

/* 热词 */

.hot-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.hot-row__label {
  font-size: 13px;
  color: var(--ink-4);
}

.hot-chip {
  height: 32px;
  padding: 0 16px;
  border-radius: 16px;
  background: var(--brand-tint-2);
  color: var(--brand);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  transition: background 0.18s;
}

.hot-chip:hover {
  background: var(--brand-tint);
}

.hot-chip.is-en {
  font-family: var(--font-en);
  font-weight: 500;
}

/* ---------- 主内容区 ---------- */

.main {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  padding: 32px var(--gutter) 64px;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* 侧栏 */

.sidebar {
  width: 216px;
  flex: none;
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  /* 避让 .topbar 吸顶条（65px 高 + 20px 呼吸）。若仍 top:20px，
     锚点跳转把 sidebar 钉到 20px 会滑进吸顶条下方被遮挡。 */
  top: 85px;
}

.sidebar__title {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-4);
  padding: 0 12px 10px;
}

.cat {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.16s;
}

.cat:hover {
  background: var(--brand-tint-2);
}

.cat.is-active {
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 500;
}

.cat__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.cat__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat__count {
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--ink-4);
  flex: none;
}

.cat.is-active .cat__count {
  color: var(--on-brand);
}

/* 侧栏快速入口 */

.side-quick {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border-1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.side-quick__title {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-4);
  padding: 0 12px;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink-2);
  transition: background 0.16s;
  /* ⛔ ⛔ 为什么补这两行（2026-10-05）：
     flex 容器默认 min-width:auto，子项会把容器撑开。
     原先依赖「文字慢慢撑开」，一旦侧栏变窄或文字变长，
     标题就会被挤成每行一个字的竖排（用户截图中已出现）。
     解法：允许收缩 + 单行省略，宽度紧时不会破版。 */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-link span,
.side-link > :not(svg) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-link:hover {
  background: var(--brand-tint-2);
  color: var(--brand);
}

.side-link svg {
  flex: none;
  color: var(--brand);
}

/* 内容列 */

.content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);
}

/* 分区块 */

.block {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.block__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.block__head-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.block__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.block__title {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-1);
  margin: 0;
}

.block__count {
  font-size: 13px;
  color: var(--ink-4);
}

.block__more {
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: var(--brand-tint-2);
  color: var(--brand);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  flex: none;
  transition: background 0.18s;
}

.block__more:hover {
  background: var(--brand-tint);
}

/* 二级分类 chips —— 竞品常见做法：块内就地筛，不跳页 */

.chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: -4px;
}

.chip {
  height: 30px;
  padding: 0 14px;
  border-radius: 15px;
  font-size: 13px;
  color: var(--ink-3);
  border: 1px solid var(--border-2);
  display: inline-flex;
  align-items: center;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}

/* ⛔ 文字色一律 --brand-ink，不用 --brand ——
   --brand 在本项目是**填充/图形**色，当文字色在浅色主题下只有 2.62:1（AA 要 4.5:1）。
   border-color 用 --brand 是对的（边框属于图形）。
   ⚠️ 本组同时服务首页分区 chips 与搜索页结果列顶部的 .catbar（两页都加载本文件）。 */
.chip:hover {
  color: var(--brand-ink);
  border-color: var(--brand);
}

.chip.is-on {
  background: var(--brand-tint);
  color: var(--brand-ink);
  border-color: transparent;
  font-weight: 500;
}

.block__empty {
  padding: 20px 0;
  font-size: 13px;
  color: var(--ink-4);
  margin: 0;
}

/* 站点矩阵 —— 卡片 276 + gap 16，整除设计稿 1152 */
.site-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* ⛔ 所有行等高：卡片墙必须整齐，不能一行高一行矮。
     只用 grid 默认的 stretch 只能保证「同一行内」等高，
     跨行仍会各按各行最高内容算 —— 内容多的卡片所在行会明显高一截。
     ⛔ 必须给下限（minmax 的 105px）而不是纯 1fr：
     1fr 只在**单个 grid 容器内**生效，而每个分组是独立容器 ——
     描述天然短的分组（如「学习资源」）会算出 86px，与其他分组的 105px 对不齐。
     ⛔⛔ 105px 的来历（2026-10-07 重算）：
     原值是 133px，按「图标 44 + 站名 + 2 行描述 + **标签行**」实测出来的。
     卡片标签行已按反馈移除 → 每张卡底部空出 28px（133 − 105），
     叠加 16px 行距后，两行文字之间就出现一条 44px 的空白带。
     现在按**无标签**的内容重算：上 padding 18 + 内容 67 + 下 padding 18 + 上下边框 2 = 105px。
     （67 = 站名 24 + gap 5 + 描述 2 行 38；描述由 -webkit-line-clamp 锁 2 行，所以是定值。）
     ⚠️ 以后再动卡片内容（增删一行元素），这个下限必须跟着重算 —— 它是实测硬编码值，不会自适应。 */
  grid-auto-rows: minmax(105px, 1fr);
  gap: var(--gap-card);
}

.site {
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  padding: 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  /* 跟随网格行高 → 所有卡片外框完全一致 */
  height: 100%;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.site:hover {
  transform: translateY(-2px);
  border-color: var(--border-2);
  box-shadow: 0 8px 22px -6px rgba(46, 128, 115, 0.12);
}

.site__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  flex: none;
  display: grid;
  place-items: center;
}

.site__body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.site__name {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site__desc {
  font-size: 12px;
  line-height: 19px;
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* ⛔ 描述区固定占满 2 行高度：
     只有 1 行描述（或压根没描述）的卡片，内容区不会比 2 行的矮一截，
     配合 .site-grid 的 grid-auto-rows:1fr 才能做到所有卡片完全等高。 */
  min-height: 38px;
}

/* ---------- 见月笔记 ---------- */

.notes__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notes__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--note-pink);
  flex: none;
}

.notes__title {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-1);
  margin: 0;
}

.notes__sub {
  font-size: 13px;
  color: var(--ink-4);
  flex: 1;
}

.notes__all {
  height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: var(--note-pink-tint);
  color: var(--note-pink);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  flex: none;
  transition: filter 0.18s;
}

.notes__all:hover {
  filter: brightness(0.96);
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-card);
}

.note {
  height: 312px;
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s, box-shadow 0.18s;
}

.note:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -6px rgba(46, 128, 115, 0.12);
}

.note__cover {
  height: 150px;
  flex: none;
  position: relative;
  overflow: hidden;
}

.note__body {
  flex: 1;
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.note__cat {
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  flex: none;
}

.note__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--ink-1);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note__desc {
  font-size: 12px;
  line-height: 17px;
  color: var(--ink-3);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-4);
}

.note__meta span:first-child {
  font-family: var(--font-en);
}

/* ---------- 页脚 ---------- */

.footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border-1);
  padding: 24px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer__links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer__link {
  font-size: 13px;
  color: var(--ink-3);
  transition: color 0.18s;
}

.footer__link:hover {
  color: var(--brand);
}

.footer__copy {
  font-size: 13px;
  color: var(--ink-4);
}

/* ==========================================================================
   响应式
   ========================================================================== */

@media (max-width: 1180px) {
  .site-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .notes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .main {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    position: static;
  }
  .side-quick {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .side-quick__title {
    width: 100%;
  }
  .site-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quote-text {
    font-size: 26px;
    text-align: center;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
  }
  .navbar__links {
    display: none;
  }
  .hero {
    padding-bottom: 36px;
  }
  .quote-text {
    font-size: 20px;
  }
  .search {
    height: 54px;
  }
  .site-grid,
  .notes-grid {
    grid-template-columns: 1fr;
  }
  .footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   站点卡片扩展：标签 / 推荐 / 新收录角标
   ========================================================================== */

.st {
  display: inline-block;
  height: 17px;
  padding: 0 6px;
  border-radius: 5px;
  font-size: 10px;
  line-height: 17px;
  font-family: var(--font-cn);
  vertical-align: 1px;
  flex: none;
}
.st--rec { background: var(--warn-tint); color: var(--warn); margin-right: 4px; }
.st--new { background: var(--info-tint); color: var(--info); margin-right: 4px; }

/* ⚠️ .stlist 保留：首页与排行页的**站点标签行**已于 2026-10-07 移除
   （不是所有站点都配了标签，同网格里有的多一行、有的留空白，高矮不齐），
   但 rank.js 仍用它承载「N 次点击」这类榜单指标（`meta`），那个是每张卡都有的，
   不会造成参差。rank.html 也加载本文件，所以规则留在这里。
   .st / .st--rec / .st--new 保留 —— 名字前的「荐 / 新」是行内徽标，仍在使用。 */
.stlist {
  display: flex;
  gap: 5px;
  margin-top: 7px;
  flex-wrap: wrap;
}

.site__name {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

/* 模式提示条 */
.modebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  margin-bottom: 20px;
  background: var(--brand-tint);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  font-size: 13px;
  color: var(--ink-2);
}
.modebar svg { color: var(--brand); flex: none; }
.modebar b { color: var(--brand); font-weight: 600; }
.modebar button {
  margin-left: auto;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 12px;
  color: var(--ink-3);
  border: 1px solid var(--border-2);
  background: var(--bg-card);
  transition: all .16s;
}
.modebar button:hover { border-color: var(--brand); color: var(--brand); }

/* 笔记卡片可点 */
.note { cursor: pointer; }
.note:hover .note__title { color: var(--brand); }

/* 站点卡描述改为两行截断后，整体更整齐 */
.site__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   公告条
   ========================================================================== */

.noticebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--gutter);
  font-size: 13px;
  border-bottom: 1px solid var(--border-1);
}
.noticebar[hidden] { display: none; }
.noticebar.info   { background: var(--info-tint); color: var(--info); }
.noticebar.warn   { background: var(--warn-tint); color: var(--warn); }
.noticebar.urgent { background: var(--danger-tint); color: var(--danger); }
.noticebar span { font-weight: 600; flex: none; }
.noticebar em { font-style: normal; opacity: .8; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noticebar button {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  font-size: 15px; line-height: 1; opacity: .5; transition: opacity .16s;
}
.noticebar button:hover { opacity: 1; }

/* 站点图标撑满容器的公共约定已移入 tokens.css ——
   因为 goto.html / admin.html 都不加载 home.css，规则必须放在所有页面都加载的文件里。 */