/* 2026-11 改版：A「窑火温润」配色 + C「macOS 原生 Bento」版式。叠在 styles.css / enhance.css 之后。 */

body {
  --bg: #F6EFE4; --card: #FFFBF5; --canvas: #FBF5EC; --side: #F1E6D6;
  --ink: #2E241D; --muted: #6B5D52; --line: #E6D8C6; --soft: #EFE3D2;
  --accent: #A84B2A; --accent-bg: #F8E7DB; --code: #2A1E17;
  --dark-card: #3A2318; --dark-ink: #F6EFE4; --dark-muted: #E0CDBA; --ember: #F2B07A;
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
  background: var(--bg);
}
body.dark {
  --bg: #17120F; --card: #211A15; --canvas: #261E18; --side: #1C1612;
  --ink: #F1E7DC; --muted: #B3A394; --line: #3A2E26; --soft: #2E241D;
  --accent: #F0A06E; --accent-bg: #3A2619; --code: #110D0B;
  --dark-card: #2C1B12; --dark-ink: #F6EFE4; --dark-muted: #D8C4B0; --ember: #F2B07A;
}

/* 顶栏与侧栏：半透明毛玻璃 + 圆角胶囊导航 */
.topbar {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px);
}
.brand strong { font-family: var(--serif); font-weight: 900; letter-spacing: 0; }
.search-trigger { background: var(--card); border-radius: 999px; height: 38px; padding: 0 16px; }
.version { background: var(--soft); border-radius: 999px; }
.repository-link { font-size: 13px; }
.icon-button { border-radius: 999px; }

.sidebar { background: var(--side); border-right-color: var(--line); }
.nav-home, .nav-link { border-radius: 10px; }
.nav-link { font-size: 13px; }
.nav-link.active { box-shadow: none; background: var(--card); color: var(--accent); }
body.dark .nav-link.active { background: var(--soft); }
.nav-group h2 { letter-spacing: 1.2px; }

/* 首页：居中大标题 */
.home-content { max-width: 1120px; padding-top: 24px; }
.hero.hero-center {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0; padding: 56px 0 40px;
}
.hero-icon { width: 104px; height: 104px; filter: drop-shadow(0 18px 30px rgba(120, 60, 20, .18)); }
.hero-kicker { margin: 22px 0 0; font-size: 17px; font-weight: 600; color: var(--accent); }
.hero.hero-center h1 {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(40px, 5.4vw, 72px); line-height: 1.14; letter-spacing: -0.01em;
  margin: 14px 0 22px;
}
.hero.hero-center .hero-description {
  max-width: 36em; margin: 0 auto 30px; font-size: 18px; line-height: 1.75; color: var(--muted);
}
.hero.hero-center .hero-actions { justify-content: center; flex-wrap: wrap; gap: 14px 26px; }
.hero.hero-center .platforms { justify-content: center; margin-top: 24px; font: 13px/1.6 inherit; font-family: inherit; color: var(--muted); }
.hero.hero-center .platforms span + span::before { content: "·"; margin-right: 15px; }

.primary-button {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px;
  border-radius: 999px; background: var(--accent); color: #FFFFFF; font-size: 16px; font-weight: 600;
}
body.dark .primary-button { color: #1A120D; }
.primary-button:hover { filter: brightness(1.06); }
.text-link { font-size: 16px; color: var(--accent); padding: 12px 0; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.release-strip {
  max-width: 760px; margin: 0 auto 72px; border: 0; border-radius: 999px;
  background: var(--card); padding: 12px 14px 12px 12px;
  box-shadow: 0 1px 0 var(--line);
}
.release-tag { border-radius: 999px; padding: 4px 10px; }
.release-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 区块标题 */
.home-section { margin-bottom: 72px; }
.section-heading { margin-bottom: 24px; align-items: flex-end; gap: 16px; }
.section-heading h2 {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.01em; line-height: 1.2;
}
.section-heading span { font: 13px/1.6 inherit; font-family: inherit; color: var(--muted); }

/* Bento 任务卡片：3+3 / 2+2+2 / 2+2+2 / 3+3 */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.bento-card {
  grid-column: span 2; display: flex; flex-direction: column; gap: 10px; min-height: 196px;
  padding: 28px; border-radius: 26px; background: var(--card); color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bento-card.wide { grid-column: span 3; min-height: 220px; }
.bento-card:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -26px rgba(90, 45, 15, .35); }
.bento-glyph {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-bg); color: var(--accent); font-size: 20px; margin-bottom: 6px;
}
.bento-card strong { font-size: 19px; font-weight: 700; line-height: 1.4; }
.bento-card.wide strong { font-family: var(--serif); font-weight: 900; font-size: 26px; line-height: 1.3; }
.bento-card small { font-size: 14px; line-height: 1.65; color: var(--muted); }
.bento-card .task-go { margin-top: auto; font-size: 14px; color: var(--accent); }
.bento-card.dark { background: var(--dark-card); color: var(--dark-ink); }
.bento-card.dark small { color: var(--dark-muted); }
.bento-card.dark .bento-glyph { background: rgba(242, 176, 122, .16); color: var(--ember); }
.bento-card.dark .task-go { color: var(--ember); }

/* 按模块阅读：圆角卡片网格 */
.module-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-bottom: 0; }
.module-link {
  border: 0; border-radius: 20px; background: var(--card); padding: 18px 20px; align-items: flex-start;
}
.module-glyph { border: 0; background: var(--accent-bg); color: var(--accent); border-radius: 12px; width: 38px; height: 38px; }
.module-link h3 { font-size: 15px; margin-bottom: 4px; }
.module-link p { font-size: 13px; line-height: 1.6; }
.module-link .arrow { align-self: center; }

.home-bottom { gap: 16px; padding: 0 0 56px; }
.bottom-link {
  flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 26px; border-radius: 22px; background: var(--card); font-size: 14px; line-height: 1.6;
}
.bottom-link > span:last-child { color: var(--accent); font-weight: 600; margin-top: auto; }
.bottom-link strong { font-family: var(--serif); font-weight: 900; font-size: 20px; margin-bottom: 6px; }

.site-footer { font-size: 12px; }

/* 正文页：文章放进圆角卡片 */
.article-layout { max-width: 1260px; padding: 36px 40px; gap: 36px; }
.article-layout > article {
  background: var(--card); border-radius: 28px; padding: 48px 56px 8px; min-width: 0;
}
.article-title { font-family: var(--serif); font-weight: 900; font-size: 40px; letter-spacing: -0.01em; line-height: 1.25; }
.article-meta { font-size: 11px; }
.prose h3 { font-family: var(--serif); font-weight: 900; font-size: 24px; letter-spacing: 0; }
.prose pre { border-radius: 14px; color: #F1E6D8; }
.table-wrap { border-radius: 14px; }
.prose th { background: var(--canvas); }
.prose blockquote { border-radius: 0 14px 14px 0; }
.prose p.done-note { border-radius: 14px; }
.toc { top: 108px; }
.pager a { background: var(--canvas); border-radius: 16px; border-color: transparent; }
.pager a:hover { border-color: var(--accent); }
.mobile-toc { background: var(--canvas); border-radius: 14px; }
.article-aside-note { border-radius: 14px; }

dialog { border-radius: 22px; background: var(--card); }
.search-result { border-radius: 12px; }
.toast { border-radius: 999px; }

@media (max-width: 1020px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-card { grid-column: span 1; }
  .bento-card.wide { grid-column: span 2; }
  .home-content { max-width: 880px; }
  .hero.hero-center h1 br { display: none; }
  .article-layout > article { padding: 40px 36px 8px; }
}
@media (max-width: 760px) {
  .home-content { padding: 16px 16px 0; }
  .hero.hero-center { padding: 32px 0 28px; }
  .hero-icon { width: 80px; height: 80px; }
  .hero.hero-center h1 { font-size: 36px; }
  .hero.hero-center .hero-description { font-size: 15px; }
  .hero.hero-center .platforms span + span::before { content: none; }
  .release-strip { border-radius: 20px; margin-bottom: 48px; }
  .release-text { white-space: normal; }
  .bento { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bento-card, .bento-card.wide { grid-column: auto; min-height: 0; padding: 22px; border-radius: 22px; }
  .bento-card.wide strong { font-size: 22px; }
  .home-section { margin-bottom: 52px; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 4px; }
  .article-layout { padding: 16px 12px; }
  .article-layout > article { padding: 28px 20px 4px; border-radius: 22px; }
  .article-title { font-size: 30px; }
}
@media print {
  body { background: white; }
  .article-layout > article { background: none; padding: 0; }
}