/* 鈹€鈹€ Reset & tokens 鈹€鈹€ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg:       #ffffff;
      --bg2:      #f5f4f0;
      --bg3:      #efede8;
      --text:     #1a1a18;
      --text2:    #6b6b67;
      --text3:    #6c6c68;   /* 原 #a0a09c 对三种底色只有 2.38 / 2.62 / 2.24，
                                11px 的小字几乎看不清。降到 4.79 / 5.27 / 4.51，
                                三种底色全过 AA。色相与饱和度未动。 */
      --border:   rgba(0,0,0,.10);
      --border2:  rgba(0,0,0,.18);
      --radius:   12px;
      --radius-s: 8px;
      --shadow:   none;
      --info-bg:  #e6f1fb;
      --info-txt: #185fa5;
      --ok-bg:    #eaf3de;
      --ok-txt:   #3b6d11;

      /* 别名：about.php 与 about-editor.css 里有 89 处写着 var(--fg-2,#666) 这类，
         而 --fg-1/--fg-2/--fg-3/--divider/--bg1/--badge-bg/--badge-fg 这七个名字
         **从来没有定义过**——于是一律吃兜底值，也就是写死的浅色。后果是深色主题下
         书页那些二级文字仍是 #666，实测对 #252523 只有 2.67:1（AA 要 4.5:1），
         暗着一块看不清；护眼主题同理。
         与其改 89 处调用，不如把这七个名字接到本文件既有的那套 token 上。
         它们引用的是 var()，而 --text/--bg/--border 在三套主题里都各自重定义过，
         所以别名自动跟着主题走，不必按主题重复写。 */
      --fg-1:     var(--text);
      --fg-2:     var(--text2);
      --fg-3:     var(--text3);
      --divider:  var(--border);
      --bg1:      var(--bg);
      --badge-bg: var(--info-bg);
      --badge-fg: var(--info-txt);
    }
    [data-theme="dark"] {
      --bg:      #1c1c1a;
      --bg2:     #252523;
      --bg3:     #2e2e2b;
      --text:    #f0efe9;
      --text2:   #a0a09c;
      --text3:   #959591;   /* 原 #6b6b67 对底色仅 2.87；上一轮改到 #949490，
                               但对 --bg3 落在 4.47，差 0.03 没够到 AA。
                               再提 0.2% 亮度即 5.68 / 5.11 / 4.53，三种底色全过。 */
      --border:  rgba(255,255,255,.10);
      --border2: rgba(255,255,255,.18);
      --info-bg:  #0c3360;
      --info-txt: #85b7eb;
      --ok-bg:    #1a3408;
      --ok-txt:   #97c459;
    }
    /* 主题按钮循环「浅色 → 深色 → 茶」，但 sepia 此前只定义在 style.css 里，
       而那个文件只有阅读器 book.php 加载——书架、书单、简介页点到「茶」那一档
       毫无变化。这里按阅读器那套茶色补齐，两边观感一致。 */
    [data-theme="sepia"] {
      color-scheme: light;
      --bg:      #f9efd8;   /* 卡片／浮层，对应阅读器的 --paper */
      --bg2:     #efe4c9;   /* 页面底色，对应阅读器的 --bg */
      --bg3:     #e7d9b8;   /* 次级块面，对应阅读器的 --sidebar-bg */
      --text:    #43361f;   /* 对三种底色 9.3 / 10.28 / 8.41 */
      --text2:   #6b5c3e;   /* 5.15 / 5.69 / 4.65，三处都过 AA */
      --text3:   #6c5e46;   /* 原 #8a7859 是 3.38 / 3.74 / 3.06，未达 AA；
                               现 4.99 / 5.52 / 4.51，三种底色全过。 */
      --border:  rgba(67,54,31,.14);
      --border2: rgba(67,54,31,.26);
      --info-bg:  #e0e6ec;
      --info-txt: #2f5578;
      --ok-bg:    #e3e7cf;
      --ok-txt:   #4a6316;
    }
    body {
      font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
      background: var(--bg2);
      color: var(--text);
      min-height: 100vh;
      line-height: 1.6;
    }

    /* 鈹€鈹€ Nav 鈹€鈹€ */
    .nav {
      background: var(--bg);
      border-bottom: 0.5px solid var(--border);
      position: sticky; top: 0; z-index: 100;
    }
    .nav-inner {
      max-width: 960px; margin: 0 auto;
      padding: 0 1.5rem;
      height: 56px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .brand {
      font-size: 16px; font-weight: 500;
      color: var(--text);
      text-decoration: none;
      display: flex; align-items: center; gap: 8px;
    }
    .brand svg { width: 20px; height: 20px; }
    .nav-right { display: flex; align-items: center; gap: 12px; }
    .user-pill {
      display: flex; align-items: center; gap: 8px;
      padding: 4px 10px 4px 6px;
      border: 0.5px solid var(--border);
      border-radius: 20px;
      font-size: 13px; color: var(--text2);
      background: var(--bg2);
    }
    .avatar {
      width: 24px; height: 24px; border-radius: 50%;
      background: var(--info-bg);
      color: var(--info-txt);
      font-size: 11px; font-weight: 500;
      display: flex; align-items: center; justify-content: center;
    }
    .theme-btn {
      width: 32px; height: 32px; border-radius: 50%;
      border: 0.5px solid var(--border);
      background: var(--bg2); color: var(--text2);
      cursor: pointer; font-size: 15px;
      display: flex; align-items: center; justify-content: center;
    }
    .theme-btn:hover { border-color: var(--border2); }

    /* 鈹€鈹€ Main layout 鈹€鈹€ */
    .main {
      max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem 4rem;
      display: flex; flex-direction: column;
    }
    /* 同一份 DOM，两套排序：登出态先看「有什么可读」，登录态先看「我读到哪了」 */
    body.is-guest .discover-zone { order: 1; }
    body.is-guest .shelf-zone    { order: 2; }
    body.is-guest .shelf-zone .main-shelf-head { margin-top: 2.75rem; }

    /* 登出态首屏：全站口径概览，替代四个空占位数字 */
    .site-intro { margin-bottom: 1.75rem; }
    .site-intro-lede {
      font-size: 15px; line-height: 1.7; color: var(--text2);
      margin-bottom: 14px; max-width: 46em;
    }
    .stats--site { margin-bottom: 0; gap: 28px; }
    .stats--site .stat-num { font-size: 24px; font-weight: 600; }
    .stats--site .stat-lbl { font-size: 12px; color: var(--text2); }

    /* 鈹€鈹€ Continue reading 鈹€鈹€ */
    /* 全站没有基础 a 规则，任何忘了设 color 的类都会掉回浏览器默认的链接蓝：
       深色模式下 rgb(0,0,238) 对底色只有 1.82 的对比度，基本看不清。
       类选择器的优先级高于裸标签，所以这条只兜底，不影响已上色的链接。 */
    a { color: inherit; }
    /* 只读给屏幕阅读器：页面需要一个 h1，但视觉上顶栏的站名已经承担了这个角色 */
    .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;
    }
    /* 下面几处标题从 div/span 改成了 h2/h3，好让读屏能按标题跳转。
       浏览器给标题的默认字重与外边距要抹掉，外观保持原样。 */
    .section-head, .collection-group-title, .my-shelf-title { margin-top: 0; }
    .section-head, .my-shelf-title { font-weight: 400; }
    .section-head { font-size: 12px; color: var(--text3); margin-bottom: 10px; letter-spacing: .04em; text-transform: uppercase; }
    .continue-row {
      display: flex; gap: 10px;
      overflow-x: auto; padding-bottom: 4px;
      margin-bottom: 2.5rem;
      scrollbar-width: none;
    }
    .continue-row::-webkit-scrollbar { display: none; }

    /* 鈹€鈹€ Collections / 缁忓吀涓涗功涓庝功鍗曪紙椤甸潰搴曢儴锛屽ぇ鍗＄墖锛?鈹€鈹€ */
    .collections { margin-top: 2.75rem; }
    .collection-groups { display: flex; flex-direction: column; gap: 28px; }
    .collection-split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }
    .collection-group-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 10px;
      padding-bottom: 7px;
      border-bottom: 0.5px solid var(--border);
    }
    .collection-row {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 18px;
    }
    .collection-row-single { grid-template-columns: 1fr; }
    .collection-more {
      margin-top: 12px;
      border: 0.5px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg);
      overflow: hidden;
    }
    /* 展开器做成按钮形态并带角标数字，提示可点击与内容量 */
    .collection-more-summary {
      list-style: none;
      cursor: pointer;
      display: flex; align-items: center; gap: 8px;
      padding: 12px 14px;
      font-size: 13px; font-weight: 600;
      color: var(--text);
      background: var(--bg2);
      border-bottom: 0.5px solid transparent;
      transition: background .14s;
    }
    .collection-more-summary::-webkit-details-marker { display: none; }
    .collection-more-summary:hover { background: var(--bg3); }
    .collection-more-summary:focus-visible { outline: 2px solid var(--info-txt); outline-offset: -2px; }
    .collection-more-label { min-width: 0; }
    .collection-more-count {
      flex: none; white-space: nowrap;
      padding: 1px 8px; border-radius: 999px;
      background: var(--info-bg); color: var(--info-txt);
      font-size: 11px; font-weight: 600;
    }
    .collection-more-chevron {
      flex: none;
      margin-left: auto; font-size: 11px; color: var(--text2);
      transition: transform .16s;
    }
    .collection-more[open] .collection-more-summary { border-bottom-color: var(--border); }
    .collection-more[open] .collection-more-chevron { transform: rotate(180deg); }
    .collection-more-grid {
      padding: 12px;
      gap: 12px;
    }
    .collection-more--links { margin-top: 14px; }
    /* 延伸资源：列表行而非卡片，与站内 collection-card 拉开视觉层级 */
    .collection-link-grid {
      display: block;
      padding: 4px 14px;
      background: var(--bg);
    }
    .collection-link-card {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 11px 0;
      border-bottom: 0.5px solid var(--border);
      text-decoration: none;
      color: inherit;
    }
    .collection-link-card:last-child { border-bottom: 0; }
    .collection-link-card:hover .collection-link-main { text-decoration: underline; }
    .collection-link-title {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 2px 8px;
    }
    .collection-link-main {
      font-size: 13px;
      font-weight: 600;
      line-height: 1.4;
      color: var(--text);
    }
    .collection-link-ext { margin-left: 3px; font-size: 10px; color: var(--text3); }
    .collection-link-sub {
      font-size: 12px;
      line-height: 1.4;
      color: var(--text2);
    }
    .collection-link-meta {
      font-size: 11px;
      color: var(--text3);
    }
    .collection-link-blurb {
      font-size: 12px;
      line-height: 1.55;
      color: var(--text2);
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .collection-card {
      display: flex;
      flex-direction: row;
      border: 0.5px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--bg);
      text-decoration: none;
      box-shadow: 0 1px 3px rgba(0,0,0,.10);
      transition: transform .14s, box-shadow .14s;
      min-height: 284px;
    }
    .collection-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.20); }
    /* cc-cover锛氫功绫嶅皝闈㈡瘮渚嬶紝鏈潵鍙户缁浛鎹㈡垚鐪熷疄灏侀潰鍥?*/
    .cc-cover {
      flex: 0 0 min(42%, 190px);
      min-height: 284px;
      aspect-ratio: 2 / 3;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; text-align: center;
      padding: 20px 14px; gap: 5px;
      position: relative;
      overflow: hidden;
    }
    .cc-cover.has-image::after { display: none; }
    /* 排版化封面：无封面图时以「底色 + 书名 + 装饰线 + 来源」成立，替代纯色块 */
    .cc-cover::before {
      content: '';
      position: absolute; inset: 10px;
      border: 1px solid currentColor; opacity: .28;
      pointer-events: none;
    }
    .cc-cover.has-image::before { display: none; }
    .cc-cover-title {
      font-size: 18px; font-weight: 600; line-height: 1.35;
      letter-spacing: .01em;
      display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .cc-cover-rule {
      width: 30px; height: 1px; margin: 4px 0;
      background: currentColor; opacity: .5;
    }
    .cc-cover-meta {
      font-size: 11px; line-height: 1.45; opacity: .72;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .cc-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    .cc-info { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 18px 20px 16px; }
    .cc-title { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; color: var(--text); }
    .cc-title-main,
    .cc-title-sub { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
    .cc-title-sub { color: var(--text2); font-weight: 500; }
    .cc-title-western .cc-title-main,
    .cc-title-western .cc-title-sub { font-size: 15px; }
    .cc-blurb { font-size: 13px; line-height: 1.65; color: var(--text2); flex: 1; }
    .cc-foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin-top: 12px; }
    .cc-meta { color: var(--text3); }
    .cc-go { color: var(--text); font-weight: 500; }
    .c-card {
      flex: 0 0 172px;
      border: 0.5px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--bg);
      cursor: pointer;
      text-decoration: none;
      display: block;
      transition: border-color .15s;
    }
    .c-card:hover { border-color: var(--border2); }
    .c-cover { height: 80px; display: flex; align-items: center; justify-content: center; }
    .c-cover span { font-size: 17px; font-weight: 500; }
    .c-meta { padding: 10px 12px 12px; }
    .c-title { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 2px; }
    .c-sub   { font-size: 11px; color: var(--text2); margin-bottom: 8px; }
    .pb { height: 3px; background: var(--border); border-radius: 2px; }
    .pf { height: 3px; border-radius: 2px; }
    .ppct { font-size: 10px; color: var(--text3); margin-top: 3px; }

    /* 鈹€鈹€ Toolbar 鈹€鈹€ */
    .toolbar {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 1.25rem; flex-wrap: wrap; gap: 10px;
    }
    .pills { display: flex; gap: 5px; flex-wrap: wrap; }
    /* 工具栏本身会换行，但右侧这一组原来不会：排序 99 + 搜索 173 + 视图 75
       加两道间距正好 367px，在 375px 的屏上把整页顶出 8px 横向滚动。 */
    .tool-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .tool-right .search-input { min-width: 0; flex: 1 1 9rem; }
    .search-input {
      padding: 6px 12px;
      border: 0.5px solid var(--border);
      border-radius: 20px;
      font-size: 13px;
      font-family: inherit;
      background: var(--bg);
      color: var(--text);
      width: 200px; max-width: 46vw;
      outline: none;
    }
    .search-input:focus { border-color: var(--text2); }
    .pill {
      padding: 5px 14px;
      border: 0.5px solid var(--border);
      border-radius: 20px;
      font-size: 13px; cursor: pointer;
      background: var(--bg);
      color: var(--text2);
      font-family: inherit;
      transition: background .12s, color .12s;
    }
    .pill.on { background: var(--text); color: var(--bg); border-color: var(--text); }
    .view-tog { display: flex; gap: 3px; }
    .vbtn {
      padding: 5px 9px;
      border: 0.5px solid var(--border);
      border-radius: var(--radius-s);
      background: transparent; color: var(--text2);
      cursor: pointer; font-size: 16px;
      font-family: inherit;
      transition: background .12s;
    }
    .vbtn.on { background: var(--bg3); color: var(--text); }

    /* 鈹€鈹€ Grid view 鈹€鈹€ */
    #books.grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
      gap: 12px;
      touch-action: pan-y;
    }
    #books {
      transform-origin: center center;
      will-change: transform, opacity;
    }
    #books.page-exit-next { animation: shelfPageExitNext .16s cubic-bezier(.32,.72,.2,1) both; }
    #books.page-exit-prev { animation: shelfPageExitPrev .16s cubic-bezier(.32,.72,.2,1) both; }
    #books.page-enter-next { animation: shelfPageEnterNext .24s cubic-bezier(.22,1,.36,1) both; }
    #books.page-enter-prev { animation: shelfPageEnterPrev .24s cubic-bezier(.22,1,.36,1) both; }
    @keyframes shelfPageExitNext {
      from { transform: translateX(0); opacity: 1; }
      to { transform: translateX(-24px); opacity: .2; }
    }
    @keyframes shelfPageExitPrev {
      from { transform: translateX(0); opacity: 1; }
      to { transform: translateX(24px); opacity: .2; }
    }
    @keyframes shelfPageEnterNext {
      from { transform: translateX(34px); opacity: .05; }
      to { transform: translateX(0); opacity: 1; }
    }
    @keyframes shelfPageEnterPrev {
      from { transform: translateX(-34px); opacity: .05; }
      to { transform: translateX(0); opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
      #books { will-change: auto; }
      #books.page-exit-next,
      #books.page-exit-prev,
      #books.page-enter-next,
      #books.page-enter-prev { animation: none; }
    }
    .g-card {
      border: 0.5px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--bg);
      cursor: pointer;
      text-decoration: none;
      display: block;
      transition: border-color .15s, transform .35s cubic-bezier(.34,1.32,.5,1), box-shadow .35s ease;
    }
    .g-card:hover { border-color: var(--border2); }
    /* 点下去的那一下：像从架上抽书时手指按住书背，卡片轻轻一沉、投影收紧；松手回弹。
       书页在新标签页打开，这只是即时反馈，不拦导航（2026-10-05） */
    @media (prefers-reduced-motion: no-preference) {
      /* 上浮只给能悬停的设备：触屏点一下会一直停在 :hover，卡片就一直抬着不落 */
      @media (hover: hover) { .g-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.10); } }
      .g-card:active { transform: translateY(1px) scale(.975); box-shadow: 0 2px 6px rgba(0,0,0,.10); transition-duration: .08s; }
    }
    #books.grid .g-card-wrap { min-width: 0; }
    #books.grid .g-card { height: 100%; }
    /* 涓讳功鏋跺皝闈細3/4 姣斾緥锛堝绾?118px min 鈫?绾?157px 楂橈紝绱у噾鏄剧ず鏇村涔︼級 */
    /* 排版化封面：书名大字 + 装饰线 + 作者小字 + 内框，使无封面图的书目也可识别 */
    .g-cover {
      aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center;
      padding: 12px; position: relative; overflow: hidden;
    }
    .g-cover-frame {
      position: absolute; inset: 6px;
      border: 1px solid currentColor; opacity: .3;
      pointer-events: none;
    }
    /* 封面图加载失败后的降级态：沿用排版化封面，颜色取卡片自带的 --cat-* */
    .g-cover--fallback {
      padding: 12px;
      display: flex; align-items: center; justify-content: center;
      color: var(--cat-text, #fff);
    }
    .g-cover--fallback .t-rule { background: currentColor; }
    .g-cover-text {
      text-align: center; width: 100%; min-width: 0;
      display: flex; flex-direction: column; align-items: center;
      position: relative;
    }
    .g-cover-text .t1 {
      font-size: 15px; font-weight: 600;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.3;
      letter-spacing: .01em;
    }
    .g-cover-text .t-rule {
      width: 22px; height: 1px; margin: 7px 0; opacity: .55; flex: none;
    }
    .g-cover-text .t2 {
      font-size: 10px; opacity: .75;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.25;
    }
    .g-meta {
      box-sizing: border-box;
      min-height: 114px;
      overflow: hidden;
      padding: 10px 11px 11px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 8px;
    }
    .g-meta-top {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-height: 0;
    }
    .g-title  {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.35;
    }
    .g-subtitle {
      font-size: 11px;
      color: var(--text2);
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .g-author {
      font-size: 11px;
      color: var(--text2);
      line-height: 1.35;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* 鈹€鈹€ List view 鈹€鈹€ */
    #books.list { display: flex; flex-direction: column; gap: 7px; touch-action: pan-y; }
    .l-item {
      display: flex; align-items: center; gap: 14px;
      padding: 12px 14px;
      border: 0.5px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg);
      cursor: pointer;
      text-decoration: none;
      transition: border-color .15s;
    }
    .l-item:hover { border-color: var(--border2); }
    .l-thumb {
      width: 34px; height: 50px; border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; font-size: 12px; font-weight: 500;
      text-align: center; line-height: 1.2;
    }
    .l-info { flex: 1; min-width: 0; }
    .l-title  { font-size: 14px; font-weight: 500; color: var(--text); }
    .l-author { font-size: 12px; color: var(--text2); margin-top: 1px; }
    .l-prog   { width: 80px; flex-shrink: 0; }
    .badge {
      font-size: 11px; padding: 2px 9px;
      border-radius: 10px; flex-shrink: 0;
    }
    .badge-new     { background: var(--bg3); color: var(--text3); }
    /* 阅读能力标签：说的是「这本书在哪儿读」，与个人进度（.pb / .badge-reading）分开。
       用描边而不是底色，免得和进度徽章看成一类。 */
    .cap {
      display: inline-block; align-self: flex-start;
      font-size: 11px; line-height: 1.5; padding: 0 8px; margin-top: 6px;
      border-radius: 10px; border: 0.5px solid currentColor; white-space: nowrap;
    }
    .cap-local    { color: var(--ok-txt); }
    .cap-external { color: var(--info-txt); }
    .cap-guide    { color: var(--text3); border-color: var(--border); }
    .l-item .cap  { margin-top: 0; flex-shrink: 0; }
    /* 阅读数据说明与导出导入。.data-note 本身不写 display，[hidden] 才藏得住（§5.4a） */
    .data-note { margin: 28px 0 8px; padding: 14px 16px; border: 0.5px solid var(--border);
      border-radius: var(--radius-s, 8px); background: var(--bg2); font-size: 12.5px; color: var(--text2); line-height: 1.75; }
    .data-note p { margin: 0 0 10px; }
    .data-note strong { color: var(--text); font-weight: 600; }
    .data-note-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .data-note-actions button { padding: 6px 14px; min-height: 36px; border: 0.5px solid var(--border); border-radius: 20px;
      background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
    .data-note-actions button:hover { border-color: var(--text2); }
    .data-note-actions button:focus-visible { outline: 2px solid var(--info-txt); outline-offset: 2px; }
    #data-status { color: var(--text3); }
    .badge-reading { background: var(--info-bg); color: var(--info-txt); }
    .badge-done    { background: var(--ok-bg);   color: var(--ok-txt); }
    .cat-badge {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.3;
      vertical-align: middle;
    }
    .cat-literature { background: #e5f3e8; color: #28633c; }
    .cat-history { background: #e5effa; color: #185fa5; }
    .cat-science { background: #eceff2; color: #4f5b66; }
    .cat-philosophy { background: #f9e6e2; color: #8d3024; }
    [data-theme="dark"] .cat-literature { background: #173622; color: #95c99e; }
    [data-theme="dark"] .cat-history { background: #102f52; color: #8abcf0; }
    [data-theme="dark"] .cat-science { background: #2c3035; color: #c1c8cf; }
    [data-theme="dark"] .cat-philosophy { background: #421c17; color: #eeaaa0; }

    /* 鈹€鈹€ Empty state 鈹€鈹€ */
    .empty { text-align: center; padding: 3rem 1rem; color: var(--text3); font-size: 14px; }

    /* 鈹€鈹€ Stats bar 鈹€鈹€ */
    .stats {
      display: flex; gap: 16px; flex-wrap: wrap;
      margin-bottom: 1.75rem;
      padding: 14px 16px;
      border: 0.5px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg);
    }
    .stat-item { display: flex; flex-direction: column; gap: 2px; }
    .stat-num  { font-size: 20px; font-weight: 500; color: var(--text); }
    .stat-lbl  { font-size: 11px; color: var(--text3); }

    @media (max-width: 480px) {
      .nav-inner { padding: 0 1rem; }
      .main { padding: 1.25rem 1rem 3rem; }
      #books.grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
      .g-cover { padding: 8px; }
      .g-cover-frame { inset: 4px; }
      .g-cover-text .t1 { font-size: 12px; -webkit-line-clamp: 3; }
      .g-cover-text .t-rule { margin: 5px 0; width: 18px; }
      .g-cover-text .t2 { font-size: 9px; -webkit-line-clamp: 1; }
      .site-intro-lede { font-size: 14px; }
      .stats--site { gap: 18px; }
      .stats--site .stat-num { font-size: 20px; }
      .main { padding: 1.1rem 1rem 2rem; }
      .site-intro { margin-bottom: 1.15rem; }
      .stats { margin-bottom: 1.15rem; }
    }
    @media (max-width: 760px) {
      .collection-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 12px;
      }
      .collection-group-title {
        font-size: 12px;
        margin-bottom: 8px;
        padding-bottom: 6px;
      }
      /* 竖排时封面占满宽度，3/4 的比例在 375px 屏上就是 457px 高——一张封面
         吃掉大半屏，八个书单能把书架推到五屏之外。改回横排：封面收成窄条、
         文字在右，既紧凑，也保住了封面本身的竖向比例（多数是竖版书影）。 */
      .collection-card {
        flex-direction: row;
        min-height: 0;
      }
      .cc-cover {
        flex: 0 0 34%;
        width: auto;
        max-width: 132px;
        min-height: 0;
        aspect-ratio: 2 / 3;
      }
      .cc-info { padding: 11px 12px; min-width: 0; }
      .cc-title-main,
      .cc-title-sub { font-size: 13px; }
      .cc-title-western .cc-title-main,
      .cc-title-western .cc-title-sub { font-size: 13px; }
      .cc-blurb {
        font-size: 12px;
        line-height: 1.55;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .cc-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }
      .collection-more-summary {
        padding: 10px 11px;
        font-size: 12px;
        flex-wrap: wrap;
        row-gap: 5px;
      }
      .collection-more-grid { padding: 10px; }
      .collection-link-grid { padding: 2px 11px; }
      .cc-cover-title { font-size: 14px; -webkit-line-clamp: 3; }
      .cc-cover-meta { display: none; }
      .cc-cover::before { inset: 7px; }
    }

    /* 必须排在 760px 之后：那一段把 .collection-split 设回双列，
       同宽度下后出现的规则胜出。小屏单列，双列留给 480–760px。 */
    @media (max-width: 480px) {
      .collection-split { grid-template-columns: 1fr; gap: 10px; }
    }
    @media (max-width: 420px) {
      .collection-split { gap: 10px; }
      .cc-cover { min-height: 136px; }
      .cc-info { padding: 10px 10px 10px; }
      .cc-title-main,
      .cc-title-sub,
      .cc-title-western .cc-title-main,
      .cc-title-western .cc-title-sub { font-size: 12px; }
      .cc-blurb { -webkit-line-clamp: 3; }
      .cc-cover-title { font-size: 13px; }
    }

    /* 鈹€鈹€ My Shelf section 鈹€鈹€ */
    #my-shelf-section { margin-bottom: 2rem; }
    .my-shelf-head {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .my-shelf-title {
      font-size: 12px; color: var(--text3);
      letter-spacing: .04em; text-transform: uppercase;
      flex-shrink: 0;
    }
    .my-shelf-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
    .mst {
      padding: 3px 11px;
      border: 0.5px solid var(--border);
      border-radius: 14px;
      font-size: 12px; cursor: pointer;
      background: var(--bg);
      color: var(--text2);
      font-family: inherit;
      transition: background .12s, color .12s;
    }
    .mst.on { background: var(--text); color: var(--bg); border-color: var(--text); }
    .my-manage-btn {
      margin-left: auto;
      padding: 3px 11px;
      border: 0.5px solid var(--border);
      border-radius: 14px;
      font-size: 12px; cursor: pointer;
      background: var(--bg2); color: var(--text2);
      font-family: inherit;
    }
    .my-manage-btn:hover { border-color: var(--border2); color: var(--text); }

    .my-shelf-row {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 10px;
      overflow-x: visible;
      padding-bottom: 6px;
    }
    .my-shelf-row::-webkit-scrollbar { height: 4px; }
    .my-shelf-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .my-shelf-empty {
      font-size: 13px; color: var(--text3);
      padding: 8px 0;
    }

    /* My shelf card 鈥?155px 瀹?+ 2/3 姣斾緥灏侀潰锛堢害 232px锛? 鐪熷疄涔︽湰姣斾緥锛屾槑鏄惧ぇ浜庝富涔︽灦 */
    .my-card {
      flex: 0 0 155px;
      border: 0.5px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--bg);
      position: relative;
      transition: border-color .15s;
      user-select: none;
    }
    .my-card:hover { border-color: var(--border2); }
    .my-card.dragging { opacity: .4; }
    .my-card.drag-over { border-color: var(--text); border-style: dashed; }
    .my-card.manage { cursor: grab; }
    .my-card.manage:active { cursor: grabbing; }

    .my-drag-handle {
      position: absolute; top: 6px; left: 6px;
      font-size: 14px; color: rgba(255,255,255,.65);
      line-height: 1; z-index: 2; pointer-events: none;
    }
    .my-remove-btn {
      position: absolute; top: 4px; right: 4px;
      width: 20px; height: 20px; border-radius: 50%;
      background: rgba(0,0,0,.55); color: #fff;
      border: none; cursor: pointer; font-size: 11px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      z-index: 3; line-height: 1;
    }
    .my-remove-btn:hover { background: rgba(180,30,30,.85); }

    .my-card-link {
      display: block; text-decoration: none;
    }
    .my-cover {
      aspect-ratio: 2/3;   /* 鎴戠殑涔︽灦灏侀潰锛氭爣鍑嗕功鏈瘮渚嬶紙绾?125px鈫?87px锛?*/
      display: flex; align-items: center; justify-content: center;
      padding: 10px;
    }
    .my-cover span {
      font-size: 13px; font-weight: 500; text-align: center;
      line-height: 1.3;
      display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
    }
    .my-meta { padding: 8px 10px 10px; }
    .my-title {
      font-size: 12px; font-weight: 500; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      margin-bottom: 2px;
    }
    .my-sub { font-size: 11px; color: var(--text2); margin-bottom: 4px; }
    .badge-want { background: #f5edff; color: #6b35a0; }
    [data-theme="dark"] .badge-want { background: #2d1a44; color: #c09ae0; }

    /* 鈹€鈹€ Main shelf section head 鈹€鈹€ */
    .main-shelf-head {
      display: flex; align-items: center; gap: 10px;
      margin-bottom: 10px;
    }
    .main-shelf-head .section-head { margin: 0; }
    .my-manage-btn.on { background: var(--text); color: var(--bg); border-color: var(--text); }

    /* 鈹€鈹€ Toolbar filter stack 鈹€鈹€ */
    .filter-stack { display: flex; flex-direction: column; gap: 6px; }
    .toolbar { align-items: flex-start; }

    /* 鈹€鈹€ Sort select 鈹€鈹€ */
    .sort-select {
      padding: 5px 10px;
      border: 0.5px solid var(--border);
      border-radius: 20px;
      font-size: 13px;
      font-family: inherit;
      background: var(--bg);
      color: var(--text2);
      cursor: pointer;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      padding-right: 22px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
    }
    .sort-select:focus { border-color: var(--text2); }
    [data-theme="dark"] .sort-select {
      background-color: var(--bg);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
    }

    /* 鈹€鈹€ Book card wrapper + 鈰?menu 鈹€鈹€ */
    .g-card-wrap { position: relative; }
    #books.grid .g-card-wrap { display: block; }
    #books.list .g-card-wrap { display: block; margin-bottom: 0; }
    #books.list .g-card-wrap + .g-card-wrap { margin-top: 7px; }

    .g-card-wrap.is-hidden .g-card,
    .g-card-wrap.is-hidden .l-item {
      opacity: .38;
    }

    .card-menu-btn {
      position: absolute; top: 6px; right: 6px;
      width: 26px; height: 26px; border-radius: 50%;
      background: rgba(0,0,0,.48); color: #fff;
      border: none; cursor: pointer;
      font-size: 15px; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity .14s;
      z-index: 10;
    }
    /* 看着是 26px 的小圆点，手指要的是 44px：用一圈透明的伪元素把可点范围撑大，外观不变 */
    .card-menu-btn::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
    .g-card-wrap:hover .card-menu-btn { opacity: 1; }
    /* 平时全透明，只有鼠标划过才出现——用 Tab 走到这里时得看得见它 */
    .g-card-wrap:focus-within .card-menu-btn,
    .card-menu-btn:focus-visible { opacity: 1; }
    .card-menu-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 4px rgba(0,0,0,.55); }
    @media (hover: none) { .card-menu-btn { opacity: .6; } }

    .card-menu {
      position: absolute; top: 32px; right: 4px;
      background: var(--bg);
      border: 0.5px solid var(--border2);
      border-radius: var(--radius-s);
      box-shadow: 0 6px 24px rgba(0,0,0,.22);
      z-index: 200; min-width: 130px; overflow: hidden;
    }
    .card-menu button {
      display: block; width: 100%;
      padding: 9px 14px;
      text-align: left;
      font-size: 13px; font-family: inherit;
      background: none; border: none; cursor: pointer;
      color: var(--text);
    }
    .card-menu button:hover { background: var(--bg2); }

    /* 鈹€鈹€ Main shelf manage mode / drag 鈹€鈹€ */
    #books.manage-mode .g-card-wrap {
      cursor: grab;
    }
    #books.manage-mode .g-card-wrap:active { cursor: grabbing; }
    #books.manage-mode .g-card-wrap.dragging { opacity: .4; }
    #books.manage-mode .g-card-wrap.dragging * { pointer-events: none; }

    .main-drag-handle {
      position: absolute; top: 32px; left: 8px;
      font-size: 14px; color: rgba(255,255,255,.7);
      z-index: 2; pointer-events: none; line-height: 1;
    }
    .main-order-tools {
      position: absolute;
      top: 6px;
      left: 6px;
      display: flex;
      gap: 3px;
      z-index: 8;
    }
    .main-order-btn {
      width: 20px;
      height: 20px;
      border: none;
      border-radius: 50%;
      background: rgba(0,0,0,.58);
      color: #fff;
      cursor: pointer;
      font-size: 12px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: inherit;
    }
    .main-order-btn:hover { background: rgba(0,0,0,.78); }
    .main-order-tools-list {
      position: static;
      flex-shrink: 0;
      padding-right: 4px;
    }
    .main-order-tools-list .main-order-btn {
      background: var(--bg3);
      color: var(--text2);
      border: 0.5px solid var(--border);
    }
    .main-order-tools-list .main-order-btn:hover {
      color: var(--text);
      border-color: var(--border2);
    }
    .main-drag-handle-list {
      font-size: 18px; color: var(--text3);
      flex-shrink: 0; pointer-events: none;
      padding-right: 4px;
    }
    /* In list mode, wrap is flex to show drag handle inline */
    #books.list.manage-mode .g-card-wrap {
      display: flex; align-items: center; gap: 4px;
    }
    #books.list.manage-mode .l-item { flex: 1; }

    /* 鈹€鈹€ Pagination 鈹€鈹€ */
    #pagination {
      display: flex; align-items: center; justify-content: center;
      flex-wrap: wrap;
      gap: 10px 14px; padding: 20px 0 4px;
    }
    .pag-btn {
      padding: 6px 16px;
      border: 0.5px solid var(--border);
      border-radius: 20px;
      font-size: 13px; font-family: inherit;
      background: var(--bg); color: var(--text2);
      cursor: pointer;
      transition: border-color .12s, color .12s;
    }
    .pag-btn:hover:not(:disabled) { border-color: var(--border2); color: var(--text); }
    .pag-btn:disabled { opacity: .35; cursor: default; }
    .pag-info { font-size: 13px; color: var(--text3); }
    .pag-pages {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .pag-dot {
      width: 28px;
      height: 28px;
      border: 0.5px solid var(--border);
      border-radius: 50%;
      background: var(--bg);
      color: var(--text2);
      cursor: pointer;
      font-size: 12px;
      font-family: inherit;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background .12s, border-color .12s, color .12s;
    }
    .pag-dot:hover { border-color: var(--border2); color: var(--text); }
    .pag-dot.on {
      background: var(--text);
      border-color: var(--text);
      color: var(--bg);
    }
    .pag-jump {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--text3);
    }
    .pag-size {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--text3);
    }
    .pag-size-select {
      padding: 5px 9px;
      border: 0.5px solid var(--border);
      border-radius: 16px;
      background: var(--bg);
      color: var(--text2);
      font: inherit;
      cursor: pointer;
    }
    .pag-size-select:focus {
      outline: none;
      border-color: var(--border2);
    }
    .pag-input {
      box-sizing: border-box;
      width: 58px;
      padding: 5px 8px;
      border: 0.5px solid var(--border);
      border-radius: 16px;
      background: var(--bg);
      color: var(--text);
      font: inherit;
      text-align: center;
    }
    .pag-input:focus {
      outline: none;
      border-color: var(--border2);
    }
    /* 上面两条只把边框从 10% 灰换成 18% 灰，用键盘走过来几乎看不出焦点在哪 */
    .pag-size-select:focus-visible,
    .pag-input:focus-visible,
    .sort-select:focus-visible { outline: 2px solid var(--info-txt); outline-offset: 2px; }
    .pag-range {
      width: min(240px, 42vw);
      accent-color: var(--text);
    }
    @media (max-width: 520px) {
      #pagination { gap: 8px 10px; }
      .pag-pages {
        order: 3;
        width: 100%;
      }
      .pag-range {
        order: 3;
        width: min(280px, 100%);
      }
      .pag-info {
        order: 4;
        text-align: center;
      }
      .pag-size { order: 5; }
    }

    /* 鈹€鈹€ 灏侀潰鍥剧墖妯″紡锛堜富涔︽灦锛?鈹€鈹€ */
    /* 鏈夊浘鏃讹細鐓х墖濉弧灏侀潰鍖哄煙锛屾枃瀛楀畬鏁存爣棰樻樉绀哄湪涓嬫柟淇℃伅鏍忥紝宸﹁竟妗嗚壊鏉′繚鐣欏垎绫昏壊 */
    .g-cover--img {
      padding: 4px;
      overflow: hidden;
      position: relative;
      background: var(--cat-color, var(--bg3));
    }
    .g-cover-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 5px;
      box-shadow: 0 1px 2px rgba(0,0,0,.18);
    }
    .g-card--img {
      border-color: color-mix(in srgb, var(--cat-color, var(--border2)) 72%, var(--border));
    }
    /* 鍥剧墖妯″紡涓嬫爣棰樺厑璁告姌琛岋紙鏈€澶?2 琛岋級锛岀‘淇濆畬鏁存樉绀?*/
    .g-title--wrap {
      white-space: normal;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-height: 1.35;
      min-height: 35px;
      overflow-wrap: anywhere;
      word-break: break-word;
      hyphens: auto;
    }

    /* 鈹€鈹€ 灏侀潰鍥剧墖妯″紡锛堟垜鐨勪功鏋讹級 鈹€鈹€ */
    .my-cover--img {
      padding: 5px;
      overflow: hidden;
      background: var(--cat-color, var(--bg3));
    }
    .my-cover-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 5px;
      box-shadow: 0 1px 2px rgba(0,0,0,.18);
    }
    .l-thumb--img {
      padding: 2px;
      background: var(--cat-color, var(--bg3));
      color: inherit;
      overflow: hidden;
    }
    .l-thumb--img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 4px;
    }

    /* 鈹€鈹€ 绠＄悊妯″紡涓嬮殣钘忎功锛氬叏浜害鏄剧ず锛屽彔鍔犲彇娑堥殣钘忚鐩栧眰 鈹€鈹€ */
    #books.manage-mode .g-card-wrap.is-hidden .g-card,
    #books.manage-mode .g-card-wrap.is-hidden .l-item { opacity: 1; }

    .hidden-overlay {
      position: absolute; inset: 0;
      border-radius: var(--radius);
      background: rgba(0,0,0,.46);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 8px;
      z-index: 4;
    }
    .hidden-overlay-label {
      background: rgba(0,0,0,.70);
      color: #fff;
      font-size: 12px;
      padding: 3px 10px;
      border-radius: 10px;
    }
    .unhide-btn {
      background: var(--bg);
      color: var(--text);
      border: 0.5px solid var(--border2);
      border-radius: 12px;
      font-size: 11px; padding: 4px 12px;
      cursor: pointer; font-family: inherit;
      white-space: nowrap;
    }
    .unhide-btn:hover { background: var(--bg2); }

    /* 鍒楄〃瑙嗗浘鍙栨秷闅愯棌鎸夐挳锛堣灏撅紝涓嶉渶瑕?absolute 瀹氫綅锛?*/
    .unhide-btn-list { flex-shrink: 0; }

    /* 鈹€鈹€ Hidden books toggle锛堝祵鍏?main-shelf-head 澶撮儴琛岋級 鈹€鈹€ */
    .hidden-toggle-btn {
      padding: 3px 11px;
      border: 0.5px dashed var(--border2);
      border-radius: 14px;
      font-size: 12px; color: var(--text3);
      background: none; cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
      transition: background .12s, color .12s;
    }
    .hidden-toggle-btn:hover { color: var(--text2); }
    .hidden-toggle-btn:disabled {
      cursor: default;
      opacity: .6;
    }
    .hidden-toggle-btn.active {
      background: var(--bg3); color: var(--text2);
      border-style: solid; border-color: var(--border2);
    }

/* 未达上架门槛的书。只有管理员的书架上会出现这类卡片——读者拿到的
   列表里根本没有它们，所以这条规则对读者是死规则。 */
.my-card.is-draft,
.g-card.is-draft,
.l-item.is-draft { position: relative; opacity: .62; }
.my-card.is-draft::after,
.g-card.is-draft::after,
.l-item.is-draft::after {
  content: '待整理';
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(176, 123, 40, .92);
  color: #fff;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .02em;
  pointer-events: none;
}
.my-card.is-draft:hover,
.g-card.is-draft:hover,
.l-item.is-draft:hover { opacity: 1; }

/* 搜索反馈与恢复入口：同一行呈现结果数，窄屏允许自然换行。 */
.results-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 16px;
  min-height: 44px;
  color: var(--text2);
  font-size: 13px;
}
.results-summary[hidden], .shelf-reset[hidden] { display: none; }
.shelf-reset {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-s);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.shelf-reset:hover { background: var(--bg3); }
.shelf-reset:focus-visible, .toolbar button:focus-visible {
  outline: 2px solid var(--info-txt);
  outline-offset: 3px;
}
#books .empty { grid-column: 1 / -1; overflow-wrap: anywhere; }
.empty-hint { margin: 8px 0 16px; color: var(--text2); }
.l-info > .cap { margin-top: 5px; }

/* 本机已有阅读记录时，在导航区前给出直接续读入口。 */
.resume-reading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  margin-bottom: 28px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  background: var(--bg);
}
.resume-reading[hidden] { display: none; }
.resume-reading-info { min-width: 0; overflow-wrap: anywhere; }
.resume-reading h2 { margin: 0 0 6px; color: var(--text2); font-size: 13px; font-weight: 500; }
.resume-reading-title { font-size: 20px; font-weight: 600; line-height: 1.45; }
.resume-reading-detail { margin-top: 6px; font-size: 13px; color: var(--text2); }
.resume-reading-actions { display: flex; flex-shrink: 0; align-items: center; gap: 14px; font-size: 14px; }
.resume-reading-actions a { display: inline-flex; align-items: center; min-height: 44px; }
.resume-reading-link { padding: 9px 16px; background: var(--text); color: var(--bg); border-radius: var(--radius-s); text-decoration: none; }
.resume-reading-actions a:focus-visible { outline: 2px solid var(--info-txt); outline-offset: 3px; }
@media (max-width: 600px) {
  .resume-reading { align-items: stretch; flex-direction: column; padding: 18px; gap: 14px; }
  .resume-reading-title { font-size: 18px; }
  .resume-reading-actions { flex-wrap: wrap; }
}

/* 打印：顶上的导航条（返回、切主题）印出来没用。
   深色主题打印时印成白纸浅灰字的问题不在这里管，见 app_theme_boot_script() 的 beforeprint。 */
@media print {
  .nav { display: none !important; }
}