/* 文献分区 / 收录查询 + 每日论文速览 —— 「目录卡」

## 设计原则（动手改之前先读这段）

**颜色只表示信息，不表示装饰。**

整站的结构色只有墨与纸加细线，唯一的颜色出现在它真有含义的地方：分区、收录、
学科、AI 生成、手工填写。理由是这个站的核心承诺就是"口径必须标清楚" ——
读者一眼就知道「有颜色 = 这是数据源给的结论」，而不是被装饰性配色稀释掉。
所以：**不要为了好看给某个元素加颜色**，先问它表示什么。

**细线和字段对齐是分层的唯一手段**（目录卡的形态语言）：没有圆角卡片、没有阴影、
不用背景色块分段。改样式时优先用 `border-top` 和 `grid` 列对齐，而不是加盒子。

## 两条来自数据核验的硬约束（别在样式上破坏它）

1. **分区和收录必须视觉上分开。** 实测 9519 本刊有中科院分区但不在 SCIE/SSCI 里，
   其中还有拿 1 区 Top 的。所以 `.blocks` 永远是两个独立的字段组，不做任何联动样式。
2. **手工填写 / AI 生成必须有独立标记。** 用户得分得清"数据源查到的"和"别处来的"，
   两者的可信度完全不同 —— 所以 `.badge.manual` 和 `.badge.ai` 用虚线边框，
   跟所有实打实的数据源结论在形态上就不一样。
*/

:root {
  /* --- 结构色：只有墨和纸 --- */
  /* 纸色压得比"纯白下一档"深一点：白卡片要能读出来。
     原来 #fafafb 和白只差 1.5%，卡片边框几乎看不见 —— 既不像卡片也不像列表。 */
  --paper:      #f4f5f7;   /* 页底 */
  --card:       #ffffff;
  --ink:        #14161a;   /* 正文与标题，最深 */
  --ink-2:      #4a4f5c;   /* 次级文字 */
  --ink-3:      #878c99;   /* 字段标签，比正文浅 */
  --rule:       #dde0e6;   /* 细线 —— 目录卡的标志性元素，用得最多 */
  --rule-2:     #b9bec9;   /* 需要更硬的分隔时才用（输入框边、区块顶线） */

  /* --- 语义色：只表示信息 --- */
  /* 全部按"作为文字落在白底上"校准过对比度 ≥ 4.5:1（AA）。
     原来是配浅色背景的胶囊，所以偏亮；改成一整片单色文字之后必须压深，
     不然 --unknown 只有 3.2:1，看着"淡雅"其实是读不清。 */
  --q-good:     #15633c;   /* 1-2 区 */
  --q-mid:      #8a5108;   /* 3 区 */
  --q-low:      #5c636e;   /* 4 区 */
  --sci:        #1a4f8c;
  --ei:         #5d3590;
  --warn:       #9c2019;
  --unknown:    #6e7683;   /* 这里压得最深，原值在白底上不达标 */
  --manual:     #6f5717;   /* 手工填写：跟任何数据源的色相都不同 */
  --news-mat:   #0d6a63;   /* 材料科学 */
  --news-phy:   #8a2560;   /* 物理与天文学 */
  --ai:         #0a5c78;   /* AI 生成的内容 */

  /* --- 字体 ---
     **零 webfont**：CSP 是 font-src 'self'，而中文字体动辄几 MB，
     自托管不划算。所以全部用系统字体，但选得刻意一点：
     衬线只用在**论文标题**这一处（那是"著录"的位置，拉丁文为主，
     Georgia 在 Windows 和 macOS 上都自带）；数值一律等宽，对齐好看也不易看错。 */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
  --serif: Georgia, "Songti SC", "SimSun", serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;

  --radius: 2px;

  /* 顶栏高度**是变的**：宽屏一行，≤720px 时导航换到第二行变得更高。
     粘性侧栏的 top 用它算，别写死魔数 —— 写 72px 的话窄屏会有 11px
     钻到顶栏底下，而顶栏是不透明白底 + z-index:10，正好把那 11px 盖掉。 */
  --topbar-h: 57px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  /* 长 DOI / 长英文单词在窄屏上不许把页面撑宽 */
  overflow-wrap: break-word;
}

a { color: var(--sci); }

/* 键盘可达性：只对键盘焦点画环，鼠标点击不画（不打扰视觉） */
:focus-visible { outline: 2px solid var(--sci); outline-offset: 2px; }

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

/* ---------------------------------------------------------- 顶栏

   注意 flex 的 min-width:0 —— 这是**窄屏横向溢出的头号成因**：
   flex 子项默认 min-width:auto，装不下也不会缩，于是把整个页面撑宽，
   然后所有文字都被视口边缘切掉（看起来像"文字被截断"，其实是整页被撑开了）。
   凡是给 flex 子项设了 flex:1 的地方，都要配套 min-width:0。 */

.topbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 18px; padding: 12px 24px;
  background: var(--card); border-bottom: 1px solid var(--rule-2);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: baseline; gap: 10px; flex: 1 1 auto; min-width: 0; }
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.brand-sub {
  font-size: 12px; color: var(--ink-3);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account { display: flex; align-items: center; gap: 10px; font-size: 13px; flex: 0 0 auto; }
.account .who { color: var(--ink-2); font-family: var(--mono); font-size: 12px; }

.mainnav { font-size: 13px; flex: 0 0 auto; }
.mainnav a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-2); padding-bottom: 1px; }
.mainnav a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* 窄屏：品牌和账号一行，导航换到第二行独占一条 —— 三个挤一行必然溢出 */
@media (max-width: 720px) {
  .topbar { padding: 10px 16px; }
  .account { margin-left: auto; }
  .mainnav { order: 10; flex: 1 1 100%; padding-top: 8px; border-top: 1px solid var(--rule); }
}

main { max-width: 900px; margin: 0 auto; padding: 26px 24px 72px; }
@media (max-width: 720px) { main { padding: 18px 16px 56px; } }

/* ---------------------------------------------------------- 首页布局

   宽屏两栏（左：搜索 + 结果 + 新闻；右：我的列表），窄屏单栏。
   顺序用**具名区域**声明在一处，窄屏只改模板、不用逐个重置属性。

   ⚠️ 三条写错了会静默炸的约束：

   1. **`footer` 这个名字必须在两个模板里都出现。** 自定义标识在模板里
      找不到同名区域时，CSS 会退化成"所有隐式线都叫这个名字" —— 也就是
      解析到**第 1 行**，页脚会跳到左上角和搜索框重叠。
   2. **不要用硬编码行号**（比如 `grid-area: 4 / 1 / 5 / -1`）。具名区域和
      显式行号是两套独立的东西，混用才危险：那个写法占的是第 4 行，而窄屏
      模板的第 4 行**就是 `news` 区域**，页脚会盖在新闻上。
   3. **`row-gap` 必须是 0。** `#result` 没搜索时是空 div，有行间距的话
      会在搜索框和新闻之间留一道缝。

   另外 **不要在这里写 `padding`** —— 写了会让上面 720px 断点那条
   `main { padding: 18px 16px 56px }` 永远失效（它优先级更低）。 */
main.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-areas:
    "search side"
    "result side"
    "news   side"
    "footer footer";
  gap: 0 30px;
  /* max-width 要从 900 放宽：两栏塞不下。main.layout 是 (0,1,1)，
     能盖住 `main` 的 (0,0,1)，跟谁先谁后无关。 */
  max-width: 1080px;
  margin: 0 auto;
}
.search        { grid-area: search; }
#result        { grid-area: result; }
#news          { grid-area: news; }
#lists         { grid-area: side; }
footer.sources { grid-area: footer; }

/* 侧栏。**`align-self: start` 是 sticky 的必需条件，不是保险** ——
   grid item 默认 stretch 会被拉满整个区域，盒高 == 包含块高，
   没有可滚动余量，sticky 等于没写。 */
#lists {
  position: sticky;
  top: calc(var(--topbar-h) + 12px);
  align-self: start;
}

/* 媒体查询必须写在基础规则**之后**（同优先级后写者胜）。
   900px 整点上 max-width:900 也匹配，写前面的话宽屏模板会赢。 */
@media (max-width: 900px) {
  main.layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "search" "result" "side" "news" "footer";
  }
  #lists { position: static; }
}
@media (max-width: 720px) { :root { --topbar-h: 84px; } }

/* 锚点跳转（顶栏那个「每日新闻」）别被粘顶栏盖住 */
#news { scroll-margin-top: calc(var(--topbar-h) + 12px); }

/* ---------------------------------------------------------- 搜索 */

/* 窄屏改上下堆叠 —— 光靠 min-width:0 也能不溢出，但按钮只剩一小条会很难点 */
.search-row { display: flex; gap: 10px; }
.search input {
  flex: 1 1 auto; min-width: 0;
  padding: 12px 14px; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--card); border: 1px solid var(--rule-2);
  border-radius: var(--radius); outline: none;
}
.search input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20, 22, 26, .07); }
.search input::placeholder { color: var(--ink-3); }
@media (max-width: 560px) {
  .search-row { flex-direction: column; }
  .search-row button { width: 100%; }
}

.hint { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; }
.card-sub { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--ink-3); }
.empty-note { padding: 20px 0; }

button {
  font: inherit; font-size: 14px; cursor: pointer;
  border-radius: var(--radius);
  border: 1px solid var(--rule-2); background: var(--card);
  padding: 9px 15px; color: var(--ink);
  transition: border-color .12s, background-color .12s, color .12s;
}
button:hover { border-color: var(--ink-3); }
button.primary {
  background: var(--ink); border-color: var(--ink); color: #fff;
  padding: 12px 22px; font-weight: 500;
}
button.primary:hover { background: #2b2f38; }
button.link {
  border: none; background: none; color: var(--sci);
  padding: 6px 2px; text-decoration: underline; font-size: 13px;
}
button.tiny { padding: 5px 10px; font-size: 12.5px; }
button:disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------- 目录卡 */

.card {
  margin-top: 22px; padding: 20px 22px;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius);
}
/* 衬线只出现在这里 —— 论文标题是页面上的"著录标题"，拉丁文为主 */
.card h2 {
  margin: 0 0 6px; font: 400 19px/1.42 var(--serif); letter-spacing: .005em;
}
.card h2 a { color: var(--ink); text-decoration: none; }
.card h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }

.meta { font-size: 13px; color: var(--ink-2); margin: 3px 0; }
.meta .k { color: var(--ink-3); }
.doi { font-family: var(--mono); font-size: 12.5px; color: var(--sci); text-decoration: none; }
.doi:hover { text-decoration: underline; }

/* 摘要默认折叠在查询页（一篇论文的摘要很长），但在文献卡里是主内容之一 */
.abstract { margin-top: 16px; }
.abstract summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.abstract summary:hover { color: var(--ink); }
.abstract p { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.78; }
.noabstract {
  margin-top: 12px; padding: 9px 12px; font-size: 12.5px; color: var(--ink-3);
  background: var(--paper); border-left: 2px solid var(--rule-2);
}

/* 分区 / 收录：**两块之间要有明显分隔**，见文件头的约束 1。
   用两条顶线分成两组字段，而不是两个背景色块。 */

.blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 18px; }
.block { border-top: 2px solid var(--ink); padding-top: 10px; }
.block > h3 {
  margin: 0 0 4px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .08em; color: var(--ink-3);
}
.block .empty { font-size: 13px; color: var(--ink-3); line-height: 1.7; padding: 4px 0; }
.block .src { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule);
              font-size: 11.5px; color: var(--ink-3); line-height: 1.65; }
.block .src b { color: var(--ink-2); }

@media (max-width: 720px) { .blocks { grid-template-columns: 1fr; gap: 24px 0; } }

/* 字段行：标签一列、值一列。**目录卡的形态就靠这个对齐**。
   窄屏改成标签在上、值在下 —— 硬挤两列会让值只剩几个字宽。 */
.facts { margin: 6px 0 0; font-size: 13.5px; }
.facts > div {
  /* 6.5em 是按最长的标签 "SCI / SSCI" 定的，两个字段组共用同一个宽度，
     这样左右两栏的值能对齐（目录卡靠对齐分层，不靠盒子） */
  display: grid; grid-template-columns: 6.5em 1fr; gap: 1px 12px;
  padding: 5px 0; border-top: 1px solid var(--rule);
}
.facts > div:first-child { border-top: none; }
.facts .k { color: var(--ink-3); font-size: 12.5px; }
/* 数值用等宽：对齐好看，也不会把 1 和 l、0 和 O 看混 */
.facts .v { min-width: 0; }
@media (max-width: 560px) {
  .facts > div { grid-template-columns: 1fr; gap: 1px; }
}

/* ---------------------------------------------------------- 标记

   **不再是胶囊**。原来是彩色背景 + 白字，那是标准的 SaaS 徽章；
   目录卡上这些是"著录值"，所以做成着色文字。语义色全部按文字对比度压深过
   （见 :root 的注释），别再把它们当背景色用。 */

.badges { display: flex; flex-wrap: wrap; gap: 3px 14px; align-items: baseline; }
.badge {
  display: inline; font-size: 13px; font-weight: 500;
  letter-spacing: .01em; color: var(--ink-2);
}
.badge + .badge { margin-left: 12px; }
.badge small { font-weight: 400; opacity: .78; margin-left: 5px; font-family: var(--mono); font-size: 11.5px; }
.badge.q-good  { color: var(--q-good); }
.badge.q-mid   { color: var(--q-mid); }
.badge.q-low   { color: var(--q-low); }
.badge.sci     { color: var(--sci); }
.badge.ei      { color: var(--ei); }
.badge.warn    { color: var(--warn); }
.badge.unknown { color: var(--unknown); font-weight: 400; }
.badge.plain   { color: var(--ink-2); font-weight: 400; }
.badge.topic   { color: var(--ink-3); font-weight: 400; }

/* 手工填写 / AI 生成：**虚线边框**跟所有实打实的数据源结论在形态上就不一样。
   这是产品约束，不是审美选择 —— 用户必须一眼看出"这不是数据源查到的"。 */
.badge.manual, .badge.ai {
  border: 1px dashed currentColor; border-radius: var(--radius);
  padding: 1px 6px; font-weight: 400;
}
.badge.manual { color: var(--manual); }
.badge.ai { color: var(--ai); }

/* 认领按钮 */
.claimbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.claimbar .spacer { flex: 1; }
.claimbar .on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------------------------------------------------------- 候选列表 */

.cand { padding: 11px 6px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.cand:last-child { border-bottom: none; }
.cand:hover { background: #f4f5f7; }
.cand .t { font-size: 13.5px; font-weight: 500; }
.cand .m { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* ---------------------------------------------------------- 我的列表 */

/* 列表现在是右侧栏（`#lists { grid-area: side }`），margin 由布局那边管 */
.lists { margin-top: 0; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule-2); flex-wrap: wrap; }
.tab {
  border: none; background: none; border-radius: 0;
  padding: 9px 13px; color: var(--ink-3); font-size: 13.5px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .12s, border-color .12s;
}
.tab:hover { color: var(--ink-2); }
.tab.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.pill {
  display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 5px;
  font-size: 11px; font-family: var(--mono);
  background: #eef0f3; color: var(--ink-2); border-radius: var(--radius);
}
/* 列表行**竖排**：现在它在 280px 的侧栏里，原来那个
   「题名+meta | 徽章」横向 flex 会把题名压成一条线。 */
.row {
  display: block;
  padding: 10px 4px; border-bottom: 1px solid var(--rule);
}
.row .grow { min-width: 0; }
.row .t { font-size: 13px; font-weight: 500; line-height: 1.45; }
.row .m { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.row .mini { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 5px; }

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

.sources {
  margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--rule-2);
  font-size: 12px; color: var(--ink-3); line-height: 1.85;
}
.sources b { color: var(--ink-2); font-weight: 600; }
.sources > div + div { margin-top: 4px; }

/* ---------------------------------------------------------- 模态框 */

.modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 22, 26, .42);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-box {
  width: 340px; max-width: 100%;      /* 窄屏别把弹窗顶出视口 */
  max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 22px; background: var(--card);
  border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
}
.modal-box h2 { margin: 0 0 16px; font-size: 17px; font-weight: 600; }
.modal-box label { display: block; margin-bottom: 12px; font-size: 12.5px; color: var(--ink-2); }
.modal-box input, .modal-box select {
  display: block; width: 100%; margin-top: 5px; padding: 9px 11px;
  font: inherit; font-size: 14px; background: var(--card); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: var(--radius); outline: none;
}
.modal-box input:focus, .modal-box select:focus { border-color: var(--ink); }
.modal-box.wide { width: 480px; }
.modal-box .hint { margin: 0 0 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.modal-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.modal-actions .primary { padding: 9px 18px; }
.modal-actions .spacer { flex: 1; }
.err { min-height: 18px; margin: 6px 0 0; font-size: 12.5px; color: var(--warn); }

@media (max-width: 560px) {
  .grid2 { grid-template-columns: 1fr; }
  .modal-box.wide { width: 100%; }
}

/* ---------------------------------------------------------- 提示 / 加载 */

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 11px 18px; border-radius: var(--radius); font-size: 13.5px;
  background: var(--ink); color: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .24);
  animation: rise .16s ease-out;
}
.toast.bad { background: var(--warn); }
.hidden { display: none !important; }

/* 动效克制：**只在"内容出现"和"用户操作有回应"时用**，
   不搞逐元素入场动画（那是最典型的生成式页面痕迹）。 */
@keyframes rise { from { opacity: 0; transform: translate(-50%, 6px); } }
@keyframes fadein { from { opacity: 0; } }

.spinner { display: inline-block; color: var(--ink-3); font-size: 13.5px; padding: 22px 0; }

/* 骨架屏：点击 tab 时立刻出现，让"我点的东西有反应了"先于数据到达。
   网络往返 ~500ms 是本项目的物理下限（隧道出口在境外），
   所以缩短不了的那部分要靠这个补。 */
.skel { padding: 4px 0; animation: fadein .18s ease-out; }
.skel-line {
  height: 11px; margin: 10px 0; border-radius: var(--radius);
  background: linear-gradient(90deg, #eef0f3 25%, #f6f7f9 37%, #eef0f3 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.skel-line.w40 { width: 40%; } .skel-line.w70 { width: 70%; } .skel-line.w85 { width: 85%; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skel-line { animation: none; } }

/* ---------------------------------------------------------- 每日新闻 */

/* 学科色块。**刻意不用图片** —— 论文插图归出版商所有，转载有版权问题。
   颜色 + 文字一样能把分类说清楚，而且没有加载开销。 */
.fieldblk {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 600; color: #fff;
}
.fieldblk.mat { background: var(--news-mat); }
.fieldblk.phy { background: var(--news-phy); }

/* 首页内嵌的速览区。从独立页挪过来的，所以**不是一整张卡片**，
   是一列用细线分条的紧凑行 —— 首页上边已经有查询结果了，
   再来 5 张完整卡片会把页面拉得很长。 */
.news { margin-top: 34px; }
.news-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 2px; padding-top: 10px;
  border-top: 2px solid var(--ink);
  font-size: 14px; font-weight: 600;
}
.news-sub { font-size: 11.5px; font-weight: 400; color: var(--ink-3); }

/* 一条 = 一个原生 <details>。折叠开关就是这一行本身，零 JS、键盘可达、
   无障碍语义自带（CSP 下没有行内事件，用原生元素最省事）。 */
.newsrow { border-bottom: 1px solid var(--rule); }
.newsrow > summary {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; cursor: pointer;
  list-style: none;                       /* 去掉原生三角，下面自己画 */
}
.newsrow > summary::-webkit-details-marker { display: none; }
.newsrow > summary::after {               /* 展开指示 */
  content: "▸"; flex: 0 0 auto; font-size: 10px; color: var(--ink-3);
  transition: transform .15s;
}
.newsrow[open] > summary::after { transform: rotate(90deg); }
.newsrow > summary:hover .newsrow-title { text-decoration: underline; text-decoration-thickness: 1px; }

.newsrow-main { min-width: 0; flex: 1 1 auto; }   /* ← 不写这条窄屏就溢出 */
.newsrow-title {
  display: block; font: 400 14px/1.45 var(--serif); letter-spacing: .005em;
}
.newsrow-sum {
  display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-2);
  /* 一行截断：紧凑列表要能一眼扫过去 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.newsrow .badges { margin-top: 5px; gap: 2px 12px; }
.newsrow .badge { font-size: 12px; }

/* 展开后的详情。左边缩进到和题名对齐（色块 40 + gap 12） */
.newsrow-body { padding: 2px 0 16px 52px; }
.newsrow-body > p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.8; }
.newsrow-body .abstract-text {
  margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--rule-2);
  font-size: 12.5px; color: var(--ink-2); line-height: 1.7;
}
.newsrow-body .doi { display: inline-block; margin-top: 10px; }
@media (max-width: 560px) { .newsrow-body { padding-left: 0; } }

.news-more { margin-top: 14px; }
.news-empty { padding: 16px 0; font-size: 13px; color: var(--ink-3); }

.src { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }

.warnbar {
  margin: 0 0 16px; padding: 10px 13px; border-radius: var(--radius);
  background: #fdf0ef; border-left: 2px solid var(--warn);
  color: var(--warn); font-size: 12.5px; line-height: 1.65;
}