/* ============================================================
       THE SILICON LIBRARY — Editorial Archive redesign (library)
       主题 token（paper/ink/accent/字体族）已统一上提到 design-system.css
       的 [data-theme] 块，本页只保留书架专属布局微调与组件样式。
       ============================================================ */
    :root{
      /* 书架专属布局微调（不随主题变的尺寸）。
         2026-08-14 审查：不再重定义 --spacing-3(14px) 与 --radius-sm(9px)——
         在 :root 篡改全局 token 会让本页与首页的间距/圆角悄悄失同步
         （同一条工具栏里下拉 9px vs 搜索框 10px 即由此而来），全部回归
         design-system 原值；页面专属圆角用下面的 --radius-control 表达。 */
      --maxw:1320px;
      --radius-lg:22px;
      /* 2026-08-14 工具栏圆角统一: 搜索/全文/最新/视图/收藏 segmented 全部统一为 10px,
         与 .lang-opt / .theme-seg-btn 控件语言一致 */
      --radius-control:10px;
    }

    *{box-sizing:border-box}
    html{-webkit-text-size-adjust:100%}
    body.app-shell-library{
      margin:0; padding:0; min-height:100vh;
      font-family:var(--sans); color:var(--ink);
      background:var(--paper);
      background-image:
        radial-gradient(1200px 520px at 88% -8%, var(--accent-soft), transparent 60%),
        radial-gradient(900px 480px at -6% 4%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 55%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    }
    .container.container-wide{max-width:var(--maxw);margin:0 auto;padding:0 24px}
    ::selection{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--ink)}

    /* ---------- Masthead（杂志报头）---------- */
    .hero{
      position:sticky;top:0;z-index:120;
      margin:0 -24px 24px;padding:0 24px;
      /* 与首页 hero-section 同款磨砂玻璃：滚动时透出模糊内容而非硬切平板；
        86% paper + blur(14px) saturate(1.1) */
      background:color-mix(in srgb,var(--paper) 86%,transparent);
      backdrop-filter:blur(14px) saturate(1.1);
      -webkit-backdrop-filter:blur(14px) saturate(1.1);
      border-bottom:1px solid var(--line);
    }
    .hero-header{
      display:flex;align-items:center;justify-content:space-between;gap:20px;
      padding:22px 0 16px;flex-wrap:wrap;
    }
    .hero-title-group{display:flex;flex-direction:column;gap:4px;min-width:0}
    .hero-title-row{display:flex;align-items:baseline;gap:12px}
    .hero-back-home{font-family:var(--ui-sans);font-size:var(--text-xs,.75rem);font-weight:500;color:var(--accent);text-decoration:none;white-space:nowrap;transition:opacity var(--transition-fast)}
    .hero-back-home:hover{opacity:.7}
    .hero-title{font-family:var(--serif-display);font-weight:700;
      font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.02em;
      line-height:1.1;margin:0;color:var(--ink);
    }
    /* 2026-08-14: 删除 .hero-title::first-letter{accent} —— 拉丁字母 drop-cap 设计
       错配中文 "硅" 字(单字已是 accent 时, 与注册按钮三方抢焦点, 稀释 hero masthead 编辑感) */
    .hero-subtitle{
      font-family:var(--ui-sans);font-size:var(--text-2xs);letter-spacing:.04em;
      color:var(--ink-mute);font-weight:500;
      display:flex;align-items:baseline;gap:0;flex-wrap:wrap;
    }
    .hero-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

    /* 账户栏：融入报头，无独立方块 */
    .user-info-bar{display:flex;align-items:center;gap:8px;background:transparent;border:none;padding:0}
    .user-info{display:flex;align-items:center;gap:7px;font-family:var(--ui-sans);font-weight:500;font-size:var(--text-sm);color:var(--ink-soft)}
    .user-avatar{
      width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
      background:var(--accent);color:var(--paper-2);font-weight:700;font-size:var(--text-xs);
      font-family:var(--ui-sans);flex:none;
    }
    .user-name{font-weight:600;font-size:var(--text-sm);color:var(--ink);font-family:var(--ui-sans)}
    .user-role{font-family:var(--ui-sans);font-size:var(--text-2xs);color:var(--ink-mute);font-weight:500}
    .auth-buttons{display:flex;gap:6px}
    .auth-btn{
      font-family:var(--ui-sans);font-weight:500;font-size:var(--text-sm);
      text-decoration:none;cursor:pointer;
      color:var(--ink-soft);background:transparent;
      border:none;padding:6px 10px;line-height:1;display:inline-flex;align-items:center;gap:5px;
      border-radius:var(--radius-sm);transition:color var(--transition-fast),background var(--transition-fast);
    }
    .auth-btn:hover{color:var(--accent);background:var(--bg-tertiary)}
    .auth-btn.logout:hover{color:var(--accent)}

    /* settings: language + theme */
    .settings-panel-inline .settings-panel{display:flex;align-items:center;gap:10px}
    .settings-divider{width:1px;height:20px;background:var(--line)}
    /* 语言胶囊样式已上提到 design-system.css（与主题分段统一为下划线 tab） */

    /* ---------- 次级工具栏（搜索+筛选+导航）：一行安静控件 ---------- */
    .hero-toolbar{
      display:flex;align-items:center;gap:14px;flex-wrap:wrap;
      padding:9px 0 12px;border-top:1px solid var(--line);
    }
    /* 搜索框：input 单层结构，图标/清除按钮 absolute 悬浮，光标位置 100% 由 input 控制 */
    .search-inline{
      position:relative;flex:1 1 240px;min-width:180px;
    }
    .search-inline .search-icon{
      position:absolute;left:12px;top:50%;transform:translateY(-50%);
      width:18px;height:18px;color:var(--ink-mute);pointer-events:none;
    }
    .search-input{
      display:block;width:100%;box-sizing:border-box;
      height:42px;padding:0 44px 0 44px;
      border:1px solid var(--line-strong);border-radius:var(--radius-control);
      background:var(--paper-2);color:var(--ink);
      font-family:var(--ui-sans);font-size:var(--text-sm);font-weight:400;
      line-height:normal;outline:none;-webkit-appearance:none;
      transition:border-color var(--transition-base),box-shadow var(--transition-base),background var(--transition-base);
    }
    .search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--paper)}
    .search-input::placeholder{color:var(--ink-soft);font-weight:400;opacity:.7}
    .search-clear{
      position:absolute;right:10px;top:50%;transform:translateY(-50%);
      width:20px;height:20px;border:0;background:transparent;cursor:pointer;
      display:flex;align-items:center;justify-content:center;padding:0;
      border-radius:50%;color:var(--ink-mute);opacity:0;pointer-events:none;
      transition:opacity var(--transition-fast),color var(--transition-fast);
    }
    .search-inline.has-value .search-clear{opacity:1;pointer-events:auto}
    .search-clear:hover{color:var(--ink)}
    .search-clear svg{width:16px;height:16px;display:block}
    /* 分段筛选：全部 | 收藏 */
    .seg-filter{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--radius-control);overflow:hidden;height:42px;flex:none}
    .seg-btn{
      padding:0 14px;background:transparent;border:none;color:var(--ink-mute);
      font-family:var(--ui-sans);font-size:var(--text-xs);font-weight:500;cursor:pointer;
      display:inline-flex;align-items:center;gap:5px;transition:color var(--transition-fast),background var(--transition-fast);
    }
    .seg-btn:hover{color:var(--accent)}
    .seg-btn.active{color:var(--accent);background:var(--accent-soft)}
    .seg-btn .icon{width:14px;height:14px;display:inline-flex}
    .seg-btn .icon svg{width:14px;height:14px}
    /* 强制覆盖浏览器自动填充的浅蓝背景（Chrome/Safari 对 background:transparent 的 input 会注入 autofill 底色）*/
    .search-input:-webkit-autofill,
    .search-input:-webkit-autofill:hover,
    .search-input:-webkit-autofill:focus{
      -webkit-text-fill-color:var(--ink);
      -webkit-box-shadow:0 0 0 1000px transparent inset;
      caret-color:var(--ink);transition:background-color 9999s ease-out 0s;
    }
    /* 筛选下拉（custom-select 触发器）—— 与全站 select 风格统一 */
    .hero-toolbar .cs-wrapper{flex:0 1 auto;min-width:0}
    .hero-toolbar .cs-trigger-label{max-width:120px}
    .search-select{
      width:100%;height:42px;min-height:42px;padding:8px 36px 8px 12px;
      border:1px solid var(--line-strong);background:var(--paper-2);color:var(--ink);
      border-radius:var(--radius-control);
      font-family:var(--ui-sans);font-weight:500;font-size:var(--text-sm);line-height:1.45;
      cursor:pointer;outline:none;
      appearance:none;-webkit-appearance:none;text-overflow:ellipsis;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238B826F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-position:right 12px center;background-repeat:no-repeat;
      transition:border-color var(--transition-base),background var(--transition-base),box-shadow var(--transition-base);
    }
    .search-select:hover{border-color:var(--ink-mute);background:var(--paper)}
    .search-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
    .search-select option{font-family:var(--ui-sans);font-size:var(--text-sm);color:var(--ink);background:var(--paper-2)}
    .search-select optgroup{font-family:var(--ui-sans);font-size:var(--text-xs);font-weight:600;color:var(--ink-mute);background:var(--paper-3)}
    .toolbar-spacer{flex:1}

    /* 工具栏按钮（刷新/收藏/首页/Skill）：幽灵化，弱视觉权重 */
    .tool-btn{
      font-family:var(--ui-sans);font-weight:500;font-size:var(--text-xs);
      text-decoration:none;cursor:pointer;
      color:var(--ink-mute);background:transparent;border:none;
      padding:7px 10px;line-height:1;display:inline-flex;align-items:center;gap:5px;
      min-height:38px;box-sizing:border-box;
      border-radius:var(--radius-control);transition:color var(--transition-fast),background var(--transition-fast);white-space:nowrap;
    }
    .tool-btn:hover{color:var(--accent);background:var(--bg-tertiary)}
    .tool-btn .icon{font-size:var(--text-base)}
    #favoritesFilterBtn.active{color:var(--accent);background:var(--accent-soft)}
    /* 排序下拉触发器与相邻控件同一 10px 圆角（design-system 默认 --radius-sm 8px，
       会与搜索框/分段控件形成肉眼可辨的差一档圆角）；
       高度也对齐 42px —— design-system 的 cs-trigger 全站基准 38px，
       在这排 42px 的邻居（搜索框/全文/视图切换/全部收藏）中间矮一截 */
    .hero-toolbar .cs-trigger{border-radius:var(--radius-control);height:42px;min-height:42px}

    /* Fulltext toggle */
    .fulltext-toggle{
      font-family:var(--ui-sans);font-size:var(--text-xs);font-weight:600;color:var(--ink-mute);
      background:var(--paper-2);border:1px solid var(--line-strong);border-radius:var(--radius-control);
      padding:0 14px;height:42px;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;
      line-height:1;box-sizing:border-box;display:inline-flex;align-items:center;flex:none;
    }
    .fulltext-toggle:hover{color:var(--accent);border-color:var(--accent)}
    .fulltext-toggle.active{color:var(--paper-2);background:var(--accent);border-color:var(--accent)}
    /* 亲密原则：全文是搜索框的范围修饰，负 margin 把它与搜索框收紧成子组
       （工具栏 gap 14px 为组间距，这里抵消出 8px 组内距；flex-wrap 换行时
       margin 不影响行首，安全） */
    .fulltext-toggle{margin-left:-6px}

    /* Hit chapters — search result blocks */
    .book-hit-chapters{margin-top:8px}
    .book-hit-item{padding:6px 10px;margin-bottom:4px;border-left:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 3%,var(--paper-2));border-radius:0 6px 6px 0;transition:all var(--transition-fast)}
    .book-hit-item:hover{background:color-mix(in srgb,var(--accent) 7%,var(--paper-2));border-left-width:3px}
    .book-hit-link{display:flex;align-items:baseline;gap:6px;text-decoration:none;cursor:pointer}
    .book-hit-ch-label{font-family:var(--ui-sans);font-size:var(--text-2xs);font-weight:700;letter-spacing:.04em;color:var(--accent);flex:none}
    .book-hit-ch-title{font-family:var(--serif);font-size:var(--text-xs);font-weight:500;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .book-hit-snippet{font-family:var(--serif);font-size:var(--text-xs);line-height:1.5;color:var(--ink-mute);margin:3px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .book-hit-more{font-family:var(--ui-sans);font-size:var(--text-2xs);color:var(--ink-mute);padding:2px 0;display:inline-block}

    /* ---------- View toggle (grid/list) ---------- */
    .view-toggle{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:var(--radius-control);overflow:hidden;height:42px}
    .view-btn{display:inline-flex;align-items:center;justify-content:center;padding:0 10px;background:transparent;border:none;color:var(--ink-mute);cursor:pointer;transition:color var(--transition-fast),background var(--transition-fast);min-height:40px}
    .view-btn:hover{color:var(--accent);background:var(--bg-tertiary)}
    .view-btn.active{color:var(--accent);background:var(--accent-soft)}

    /* ---------- List mode ---------- */
    #books-container.list-mode{display:flex;flex-direction:column;gap:0}
    #books-container.list-mode .card.book-card{flex-direction:row;align-items:center;gap:12px;padding:8px 14px;border-radius:0;border-left:none;border-right:none;animation:none}
    #books-container.list-mode .card.book-card:first-child{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
    #books-container.list-mode .card.book-card:last-child{border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius)}
    #books-container.list-mode .book-cover{width:36px;height:48px;flex:none;min-width:36px}
    #books-container.list-mode .book-cover-vol,#books-container.list-mode .book-cover-title,#books-container.list-mode .book-cover-initial,#books-container.list-mode .book-cover-rule{font-size:.4rem}
    #books-container.list-mode .book-header{margin-bottom:0;flex:1;min-width:0;gap:10px}
    #books-container.list-mode .book-title-group{flex:1;min-width:0}
    #books-container.list-mode .book-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    #books-container.list-mode .book-subtitle{display:none}
    #books-container.list-mode .book-meta{flex:none;font-size:var(--text-2xs);white-space:nowrap;color:var(--ink-mute)}
    #books-container.list-mode .book-meta-dot{margin:0 4px}
    #books-container.list-mode .book-description{display:none}
    #books-container.list-mode .book-hit-chapters{display:none}
    #books-container.list-mode .book-footer{flex:none}
    #books-container.list-mode .book-progress{display:none}
    #books-container.list-mode .book-status-badge{position:static;flex:none;font-size:.58rem;padding:1px 6px;min-width:48px;text-align:center}
    #books-container.list-mode .delete-btn{flex:none}
    #books-container.list-mode .card.book-card:hover{transform:none}
    #books-container.list-mode .card.book-card:active{transform:scale(.997)}
    @media(max-width:680px){
      #books-container.list-mode .book-meta{display:none}
      #books-container.list-mode .book-footer .read-link{display:none}
    }

    /* ---------- Books grid ---------- */
    .books-grid.grid-auto-fill{
      display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;
    }
    .card.book-card{
      position:relative;cursor:pointer;display:flex;flex-direction:column;
      background:var(--paper-2);border:1px solid var(--line);
      border-radius:var(--radius);padding:14px 16px 12px;overflow:visible;
      transition:transform var(--transition-base) ease,border-color var(--transition-base) ease,box-shadow var(--transition-base) ease;
      animation:cardIn .5s backwards;
    }
    .card.book-card:hover{
      transform:translateY(-2px);border-color:var(--line-strong);z-index:10;
      box-shadow:var(--shadow-md);
    }
    .card.book-card:active{
      transform:scale(.985);
    }

    /* 封面 + 标题区 */
    .book-header{display:flex;gap:18px;align-items:flex-start;margin-bottom:12px}
    /* —— 纯 CSS 精装书封：3:4 竖版，布面双色调渐变 + 书脊压痕 + 烫金书名 —— */
    .book-cover{
      position:relative;width:104px;height:139px;flex:0 0 auto;border-radius:3px 7px 7px 3px;
      background:var(--cv,linear-gradient(158deg,#46536f,#2a3147));
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      padding:14px 10px 20px;overflow:hidden;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.08),
        inset 5px 0 10px -5px rgba(0,0,0,.42),
        var(--shadow-lg);
      transition:transform var(--transition-base) cubic-bezier(.2,.7,.2,1);
    }
    /* AI 封面图：加载成功时覆盖 CSS 书封 */
    .book-cover-img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:1}
    .book-cover.has-img .book-cover-img{display:block}
    .book-cover-img.no-cover{display:none !important}
    .book-cover.has-img .book-cover-vol,
    .book-cover.has-img .book-cover-title,
    .book-cover.has-img .book-cover-initial,
    .book-cover.has-img .book-cover-rule{display:none}
    .book-cover.has-img::after{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
    /* 书脊：左侧装订压痕高光 */
    .book-cover::before{
      content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
      background:linear-gradient(90deg,rgba(0,0,0,.38),rgba(255,255,255,.10) 55%,rgba(0,0,0,.16));
    }
    /* 封面压印细框（精装书面板框） */
    .book-cover::after{
      content:"";position:absolute;inset:7px 7px 7px 10px;border-radius:2px;
      border:1px solid color-mix(in srgb,var(--cf,#e4cd96) 46%,transparent);
      opacity:.6;pointer-events:none;
    }
    .book-cover-vol{
      position:absolute;top:10px;left:0;right:0;text-align:center;
      font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.3em;text-indent:.3em;
      color:var(--cf,#e4cd96);opacity:.85;line-height:1;
    }
    /* 封面书名：CJK 竖排烫金（长名 JS 断成平衡双列，pre-line 生效） */
    .book-cover-title{
      font-family:var(--serif);font-weight:600;font-size:var(--text-xs);line-height:1.5;
      color:var(--cf,#e4cd96);text-shadow:0 1px 2px rgba(0,0,0,.45);
      writing-mode:vertical-rl;text-orientation:upright;
      letter-spacing:.18em;max-height:94px;overflow:hidden;white-space:pre-line;
    }
    /* 拉丁书名：横排居中 */
    .book-cover-title.lat{
      writing-mode:horizontal-tb;text-orientation:mixed;letter-spacing:.04em;text-align:center;
      font-size:var(--text-xs);line-height:1.45;max-height:none;max-width:100%;
      display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
    }
    /* 窄屏封面只压印首字 */
    .book-cover-initial{
      display:none;font-family:var(--serif);font-weight:600;font-size:var(--text-xl);line-height:1;
      color:var(--cf,#e4cd96);text-shadow:0 1px 2px rgba(0,0,0,.45);
    }
    /* 封底烫金饰线 */
    .book-cover-rule{
      position:absolute;bottom:11px;left:50%;transform:translateX(-50%);
      width:24px;height:1px;background:var(--cf,#e4cd96);opacity:.75;
    }
    .book-cover-rule::before{
      content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;
      transform:translate(-50%,-50%) rotate(45deg);background:var(--cf,#e4cd96);
    }
    .card.book-card:hover .book-cover{transform:translateY(-3px)}
    /* Mono 主题：封面整体灰阶化 */
    [data-theme="mono"] .book-cover{filter:grayscale(1)}

    .book-title-group{min-width:0;padding-top:2px;flex:1}
    .book-title{
      font-family:var(--serif);font-weight:600;font-size:var(--text-xl);line-height:1.3;color:var(--ink);
      letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
      padding-right:56px; /* 给右上角状态 badge 让位 */
    }
    .book-subtitle{font-size:var(--text-xs);color:var(--ink-mute);margin-top:4px;font-family:var(--serif);
      display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
    .book-meta{
      display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:12px;
      font-family:var(--ui-sans);font-size:var(--text-xs);color:var(--ink-mute);
      letter-spacing:.02em;font-variant-numeric:tabular-nums;
    }
    .book-meta-dot{color:var(--line-strong);font-size:var(--text-2xs);line-height:1}
    .book-author{color:var(--accent-2);font-weight:500}
    .book-author.ai-author{color:var(--ink-mute);font-weight:400}
    .book-description{
      font-size:var(--text-sm);line-height:1.62;color:var(--ink-soft);margin-bottom:16px;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }
    /* footer */
    .book-footer{
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
    }
    .book-progress{height:3px;background:rgba(0,0,0,.25);overflow:hidden;position:absolute;left:0;right:0;bottom:0;z-index:2}
    .book-progress-bar{height:100%;background:var(--accent);transition:width .3s}
    .read-link{
      display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
      font-family:var(--ui-sans);font-weight:600;font-size:var(--text-xs);color:var(--accent);transition:color var(--transition-base);
    }
    .read-link i{font-style:normal;transition:transform var(--transition-base)}
    .card.book-card:hover .read-link{color:var(--accent)}
    .card.book-card:hover .read-link i{transform:translateX(4px)}

    /* ===== LIBRARY FINAL — 封面主导书卡（单一权威层，覆盖上方多代规则）===== */
    /* 网格：Kindle/微信读书式留白，封面节奏感 */
    .books-grid.grid-auto-fill{
      grid-template-columns:repeat(auto-fill,minmax(168px,1fr)) !important;
      gap:clamp(24px,3vw,38px) clamp(16px,2.2vw,24px) !important;
    }
    /* 卡片去框去底，让封面成为主体 */
    .card.book-card{
      background:transparent !important;border:none !important;box-shadow:none !important;
      padding:0 !important;border-radius:0 !important;
    }
    .card.book-card:hover{
      transform:none !important;border-color:transparent !important;box-shadow:none !important;
    }
    /* 封面放大成卡片主体（3:4，微信读书式：封面即书） */
    .card.book-card .book-header{flex-direction:column;gap:0}
    .card.book-card .book-cover{
      width:100%;aspect-ratio:3/4;margin-bottom:14px;border-radius:6px;overflow:hidden;
      box-shadow:var(--shadow-sm);
      transition:transform var(--transition-slow),box-shadow var(--transition-slow);
    }
    .card.book-card:hover .book-cover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-lg);
    }
    /* 有 AI 封面图时：隐藏 CSS 精装装饰（书脊/VOL/压印/首字），让图片成为唯一封面 */
    .card.book-card .book-cover.has-img::before{content:none}
    .card.book-card .book-cover.has-img .book-cover-vol,
    .card.book-card .book-cover.has-img .book-cover-rule,
    .card.book-card .book-cover.has-img .book-cover-initial{display:none !important}
    /* 标题组：封面下方 */
    .card.book-card .book-title-group{padding-top:0}
    .card.book-card .book-title{
      font-size:var(--text-base);line-height:1.4;padding-right:0;margin-bottom:4px;
    }
    .card.book-card .book-subtitle{display:none}  /* 副标题降级到 reader */
    /* meta 瘦身：AI + 作者 + 字数（微信读书式一行小字） */
    .card.book-card .book-meta{margin-bottom:0;gap:6px;font-size:var(--text-xs)}
    /* 微信读书式：书卡零操作——描述/read-link 移除（模板已删，此处兜底）；进度条保留给未完成书 */
    .card.book-card .book-description,
    .card.book-card .read-link{display:none !important}
    /* 全文搜索命中块保留：用户主动搜索时展示命中章节（微信读书同款） */
    .card.book-card .book-hit-chapters{margin-top:10px}
    /* list 模式不受封面主导影响，保持紧凑行 */
    #books-container.list-mode .card.book-card .book-cover{
      width:48px;aspect-ratio:3/4;margin-bottom:0;border-radius:3px;
    }
    #books-container.list-mode .card.book-card .book-subtitle,
    #books-container.list-mode .card.book-card .book-description{display:-webkit-box}

    /* ===== 移动端 header 压缩：屏越大头越矮，把首屏还给书 ===== */
    @media (max-width:860px){
      /* 隐藏营销统计行（X卷藏书·X字·X作者），移动端只留标题+搜索 */
      body.app-shell-library .hero-stats-inline,
      body.app-shell-library .hero-stats{display:none !important}
      body.app-shell-library .hero-header{padding:10px 0 10px !important}
      .hero-title{font-size:var(--text-xl) !important}
      .hero{margin:0 -16px 16px !important}
      /* 语言/主题切换收进账户栏右侧已够挤，移动端隐藏（底部导航+设置页可换） */
      body.app-shell-library .hero-controls .lang-switch,
      body.app-shell-library .hero-controls .theme-segmented,
      body.app-shell-library .hero-controls .theme-seg-btn{display:none !important}
    }
    @media (max-width:680px){
      /* 移动端书卡：2 列封面主导，徽标贴封面左下（覆盖旧右上定位） */
      .card.book-card .book-status-badge{left:8px;bottom:8px;top:auto !important;right:auto !important}
      /* 旧 58x78 小封面样式全部失效，统一 3:4 大封面 */
      .card.book-card .book-cover{width:100% !important;height:auto !important;aspect-ratio:3/4}
      .card.book-card .book-title{font-size:var(--text-sm) !important}
    }

    /* ---------- Loading skeleton ---------- */
    .loading{display:none}
    .loading.is-active{display:block}
    /* 骨架屏：与真实书架同版式（竖版 3:4 封面卡 + 标题/meta 两行），
       复用 .books-grid.grid-auto-fill 的列宽与间距，加载完成零版式跳变。
       极简灰条，无阴影无装饰——加载等待不该比内容更引人注目。 */
    .skeleton-grid{
      display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
      gap:clamp(24px,3vw,38px) clamp(16px,2.2vw,24px);align-items:start;
    }
    .skeleton-card{display:flex;flex-direction:column;gap:10px}
    .skeleton-cover,
    .skeleton-line{
      position:relative;overflow:hidden;background:var(--bg-tertiary);border-radius:4px;
    }
    .skeleton-cover::after,
    .skeleton-line::after{
      content:"";position:absolute;inset:0;
      background:linear-gradient(100deg,transparent 30%,var(--bg-surface-muted) 50%,transparent 70%);
      transform:translateX(-100%);
      animation:skeletonPulse 1.8s ease-in-out infinite;
    }
    .skeleton-cover{width:100%;aspect-ratio:3/4;border-radius:6px;margin-bottom:4px}
    .skeleton-line{height:10px}
    .sk-title{width:85%;height:14px}
    .sk-meta{width:55%}

    /* ---------- Stats Banner ---------- */
    .hero-stats-inline{
      font-family:var(--ui-sans);font-size:var(--text-xs);color:var(--ink-mute);
      margin-top:2px;font-variant-numeric:tabular-nums;display:inline-flex;align-items:baseline;gap:2px;
    }
    .hero-stats-inline span{
      font-family:var(--serif-display);font-weight:600;font-size:var(--text-xs);color:var(--ink-soft);
    }
    .hero-stats-label{
      font-family:var(--ui-sans) !important;font-weight:400 !important;font-size:var(--text-2xs) !important;color:var(--ink-mute) !important;
    }
    .hero-stats-sep{color:var(--line-strong);margin:0 5px;font-weight:400}
    @media (max-width:680px){
      .hero-stats-inline{font-size:var(--text-2xs)}
      .hero-stats-inline span{font-size:var(--text-xs)}
      .hero-stats-label{font-size:var(--text-2xs) !important}
    }

    /* ---------- Empty ---------- */
    .empty-state,.empty-search-state{grid-column:1/-1;padding:24px 0 8px}
    .empty-state-panel{
      max-width:560px;margin:0 auto;padding:40px 30px;border-radius:var(--radius);
      border:1px solid var(--line);background:var(--paper-2);
      text-align:center;color:var(--ink-soft);
    }
    .empty-icon-shell{
      width:64px;height:64px;margin:0 auto 16px;border-radius:var(--radius);
      display:grid;place-items:center;
      background:var(--bg-tertiary);border:1px solid var(--line);
    }
    .empty-icon{font-size:1.8rem;line-height:1;color:var(--ink-mute)}
    .empty-eyebrow{
      margin:0 0 10px;font-family:var(--ui-sans);font-size:var(--text-2xs);font-weight:700;
      letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);
    }
    .empty-text{font-family:var(--serif);font-weight:600;font-size:var(--text-2xl);color:var(--ink);margin:0 0 10px}
    .empty-desc{margin:0 auto;max-width:34ch;font-size:var(--text-sm);line-height:1.7;color:var(--ink-soft)}
    .empty-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:22px}
    .empty-action{
      min-height:40px;padding:9px 18px;border-radius:var(--radius-sm);border:1px solid var(--line-strong);
      background:transparent;color:var(--ink-soft);text-decoration:none;cursor:pointer;
      display:inline-flex;align-items:center;justify-content:center;gap:6px;
      font-family:var(--ui-sans);font-size:var(--text-sm);font-weight:500;
      transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast);
    }
    .empty-action:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
    .empty-action.primary{background:var(--accent);border-color:var(--accent);color:var(--paper-2)}
    .empty-action.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}

    /* ---------- Pagination ---------- */
    .pagination{display:flex;align-items:center;justify-content:center;gap:20px;margin:48px 0 12px}
    .pagination-btn{
      font-family:var(--ui-sans);font-size:var(--text-sm);font-weight:500;color:var(--ink-soft);
      background:transparent;border:1px solid var(--line);border-radius:999px;
      padding:9px 24px;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast);
    }
    .pagination-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
    .pagination-btn:disabled{opacity:.3;cursor:not-allowed}
    .pagination-info{font-family:var(--ui-sans);font-size:var(--text-xs);color:var(--ink-mute);letter-spacing:.02em;font-variant-numeric:tabular-nums}

    /* ---------- Toast ---------- */
    #toast-container{position:fixed;right:20px;bottom:96px;z-index:2000;display:flex;flex-direction:column;gap:10px;max-width:340px}
    .toast{
      display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:var(--radius-md);
      background:var(--paper-2);border:1px solid var(--line-strong);box-shadow:var(--shadow-lg);
      font-size:var(--text-sm);color:var(--ink);animation:slideIn .3s ease-out;border-left:4px solid var(--ink-mute);
    }
    .toast.success{border-left-color:var(--ok)} .toast.error{border-left-color:var(--accent)}
    .toast.info{border-left-color:var(--accent-2)} .toast.warning{border-left-color:var(--warn)}
    .toast-icon{font-size:var(--text-base)} .toast-message{font-weight:500;line-height:1.4}

    /* ---------- Bottom nav (mobile) ---------- */
    .bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:140;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);display:none}
    .bottom-nav-items{display:flex;max-width:var(--maxw);margin:0 auto}
    .bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 10px;text-decoration:none;color:var(--ink-mute);font-size:var(--text-2xs);font-weight:600;transition:color var(--transition-fast),transform var(--transition-fast)}
    .bottom-nav-item:active{transform:scale(.9)}
    .bottom-nav-item.active{color:var(--accent)}
    .bottom-nav-icon{font-size:var(--text-lg)}

    /* ---------- Animations ---------- */
    @keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
    @keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
    @keyframes skeletonPulse{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
    @keyframes slideIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
    @keyframes fadeOut{to{opacity:0;transform:translateX(40px)}}
    .books-grid.grid-auto-fill > .book-card{animation-delay:calc(var(--card-index, 0) * .04s)}
    @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

    /* ---------- Responsive ---------- */
    @media (max-width:860px){
      .container.container-wide{padding:0 16px}
      body.app-shell-library .hero{margin:0 -16px 20px;padding:0 16px}
      .hero-header{padding:14px 0}
      .hero-subtitle{display:none}
      .bottom-nav{display:block}
      body.app-shell-library{padding-bottom:74px}
      /* 平板/手机：固定 2 列紧凑栅格 */
      .books-grid.grid-auto-fill,.skeleton-grid{grid-template-columns:repeat(2,1fr);gap:12px}
      .settings-panel-inline{order:5}
    }
    @media (max-width:680px){
      .hero-toolbar{gap:8px}
      /* 移动端 gap 已是 8px，组内负 margin 会挤成 2px，归零保持统一 */
      .fulltext-toggle{margin-left:0}
      .search-inline{flex:1 1 100%;order:-1}
      .hero-toolbar .cs-wrapper{flex:1 1 calc(33.333% - 6px)}
      .hero-toolbar .cs-trigger{width:100%}
      .hero-toolbar .cs-trigger-label{max-width:110px}
      .search-select{flex:1 1 calc(33.333% - 4px);min-width:0;font-size:var(--text-xs)}
      .tool-btn{min-height:40px;min-width:40px;padding:8px 10px;justify-content:center;border-radius:var(--radius-sm)}
      .view-btn{min-height:40px;min-width:36px;padding:8px 7px}
      .tool-btn span:not([class*="icon"]):not([data-icon]){display:none}
      /* 移动端隐藏与底部导航重复的首页/Skill 按钮 */
      .hero-toolbar .tool-btn[href="/"],.hero-toolbar .tool-btn[href="/skill"]{display:none}
      .empty-state-panel{padding:28px 22px}
      /* 窄屏卡片：紧凑双列，封面只压印首字 */
      .card.book-card{padding:12px}
      .book-header{gap:10px;margin-bottom:8px}
      .book-cover{
        width:58px;height:78px;padding:8px 4px 12px;border-radius:2px 5px 5px 2px;
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 3px 0 6px -3px rgba(0,0,0,.4),var(--shadow-sm);
      }
      .book-cover::before{width:4px}
      .book-cover::after{inset:4px 4px 4px 6px}
      .book-cover-title,.book-cover-rule,.book-cover-vol{display:none}
      .book-cover-initial{display:block}
      .book-title{font-size:var(--text-base);line-height:1.32}
      .book-subtitle{font-size:var(--text-xs);margin-top:2px}
      .book-meta{font-size:var(--text-2xs);gap:5px;margin-bottom:7px}
      .book-description{display:none}
      .book-footer{padding-top:8px}
      .read-link{font-size:var(--text-xs)}
      .book-status-badge{top:10px;right:10px;font-size:var(--text-2xs);padding:1px 7px}
    }
    @media (max-width:520px){
      .hero-controls{gap:8px}
      .nav-btn span:not(.flag-icon){font-size:var(--text-xs)}
    }

    /* ---------- Override design-system.css (.app-shell .hero* wins on specificity) ---------- */
    body.app-shell-library .hero,
    body.app-shell-library .hero-section{
      color:var(--ink);margin:0 -24px 24px;padding:0 24px;
      background:color-mix(in srgb,var(--paper) 86%,transparent);
      backdrop-filter:blur(14px) saturate(1.1);
      -webkit-backdrop-filter:blur(14px) saturate(1.1);
      border-bottom:1px solid var(--line);box-shadow:none;
    }
    body.app-shell-library .hero::before{display:none}
    body.app-shell-library .hero-header{
      background:transparent;border:0;border-radius:0;box-shadow:none;
      padding:22px 0 16px;margin-bottom:0;align-items:center;
    }
    body.app-shell-library .hero-title{
      color:var(--ink);text-shadow:none;
      font-family:var(--serif);font-weight:600;
      font-size:clamp(1.75rem,3vw,2.5rem);letter-spacing:-.02em;line-height:1.1;
    }
    /* 2026-08-14: 删 ::first-letter 红首字 —— 拉丁字母 drop-cap 设计用在中文
       "硅基图书馆" 的 "硅" 字上是错配 (GLM52 共识)。整字一个 ink 色, 让 hero masthead
       真的像杂志 masthead, 不像贴标签。 */
    body.app-shell-library .hero-subtitle{
      /* 2026-08-14: 副标题单独成行 · 编辑感呼吸 · 不与统计挤一行 */
      color:var(--ink-soft);opacity:1;
      font-family:var(--ui-sans);font-size:var(--text-sm);letter-spacing:.02em;font-weight:400;
      line-height:1.5;
      text-transform:none;white-space:normal;max-width:100%;display:block;
      margin-top:6px;
    }
    body.app-shell-library .hero-controls{gap:10px}
    /* 卡片去默认阴影（纸感主题用细线边框），hover 只留极轻投影 */
    body.app-shell-library .card.book-card{box-shadow:none}
    body.app-shell-library .card.book-card:hover{
      box-shadow:var(--shadow-md);
      transform:translateY(-2px);border-color:var(--line-strong);
    }
    /* 工具栏按钮（刷新/收藏/首页/Skill）：tool-btn 已在主样式定义，这里确保覆盖 design-system 残留 */
    body.app-shell-library .tool-btn{
      background:transparent;color:var(--ink-mute);border:none;
      font-family:var(--ui-sans);font-weight:500;font-size:var(--text-xs);
      padding:5px 8px;border-radius:var(--radius-sm);
    }
    body.app-shell-library .tool-btn:hover{color:var(--accent);background:var(--bg-tertiary)}
    body.app-shell-library #favoritesFilterBtn.active{color:var(--accent);background:var(--accent-soft)}
    @media (min-width:769px){
      body.app-shell-library .hero-title-group{flex-direction:column;align-items:flex-start;gap:3px}
    }
    
    /* ---------- SEO SSR 书目（JS 网格就绪后隐藏；爬虫持续可见） ---------- */
    .ssr-book-list{
      grid-column:1/-1;list-style:none;margin:0;padding:0;
      display:grid;gap:2px;
    }
    .ssr-book-list li{
      display:flex;align-items:baseline;gap:12px;
      padding:10px 14px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent);
    }
    .ssr-book-list a{
      font-family:var(--serif);font-size:var(--text-sm);font-weight:600;color:var(--ink);
      text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    .ssr-book-list a:hover{color:var(--accent)}
    .ssr-book-meta{font-family:var(--ui-sans);font-size:var(--text-xs);color:var(--ink-mute);white-space:nowrap;margin-left:auto}
    body.js-books-loaded .ssr-book-list{display:none}

    /* ===== 列表视图终层覆盖（2026-08-15：微信读书书架式紧凑行）=====
       封面主导 FINAL 层（上方）把 .book-header 压成 column、封面 margin-bottom:14px、
       卡片 padding:0/border:none 全部 !important——旧 list-mode 规则(209区)多数被压制，
       列表行被拆成「封面行+文字行」两段、无边框无内距，空白巨大。
       本段以 ID 前缀 + !important 反制，恢复单行紧凑布局。 */
    #books-container.list-mode .card.book-card{
      background:var(--paper-2) !important;
      border:none !important;
      border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent) !important;
      box-shadow:none !important;
      padding:9px 16px !important;
      border-radius:0 !important;
    }
    #books-container.list-mode .card.book-card:first-child{
      border-top-left-radius:var(--radius-lg) !important;
      border-top-right-radius:var(--radius-lg) !important;
    }
    #books-container.list-mode .card.book-card:last-child{
      border-bottom-left-radius:var(--radius-lg) !important;
      border-bottom-right-radius:var(--radius-lg) !important;
      border-bottom:none !important;
    }
    #books-container.list-mode .card.book-card:hover{background:var(--paper-3) !important}
    /* 行内布局：封面 | 标题+meta 纵组(flex:1) | 状态徽章 */
    #books-container.list-mode .card.book-card .book-header{
      flex-direction:row !important;
      align-items:center;
      gap:12px;
      margin-bottom:0;
      flex:1;
      min-width:0;
    }
    #books-container.list-mode .card.book-card .book-cover{
      width:36px !important;
      height:48px !important;
      min-width:36px;
      aspect-ratio:auto !important;
      margin:0 !important;
      border-radius:3px;
      box-shadow:var(--shadow-xs);
      transition:none !important;
    }
    #books-container.list-mode .card.book-card:hover .book-cover{
      transform:none !important;
      box-shadow:var(--shadow-xs) !important;
    }
    #books-container.list-mode .card.book-card .book-title{
      font-size:var(--text-sm) !important;
      line-height:1.35 !important;
      margin-bottom:2px !important;
    }
    #books-container.list-mode .card.book-card .book-meta{margin-bottom:0;font-size:var(--text-2xs)}
    #books-container.list-mode .card.book-card .book-title-group{flex:1;min-width:0}