/* ==========================================================================
   mingcui.cn 门户共享层（base.css）—— 所有门户页面（layouts/main）必载。
   --------------------------------------------------------------------------
   依据 DESIGN.md（Notion 设计语言分析）建立：暖白纸感画布 + 近黑字 + 单一结构蓝 +
   多彩贴纸点缀色 + 发丝线与「几乎不存在」的分层阴影。

   ⚠️ 本文件只放跨页共享的内容：设计 token、reset、布局骨架、按钮/标签等原子、
   页头/页脚/公告/广告条 chrome、共享卡片与分页。页面专属样式放
   static/css/portal/<page>.css，由对应页面模板自行引入（见 AGENTS.md 前端资源规约）。
   守护测试 packages/view/front_guard_test.go 会检查归属与作用域。

   两处对 DESIGN.md 的刻意适配，改前请读：
   1) NotionInter 是私有字体，按其 "Note on Font Substitutes" 直替 Inter；
      不加载任何外网字体（国内网络可访问性 + 单二进制部署），中文回落系统字体。
   2) 拉丁正文行高 1.5 在中日韩文本下偏挤，正文行高放宽到 1.7~1.8，
      字号与字距仍取 DESIGN.md 的 token 值。
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand & accent —— 「只有一个结构色」 */
  --primary: #0075de;
  --primary-active: #005bab;
  --secondary: #213183;
  --on-primary: #ffffff;

  /* Sticker palette —— 只做装饰：图标底、分类圆点、状态点，绝不涂 CTA */
  --accent-sky: #62aef0;
  --accent-purple: #d6b6f6;
  --accent-purple-deep: #391c57;
  --accent-pink: #ff64c8;
  --accent-orange: #dd5b00;
  --accent-teal: #2a9d99;
  --accent-green: #1aae39;

  /* Surface */
  --canvas: #ffffff;
  --canvas-soft: #f6f5f4;
  --surface: #ffffff;
  --hairline: #e6e6e6;

  /* Text —— ink 按 DESIGN.md 以 ~95% alpha 渲染成柔和纯黑 */
  --ink: #000000;
  --ink-soft: rgba(0, 0, 0, .95);
  --ink-secondary: #31302e;
  --ink-muted: #615d59;
  --ink-faint: #a39e98;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;

  /* Spacing */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 28px;
  --s-xxl: 32px;

  /* Elevation —— 多层近透明叠加，不是一记硬投影 */
  --shadow-1: 0 .175px 1.041px rgba(0, 0, 0, .01),
              0 .8px 2.925px rgba(0, 0, 0, .02),
              0 2.025px 7.847px rgba(0, 0, 0, .027),
              0 4px 18px rgba(0, 0, 0, .04);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .02),
              0 4px 8px rgba(0, 0, 0, .03),
              0 10px 20px rgba(0, 0, 0, .03),
              0 23px 52px rgba(0, 0, 0, .05);

  /* Type */
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Roboto,
          Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", SFMono-Regular, Menlo, Monaco, "Liberation Mono",
               "Courier New", monospace;

  --container: 1180px;
  --header-h: 60px;

  /* 贴纸色默认值，由 nth-child 规则按位置轮换覆盖 */
  --sticker: var(--accent-sky);
  --sticker-soft: #e9f3fc;

}

/* 视觉隐藏但保留给读屏器/键盘：sr-only 的元素仍可获得焦点 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--canvas-soft);
  color: var(--ink-soft);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  font-feature-settings: "lnum" 1, "locl" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  overscroll-behavior: none;
  touch-action: manipulation;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; border-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* 类选择器设了 display 的元素（如 .header-user-fallback）会盖掉 hidden 属性的
   UA 样式，必须显式兜底，JS 靠 hidden 切换登录态显示 */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs); }

main { flex: 1 0 auto; }

/* ---------- 3. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  /* 只写左右内边距：页面级容器往往同时带 .page-head / .sections / .thread-list 等
     负责「上下留白」的类，用 padding 简写会在断点里被 .container 覆盖成 0。 */
  padding-left: var(--s-lg);
  padding-right: var(--s-lg);
}

/* 区块间距用大留白分组，而不是一条条分隔线 */
.sections { padding-top: var(--s-xl); padding-bottom: var(--s-xxl); }
/* 站内锚点跳转（工具页 #tools、案例页 #cases）要避开吸顶导航，否则区块标题被压住 */
.sections { scroll-margin-top: calc(var(--header-h) + var(--s-sm)); }
.section { margin-bottom: 44px; }
.section:last-child { margin-bottom: 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-md);
  margin-bottom: var(--s-md);
}
.section-head-main { display: flex; align-items: baseline; gap: var(--s-xs); min-width: 0; }
.section-head h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.23;
  letter-spacing: -.625px;
  color: var(--ink);
}
.section-desc {
  font-size: 14px;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.section-more {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
  white-space: nowrap;
}
.section-more:hover { color: var(--primary-active); text-decoration: underline; text-underline-offset: 3px; }

/* 页面标题区（多页共用：列表页头 / 文章页头 / 警告页头） */
.page-head { padding: var(--s-xl) 0 var(--s-md); }
.page-head h1, .page-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--ink);
}
.page-head p { margin-top: 6px; font-size: 16px; color: var(--ink-secondary); }
.page-head .meta-row { margin-top: var(--s-xs); }
.page-head.is-center { text-align: center; }
.page-head.is-center p { max-width: 560px; margin-left: auto; margin-right: auto; }
/* 页头正文链接变蓝；排除 .btn——按钮的文字色由 .btn-primary 自己定义，
   否则这条规则会以更高优先级把按钮文字染成蓝底蓝字 */
.page-head a:not(.btn) { color: var(--primary); }
.page-head a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }

/* 分区标题右侧的计数，移动端也保留（不像 section-desc 那样隐藏） */
.section-count { flex-shrink: 0; font-size: 14px; color: var(--ink-faint); white-space: nowrap; }

/* ---------- 4. Buttons / pills / tags ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  transition: background-color .15s, color .15s, box-shadow .15s, transform .1s;
}
.btn-primary {
  padding: 8px 20px;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-full);
}
.btn-primary:hover { background: var(--primary-active); color: var(--on-primary); }
.btn-primary:active { transform: scale(.97); }

.btn-secondary {
  padding: 8px 20px;
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-1);
}
.btn-secondary:hover { background: var(--canvas-soft); color: var(--ink); }
.btn-secondary:active { transform: scale(.97); }

.btn-utility {
  padding: 4px 14px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-size: 15px;
}
.btn-utility:hover { background: var(--canvas-soft); color: var(--ink); }


.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.33;
  letter-spacing: .125px;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--canvas-soft);
  color: var(--ink-secondary);
  border-radius: var(--r-xs);
  font-size: 11px;
  line-height: 1.6;
}
.tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.tags.is-start { justify-content: flex-start; }

/* 贴纸圆点：只做装饰的分类标识 */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--sticker);
  border-radius: var(--r-full);
}

/* ---------- 5. Header & nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { width: 28px; height: 28px; display: block; }
.brand-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--ink);
  white-space: nowrap;
}

.site-nav { flex: 1 1 auto; min-width: 0; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, #000 90%, transparent 100%);
}
.nav-list::-webkit-scrollbar { display: none; }
.nav-link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--s-sm);
  border-radius: var(--r-sm);
  font-size: 15px;
  line-height: 1.33;
  color: var(--ink-secondary);
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.nav-link:hover { background: var(--canvas-soft); color: var(--ink); }
.nav-link.is-active { background: var(--canvas-soft); color: var(--primary); font-weight: 600; }
.nav-divider {
  width: 1px;
  height: 16px;
  flex-shrink: 0;
  margin: 0 6px;
  background: var(--hairline);
}
.header-actions { flex-shrink: 0; display: flex; align-items: center; gap: var(--s-xs); }

/* 页头登录态：已登录时替换登录按钮的「头像+名称」下拉入口（header-auth.js 切换显示） */
.header-user-menu { position: relative; }
.header-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--r-full);
  font-size: 14px;
  color: var(--ink);
}
.header-user:hover { background: var(--canvas-soft); }
.header-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--canvas-soft);
}
.header-user-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-secondary);
  border: 1px solid var(--hairline);
}
.header-user-name {
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-user-caret {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--ink-muted);
  transition: transform .15s;
}
.header-user[aria-expanded="true"] .header-user-caret { transform: rotate(180deg); }

/* 头像下拉菜单：账户中心 */
.header-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 9em;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  z-index: 60;
}
.header-dropdown a {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
}
.header-dropdown a:hover { background: var(--canvas-soft); color: var(--primary); }

/* ---------- 6. 站内公告 ---------- */
.site-alert {
  background: var(--canvas-soft);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 1.43;
}
.site-alert .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}
.site-alert strong { color: var(--ink); font-weight: 600; }
.site-alert a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.site-alert a:hover { color: var(--primary-active); }

/* ---------- 6b. 全局产品广告条（ layouts/main.html 的 [data-mc-promo] ） ----------
   全站每页顶部一条，给站内自己的产品（Mackit）导流。设计上沿用公告条的轻量条带，
   但用 primary 蓝徽标 + 实心 CTA 与公告区分开——DESIGN.md 的纪律是「只有 CTA 涂蓝」，
   这里全条带只有徽标和「了解详情」两个蓝块，其余保持墨色文字。
   吸顶的是它下方的 header：广告条随页面滚走，不长期占位。 */
.site-promo {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 1.43;
}
.site-promo .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  padding-top: 10px;
  padding-bottom: 10px;
}
/* 关闭过的用户：class 由 head 内联脚本在首帧前加上（见 layouts/main.html） */
html.mc-promo-hidden .site-promo { display: none; }

/* 产品图标：Mackit app-icon 的本站副本，36px 比页头 brand-mark（28px）再大一号，
   广告条的第一视觉锚点。8px 圆角 ≈ macOS 图标 squircle 的 22% 观感。 */
.site-promo-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: block;
  border-radius: var(--r-md);
}

.site-promo-badge {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .125px;
  line-height: 1.33;
}
.site-promo-copy {
  min-width: 0;
  color: var(--ink-secondary);
}
.site-promo-copy strong { color: var(--ink); font-weight: 600; }
/* 窄屏放不下的细节句（扫描范围等），由 600px 断点整段隐藏 */
.site-promo-detail { color: var(--ink-muted); }
.site-promo-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .15s;
}
.site-promo-cta:hover { background: var(--primary-active); }
.site-promo-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: var(--s-xxs);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-muted);   /* 不用 --ink-faint（对白底 2.8:1，够不到界面组件 3:1 的线） */
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.site-promo-close:hover { background: var(--canvas-soft); color: var(--ink); }
.site-promo-close svg { width: 12px; height: 12px; display: block; }

/* ---------- 7. Cards（共享卡片层） ---------- */
.card-grid { display: grid; gap: var(--s-md); }
.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 贴纸色轮换：卡片与分区按顺序取色，营造 Notion 那种轻快但不喧宾夺主的节奏 */
.card-grid > :nth-child(6n+1), .sections > .section:nth-child(6n+1) { --sticker: var(--accent-sky);    --sticker-soft: #e9f3fc; }
.card-grid > :nth-child(6n+2), .sections > .section:nth-child(6n+2) { --sticker: var(--accent-purple); --sticker-soft: #f5edfd; }
.card-grid > :nth-child(6n+3), .sections > .section:nth-child(6n+3) { --sticker: var(--accent-pink);   --sticker-soft: #fdeaf6; }
.card-grid > :nth-child(6n+4), .sections > .section:nth-child(6n+4) { --sticker: var(--accent-orange); --sticker-soft: #fdeee2; }
.card-grid > :nth-child(6n+5), .sections > .section:nth-child(6n+5) { --sticker: var(--accent-teal);   --sticker-soft: #e6f4f3; }
.card-grid > :nth-child(6n+6), .sections > .section:nth-child(6n+6) { --sticker: var(--accent-green);  --sticker-soft: #e8f7ea; }

/* 整卡可点击：标题链接用 ::after 铺满卡片，卡内其他链接抬到上层 */
.card { position: relative; }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card a:not(.stretched) { position: relative; z-index: 2; }

/* 工具卡 */
.tool-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-md);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  transition: box-shadow .15s, border-color .15s;
}
.tool-card:hover { border-color: var(--ink-faint); box-shadow: var(--shadow-1); }
.tool-card-head { display: flex; align-items: flex-start; gap: var(--s-sm); margin-bottom: var(--s-sm); }
.tile {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sticker-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.tile img { width: 100%; height: 100%; object-fit: contain; }
.tile[data-broken] img { display: none; }
.tile[data-broken] {
  background: var(--canvas-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.tool-card-name { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.125px; color: var(--ink); }
.tool-card:hover .tool-card-name { color: var(--primary); }
.tool-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tool-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-xs);
  margin-top: auto;
  padding-top: var(--s-sm);
  border-top: 1px solid var(--hairline);
}
.tool-card-visit { font-size: 13px; font-weight: 500; color: var(--primary); white-space: nowrap; }
.tool-card-visit:hover { color: var(--primary-active); text-decoration: underline; text-underline-offset: 2px; }

/* 文章卡 */
.thread-list { display: flex; flex-direction: column; gap: var(--s-sm); padding: var(--s-lg) 0 var(--s-xxl); }
.thread-card {
  display: flex;
  gap: var(--s-lg);
  padding: var(--s-md);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  transition: box-shadow .15s, border-color .15s;
}
.thread-card:hover { border-color: var(--ink-faint); box-shadow: var(--shadow-1); }
.thread-cover {
  width: 180px;
  min-width: 180px;
  height: 120px;
  flex-shrink: 0;
  align-self: flex-start;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--canvas-soft);
}
.thread-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thread-cover[data-broken] img { display: none; }
.thread-cover[data-broken] {
  background: var(--canvas-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E") center / 28px no-repeat;
}
.thread-body { display: flex; flex-direction: column; min-width: 0; }
.thread-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .125px;
  color: var(--ink-muted);
}
.thread-cat a:hover { color: var(--primary); }
.thread-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: -.25px;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.thread-card:hover .thread-title { color: var(--primary); }
.thread-excerpt {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-xs);
  margin-top: var(--s-sm);
  font-size: 14px;
  line-height: 1.43;
  color: var(--ink-faint);
}
.meta-row > span + span::before { content: "·"; margin-right: var(--s-xs); opacity: .7; }

/* ---------- 8. 分页 ---------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-xxs);
  padding: var(--s-lg) 0 var(--s-xxl);
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--ink-secondary);
  transition: background-color .15s, color .15s;
}
.pagination a:hover { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.pagination .is-active { background: var(--primary); color: var(--on-primary); font-weight: 600; }
.pagination .is-disabled { opacity: .3; pointer-events: none; }
.pagination .is-gap { color: var(--ink-faint); pointer-events: none; }

/* ---------- 9. 空态 ---------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  padding: 72px var(--s-lg);
  background: var(--canvas-soft);
  border-radius: var(--r-xl);
  text-align: center;
}
.empty-state p { font-size: 16px; color: var(--ink-muted); }

/* ---------- 10. Footer ---------- */
.site-footer {
  flex-shrink: 0;
  background: var(--canvas-soft);
  border-top: 1px solid var(--hairline);
  padding: var(--s-xxl) 0;
  font-size: 14px;
  line-height: 1.43;
  color: var(--ink-secondary);
}
.footer-inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-lg); }
.footer-brand { display: inline-flex; align-items: center; gap: var(--s-xs); font-weight: 600; color: var(--ink); }
.footer-mark { width: 24px; height: 24px; display: block; }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s-lg); }
.footer-nav a { color: var(--ink-secondary); }
.footer-nav a:hover { color: var(--primary); }
.footer-meta { text-align: right; color: var(--ink-muted); }
.footer-meta a { color: var(--ink-muted); }
.footer-meta a:hover { color: var(--primary); }
.footer-meta .icp { margin-top: 6px; }

/* ==========================================================================
   页头语言切换器（layouts/main.html 的 .site-lang，原生 details 下拉）
   ========================================================================== */
.site-lang {
  position: relative;
}

.site-lang summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  list-style: none;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}

.site-lang summary::-webkit-details-marker {
  display: none;
}

.site-lang summary:hover,
.site-lang[open] summary {
  border-color: var(--ink-faint);
  background: var(--canvas-soft);
}

.site-lang summary svg {
  color: var(--ink-muted);
  flex: none;
}

.site-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  min-width: 132px;
  padding: 6px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
}

.site-lang-menu a {
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}

.site-lang-menu a:hover {
  background: var(--canvas-soft);
  color: var(--ink);
}

.site-lang-menu a.is-active {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  font-weight: 600;
}

@media (max-width: 560px) {
  /* 窄屏只留图标，避免挤压登录按钮 */
  .site-lang summary span:not(.site-lang-caret) {
    display: none;
  }
  .site-lang summary {
    padding: 0 9px;
  }
}

/* ---------- 11. Responsive（共享层） ---------- */
@media (max-width: 1024px) {
  .card-grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .card-grid-4, .card-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head h2 { font-size: 22px; }
  .section-desc { display: none; }

  /* 导航换到第二行整行铺开，保持横向滚动的手势习惯 */
  .site-header .container { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: var(--s-xs); }
  .brand { order: 1; }
  .header-actions { order: 2; margin-left: auto; }
  .header-user-name { display: none; }   /* 移动端只留头像，省横向空间 */
  .site-nav { order: 3; flex: 1 0 100%; }
  .nav-list { -webkit-mask-image: linear-gradient(to right, #000 86%, transparent 100%); mask-image: linear-gradient(to right, #000 86%, transparent 100%); }

  /* 窄屏导航折成两行，吸顶高度不再是 --header-h，锚点偏移要跟着放大 */
  .sections { scroll-margin-top: 112px; }
  .footer-inner { flex-direction: column; }
  .footer-meta { text-align: left; }
}

@media (max-width: 600px) {
  .container { padding-left: var(--s-md); padding-right: var(--s-md); }
  .card-grid-4, .card-grid-3, .card-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .section { margin-bottom: var(--s-xxl); }
  .section-head h2 { font-size: 19px; }

  .btn-utility { padding: 8px 16px; }       /* 移动端保证 44px 触控高度 */
  .brand-name { font-size: 16px; }

  /* 广告条窄屏只留「徽标 + 产品名一句话 + CTA + 关闭」，细节句整段隐藏；
     文案过长时（小屏 / 大字号系统设置）省略号收尾，绝不把条带撑高或溢出。
     图标同步收到 28px（与页头 brand-mark 对齐）：窄屏优先保文案可读。 */
  .site-promo-detail { display: none; }
  .site-promo-icon { width: 28px; height: 28px; }
  .site-promo-copy { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .site-promo .container { gap: var(--s-xs); }

  .thread-card { flex-direction: column; gap: var(--s-sm); }
  .thread-cover { width: 100%; min-width: 0; height: auto; aspect-ratio: 16 / 9; }
  .thread-title { font-size: 19px; }

  .pagination a, .pagination span { min-width: 32px; height: 32px; font-size: 13px; }

}

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