/* ==========================================================================
   左右布局外壳（复刻 AIHOT SiteShell + Sidebar）
   --------------------------------------------------------------------------
   桌面（≥961px，与 AIHOT 的 lg 断点一致）：
     左 180px 固定导航栏（position:fixed，不占流内空间）+ 右侧主区（宽度 100%）
   移动（≤960px）：
     顶部栏（.mbar），隐藏 .sidenav
   ========================================================================== */

.shell { display: flex; min-height: 100vh; min-height: 100dvh; }

/* ---------- 左侧导航栏 ---------- */
/* 用 fixed 而非 sticky：sticky 元素仍在流内占位（min-height:100dvh），
   会把主区整体推到首屏之下。fixed + 固定宽高才能真正做到「左栏 + 右内容」。 */
.sidenav {
  display: none;                       /* 移动端默认隐藏 */
  position: fixed; left: 0; top: 0; bottom: 0;
  width: var(--nav-w);
  flex-direction: column;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  padding: 22px 12px 14px;
  z-index: 30;
  overflow: hidden;
}
@media (min-width: 961px) { .sidenav { display: flex; } }

.sidenav-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 0 6px; margin-bottom: 14px; height: 46px;
  color: var(--ink); text-decoration: none;
}
.sidenav-brand svg, .sidenav-brand img { display: block; flex: 0 0 auto; }
/* 侧栏品牌：轨道图标 22px + 字标 16px（移动端顶栏仍是 30px 图标）*/
.sidenav-brand .brand-icon { width: 22px; height: 22px; }

.sidenav-scroll {
  flex: 1; overflow-y: auto; min-height: 0;
  margin: 0 -4px; padding: 0 4px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.sidenav-sec {
  padding: 12px 10px 4px;
  font-size: 11px; color: var(--ink-4);
}
.sidenav-sec:first-child { padding-top: 0; }

/* 导航项：AIHOT 为 h-10 / gap-2.5 / rounded-control / px-2.5 */
.navitem {
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 10px; margin-bottom: 4px;
  border-radius: var(--radius-control);
  font-size: 14px; color: var(--ink-3); text-decoration: none;
  transition: background-color .15s, color .15s;
}
.navitem:hover { background: var(--bg-sunk); color: var(--ink); }
.navitem.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.navitem .ic { width: 20px; flex: 0 0 20px; display: grid; place-items: center; }
.navitem.on .ic { color: var(--accent); }
.navitem .lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidenav-foot { margin-top: 8px; padding: 8px 6px 0; border-top: 1px solid var(--line-soft); }
.sidenav-foot .cp,
.sidenav-foot .icp,
.sidenav-foot .mail {
  display: block; margin-top: 7px;
  font-size: 10.5px; color: var(--ink-4); line-height: 1.6; text-decoration: none;
}
.sidenav-foot a.icp:hover,
.sidenav-foot a.mail:hover { color: var(--ink-3); }

/* ---------- 主区 ---------- */
/* --shell-pad：主区左右内距，全站统一 22px（曾试过 ≥1920 归零，已还原）。
   需要"出血"到主区边缘的元素（如 .dayhead 的吸顶条）一律引用它，
   改这里的值不必再同步别处的负 margin。 */
.shell-main {
  --shell-pad: 22px;
  flex: 1; min-width: 0;
  padding: 0 var(--shell-pad) 64px;
  position: relative; z-index: 1;
}
@media (min-width: 961px) {
  /* 让出左侧固定导航栏的宽度 */
  .shell-main { margin-left: var(--nav-w); padding: 22px var(--shell-pad) 64px; }
}
/* 内容列：占满主区宽度（AIHOT 桌面主区无右栏，列表贴住可用宽度） */
.shell-col { width: 100%; }

/* 移动端顶栏（AIHOT PhoneBar）；桌面隐藏 */
.mbar { display: flex; align-items: center; gap: 10px; height: 48px; }
.mbar .brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 700; }
.mbar .brand svg { display: block; }
@media (min-width: 961px) {
  .mbar { display: none; }
  .shell-main { padding-bottom: 64px; }
}

/* ---------- 页面标题 + 筛选行（复刻 AIHOT /all：标题 → 胶囊轨 + 搜索框）---------- */
.page-title {
  margin: 4px 0 0;
  font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--ink);
}
.feedbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px 0 0;
}
.feedbar .fb-tracks {
  display: flex; align-items: center; gap: 8px;
  flex: 0 1 auto; min-width: 0;
}
/* 搜索框贴内容区右缘（AIHOT 的 justify-between）；空间不足换行时靠右自成一行 */
.feedbar .sfield { flex: 0 0 auto; width: 240px; margin-left: auto; }
@media (max-width: 1400px) { .feedbar .sfield { width: 220px; } }
@media (max-width: 960px) {
  .feedbar { gap: 10px; }
  .feedbar .fb-tracks { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
  .feedbar .fb-tracks::-webkit-scrollbar { display: none; }
  .feedbar .sfield { width: 100%; flex: 1 1 100%; margin-left: 0; }
}

/* 胶囊筛选轨（AIHOT PillTabs：灰轨 + 选中项浮块）*/
.pilltrack {
  position: relative;
  display: inline-flex; align-items: center; gap: 2px;
  max-width: 100%; padding: 3px;
  border-radius: 999px; background: var(--bg-sunk);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  overflow-x: auto; scrollbar-width: none;
}
.pilltrack::-webkit-scrollbar { display: none; }
/* 选中浮块：由 JS 定位到当前 .pill（translate + 尺寸过渡），无 JS 时不显现 */
.pill-ink {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: 0; height: 0; border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-thumb), inset 0 0 0 1px var(--line);
  opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1),
              width .3s cubic-bezier(.22, 1, .36, 1),
              height .3s cubic-bezier(.22, 1, .36, 1),
              opacity .18s;
}
.pilltrack.ink-on .pill-ink { opacity: 1; }
.pill {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; line-height: 1; white-space: nowrap;
  color: var(--ink-3); text-decoration: none;
  transition: background-color .15s, color .15s;
}
.pill:hover { color: var(--ink); }
.pilltrack.ink-on .pill:not(.on):hover { background: rgba(255, 255, 255, .05); }
.pill .pill-n {
  margin-left: 5px; font-size: 11.5px; font-weight: 400;
  color: var(--ink-4); font-variant-numeric: tabular-nums;
}
.pill.on .pill-n { color: var(--ink-3); }
.pill.on {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: var(--shadow-thumb), inset 0 0 0 1px var(--line);
}
/* JS 就绪后选中浮块由 .pill-ink 承载，pill 自身底色让位避免重影 */
.pilltrack.ink-on .pill.on { background: transparent; }

/* 搜索框（AIHOT SearchField：灰轨胶囊 + 放大镜 + 「/」提示）*/
.sfield { position: relative; }
.sfield-ic {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink-4); pointer-events: none;
}
.sfield-in {
  width: 100%; height: 42px; padding: 0 38px 0 38px;
  border: 0; border-radius: 999px;
  background: var(--bg-sunk);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  font: 400 14px/1 var(--sans); color: var(--ink);
  outline: none;
  transition: background-color .15s, box-shadow .15s;
}
.sfield-in::placeholder { color: var(--ink-4); }
.sfield-in:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.sfield-in:focus {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-soft);
}
.sfield-kbd {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  min-width: 17px; padding: 0 5px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-mark);
  background: var(--surface);
  font: 400 10.5px/16px var(--font-mono); color: var(--ink-4);
  text-align: center; pointer-events: none;
}
/* 有搜索词时的清除按钮（链到去掉 q 的同一地址，服务端渲染） */
.sfield-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; color: var(--ink-4); text-decoration: none; transition: .15s;
}
.sfield-clear:hover { background: var(--surface); color: var(--ink); }
.srch-count { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-4); }
.srch-count b { color: var(--ink-3); font-family: var(--font-mono); font-weight: 600; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- 日期分组 + 时间轴（复刻 AIHOT DayList：日期头吸顶 + 左列时间轨道）---------- */
.daysec { margin-top: 8px; }
.daysec + .daysec { margin-top: 6px; }

/* 日期头：滚动时吸顶，底色压住下方内容（AIHOT 桌面 sticky top-0 z-20）
   负 margin 让底色出血到主区边缘，宽度跟随 .shell-main 的 --shell-pad */
.dayhead {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  min-height: 44px;
  margin: 0 calc(-1 * var(--shell-pad, 22px));
  padding: 0 var(--shell-pad, 22px);
  background: var(--bg);
}
@media (max-width: 960px) {
  .dayhead { background: var(--daybar); }
}
.dayhead .dh-date {
  margin: 0;
  font-size: 18px; font-weight: 600; line-height: 24px; color: var(--ink);
  white-space: nowrap;
}
.dayhead .dh-date time { font: inherit; color: inherit; }
.dayhead .dh-meta { font-size: 13px; color: var(--ink-4); white-space: nowrap; }
.dayhead .dh-meta .n { font-family: var(--font-mono); }
.dayhead .dh-aside { margin-left: auto; font-size: 12px; color: var(--ink-4); }

/* 时间轴：桌面 64px 时间列 + 22px 轨道列 + 卡片 */
.tl { list-style: none; margin: 0; padding: 2px 0 0; }
.slot { display: grid; grid-template-columns: 64px 22px minmax(0, 1fr); }
.slot-t {
  grid-column: 1; padding-top: 17px;
  font: 600 12.5px/24px var(--font-mono); color: var(--ink-3);
  white-space: nowrap;
}
.slot-rail { grid-column: 2; position: relative; }
.slot-rail .rl {
  position: absolute; left: 10.5px; top: 30px; bottom: -43px;
  width: 1px; background: var(--line-strong);
}
.slot:last-child .slot-rail .rl { display: none; }
.slot-rail .rd {
  position: absolute; left: 7.5px; top: 26px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}
.slot-body { grid-column: 3; min-width: 0; padding-bottom: 14px; }
@media (max-width: 960px) {
  /* 移动端：隐藏时间列与轨道，时间回到来源行（AIHOT 手机形态）*/
  .slot { display: block; }
  .slot-t, .slot-rail { display: none; }
  .slot-body { padding-bottom: 10px; }
}
/* 桌面时间由左列承担，来源行里的时间只给移动端 */
@media (min-width: 961px) { .fi-meta .tm { display: none; } }

/* ---------- 动态卡片（复刻 AIHOT FeedItem 四层结构）---------- */
.feed-item {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 15px 18px 14px;
  transition: border-color .16s, transform .16s;
}
.feed-item:hover { border-color: var(--line-strong); transform: translateY(-1px); }

/* 第1 层：来源行 */
.fi-meta {
  display: flex; align-items: center; gap: 7px;
  min-height: 19px;
  font-size: 12.5px; line-height: 18px; color: var(--ink-4);
}
.fi-meta .src { font-weight: 600; color: var(--ink-3); }
.fi-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .45; flex: 0 0 3px; }
.fi-meta .tm { font-family: var(--font-mono); font-size: 12px; flex: 0 0 auto; }
.fi-meta .right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* 移动端：来源行只留「来源 · 时间 · 徽标」，其余隐藏，避免长来源名把行撑成多行 */
.fi-meta > * { min-width: 0; }
.fi-meta .src, .fi-meta .tm, .fi-meta .right { white-space: nowrap; }
@media (max-width: 760px) {
  .fi-meta { gap: 6px; font-size: 12px; }
  .fi-meta .src { overflow: hidden; text-overflow: ellipsis; max-width: 45vw; }
  .fi-meta .grp, .fi-meta .lang, .fi-meta .sep { display: none; }
}

/* 徽标：快照 / 原文 */
.fi-badge {
  padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 17px;
  background: var(--accent-soft); color: var(--accent);
}
.fi-badge.plain { background: var(--field); color: var(--ink-4); font-weight: 500; }

/* 第 2 层：标题 */
.fi-title {
  margin: 7px 0 0;
  font-size: 17px; font-weight: 650; line-height: 1.5; color: var(--ink);
}
.fi-title a { color: inherit; text-decoration: none; }
.fi-title a:hover { color: var(--accent-ink); }

/* 第 3 层：摘要 */
.fi-sum {
  margin: 5px 0 0;
  font-size: 14.5px; line-height: 1.7; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* 第 4 层：快照/原文入口 */
.fi-links { margin-top: 8px; display: flex; gap: 10px; font-size: 12.5px; }
.fi-links a { color: var(--ink-4); text-decoration: none; }
.fi-links a:hover { color: var(--accent); }
.fi-links .go { color: var(--accent); }

/* ---------- 空状态 ---------- */
.empty-state {
  margin: 14px 0 0; padding: 40px 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card);
  text-align: center; color: var(--ink-3); font-size: 14px;
}
.empty-state code {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-4);
  background: var(--field); border-radius: var(--radius-mark); padding: 2px 6px;
}

/* ---------- 归档导航（日期间翻页）---------- */
.pagenav {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 20px 0 0;
}
.pagenav .btn-ghost {
  padding: 6px 13px; border-radius: var(--radius-control);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-3); font-size: 13px; text-decoration: none;
  font-family: var(--font-mono);
  transition: background-color .15s, color .15s, border-color .15s;
}
.pagenav .btn-ghost:hover { background: var(--bg-sunk); color: var(--ink); border-color: var(--line-strong); }