/* ==========================================================================
   首页 · 清新导航站
   结构严格对应画布节点树：
   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 页脚
   ========================================================================== */

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

.hero {
  background: linear-gradient(118deg, #eefaF7 0%, #ffffff 55%, #eef5ff 100%);
  padding: 16px 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 {
  background: linear-gradient(118deg, #12211f 0%, #182624 55%, #131f2b 100%);
}

/* 导航栏 */

.navbar {
  width: 100%;
  max-width: var(--maxw);
  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;
  border-radius: 11px;
  background: linear-gradient(135deg, #5ee0c0 0%, #3eb8f0 100%);
  display: grid;
  place-items: center;
  flex: none;
}

.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;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: background 0.18s, transform 0.18s;
}

.btn-submit:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
}

/* 一言行 */

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

.quote-text {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-1);
  letter-spacing: -0.3px;
  transition: opacity 0.2s;
}

.quote-text.is-swapping {
  opacity: 0;
}

.quote-roll {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  display: grid;
  place-items: center;
  flex: none;
  transition: border-color 0.18s, transform 0.3s;
}

.quote-roll:hover {
  border-color: var(--brand);
  transform: rotate(90deg);
}

.hero__sub {
  font-size: 17px;
  color: var(--ink-3);
  margin: 0;
}

/* 搜索框 */

.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;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  flex: none;
  transition: background 0.18s;
}

.search__btn:hover {
  background: var(--brand-dark);
}

/* 热词 */

.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;
  top: 20px;
}

.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: #fff;
  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: #fff;
}

/* 侧栏快速入口 */

.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;
}

.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;
}

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

.chip.is-on {
  background: var(--brand-tint);
  color: var(--brand);
  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));
  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;
  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;
  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;
}

/* ---------- 晚风笔记 ---------- */

.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: #fff3e0; color: #b8860b; margin-right: 4px; }
.st--new { background: #e8f4fe; color: #4ba8f5; margin-right: 4px; }

.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: #eef4fe; color: #2b5c9e; }
.noticebar.warn   { background: #fff6dc; color: #8a5e0e; }
.noticebar.urgent { background: #fdeeed; color: #a83a34; }
.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; }

/* ---------- 自定义站点图标（图片） ----------
   ⛔ 放在 home.css 而不是 tokens.css：前台不加载 admin.css，
   四个渲染点（首页/搜索/中转/推荐）分属不同 CSS 文件，
   但尺寸规则是同一条，写在最先加载的 home.css 里当公共约定。
   object-fit: contain —— 图标是 32×32 归一化过的，
   但站点方块有 28/32/44/56px 几种尺寸，不加会拉伸变形。 */
.siteimg {
  object-fit: contain;
  border-radius: inherit;
  display: block;
  /* ⛔ 不加 width/height 的 CSS 兜底：JS 已经按容器尺寸写了内联值，
     这里再写会覆盖内联值，导致大容器里图标偏小。 */
}