/* ============================================================
 * 移动端 · 图书详情（themes/bookstack_cn/books/mobile/show.blade.php）
 * 严格对齐设计稿：Google Stitch / new2「书籍详情」
 *
 * 尺寸与字级直接取自设计稿的 tailwind.config：
 *   display-title 30/40 -0.01 600  | headline-lg 24/34 -0.005 600
 *   headline-md   20/28 600        | headline-sm 17/24 600
 *   body-ui       15/22 400        | body-ui-medium 15/22 500
 *   body-reading-md 16/28 .01 400  | quote-snippet 15/26 .02 400
 *   label-md 13/18 500 | label-sm 11/14 .02 500 | caption 12/16 400
 *   margin 16 / xs 4 / sm 8 / md 12 / lg 20 / xl 32
 *
 * 作用域 .bkd，不与 books.css 的 .book-detail-* 冲突
 * ============================================================ */

.bkd{
    --surface:#f9f9f8;
    --surface-lowest:#ffffff;
    --surface-low:#f3f4f3;
    --surface-container:#eeeeed;
    --surface-container-high:#e8e8e7;
    --surface-container-highest:#e2e2e2;
    --on-surface:#1a1c1c;
    --on-surface-variant:#45474a;
    --outline:#76777b;
    --outline-variant:#c6c6ca;
    --primary:#010101;
    --on-primary:#ffffff;
    --secondary:#89510f;
    --secondary-container:#feb46b;
    --on-secondary-container:#784400;
    --serif:"Noto Serif SC","Songti SC","Source Han Serif SC",Georgia,serif;
    --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Helvetica Neue",Arial,sans-serif;
    --shadow-sm:0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
    --shadow-xl:0 20px 25px -5px rgba(0,0,0,.18), 0 8px 10px -6px rgba(0,0,0,.12);

    width:100vw;
    margin-left:calc(50% - 50vw);
    background:var(--surface);
    color:var(--on-surface) !important; /* 防站点全局浅灰/白字洗掉正文对比度 */
    font-family:var(--sans);
    font-size:15px;
    line-height:22px;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    padding-bottom:88px; /* 给固定底部操作栏留位 */
}
.bkd *{box-sizing:border-box}
.bkd svg{display:block}
.bkd a{color:inherit;text-decoration:none}
.bkd button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bkd .ico{width:1em;height:1em;fill:currentColor;flex:none}
.bkd .ico--stroke{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bkd .ico--fill{fill:currentColor;stroke:none}

/* 站点自带顶栏/底栏与本页的固定栏重复，只在本页隐藏
 * 全局底栏真实类名是 footer.mobile-header-bottom / .mobile-nav（非 .bottom-nav）
 */
body:has(.bkd) header:not(.bkd-header),
body:has(.bkd) .mobile-header,
body:has(.bkd) #header,
body:has(.bkd) .bottom-nav,
body:has(.bkd) footer.mobile-header-bottom,
body:has(.bkd) .mobile-header-bottom,
body:has(.bkd) .mobile-nav,
body:has(.bkd) .tri-layout-mobile-tabs{display:none !important}
body:has(.bkd) .back-to-top{display:none !important}
body:has(.bkd) #content,
body:has(.bkd) #main-content,
body:has(.bkd) .tri-layout-middle,
body:has(.bkd) .tri-layout-middle-contents{
    padding-top:0 !important;
    margin-top:0 !important;
}

/* ---------- 顶栏（fixed h-14） ----------
 * 站点 mobile/header.css 对所有 header 写了 position:sticky !important，
 * 会让顶栏占文档流，再叠加 .bkd-main 的 pt-56，副栏被顶出一大截。
 * 必须用更高优先级 + !important 拉回 Stitch：fixed 顶栏 + main pt-14 + 副栏 py-8。
 * 同时压过全局 header 近白字色，避免分享/返回发白。
 * ---------- */
.bkd .bkd-header,
.bkd header.bkd-header{
    position:fixed !important;
    top:0 !important;left:0 !important;right:0 !important;z-index:50 !important;
    display:block !important;
    flex-direction:unset !important;
    height:auto !important;min-height:0 !important;width:100% !important;max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    padding-top:env(safe-area-inset-top) !important;
    background:rgba(249,249,248,.94) !important;
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    backdrop-filter:saturate(180%) blur(18px);
    color:var(--on-surface) !important;
    border:0 !important;border-bottom:0 !important;
    box-shadow:none !important;
    visibility:visible !important;opacity:1 !important;
}
.bkd-header__bar{height:56px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box}
.bkd-header__side{display:flex;align-items:center;gap:4px}
.bkd-header__side:first-child .bkd-iconbtn{margin-left:-8px} /* Stitch -ml-2 */
.bkd .bkd-iconbtn{
    width:44px;height:44px;display:flex;align-items:center;justify-content:center;
    border-radius:999px;font-size:20px;
    color:#1a1c1c !important; /* on-surface；压过 .bkd button{color:inherit} + 全局 header 白字 */
    transition:background .18s,transform .12s;
}
.bkd .bkd-iconbtn:hover{background:var(--surface-low)}
/* 书友感悟入口与数量徽标（与阅读页顶栏一致） */
.bkd .bkd-ideas-btn{position:relative}
.bkd .bkd-ideas-badge{
    position:absolute;top:2px;right:0;min-width:16px;height:14px;padding:0 4px;
    border-radius:999px;background:#b45309;color:#fff;
    font-size:9px;font-weight:700;line-height:14px;text-align:center;
}
.bkd .bkd-iconbtn:active{transform:scale(.95)}
.bkd .bkd-iconbtn .ico{
    color:#1a1c1c !important;
    fill:currentColor;
}
.bkd .bkd-iconbtn .ico--stroke{
    fill:none !important;
    stroke:#1a1c1c !important;
    color:#1a1c1c !important;
}
.bkd .bkd-iconbtn .ico--stroke use,
.bkd .bkd-iconbtn .ico--stroke *{
    fill:none !important;
    stroke:#1a1c1c !important;
}
.bkd-avatar{
    width:32px;height:32px;border-radius:999px;background:var(--primary);color:var(--on-primary) !important;
    display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:18px;margin-left:4px;flex:none;
}
.bkd-avatar img{width:100%;height:100%;object-fit:cover}
.bkd-avatar .ico{color:var(--on-primary) !important;fill:currentColor !important;stroke:none !important}

/* ---------- 内容起点：对齐 Stitch main.pt-14，刚好让出 fixed 顶栏 ---------- */
.bkd-main{padding-top:calc(56px + env(safe-area-inset-top));margin-top:0}

/* ---------- 副栏：Stitch py-space-sm = 8px，紧贴顶栏，不要额外空白 ---------- */
.bkd-subbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;margin:0;background:var(--surface)}
.bkd-subbar__note{display:flex;align-items:center;gap:4px;min-width:0;font-size:12px;line-height:16px;color:var(--on-surface-variant)}
.bkd-subbar__note .ico{font-size:16px;color:var(--secondary);flex:none}
.bkd-subbar__note span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bkd-subbar__act{margin:0;flex:none;display:inline-flex}
.bkd-shelf{
    display:inline-flex;align-items:center;gap:4px;flex:none;
    padding:4px 8px;border-radius:999px;background:var(--surface-container);
    font-size:11px;line-height:14px;letter-spacing:.02em;font-weight:500;color:var(--on-surface);
    transition:background .18s,color .18s,transform .12s;
}
.bkd-shelf .ico{font-size:14px}
.bkd-shelf:active{transform:scale(.95)}
/* 副栏「纠错」胶囊：图标与文字横排，文字用常规可读字号 */
.bkd-shelf--correction{padding:4px 10px;gap:5px}
.bkd-shelf--correction .ico{font-size:15px}
.bkd-shelf--correction span{font-size:11px;line-height:16px;letter-spacing:.02em;color:var(--on-surface-variant)}

/* ---------- 书封区 ---------- */
.bkd-hero{display:flex;flex-direction:column;align-items:center;padding:12px 16px 20px;text-align:center}
.bkd-coverwrap{position:relative;margin:4px 0}
.bkd-cover{
    position:relative;width:144px;aspect-ratio:1/1.414;border-radius:8px;overflow:hidden;
    background:var(--surface-container-highest);box-shadow:var(--shadow-xl);
}
.bkd-cover img{width:100%;height:100%;object-fit:cover;display:block}
.bkd-cover--ph{
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(158deg,#26272a,#17181a 46%,#0c0d0e);
    color:#e9dfc6;font-family:var(--serif);font-size:34px;font-weight:600;
}
.bkd-cover__spine{position:absolute;inset:0 auto 0 0;width:8px;background:linear-gradient(90deg,rgba(1,1,1,.25),transparent);pointer-events:none}
.bkd-cover__shadow{position:absolute;left:8px;right:8px;bottom:-12px;height:12px;border-radius:999px;background:rgba(1,1,1,.10);filter:blur(4px)}
.bkd-hero__meta{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:12px;max-width:20rem;width:100%}
.bkd-title{
    font-family:var(--serif);font-size:20px;line-height:28px;font-weight:600;
    letter-spacing:-.01em;margin:0;max-width:100%;
}
.bkd-byline{margin:4px 0 0;font-size:12px;line-height:16px;color:var(--on-surface-variant)}
.bkd-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:8px}
.bkd-tag{padding:2px 8px;border-radius:999px;background:var(--surface-container);font-size:11px;line-height:14px;letter-spacing:.02em;font-weight:500;color:var(--on-surface-variant)}
.bkd-tag--pub{background:var(--surface-container-high);color:var(--secondary)}
.bkd-tag--hl{background:var(--surface-container-high);color:var(--secondary)}

/* ---------- 评分 pills ---------- */
.bkd-rating{width:100%;margin-top:12px;display:flex;gap:8px}
.bkd-rating button{
    flex:1;padding:8px 12px;border-radius:999px;background:var(--surface-container);
    font-size:15px;line-height:22px;color:var(--on-surface);
    display:flex;align-items:center;justify-content:center;gap:4px;
    transition:background .18s,color .18s,transform .12s;
}
.bkd-rating button .n{font-size:12px;opacity:.75}
.bkd-rating button:hover{background:var(--surface-container-high)}
.bkd-rating button:active{transform:scale(.95)}
.bkd-rating button.is-on{background:var(--primary);color:var(--on-primary)}
.bkd-rating button.is-on .n{opacity:.8}

/* ---------- 推荐值 bento（卡片：padding / rounded / surface-low / shadow） ---------- */
.bkd-bento{
    width:100%;margin-top:8px;padding:12px;border-radius:12px;
    background:var(--surface-low);box-shadow:var(--shadow-sm);
    display:flex;flex-direction:column;gap:8px;
}
.bkd-bento__row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bkd-bento__value{display:flex;align-items:baseline;gap:4px}
.bkd-bento__value b{font-family:var(--serif);font-size:24px;line-height:34px;font-weight:600;letter-spacing:-.005em;color:var(--secondary)}
.bkd-bento__value span{font-size:12px;line-height:16px;color:var(--on-surface-variant)}
.bkd-bento__badge{
    display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:4px;
    background:rgba(254,180,107,.4);color:var(--on-secondary-container);
    font-size:11px;line-height:14px;letter-spacing:.02em;font-weight:500;
    max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bkd-bento__badge .ico{font-size:14px;flex:none;fill:currentColor}
.bkd-bar{width:100%;height:6px;border-radius:999px;background:var(--surface-container);overflow:hidden;margin:0}
.bkd-bar i{display:block;height:100%;border-radius:999px;background:var(--secondary)}
.bkd-bento__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:2px;font-size:12px;line-height:16px;color:var(--on-surface-variant)}
.bkd-bento__foot .more{display:inline-flex;align-items:center;gap:2px;flex:none;color:var(--on-surface)}
.bkd-bento__foot .more .ico{font-size:14px}

/* ---------- 特性 chips（三枚横滑） ---------- */
.bkd-chips{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:4px 16px;margin-top:4px;scrollbar-width:none}
.bkd-chips::-webkit-scrollbar{display:none}
.bkd-chip{
    display:inline-flex;align-items:center;gap:6px;flex:none;
    padding:6px 12px;border-radius:999px;background:var(--surface-container);
    font-size:12px;line-height:16px;color:var(--on-surface);
    border:0;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:transform .12s,opacity .18s;
}
.bkd-chip:active{transform:scale(.96);opacity:.85}
.bkd-chip .ico{font-size:16px}
.bkd-chip .is-gold{color:var(--secondary)}
.bkd-chip .is-blue{color:#4a7cff}
.bkd-chip .is-grey{color:var(--outline)}

/* ---------- 内容简介 ---------- */
.bkd-sec{padding:0 16px;margin-top:20px}
.bkd-card{background:var(--surface-lowest);border-radius:12px;padding:20px;box-shadow:var(--shadow-sm)}
.bkd-intro__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.bkd-intro__head h2{font-size:17px;line-height:24px;font-weight:600;margin:0}
.bkd-intro__head span{font-size:12px;line-height:16px;color:var(--on-surface-variant)}
.bkd-intro{
    font-family:var(--serif);font-size:16px;line-height:28px;letter-spacing:.01em;color:var(--on-surface-variant);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    transition:all .25s ease;
}
.bkd-intro.is-open{-webkit-line-clamp:unset;display:block}
.bkd-intro p{margin:0 0 .7em}
.bkd-intro p:last-child{margin-bottom:0}
.bkd-intro img{max-width:100%;height:auto;border-radius:8px}
/* Stitch: font-label-md + text-label-md + text-secondary；展开/收起同一套样式
 * 用 .bkd button.bkd-intro__toggle 压过 .bkd button{color/font-size:inherit} */
.bkd button.bkd-intro__toggle{
    display:inline-flex;align-items:center;gap:2px; /* gap-0.5 */
    margin-top:4px; /* mt-space-xs */
    font-family:var(--sans); /* label UI，非简介正文 serif */
    font-size:13px;line-height:18px;font-weight:500;letter-spacing:.01em; /* label-md */
    color:var(--secondary); /* #89510f */
}
.bkd button.bkd-intro__toggle .ico{
    font-size:16px;width:16px;height:16px;color:var(--secondary);transition:transform .2s;
}
.bkd button.bkd-intro__toggle[hidden]{display:none}

/* 目录概览行：Stitch mt-space-md + bg-surface-container-low + rounded-lg + p-space-md（无横杆）
 * 用 .bkd button.bkd-toc-preview + !important 压过 .bkd button{background:none} */
.bkd button.bkd-toc-preview{
    margin-top:12px; /* space-md */
    padding:12px; /* space-md */
    border-radius:8px; /* rounded-lg */
    background:var(--surface-low) !important; /* #f3f4f3 surface-container-low — beat .bkd button background:none */
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    text-align:left;
    color:inherit;
    border:0;
    box-sizing:border-box;
    transition:background .18s;
}
.bkd button.bkd-toc-preview:hover,
.bkd button.bkd-toc-preview:active{
    background:var(--surface-container) !important;
}
.bkd-toc-preview__main{min-width:0;flex:1;display:flex;flex-direction:column;padding-right:8px} /* pr-space-sm */
.bkd-toc-preview__title{font-size:13px;line-height:18px;font-weight:600} /* label-md 600 */
.bkd-toc-preview__desc{
    font-size:12px;line-height:16px; /* caption */
    color:var(--on-surface-variant);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    margin-top:2px; /* mt-0.5 */
}
.bkd-toc-preview__meta{
    display:flex;align-items:center;gap:4px; /* gap-1 */
    flex:none;font-size:12px;line-height:16px;color:var(--on-surface-variant);
}
.bkd-toc-preview__meta .ico{font-size:16px;width:16px;height:16px} /* chevron_right 16px */

.bkd-toc-sheet{position:fixed;inset:0;z-index:55}
.bkd-toc-sheet[hidden]{display:none !important}
.bkd-toc-sheet__mask{position:absolute;inset:0;width:100%;height:100%;background:rgba(26,28,28,.4);border:0;padding:0;cursor:pointer}
.bkd-toc-sheet__panel{
    position:absolute;left:0;right:0;bottom:0;max-height:80vh;overflow:auto;
    -webkit-overflow-scrolling:touch;
    background:var(--surface-lowest);border-radius:12px 12px 0 0;
    padding:20px 16px calc(20px + env(safe-area-inset-bottom));
    box-shadow:var(--shadow-xl);
}
.bkd-toc-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.bkd-toc-sheet__head h3{font-size:17px;line-height:24px;font-weight:600;margin:0} /* headline-sm */
.bkd-toc-sheet__close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin-right:-12px;font-size:20px;color:var(--on-surface)}
.bkd-toc-sheet__close .ico{width:20px;height:20px}
.bkd-toc-sheet__meta{margin:0 0 12px;font-size:12px;line-height:16px;color:var(--on-surface-variant)} /* caption */
.bkd-toc-sheet__list{display:flex;flex-direction:column}
.bkd-toc-group{display:flex;flex-direction:column}
.bkd-toc-item{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 0;border-bottom:1px solid var(--outline-variant)}
.bkd-toc-sheet__list > .bkd-toc-item:last-child,
.bkd-toc-sheet__list > .bkd-toc-group:last-child .bkd-toc-item:last-child{border-bottom:0}
.bkd-toc-item__name{font-size:15px;line-height:22px;font-weight:500} /* body-ui-medium */
.bkd-toc-item__count{font-size:12px;line-height:16px;color:var(--on-surface-variant);flex:none}
.bkd-toc-item--pg{font-size:15px;line-height:22px;padding-left:12px;color:var(--on-surface-variant)}
.bkd-toc-item--ch .bkd-toc-item__name{color:var(--on-surface)}

/* ---------- 金句 / 摘录（Stitch §全书最热划线 126–147） ----------
 * section: px-margin 16 + mt-space-md 12
 * card: p-space-lg 20 / rounded-xl 12 / surface-container-low / shadow-sm / overflow hidden
 * mark: always on; -right-4 -top-6 / 110px / surface-container-highest / opacity .4
 * stack: gap-space-sm 8; label gap-2 8; foot pt-space-xs 4
 * label: format_quote 18 + label-sm 11/14 tracking-wider uppercase semibold secondary
 * copy: 「人画线」(Stitch literal); quote-snippet Noto Serif 15/26; body pr clears mark
 * foot: src flex1 ellipsis; act flex-none edit_note 15 + label-sm gap-1
 * ---------- */
.bkd-quote-sec{padding:0 16px;margin-top:12px} /* px-margin + mt-space-md */
.bkd-quote{position:relative;overflow:hidden;padding:20px;border-radius:12px;background:var(--surface-lowest);box-shadow:var(--shadow-sm)} /* 与 .bkd-card 一致的卡片底色 */
.bkd-quote__mark{
    position:absolute;right:-16px;top:-24px; /* -right-4 -top-6 */
    font-family:var(--serif); /* font-headline-lg */
    font-size:110px;line-height:1;
    color:var(--surface-container-highest); /* #e2e2e2 */
    opacity:.4;pointer-events:none;user-select:none;
}
.bkd-quote__inner{position:relative;z-index:10;display:flex;flex-direction:column;gap:8px} /* z-10 + gap-space-sm */
.bkd-quote__label{
    display:flex;align-items:center;gap:8px; /* gap-2 */
    font-size:11px;line-height:14px;letter-spacing:.05em; /* label-sm + tracking-wider */
    text-transform:uppercase;font-weight:600; /* uppercase + font-semibold */
    color:var(--secondary); /* #89510f */
}
.bkd-quote__label .ico{width:18px;height:18px;font-size:18px;color:var(--secondary)} /* format_quote 18 */
.bkd-quote__text{
    font-family:var(--serif); /* font-quote-snippet */
    font-size:15px;line-height:26px;letter-spacing:.02em;font-weight:400; /* quote-snippet */
    margin:0;padding:0 28px 0 0;quotes:none;border:0; /* pr clears decorative “ */
    background:transparent; /* 取消核心 blockquote 的 #f8f8f8 灰白底色 */
    overflow:visible;
    color:var(--on-surface); /* #1a1c1c */
}
blockquote.bkd-quote__text::before,
blockquote.bkd-quote__text::after{content:none;quotes:none}
.bkd-quote__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:4px} /* pt-space-xs + justify-between */
.bkd-quote__src{
    min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:12px;line-height:16px;font-weight:400;color:var(--on-surface-variant); /* caption #45474a */
}
.bkd-quote__act{
    flex:none;flex-shrink:0;
    display:inline-flex;align-items:center;gap:4px; /* gap-1 */
    font-size:11px;line-height:14px;letter-spacing:.02em;font-weight:500; /* label-sm */
    color:var(--secondary);
    transition:transform .12s;
}
.bkd-quote__act .ico{width:15px;height:15px;font-size:15px;color:var(--secondary)} /* edit_note 15 */
.bkd-quote__act:active{transform:scale(.95)}

/* ---------- 书评（Stitch 148–260） ----------
 * section: px-margin 16 + mt-space-lg 20 + gap-space-md 12
 * headline-sm 17/24 600；caption 12/16；label-md 13/18；body-ui 15/22
 * card: p-space-md 12 / rounded-xl 12 / surface-lowest / shadow-sm / gap-space-sm 8
 * ava: 40px；badge label-sm 11/14；foot caption + gap-space-lg 20
 * ---------- */
.bkd-sechead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px} /* gap-space-md */
.bkd-sechead__left{display:flex;align-items:baseline;gap:4px;min-width:0} /* gap-space-xs */
.bkd-sechead__right{display:flex;align-items:center;gap:12px;flex:none} /* gap-space-md */
.bkd-sechead h2{font-size:17px;line-height:24px;font-weight:600;margin:0} /* headline-sm */
.bkd-sechead .sub{font-size:12px;line-height:16px;color:var(--on-surface-variant)} /* caption */
.bkd-write-cta{font-size:13px;line-height:18px;font-weight:500;color:var(--secondary)} /* label-md secondary */
.bkd-sort{display:inline-flex;align-items:center;gap:2px;font-size:13px;line-height:18px;font-weight:500;color:var(--secondary)} /* label-md + gap-0.5 */
.bkd-sort i{font-style:normal;color:var(--outline-variant)} /* #c6c6ca */
.bkd-sort b,.bkd-sort [data-key].font-semibold{font-weight:600;color:var(--on-surface)} /* selected */

.bkd-review-list{display:flex;flex-direction:column;gap:12px} /* gap-space-md */
.bkd-review{position:relative;padding:12px;border-radius:12px;background:var(--surface-lowest);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px} /* p-space-md / rounded-xl / gap-space-sm */
.bkd-review__head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px}
.bkd-review__who{display:flex;align-items:center;gap:8px;min-width:0} /* gap-space-sm */
.bkd-ava{width:40px;height:40px;border-radius:999px;overflow:hidden;background:var(--surface-container);flex:none; /* ava 40 */
    display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;font-weight:600;color:var(--on-surface-variant)}
.bkd-ava img{width:100%;height:100%;object-fit:cover}
.bkd-review__name{display:flex;align-items:center;gap:6px;font-size:15px;line-height:22px;font-weight:600} /* body-ui-medium + gap-1.5 */
.bkd-review__badge{padding:1px 6px;border-radius:4px;background:var(--surface-container);font-size:11px;line-height:14px;font-weight:500;color:var(--on-surface-variant)} /* label-sm */
.bkd-review__badge--high{background:var(--surface-container-high)} /* surface-container-high */
.bkd-review__meta{display:flex;align-items:center;gap:2px;margin-top:2px;font-size:12px;line-height:16px;color:var(--on-surface-variant)} /* caption */
.bkd-review__meta .ico{font-size:13px;color:var(--secondary)}
.bkd-review__meta .when{margin-left:4px} /* ml-1 */
.bkd-stars{display:flex;align-items:center;gap:1px;color:var(--secondary)}
.bkd-stars .ico{width:13px;height:13px}
.bkd-review__more{color:var(--outline);font-size:18px;padding:4px}
.bkd-review__body{font-size:15px;line-height:22px;color:var(--on-surface);margin:4px 0 0} /* body-ui + mt-1 */
.bkd-review__quote{
    padding:10px;border-radius:8px;background:var(--surface-low); /* p-2.5 / rounded-lg / surface-container-low */
    display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:16px;color:var(--on-surface-variant); /* caption */
}
.bkd-review__quote .ico{font-size:16px;width:16px;height:16px;color:var(--secondary);margin-top:1px;flex:none}
.bkd-review__quote span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bkd-review__foot{display:flex;align-items:center;justify-content:space-between;padding-top:4px;font-size:12px;line-height:16px;color:var(--on-surface-variant)} /* pt-space-xs + caption */
.bkd-review__acts{display:flex;align-items:center;gap:20px} /* gap-space-lg */
.bkd-review__acts button,.bkd-review__acts a,.bkd-review__save{display:inline-flex;align-items:center;gap:4px;transition:color .15s,transform .12s}
.bkd-review__acts button .ico,.bkd-review__acts a .ico,.bkd-review__save .ico{font-size:17px;width:17px;height:17px}
.bkd-review__acts button:active,.bkd-review__acts a:active,.bkd-review__save:active{transform:scale(.9)}
.bkd-review__acts button.is-liked,.bkd-review__acts button.is-on{color:var(--secondary)}
.bkd-review__save.is-on{color:var(--secondary)}
.bkd-more-menu{
    position:absolute;right:0;top:36px;z-index:3;
    display:flex;flex-direction:column;min-width:120px;
    padding:8px 0;border-radius:8px;background:var(--surface-lowest);
    box-shadow:var(--shadow-sm);border:1px solid var(--outline-variant);
}
.bkd-more-menu[hidden]{display:none !important}
.bkd-more-menu a,.bkd-more-menu button{
    padding:8px 12px;text-align:left;font-size:13px;line-height:18px;color:var(--on-surface);
}

/* 空态：无书评时 CTA（非 mock） */
.bkd-empty{
    padding:24px 16px;border-radius:12px;background:var(--surface-lowest);box-shadow:var(--shadow-sm);
    display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
}
.bkd-empty__title{margin:0;font-size:15px;line-height:22px;font-weight:600;color:var(--on-surface)} /* body-ui-medium */
.bkd-empty__desc{margin:0;font-size:12px;line-height:16px;color:var(--on-surface-variant);max-width:240px} /* caption */
.bkd-empty__cta{
    margin-top:8px;padding:8px 16px;border-radius:999px;background:var(--primary);color:var(--on-primary);
    font-size:13px;line-height:18px;font-weight:500; /* label-md */
}
.bkd-empty__cta:active{transform:scale(.95)}

/* 写书评 / 回复 sheet */
.bkd-composer{position:fixed;inset:0;z-index:10020}
.bkd-composer[hidden]{display:none !important}
.bkd-composer__mask{position:absolute;inset:0;background:rgba(26,28,28,.4);border:0;padding:0}
.bkd-composer__panel{
    position:absolute;left:0;right:0;bottom:0;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius:16px 16px 0 0;background:var(--surface-lowest);
    box-shadow:var(--shadow-xl);display:flex;flex-direction:column;gap:12px; /* gap-space-md */
    transform:translateY(8px);opacity:0;transition:transform .2s ease,opacity .2s ease;
}
.bkd-composer.is-on .bkd-composer__panel{transform:translateY(0);opacity:1}
.bkd-composer__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bkd-composer__head h3{margin:0;font-size:17px;line-height:24px;font-weight:600} /* headline-sm */
.bkd-composer__close{padding:4px;color:var(--on-surface-variant)}
.bkd-composer__close .ico{width:22px;height:22px;font-size:22px}
.bkd-composer__input{
    width:100%;min-height:120px;padding:12px;border-radius:12px;resize:vertical;
    border:1px solid var(--outline-variant);background:var(--surface-low);
    font-size:15px;line-height:22px;color:var(--on-surface); /* body-ui + p-space-md */
}
.bkd-composer__input:focus{outline:none;border-color:var(--secondary)}
.bkd-composer__foot{display:flex;justify-content:flex-end}
.bkd-composer__submit{
    padding:10px 20px;border-radius:999px;background:var(--primary);color:var(--on-primary);
    font-size:15px;line-height:22px;font-weight:500; /* body-ui-medium */
}
.bkd-composer__submit:disabled{opacity:.5}
.bkd-composer__submit:active{transform:scale(.96)}
.bkd .bkd-quote__act{border:0;background:transparent;cursor:pointer;font:inherit}

/* ---------- 相关推荐（Stitch 261–308） ----------
 * section: mt-space-xl 32；head px-margin 16 + mb-space-sm 8
 * carousel: gap-space-md 12 + px-margin 16；card w-24 96；cover aspect 1/1.414
 * name body-ui-medium；author caption；rate label-sm secondary
 * ---------- */
.bkd-related{margin-top:32px} /* space-xl */
.bkd-related .bkd-sechead{padding:0 16px;margin-bottom:8px} /* px-margin + mb-space-sm */
.bkd-related__link{display:inline-flex;align-items:center;gap:2px;font-size:12px;line-height:16px;color:var(--secondary)} /* caption secondary */
.bkd-related__link .ico{font-size:14px;width:14px;height:14px}
.bkd-carousel{display:flex;gap:12px;overflow-x:auto;padding:4px 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch} /* gap-space-md + px-margin */
.bkd-carousel::-webkit-scrollbar{display:none}
.bkd-mini{width:96px;flex:none;display:flex;flex-direction:column} /* w-24 */
.bkd-mini__cover{
    width:96px;aspect-ratio:1/1.414;border-radius:6px;overflow:hidden;background:var(--surface-container); /* rounded-md */
    box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;
    transition:transform .16s;
}
.bkd-mini__cover img{width:100%;height:100%;object-fit:cover;display:block}
.bkd-mini:active .bkd-mini__cover{transform:scale(.95)}
.bkd-mini__ph{font-family:var(--serif);font-size:28px;font-weight:600;color:#fff;background:linear-gradient(158deg,#3a3b3e,#1b1c1e)}
.bkd-mini:nth-child(4n+2) .bkd-mini__ph:not(.bkd-mini__ph--mock){background:linear-gradient(158deg,#2b3b52,#16202e)}
.bkd-mini:nth-child(4n+3) .bkd-mini__ph:not(.bkd-mini__ph--mock){background:linear-gradient(158deg,#3b463c,#232c25)}
.bkd-mini:nth-child(4n+4) .bkd-mini__ph:not(.bkd-mini__ph--mock){background:linear-gradient(158deg,#4a3a2e,#2c221a)}
.bkd-mini__ph--mock{background:var(--surface-container);color:var(--on-surface-variant);box-shadow:none} /* grey placeholder */
.bkd-mini__name{font-size:15px;line-height:22px;font-weight:500;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* body-ui-medium + mt-1.5 */
.bkd-mini__author{font-size:12px;line-height:16px;color:var(--on-surface-variant);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* caption */
.bkd-mini__rate{font-size:11px;line-height:14px;font-weight:500;color:var(--secondary);margin-top:2px} /* label-sm secondary */

/* ---------- 底部操作栏（Stitch 309–312：fixed h-16 / surface/92 blur） ----------
 * bar: h-16 64 / px-margin 16 / gap-space-md 12
 * shelf: min-w 56 / icon 24 / label-sm 11/14
 * audio: 44×44 circle surface-container / icon 22
 * CTA: flex-1 h-11 44 / rounded-full / primary #010101 / body-ui-medium / icon 20
 * 用 .bkd .bkd-dock … 更高特异性压过 .bkd button{background:none}
 * ---------- */
.bkd-dock{
    position:fixed;left:0;right:0;bottom:0;z-index:10000; /* 压过全局 .mobile-header-bottom(9998) */
    background:rgba(249,249,248,.92); /* surface/92 */
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    backdrop-filter:saturate(180%) blur(20px); /* backdrop-blur-xl */
    padding-bottom:env(safe-area-inset-bottom); /* pb-safe */
}
.bkd-dock__bar{height:64px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:12px} /* h-16 + px-margin + gap-space-md */
.bkd .bkd-dock .bkd-dock__shelf,
.bkd .bkd-dock button.bkd-dock__shelf,
.bkd .bkd-dock a.bkd-dock__shelf{
    display:flex;flex-direction:row;align-items:center;justify-content:center;
    flex:none;gap:6px;height:40px;padding:0 12px;border-radius:999px;
    background:var(--surface-container); /* 与听书圆钮同一层级，做成次级胶囊 */
    font-size:12px;line-height:16px;letter-spacing:.02em;font-weight:500;
    color:var(--on-surface);transition:background .18s,transform .12s;
}
.bkd .bkd-dock .bkd-dock__shelf .ico{font-size:20px;width:20px;height:20px}
.bkd .bkd-dock .bkd-dock__shelf span{white-space:nowrap}
.bkd .bkd-dock .bkd-dock__shelf.is-on{background:var(--surface-container-high)}
.bkd .bkd-dock .bkd-dock__shelf.is-on .ico{color:var(--secondary)}
.bkd .bkd-dock .bkd-dock__shelf:hover{background:var(--surface-container-high)}
.bkd .bkd-dock .bkd-dock__shelf:active{transform:scale(.96)}
.bkd .bkd-dock a.bkd-dock__audio{
    width:44px;height:44px;border-radius:999px;background:var(--surface-container); /* w-11 h-11 */
    display:flex;align-items:center;justify-content:center;flex:none;
    color:var(--on-surface);transition:background .18s,transform .12s;
}
.bkd .bkd-dock a.bkd-dock__audio:hover{background:var(--surface-container-high)}
.bkd .bkd-dock a.bkd-dock__audio:active{transform:scale(.9)}
.bkd .bkd-dock a.bkd-dock__audio .ico{font-size:22px;width:22px;height:22px}
.bkd .bkd-dock a.bkd-dock__cta{
    flex:1;height:44px;border-radius:999px; /* h-11 rounded-full */
    background:var(--primary) !important; /* #010101 — beat .bkd button / global resets */
    color:var(--on-primary) !important;
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:15px;line-height:22px;font-weight:500; /* body-ui-medium */
    box-shadow:0 4px 10px -4px rgba(0,0,0,.5);transition:transform .12s,opacity .18s;
}
.bkd .bkd-dock a.bkd-dock__cta:active{transform:scale(.98);opacity:.92}
.bkd .bkd-dock a.bkd-dock__cta .ico{font-size:20px;width:20px;height:20px;color:var(--on-primary)}

/* ---------- toast ---------- */
.bkd-toast{
    position:fixed;top:80px;left:50%;z-index:60;
    transform:translate(-50%,8px);opacity:0;pointer-events:none;
    display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
    background:var(--primary);color:var(--on-primary);font-size:15px;line-height:22px;font-weight:500;
    box-shadow:0 10px 24px -14px rgba(0,0,0,.9);
    transition:opacity .22s ease,transform .22s ease;max-width:calc(100vw - 48px);white-space:nowrap;
}
.bkd-toast.is-on{opacity:1;transform:translate(-50%,0)}
.bkd-toast .ico{font-size:18px;color:var(--secondary-container)}

/* ---------- 深色模式 ---------- */
html.dark-mode .bkd{
    --surface:#121212;--surface-lowest:#1c1c1c;--surface-low:#232323;--surface-container:#2a2a2a;
    --surface-container-high:#333;--surface-container-highest:#3a3a3a;
    --on-surface:#e8e6e3;--on-surface-variant:#a9a7a3;--outline:#7d7b78;--outline-variant:#3d3d3d;
    --primary:#e8e6e3;--on-primary:#121212;--secondary:#e0a86a;--secondary-container:#7a5320;--on-secondary-container:#f0c08a;
    --shadow-sm:none;--shadow-xl:0 10px 20px -12px rgba(0,0,0,.8);
}
html.dark-mode .bkd .bkd-header,
html.dark-mode .bkd header.bkd-header{background:rgba(18,18,18,.94) !important;color:var(--on-surface) !important}
html.dark-mode .bkd .bkd-iconbtn,
html.dark-mode .bkd .bkd-iconbtn .ico,
html.dark-mode .bkd .bkd-iconbtn .ico--stroke{
    color:var(--on-surface) !important;
}
html.dark-mode .bkd .bkd-iconbtn .ico--stroke,
html.dark-mode .bkd .bkd-iconbtn .ico--stroke use,
html.dark-mode .bkd .bkd-iconbtn .ico--stroke *{
    fill:none !important;
    stroke:var(--on-surface) !important;
}
html.dark-mode .bkd-dock{background:rgba(18,18,18,.92)}
html.dark-mode .bkd-bento__badge{background:rgba(224,168,106,.18);color:var(--secondary)}
html.dark-mode .bkd-cover--ph{background:linear-gradient(158deg,#2c2d30,#1a1b1d)}
html.dark-mode .bkd-avatar{background:#e8e6e3;color:#121212}

@media (prefers-reduced-motion:reduce){
    .bkd *{transition:none !important;animation:none !important}
}