/* 爱学习 H5 站点 - 移动优先 + SEO 友好 */
:root {
  --c-bg: #f3f5f9;                                  /* 2026-07-29：略沉让 --c-card 白底浮起 ~3% 亮度差 */
  --c-card: #ffffff;
  --c-card-soft: #eef1f6;                           /* 新增 - 替 .ix-prose 灰底 */
  --c-line: #e2e5ec;                                /* 2026-07-29：比 #ececf1 深一档, 配合多层 shadow 让卡片边界更"提" */
  --c-text: #0f172a;                                /* 2026-07-29：slate-900, 替代 #1c1e26 (18.62:1 AAA) */
  --c-text-soft: #334155;                           /* 新增 - 替硬编码 #475569, slate-700 (12.62:1 AAA) */
  --c-subtle: #94a3b8;                              /* 新增 - placeholder/描述, 仅非语义信息 */
  --c-muted: #64748b;                               /* 2026-07-29：替代 #8a8f9a (3.29:1 → 4.64:1) 达 WCAG AA */
  --c-overlay: rgba(15, 23, 42, 0.45);              /* 新增 - modal 遮罩 */
  --shadow-rgb: 15, 23, 42;                         /* 新增 - 阴影统一基色, 解 9 处硬编码 rgba 飘移 */
  --c-brand: #38bdf8;
  --c-brand-soft: #f0f9ff;
  --c-accent: #f59e0b;
  --c-ok: #10b981;
  --c-warn: #f59e0b;
  --c-err: #ef4444;

  /* 2026-07-29 细腻清晰视觉体系 (Glass / Tactile 触感玻璃方案)
     - typography 8-5-5-4 档 token (--fs-* / --lh-* / --fw-* / --tracking-*)
     - radius 7 档, 卡片默认 14px (原 12px → --r-md)
     - shadow 6 档多层柔光 (--shadow-xs/sm/md/lg/xl/ring)
     - 保持 --c-brand #38bdf8 / 8 个 --hero-* 渐变冻结不动 */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.55;
  --lh-relaxed: 1.7;
  --lh-loose: 1.9;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.5px;
  --tracking-caps: 0.06em;
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;                                     /* 卡片默认 */
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;
  --r-card: var(--r-md);                            /* 别名 - 保留向下兼容 */
  --shadow-xs: 0 1px 2px rgba(var(--shadow-rgb), 0.06);
  --shadow-sm: 0 1px 2px rgba(var(--shadow-rgb), 0.06), 0 4px 12px rgba(var(--shadow-rgb), 0.06);
  --shadow-md: 0 4px 8px rgba(var(--shadow-rgb), 0.05), 0 12px 28px rgba(var(--shadow-rgb), 0.10);
  --shadow-lg: 0 8px 16px rgba(var(--shadow-rgb), 0.06), 0 24px 56px rgba(var(--shadow-rgb), 0.14);
  --shadow-xl: 0 16px 32px rgba(var(--shadow-rgb), 0.10), 0 32px 80px rgba(var(--shadow-rgb), 0.18);
  --shadow-ring: 0 0 0 3px rgba(56, 189, 248, 0.20);
  --pad-x: 16px;
  --pad-y: 12px;

  /* 2026-07-28 → 2026-07-29：hero 调子集 — 把硬编码渐变提到变量层。
     2026-07-29 整体换成"冰蓝科技感" C · Ice Light 色板（主色 #38bdf8 sky-400）。
     2026-07-29 调整方向：所有 hero 渐变统一改为"左侧深 → 右侧浅"（135deg 仍为对角线方向），
     让光感在 hero 容器内"自左上向右下打开"，跟多档 --shadow-* 多层柔光一致：
     - aurora：主品牌（indigo-500 → sky-400），.ix-hero 默认
     - aurora-2：同族浅（sky-400 → sky-300），给同族路由做明度变体
     - aurora-3：同族深（sky-800 → sky-400），用于深色 hero
     - ocean：清新（sky-400 → cyan-400），用于 /think /sale/case
     - sunset：内敛（blue-600 → sky-400），用于 /quote（原橙红→冷色调以统一品牌）
     - bloom：淡雅（sky-400 → violet-300），用于 /tag/group_*（原紫粉→冷色调，避白字看不清）
     - indigo：稳重（blue-900 → sky-400），用于商务页
     - mist：灰，404 / 弱化 */
  --hero-aurora: linear-gradient(135deg, #6366f1 0%, #38bdf8 100%);
  --hero-aurora-2: linear-gradient(135deg, #38bdf8 0%, #7dd3fc 100%);
  --hero-aurora-3: linear-gradient(135deg, #075985 0%, #38bdf8 100%);
  --hero-ocean: linear-gradient(135deg, #38bdf8 0%, #22d3ee 100%);
  --hero-sunset: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
  --hero-bloom: linear-gradient(135deg, #38bdf8 0%, #c4b5fd 100%);
  --hero-indigo: linear-gradient(135deg, #1e3a8a 0%, #38bdf8 100%);
  --hero-mist: #475569;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  word-break: break-word;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ============== Top Nav ============== */
.ix-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.ix-nav-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--pad-x);
}
.ix-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: var(--fw-bold); font-size: var(--fs-base); color: var(--c-text);
  /* 2026-07-21：顶导 brand 强制不换行 + 不可被挤压——三件套各自占位，搜索弹性伸缩
     - 之前：.ix-brand 没 flex-shrink:0，<360px 极窄时 .ix-search flex:1 会把 brand 压扁
     - 现在：brand 按内容撑开，菜单 shrink:0 保留完整宽度，search 用剩余空间 */
  white-space: nowrap;
  flex-shrink: 0;
}
.ix-brand-dot {
  width: 12px; height: 12px; border-radius: 3px;
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  flex-shrink: 0;
}
.ix-search {
  flex: 1 1 200px;                  /* 1 1 200 = 可伸可缩，基础 200px；保证 placeholder 不被切 */
  min-width: 160px;                 /* 极窄屏底线：search 至少 160px 可用 */
  position: relative;
  display: flex; align-items: center;
  background: var(--c-bg);
  border-radius: var(--r-pill);
  padding: 7px 12px;
  margin: 0 4px;
}
.ix-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-size: var(--fs-sm); padding: 0 4px; min-width: 0;
}
.ix-ico { display: inline-block; font-style: normal; opacity: 0.7; flex-shrink: 0; vertical-align: middle; }
.ix-ico-search { width: 16px; height: 16px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>"); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; }
/* 2026-07-21：原 ::before { content: "🔍" } 走 emoji 字体兜底，Windows + 部分浏览器会显示 tofu/乱码；
   改成内联 SVG data-URI 跨平台稳定。.ix-ico 类保留以便后续其它图标扩展。 */
.ix-menu {
  display: flex; gap: 6px;
  flex-shrink: 0;                    /* 菜单不被挤压；空间不够时让 search 缩，而不是把菜单挤变形 */
}
.ix-menu a {
  font-size: var(--fs-sm);
  padding: 5px 8px;
  color: var(--c-muted);
  border-radius: var(--r-md);
  white-space: nowrap;               /* 单菜单项不换行；空间真不够时由 .ix-nav-inner 控制整体换行 */
}
.ix-menu a.on { color: var(--c-brand); background: var(--c-brand-soft); }

/* ============== Hamburger + Top Drawer (2026-07) ============== */
/* 状态机：把 is-open 加在抽屉本身上（.ix-menu-drawer.is-open / .ix-menu-drawer-mask.is-open）
   而非用兄弟选择器 .ix-nav.is-open + .ix-menu-drawer：
   兄弟选择器"删除类"时浏览器只把它当作"撤掉覆盖"，不会触发 transition；
   改为本类自加/自除后，开 + 关两个方向都按 .42s easeOutExpo 缓动。 */
.ix-menu-btn {
  display: none;                       /* 桌面隐藏，<720 再覆盖显示 */
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border: 0; background: transparent;
  border-radius: var(--r-md);
  align-items: center; justify-content: center;
  cursor: pointer; color: var(--c-text);
  -webkit-appearance: none; appearance: none;
}
.ix-menu-btn:active { background: var(--c-bg); }
.ix-menu-btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }

.ix-menu-btn-bars,
.ix-menu-btn-bars::before,
.ix-menu-btn-bars::after {
  content: ""; display: block;
  width: 20px; height: 2px;
  background: currentColor; border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.ix-menu-btn-bars { position: relative; }
.ix-menu-btn-bars::before { position: absolute; top: -7px; left: 0; }
.ix-menu-btn-bars::after  { position: absolute; top:  7px; left: 0; }
/* 打开态：bars 中间条淡出，上下条交叉变 X（按钮自身状态由 .ix-menu-btn.is-open 驱动） */
.ix-menu-btn.is-open .ix-menu-btn-bars { background: transparent; }
.ix-menu-btn.is-open .ix-menu-btn-bars::before { top: 0; transform: rotate(45deg); }
.ix-menu-btn.is-open .ix-menu-btn-bars::after  { top: 0; transform: rotate(-45deg); }

.ix-menu-drawer {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 49;                         /* 低于 sticky 顶导(50)，从 header 下方滑出 */
  max-height: 65vh;
  background: var(--c-card);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  /* 默认 = 打开态：抽屉就位可见。
     JS 在 init() 时给 drawer/mask 加 .is-closed 让其回到收起位（避免 SSR 闪屏）：
     "打开"路径 .is-closed → none，开闭两个方向都走 cubic-bezier(.42s) 缓动。 */
  transform: translateY(0) scaleY(1);
  transform-origin: top;
  visibility: visible;
  pointer-events: auto;
  transition: transform .42s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0s,
              opacity .42s ease;
  padding: calc(env(safe-area-inset-top, 0px) + 104px) 0 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ix-menu-drawer.is-closed {
  transform: translateY(-100%) scaleY(0.96);
  visibility: hidden;
  pointer-events: none;
  /* 关闭时 visibility 延迟 .42s 让 transform 先滑完，再隐藏 */
  transition: transform .42s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear .42s;
}

.ix-menu-drawer-list {
  /* 块列表 grid：3 列 × 3 行（9 项完全对称），复用首页 .ix-topics 视觉 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 var(--pad-x);
}
.ix-menu-drawer-list a {
  display: block;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 14px 8px;                   /* 同 .ix-topic，视觉一致 */
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.ix-menu-drawer-list a:hover {
  border-color: var(--c-brand);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.ix-menu-drawer-list a:active { transform: scale(0.97); }
.ix-menu-drawer-list a.on {
  color: var(--c-brand);
  background: var(--c-brand-soft);
  border-color: var(--c-brand);
  font-weight: var(--fw-semibold);
}

.ix-menu-drawer-mask {
  position: fixed; inset: 0;
  z-index: 48;                         /* 在主内容上、抽屉下 */
  background: rgba(15, 23, 42, 0.45);
  /* 默认可见，JS init 加 .is-closed 让它退到全透明+隐藏 */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .42s ease, visibility 0s linear 0s;
}
.ix-menu-drawer-mask.is-closed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .42s ease, visibility 0s linear .42s;
}

body.ix-menu-open { overflow: hidden; }

/* 抽屉打开时顶导增强阴影：与抽屉阴影呼应，凸显层级 */
.ix-nav.is-open { box-shadow: var(--shadow-sm); }

/* ============== Main ============== */
/* 2026-07-24：padding-bottom 给悬浮 footer 让出空间——全页面统一加足够 padding，
   不让 footer 在窄屏 flex-wrap 后盖住最后一段内容。
   - 桌面 150px：覆盖 footer 1~2 行 + meta 1 行 + 安全余量
   - ≤480 170px：覆盖 nav 多行 wrap（≤480 视窗 12 个链接挤成 2 行）+ meta 1~2 行
   - ≤360 190px：覆盖 360 极窄视窗下 nav 2~3 行 wrap（最坏情况 footer 可达 ~160px）
   真正的"自适应"做法是用 JS 读 footer 高度注入 CSS 变量，但对纯 SSR + 静态模板过重；分级定值足够覆盖 99% 场景。 */
.ix-main {
  max-width: 920px;
  margin: 0 auto;
  padding: 14px var(--pad-x) 150px;
}
@media (max-width: 480px) {
  .ix-main { padding-bottom: 170px; }
}
@media (max-width: 360px) {
  .ix-main { padding-bottom: 190px; }
}

/* ============== Hero ============== */
.ix-hero {
  background: var(--hero-aurora);
  color: #fff;
  border-radius: var(--r-card);
  padding: 22px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
}
/* 2026-07-28：hero 调子 modifier — 路由族分配，详见 :root 注释 */
.ix-hero--aurora-2 { background: var(--hero-aurora-2); }
.ix-hero--aurora-3 { background: var(--hero-aurora-3); }
.ix-hero--ocean    { background: var(--hero-ocean); }
.ix-hero--sunset   { background: var(--hero-sunset); }
.ix-hero--bloom    { background: var(--hero-bloom); }
.ix-hero--indigo   { background: var(--hero-indigo); }
.ix-hero--mist     { background: var(--hero-mist); }
.ix-hero::after {
  content: "";
  position: absolute; right: -30px; top: -30px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  pointer-events: none;  /* 装饰光斑：不能拦截 hero 内按钮的点击（曾挡住 /book 检索按钮） */
}
.ix-hero h1 { margin: 0 0 6px; font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.ix-hero p { margin: 0; opacity: 0.92; font-size: var(--fs-sm); }

/* ============== Daily Quote ============== */
.ix-quote {
  background: var(--c-card);
  border-radius: var(--r-card);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
  border: 1px solid var(--c-line);
}
.ix-quote .ix-quote-text { font-size: var(--fs-base); font-weight: var(--fw-medium); margin: 0 0 6px; }
.ix-quote .ix-quote-by { color: var(--c-muted); font-size: var(--fs-sm); }

/* ============== Section ============== */
.ix-section { margin-bottom: 18px; }
.ix-section-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.ix-section-h h2 { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-bold); }
.ix-section-h a { font-size: var(--fs-sm); color: var(--c-muted); }

/* ============== Topics grid ============== */
.ix-topics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
/* 2026-07-24：/ 与 /topic 的「主题」图标横向居中。
   旧实现靠 .ix-topic 的 text-align:center + span 上的 inline width:48px，但 span 是
   inline 元素，width/height 被忽略，实际只占 emoji 字符宽度；emoji 字形本身带视觉
   偏置（不同字体 baseline 不同），整体看起来"不够正"。
   改为 flex 列布局 + align-items:center 强制水平居中：
     - 图标（无论 span 还是 img）按实际渲染宽度居中
     - 文字 div 仍然全宽 + text-align:center，居中效果一致
   .ix-topic 是 <a>，display:inline-flex 在 grid item 上下文里也成立。 */
.ix-topic {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--c-card);
  border-radius: var(--r-card);
  padding: 14px 8px;
  border: 1px solid var(--c-line);
  transition: transform .15s ease;
}
.ix-topic:active { transform: scale(0.97); }
.ix-topic .ix-topic-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xl);
  margin-bottom: 4px;
  /* width/height 由 topic_icon 模板 tag 通过 inline style 注入（默认 48px） */
}
.ix-topic .ix-topic-name {
  font-size: var(--fs-sm); color: var(--c-text);
  text-align: center; width: 100%;
}

/* ============== Card list (content cards) ============== */
.ix-list { display: grid; gap: 12px; margin-top: 22px;
  /* 2026-07-24：去掉 <ul> 默认 padding-left(40px) 和 list-style 圆点，
     避免空状态时左侧出现孤零零的小圆点（如 /u/:id 「暂无公开笔记」）；
     也避免列表项左侧有 40px 视觉空白，让 padding 控制实际留白。 */
  padding-left: 0; list-style: none;
}
.ix-list-item { list-style: none; }
.ix-card-row {
  display: flex; gap: 12px;
  background: var(--c-card);
  border-radius: var(--r-card);
  padding: 12px;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
}
.ix-card-cover {
  flex: 0 0 96px;
  height: 72px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #c7d2fe, #a5b4fc);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  overflow: hidden;
}
.ix-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.ix-card-info { flex: 1; min-width: 0; }
.ix-card-title {
  font-size: var(--fs-base); font-weight: var(--fw-semibold); margin: 0 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ix-card-summary {
  color: var(--c-muted); font-size: var(--fs-sm);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ix-card-meta {
  margin-top: 6px; display: flex; gap: 6px; align-items: center;
  color: var(--c-muted); font-size: var(--fs-xs);
}
/* 2026-07-24：图书行卡片——封面在左、文本在右，与官方推荐/最新内容那种「缩略图+摘要」通用
   卡片不同：图书封面是竖版（70x100），文本块纵向居中，整张卡片更接近 /book/:id 的视觉。
   用独立类名 .ix-book-row 而不是改 .ix-card-row，是因为后者被 line 1802 的
   `.ix-card-row{flex-direction:column}` 全局压成竖排（用在了 /me、/group 等场景），
   强行覆写会影响其它页面。 */
.ix-book-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  background: var(--c-card);
  border-radius: var(--r-card);
  padding: 12px;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.ix-book-row:hover {
  border-color: var(--c-brand);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.ix-book-row:active { transform: translateY(0); }
.ix-book-row .ix-card-cover {
  flex: 0 0 70px;
  width: 70px;
  height: 100px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, #c7d2fe, #a5b4fc);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  overflow: hidden;
}
.ix-book-row .ix-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.ix-book-row .ix-card-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.ix-book-row .ix-card-title {
  font-size: var(--fs-base); font-weight: var(--fw-semibold); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ix-book-row .ix-card-summary {
  color: var(--c-muted); font-size: var(--fs-sm);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ix-book-row .ix-card-meta {
  margin-top: 2px;
}
/* 2026-07-24：内容行卡片——封面在左、文本在右；封面 96x72 (4:3)，与首页「编辑精选」(.ix-card-cover)
   同尺寸同比例；≥980px 视窗下放大到 140x96，与首页编辑精选节奏一致。
   与 .ix-book-row（竖版封面 70x100）区分：内容用横版 4:3 缩略图，图书用竖版封面照。
   用独立类名而不是改 .ix-card-row，原因同 .ix-book-row——后者被 line 1864 的
   `.ix-card-row{flex-direction:column}` 全局压成竖排，影响 /me /group 等页面。 */
.ix-content-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  background: var(--c-card);
  border-radius: var(--r-card);
  padding: 12px;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.ix-content-row:hover {
  border-color: var(--c-brand);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.ix-content-row:active { transform: translateY(0); }
.ix-content-row .ix-card-cover {
  flex: 0 0 96px;
  width: 96px;
  height: 72px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #c7d2fe, #a5b4fc);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  overflow: hidden;
}
.ix-content-row .ix-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.ix-content-row .ix-card-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.ix-content-row .ix-card-title {
  font-size: var(--fs-base); font-weight: var(--fw-semibold); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ix-content-row .ix-card-summary {
  color: var(--c-muted); font-size: var(--fs-sm);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ix-content-row .ix-card-meta {
  margin-top: 2px;
}
/* 2026-07-24：/topic 列表项在小视窗（<720px）下的元数据可读性优化。
   .ix-content-row 在小视窗下 info 块横向空间被压缩，分类 tag + 日期 + 时长字数挤在一行
   容易换行重叠/视觉混乱。这里让 .ix-card-meta 在 <720px 走 flex-wrap，并把
   第一个 .ix-tag（分类）用 flex-basis:100% 强制占满整行，日期/时长自然落到第二行。
   阈值 720px 与 .ix-quote-list.ix-book-grid 的双列切换点对齐——≥720px 时回到横向单行，
   信息密度与首页「编辑精选」节奏一致。 */
@media (max-width: 719px) {
  .ix-content-row .ix-card-meta { flex-wrap: wrap; row-gap: 4px; }
  /* 2026-07-24：flex-basis:100% 仅用于"占满整行触发 flex-wrap 换行"，真正渲染宽度靠
     max-width:max-content 锁到内容宽度——避免 tag 背景填满整行显得像一条长条带。
     这样 tag 自身紧凑 + 后续元素自然落到第二行。 */
  .ix-content-row .ix-card-meta > .ix-tag:first-child {
    flex-basis: 100%;
    max-width: max-content;
  }
}
/* 2026-07-22：/me/notes 列表条目新增"笔记日期"行（me.js note.list）。
   与 .ix-card-meta 同行样式区分，给一个独立换行 + 略深颜色，便于扫读。 */
.ix-card-date {
  margin-top: 4px;
  color: var(--c-text);
  font-size: var(--fs-xs);
  opacity: 0.75;
}
/* 2026-07-22：书单目录条目（book_topic_detail 的 .ix-card / .ix-card-link）。
   site.css 之前只有 .ix-card-row，没有 .ix-card —— 条目没有框线。
   补齐边框/卡片背景/序号徽章 + 链接态 hover，与 .ix-quote-item 视觉一致。 */
.ix-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}
.ix-card .ix-seq {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--c-brand-soft);
  color: var(--c-brand);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.ix-card .ix-card-body { flex: 1; min-width: 0; }
.ix-card .ix-card-body h4 {
  font-size: var(--fs-base); font-weight: var(--fw-semibold); margin: 0 0 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ix-card .ix-card-body p { margin: 0; }
a.ix-card-link {
  color: inherit; text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
a.ix-card-link:hover {
  border-color: var(--c-brand);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
a.ix-card-link:active { transform: translateY(0); }
.ix-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--c-brand-soft);
  color: var(--c-brand);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
a.ix-tag,
a.ix-tag:hover,
a.ix-tag:focus,
a.ix-tag:active {
  text-decoration: none;
  outline: none;
}
a.ix-tag:hover { filter: brightness(0.96); box-shadow: 0 0 0 1px currentColor inset; }
.ix-tag.gray { background: #f1f5f9; color: var(--c-text-soft); }
.ix-tag.amber { background: #fef3c7; color: #92400e; }
.ix-tag.green { background: #dcfce7; color: #166534; }

/* 2026-07-22：列表主题筛选条（/book/topic?theme=）——当前生效筛选 + 清除入口 */
.ix-filterbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: var(--fs-sm);
}

/* ============== Empty ============== */
.ix-empty {
  text-align: center; padding: 30px 0; color: var(--c-muted); font-size: var(--fs-sm);
  /* 2026-07-24：在双列网格（.ix-quote-list.ix-book-grid / .ix-list 2 列）容器下，
     .ix-empty 作为单个子元素只占左半列，文字看似「左偏」。这里让它跨满整行，
     配合已有的 text-align:center 实现真正水平居中。不影响单列容器。 */
  grid-column: 1 / -1;
}

/* ============== Article body ============== */
.ix-article {
  background: var(--c-card);
  border-radius: var(--r-card);
  padding: 18px;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
}
.ix-article h1 { font-size: var(--fs-xl); margin: 0 0 10px; line-height: var(--lh-snug); }
.ix-article-meta { color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: 14px; }
.ix-article-body { font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.ix-article-body p { margin: 0 0 1em; }
.ix-article-body h2 { font-size: var(--fs-lg); margin: 1.4em 0 0.5em; }
.ix-article-body blockquote {
  border-left: 3px solid var(--c-brand);
  padding: 4px 12px; margin: 1em 0;
  background: var(--c-brand-soft);
  color: var(--c-text-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.ix-article-body code {
  background: #f1f5f9; padding: 1px 6px; border-radius: var(--r-xs); font-size: 0.92em;
}

/* 笔记 / 想法 / 图书等共用 prose 容器（v1.2 §13 H5 渲染 Quill 输出，2026-07-20）
 * 后端已把 ql-* className 展开为 inline style，所以此处只补基础段落节奏；
 * 不动 font-family/font-size（被 inline style 覆盖）。 */
.ix-prose { font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.ix-prose p { margin: 0 0 0.85em; }
.ix-prose h1, .ix-prose h2, .ix-prose h3, .ix-prose h4 {
  font-weight: var(--fw-semibold); line-height: var(--lh-snug); margin: 1.2em 0 0.5em;
}
.ix-prose h1 { font-size: var(--fs-xl); letter-spacing: var(--tracking-tight); }
.ix-prose h2 { font-size: var(--fs-xl); letter-spacing: var(--tracking-tight); }
.ix-prose h3 { font-size: var(--fs-base); }
.ix-prose h4 { font-size: var(--fs-md); }
/* 2026-07-29：标题负字距精致感 — 覆盖 .ix-hero / .ix-article / .ix-me-name 等独立 heading */
.ix-hero h1, .ix-article h1, .ix-me-name, .ix-note-page > h1, .ix-page-header-sm h1, .ix-form-card h2 {
  letter-spacing: var(--tracking-tight);
}
.ix-prose ul, .ix-prose ol { margin: 0 0 0.85em; padding-left: 1.5em; }
.ix-prose li { margin: 0 0 0.3em; }
.ix-prose blockquote {
  border-left: 3px solid var(--c-brand);
  padding: 4px 12px; margin: 0.85em 0;
  background: var(--c-brand-soft);
  color: var(--c-text-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.ix-prose code {
  background: #f1f5f9; padding: 1px 6px; border-radius: var(--r-xs); font-size: 0.92em;
}
.ix-prose pre {
  background: #f8fafc; padding: 12px 14px; border-radius: var(--r-md);
  overflow-x: auto; font-size: 0.92em; line-height: var(--lh-base);
}
.ix-prose img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin: 0.4em 0; }
.ix-prose a { color: var(--c-brand); text-decoration: underline; }

/* ============== Footer ============== */
/* 2026-07-24：footer 悬浮底部 + 高度按内容自适应；
   - 导航链接 15px（行距 1.3 紧凑）—— 字号大但行距小，整体高度可控
   - meta 行（版权/备案号）保持 12px 略小，避免喧宾夺主
   - z-index 50（低于 toast 100 / modal 9000）
   .ix-main padding-bottom 与 footer 高度联动，默认 88px 约 3 行高度，避免正文被遮。 */
.ix-foot {
  position: fixed; left: 0; right: 0; bottom: 0;
  border-top: 1px solid var(--c-line);
  background: var(--c-card);
  z-index: 50;
  box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.06);
}
.ix-foot-row {
  max-width: 920px; margin: 0 auto;
  padding: 10px var(--pad-x) 4px;
  display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center;
  line-height: var(--lh-snug);
  font-size: var(--fs-sm); color: var(--c-muted);
}
.ix-foot-row a { color: var(--c-muted); font-size: var(--fs-sm); }
.ix-foot-row + .ix-foot-row { border-top: 1px dashed var(--c-line); padding-top: 4px; padding-bottom: 6px; }
.ix-foot-meta { font-size: var(--fs-xs); line-height: var(--lh-snug); }
.ix-foot-meta a { font-size: var(--fs-xs); }

/* ============== Toast ============== */
.ix-toast {
  position: fixed; left: 50%; bottom: 30%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15, 23, 42, 0.9);
  color: #fff; padding: 8px 14px; border-radius: var(--r-md);
  font-size: var(--fs-sm); opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 100;
  max-width: 80vw;
}
.ix-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ix-toast.err { background: #dc2626; }
.ix-toast.ok { background: #059669; }

/* ============== Forms / Auth ============== */
.ix-form-card {
  background: var(--c-card);
  border-radius: var(--r-card);
  padding: 22px;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
  max-width: 420px;
  margin: 20px auto;
}
.ix-form-card h2 { margin: 0 0 14px; font-size: var(--fs-xl); }
.ix-form-row { margin-bottom: 12px; }
.ix-form-row label {
  display: block; font-size: var(--fs-sm); color: var(--c-muted);
  margin-bottom: 4px;
}
.ix-input {
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: var(--fs-base);
  outline: none;
  background: var(--c-card);
}
.ix-input:focus { border-color: var(--c-brand); }
/* 2026-07-24：补 .ix-textarea 默认宽 100%（沿用 .ix-input 视觉风格）；
   之前无定义 → 退回浏览器默认（~200px），/member/messages/compose 内容框明显偏小。 */
textarea.ix-textarea,
textarea.ix-input {
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: var(--fs-base);
  font-family: inherit;
  line-height: var(--lh-base);
  outline: none;
  background: var(--c-card);
  color: var(--c-text);
  resize: vertical;
  min-height: 64px;
  box-sizing: border-box;
}
textarea.ix-textarea:focus,
textarea.ix-input:focus { border-color: var(--c-brand); }

/* === /member/messages/compose 表单排版（2026-07-24）===
   .ix-composer 表单块：纵向 flex，gap 控制字段间距；
   .ix-field-row 横向控件排（图验 / 复选 / 标签组），窄屏 wrap；
   .ix-captcha-row 图验行：图 + 输入 + 提示，窄屏输入/提示换行。 */
.ix-composer {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ix-composer .ix-form-row { margin-bottom: 0; }
.ix-composer .ix-field-label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin-bottom: 6px;
}
.ix-composer .ix-field-label .ix-req { color: var(--c-err); margin-left: 2px; }
.ix-composer .ix-field-label .ix-hint {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  font-weight: normal;
  margin-left: 6px;
}
.ix-composer .ix-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.ix-composer .ix-field-row-check { gap: 14px; }
.ix-composer .ix-captcha-row { gap: 10px; }
.ix-composer .ix-captcha-img {
  height: 44px;
  width: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xs);
  cursor: pointer;
  flex: 0 0 auto;
}
.ix-composer .ix-captcha-input {
  flex: 0 0 140px;
  width: 140px;
}
.ix-composer .ix-captcha-hint { font-size: var(--fs-xs); }
.ix-composer .ix-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
}
.ix-composer .ix-check input { width: auto; }
.ix-composer-toolbar {
  margin-top: 6px;
  border-top: 1px solid var(--c-line);
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ix-composer-toolbar .ix-btn {
  /* 取消按钮不要全宽（/group/mine 风格），但主按钮「发送」保持 .primary 的全宽视觉重量 */
  flex: 0 0 auto;
}
.ix-composer-toolbar .ix-composer-result {
  margin-left: auto;
  font-size: var(--fs-sm);
}
/* 窄屏：图验输入占满 / 提示换行；底部按钮换行后撑开 */
@media (max-width: 480px) {
  .ix-composer .ix-captcha-input { flex: 1 1 120px; width: auto; min-width: 0; }
  .ix-composer .ix-captcha-hint { flex-basis: 100%; }
  .ix-composer-toolbar .ix-btn { flex: 1 1 auto; min-width: 0; }
  .ix-composer-toolbar .ix-composer-result { flex-basis: 100%; margin-left: 0; }
}

/* === /member/messages/compose 收件人卡片（2026-07-24）===
   单发 / 群发共用的「卡片 + × 移除」；群发搜索面板走 .ix-rcpt-add-panel。
   颜色全部用既有 ix-* 变量，保持与其它模块统一。 */
.ix-rcpt-chip-host {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px dashed var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-card);
  margin-bottom: 8px;
}
.ix-rcpt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--c-brand-soft);
  color: var(--c-text);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  max-width: 100%;
}
.ix-rcpt-chip-name { font-weight: var(--fw-medium); }
.ix-rcpt-chip-id,
.ix-rcpt-chip-uid { font-size: var(--fs-xs); color: var(--c-muted); }
.ix-rcpt-chip-x {
  border: 0;
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
  font-size: var(--fs-md);
  line-height: var(--lh-tight);
  padding: 0 2px;
}
.ix-rcpt-chip-x:hover { color: var(--c-err, #ef4444); }
.ix-rcpt-empty { font-size: var(--fs-xs); }
.ix-rcpt-add-panel { margin-top: 8px; }
.ix-rcpt-result {
  margin-top: 8px;
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-card);
}
.ix-rcpt-result-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--c-text);
  font-size: var(--fs-sm);
}
.ix-rcpt-result-row:last-child { border-bottom: 0; }
.ix-rcpt-result-row:hover { background: var(--c-brand-soft); }
.ix-rcpt-result-row:disabled,
.ix-rcpt-result-row[disabled] {
  cursor: not-allowed;
  color: var(--c-muted);
  background: transparent;
}
.ix-rcpt-result-name { font-weight: var(--fw-medium); }
.ix-rcpt-result-meta { font-size: var(--fs-xs); color: var(--c-muted); }
.ix-modal .ix-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: var(--fw-semibold);
  margin-bottom: 10px;
  color: var(--c-text);
}
.ix-modal .ix-modal-head .ix-btn {
  padding: 4px 10px;
  font-size: var(--fs-sm);
  width: auto;
}
.ix-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: var(--c-card); color: var(--c-text);
  font-size: var(--fs-base); cursor: pointer;
}
.ix-btn.primary {
  background: var(--c-brand); border-color: var(--c-brand); color: #fff;
  width: 100%; font-weight: var(--fw-semibold);
}
.ix-btn.primary:disabled { opacity: 0.6; }
/* 2026-07-24：/register 协议未勾选时的视觉禁用（替代之前的 :disabled；
   真正禁用由 JS 拦截 submit；这样即便 JS 加载失败也不会让按钮永远按不动） */
.ix-btn.ix-btn-locked {
  background: var(--c-muted);
  border-color: var(--c-muted);
  cursor: not-allowed;
  opacity: 0.7;
}
/* 2026-07-24：表单字段级错误提示——与 ix-field-label 同行内联，
   与 ix-hint 视觉区分（红色 vs 灰色），hidden 属性控制显隐。 */
.ix-field-err {
  display: inline-block;
  margin-left: 8px;
  font-size: var(--fs-xs);
  color: var(--c-err, #ef4444);
  font-weight: var(--fw-medium);
}
.ix-field-err[hidden] { display: none; }
/* 错误状态下的输入框描边——内容/验证码字段红边
   （收件人区是 chip 宿主，单独加 .ix-rcpt-chip-host.is-invalid 红边） */
.ix-input.is-invalid {
  border-color: var(--c-err, #ef4444);
  background: rgba(239, 68, 68, 0.04);
}
.ix-input.is-invalid:focus {
  border-color: var(--c-err, #ef4444);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}
.ix-rcpt-chip-host.is-invalid {
  border-color: var(--c-err, #ef4444);
  border-style: solid;
  background: rgba(239, 68, 68, 0.04);
}
/* 2026-07-24：写信页 / 注册页等内联错误/成功提示卡片样式。
   替代之前的纯灰字「请输入内容」inline 文本——视觉太弱，用户反映
   「错误了但我根本没看到提示」。这里给一个浅色背景框 + 左边色条，
   跟 .ix-quote-extended / .ix-verify-state 同款节奏。 */
.ix-alert {
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  border-left: 3px solid var(--c-muted);
  background: #f8fafc;
  color: var(--c-text);
  word-break: break-word;
}
.ix-alert.err {
  border-left-color: var(--c-err, #ef4444);
  background: #fef2f2;
  color: #991b1b;
}
.ix-alert.ok {
  border-left-color: var(--c-ok, #10b981);
  background: #ecfdf5;
  color: #065f46;
}
.ix-alert.loading {
  border-left-color: var(--c-brand);
  background: #eff6ff;
  color: #1e40af;
}
.ix-alert strong { font-weight: var(--fw-semibold); }

/* 表单顶部反馈区：发送后立即出现，sticky 浮在表单头，无论页面怎么滚都看得到 */
.ix-composer-result-top {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0 0 14px;
  padding: 0;
}
.ix-composer-result-top[hidden] { display: none; }
.ix-composer-result-top > .ix-alert { margin: 0; }

.ix-form-foot { text-align: center; font-size: var(--fs-sm); color: var(--c-muted); margin-top: 10px; }

/* ============== Profile Tabs ============== */
.ix-tabs {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 4px 0;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 14px;
}
.ix-tabs button {
  border: 0; background: transparent; padding: 8px 4px;
  font-size: var(--fs-sm); color: var(--c-muted); cursor: pointer;
  white-space: nowrap;
}
.ix-tabs button.on { color: var(--c-brand); border-bottom: 2px solid var(--c-brand); }

/* ============== About / Cards ============== */
.ix-about {
  background: var(--c-card);
  border-radius: var(--r-card);
  padding: 20px;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-sm);
}
.ix-about h2 { font-size: var(--fs-lg); margin: 18px 0 6px; }
.ix-about p { color: var(--c-text-soft); }

/* ============== Quote Detail ============== */
.ix-quote-list { display: grid; gap: 10px; }
/* 2026-07-24：/book 列表在 ≥720px 视窗下走双列。仅当容器加了 .ix-book-grid 修饰类时生效，
   不影响 /quote /think 等同样使用 .ix-quote-list 的页面。配合 .ix-book-row 让两列
   各放一整张图书卡片，窄屏（<720px）回到单列 + 大封面节奏，避免两列挤压。 */
@media (min-width: 720px) {
  .ix-quote-list.ix-book-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
.ix-quote-item {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 14px;
  /* 裸 div 形态（/think /quote 等无跳转的列表项）hover 反馈：
     transition 与下面 a.ix-quote-item-link 保持 0.12s 节奏 */
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.ix-quote-item:hover {
  border-color: var(--c-brand);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.ix-quote-item:active { transform: translateY(0); }
.ix-quote-item .q { font-size: var(--fs-md); font-weight: var(--fw-medium); margin-bottom: 4px; }
.ix-quote-item .by { font-size: var(--fs-xs); color: var(--c-muted); }
/* 2026-07-22：共读列表项底栏里的日期范围单独成行 — 与上方 tags 之间留出空隙 */
.ix-quote-item .ix-quote-date { margin-top: 6px; }

/* 2026-07-21：note 点赞按钮的"已点赞"视觉态——红色实心 + 加粗描边 */
.ix-btn-like-active {
  color: #ef4444;
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
  font-weight: var(--fw-semibold);
}

/* 2026-07-21：列表项底栏（左侧分类 tag + 右侧功能按钮）；与 a.ix-quote-item-link 配对 */
.ix-quote-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.ix-quote-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  /* 2026-07-22：标签超出容器宽度时允许换行——避免单个 ix-tag 单独落到下一行被孤立。
     /book/topic/<code> 的「进行中的专题共读」有 4 个标签，≤360px 视窗容易把某个挤到独行。 */
  flex-wrap: wrap;
}
/* 2026-07-21：脚行内的操作区——父级 .ix-quote-item-foot 已用 space-between 推到最右，不再需要独立顶部间距 */
.ix-quote-item-foot > .ix-quote-actions {
  margin-top: 0;
  flex: 0 0 auto;
}

/* 2026-07-21：列表项右侧操作（分类 tag + 收藏按钮）；与 a.ix-quote-item-link 配对 */
.ix-quote-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

/* 列表项作链接时（/topic /book /note） */
a.ix-quote-item-link { display: block; color: inherit; transition: transform .12s, box-shadow .12s, border-color .12s; }
a.ix-quote-item-link:hover { transform: translateY(-1px); border-color: var(--c-brand); box-shadow: var(--shadow-sm); }
a.ix-quote-item-link:active { transform: translateY(0); }
a.ix-quote-item-link .q { color: var(--c-text); }
/* 2026-07-22：stretched-link 卡片——整卡可点跳详情，卡内 .ix-above（主题筛选）独立可点。
   外层不能再嵌套 <a>（非法 HTML 会被浏览器提前闭合导致 .by 错位）。 */
.ix-quote-item-stretch { position: relative; }
.ix-stretch-link {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
}
.ix-quote-item-stretch .ix-above { position: relative; z-index: 2; }
/* 2026-07-24：图书专题列表项封面——与 /book 列表(.ix-book-row)一致的竖版 70x100 封面在左、
   文本在右。基于 stretched-link 卡片扩展为 flex 行；双类选择器保证覆盖 .ix-card-cover 基样与
   ≥980px 媒体查询里的单类 .ix-card-cover 尺寸。 */
.ix-quote-item-cover { display: flex; flex-direction: row; align-items: stretch; gap: 12px; }
.ix-quote-item-cover .ix-card-cover {
  flex: 0 0 70px; width: 70px; height: 100px; border-radius: var(--r-sm);
  background: linear-gradient(135deg, #c7d2fe, #a5b4fc);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-semibold); overflow: hidden;
}
.ix-quote-item-cover .ix-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.ix-quote-item-cover .ix-quote-item-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}

/* 无限滚动状态（v1.2 §13 H5）：
 * - sentinel 是 1px 的「占位」div，IO 通过它探测列表何时被滚到底
 * - status 是「已显示全部 / 加载中…」的提示条，缺省 hidden
 */
.ix-inf-sentinel { height: 1px; }
.ix-inf-status { padding: 16px 0; text-align: center; color: var(--c-muted); font-size: var(--fs-xs);
  /* 2026-07-24：与 .ix-empty 同款——在双列网格（.ix-quote-list.ix-book-grid 等）容器下，
     status 作为单个 grid item 默认落在第 1 列，文字看似左偏。加 grid-column: 1/-1
     跨满整行，配合 text-align:center 真正水平居中。非网格容器下该属性无副作用。 */
  grid-column: 1 / -1;
}

/* ============== Responsive ============== */
@media (max-width: 719px) {
  /* 窄屏：平铺菜单收起，露汉堡按钮 */
  .ix-menu     { display: none; }
  .ix-menu-btn { display: flex; }
  /* 2026-07-21：窄屏 brand + search + 40px 汉堡，gap 略收窄避免被挤换行 */
  .ix-nav-inner { gap: 8px; }
  .ix-search { margin: 0 2px; }
}
@media (min-width: 720px) and (max-width: 979px) {
  /* 2026-07-21：720-979px 临界区 9 个菜单项偏宽；继续压缩避免 search 缩成"搜索主题、"
     9 项 × (~30px 字符 + 11px padding) × 6px gap = ~340px，给 search 留 ≥160px */
  .ix-menu { gap: 4px; }
  .ix-menu a { font-size: var(--fs-xs); padding: 5px 5px; }
}
@media (min-width: 720px) {
  .ix-topics { grid-template-columns: repeat(6, 1fr); }
  /* 桌面态兜底：强制隐藏抽屉/遮罩，解锁 body 滚动，避免窄屏→桌面 resize 残留 */
  .ix-menu-btn { display: none; }
  .ix-menu-drawer,
  .ix-menu-drawer-mask { display: none !important; }
  body.ix-menu-open { overflow: ''; }
}
@media (min-width: 980px) {
  .ix-menu { gap: 14px; }
  .ix-menu a { font-size: var(--fs-sm); padding: 6px 10px; }
}
@media (min-width: 980px) {
  .ix-card-cover { flex-basis: 140px; height: 96px; }
  .ix-list { grid-template-columns: 1fr 1fr; }
  /* 2026-07-24：.ix-content-row 封面在 ≥980px 视窗下与首页编辑精选一致放大到 140x96（仍 4:3）。
     .ix-book-row 封面不动（保留竖版 70x100，符合图书惯例）。 */
  .ix-content-row .ix-card-cover { flex-basis: 140px; width: 140px; height: 96px; }
}
/* 用户偏好减弱动画 */
@media (prefers-reduced-motion: reduce) {
  .ix-menu-drawer,
  .ix-menu-drawer-mask,
  .ix-menu-btn-bars,
  .ix-menu-btn-bars::before,
  .ix-menu-btn-bars::after { transition: none; }
}

/* ============== 个人中心 /me（仪表盘 + 子页共用） ============== */
/* 资料头 */
.ix-me-head {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #6366f1, #38bdf8);
  color: #fff; border-radius: var(--r-lg); padding: 18px 16px; margin-bottom: 16px;
  flex-wrap: wrap;
}
.ix-me-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: 0 0 56px;
  background: rgba(255,255,255,.25); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xl); font-weight: var(--fw-bold); overflow: hidden;
}
.ix-me-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ix-me-head-info { flex: 1; min-width: 0; }
.ix-me-name-row { display: flex; align-items: center; gap: 8px; }
.ix-me-name { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.ix-me-sub { font-size: var(--fs-sm); opacity: .9; margin-top: 2px; }
.ix-me-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ix-me-head-actions .ix-btn {
  background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.4);
}
/* 2026-07-23：/u/<id> hero 用 ix-action-row 装「关注 / 加好友 / 拉黑」等动作（参考 /group/mine）。
   全局 .ix-action-row 没有 display:flex（site.css:1726），这里给它单独声明。 */
.ix-me-head-actions .ix-action-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.ix-me-head-actions .ix-action-row .ix-btn-sm { padding: 6px 12px; font-size: var(--fs-sm); }
.ix-me-head-actions .ix-action-row .ix-btn-primary {
  background: var(--c-brand); color: #fff; border-color: transparent;
}
/* 2026-07-24：hero 内的「拉黑」等破坏性次要按钮用 ghost 风格——
   与「关注/解除好友」区分开（不喧宾夺主，也不让它看起来像「默认选中」）。
   提高选择器特异性以覆盖上面 .ix-me-head-actions .ix-btn 的通用样式。 */
.ix-me-head-actions .ix-action-row .ix-btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.78);
}
.ix-me-head-actions .ix-action-row .ix-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
/* 2026-07-22 /me hero 窄屏：信息块被「编辑资料 / 退出登录」挤压。
   info 仍与 56px 头像同列（flex:1 1 auto，按内容+剩余宽度自然伸缩），
   actions 用 flex-basis:100% 强制换行并靠右。 */
@media (max-width: 480px) {
  .ix-me-head-info     { flex: 1 1 auto; min-width: 0; }
  .ix-me-head-actions  { flex: 0 0 100%; justify-content: flex-end; }
}

/* 徽章（角色 / 未读数） */
.ix-me-badge {
  display: inline-block; font-size: var(--fs-xs); line-height: var(--lh-tight);
  padding: 3px 7px; border-radius: var(--r-md);
  background: rgba(255,255,255,.28); color: #fff;
}
#ix-notice-badge {
  background: var(--c-err); color: #fff; margin-left: 4px; vertical-align: middle;
}

/* 会员卡内的卡片行沿用 .ix-card-row */
.ix-me-membership { margin-top: 4px; }

/* 2026-07-22 /me 收藏行的取消按钮布局。
   .ix-card-row 默认是 row flex（.ix-card-info{flex:1} 占满、把按钮顶到右侧）；
   第 1418 行的 .ix-card-row{flex-direction:column} 会把它压成竖排，
   所以 .ix-fav-row 必须显式回到 row + 纵向居中。
   .ix-fav-remove 是「取消收藏」按钮：副按钮样式，不夺视觉焦点，点击阻止跳转 + 删除整行。 */
.ix-fav-row,
.ix-card-row.ix-fav-row,
/* 2026-07-25：/me/notes 私密笔记「删除」按钮，与收藏取消同框结构（同列右靠、行内竖直居中）。
   选择器加 .ix-card-row 提权，与 .ix-fav-row 同款手法压住第 1418 行的 flex-direction: column。 */
.ix-note-row,
.ix-card-row.ix-note-row {
  padding-right: 12px;
  flex-direction: row;
  align-items: center;
}
.ix-fav-link { color: inherit; text-decoration: none; min-width: 0; }
/* 2026-07-25：note 列表行内链接占位，继承收藏行的链接排版，免得重复定义 */
.ix-note-row .ix-card-info { color: inherit; text-decoration: none; min-width: 0; display: block; }
.ix-fav-remove,
.ix-note-remove {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  align-self: center;
}
.ix-fav-remove:hover,
.ix-note-remove:hover { border-color: var(--c-err, #e15554); color: var(--c-err, #e15554); }
.ix-fav-remove:disabled,
.ix-note-remove:disabled { opacity: 0.6; cursor: default; }

/* 加载更多按钮 */
.ix-load-more {
  display: block; width: 100%; margin-top: 12px; padding: 10px;
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-md);
  color: var(--c-brand); font-size: var(--fs-sm); cursor: pointer;
}
.ix-load-more:active { transform: scale(0.99); }

/* 账户设置行 */
.ix-me-setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px; background: var(--c-card);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  margin-bottom: 8px; color: var(--c-text); cursor: pointer; text-decoration: none;
  font-size: var(--fs-base);
}
.ix-me-setting-val { display: flex; align-items: center; gap: 8px; color: var(--c-muted); font-size: var(--fs-sm); }
.ix-me-chevron { color: var(--c-muted); font-size: var(--fs-lg); }

/* 通知未读圆点 + 行内链接按钮 */
.ix-notice-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-err); margin-right: 6px; vertical-align: middle;
}
.ix-card-row.is-unread { border-left: 3px solid var(--c-brand); }
.ix-linklike {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--c-brand); font-size: var(--fs-sm);
}

/* ========== /me 改造（2026-07-22）：格子平铺启动页 + 子页纵向面板 ========== */

/* 未登录兜底横幅（hero 隐藏后显示） */
.ix-me-guest {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: 18px 16px; margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.ix-me-guest-text { font-size: var(--fs-sm); color: var(--c-text); }

/* 功能瓦片网格：flex-wrap，小视窗自适应列数（每格最小 88px） */
.ix-me-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 16px;
}
.ix-me-tile {
  flex: 1 1 88px; min-width: 88px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px 8px;
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--r-card); box-shadow: var(--shadow-sm);
  color: var(--c-text); text-align: center;
  position: relative;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ix-me-tile:hover { border-color: var(--c-brand); box-shadow: var(--shadow-md); }
.ix-me-tile:active { transform: scale(.97); }
.ix-me-tile-ico { font-size: var(--fs-2xl); line-height: var(--lh-tight); }
.ix-me-tile-label { font-size: var(--fs-sm); color: var(--c-text); }
.ix-me-tile-badge {
  position: absolute; top: 8px; right: 10px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); line-height: var(--lh-tight); font-weight: var(--fw-semibold);
  color: #fff; background: var(--c-err); border-radius: var(--r-pill);
}

/* 子页纵向面板：替代横向 .ix-card（.ix-card 是 display:flex row，会把标题/正文挤成一行） */
.ix-me-panel {
  display: block;
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--r-card); box-shadow: var(--shadow-sm);
  padding: 16px 16px; margin-bottom: 16px;
}
.ix-me-panel-h { margin-bottom: 12px; }
.ix-me-panel-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.ix-me-panel-body { display: block; }
.ix-me-form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ix-me-pwd-form { margin-top: 8px; }

/* ============== 2026-07-23：M14 列表项通用布局 ==============
   复用于 /member/* 的好友 / 好友请求 / 站内信 / 黑名单 / 举报列表。
   - 默认 flex 行：左主内容 + 右操作；小视窗换行让按钮组满铺。
   - 与 .ix-me-panel 配合避免「横向 card 把标题/正文挤成一行」。
*/
.ix-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}
.ix-list-item-main { flex: 1 1 auto; min-width: 0; }
.ix-list-item-main a { font-weight: var(--fw-semibold); }
.ix-list-item-actions {
  flex: 0 0 auto;
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end;
}
.ix-list-item-meta {
  font-size: var(--fs-xs); color: var(--c-muted);
  margin-top: 4px;
  word-break: break-all;
}
.ix-list-item-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: var(--fw-semibold);
  word-break: break-all;
}
.ix-list-item-id {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  background: var(--c-bg);
  padding: 1px 6px;
  border-radius: var(--r-xs);
}
.ix-list-item-sep { margin: 0 4px; color: var(--c-line); }
@media (max-width: 480px) {
  .ix-list-item { padding: 12px 12px; gap: 10px; flex-wrap: wrap; }
  .ix-list-item-main { flex: 1 1 100%; }
  .ix-list-item-actions { flex-basis: 100%; justify-content: flex-start; }
  .ix-list-item-actions .ix-btn { flex: 1 1 auto; min-width: 0; }
}

/* ============== 2026-07-24：站内信「发件人 / 收件人」两端展示 ==============
   每个端（发件人 / 收件人）独占一行；行内 = label + 昵称 + @username + 「用户主页」链接。
   - .ix-msg-people：纵向 flex，每个 cell 占整行。
   - .ix-msg-people-cell：label 左 + 「昵称 @username · 用户主页」一行 flex 排版。
   - .ix-msg-people-name：主名（昵称），链接到 /u/<id>。
   - .ix-msg-people-link：「用户主页」次级链接 / 箭头，单独按钮感。
   - 「我自己」走 .is-self 灰显：name 灰，链接色也淡一些。
   - 收件人 ≥ 4 时折叠：默认展示前 3 个 + 「+N 更多」toggle。
*/
.ix-msg-people {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.ix-msg-people-cell {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px;
  min-width: 0;
}
.ix-msg-people-label {
  flex: 0 0 4em;
  color: var(--c-muted);
  font-size: var(--fs-xs);
}
.ix-msg-people-value {
  display: inline-flex; align-items: baseline; gap: 6px;
  min-width: 0;
  overflow: hidden;
  flex: 1 1 auto;
}
.ix-msg-people-name {
  color: var(--c-fg);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12em;
}
a.ix-msg-people-name:hover { color: var(--c-brand); }
.ix-msg-people-uid {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: var(--c-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.ix-msg-people-link {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--c-brand);
  text-decoration: none;
  white-space: nowrap;
}
.ix-msg-people-link:hover { text-decoration: underline; }
.ix-msg-people-link::before {
  content: "↗ ";
  font-size: var(--fs-xs);
  opacity: 0.7;
}
.ix-msg-people-cell.is-self .ix-msg-people-name { color: var(--c-muted); font-weight: var(--fw-medium); }
.ix-msg-people-cell.is-self .ix-msg-people-link { color: var(--c-muted); }
.ix-msg-people-cell.is-mine .ix-msg-people-name { color: var(--c-muted); font-weight: var(--fw-medium); }
.ix-msg-people-more {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  cursor: pointer;
  user-select: none;
}
.ix-msg-people-more:hover { color: var(--c-brand); }
.ix-msg-recipients-toggle[hidden] { display: none; }
@media (max-width: 480px) {
  .ix-msg-people-label { flex-basis: 4em; }
}

/* ============== 详情页「发件人/收件人」摘要块 ============== */
/* 沿用 .ix-card-flat 设计：在 .ix-message-body 上方独立一行，呈现双向参与者。 */
.ix-msg-people-summary {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 0;
  padding: 10px 12px;
  background: var(--c-bg);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  color: var(--c-muted);
}
.ix-msg-people-summary .ix-msg-people { margin-top: 0; }
.ix-msg-receivers-list {
  margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 6px 10px;
}
.ix-msg-receivers-list a { font-weight: var(--fw-medium); }

/* ============== M14 页面搜索建议（好友搜索 / 站内信选人） ============== */
.ix-friend-suggest {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 4px 0 0 !important;
  padding: 8px 10px;
  text-align: left;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-weight: var(--fw-regular);
}
.ix-friend-suggest + .ix-friend-suggest { margin-top: 0 !important; }
.ix-friend-suggest-name { font-weight: var(--fw-semibold); color: var(--c-text); font-size: var(--fs-sm); }
.ix-friend-suggest-id { font-size: var(--fs-xs); color: var(--c-muted); }

/* ============== M14 顶部分段 tab（在 .ix-me-panel 内顶部） ==============
   /member/friend-requests / /member/messages 顶部 tab 切换。
*/
.ix-m14-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 12px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}
.ix-m14-tab {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  background: transparent;
  border: 1px solid var(--c-line);
}
.ix-m14-tab.is-active {
  color: #fff; background: var(--c-brand); border-color: transparent;
}
.ix-m14-tab .ix-m14-tab-count {
  display: inline-block; min-width: 18px;
  margin-left: 6px; padding: 0 6px;
  font-size: var(--fs-xs); line-height: 16px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
}
.ix-m14-tab.is-active .ix-m14-tab-count { background: rgba(255, 255, 255, 0.25); }

/* ============== M14 页面内嵌小工具条（搜索 / 顶部链接） ============== */
.ix-m14-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 12px;
}
.ix-m14-toolbar .ix-link { color: var(--c-brand); font-size: var(--fs-sm); }
@media (max-width: 480px) {
  .ix-m14-toolbar { gap: 6px; }
  .ix-m14-toolbar .ix-input { flex: 1 1 100%; }
}

/* 账户设置行支持 <button>：撑满 + 去按钮默认样式 + 左对齐 */
button.ix-me-setting-row {
  width: 100%; font: inherit; text-align: left; margin-bottom: 0;
}

/* ============== Book detail (/book/<id>) 排版 ==============
 * 2026-07-21 调整：
 *  - 封面 + 书名仍走 ix-book-hero；属性行从 hero 抽出到 ix-book-meta 框内
 *  - 共读计划相关（表单 + 进行中的共读）统一框到 ix-coread-group
 *  - 全部使用 flex/grid + min-width:0，窄屏不挤压；≥540 切换为多列布局
 */

/* 封面 + 书名（hero 简化版：只保留视觉头，不再挤属性行） */
.ix-book-hero {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.ix-cover-lg {
  flex: 0 0 auto;
  width: 96px; height: 128px;
  border-radius: var(--r-md);
  background: var(--c-brand-soft);
  object-fit: cover;
}
.ix-book-info { flex: 1; min-width: 0; }
.ix-book-info h1 {
  margin: 0;
  font-size: var(--fs-lg); line-height: var(--lh-snug); font-weight: var(--fw-bold);
  word-break: break-word;
}

/* 1) 图书基本信息框 */
.ix-book-meta {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 14px 14px 12px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.ix-book-meta-h {
  margin: 0 0 10px;
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  display: flex; align-items: center; gap: 6px;
}
.ix-book-meta-h::before {
  content: "";
  display: inline-block;
  width: 3px; height: 14px;
  background: var(--c-brand);
  border-radius: 2px;
}
.ix-book-meta-list {
  list-style: none; padding: 0; margin: 0 0 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.ix-book-meta-list li {
  display: flex; align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
.ix-book-meta-list li:last-child { border-bottom: none; }
.ix-book-meta-key {
  flex: 0 0 64px;
  color: var(--c-muted);
  font-size: var(--fs-sm);
}
.ix-book-meta-val {
  flex: 1; min-width: 0;
  color: var(--c-text);
  word-break: break-word;
}
.ix-book-meta .ix-action-row { margin-top: 4px; }

/* 2026-07-24：基本信息内部布局——属性列表 + 右侧封面。
 * 默认（窄屏）纵向堆叠，封面居中；≥540 切换为「列表左 / 封面右」。
 * 2026-07-24 二次精简：hero 不再放封面，meta 内的封面最大 96×128 即可，列表为视觉主体。 */
.ix-book-meta-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ix-book-meta-body .ix-book-meta-list { margin-bottom: 0; }
.ix-book-meta-cover {
  display: flex;
  justify-content: center;      /* 小视窗居中 */
}
.ix-book-meta-cover img {
  width: 96px; height: 128px;   /* 限死最大尺寸，避免和列表争视觉 */
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
  background: var(--c-brand-soft);
}
@media (min-width: 540px) {
  .ix-book-meta-body {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
  }
  .ix-book-meta-body .ix-book-meta-list { flex: 1; min-width: 0; }
  .ix-book-meta-cover { flex: 0 0 auto; }   /* 靠右不拉伸 */
}
@media (min-width: 540px) {
  .ix-book-meta-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 0;
  }
  .ix-book-meta-list li {
    border-bottom: 1px dashed var(--c-line);
  }
  .ix-book-meta-list li:nth-last-child(-n+2) { border-bottom: none; }
  .ix-book-meta-list li:nth-child(odd) { padding-right: 4px; }
  .ix-book-meta-list li:nth-child(even) { padding-left: 4px; }
}

/* 1.5) 功能按钮块：与 .ix-book-meta 共用外框（card+line+r-card+shadow），内容用分段行。
   - 窄屏（默认 <540px）：每段（state/rating/写笔记）独占一行，按钮在该行内 flex-wrap
   - ≥540px：state / rating 同行 inline-flex 居中，写笔记按钮独立段，整块不挤压
*/
.ix-book-actions {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 14px 14px 12px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.ix-book-actions-h {
  margin: 0 0 10px;
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  display: flex; align-items: center; gap: 6px;
}
.ix-book-actions-h::before {
  content: "";
  display: inline-block;
  width: 3px; height: 14px;
  background: var(--c-brand);
  border-radius: 2px;
}
.ix-book-actions .ix-action-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
}
.ix-book-actions .ix-book-actions-tag {
  display: inline-block;
  font-size: var(--fs-xs); color: var(--c-muted);
  min-width: 0;
  flex: 0 0 auto;
  margin-right: 2px;
}
.ix-book-actions .ix-book-state,
.ix-book-actions .ix-book-rating {
  display: flex; align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}
.ix-book-actions .ix-book-state-btn {
  display: inline-flex; align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-card);
  color: var(--c-text);
  font-size: var(--fs-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .12s, color .12s, background .12s;
}
.ix-book-actions .ix-book-state-btn:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
}
.ix-book-actions .ix-book-state-btn-active {
  border-color: var(--c-brand);
  color: var(--c-brand);
  background: var(--c-brand-soft);
  font-weight: var(--fw-semibold);
}
.ix-book-actions .ix-book-star {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--c-line);
  font-size: var(--fs-lg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .12s, transform .12s;
}
.ix-book-actions .ix-book-star:hover { transform: scale(1.12); }
.ix-book-actions .ix-book-star-active { color: #f59e0b; }
.ix-book-actions .js-book-rating-stat {
  font-size: var(--fs-xs); color: var(--c-muted);
  margin-left: 4px;
}
.ix-book-actions .ix-book-note-btn {
  align-self: stretch;
  width: 100%;
}
@media (min-width: 540px) {
  .ix-book-actions .ix-action-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
  }
  .ix-book-actions .ix-book-state,
  .ix-book-actions .ix-book-rating {
    flex: 0 0 auto;
  }
  .ix-book-actions .ix-book-note-btn {
    margin-left: auto;
    width: auto;
  }
}
.ix-coread-group {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.ix-coread-h {
  margin: 0 0 12px;
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  display: flex; align-items: center; gap: 6px;
}
.ix-coread-h::before {
  content: "";
  display: inline-block;
  width: 3px; height: 14px;
  background: var(--c-accent);
  border-radius: 2px;
}

/* 简介 / 收录于专题：沿用 .ix-book-meta 同款「标题行 + 内容区」外框（card+line+r-card+shadow）。
   2026-07-22：原来复用 .ix-card（无 margin-bottom，两卡相邻贴死），改为独立框并带 12px 下间距。 */
.ix-book-sec {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 14px 14px 12px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.ix-book-sec-h {
  margin: 0 0 10px;
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  display: flex; align-items: center; gap: 6px;
}
.ix-book-sec-h::before {
  content: "";
  display: inline-block;
  width: 3px; height: 14px;
  background: var(--c-brand);
  border-radius: 2px;
}
/* 收录于专题链接列表：清掉默认圆点，用与基本信息一致的虚线分隔行 */
.ix-link-list { list-style: none; padding: 0; margin: 0; }
.ix-link-list li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
.ix-link-list li:last-child { border-bottom: none; }
.ix-link-list a { color: var(--c-brand); text-decoration: none; }
.ix-link-list a:hover { text-decoration: underline; }

.ix-coread-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0 0 6px;
}
.ix-coread-field {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.ix-coread-field > label {
  flex: 0 0 64px;
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.ix-coread-field .ix-input,
.ix-coread-field .ix-select {
  flex: 1; min-width: 0;
  width: auto;          /* 覆盖 .ix-input{width:100%} */
  padding: 8px 10px;
  font-size: var(--fs-sm);
}
.ix-coread-min {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 6px;
}
.ix-coread-min .ix-input { flex: 1; min-width: 0; }
.ix-coread-min .ix-muted { font-size: var(--fs-xs); white-space: nowrap; }
.ix-coread-submit { min-width: 0; }
.ix-coread-submit .ix-btn { width: 100%; }
.ix-coread-tips {
  font-size: var(--fs-xs); color: var(--c-muted);
  margin: 8px 0 0;
  line-height: var(--lh-base);
}
@media (min-width: 540px) {
  .ix-coread-form {
    grid-template-columns: 1.2fr 0.8fr 0.8fr auto;
    align-items: end;
    gap: 10px;
  }
  .ix-coread-submit .ix-btn { width: auto; white-space: nowrap; }
}
.ix-coread-sub {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--c-line);
}
.ix-coread-sub h4 {
  margin: 0 0 6px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--c-muted);
}
.ix-coread-list {
  list-style: none; padding: 0; margin: 0;
}
.ix-coread-list li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}
.ix-coread-list li:last-child { border-bottom: none; padding-bottom: 0; }
.ix-coread-list a { color: var(--c-brand); }

/* 窄屏 (≤360) hero 进一步压缩：封面 72×96 */
@media (max-width: 360px) {
  .ix-book-hero { padding: 10px; gap: 10px; }
  .ix-cover-lg { width: 72px; height: 96px; }
  .ix-book-info h1 { font-size: var(--fs-md); }
  .ix-book-meta-key { flex-basis: 56px; font-size: var(--fs-xs); }
  .ix-coread-field > label { flex-basis: 56px; }
}

/* ============== Chip row / Chip (分类徽章) ==============
 * 2026-07-21 改造 v3：
 *  - 反馈：/book 在紫底 hero 上，原本"灰边+白底"chip 与背景反差不够；要求反色对比
 *  - 默认：白底 + 灰边 + 黑字（白底场景：/group/dashboard、/search 空态、卡片头筛选）
 *  - 紫底 hero 覆盖（`.ix-hero .ix-chip`）：透明背景 + 白半透边框 + 白字；
 *    .on 选中 = 实色白底 + 黑字 + 暗色阴影抬起，与 hero 形成强对比
 *  - 整体可点击区域 ≥30px 高，满足移动端手指热区
 */
.ix-chip-row {
  display: flex; flex-wrap: wrap;
  gap: 10px 10px;            /* row-gap col-gap */
  margin-top: 14px;
  padding-top: 4px;
}
/* 默认样式：白底场景（卡片/页面/ix-empty） */
.ix-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--c-text);
  border: 1.5px solid #d1d5db;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.ix-chip:hover {
  border-color: var(--c-brand);
  color: var(--c-brand);
  background: #fff;
}
.ix-chip:active { transform: scale(0.97); }
.ix-chip.on,
.ix-chip.on:hover,
.ix-chip.on:focus {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 6px 16px rgba(31, 111, 235, 0.32);
}
/* 兼容 /group_dashboard 旧选择器（不破坏已有页面） */
.ix-chip-active {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 6px 16px rgba(31, 111, 235, 0.32);
}

/* 紫底 hero 覆盖：未选 = 透明 + 白半透边 + 白字；选中 = 白底 + 黑字 */
.ix-hero .ix-chip,
.ix-hero .ix-chip-active {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.ix-hero .ix-chip:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.85);
}
.ix-hero .ix-chip.on,
.ix-hero .ix-chip.on:hover,
.ix-hero .ix-chip.on:focus,
.ix-hero .ix-chip-active,
.ix-hero .ix-chip-active:hover {
  background: #fff;
  color: #1c1e26;                       /* 选中：黑字 */
  border-color: #fff;
  box-shadow: 0 6px 18px rgba(var(--shadow-rgb), 0.20);  /* 暗色阴影：在紫底上更"浮" */
}

/* ix-hero-sm：/book /content /search 等用的小尺寸 hero（仅 padding/font 微调） */
.ix-hero-sm { padding: 18px 18px 16px; }
.ix-hero-sm h1 { font-size: var(--fs-xl); margin: 0 0 10px; }
.ix-hero-sm .ix-search-lg { margin-top: 4px; }

/* 窄屏进一步压缩徽章 */
@media (max-width: 360px) {
  .ix-chip { padding: 5px 12px; font-size: var(--fs-xs); min-height: 30px; }
  .ix-chip-row { gap: 8px 8px; }
}

/* ============================================================
 * 2026-07-21 笔记功能增强：/note 过滤条 + /note/create 锁定 chip + 协议同意块
 * ============================================================ */

/* /note 列表 hero 下的过滤条：图书 chip + mine 复选框 */
.ix-filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 12px;
}
/* 2026-07-21：tabs 组（最热 / 最新）靠左侧排；横向间距 24px，与 chip / mine 视觉上拉开。
   2026-07-24：小视窗下 5 个 tab + 一个 CTA pill 单行铺不开会被挤压——
   - 加 flex-wrap 让 tab 自然换行（/group 广场 5 项 / 凭邀请码加入）
   - 用 row-gap+col-gap 单独控制行/列距，避免与 hero 内其它元素贴死
   - 窄屏（≤480）把 24px 列距收紧到 14px、行距 6px，CTA pill 略缩
   - ≤360 进一步：列距 10px + 行距 4px，让 ≤360 视窗下也能两行装下全部 5+1 项 */
.ix-filter-tabs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 24px;
  margin-right: 8px;
}
.ix-filter-tabs .ix-tab {
  display: inline-block;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
.ix-filter-tabs .ix-tab:hover {
  color: #ffffff;
}
.ix-filter-tabs .ix-tab.on {
  color: #ffffff;
  border-bottom-color: #ffffff;
}
/* 2026-07-24：/group 广场 5 个 tab + CTA pill 在 ≤480 视窗（hero 内白字底色）下会被挤变形——
   把列距从 24px 收到 14px、行距 6px；CTA pill 缩小 padding 让"+ 凭邀请码加入"不抢整行。
   ≤360 进一步：列距 10px + 行距 4px，让极窄屏 2~3 行装下全部。 */
@media (max-width: 480px) {
  .ix-filter-tabs { gap: 4px 14px; }
  .ix-filter-tabs .ix-tab { font-size: var(--fs-sm); }
}
@media (max-width: 360px) {
  .ix-filter-tabs { gap: 2px 10px; }
  .ix-filter-tabs .ix-tab { font-size: var(--fs-sm); }
}
.ix-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 4px 4px 10px;
  border-radius: var(--r-pill);
  background: var(--c-brand-soft);
  color: var(--c-brand);
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  max-width: 100%;
}
.ix-filter-chip .ix-filter-clear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  text-decoration: none;
  font-size: var(--fs-sm); line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
}
.ix-filter-chip .ix-filter-clear:hover {
  background: rgba(0, 0, 0, 0.12);
  color: inherit;
}

/* mine 复选框（仅登录态显示） */
.ix-mine-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--c-muted);
  margin-left: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ix-mine-check input[type="checkbox"] {
  width: 16px; height: 16px;
  margin: 0;
  accent-color: var(--c-brand);
  cursor: pointer;
}

/* /note/create 关联图书锁定 chip */
.ix-locked-book {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.ix-tag-locked {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f1f5f9; color: var(--c-text-soft);
  padding: 4px 10px;
}
.ix-tag-lock {
  font-size: var(--fs-xs);
  color: #94a3b8;
  margin-left: 2px;
}
.ix-locked-hint {
  font-size: var(--fs-xs); color: var(--c-muted);
}

/* /note/create 协议同意块 */
.ix-protocol {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin-top: 4px;
}
.ix-protocol-check {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--c-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ix-protocol-check input[type="checkbox"] {
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--c-brand);
}

/* ============================================================
 * 2026-07-22：/note/create（note_edit.html）表单页 flex 竖排 + 窄屏兼容
 * 根因：外层复用 .ix-card（flex 横排 + align-items:center），h1 与
 *   form 被并排挤压、窄屏更严重。此处覆盖为竖排 stretch 并做响应式。
 * 作用域全部限定在 .ix-note-page 内，避免波及其它 .ix-card / .ix-form 页面。
 * ============================================================ */
.ix-note-page {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 20px 22px;
}
.ix-note-page > h1 {
  margin: 0 0 14px;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}
.ix-note-page .ix-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.ix-note-page .ix-form-row {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ix-note-page .ix-input { width: 100%; }
.ix-note-page textarea.ix-input {
  resize: vertical;
  min-height: 180px;
  line-height: var(--lh-base);
}
.ix-note-page .ix-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.ix-note-page .ix-actions > .ix-btn {
  flex: 1 1 140px;
  min-width: 0;
  text-decoration: none;
}
.ix-note-page .ix-actions > .ix-btn-primary {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
  font-weight: var(--fw-semibold);
}
.ix-note-page .ix-actions > .ix-btn-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}
@media (max-width: 480px) {
  .ix-note-page { padding: 14px 14px 16px; border-radius: var(--r-card); }
  .ix-note-page > h1 { font-size: var(--fs-lg); }
  .ix-note-page .ix-form { gap: 14px; }
  .ix-note-page .ix-actions > .ix-btn { flex: 1 1 100%; }
}

/* ============================================================
 * 2026-07-22：团体（group_mine / group_detail）样式扩展
 * ============================================================ */
/* 卡片元数据 stack 模式：标签换行（避免窄屏溢出） */
.ix-card-meta-stack { flex-wrap: wrap; row-gap: 4px; }
/* 状态化标签 */
.ix-tag-ok    { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.ix-tag-warn  { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.ix-tag-muted { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
.ix-btn-warn  { color: #b45309; border-color: #fde68a; background: #fffbeb; }

/* ============================================================
 * 2026-07-22：/group 看板（dashboard）样式补齐
 *   - 原 templates 已用 .ix-kpi-grid / .ix-kpi / .ix-trend-chart / .ix-trend-bar，
 *     但 CSS 一直没定义，导致 KPI 4 卡纵向堆、trend 柱条错位、TOP 表窄列竖排。
 *   - 小屏 KPI 用 2x2 网格（360px / 420px 均适合）；桌面 ≥720 切回 4 列
 * ============================================================ */
.ix-kpi-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 12px 0 16px;
}
.ix-kpi {
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-2, #6366f1) 100%);
  color: #fff; border-radius: var(--r-card); padding: 14px 12px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 1px 4px rgba(31,111,235,.18);
}
.ix-kpi-num { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.ix-kpi-label { font-size: var(--fs-xs); opacity: 0.85; }
/* ≥540 视口保持 2x2；≥720 切 4 列 */
@media (min-width: 720px) {
  .ix-kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .ix-kpi-num { font-size: var(--fs-2xl); }
}

/* 学习趋势（每日分钟柱图）：横向 scrollable，bar 垂直 */
.ix-trend-chart {
  display: flex; align-items: flex-end; gap: 6px;
  overflow-x: auto; padding: 8px 4px 4px; margin-top: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.ix-trend-bar {
  flex: 0 0 28px; min-height: 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  background: linear-gradient(180deg, var(--c-brand-soft) 0%, var(--c-brand) 100%);
  border-radius: 6px 6px 0 0;
  padding: 4px 0; gap: 2px;
  scroll-snap-align: start;
  /* --h 由 inline style 注入 0~100% */
  height: var(--h, 10%); min-height: 16px;
  color: #fff;
}
.ix-trend-val { font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.ix-trend-date { font-size: var(--fs-xs); opacity: 0.85; line-height: var(--lh-tight); }
/* ≥540 视口拉宽 bar，减少横向滚动 */
@media (min-width: 540px) {
  .ix-trend-bar { flex: 0 0 36px; }
}

/* 紧凑型表格（TOP 10）：列宽自适应，数字列 nowrap */
.ix-table-compact { font-size: var(--fs-sm); table-layout: fixed; width: 100%; }
.ix-table-compact th, .ix-table-compact td { padding: 8px 6px; word-break: break-all; }
.ix-table-compact th:first-child, .ix-table-compact td:first-child { padding-left: 10px; }
.ix-table-compact th:last-child, .ix-table-compact td:last-child { padding-right: 10px; }
.ix-table-compact td.num, .ix-table-compact th.num { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.ix-table-compact th:nth-child(2), .ix-table-compact td:nth-child(2) { width: 60px; }
.ix-table-compact th:nth-child(3), .ix-table-compact td:nth-child(3) { width: 70px; }

/* 折叠区：默认收起，点击展开按钮展示剩余条目 */
.ix-collapse { display: none; }
.ix-collapse.is-open { display: block; }
.ix-collapse-toggle {
  margin-top: 10px; padding: 8px 0; width: 100%;
  text-align: center; color: var(--c-brand);
  background: transparent; border: 1px dashed var(--c-line);
  border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-sm);
  -webkit-tap-highlight-color: transparent;
}
.ix-collapse-toggle::after { content: " 展开 ▾"; }
.ix-collapse.is-open + .ix-collapse-toggle::after { content: " 收起 ▴"; }

/* 2026-07-23：单 UL + 条目级折叠（/group/:id 成员列表 / 最近打卡）
 * - 父 UL 默认收起，第 6 条起的 .ix-collapse-item 整条 display:none；
 * - 点击下方按钮 toggle .is-open 后这些条目恢复 display:flex；
 * - 按钮紧跟 UL，展开 / 收起箭头用相邻兄弟选择器切换。
 * 这样避免「上面 5 条 + 下面折叠区」两个独立 UL 的视觉割裂感。
 */
.ix-collapse-list .ix-collapse-item { display: none; }
.ix-collapse-list.is-open .ix-collapse-item { display: flex; }
.ix-collapse-list.is-open + .ix-collapse-toggle::after { content: " 收起 ▴"; }

/* 2026-07-24：表格版条目级折叠（/group/:id/dashboard TOP 成员单表）——
 * 折叠目标是 <tbody>，展开的行必须是 table-row（不能用列表版的 flex）；
 * 按钮不与 tbody 相邻，箭头改用按钮自身 .is-open 切换（JS 同步 toggle）。 */
.ix-collapse-tbody .ix-collapse-item { display: none; }
.ix-collapse-tbody.is-open .ix-collapse-item { display: table-row; }
.ix-collapse-toggle.is-open::after { content: " 收起 ▴"; }

/* 2026-07-24：用户主页链接（笔记作者 / 团体成员 / 最近打卡 / 共读发起人）——
 * 不显示数字 id；有昵称时昵称在前、@username 淡色在后。 */
.ix-user-link { color: var(--c-brand); text-decoration: none; }
.ix-user-link:hover { text-decoration: underline; }
.ix-user-link-uname { color: var(--c-muted); font-size: .9em; margin-left: 3px; }
.ix-note-author { color: var(--c-muted); }

/* 卡片标题紧凑（卡片网格 / 我的团体场景） */
.ix-card-title-clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: var(--lh-snug);
}

/* 详情页 hero 按钮行动区：窄屏换行友好 */
.ix-hero .ix-action-row { flex-wrap: wrap; row-gap: 8px; }
.ix-hero .ix-action-row > * { flex-shrink: 0; }

/* hero 内 .ix-actions 按钮组（/sale /sale/case）：水平间距 + 窄屏换行 */
.ix-hero .ix-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ix-hero .ix-actions > * { flex-shrink: 0; }

/* 标签云（/tag 列表 + 通用 .ix-tag-cloud 组件）：换行 + 标签间距 */
.ix-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.ix-tag-cloud > * { flex-shrink: 0; }

/* === Hero 紧凑变体 === */
.ix-hero-compact { padding: 16px 14px 18px; }
.ix-hero-compact h1 { font-size: var(--fs-xl); margin: 6px 0; }
.ix-hero-compact .ix-hero-desc { font-size: var(--fs-sm); line-height: var(--lh-base); color: rgba(255,255,255,.88); margin: 6px 0 8px; }

/* === 紧凑型 stat-row（小屏单行 1 行紧凑排版） === */
.ix-stat-row-sm { font-size: var(--fs-xs); gap: 10px; flex-wrap: wrap; }
.ix-stat-row-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 4px; }
@media (min-width: 540px) {
  .ix-stat-row-stack { grid-template-columns: repeat(3, auto); }
}

/* === 紧凑按钮 / 标签 === */
.ix-btn-sm { padding: 6px 12px; font-size: var(--fs-sm); min-height: 32px; }
.ix-btn-ghost { background: transparent; color: var(--c-text); border-color: var(--c-line); }
.ix-tag-xs { font-size: var(--fs-xs); padding: 1px 6px; }

/* === 卡片变体：扁平 / 行内排版 / 标题紧凑 === */
.ix-card-flat { padding: 12px 14px; }
.ix-card-sm { padding: 10px 12px; }
/* 重要：原 .ix-card 是 display:flex（水平），多层内容场景（标题+列表+折叠按钮）必须切回纵向 */
.ix-card-stack { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
/* /group 等列表项：ix-card 自己有边框 + 阴影；内部 .ix-card-row 是纯布局容器，必须剥掉它的边框/背景/阴影/内边距，避免出现"内层小框"的视觉。 */
.ix-card-stack > .ix-card-row {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.ix-card-title-sm { font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin: 0 0 8px; color: var(--c-text); }
.ix-card-row { display: flex; flex-direction: column; gap: 8px; }

/* /group 列表：单列竖向卡片，加大行间距 */
.ix-grid-1 { display: flex; flex-direction: column; gap: 14px; }
.ix-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ix-card-desc { color: var(--c-muted); font-size: var(--fs-xs); line-height: var(--lh-base); margin: 0; }

/* === 紧凑型 avatar / link 列表 === */
.ix-avatar-list-compact { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 0; margin: 0; list-style: none; }
.ix-avatar-list-compact li { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.ix-avatar-sm { flex: 0 0 24px; width: 24px; height: 24px; font-size: var(--fs-xs); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--c-brand-soft); color: var(--c-brand); }
.ix-avatar-name { font-size: var(--fs-xs); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-link-list-compact { display: flex; flex-direction: column; gap: 4px; padding: 0; margin: 0; list-style: none; }
.ix-link-list-compact li { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-sm); padding: 4px 0; min-width: 0; }
.ix-link-list-compact .ix-date { flex: 0 0 48px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--c-muted); }
.ix-link-list-compact .ix-note-clamp { flex: 1; font-size: var(--fs-xs); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 2026-07-23：/group/:id 最近打卡小屏（≤480px）——
 * 日期原本固定 36px 在最左，遇到长昵称 + 一句话总结时整行被挤压；
 * 改成 flex-wrap + 日期 100% 宽占满整行，让昵称/总结自然换到下一行，更像 feed 卡片。
 */
@media (max-width: 480px) {
  .ix-link-list-compact li {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .ix-link-list-compact .ix-date {
    flex: 0 0 100%;
    font-size: var(--fs-xs);
    margin-bottom: 2px;
  }
  .ix-link-list-compact .ix-note-clamp {
    flex: 0 0 100%;
    white-space: normal;
    margin-top: 2px;
  }
}
@media (min-width: 540px) {
  .ix-avatar-list-compact { grid-template-columns: repeat(3, 1fr); }
}

/* === 表单按钮组 === */
.ix-form-actions { display: flex; gap: 8px; margin-top: 12px; }
.ix-form-actions .ix-btn { flex: 1; }

/* === ix-page-header 小屏紧凑 === */
.ix-page-header-sm h1 { font-size: var(--fs-lg); }
.ix-page-header-sm { padding: 12px 0; }
  cursor: pointer;
}

/* 2026-07-21：金句扩展内容（富文本；H5 /quote/<id> 详情页）。 */
.ix-quote-extended-body img { max-width: 100%; height: auto; }
.ix-quote-extended-body p { line-height: var(--lh-relaxed); }
.ix-quote-extended-body blockquote {
  border-left: 3px solid #ddd; padding-left: 12px; color: #555;
}
/* 2026-07-23：拉大扩展内容与上方「行动条」的间距（用户反馈）——margin-top 由 .ix-card 的 14px 提到 28px。 */
.ix-quote-extended { margin-top: 28px; }

/* ============================================================
 * 2026-07-23：/quote/:id 详情页 hero + 行动条 + 相似金句小视窗适配
 *  - .ix-quote-hero：渐变 hero 主体，标题大、字色白，作者小一号
 *  - .ix-quote-actions-panel：白底卡片承载 4 个按钮，窄屏 2×2 自适应
 * ============================================================ */
.ix-quote-hero .ix-quote-hero-text {
  margin: 0 0 6px;
  font-size: var(--fs-xl);
  line-height: var(--lh-base);
  font-weight: var(--fw-bold);
  color: #fff;
  /* 窄屏（≤360px）适当缩小 hero 标题，避免溢出 */
}
.ix-quote-hero .ix-quote-hero-by {
  margin: 0;
  font-size: var(--fs-sm);
  opacity: 0.92;
  color: #fff;
}
.ix-quote-hero .ix-quote-hero-chips {
  margin-top: 12px;
}
@media (max-width: 360px) {
  .ix-quote-hero .ix-quote-hero-text { font-size: var(--fs-xl); line-height: var(--lh-snug); }
  .ix-quote-hero .ix-quote-hero-by { font-size: var(--fs-sm); }
}

/* ============================================================
 * 2026-07-31：/quote/:uuid hero 右侧「当前金句地址」二维码
 *  - .ix-quote-hero-layout：横排两列（左文案自适应 / 右二维码固定宽）
 *    position/z-index 让二维码压在 .ix-hero::after 装饰光斑之上 ——
 *    光斑是 rgba(255,255,255,.08) 的绝对定位圆，会盖住普通流内容并洗掉 QR 对比度
 *  - 二维码白底卡复用下方 /share 段的 .ix-qr-svg，这里只用更高特异性
 *    （.ix-quote-hero-qr .ix-qr-svg = 2 类）把尺寸/内边距收到 hero 尺度，
 *    因此与下方 .ix-qr-svg（1 类）的书写顺序无关，不怕被后面的规则反超
 *  - 小视窗（≤480px）：转竖排 + 整体居中，断点与同页 .ix-quote-actions-panel 的 2×2 一致
 * ============================================================ */
.ix-quote-hero-layout {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.ix-quote-hero-main {
  flex: 1 1 auto;
  min-width: 0;           /* 长金句不撑破 flex 列，超长交给内部换行 */
}
.ix-quote-hero-qr {
  flex: 0 0 auto;
  text-align: center;
}
.ix-quote-hero-qr .ix-qr-svg {
  padding: 8px;
  width: 104px;
  height: 104px;
}
/* 2 类选择器：必须压过 .ix-hero p（1 类 + 1 类型）的 margin:0 / font-size */
.ix-quote-hero-qr .ix-quote-hero-qr-cap {
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  color: #fff;
  opacity: .88;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .ix-quote-hero-layout {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .ix-quote-hero-layout .ix-quote-hero-main { text-align: center; }
  /* .ix-chip-row 是 flex 容器，text-align 管不到子项，单独居中 */
  .ix-quote-hero-layout .ix-quote-hero-chips { justify-content: center; }
}

.ix-quote-actions-panel {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 14px;
}
/* .ix-action-row 没有全局 display:flex（只在 .ix-hero / .ix-book-actions 等被作用域覆盖过），
   这里单独声明为 flex-wrap 行容器，避免按钮退化为 inline 横排。 */
.ix-quote-actions-panel .ix-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  gap: 8px;
}
.ix-quote-actions-panel .ix-action-row > .ix-btn {
  flex: 0 0 auto;
}
/* 小视窗：4 个按钮 2×2 自适应（≤480px），再窄就单列堆叠（≤360px）。
   用 flex: 0 0 calc(50% - 4px) 强制每行 2 个（不允许缩成一行挤压文字）。 */
@media (max-width: 480px) {
  .ix-quote-actions-panel .ix-action-row > .ix-btn {
    flex: 0 0 calc(50% - 4px);
    min-width: 0;
  }
}
@media (max-width: 360px) {
  .ix-quote-actions-panel .ix-action-row > .ix-btn {
    flex: 0 0 100%;
  }
}

/* 2026-07-23：拉大「相似金句」与上方「扩展内容」/「行动条」的间距（用户反馈）——
   margin-top 由 .ix-section 的 0 提到 32px。仅作用于 /quote/:id 的相似金句段（.ix-quote-related），
   不污染 /quote 列表页等其他 .ix-section。 */
.ix-quote-related { margin-top: 32px; }

/* ============================================================
 * 2026-07-23：/group/mine 驳回原因行
 *  - 仅在「我管理的团体」+ audit_status=3 时显示
 *  - 视觉：淡红底 + 左竖红条 + 「驳回原因」小标签 + 引用体；与 .ix-tag-err 色调一致
 *  - 放在 .ix-card-row 与 .ix-action-row 之间（卡片内独立一行）
 * ============================================================ */
.ix-reject-reason {
  margin-top: 10px;
  padding: 8px 12px;
  background: #fef2f2;
  border-left: 3px solid #ef4444;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: #7f1d1d;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.ix-reject-reason-label {
  flex: 0 0 auto;
  font-weight: var(--fw-semibold);
  color: #b91c1c;
  font-size: var(--fs-xs);
  /* 与正文视觉上区分：标签感 */
  padding: 1px 6px;
  border-radius: 3px;
  background: #fee2e2;
}
.ix-reject-reason-text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

/* ============================================================
 * 2026-07-23：/quote/:id/share 分享图页
 *  - hero / 行动条 直接复用 .ix-quote-hero 与 .ix-quote-actions-panel（与 /quote/:id 同节奏）
 *  - 2026-07-31：.ix-qr-block 不再显示 SVG 二维码，改为承载「保存图片」那张海报 canvas。
 *    页面上看到的就是下载后的样子（所见即所得）；toBlob 仍输出 1080×1350 PNG。
 *    SVG QR 样式（.ix-qr-svg）保留给 /quote/:id hero 右侧扫码块复用。
 *  - .ix-quote-share-tip 仅放一行小提示，说明图片尺寸与用途
 * ============================================================ */

/* 海报容器：白底圆角卡 + 居中 + 适度留白 */
.ix-qr-block {
  margin: 0 0 18px;
  padding: 14px;
  background: var(--c-card);
  border-radius: var(--r-card, 12px);
  text-align: center;
  box-shadow: var(--shadow-xs);
}

/* 二维码图片容器（hero 右侧仍用 .ix-qr-svg 包 <img>）：
   - display:inline-block 让容器根据内容尺寸贴合，不强行占满父级
   - line-height:0 消掉 img baseline 下的 inline 缝隙
   - width/height 给 hero 一侧 override（见 .ix-quote-hero-qr .ix-qr-svg 块） */
.ix-qr-svg {
  display: inline-block;
  width: 168px;
  height: 168px;
  padding: 12px;
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  line-height: 0;
  object-fit: contain;
}

/* 2026-07-31：share 页海报 <img> —— 离屏 canvas 画 1080×1350，draw 完成后
   canvas.toDataURL('image/png') 设到 img.src，所以 img 显示的就是保存那张图。
   跨平台统一「图片另存为」入口：
     - 电脑：右键 img → 「图片另存为 / 复制图片」
     - 手机：长按 img → 「保存图片 / 分享」
   max-width 360 + width:100% 在窄屏自适应；HTML width=1080 height=1350 让
   height:auto 按 4:5 等比缩放。background 是 src 还没填好时的占位色，
   避免破图 icon。

   2026-07-31：补 aspect-ratio: 4 / 5 —— 微信 Android X5 内核对 <img> 的
   height:auto 支持不稳（旧版会忽略，回到 intrinsic 尺寸 1350 高撑破视窗）；
   aspect-ratio 强制 img box 保持 4:5，配合 object-fit: contain 确保内容按
   contain 缩放。height:auto 保留兜底（不支持 aspect-ratio 的浏览器仍走它）。
   aspect-ratio 在 iOS Safari 15+ / Chrome 88+ / Android Chrome 88+ 支持，
   X5 内核若 < 2021 仍可能失效，那种场景再加 padding-top 4:5 wrapper 兜底。 */
.ix-share-poster-canvas {
  display: block;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4 / 5;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
  background: var(--c-bg, #f1f5f9);
  object-fit: contain;
}

/* 2026-07-23：分享页按钮水平居中（小视窗下居中且自然换行，不挤在一行） */
.ix-share-action-row {
  justify-content: center;
}

/* 小屏：hero 内二维码略缩 1/3（/quote/:id hero 还在用 .ix-qr-svg） */
@media (max-width: 360px) {
  .ix-quote-hero-qr .ix-qr-svg {
    width: 88px;
    height: 88px;
  }
}

.ix-quote-share-tip {
  margin: 0 0 18px;
  padding: 10px 14px;
  background: var(--c-bg);
  border-radius: var(--r-card, 12px);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--c-muted);
  text-align: center;
}

.ix-protocol-list {
  margin: 8px 0 0 24px;
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--c-muted);
  line-height: var(--lh-relaxed);
}
.ix-protocol-list strong {
  color: var(--c-text);
  font-weight: var(--fw-semibold);
}

/* /book 详情页"为本书写笔记"按钮（在 .ix-action-row 内） */
.ix-action-row > a.ix-btn-primary {
  text-decoration: none;
}

/* 2026-07-21 PR-D：/me/notes 隐私过滤 tab（全部 / 公开 / 私密） */
.ix-note-priv-tabs {
  display: flex;
  gap: 6px;
  margin: 10px 0 14px;
}
.ix-note-priv-tab {
  flex: 1;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  border: 1px solid var(--c-line);
  background: var(--c-card);
  color: var(--c-muted);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ix-note-priv-tab-active {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
}

/* 2026-07-21 PR-D：作者本人查看私密 / 待审 / 驳回笔记时的可见性徽章 */
.ix-note-status-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  border-radius: var(--r-pill);
  margin-left: 6px;
  vertical-align: middle;
}
.ix-note-status-badge-priv {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}
.ix-note-status-badge-pending {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
.ix-note-status-badge-rejected {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.ix-note-status-badge-draft {
  background: #f9fafb;
  color: var(--c-muted);
  border: 1px solid #e5e7eb;
}

/* ============================================================
 * 2026-07-22：/note/:id 详情页——参考 /book/:id 框化 + flex 竖排 + 窄屏优化
 * 根因：原来用 .ix-card（flex 横排 + align-items:center）当页面容器，
 *   标题 / 元信息 / 正文 / 操作 4 个子块被并排挤压，窄屏尤甚。
 * 改为竖排 stretch 的框化区块（card+line+r-card+shadow），块间 12px。
 * ============================================================ */
.ix-note-detail { display: flex; flex-direction: column; gap: 12px; }
.ix-note-main,
.ix-note-comments {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 16px 16px 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.ix-note-title {
  margin: 0;
  font-size: var(--fs-xl); line-height: var(--lh-snug); font-weight: var(--fw-bold);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  word-break: break-word;
}
.ix-note-meta {
  margin: 0;
  flex-wrap: wrap;
  row-gap: 6px;
}
.ix-note-body { margin: 0; }
.ix-note-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
}
.ix-note-sec-h {
  margin: 0;
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  display: flex; align-items: center; gap: 6px;
}
.ix-note-sec-h::before {
  content: ""; display: inline-block;
  width: 3px; height: 14px;
  background: var(--c-brand); border-radius: 2px;
}
/* 评论列表 / 表单（此前无样式，默认块布局）——框内竖排 + 窄屏友好 */
.ix-note-comments .ix-comment-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.ix-note-comments .ix-comment {
  padding: 10px 0;
  border-bottom: 1px dashed var(--c-line);
}
.ix-note-comments .ix-comment:last-child { border-bottom: none; }
.ix-note-comments .ix-comment-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  margin-bottom: 4px;
}
.ix-note-comments .ix-comment-user { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.ix-note-comments .ix-comment-time { font-size: var(--fs-xs); color: var(--c-muted); }
.ix-note-comments .ix-comment-body {
  font-size: var(--fs-sm); line-height: var(--lh-base); word-break: break-word;
}
.ix-note-comments .ix-comment-form {
  display: flex; flex-direction: column; gap: 8px;
}
.ix-note-comments .ix-comment-form textarea {
  width: 100%;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 10px 12px; font-size: var(--fs-sm); line-height: var(--lh-base);
  resize: vertical; min-height: 84px;
  outline: none; background: var(--c-card); font-family: inherit;
}
.ix-note-comments .ix-comment-form textarea:focus { border-color: var(--c-brand); }
.ix-note-comments .ix-comment-form .ix-btn { align-self: flex-end; }
@media (max-width: 480px) {
  .ix-note-main, .ix-note-comments { padding: 13px 13px 12px; border-radius: var(--r-card); }
  .ix-note-title { font-size: var(--fs-xl); }
  .ix-note-actions > .ix-btn { flex: 1 1 100%; }
  .ix-note-comments .ix-comment-form .ix-btn { align-self: stretch; }
}

/* ====== 2026-07-22：通用面板 + 共读 / 思维工具 / 专题计划 页样式 ======
   设计目标：把分散在 /book/:id 上的「framed 框 + 标题行 ::before 竖条」抽出成可复用的 .ix-panel，
   配套补齐 .ix-btn-primary 全局主色、.ix-btn-danger、.ix-list-title、状态徽章、行动条等被 .ix-card 坑掉的工具类。
   取代 .ix-card 在「多子项、垂直布局」场景下的滥用——.ix-card 是 horizontal-flex 列表项，
   用作页块容器会把内容横着挤压（窄屏更糟）。 */

/* 通用面板：垂直 flex 框；白底+细线+圆角+阴影；
   与 /book/:id 的「基本信息」「功能」「共读计划」三块视觉节奏一致。 */
.ix-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.ix-panel > * { min-width: 0; }
.ix-panel-h {
  position: relative;
  padding-left: 12px;
  margin: 0 0 4px 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}
.ix-panel-h::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 14px;
  background: var(--c-brand);
  border-radius: 2px;
}
@media (max-width: 480px) {
  .ix-panel { padding: 13px 13px 12px; border-radius: var(--r-card); gap: 8px; }
  .ix-panel-h { font-size: var(--fs-base); }
}

/* 全局主色按钮：之前只在 .ix-note-page / .ix-action-row 内覆盖，
   专题计划页 (.ix-plan-form) 的「为整个专题发起共读」按钮需要全局品牌色。
   不会与已有的 scoped 规则冲突——它们设的是同样的属性。 */
.ix-btn-primary {
  background: var(--c-brand);
  color: #fff;
  border-color: var(--c-brand);
  font-weight: var(--fw-semibold);
}
.ix-btn-primary:hover { background: #1858c4; border-color: #1858c4; }
.ix-btn-primary:disabled { background: var(--c-muted); border-color: var(--c-muted); cursor: not-allowed; opacity: 0.6; }

/* 危险按钮（仅描边）：用于「放弃共读」等不可逆操作 */
.ix-btn-danger {
  background: #fff;
  color: var(--c-err);
  border-color: var(--c-err);
}
.ix-btn-danger:hover { background: var(--c-err); color: #fff; }

/* 列表区块标题（grid-column:1/-1 横跨 .ix-list 双列），统一 15-16px 加粗 */
.ix-list-title {
  grid-column: 1 / -1;
  margin: 0 0 4px 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}

/* ============================================================
 * 2026-07-24：/book/rank 榜单条目排版
 * 参考 /book/topic/detail 的「书单目录」节奏：seq + body + right action。
 * 这里把原 <table> 改成 .ix-card-link 让窄屏不被压成竖排；
 * 用 .ix-rank-actions 装"共读数"徽章 + "详情"按钮，整行仍是 flex 横排。
 * ============================================================ */
.ix-rank-row {
  /* 与 .ix-card-link 默认横排节奏一致：seq 28px + body flex:1 + actions auto */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}
.ix-rank-row .ix-seq {
  /* 排名徽章沿用 /book/topic/detail 的 28px 圆形，序号补 0（01~09）增强榜单感 */
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.ix-rank-row .ix-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ix-rank-row .ix-card-body h4 {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  word-break: break-word;
  /* 标题 1 行省略，避免长书名撑高整行 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ix-rank-row .ix-card-body p {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ix-rank-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ix-rank-count {
  font-variant-numeric: tabular-nums;
  background: var(--c-brand-soft);
  color: var(--c-brand);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
/* 窄屏：让 row 允许 wrap，actions 自然换到下一行（避免 actions flex-basis:100% 把 body 挤成 0 宽）
   - 默认 row 是 nowrap，actions 在右侧
   - ≤480 启用 flex-wrap，actions 在 row 装不下时换到下一行，body 始终拿到 ≥100px 宽度
   - 关键是给 body 一个合理的 min-width（≥80px），让书名至少有 1 行宽度可显示 */
.ix-rank-row { flex-wrap: wrap; }
.ix-rank-row .ix-card-body { min-width: 80px; }
@media (max-width: 480px) {
  .ix-rank-row { padding: 10px 12px; gap: 8px 10px; }
  .ix-rank-actions { justify-content: flex-end; }
  .ix-rank-row .ix-card-body h4 { font-size: var(--fs-sm); }
}

/* /coread/:id 封面 + 信息行：≥480px 横向；窄屏纵向堆叠 */
.ix-coread-hero-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ix-coread-cover {
  flex: 0 0 auto;
  width: 72px; height: 96px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line);
  background: var(--c-bg);
}
.ix-coread-info { flex: 1 1 200px; min-width: 0; }
.ix-coread-info h1 { font-size: var(--fs-xl); margin: 0 0 6px; line-height: var(--lh-snug); }
.ix-coread-info p { margin: 4px 0; font-size: var(--fs-sm); line-height: var(--lh-base); }
@media (max-width: 480px) {
  .ix-coread-hero-row { gap: 10px; }
  .ix-coread-info { flex: 1 1 100%; }
  .ix-coread-info h1 { font-size: var(--fs-lg); }
}

/* /coread/:id 内嵌的「我也要读 / 今日打卡」小表单：
   横向 gap 8px + flex-wrap；窄屏切换为纵向堆叠，input/button 占满宽度 */
.ix-coread-mini-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
  width: 100%;
}
.ix-coread-mini-form > label { font-size: var(--fs-sm); color: var(--c-muted); white-space: nowrap; }
.ix-coread-mini-form > input { flex: 1 1 160px; min-width: 0; }
.ix-coread-mini-form > input[type="number"] { flex: 0 0 90px; }
.ix-coread-mini-form > .ix-btn { flex: 0 0 auto; }
@media (max-width: 480px) {
  .ix-coread-mini-form { flex-direction: column; align-items: stretch; gap: 8px; }
  /* 2026-07-22：避免「输入框在小视窗被拉得过高」——
     关键：selectors 必须显式列出每个 type，否则基础规则的 [type="date"] / [type="number"]
     (specificity 0,0,2,1) 会压住 @media 里的 > input (0,0,1,1)，让 column-flex 下
     flex-basis: 160px / 90px 直接变成 height 160px / 90px。
     这里全部用 type 选择器（specificity 0,0,2,1）与 base 同级，source order 后写后赢。 */
  .ix-coread-mini-form > input,
  .ix-coread-mini-form > input[type="date"],
  .ix-coread-mini-form > input[type="text"],
  .ix-coread-mini-form > input[type="number"],
  .ix-coread-mini-form > .ix-btn {
    width: 100%;
    flex: 0 0 auto;
  }
}

/* 共读状态徽章：1=RUNNING(绿) / 2=DONE(灰) / 3=ABANDONED(红)
   与 .ix-tag 同尺寸但更醒目的对比色——状态机一眼可读 */
.ix-status-1 { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.ix-status-2 { background: var(--c-bg); color: var(--c-muted); border-style: dashed; }
.ix-status-3 { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

/* /book/topic/:code/plan 表单：行布局，窄屏竖排 */
.ix-plan-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ix-plan-form .ix-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ix-plan-form .ix-form-row > label { font-size: var(--fs-sm); color: var(--c-muted); }
.ix-plan-form .ix-form-row > .ix-input { width: 100%; }
.ix-plan-form .ix-btn-primary { align-self: flex-start; }
@media (max-width: 480px) {
  .ix-plan-form .ix-btn-primary { align-self: stretch; width: 100%; }
}

/* /think/:id 行动条：右对齐按钮 + 框；窄屏纵向堆叠按满 */
.ix-actionbar {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}
.ix-actionbar > .ix-btn { text-decoration: none; }
@media (max-width: 480px) {
  .ix-actionbar { flex-direction: column; align-items: stretch; }
  .ix-actionbar > .ix-btn { width: 100%; }
}

/* ============== 2026-07-22: /member 订阅档位 ==============
   参考 /book/:id 的 framd 框 + 价格区视觉节奏：
   - 整页用 .ix-panel/.ix-panel-h 串联档位区、权益区
   - 价格卡用 .ix-price-grid 自适应 grid（窄屏 1 列、≥540 双列、≥900 三列）
   - 每张卡走 flex column：标题 + 价格 + 权益 + 按钮，flex:1 把按钮推到底部对齐
*/
.ix-price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ix-price-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.ix-price-card-h {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  display: flex; align-items: center; gap: 6px;
  word-break: break-word;
}
.ix-price-card-price {
  display: flex; align-items: baseline; gap: 4px;
  flex-wrap: wrap;
  min-width: 0;
}
.ix-price-card-num {
  font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--c-brand);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.ix-price-card-unit {
  font-size: var(--fs-sm); color: var(--c-muted);
}
.ix-price-card-features {
  flex: 1;
  margin: 0; padding-left: 18px;
  font-size: var(--fs-sm); line-height: var(--lh-base);
  color: var(--c-text);
}
.ix-price-card-features li { margin: 0 0 4px; word-break: break-word; }
.ix-price-card-features li:last-child { margin-bottom: 0; }
.ix-price-card .ix-btn { width: 100%; margin-top: auto; }
.ix-price-card-empty {
  text-align: center;
  color: var(--c-muted);
  padding: 18px 12px;
  font-size: var(--fs-sm);
}
.ix-member-hero {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
  color: #fff;
  border-radius: var(--r-card);
  padding: 18px 18px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.ix-member-hero::after {
  content: "";
  position: absolute; right: -30px; top: -30px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
.ix-member-hero-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.ix-member-hero h1 {
  margin: 0 0 6px;
  font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-snug);
  word-break: break-word;
}
.ix-member-hero p {
  margin: 0;
  opacity: 0.92;
  font-size: var(--fs-sm); line-height: var(--lh-base);
  word-break: break-word;
}
@media (min-width: 540px) {
  .ix-price-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .ix-price-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 360px) {
  .ix-member-hero { padding: 14px; }
  .ix-member-hero h1 { font-size: var(--fs-lg); }
  .ix-member-hero p { font-size: var(--fs-sm); }
  .ix-price-card { padding: 12px; }
  .ix-price-card-num { font-size: var(--fs-xl); }
}

/* ============== 2026-07-22: /me/realname 实名认证表单 ==============
   整页沿用 _me_tab 提供的 hero + panel；面板内分两段：
   1) .ix-realname-status —— 当前认证状态（只读）
   2) .ix-realname-form-wrap —— 提交表单（与 .ix-book-actions 同款：col→row）
   字段统一用 .ix-realname-field（label + control）；文件槽走 .ix-realname-files，
   窄屏 1 列、≥540 双列；按钮用 .ix-form-actions 标准动作条
*/
.ix-realname-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--c-brand-soft);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--c-text);
  line-height: var(--lh-base);
  word-break: break-word;
}
.ix-realname-status-pending { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.ix-realname-status-rejected { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }
.ix-realname-status-approved { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
.ix-realname-status-label {
  flex: 0 0 auto;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.ix-realname-status-msg { flex: 1; min-width: 0; }
.ix-realname-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ix-realname-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ix-realname-field > label {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  font-weight: var(--fw-medium);
}
.ix-realname-field .ix-input,
.ix-realname-field .ix-select {
  width: 100%;
  font-size: var(--fs-sm);
  padding: 9px 11px;
}
.ix-realname-files {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  min-width: 0;
}
.ix-realname-file {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--c-bg);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  min-width: 0;
}
.ix-realname-file-label {
  color: var(--c-muted);
  font-weight: var(--fw-medium);
}
.ix-realname-file-label .ix-req {
  color: var(--c-err, #dc2626);
  margin-left: 2px;
}
.ix-realname-file input[type="file"] {
  font-size: var(--fs-sm);
  width: 100%;
  min-width: 0;
  color: var(--c-text);
}
.ix-realname-submit {
  margin-top: 4px;
  width: 100%;
}
.ix-realname-submit:disabled { opacity: 0.6; cursor: not-allowed; }
@media (min-width: 540px) {
  .ix-realname-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
  }
  .ix-realname-field-full { grid-column: 1 / -1; }
  .ix-realname-files {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }
  .ix-realname-submit {
    grid-column: 1 / -1;
    justify-self: end;
    width: auto;
    min-width: 160px;
  }
}
@media (max-width: 360px) {
  .ix-realname-status { padding: 10px 12px; font-size: var(--fs-xs); }
}

/* ============================================================
 * 2026-07-22：/group + /coread hero 区 tab/按钮视觉
 *
 * 此前分散在 .ix-action-row 里的几个 hero 内按钮"挤一行"，视觉权重一样，
 * 用户分不清主次（加入 vs 邀请码 vs 看板）。本次按 /book/:id 的"主操作 +
 * 次操作"分组思路改造：
 * - .ix-hero-actions      — hero 内按钮纵向分组容器（主 / 次 两段）
 * - .ix-hero-actions-primary   — 主操作（加入、登录、退出、打卡）
 * - .ix-hero-actions-secondary — 次操作（邀请码、看板、复制码）
 * - .ix-tab-cta           — /group hero 里"+ 凭邀请码"行动型 tab，
 *                          与过滤 tab 视觉区分（描边 + 强调色）
 * - .ix-action-row-tight  — 之前 hero 内有用到但 CSS 没补齐，补全定义
 *
 * 另：
 * - .ix-panel-flat        — 紧凑 panel（无内边距，只画框）
 * - .ix-form-actions-left — 居左 form-actions（导出按钮等不需要撑满）
 * - .ix-kpi-grid / .ix-kpi — /group/:id/dashboard 4 KPI 紧凑 grid
 * - .ix-trend-chart       — 增强版趋势柱状图（窄屏 4 列、≥540 = 8 列横排）
 * ============================================================ */

/* === /group + /coread hero 过滤区里的行动型 tab ===
   之前 .ix-tab-cta 在 site.css 里没有专属 CSS（与 .ix-tab 同外观），用户看不出
   "这是个动作按钮而不是过滤 tab"。给它独立的胶囊外框 + 半透明白底 + hover 加强。 */
.ix-filter-tabs .ix-tab-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
  margin-left: 4px;
}
.ix-filter-tabs .ix-tab-cta:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.5);
}
.ix-filter-tabs .ix-tab-cta:active {
  transform: scale(0.97);
}
/* 2026-07-24：≤480 视窗下"+ 凭邀请码加入"pill padding 收紧避免吃满整行；
   margin-left 归零（已被 flex-wrap + gap 控距），行距让出更紧。 */
@media (max-width: 480px) {
  .ix-filter-tabs .ix-tab-cta {
    padding: 3px 10px;
    font-size: var(--fs-xs);
    margin-left: 0;
  }
}

/* === 之前漏定义的 .ix-action-row-tight === */
.ix-action-row-tight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* === Hero 行动按钮纵向分组 ===
   主操作 / 次操作 分两段渲染，视觉权重明确分开：
   - 主段：填底或主色按钮，加分隔
   - 次段：ghost / outline 按钮，整体偏小 */
.ix-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.ix-hero-actions-primary,
.ix-hero-actions-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ix-hero-actions-primary > .ix-btn,
.ix-hero-actions-secondary > .ix-btn {
  /* 主段按钮要"明显好按"——增加高度 + 略加阴影 */
  flex: 0 0 auto;
}
.ix-hero-actions-primary > .ix-btn-primary {
  /* 主操作主色按钮：稍微大一点 + 阴影更明显 */
  min-height: 40px;
  padding: 8px 18px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.18);
}
.ix-hero-actions-primary > .ix-btn-warn {
  /* 退出团体——醒目但不能比"加入"还抢眼 */
  background: rgba(255, 255, 255, 0.92);
  color: #b91c1c;
  border-color: rgba(255, 255, 255, 0.92);
}
.ix-hero-actions-primary > .ix-btn-warn:hover {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
}
.ix-hero-actions-secondary {
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.28);
}
.ix-hero-actions-secondary > .ix-btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.ix-hero-actions-secondary > .ix-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.55);
}
.ix-hero-actions-secondary > .ix-btn-ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.28);
}

/* 角色徽章（在 hero 主段开头）——比普通 .ix-tag 略大、字重更明显 */
.ix-role-tag {
  font-size: var(--fs-sm);
  padding: 4px 10px;
  font-weight: var(--fw-semibold);
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.42);
}

/* === /group/:id 整页容器 === */
.ix-group-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ix-group-detail > .ix-panel { margin-bottom: 0; }
.ix-group-detail .ix-panel-flat {
  padding: 12px 14px;
}
.ix-group-hero .ix-stat-row {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.92);
}
.ix-group-hero .ix-stat-row .ix-muted { color: rgba(255, 255, 255, 0.65); }

/* /coread hero 主 CTA + 次 CTA 视觉区分 */
.ix-hero .ix-btn-primary {
  /* 主色按钮在紫底 hero 上加阴影，浮起来更"好按" */
  box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.18);
}
.ix-hero .ix-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.ix-hero .ix-cta-row > .ix-btn-primary {
  /* /coread hero 内的"选一本书发起共读"主 CTA */
  min-height: 40px;
  padding: 8px 18px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.ix-hero .ix-cta-row > .ix-btn:not(.ix-btn-primary) {
  /* 次操作：白底 + 紫色描边 + 紫色字 —— 在紫底 hero 上对比强烈、一眼能识别 */
  background: rgba(255, 255, 255, 0.96);
  color: var(--c-brand);
  border-color: rgba(255, 255, 255, 0.96);
}
.ix-hero .ix-cta-row > .ix-btn:not(.ix-btn-primary):hover {
  background: #ffffff;
  color: #1858c4;
}

/* ============================================================
 * 注册 / 资料 / 忘记密码 通用：图验证码 + 邮箱状态
 * ============================================================ */
.ix-captcha-row { /* 复用 .ix-form-row 的标签 / 外间距 */ }
.ix-captcha-fields {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.ix-captcha-fields .ix-input {
  flex: 1;
  min-width: 0;
}
.ix-captcha-img {
  flex: 0 0 auto;
  width: 110px;
  height: 44px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  cursor: pointer;
  background: #f3f4f6;
  object-fit: cover;
  user-select: none;
}
.ix-captcha-img:hover { border-color: var(--c-brand); }

/* 邮箱状态徽章（在 .ix-form-row label 中 inline） */
.ix-status-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  vertical-align: middle;
}
.ix-status-pill--ok {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}
.ix-status-pill--warn {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

/* 邮箱行的小灰字提示 */
.ix-me-row-hint {
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: var(--lh-base);
}

/* 邮箱验证落地页 */
.ix-verify-state {
  margin: 8px 0 0;
  padding: 14px;
  background: #fafafa;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
}
.ix-verify-state--err {
  background: #fef2f2;
  border-color: #fecaca;
}
.ix-verify-state-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
}
.ix-verify-state--err .ix-verify-state-title { color: #b91c1c; }
.ix-verify-token-wrap {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: stretch;
}
.ix-verify-token-wrap .ix-input {
  flex: 1;
  min-width: 0;
  font-family: SFMono-Regular, Consolas, monospace;
  font-size: var(--fs-sm);
  word-break: break-all;
  background: #f3f4f6;
}

/* === /group/:id/dashboard KPI grid ===
   4 个 KPI 卡紧密排；≥540 横排 4 列，≤540 自动 2 列，≤360 单列 */
.ix-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.ix-kpi {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.ix-kpi-num {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-text);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.ix-kpi-label {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  letter-spacing: var(--tracking-wide);
}
@media (min-width: 540px) {
  .ix-kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .ix-kpi-num { font-size: var(--fs-2xl); }
}

/* === 趋势柱状图增强 === */
.ix-trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 140px;
  padding: 6px 0 4px;
  overflow-x: auto;
}
.ix-trend-bar {
  flex: 1 1 0;
  min-width: 14px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.ix-trend-bar::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--h, 0%);
  background: linear-gradient(180deg, var(--c-brand) 0%, #6366f1 100%);
  border-radius: 4px 4px 0 0;
  transition: height .25s ease;
}
.ix-trend-val {
  position: relative;
  z-index: 1;
  font-size: var(--fs-xs);
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}
.ix-trend-date {
  position: relative;
  z-index: 1;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin-top: 4px;
}

/* 紧凑 form-actions（左对齐，不撑满） */
.ix-form-actions-left {
  margin-top: 0;
  justify-content: flex-start;
}
.ix-form-actions-left .ix-btn { flex: 0 0 auto; }

/* === 全局响应式：hero 区窄屏 === */
@media (max-width: 480px) {
  .ix-hero-actions-primary > .ix-btn,
  .ix-hero-actions-primary > .ix-tag,
  .ix-hero-actions-secondary > .ix-btn {
    /* 窄屏所有 hero 按钮全宽好按 */
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    justify-content: center;
  }
  .ix-hero-actions-primary > .ix-role-tag {
    flex: 1 1 100%;
  }
  .ix-hero .ix-cta-row > .ix-btn-primary,
  .ix-hero .ix-cta-row > .ix-btn {
    flex: 1 1 100%;
    text-align: center;
    justify-content: center;
  }
}
@media (max-width: 360px) {
  .ix-group-hero .ix-stat-row { font-size: var(--fs-xs); }
  .ix-hero-actions-primary > .ix-btn,
  .ix-hero-actions-secondary > .ix-btn {
    flex: 1 1 100%;
  }
  .ix-kpi-grid { grid-template-columns: 1fr; }
  .ix-kpi-num { font-size: var(--fs-xl); }
}

/* ============================================================
 * 2026-07-22 PR-12：成就 / 成长 / 里程碑 / 通知中心样式
 *   优先复用 .ix-me-grid / .ix-me-tile / .ix-card-row / .ix-tag
 *   新增最少必要类：tabs / progress / 摘要容器 / 徽章 tile 调整
 * ============================================================ */
.ix-me-toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px;
  margin: 4px 0 12px;
}
.ix-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ix-tabs .ix-tab {
  appearance: none; cursor: pointer;
  background: var(--c-card); border: 1px solid var(--c-line);
  color: var(--c-text);
  font-size: var(--fs-sm); line-height: var(--lh-tight);
  padding: 8px 14px;
  border-radius: var(--r-pill, 999px);
  min-height: 32px;
}
.ix-tabs .ix-tab.is-active { background: var(--c-brand); color: #fff; border-color: transparent; }
.ix-tabs-aux { display: flex; align-items: center; gap: 12px; font-size: var(--fs-sm); color: var(--c-muted); }
.ix-check { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

.ix-me-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.ix-kpi {
  background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: var(--r-card); padding: 14px 12px;
  text-align: center; font-size: var(--fs-xl); font-weight: var(--fw-semibold);
  color: var(--c-text);
}
.ix-kpi small {
  display: block; margin-top: 4px; font-size: var(--fs-xs);
  font-weight: var(--fw-medium); color: var(--c-muted);
}

.ix-ach-grid { gap: 12px; }
.ix-ach-tile {
  flex: 1 1 calc((100% - 12px * 2) / 3);
  min-width: 96px;
  padding: 14px 8px;
}
@media (max-width: 480px) {
  .ix-ach-tile { flex-basis: calc((100% - 12px) / 2); }
}
.ix-ach-tile img { width: 36px; height: 36px; object-fit: contain; }
.ix-me-tile-meta {
  display: block; font-size: var(--fs-xs);
  color: var(--c-muted); margin-top: 2px;
}

/* 里程碑进度条 */
.ix-progress {
  width: 100%; height: 6px;
  background: var(--c-line);
  border-radius: var(--r-pill); overflow: hidden;
  margin-top: 6px;
}
.ix-progress-fill {
  height: 100%;
  background: var(--c-brand);
  transition: width .3s ease;
}
.ix-card-row.is-hit .ix-progress-fill { background: #16a34a; }

/* /me 壳页：标题栏与工具栏间隔 */
.ix-me-panel-body .ix-me-summary:empty { display: none; }

/* /me 通知中心：列表项点击态保持行高视觉一致 */
.ix-card-row[data-notice-id] { cursor: pointer; }