/* =========================================================
   诗以载史 · 组件层：玻璃卡片系统 / 入口卡 / 代表作卡 / 时间轴 / 折叠 / 诗词库筛选与卡片
   ========================================================= */

/* ---------- 玻璃质感卡片系统（统一毛玻璃 + 交互反馈） ---------- */
.entry-card, .poem-card, .ev-card, .tl-card, .feat-card,
.panel, .poem-rel, .acc, .pf-trigger, .rel-item, .sib-item,
.poem-nav a, .search-box {
  position: relative;
  background: color-mix(in srgb, var(--surface) 66%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--surface) 55%, var(--line));
  box-shadow: var(--shadow-sm), inset 0 1px 1px rgba(255,255,255,.5);
}
/* 小型列表项用更轻的磨砂，降低大列表时的合成开销 */
.rel-item, .sib-item {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}
/* 诗词详情「关联历史节点 / 关联语录」卡片：磨砂质感，色调贴近容器而非纯白 */
.rel-item {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  box-shadow: var(--shadow-sm), inset 0 1px 1px color-mix(in srgb, #fff 30%, transparent);
}
/* 关联语录卡片：主题作眉标，正文限高，箭头落右下角，避免长文压住箭头 */
.rel-item.quote { gap: 8px; }
.rel-item.quote .rel-ds {
  order: -1; font-size: 12px; color: var(--accent); letter-spacing: .05em;
}
.rel-item.quote .rel-tt {
  font-weight: 400; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; padding-right: 26px;
}
.rel-item.quote .rel-go { top: auto; bottom: 14px; right: 16px; }

/* 入口卡片 */
.entry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
.entry-card {
  border-radius: var(--radius-lg); padding: 32px 30px; display: flex; flex-direction: column; overflow: hidden; min-height: 198px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  &:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 24px 54px color-mix(in srgb, var(--accent) 18%, transparent);
    & .more { color: var(--gold); transform: translateX(4px); }
  }
  &:active { transform: translateY(-3px) scale(.99); }
  &:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  & h3 { font-size: 25px; margin: 0 0 14px; color: var(--ink); }
  & p { color: var(--ink); font-size: 15.5px; line-height: 1.85; margin: 0; flex: 1; }
  /* 「进入」固定在卡片右下角，借助网格等高 + margin-top:auto 使三张卡按钮同处一行 */
  & .more { display: inline-block; margin-top: 18px; align-self: flex-end; color: var(--accent); font-size: 14px; font-weight: 600; transition: color .25s var(--ease), transform .25s var(--ease); }
}

/* 首页代表作（诗词 + 语录 混合 · 上下垂直卡片，展示部分正文） */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; margin-top: 26px; }
.feat-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 26px; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  &:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 24px 54px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  &:active { transform: translateY(-3px) scale(.99); }
  &:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  & .fc-kind {
    align-self: flex-start; font-size: 11px; letter-spacing: .14em; padding: 3px 10px; border-radius: 999px;
    background: var(--bg-soft); color: var(--ink-faint);
  }
  &.is-quote .fc-kind { background: color-mix(in srgb, var(--gold) 20%, transparent); color: color-mix(in srgb, var(--gold) 72%, var(--ink)); }
  & .fc-title { font-family: var(--serif); font-size: 20px; margin: 0; }
  & .fc-body {
    font-family: var(--serif); color: var(--ink-soft); font-size: 14px; line-height: 1.75; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  &.is-quote .fc-body { color: var(--ink); }
  & .fc-foot { margin-top: auto; font-size: 12px; color: var(--ink-faint); letter-spacing: .04em; }
}
.refresh-hint { font-size: 13px; color: var(--ink-faint); margin-top: 14px; }

.tl-empty { text-align: center; color: var(--ink-faint); padding: 40px; }

/* ---------- 阶段折叠卡片（时间线 / 生平共用） ---------- */
.acc-list { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }

/* 生平页：文字(左，上下布局) + 时间轴(右)，同处一行 */
.life-head {
  display: flex;
  align-items: stretch;
  gap: 40px;
  /* 仅设上下内边距：本元素同时挂 .wrap 类，左右留白由 .wrap 提供。
     若在此用 padding 简写会把 .wrap 的左右内边距覆盖为 0，导致头部内容贴视口边、平板端看似「未铺满」 */
  padding-top: 30px;
  padding-bottom: 18px;
}
/* 左侧：标题块（上下布局，顶部对齐） */
.life-title {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  text-align: left;
  min-width: 200px;
  padding-right: 40px;
}
.life-head .display { margin: 0; }
.life-sub { font-family: var(--serif); color: var(--accent); letter-spacing: .12em; font-size: clamp(17px, 3vw, 24px); margin: 0; }
/* 顶部统计行：人生阶段 / 历史节点 / 诗词 */
.life-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 30px; max-width: 300px; font-size: 14px; color: var(--ink-soft); margin: 14px 0 0; letter-spacing: .02em; }
.life-stats .ls { line-height: 1.5; }
.life-stats b { font-family: var(--serif); font-weight: 700; color: var(--accent); margin: 0 3px; }
/* 右侧：时间轴内联容器 */
.life-tl-inline {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  padding-left: 40px;
}

/* ---------- 生平横向动态时间轴（右侧内联） ---------- */
.tl-scroll {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; padding: 16px 2px 12px;
}
.tl-scroll::-webkit-scrollbar { height: 6px; }
.tl-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.tl-scroll::-webkit-scrollbar-track { background: transparent; }
.tl-track {
  display: flex; align-items: flex-start; gap: 14px;
  position: relative; min-width: min-content; padding: 0 4px;
}
/* 贯穿节点的时间线 */
.tl-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 12px;
  height: 2px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--line) 4%, var(--line) 96%, transparent);
  z-index: 0;
}
.tl-node {
  scroll-snap-align: center; flex: 0 0 auto; width: 240px;
  display: flex; flex-direction: column; cursor: pointer;
  transition: transform .3s var(--ease);
  &:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
  & .tl-year { height: 19px; line-height: 19px; font-family: var(--serif); font-size: 12.5px; color: var(--accent); letter-spacing: .04em; margin: 0 0 7px; }
  & .tl-rail { height: 24px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
  & .tl-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--node, var(--gold)); border: 3px solid var(--bg);
    box-shadow: 0 0 0 1px var(--node, var(--gold));
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  }
  & .tl-card {
    border-top: 3px solid var(--node, var(--gold));
    border-radius: var(--radius-lg); padding: 13px 15px; overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  }
  & .tl-title { font-family: var(--serif); font-size: 15px; margin: 2px 0 5px; line-height: 1.4; }
  & .tl-sum { font-size: 12px; color: var(--ink-soft); line-height: 1.6; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  & .tl-poems { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
  & .tl-poem { font-size: 11px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); transition: background .25s var(--ease); }
  & .tl-poem:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  &:hover .tl-card { box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--node, var(--gold)) 30%, transparent); }
  &.is-active .tl-card {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--node, var(--gold)) 55%, var(--line));
    box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--node, var(--gold)) 45%, transparent), 0 20px 46px color-mix(in srgb, var(--node, var(--gold)) 18%, transparent);
  }
  &.is-active .tl-dot { transform: scale(1.4); box-shadow: 0 0 0 6px color-mix(in srgb, var(--node, var(--gold)) 18%, transparent); }
}
.tl-controls {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px;
  padding: 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 1px color-mix(in srgb, #fff 45%, transparent),
    0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent),
    0 12px 30px color-mix(in srgb, var(--accent) 14%, transparent);
  width: fit-content; margin-left: auto; margin-right: auto;
}
.tl-arrow {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--accent);
  box-shadow: inset 0 1px 1px color-mix(in srgb, #fff 30%, transparent);
  transition: transform .3s var(--ease), color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease);
}
.tl-arrow svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s var(--ease);
}
/* 仅精确指针（鼠标）设备启用 :hover 红色态，避免触屏点击后 :hover 残留使箭头一直红 */
@media (hover: hover) and (pointer: fine) {
  .tl-arrow:hover {
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 96%, #fff), var(--accent));
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent),
      0 10px 22px color-mix(in srgb, var(--accent) 42%, transparent);
    transform: translateY(-1px);
  }
  .tl-arrow:hover svg { transform: scale(1.18); }
}
/* 点击/按下瞬间显示红色选中态（触屏与鼠标通用）：松开或移开即恢复默认 */
.tl-arrow:active,
.tl-arrow.is-pressed {
  transform: translateY(0) scale(.94);
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 96%, #fff), var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
.tl-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tl-hint { font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; padding: 0 6px; }
.acc {
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.acc.open {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow: var(--shadow-md), inset 0 1px 1px rgba(255,255,255,.5);
}
.acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  &:hover { background: var(--bg-soft); }
  &:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  & .acc-head-main { flex: 0 0 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  & .acc-head-main .range { font-size: 13px; color: var(--accent); letter-spacing: .06em; }
  & .acc-head-main h2 { font-size: 22px; margin: 0; }
  & .acc-head-main .acc-meta { font-size: 13px; color: var(--ink-faint); }
  & .acc-preview { flex: 1; min-width: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
  & .acc-chev {
    width: 22px; height: 22px; flex: none; color: var(--ink-faint);
    transition: transform .35s var(--ease), color .25s var(--ease);
  }
}
.acc.open .acc-chev { transform: rotate(180deg); color: var(--accent); }
.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .42s var(--ease);
}
.acc-pad { padding: 2px 26px 30px; }
.acc-pad .muted { color: var(--ink-soft); }
/* 题解正文：保留段落换行，段间留白，排版工整 */
.tijie-text { color: var(--ink-soft); font-size: 14.5px; margin: 0; line-height: 1.9; white-space: pre-line; }
/* 诗/文详情页折叠块（题解/笺注/自注）：印章颜色随 --seal 变化 */
.acc-seal > .acc-head { gap: 12px; padding: 18px 22px; }
.acc-seal > .acc-head::before {
  content: ""; width: 13px; height: 13px; border-radius: 3px; flex: none;
  background: var(--seal, var(--accent));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #fff 38%, transparent);
}
.acc-seal.open { border-color: color-mix(in srgb, var(--seal, var(--accent)) 32%, var(--line)); }
.acc-seal .acc-title { flex: 1; font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); }
.acc-seal .acc-chev { width: 20px; height: 20px; flex: none; color: var(--ink-faint); transition: transform .35s var(--ease), color .25s var(--ease); }
.acc-seal.open .acc-chev { transform: rotate(180deg); color: var(--seal, var(--accent)); }

@media (max-width: 560px) {
  .acc-head { padding: 18px; gap: 14px; flex-wrap: wrap; }
  .acc-pad { padding: 2px 18px 26px; }
  .acc-head-main h2 { font-size: 19px; }
  .acc-preview { flex-basis: 100%; }
}

/* ---------- 诗词库 ---------- */
.poems-toolbar { max-width: 980px; margin: 13px auto 34px; }
.search-box {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.search-box input { border: none; outline: none; background: none; color: var(--ink); font-size: 14px; width: 100%; font-family: var(--sans); }
.search-box svg { width: 16px; height: 16px; color: var(--ink-faint); flex: none; }

/* ---------- 诗词库下拉筛选栏 ---------- */
.poems-filters {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: safe center;
  gap: 10px; margin-top: 16px;
}
/* 筛选栏末列：结果数量小字，与筛选按钮同一行、整体居中，左侧细分割线 */
.filter-count {
  font-size: 13px; color: var(--ink-faint); letter-spacing: .04em;
  margin-left: 6px; padding-left: 16px; border-left: 1px solid var(--line);
  white-space: nowrap; align-self: center;
}
.pf-reset {
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 13px; letter-spacing: .04em; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--accent);
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.pf-reset:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 14%, transparent); transform: translateY(-1px); }
.pf-reset:active { transform: translateY(0) scale(.97); }

.pf-dropdown { position: relative; }
.pf-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 150px; padding: 9px 14px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 13px; letter-spacing: .04em; white-space: nowrap;
  color: var(--ink-soft);
  transition: transform .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  & .pf-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  &:hover { color: var(--ink); border-color: var(--accent-soft); box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent), 0 6px 16px color-mix(in srgb, var(--accent) 12%, transparent); transform: translateY(-1px); }
  &.is-selected {
    color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent), inset 0 1px 1px rgba(255,255,255,.5);
  }
  &:active { transform: translateY(0) scale(.97); }
  &[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
  & .pf-chev {
    width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round; flex: none;
    transition: transform .28s var(--ease);
  }
  &[aria-expanded="true"] .pf-chev { transform: rotate(180deg); }
}

.pf-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  min-width: 168px; max-height: 300px; overflow-y: auto;
  padding: 6px; border-radius: 16px;
  display: flex; flex-direction: column; gap: 4px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  box-shadow: 0 18px 44px color-mix(in srgb, #000 22%, transparent), inset 0 1px 1px color-mix(in srgb, #fff 8%, transparent);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top left;
  visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 28%, var(--line)) transparent;
  &::-webkit-scrollbar { width: 8px; }
  &::-webkit-scrollbar-button { display: none; width: 0; height: 0; -webkit-appearance: none; appearance: none; }
  &::-webkit-scrollbar-track { background: transparent; }
  &::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
    transition: background .2s var(--ease);
  }
  &::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 42%, var(--line)); background-clip: padding-box; }
}
.pf-dropdown.open .pf-menu { opacity: 1; transform: translateY(0) scale(1); visibility: visible; pointer-events: auto; }
.pf-dropdown:last-child .pf-menu { left: auto; right: 0; transform-origin: top right; }
.pf-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; padding: 9px 12px; border-radius: 11px;
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--ink-soft);
  transition: background .18s var(--ease), color .18s var(--ease);
  &:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); }
  &.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
  & .pf-check { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .18s var(--ease); flex: none; }
  &.active .pf-check { opacity: 1; }
  &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}

/* 类型二级联：诗→体裁 / 词→词牌 */
.pf-cascade { position: relative; }
/* 一级面板固定宽度，二级面板据此右移，确保二者之间留出真实空隙 */
.pf-cascade .pf-menu-genre { width: 172px; }
.pf-submenu {
  position: absolute; top: calc(100% + 8px); left: calc(172px + 8px); z-index: 41;
  min-width: 168px; max-height: 300px; overflow-y: auto;
  padding: 6px; border-radius: 16px;
  display: flex; flex-direction: column; gap: 4px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  box-shadow: 0 18px 44px color-mix(in srgb, #000 22%, transparent), inset 0 1px 1px color-mix(in srgb, #fff 8%, transparent);
  opacity: 0; transform: translateX(-6px) scale(.98); transform-origin: top left;
  visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 28%, var(--line)) transparent;
  &::-webkit-scrollbar { width: 8px; }
  &::-webkit-scrollbar-button { display: none; width: 0; height: 0; -webkit-appearance: none; appearance: none; }
  &::-webkit-scrollbar-track { background: transparent; }
  &::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
  &::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 42%, var(--line)); background-clip: padding-box; }
}
/* 透明桥接：跨越一级与二级面板间的空隙(8px)时不丢失 hover；向上下各延展一点以覆盖面板高度差造成的接缝 */
.pf-submenu::before { content: ""; position: absolute; top: -8px; left: -10px; width: 12px; height: calc(100% + 8px); }
.pf-submenu.show { opacity: 1; transform: translateX(0) scale(1); visibility: visible; pointer-events: auto; }
.pf-cascade-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; text-align: left; padding: 9px 12px; border-radius: 11px;
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--ink-soft);
  transition: background .18s var(--ease), color .18s var(--ease);
  &:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); }
  &.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
  & .pf-check { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .18s var(--ease); flex: none; }
  &.active .pf-check { opacity: 1; }
  &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}

.poem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.poem-card {
  border-radius: var(--radius-lg); padding: 26px; cursor: pointer; display: flex;
  flex-direction: column; gap: 10px; overflow: hidden;
  /* 诗词库长列表（最多 63 张）单独降档保 60fps：blur 16→9、saturate 180→150 */
  -webkit-backdrop-filter: blur(9px) saturate(150%);
  backdrop-filter: blur(9px) saturate(150%);
  /* 视口外卡片跳过绘制/布局，滚动 paint 压力骤降（浏览器记住真实高度，无滚动跳动） */
  content-visibility: auto; contain-intrinsic-size: auto 232px;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  &:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: var(--shadow-lg), 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 24px 54px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  &:active { transform: translateY(-3px) scale(.99); }
  &:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  & .yr { font-size: 12px; color: var(--accent); letter-spacing: .08em; }
  & h3 { font-size: 21px; margin: 0; }
  & .excerpt { font-family: var(--serif); color: var(--ink-soft); font-size: 14px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  & .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
  & .tags span { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-soft); }
}