/* Extracted from the current app by tools/sync-assets.cjs. */
.hbook { position: relative; min-width: 0; height: 224px; overflow: hidden; padding: 0;
  border: none; text-align: left; font: inherit; cursor: pointer; color: #fff;
  border-radius: 5px 9px 9px 5px;
  box-shadow: 0 12px 22px rgba(0, 0, 0, .26), 0 4px 7px rgba(0, 0, 0, .14),
    inset 0 -1.5px 0 rgba(255, 255, 255, .10);
  transition: transform 150ms cubic-bezier(.23, 1, .32, 1);
  animation: hbIn .45s cubic-bezier(.2, .8, .3, 1) backwards; }
/* 高光扫过试过一版，Alan：感觉很奇怪 —— 撤。动效全在各纹样自己身上 */
/* 上架动画：一本一本落位 */
.hbook:nth-child(1) { animation-delay: .02s }
.hbook:nth-child(2) { animation-delay: .07s }
.hbook:nth-child(3) { animation-delay: .12s }
.hbook:nth-child(4) { animation-delay: .17s }
.hbook:nth-child(5) { animation-delay: .22s }
.hbook:nth-child(6) { animation-delay: .27s }
.hbook:nth-child(7) { animation-delay: .32s }
.hbook:nth-child(8) { animation-delay: .37s }
.hbook:nth-child(9) { animation-delay: .42s }
@keyframes hbIn { from { opacity: 0; transform: translateY(16px) } }
/* 按下：沿书脊微微翻开 */
.hbook:active { transform: perspective(700px) rotateY(5deg) scale(.97); transform-origin: left center; }
.hbook:disabled { cursor: default; }
@media (prefers-reduced-motion: reduce) { .hbook { animation: none; transition: none; } }

/* ── 九本书底色 · 中国传统色（朱砂→鎏金→竹青→石青→靛蓝→绛紫→墨绿→玄青→玄墨）── */
.book-h1 { background: linear-gradient(160deg, #ae3428 0%, #92281e 60%, #771f17 100%); }
.book-h2 { background: linear-gradient(160deg, #b5872f 0%, #9a6e22 60%, #7f5a1a 100%); }
.book-h3 { background: linear-gradient(160deg, #2f8f63 0%, #23734e 60%, #1a5c3e 100%); }
.book-h4 { background: linear-gradient(160deg, #1f7e8c 0%, #166572 60%, #10505c 100%); }
.book-h5 { background: linear-gradient(160deg, #2c4e9b 0%, #223d7f 60%, #1a2f66 100%); }
.book-h6 { background: linear-gradient(160deg, #6b3f86 0%, #56316e 60%, #452759 100%); }
.book-h7 { background: linear-gradient(160deg, #2a6153 0%, #204c40 60%, #173a31 100%); }
.book-h8 { background: linear-gradient(160deg, #35476b 0%, #293755 60%, #1e2940 100%); }
.book-h9 { background: linear-gradient(160deg, #33302c 0%, #262421 60%, #1b1a18 100%); }
/* 玄墨压轴（第 9 本）：金字金线 */
.book-h9 .hb-series { color: rgba(232, 192, 90, .88); }
.book-h9 .hb-number { color: #e8c05a; text-shadow: 0 2px 7px rgba(0, 0, 0, .4); }
.book-h9 .hb-line { background: rgba(232, 192, 90, .5); }

/* 纹样层：满铺密纹 + 左侧渐隐护文字（结构照 batik.wxss）。
   动效在各纹样的 SVG 里（SMIL）：祥云金边呼吸、回纹金点沿线跑、
   竹叶整层慢落、海水横流、菱格花心星闪、梅花落英、团花缓转 ——
   一纹一性，不搞统一炫光。 */
.hb-pat { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-repeat: repeat; background-position: center; opacity: .72;
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.45) 34%, #000 62%);
          mask-image: linear-gradient(100deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.45) 34%, #000 62%); }
/* 菱格：整层慢呼吸，格子微微变大变小（7 秒一息） */
.book-h5 .hb-pat { animation: hbBreathe 7s ease-in-out infinite; }
@keyframes hbBreathe { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.09) } }

/* 梅花：独立落瓣层，花瓣缓缓斜落（13 秒穿过一格） */
.book-h6 .hb-pat::after { content: ''; position: absolute; inset: 0;
  background-repeat: repeat; animation: hbPetal 13s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='130'%3E%3Cg fill='rgba(255,255,255,.30)'%3E%3Cellipse cx='20' cy='18' rx='3' ry='1.9' transform='rotate(35 20 18)'/%3E%3Cellipse cx='62' cy='58' rx='2.7' ry='1.8' transform='rotate(70 62 58)'/%3E%3Cellipse cx='38' cy='104' rx='3' ry='1.9' transform='rotate(110 38 104)'/%3E%3C/g%3E%3C/svg%3E"); }
@keyframes hbPetal { to { background-position: 34px 130px } }

/* 团花：封面正中一朵大团花缓缓自转（40 秒一圈），底纹金瓣流转作衬 */
.book-h9 .hb-pat::after { content: ''; position: absolute; left: 50%; top: 50%;
  width: 150px; height: 150px; margin: -75px 0 0 -75px; opacity: .85;
  background-position: center; background-repeat: no-repeat; background-size: contain;
  animation: hbSpin 40s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='none' stroke='rgba(232,192,90,.30)'%3E%3Ccircle cx='75' cy='75' r='70' stroke-width='2'/%3E%3Ccircle cx='75' cy='75' r='45' stroke-width='1.4' stroke='rgba(232,192,90,.22)'/%3E%3Cg stroke-width='1.7' stroke='rgba(232,192,90,.28)'%3E%3Ccircle cx='75' cy='18' r='10'/%3E%3Ccircle cx='115' cy='35' r='10'/%3E%3Ccircle cx='132' cy='75' r='10'/%3E%3Ccircle cx='115' cy='115' r='10'/%3E%3Ccircle cx='75' cy='132' r='10'/%3E%3Ccircle cx='35' cy='115' r='10'/%3E%3Ccircle cx='18' cy='75' r='10'/%3E%3Ccircle cx='35' cy='35' r='10'/%3E%3C/g%3E%3Cellipse cx='75' cy='75' rx='48' ry='16' stroke-width='1.4' stroke='rgba(232,192,90,.20)'/%3E%3Cellipse cx='75' cy='75' rx='16' ry='48' stroke-width='1.4' stroke='rgba(232,192,90,.20)'/%3E%3C/g%3E%3Ccircle cx='75' cy='75' r='5' fill='rgba(232,192,90,.30)'/%3E%3C/svg%3E"); }
@keyframes hbSpin { to { transform: rotate(360deg) } }

@media (prefers-reduced-motion: reduce) {
  .book-h3 .hb-pat, .book-h4 .hb-pat, .book-h5 .hb-pat, .book-h8 .hb-pat,
  .book-h6 .hb-pat::after, .book-h9 .hb-pat::after { animation: none; }
}

/* 祥云纹：金边呼吸——两朵云错峰泛金又退回月白（配朱砂） */
.book-h1 .hb-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='92'%3E%3Cg fill='none' stroke='rgba(255,255,255,.30)' stroke-width='2.2' stroke-linecap='round'%3E%3Canimate attributeName='stroke' values='rgba(255,255,255,.30);rgba(232,192,90,.62);rgba(255,255,255,.30)' dur='7s' repeatCount='indefinite'/%3E%3Cpath d='M10 40 q5 -16 18 -16 q4 -12 16 -12 q13 0 16 11 q12 1 14 15'/%3E%3Cpath d='M17 40 q4 -11 13 -11 q3 -8 11 -8 q9 0 11 8 q8 1 10 11'/%3E%3Cpath d='M34 30 a6 6 0 1 1 9 5'/%3E%3Cpath d='M74 40 q10 3 17 -5'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(255,255,255,.24)' stroke-width='2' stroke-linecap='round'%3E%3Canimate attributeName='stroke' values='rgba(255,255,255,.24);rgba(232,192,90,.52);rgba(255,255,255,.24)' dur='7s' begin='3.5s' repeatCount='indefinite'/%3E%3Cpath d='M76 84 q5 -14 16 -14 q3 -10 14 -10 q11 0 14 9 q10 1 12 13'/%3E%3Cpath d='M96 76 a5 5 0 1 1 8 4'/%3E%3Cpath d='M46 84 q8 2 14 -4'/%3E%3C/g%3E%3Ccircle cx='62' cy='14' r='1.8' fill='rgba(255,255,255,.22)'/%3E%3Ccircle cx='126' cy='58' r='1.8' fill='rgba(255,255,255,.22)'/%3E%3Ccircle cx='16' cy='68' r='1.5' fill='rgba(255,255,255,.18)'/%3E%3C/svg%3E"); }
/* 回纹锦：一粒金点顺着回字线条一圈圈跑（配鎏金） */
.book-h2 .hb-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='38'%3E%3Cpath d='M3 23 V3 H23 V17 H11 V11 H17' fill='none' stroke='rgba(255,255,255,.26)' stroke-width='2'/%3E%3Cpath d='M3 23 V3 H23 V17 H11 V11 H17' fill='none' stroke='rgba(232,192,90,.65)' stroke-width='2' stroke-linecap='round' stroke-dasharray='9 69'%3E%3Canimate attributeName='stroke-dashoffset' from='78' to='0' dur='5s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M0 30.5 H26 M0 34.5 H26' stroke='rgba(255,255,255,.15)' stroke-width='1'/%3E%3C/svg%3E"); }
/* 竹叶纹：整层竹叶慢慢往下飘（CSS 平移平铺图，无缝循环，配竹青）。
   踩坑记录：SMIL 的 animateTransform 在「SVG 当 CSS 背景图」里不跑
   （animate 颜色/透明度/dashoffset 都跑）——位移类动画一律走 background-position */
.book-h3 .hb-pat { background-position: 0 0; animation: hbFall 18s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='rgba(255,255,255,.16)' stroke='rgba(255,255,255,.28)' stroke-width='1.3'%3E%3Cpath d='M26 16 q5 8 1 22 q-6 -10 -1 -22 Z'/%3E%3Cpath d='M30 22 q8 5 10 19 q-10 -6 -10 -19 Z' transform='rotate(14 30 22)'/%3E%3Cpath d='M20 26 q-6 7 -12 10 q4 -11 12 -10 Z'/%3E%3Cpath d='M70 58 q5 8 1 22 q-6 -10 -1 -22 Z'/%3E%3Cpath d='M74 64 q8 5 10 19 q-10 -6 -10 -19 Z' transform='rotate(14 74 64)'/%3E%3Cpath d='M64 68 q-6 7 -12 10 q4 -11 12 -10 Z'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(255,255,255,.20)' stroke-width='1.4'%3E%3Cpath d='M25 14 q3 22 -3 36'/%3E%3Cpath d='M69 56 q3 22 -3 36'/%3E%3C/g%3E%3Ccircle cx='60' cy='24' r='1.7' fill='rgba(255,255,255,.20)'/%3E%3Ccircle cx='16' cy='72' r='1.7' fill='rgba(255,255,255,.20)'/%3E%3C/svg%3E"); }
@keyframes hbFall { to { background-position: 0 96px } }
/* 水波纹：鳞浪斜向缓流，左下往右上（CSS 平移，配石青）。
   Alan：横流太快晕、太慢又感觉不到 —— 12 秒斜向是两轮反馈后的落点 */
.book-h4 .hb-pat { background-position: 0 0; animation: hbFlow 12s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='28'%3E%3Cg fill='none' stroke='rgba(255,255,255,.26)' stroke-width='1.6'%3E%3Cpath d='M0 28 a24 24 0 0 1 48 0'/%3E%3Cpath d='M8 28 a16 16 0 0 1 32 0'/%3E%3Cpath d='M16 28 a8 8 0 0 1 16 0'/%3E%3Cpath d='M-24 14 a24 24 0 0 1 48 0'/%3E%3Cpath d='M-16 14 a16 16 0 0 1 32 0'/%3E%3Cpath d='M-8 14 a8 8 0 0 1 16 0'/%3E%3Cpath d='M24 14 a24 24 0 0 1 48 0'/%3E%3Cpath d='M32 14 a16 16 0 0 1 32 0'/%3E%3Cpath d='M40 14 a8 8 0 0 1 16 0'/%3E%3C/g%3E%3C/svg%3E"); }
@keyframes hbFlow { to { background-position: 48px -28px } }
/* 菱格纹：花心像星星一样错峰明灭（配靛蓝） */
.book-h5 .hb-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20 L20 0 M20 0 L40 20 M0 20 L20 40 M20 40 L40 20' stroke='rgba(255,255,255,.24)' stroke-width='1.6'/%3E%3Cpath d='M20 7 L33 20 L20 33 L7 20 Z' fill='none' stroke='rgba(255,255,255,.16)' stroke-width='1.1'/%3E%3Ccircle cx='20' cy='20' r='1.8' fill='rgba(255,255,255,.30)'%3E%3Canimate attributeName='opacity' values='1;.25;1' dur='6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cg fill='rgba(255,255,255,.22)'%3E%3Canimate attributeName='opacity' values='1;.35;1' dur='6s' begin='3s' repeatCount='indefinite'/%3E%3Ccircle cx='20' cy='14.5' r='1.1'/%3E%3Ccircle cx='20' cy='25.5' r='1.1'/%3E%3Ccircle cx='14.5' cy='20' r='1.1'/%3E%3Ccircle cx='25.5' cy='20' r='1.1'/%3E%3C/g%3E%3C/svg%3E"); }
/* 梅花纹：两朵梅错峰吐蕊明灭，一瓣落英缓缓飘下（配绛紫） */
.book-h6 .hb-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M10 62 q18 -14 30 -30 q7 -9 20 -14' fill='none' stroke='rgba(255,255,255,.22)' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M28 44 q6 2 8 8 M46 24 q-6 1 -9 6' fill='none' stroke='rgba(255,255,255,.16)' stroke-width='1.3' stroke-linecap='round'/%3E%3Cg stroke='rgba(255,255,255,.28)' stroke-width='1.4' fill='rgba(255,255,255,.12)'%3E%3Canimate attributeName='opacity' values='1;.55;1' dur='8s' repeatCount='indefinite'/%3E%3Ccircle cx='22' cy='42.5' r='4'/%3E%3Ccircle cx='27.8' cy='46.8' r='4'/%3E%3Ccircle cx='25.6' cy='53.7' r='4'/%3E%3Ccircle cx='18.4' cy='53.7' r='4'/%3E%3Ccircle cx='16.2' cy='46.8' r='4'/%3E%3C/g%3E%3Cg stroke='rgba(255,255,255,.28)' stroke-width='1.4' fill='rgba(255,255,255,.12)'%3E%3Canimate attributeName='opacity' values='1;.55;1' dur='8s' begin='4s' repeatCount='indefinite'/%3E%3Ccircle cx='52' cy='12.5' r='4'/%3E%3Ccircle cx='57.8' cy='16.8' r='4'/%3E%3Ccircle cx='55.6' cy='23.7' r='4'/%3E%3Ccircle cx='48.4' cy='23.7' r='4'/%3E%3Ccircle cx='46.2' cy='16.8' r='4'/%3E%3C/g%3E%3Ccircle cx='22' cy='48.5' r='2' fill='rgba(255,255,255,.34)'/%3E%3Ccircle cx='52' cy='18.5' r='2' fill='rgba(255,255,255,.34)'/%3E%3Ccircle cx='38' cy='34' r='2.4' fill='rgba(255,255,255,.20)' stroke='rgba(255,255,255,.26)' stroke-width='1.2'/%3E%3Ccircle cx='62' cy='54' r='2.4' fill='rgba(255,255,255,.20)' stroke='rgba(255,255,255,.26)' stroke-width='1.2'/%3E%3Cg fill='rgba(255,255,255,.30)'%3E%3Cellipse cx='64' cy='16' rx='2.6' ry='1.7' transform='rotate(30 64 16)' opacity='0'%3E%3Canimate attributeName='opacity' values='0;.9;0;0;0' dur='12s' begin='0s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3Cellipse cx='60' cy='38' rx='2.6' ry='1.7' transform='rotate(60 60 38)' opacity='0'%3E%3Canimate attributeName='opacity' values='0;.8;0;0;0' dur='12s' begin='2.4s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3Cellipse cx='65' cy='60' rx='2.6' ry='1.7' transform='rotate(100 65 60)' opacity='0'%3E%3Canimate attributeName='opacity' values='0;.7;0;0;0' dur='12s' begin='4.8s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/g%3E%3C/svg%3E"); }
/* 龟甲纹：六角灵龟锦，格心四点错峰微光（配墨绿，第 7 本） */
.book-h7 .hb-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='48'%3E%3Cg fill='none' stroke='rgba(255,255,255,.24)' stroke-width='1.4'%3E%3Cpath d='M10.5 0 L31.5 0 L42 12 L31.5 24 L10.5 24 L0 12 Z'/%3E%3Cpath d='M52.5 0 L73.5 0 L84 12 L73.5 24 L52.5 24 L42 12 Z'/%3E%3Cpath d='M10.5 24 L31.5 24 L42 36 L31.5 48 L10.5 48 L0 36 Z'/%3E%3Cpath d='M52.5 24 L73.5 24 L84 36 L73.5 48 L52.5 48 L42 36 Z'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,.26)'%3E%3Ccircle cx='21' cy='12' r='1.6'%3E%3Canimate attributeName='opacity' values='1;.25;1' dur='7s' begin='0s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='63' cy='12' r='1.6'%3E%3Canimate attributeName='opacity' values='1;.25;1' dur='7s' begin='1.75s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='21' cy='36' r='1.6'%3E%3Canimate attributeName='opacity' values='1;.25;1' dur='7s' begin='3.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='63' cy='36' r='1.6'%3E%3Canimate attributeName='opacity' values='1;.25;1' dur='7s' begin='5.25s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); }
/* 鱼鳞纹：鳞甲整片缓缓下行（配玄青，第 8 本） */
.book-h8 .hb-pat { background-position: 0 0; animation: hbScales 13s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cg fill='none' stroke='rgba(255,255,255,.26)' stroke-width='1.5'%3E%3Cpath d='M0 0 a20 20 0 0 0 40 0'/%3E%3Cpath d='M-20 10 a20 20 0 0 0 40 0'/%3E%3Cpath d='M20 10 a20 20 0 0 0 40 0'/%3E%3C/g%3E%3Cpath d='M8 0 a12 12 0 0 0 24 0' fill='none' stroke='rgba(255,255,255,.14)' stroke-width='1.2'/%3E%3C/svg%3E"); }
@keyframes hbScales { to { background-position: 0 20px } }
/* 团花纹：八瓣金光依次流转一圈（opacity 逐瓣接力 = 转动的观感），金心呼吸（玄墨底金纹，第 9 本压轴） */
.book-h9 .hb-pat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='76' height='76'%3E%3Cg fill='none' stroke='rgba(232,192,90,.30)'%3E%3Ccircle cx='38' cy='38' r='19' stroke-width='1.6'/%3E%3Ccircle cx='38' cy='38' r='12' stroke-width='1.1' stroke='rgba(232,192,90,.22)'/%3E%3Cellipse cx='38' cy='38' rx='8' ry='3' stroke-width='1.2' stroke='rgba(232,192,90,.24)'/%3E%3Cellipse cx='38' cy='38' rx='3' ry='8' stroke-width='1.2' stroke='rgba(232,192,90,.24)'/%3E%3C/g%3E%3Cg fill='none' stroke='rgba(232,192,90,.55)' stroke-width='1.3'%3E%3Ccircle cx='38' cy='22.5' r='3.6' opacity='.4'%3E%3Canimate attributeName='opacity' values='.4;1;.4;.4' dur='6s' begin='0s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='49' cy='27' r='3.6' opacity='.4'%3E%3Canimate attributeName='opacity' values='.4;1;.4;.4' dur='6s' begin='0.75s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='53.5' cy='38' r='3.6' opacity='.4'%3E%3Canimate attributeName='opacity' values='.4;1;.4;.4' dur='6s' begin='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='49' cy='49' r='3.6' opacity='.4'%3E%3Canimate attributeName='opacity' values='.4;1;.4;.4' dur='6s' begin='2.25s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='38' cy='53.5' r='3.6' opacity='.4'%3E%3Canimate attributeName='opacity' values='.4;1;.4;.4' dur='6s' begin='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='27' cy='49' r='3.6' opacity='.4'%3E%3Canimate attributeName='opacity' values='.4;1;.4;.4' dur='6s' begin='3.75s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='22.5' cy='38' r='3.6' opacity='.4'%3E%3Canimate attributeName='opacity' values='.4;1;.4;.4' dur='6s' begin='4.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='27' cy='27' r='3.6' opacity='.4'%3E%3Canimate attributeName='opacity' values='.4;1;.4;.4' dur='6s' begin='5.25s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3Cg fill='none' stroke='rgba(232,192,90,.20)' stroke-width='1.2'%3E%3Ccircle cx='0' cy='0' r='10'/%3E%3Ccircle cx='76' cy='0' r='10'/%3E%3Ccircle cx='0' cy='76' r='10'/%3E%3Ccircle cx='76' cy='76' r='10'/%3E%3C/g%3E%3Ccircle cx='38' cy='38' r='2.6' fill='rgba(232,192,90,.36)'%3E%3Canimate attributeName='opacity' values='1;.4;1' dur='6s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E"); }

/* 书脊 · 线装订线（四眼装：孔 + 绕边线） */
.hb-spine { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: 14px;
  pointer-events: none;
  background-color: transparent;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='62'%3E%3Cpath d='M8.5 0 V62 M8.5 14 H0' stroke='rgba(255,255,255,.30)' stroke-width='1.4'/%3E%3Ccircle cx='8.5' cy='14' r='2' fill='rgba(255,255,255,.45)'/%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.12) 40%,
      rgba(255,255,255,.16) 78%, rgba(255,255,255,0) 100%);
  background-repeat: repeat-y, no-repeat;
  background-size: 14px 62px, 100% 100%; }

/* 右上折角 + 编号（折角纸色跟页面底色） */
.hb-corner { position: absolute; right: 0; top: 0; z-index: 3; width: 42px; height: 42px;
  pointer-events: none;
  background: linear-gradient(225deg, #f2ecdf 0%, #f2ecdf 49%, rgba(0,0,0,.18) 50%, transparent 54%);
  border-radius: 0 9px 0 0; }
.hb-corner b { position: absolute; right: 5px; top: 4px; color: #9a8a70;
  font-size: 10px; font-weight: 900; letter-spacing: .5px; }
[data-theme="dark"] .hb-corner { background: linear-gradient(225deg, #221c15 0%, #221c15 49%, rgba(0,0,0,.3) 50%, transparent 54%); }
[data-theme="dark"] .hb-corner b { color: #8b7d66; }

/* 未开放标签放右下角，别跟左上的阶段徽章打架（踩过：叠在一起字都糊了） */
.hb-flag { position: absolute; right: 12px; bottom: 14px; z-index: 4; padding: 2px 8px;
  border-radius: 999px; background: rgba(255,255,255,.92); color: #5c7291;
  font-size: 10px; font-weight: 900; }

/* 题签：线装书左上竖条书名 + 底端小印章 */
.hb-label { position: absolute; left: 20px; top: 0; z-index: 3; width: 23px;
  padding: 8px 0 7px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(245,240,228,.94); border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,.22); pointer-events: none; }
.hb-label i { writing-mode: vertical-rl; font-style: normal; color: #4c4434;
  font-size: 12.5px; font-weight: 900; letter-spacing: 3px; }
.hb-label s { width: 14px; height: 14px; display: grid; place-items: center;
  text-decoration: none; background: #c8232c; color: #fff; border-radius: 2.5px;
  font-size: 9px; font-weight: 900; line-height: 1; }

/* 鎏金书签带：正在学的那本才有 */
/* 鎏金书签：短短一截探出来就够（Alan：太长没用） */
.hb-ribbon { position: absolute; right: 52px; top: 0; z-index: 4; width: 9px; height: 20px;
  pointer-events: none;
  background: linear-gradient(180deg, #e8c05a 0%, #d9a83c 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.25); }

.hb-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column;
  align-items: flex-start; text-align: left; padding: 18px 17px 17px 52px; box-sizing: border-box; }
.hb-badge { display: inline-flex; align-items: center; min-height: 20px; padding: 0 10px;
  margin-top: auto; border-radius: 999px; background: rgba(245,240,228,.93); color: #4c4434;
  font-size: 10px; font-weight: 900; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.hb-series { margin-top: 14px; color: rgba(255,255,255,.82); font-size: 13px;
  font-weight: 900; letter-spacing: 7px; text-indent: 1px; }
.hb-number { margin-top: 1px; color: #fff; font-size: 56px; font-weight: 950; line-height: 1;
  text-shadow: 0 2px 7px rgba(0,0,0,.22); }
.hb-line { width: 32px; height: 1.5px; margin-top: 13px; border-radius: 999px;
  background: rgba(255,255,255,.45); }
.hb-meta { margin-top: 7px; color: rgba(255,255,255,.88); font-size: 11px;
  font-weight: 800; letter-spacing: .5px; }