/* Nox · 一起看书（共读小说播放器）
 * 色彩全部由 --th-bg / --th-ink / --accent 派生，深浅主题与壁纸自动跟随。 */
#reader-board{position:fixed;inset:0;z-index:94;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:var(--th-bg);color:var(--th-ink);isolation:isolate}
#reader-root{
  --rd-ink:var(--th-ink);
  --rd-soft:color-mix(in srgb,transparent 34%,var(--th-ink));
  --rd-faint:color-mix(in srgb,transparent 62%,var(--th-ink));
  --rd-line:color-mix(in srgb,transparent 80%,var(--th-ink));
  --rd-panel:color-mix(in srgb,var(--th-bg) 78%,transparent);
  --rd-panel-strong:color-mix(in srgb,var(--th-bg) 90%,rgb(var(--accent-rgb)) 10%);
  --rd-paper:color-mix(in srgb,var(--th-bg) 92%,rgb(var(--accent-rgb)) 3%);
  --rd-accent:var(--accent);
  --rd-reader-ink:var(--text,var(--th-ink));
  --rd-bubble-r:color-mix(in srgb,var(--rd-paper) 78%,rgb(var(--accent-rgb)) 12%);
  --rd-bubble-k:color-mix(in srgb,var(--rd-paper) 82%,var(--tool,var(--accent)) 10%);
  position:relative;width:100%;height:100%;opacity:0;transform:scale(1.015);
  transition:opacity .26s ease,transform .4s cubic-bezier(.2,.75,.2,1);
  background:var(--rd-paper);
}
#reader-root.visible{opacity:1;transform:scale(1)}
body[data-theme="light"] #reader-root{
  --rd-soft:color-mix(in srgb,transparent 26%,var(--th-ink));
  --rd-faint:color-mix(in srgb,transparent 52%,var(--th-ink));
  --rd-line:color-mix(in srgb,transparent 74%,var(--th-ink));
  --rd-panel:color-mix(in srgb,var(--th-bg) 70%,transparent);
  --rd-paper:color-mix(in srgb,var(--th-bg) 94%,rgb(var(--accent-rgb)) 4%);
}
.rd-backdrop{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 82% -4%,rgba(var(--accent-rgb),.14),transparent 42%),
  radial-gradient(circle at 8% 104%,rgba(var(--accent-rgb),.10),transparent 46%)}

/* ───────── 书架 ───────── */
.rd-shelf{position:absolute;inset:0;z-index:2;display:grid;grid-template-rows:auto minmax(0,1fr);
  width:min(100%,680px);margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 18px max(env(safe-area-inset-bottom,0px),12px)}
.rd-shelf-head{min-height:58px;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px}
.rd-shelf-heading{text-align:center;display:flex;flex-direction:column;align-items:center}
.rd-shelf-heading small{font:600 9px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.26em;color:var(--rd-faint)}
.rd-shelf-heading strong{margin-top:3px;font:600 18px/1.2 var(--font-chat)}
.rd-icon-btn{min-width:44px;min-height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--rd-ink);border:1px solid var(--rd-line);
  background:color-mix(in srgb,var(--rd-panel) 88%,transparent);
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);touch-action:manipulation}
.rd-import-btn{font-size:19px;color:var(--rd-accent)}
.rd-shelf-body{overflow-y:auto;padding:14px 2px calc(env(safe-area-inset-bottom,0px) + 30px);display:flex;flex-direction:column;gap:12px}
.rd-empty{margin-top:16vh;text-align:center;color:var(--rd-faint);font:400 14px/2 var(--font-chat)}
.rd-empty small{font-size:12px;color:var(--rd-faint)}
.rd-empty-icon{display:block;font-size:26px;margin-bottom:10px;color:var(--rd-accent);opacity:.75}
.rd-book{position:relative;display:flex;align-items:center;gap:14px;text-align:left;
  padding:13px 40px 13px 13px;border-radius:18px;border:1px solid var(--rd-line);
  background:color-mix(in srgb,var(--rd-panel) 92%,transparent);
  box-shadow:0 10px 30px color-mix(in srgb,transparent 82%,var(--th-bg));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.rd-book:active{transform:scale(.985)}
.rd-cover{position:relative;flex:0 0 52px;height:70px;border-radius:8px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(150deg,rgba(var(--accent-rgb),.28),color-mix(in srgb,var(--th-bg) 70%,rgb(var(--accent-rgb)) 12%));
  border:1px solid color-mix(in srgb,transparent 66%,rgb(var(--accent-rgb)));
  box-shadow:inset 2px 0 0 rgba(var(--accent-rgb),.5)}
.rd-cover b{font:600 22px/1 var(--font-chat);color:var(--rd-ink);text-shadow:0 1px 8px color-mix(in srgb,transparent 50%,var(--th-bg))}
.rd-cover i{position:absolute;left:0;bottom:0;width:3px;background:var(--rd-accent);opacity:.9;border-radius:0 2px 2px 0;transition:height .4s ease}
/* 导入的书有真封面就铺上去，首字退场；没有封面的书保持原样 */
.rd-cover.has-cover{background-size:cover;background-position:center;background-repeat:no-repeat}
.rd-cover.has-cover b{display:none}
.rd-book-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.rd-book-info strong{font:600 15.5px/1.35 var(--font-chat);color:var(--rd-ink);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rd-book-info em{font:400 11.5px/1.2 var(--font-chat);font-style:normal;color:var(--rd-soft)}
.rd-book-info small{font-size:11px;color:var(--rd-faint)}
.rd-book-info .rd-ann-count{color:color-mix(in srgb,var(--rd-accent) 80%,var(--th-ink))}
.rd-book-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.rd-book-actions button{min-height:28px;padding:0 10px;border-radius:9px;
  font:500 10.5px/1 var(--font-chat);color:var(--rd-soft);
  border:1px solid var(--rd-line);background:var(--rd-panel)}
.rd-book-actions button[data-open-mode="coread"]{color:var(--rd-accent);
  background:color-mix(in srgb,transparent 88%,rgb(var(--accent-rgb)))}
.rd-book-del{position:absolute;right:6px;top:6px;width:30px;height:30px;display:grid;place-items:center;
  border-radius:50%;font-size:15px;color:var(--rd-faint)}
.rd-book-del:active{color:var(--danger)}

/* ───────── 阅读页 ───────── */
.rd-read{position:absolute;inset:0;z-index:3;background:var(--rd-paper)}
.rd-read.hidden{display:none}
#reader-root[data-reader-bg="paper"] .rd-read{background:
  repeating-linear-gradient(0deg,transparent 0 30px,color-mix(in srgb,transparent 96%,var(--rd-ink)) 30px 31px),
  color-mix(in srgb,var(--rd-paper) 96%,var(--rd-accent) 2%)}
/* 自定义背景单独铺一层伪元素：模糊只作用在背景上，正文不受影响。
   遮罩和图放在同一层里一起糊——纯色糊了看不出差别，却省掉一个会盖住正文的 ::after。
   ::before 在所有子元素之前绘制，所以不会挡住阅读区。 */
#reader-root[data-reader-bg="custom"] .rd-read{background-image:none}
#reader-root[data-reader-bg="custom"] .rd-read::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(color-mix(in srgb,var(--rd-paper) var(--rd-bg-mask,20%),transparent),
                    color-mix(in srgb,var(--rd-paper) var(--rd-bg-mask,20%),transparent)),
    var(--rd-custom-bg);
  background-size:cover;background-position:center;
  filter:blur(var(--rd-bg-blur,0px));transform:scale(var(--rd-bg-scale,1))}
.rd-chrome{position:absolute;left:0;right:0;z-index:6;display:flex;align-items:center;gap:10px;
  background:color-mix(in srgb,var(--rd-paper) 82%,transparent);
  backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);
  transition:transform .3s cubic-bezier(.2,.75,.2,1),opacity .26s ease}
.rd-top{top:0;padding:calc(env(safe-area-inset-top,0px) + 6px) 12px 8px;border-bottom:1px solid var(--rd-line)}
.rd-top.rd-hide{transform:translateY(-110%);opacity:0;pointer-events:none}
.rd-now{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.rd-now strong{font:600 17px/1.3 var(--font-chat);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 一起读时常驻顶栏：绑的是哪个对话要看得见、点得到 */
.rd-now [data-rd-bind-chat]{align-self:flex-start;margin-top:3px;padding:2px 8px;border-radius:8px;
  max-width:100%;font:500 10.5px/1.3 var(--font-chat);color:var(--rd-accent);
  background:color-mix(in srgb,transparent 88%,rgb(var(--accent-rgb)));
  border:1px solid color-mix(in srgb,transparent 70%,rgb(var(--accent-rgb)));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-now [data-rd-bind-chat].hidden{display:none}
.rd-pct{flex:0 0 auto;font:500 11px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:.04em;color:var(--rd-faint);font-variant-numeric:tabular-nums}
.rd-bottom{bottom:0;justify-content:space-around;
  padding:10px 18px calc(env(safe-area-inset-bottom,0px) + 10px);border-top:1px solid var(--rd-line)}
.rd-bottom.rd-hide{transform:translateY(110%);opacity:0;pointer-events:none}
.rd-bottom button{min-width:52px;min-height:42px;border-radius:14px;font-size:21px;color:var(--rd-soft);
  display:inline-flex;align-items:center;justify-content:center;gap:3px;touch-action:manipulation}
.rd-bottom button:active{color:var(--rd-accent)}
.rd-bottom .rd-aa{font:600 15px/1 var(--font-chat)}
.rd-bottom [data-rd-toc-btn] i{display:block;width:16px;height:1.6px;border-radius:2px;background:currentColor;margin:2px 0}
.rd-bottom [data-rd-toc-btn]{flex-direction:column}

.rd-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;overflow-anchor:none}
.rd-content{--rd-fs:18px;--rd-lh:1.9;--rd-pad:24px;--rd-ti:2em;--rd-ls:0em;--rd-ws:0em;
  max-width:620px;margin:0 auto;
  padding:var(--rd-top-pad,calc(env(safe-area-inset-top,0px) + 64px)) var(--rd-pad) 30px;
  font-size:var(--rd-fs);line-height:var(--rd-lh);color:var(--rd-reader-ink);
  letter-spacing:var(--rd-ls);word-spacing:var(--rd-ws);
  /* 阴影跟着字色走：改正文字色时阴影一起变，标题用主题色则阴影跟主题色 */
  text-shadow:0 1px 2px color-mix(in srgb,transparent 82%,currentColor)}
/* 横向滑动由 JS 接管：原生滚动带惯性，一甩好几页还会停在半页上，
   而且完全绕过翻页动画。这里关掉原生滚动，scrollLeft 仍可由脚本设置。 */
.rd-scroll[data-flow="page"]{overflow:hidden;touch-action:pan-y;scroll-behavior:auto}
.rd-scroll[data-flow="page"] .rd-content{box-sizing:border-box;width:100%;max-width:none;height:100%;margin:0;
  padding:var(--rd-top-pad,calc(env(safe-area-inset-top,0px) + 64px)) var(--rd-pad) calc(env(safe-area-inset-bottom,0px) + 72px);
  /* 列宽按滚动容器实测算（JS 写 --rd-col-w），不能用 100vw：
     padding、safe-area、滚动条都会让视口宽和容器宽对不上，翻页就会越翻越歪 */
  column-width:var(--rd-col-w,calc(100vw - 56px));column-gap:var(--rd-page-gap,56px);column-fill:auto}
/* 顶部留白固定：工具条是浮在正文之上淡入淡出的，收栏时绝不能改正文的 padding，
   否则每点一下屏幕正文就整体跳一次。位置取工具条正下方留一点空隙。 */
.rd-scroll[data-flow="page"] .rd-ch-heading{break-after:avoid-column}
.rd-scroll[data-flow="page"] .rd-figure{break-inside:avoid-column}
.rd-scroll[data-flow="page"] .rd-more{display:none}

/* 选「无动画」时页面是瞬间切的，给平移补一点过渡；
   选了翻转/推移则必须瞬切，让上面的动画层去演，否则两个动作会打架 */
#reader-root[data-page-anim="none"] .rd-scroll[data-flow="page"] .rd-content{
  transition:transform .26s cubic-bezier(.3,.1,.2,1)}

/* ── 翻页动画：克隆当前页盖上去演，演完即弃 ── */
.rd-anim{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.rd-anim-flip{perspective:1700px}
.rd-anim-page{position:absolute;inset:0;transform-style:preserve-3d;
  box-shadow:0 0 30px color-mix(in srgb,transparent 58%,var(--th-ink))}
/* 正反面都得不透明，否则翻到一半会透出底下那一页 */
.rd-anim-face{position:absolute;inset:0;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;background:var(--rd-paper)}
/* 正面借用 .rd-scroll[data-flow=page] 让多列样式命中，但不要它的滚动 */
.rd-anim-page .rd-anim-face.rd-scroll{overflow:hidden;touch-action:none}
.rd-anim-back{transform:rotateY(180deg);
  background:color-mix(in srgb,var(--rd-paper) 94%,var(--rd-ink))}
/* 用了背景图时，翻动的那页也铺一层，免得翻页瞬间闪出纯色底 */
#reader-root[data-reader-bg="custom"] .rd-anim-front{
  background-image:
    linear-gradient(color-mix(in srgb,var(--rd-paper) var(--rd-bg-mask,20%),transparent),
                    color-mix(in srgb,var(--rd-paper) var(--rd-bg-mask,20%),transparent)),
    var(--rd-custom-bg);
  background-size:cover;background-position:center}

.rd-anim-flip .rd-anim-page{transform-origin:left center;
  animation:rd-flip-next .46s cubic-bezier(.36,.02,.28,1) forwards}
.rd-anim-flip.rd-anim-prev .rd-anim-page{transform-origin:right center;
  animation-name:rd-flip-prev}
@keyframes rd-flip-next{to{transform:rotateY(-172deg)}}
@keyframes rd-flip-prev{to{transform:rotateY(172deg)}}

.rd-anim-slide .rd-anim-back{display:none}
.rd-anim-slide .rd-anim-page{animation:rd-slide-next .3s cubic-bezier(.32,.08,.2,1) forwards}
.rd-anim-slide.rd-anim-prev .rd-anim-page{animation-name:rd-slide-prev}
@keyframes rd-slide-next{to{transform:translateX(-101%);opacity:.45}}
@keyframes rd-slide-prev{to{transform:translateX(101%);opacity:.45}}
.rd-content[data-font="wenkai"]{font-family:'LXGW WenKai','Noto Serif SC',serif}
/* 苹方默认偏粗，正文压到 Light；标题各自带 font-weight，不受影响 */
.rd-content[data-font="pingfang"]{font-family:'PingFang SC','PingFang TC','Hiragino Sans GB',-apple-system,sans-serif;
  font-weight:300}
.rd-content[data-font="serif"]{font-family:'Noto Serif SC','Songti SC',Georgia,serif}
.rd-content[data-font="system"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
/* 注意：这里不能写 font: … inherit 简写——简写里不允许拿 inherit 当字体族，
   整条声明会被浏览器丢掉，标题就会一直和正文一样大。必须拆开写。 */
.rd-ch-heading{margin:0 0 26px;padding-left:.6em;
  font-weight:700;font-size:1.62em;line-height:1.45;letter-spacing:.02em;
  color:var(--rd-accent);text-indent:0;border-left:6px solid var(--rd-accent);border-radius:3px}
.rd-content p{margin:0 0 1em;text-align:justify;text-indent:var(--rd-ti);word-break:break-word}

/* ── 原书排版：外壳仍是 p[data-i]，只换外观 ── */
.rd-content p.rd-b-h1{margin:1.7em 0 .95em;padding-left:.6em;
  font-weight:700;font-size:1.62em;line-height:1.45;color:var(--rd-accent);text-align:left;
  border-left:6px solid var(--rd-accent);border-radius:3px}
.rd-content p.rd-b-h2{margin:1.5em 0 .8em;padding-left:.55em;
  font-weight:600;font-size:1.32em;line-height:1.5;color:var(--rd-accent);text-align:left;
  border-left:4px solid color-mix(in srgb,var(--rd-accent) 62%,transparent);border-radius:2px}
.rd-content p.rd-b-h3{margin:1.35em 0 .7em;font-weight:600;font-size:1.16em;line-height:1.55;color:var(--rd-accent);text-align:left}
.rd-content p.rd-b-h4{margin:1.2em 0 .6em;font-weight:600;font-size:1.05em;line-height:1.6;color:var(--rd-accent);text-align:left}
.rd-content p.rd-b-quote{margin:1.2em 0;padding:.2em 0 .2em 1em;text-align:left;
  border-left:2px solid var(--rd-accent);color:var(--rd-faint)}
.rd-content p.rd-b-li{margin:.4em 0 .4em 1.5em;text-align:left}
.rd-content p.rd-b-li::before{content:'·';margin-left:-1em;padding-right:.55em;color:var(--rd-faint)}
.rd-content p.rd-b-caption{margin:.5em 0 1.2em;font-size:.86em;color:var(--rd-faint);text-align:center}
/* 最顶上那一块不要再顶个外边距，否则和顶部留白叠起来就空出一大片 */
.rd-content>.rd-ch:first-child>:first-child{margin-top:0}
/* 标题、引用、列表、图注、居中段落都不跟着正文缩首行 */
.rd-content p.rd-b-h1,.rd-content p.rd-b-h2,.rd-content p.rd-b-h3,.rd-content p.rd-b-h4,
.rd-content p.rd-b-quote,.rd-content p.rd-b-li,.rd-content p.rd-b-caption,
.rd-content p.rd-al-center,.rd-content p.rd-al-right{text-indent:0}
/* 原书行内 style 指定的对齐，优先级要压过上面的类型默认值 */
.rd-content p.rd-al-left{text-align:left}
.rd-content p.rd-al-right{text-align:right}
.rd-content p.rd-al-center{text-align:center}
.rd-content p.rd-al-justify{text-align:justify}
.rd-scroll[data-flow="page"] .rd-content p[class*="rd-b-h"]{break-after:avoid-column}
.rd-figure{margin:1.4em 0;display:flex;flex-direction:column;align-items:center;gap:8px}
.rd-figure img{display:block;max-width:100%;height:auto;border-radius:10px;
  box-shadow:0 10px 30px color-mix(in srgb,transparent 82%,var(--th-ink))}
.rd-figure figcaption{font:400 11px/1.5 var(--font-chat);color:var(--rd-faint);text-align:center}

/* ── 划线（R 粉 / K 墨蓝，主题变量派生） ── */
.rd-content{-webkit-user-select:text;user-select:text;-webkit-touch-callout:none}
#reader-root{--rd-hl-r:rgba(var(--accent-rgb),.85);--rd-hl-k:color-mix(in srgb,var(--tool,#818cf8) 85%,transparent)}
.rd-hl{background:transparent;color:inherit;border-radius:0;padding-bottom:1px;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;
  -webkit-text-decoration-line:underline;-webkit-text-decoration-thickness:2px}
.rd-hl-r{text-decoration-color:var(--rd-hl-r);-webkit-text-decoration-color:var(--rd-hl-r)}
.rd-hl-k{text-decoration-color:var(--rd-hl-k);-webkit-text-decoration-color:var(--rd-hl-k)}
.rd-hl-both{text-decoration-color:var(--rd-hl-r);-webkit-text-decoration-color:var(--rd-hl-r);
  background-image:linear-gradient(var(--rd-hl-k),var(--rd-hl-k));
  background-repeat:no-repeat;background-size:100% 1.5px;background-position:0 calc(100% - 1px)}
.rd-hl-badge{display:inline-grid;place-items:center;vertical-align:super;
  width:15px;height:15px;margin:0 1px 0 2px;border-radius:50%;
  font:600 8.5px/1 -apple-system,sans-serif;font-style:normal;color:var(--rd-ink);
  background-color:var(--rd-panel-strong);background-size:cover;background-position:center;
  border:1px solid var(--rd-line);cursor:pointer}
.rd-b-r{border-color:color-mix(in srgb,var(--rd-hl-r) 70%,transparent);color:var(--rd-accent)}
.rd-b-k{border-color:color-mix(in srgb,var(--rd-hl-k) 80%,transparent)}

/* 选中文字操作条 —— 固定停在屏幕底部中央，躲开 iOS 系统选字菜单 */
.rd-selbar{position:fixed;z-index:99;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 24px);
  display:flex;gap:2px;padding:5px;border-radius:18px;
  background:color-mix(in srgb,var(--rd-paper) 96%,transparent);
  border:1px solid var(--rd-line);
  box-shadow:0 12px 36px color-mix(in srgb,transparent 55%,var(--th-bg));
  backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);
  animation:rdSelbarUp .22s cubic-bezier(.2,.75,.2,1)}
@keyframes rdSelbarUp{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.rd-selbar.hidden{display:none}
.rd-selbar button{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 20px;
  border-radius:14px;font:500 14px/1 var(--font-chat);color:var(--rd-ink)}
.rd-selbar button:active{background:color-mix(in srgb,transparent 88%,rgb(var(--accent-rgb)))}
.rd-selbar button b{width:15px;height:0;border-bottom:2.5px solid var(--rd-hl-r);border-radius:2px}

/* 批注展开卡（点头像/划线弹出） */
.rd-pop{position:fixed;z-index:99;width:min(78vw,300px);padding:12px 14px;border-radius:16px;
  background:color-mix(in srgb,var(--rd-paper) 97%,transparent);
  border:1px solid var(--rd-line);
  box-shadow:0 16px 44px color-mix(in srgb,transparent 52%,var(--th-bg));
  backdrop-filter:blur(26px) saturate(135%);-webkit-backdrop-filter:blur(26px) saturate(135%)}
.rd-pop[data-author="me"]{background:color-mix(in srgb,var(--rd-bubble-r) 46%,var(--rd-paper))}
.rd-pop[data-author="nox"]{background:color-mix(in srgb,var(--rd-bubble-k) 46%,var(--rd-paper))}
.rd-pop.hidden{display:none}
.rd-pop-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rd-pop-av{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font:600 11px/1 -apple-system,sans-serif;color:var(--rd-ink);
  background-color:var(--rd-panel-strong);background-size:cover;background-position:center;
  border:1.5px solid var(--rd-line)}
.rd-pop-head strong{font:600 13px/1 var(--font-chat);color:var(--rd-ink)}
.rd-pop-head small{margin-left:auto;font-size:10px;color:var(--rd-faint)}
.rd-pop-head .rd-pop-del{font:400 11px/1 var(--font-chat);font-style:normal;color:var(--rd-faint);padding:4px 2px 4px 8px;cursor:pointer}
.rd-pop-head .rd-pop-del:active{color:var(--danger)}
.rd-pop blockquote{margin:0 0 8px;padding:7px 10px;border-left:2px solid rgba(var(--accent-rgb),.45);border-radius:6px;
  font:400 12px/1.6 var(--font-chat);color:var(--rd-faint);
  background:color-mix(in srgb,transparent 93%,rgb(var(--accent-rgb)));
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rd-pop p{margin:0;font:400 13.5px/1.7 var(--font-chat);color:var(--text,var(--th-ink))}
.rd-pop .rd-pop-hl-only{color:var(--rd-faint);font-size:12px}
.rd-pop-thread{display:flex;flex-direction:column;gap:7px;margin-top:10px;padding-top:9px;border-top:1px solid var(--rd-line)}
.rd-pop-reply{padding:7px 9px;border-radius:10px;background:color-mix(in srgb,var(--rd-panel-strong) 76%,transparent)}
.rd-pop-reply.from-r{background:color-mix(in srgb,var(--rd-bubble-r) 42%,var(--rd-panel-strong))}
.rd-pop-reply.from-k{background:color-mix(in srgb,var(--rd-bubble-k) 42%,var(--rd-panel-strong))}
.rd-pop-reply strong{display:block;margin-bottom:3px;font:600 10.5px/1.2 var(--font-chat);color:var(--rd-faint)}
.rd-pop-reply p{font-size:12.5px;line-height:1.55}
.rd-pop-reply.from-r{margin-left:18px}
.rd-pop-reply.from-k{margin-right:18px}
.rd-pop-reply-box{display:flex;gap:6px;margin-top:10px}
.rd-pop-reply-box input{min-width:0;flex:1;padding:7px 9px;border:1px solid var(--rd-line);border-radius:10px;
  color:var(--rd-ink);background:var(--rd-panel);font:400 12px/1.3 var(--font-chat);outline:none}
.rd-pop-reply-box input:focus{border-color:color-mix(in srgb,transparent 35%,rgb(var(--accent-rgb)))}
.rd-pop-reply-box button{padding:0 10px;border:0;border-radius:10px;color:var(--text,var(--th-ink));
  background:color-mix(in srgb,var(--rd-panel-strong) 68%,rgb(var(--accent-rgb)) 32%);font:500 12px/1 var(--font-chat)}

/* 连续滚动加载哨兵 */
.rd-more{min-height:80px;padding:26px 0 calc(env(safe-area-inset-bottom,0px) + 96px);text-align:center;
  font:400 12px/1 var(--font-chat);color:var(--rd-faint);letter-spacing:.14em}
.rd-ch{padding-top:8px}
.rd-ch + .rd-ch{margin-top:34px;border-top:1px dashed var(--rd-line);padding-top:34px}

/* 目录抽屉 */
.rd-toc{position:absolute;top:0;bottom:0;left:0;z-index:8;width:min(78%,320px);
  display:grid;grid-template-rows:auto minmax(0,1fr);
  padding:calc(env(safe-area-inset-top,0px) + 14px) 0 env(safe-area-inset-bottom,0px);
  background:color-mix(in srgb,var(--rd-paper) 96%,transparent);
  border-right:1px solid var(--rd-line);
  backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);
  transform:translateX(-104%);transition:transform .32s cubic-bezier(.2,.75,.2,1)}
.rd-toc.open{transform:translateX(0)}
.rd-toc-head{display:flex;align-items:baseline;justify-content:space-between;padding:8px 18px 12px;border-bottom:1px solid var(--rd-line)}
.rd-toc-head strong{font:600 15px/1 var(--font-chat)}
.rd-toc-head span{font-size:11px;color:var(--rd-faint)}
.rd-toc-list{overflow-y:auto;padding:6px 0 24px}
.rd-toc-list button{display:block;width:100%;text-align:left;padding:11px 18px;
  font:400 13.5px/1.45 var(--font-chat);color:var(--rd-soft);
  border-left:2px solid transparent}
.rd-toc-list button span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-toc-list button.on{color:var(--rd-accent);border-left-color:var(--rd-accent);
  background:color-mix(in srgb,transparent 90%,rgb(var(--accent-rgb)))}
.rd-mask{position:absolute;inset:0;z-index:7;background:var(--overlay,rgba(0,0,0,.4))}
.rd-mask.hidden{display:none}

/* 顶栏小图标(搜索/书签) */
.rd-top-ic{flex:0 0 auto;min-width:38px;min-height:38px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;color:var(--rd-soft)}
.rd-top-ic svg{width:19px;height:19px}
.rd-top-ic:active{color:var(--rd-accent)}
.rd-top-ic.rd-bm-on{color:var(--rd-accent)}
.rd-top-ic.rd-bm-on svg{fill:rgba(var(--accent-rgb),.35)}

/* 目录/书签页签 */
.rd-toc-tabs{display:flex;gap:2px;border:1px solid var(--rd-line);border-radius:11px;padding:2px;
  background:color-mix(in srgb,var(--rd-panel) 80%,transparent)}
.rd-toc-tabs button{min-height:30px;padding:0 14px;border-radius:9px;font:500 12.5px/1 var(--font-chat);color:var(--rd-soft)}
.rd-toc-tabs button.on{color:var(--rd-accent);background:color-mix(in srgb,transparent 86%,rgb(var(--accent-rgb)))}
.rd-toc-empty{padding:36px 18px;text-align:center;font:400 13px/2 var(--font-chat);color:var(--rd-faint)}
.rd-toc-list .rd-toc-bm{float:right;font-size:11px;opacity:.8}
.rd-bm-item{position:relative;padding-right:38px!important}
.rd-bm-item small{display:block;margin-top:3px;font-size:11px;color:var(--rd-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-bm-item i{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;
  display:grid;place-items:center;font-style:normal;font-size:14px;color:var(--rd-faint)}
.rd-bm-item i:active{color:var(--danger)}
.rd-ann-item{display:block!important;text-align:left!important}
.rd-ann-item small{display:block;margin-top:5px;padding-left:8px;border-left:2px solid var(--rd-accent);
  color:var(--rd-soft);white-space:normal}
.rd-ann-item small.from-k{border-left-color:var(--rd-hl-k)}
.rd-ann-item em{display:block;margin-top:5px;font:400 10px/1.3 var(--font-chat);color:var(--rd-faint)}

/* 全文搜索浮层 */
.rd-search{position:absolute;inset:0;z-index:10;display:grid;grid-template-rows:auto minmax(0,1fr);
  background:color-mix(in srgb,var(--rd-paper) 97%,transparent);
  backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%)}
.rd-search.hidden{display:none}
.rd-search-bar{display:flex;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 10px;border-bottom:1px solid var(--rd-line)}
.rd-search-bar input{flex:1;min-height:42px;padding:0 16px;border-radius:14px;
  border:1px solid var(--rd-line);background:color-mix(in srgb,var(--rd-panel) 85%,transparent);
  font:400 15px/1 var(--font-chat);color:var(--text,var(--th-ink))}
.rd-search-bar input::placeholder{color:var(--rd-faint)}
.rd-search-bar button{min-width:40px;min-height:40px;font-size:20px;color:var(--rd-soft);border-radius:12px}
.rd-search-list{overflow-y:auto;padding:8px 0 calc(env(safe-area-inset-bottom,0px) + 30px)}
.rd-search-list button{display:block;width:100%;text-align:left;padding:12px 18px;border-bottom:1px solid var(--rd-line)}
.rd-search-list .rd-bm-ch{display:block;font:500 12px/1.3 var(--font-chat);color:var(--rd-accent)}
.rd-search-list small{display:block;margin-top:4px;font:400 13px/1.6 var(--font-chat);color:var(--rd-soft)}
.rd-search-list small mark{background:transparent;color:var(--rd-accent);font-weight:600;
  text-decoration:underline;text-decoration-color:rgba(var(--accent-rgb),.6);text-underline-offset:3px}

/* DeepSeek 预读工作台 */
.rd-preread{position:absolute;inset:0;z-index:11;display:grid;grid-template-rows:auto minmax(0,1fr);
  background:color-mix(in srgb,var(--rd-paper) 97%,transparent);
  backdrop-filter:blur(26px) saturate(130%);-webkit-backdrop-filter:blur(26px) saturate(130%)}
.rd-preread.hidden{display:none}
.rd-preread>header{display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 18px 12px;border-bottom:1px solid var(--rd-line)}
.rd-preread>header div{display:flex;flex-direction:column;gap:2px}
.rd-preread>header small{font:600 9px/1.2 -apple-system,sans-serif;letter-spacing:.2em;color:var(--rd-faint)}
.rd-preread>header strong{font:600 17px/1.3 var(--font-chat);color:var(--rd-ink)}
.rd-preread>header button{width:40px;height:40px;border-radius:50%;font-size:20px;color:var(--rd-soft)}
.rd-preread-body{overflow-y:auto;padding:18px 18px calc(env(safe-area-inset-bottom,0px) + 30px)}
.rd-preread-summary{padding:16px;border:1px solid var(--rd-line);border-radius:18px;
  background:color-mix(in srgb,var(--rd-panel) 90%,transparent)}
.rd-preread-summary>strong{font:600 16px/1.3 var(--font-chat);color:var(--rd-ink)}
.rd-preread-summary>span{float:right;font:500 12px/1.5 -apple-system,sans-serif;color:var(--rd-faint)}
.rd-preread-summary>i{display:block;height:5px;margin:12px 0;border-radius:6px;overflow:hidden;
  background:var(--rd-line)}
.rd-preread-summary>i b{display:block;height:100%;border-radius:inherit;background:var(--rd-accent);transition:width .3s ease}
.rd-preread-summary>small{display:block;font:400 12px/1.7 var(--font-chat);color:var(--rd-soft)}
.rd-preread-summary>p{margin:10px 0 0;padding:9px 10px;border-radius:10px;
  font:400 12px/1.6 var(--font-chat);color:var(--danger);
  background:color-mix(in srgb,transparent 90%,var(--danger))}
.rd-preread-summary>button{width:100%;min-height:42px;margin-top:14px;border-radius:12px;
  font:600 13px/1 var(--font-chat);color:var(--rd-ink);
  background:color-mix(in srgb,var(--rd-panel-strong) 70%,rgb(var(--accent-rgb)) 30%)}
.rd-preread-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.rd-preread-stats div{min-width:0;padding:12px 6px;border-radius:14px;text-align:center;
  background:var(--rd-panel);border:1px solid var(--rd-line)}
.rd-preread-stats b,.rd-preread-stats span{display:block;overflow:hidden;text-overflow:ellipsis}
.rd-preread-stats b{font:600 17px/1.3 -apple-system,sans-serif;color:var(--rd-ink)}
.rd-preread-stats span{margin-top:3px;font:400 10px/1.3 var(--font-chat);color:var(--rd-faint)}
.rd-preread-body h3{margin:18px 2px 8px;font:600 13px/1.4 var(--font-chat);color:var(--rd-soft)}
.rd-preread-notes{display:grid;gap:7px}
.rd-preread-notes>small{padding:12px;color:var(--rd-faint)}
.rd-preread-note{border:1px solid var(--rd-line);border-radius:13px;background:var(--rd-panel)}
.rd-preread-note summary{padding:11px 12px;cursor:pointer;list-style:none;
  font:500 12px/1.4 var(--font-chat);color:var(--rd-ink)}
.rd-preread-note summary::-webkit-details-marker{display:none}
.rd-preread-note summary::after{content:'＋';float:right;color:var(--rd-faint)}
.rd-preread-note[open] summary::after{content:'−'}
.rd-preread-note p{margin:0;padding:0 12px 8px;font:400 12px/1.7 var(--font-chat);color:var(--rd-soft)}
.rd-preread-note small{display:block;padding:0 12px 8px;font:400 11px/1.6 var(--font-chat);color:var(--rd-faint)}
.rd-preread-calls{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--rd-line)}
.rd-preread-calls li{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:11px 3px;border-bottom:1px solid var(--rd-line);font:500 12px/1.5 var(--font-chat)}
.rd-preread-calls li span{color:var(--rd-ink)}
.rd-preread-calls li em{font-style:normal;color:var(--rd-faint);text-align:right}
.rd-preread-calls li.failed em,.rd-preread-error{color:var(--danger)}

/* 跳转落点闪烁 */
.rd-flash{animation:rdFlash 1.5s ease}
@keyframes rdFlash{0%,60%{background:color-mix(in srgb,transparent 82%,rgb(var(--accent-rgb)));border-radius:6px}100%{background:transparent}}

/* ── 全局 K 气泡(k-bubble.js 挂在 body 上,全屋陪读;色彩走全局主题变量) ── */
#nox-k-bubble{position:fixed;right:16px;bottom:150px;z-index:120;
  width:72px;height:72px;padding:0;display:grid;place-items:center;background:transparent;border:none;
  touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer}
#nox-k-bubble.hidden{display:none}
#nox-k-bubble canvas{position:absolute;inset:-18px;width:108px;height:108px;pointer-events:none}
#nox-k-bubble span{position:relative;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;
  font:600 21px/1 var(--font-chat);color:var(--text,var(--th-ink));
  background-color:color-mix(in srgb,var(--th-bg) 88%,rgb(var(--accent-rgb)) 12%);
  background-size:cover;background-position:center;
  border:1px solid color-mix(in srgb,transparent 58%,rgb(var(--accent-rgb)));
  /* 阴影: 立得住但别脏(R 2026-07-11 调淡) */
  box-shadow:0 5px 14px rgba(0,0,0,.13),0 2px 4px rgba(0,0,0,.06),0 0 12px rgba(var(--accent-rgb),.10)}
#nox-k-bubble.kb-drag span{transform:scale(1.1)}
#nox-k-bubble.kb-squish span{animation:kbSquish .5s cubic-bezier(.3,1.6,.4,1)}
#nox-k-bubble.kb-playing span{
  border-color:color-mix(in srgb,transparent 28%,rgb(var(--accent-rgb)));
  box-shadow:0 7px 18px var(--avatar-glass-shadow),0 0 22px rgba(var(--accent-rgb),.28)}
#nox-k-bubble.kb-playing::after{content:'';position:absolute;right:3px;top:3px;width:10px;height:10px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);pointer-events:none}
#nox-k-bubble.kb-reading::before{content:'⌑';position:absolute;left:1px;bottom:2px;z-index:2;
  width:20px;height:20px;display:grid;place-items:center;border-radius:50%;
  font:600 13px/1 var(--font-chat);color:var(--text,var(--th-ink));
  background:color-mix(in srgb,var(--th-bg) 88%,rgb(var(--accent-rgb)) 12%);
  border:1px solid color-mix(in srgb,transparent 48%,rgb(var(--accent-rgb)));
  box-shadow:0 3px 9px var(--avatar-glass-shadow);pointer-events:none}
@keyframes kbSquish{
  0%{transform:scale(1,1)}
  30%{transform:scale(1.22,.78)}
  55%{transform:scale(.88,1.14)}
  75%{transform:scale(1.06,.95)}
  100%{transform:scale(1,1)}
}
#nox-k-say{position:fixed;z-index:121;max-width:230px;padding:8px 13px;border-radius:15px;
  font:400 12.5px/1.5 var(--font-chat);color:var(--text,var(--th-ink));
  background:color-mix(in srgb,var(--th-bg) 93%,rgb(var(--accent-rgb)) 4%);
  border:1px solid color-mix(in srgb,transparent 60%,rgb(var(--accent-rgb)));
  box-shadow:0 8px 22px rgba(0,0,0,.14),0 0 12px rgba(var(--accent-rgb),.12);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);cursor:pointer;
  animation:kbSayIn .24s cubic-bezier(.2,.9,.3,1.2);white-space:pre-line}
#nox-k-say[data-kind="status"]{color:var(--text-2,var(--text));font-size:11.5px}
#nox-k-say[data-kind="reply"]{max-width:min(280px,calc(100vw - 24px));font-size:13px;line-height:1.6;
  border-color:color-mix(in srgb,transparent 38%,rgb(var(--accent-rgb)))}
#nox-k-say.hidden{display:none}
@keyframes kbSayIn{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}

#nox-k-menu{position:fixed;z-index:123;width:min(246px,calc(100vw - 20px));padding:7px;border-radius:17px;
  display:flex;flex-direction:column;gap:5px;color:var(--text,var(--th-ink));
  background:color-mix(in srgb,var(--th-bg) 94%,rgb(var(--accent-rgb)) 3%);
  border:1px solid color-mix(in srgb,transparent 58%,rgb(var(--accent-rgb)));
  box-shadow:0 14px 38px var(--avatar-glass-shadow),0 0 16px rgba(var(--accent-rgb),.10);
  backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);
  animation:kbSayIn .2s cubic-bezier(.2,.9,.3,1.1)}
#nox-k-menu button{width:100%;padding:9px 11px;border:0;border-radius:12px;text-align:left;color:inherit;
  background:color-mix(in srgb,var(--accent) 10%,transparent);font-family:var(--font-chat);touch-action:manipulation}
#nox-k-menu button:active{background:color-mix(in srgb,var(--accent) 20%,transparent)}
#nox-k-menu strong{display:block;font-size:12.5px;font-weight:600}
#nox-k-menu small{display:block;margin-top:2px;color:var(--text-3,var(--text));font-size:10.5px;line-height:1.35}

.rd-comp{position:absolute;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);z-index:12;
  max-height:52vh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;
  border-radius:22px;border:1px solid var(--rd-line);overflow:hidden;
  background:color-mix(in srgb,var(--rd-paper) 95%,transparent);
  box-shadow:0 20px 60px color-mix(in srgb,transparent 45%,var(--th-bg));
  backdrop-filter:blur(28px) saturate(140%);-webkit-backdrop-filter:blur(28px) saturate(140%)}
.rd-comp.hidden{display:none}
.rd-comp-head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--rd-line)}
.rd-comp-av{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font:600 13px/1 var(--font-chat);color:var(--rd-ink);
  background-color:var(--rd-panel-strong);background-size:cover;background-position:center;
  border:1.5px solid color-mix(in srgb,transparent 55%,rgb(var(--accent-rgb)))}
.rd-comp-title{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.rd-comp-title strong{font:600 13.5px/1.2 var(--font-chat)}
/* 绑定的是哪个对话，得一眼看见并且看得出能点 —— 原来 10.5px 的浅灰字近乎隐形 */
.rd-comp-title button{align-self:flex-start;margin-top:3px;padding:3px 9px;border-radius:9px;
  font:500 11px/1.25 var(--font-chat);color:var(--rd-accent);
  background:color-mix(in srgb,transparent 88%,rgb(var(--accent-rgb)));
  border:1px solid color-mix(in srgb,transparent 70%,rgb(var(--accent-rgb)));
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rd-comp-min{min-width:36px;min-height:36px;font-size:16px;color:var(--rd-soft);border-radius:10px}
.rd-comp-msgs{overflow-y:auto;padding:12px 12px 6px;display:flex;flex-direction:column;gap:8px;min-height:110px}
.rd-comp-msg{max-width:86%;padding:8px 12px;border-radius:16px;font:400 13.5px/1.65 var(--font-chat)}
.rd-comp-msg p{margin:0;white-space:pre-wrap;word-break:break-word}
.rd-comp-msg .rd-comp-q{display:block;margin-bottom:4px;font-size:11px;font-style:normal;color:var(--rd-faint);
  border-left:2px solid rgba(var(--accent-rgb),.5);padding-left:7px}
.rd-comp-k{align-self:flex-start;border-bottom-left-radius:5px;color:var(--text,var(--th-ink));
  background:color-mix(in srgb,var(--rd-panel-strong) 92%,transparent);border:1px solid var(--rd-line)}
.rd-comp-r{align-self:flex-end;border-bottom-right-radius:5px;color:var(--text,var(--th-ink));
  background:color-mix(in srgb,transparent 84%,rgb(var(--accent-rgb)));
  border:1px solid rgba(var(--accent-rgb),.28)}
.rd-comp-typing p{display:flex;gap:4px;padding:3px 2px}
.rd-comp-typing i{width:5px;height:5px;border-radius:50%;background:var(--rd-faint);animation:rdTyping 1.2s ease-in-out infinite}
.rd-comp-typing i:nth-child(2){animation-delay:.15s}
.rd-comp-typing i:nth-child(3){animation-delay:.3s}
@keyframes rdTyping{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.rd-comp-quote{display:flex;align-items:center;gap:8px;margin:0 12px;padding:7px 10px;border-radius:10px;
  border-left:2px solid rgba(var(--accent-rgb),.55);
  background:color-mix(in srgb,transparent 92%,rgb(var(--accent-rgb)))}
.rd-comp-quote span{flex:1;font:400 11.5px/1.5 var(--font-chat);color:var(--rd-soft);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rd-comp-quote b{font-weight:400;color:var(--rd-faint);padding:2px 6px;cursor:pointer}
.rd-comp-quote.hidden{display:none}
.rd-comp-input{display:flex;align-items:flex-end;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)/3)}
.rd-comp-input textarea{flex:1;max-height:90px;min-height:38px;padding:9px 14px;border-radius:14px;resize:none;
  border:1px solid var(--rd-line);background:color-mix(in srgb,var(--rd-panel) 85%,transparent);
  font:400 14px/1.5 var(--font-chat);color:var(--text,var(--th-ink))}
.rd-comp-input textarea::placeholder{color:var(--rd-faint)}
.rd-comp-input button{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:var(--th-bg);background:var(--rd-accent)}
.rd-comp-input button svg{width:17px;height:17px}
/* 选择器挂在阅读页层级，从顶栏下方落下来。
   z-index 要压过工具条(6)和翻页动画层(5)，否则会被盖住。 */
.rd-comp-picker{position:absolute;left:12px;right:12px;z-index:9;overflow-y:auto;
  top:calc(env(safe-area-inset-top,0px) + 62px);max-height:min(58dvh,420px);
  border-radius:16px;border:1px solid var(--rd-line);
  background:color-mix(in srgb,var(--rd-paper) 97%,transparent);
  backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);
  box-shadow:0 18px 50px color-mix(in srgb,transparent 58%,var(--th-bg))}
.rd-comp-picker.hidden{display:none}
.rd-comp-picker button{display:block;width:100%;text-align:left;padding:11px 16px;border-bottom:1px solid var(--rd-line)}
.rd-comp-picker button.on{background:color-mix(in srgb,transparent 90%,rgb(var(--accent-rgb)));
  box-shadow:inset 3px 0 0 var(--rd-accent)}
.rd-comp-picker button.on strong{color:var(--rd-accent)}
.rd-comp-picker button.on small{color:var(--rd-accent);opacity:.85}
.rd-comp-picker strong{display:block;font:500 13.5px/1.3 var(--font-chat);color:var(--rd-ink)}
.rd-comp-picker small{display:block;margin-top:2px;font-size:11px;color:var(--rd-faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Aa 设置 */
.rd-prefs{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 78px);z-index:8;
  padding:16px 18px;border-radius:20px;display:flex;flex-direction:column;gap:14px;
  max-height:calc(100dvh - 120px);overflow-y:auto;
  background:color-mix(in srgb,var(--rd-paper) 94%,transparent);
  border:1px solid var(--rd-line);
  box-shadow:0 18px 50px color-mix(in srgb,transparent 60%,var(--th-bg));
  backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .24s ease,transform .3s cubic-bezier(.2,.75,.2,1)}
.rd-prefs.open{opacity:1;transform:translateY(0);pointer-events:auto}
.rd-prefs-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rd-prefs-row>span{font:400 13px/1 var(--font-chat);color:var(--rd-soft)}
/* 拉条行：左标题 / 中拉条 / 右读数 */
.rd-range-row{gap:10px}
.rd-range-row>span{flex:0 0 56px}
.rd-range-row input[type="range"]{flex:1;min-width:0;height:28px;margin:0;
  -webkit-appearance:none;appearance:none;background:transparent}
.rd-range-row input[type="range"]:focus{outline:none}
.rd-range-row input[type="range"]::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;background:var(--rd-line)}
.rd-range-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-8px;
  border-radius:50%;background:var(--rd-accent);
  box-shadow:0 1px 5px color-mix(in srgb,transparent 62%,var(--th-ink))}
.rd-range-row input[type="range"]::-moz-range-track{height:4px;border-radius:2px;background:var(--rd-line)}
.rd-range-row input[type="range"]::-moz-range-thumb{width:20px;height:20px;border:none;
  border-radius:50%;background:var(--rd-accent)}
.rd-range-row>b{flex:0 0 48px;text-align:right;font:500 12px/1 -apple-system,sans-serif;
  color:var(--rd-ink);font-variant-numeric:tabular-nums}
/* 字体从三个变四个，别让按钮把这行挤爆 */
.rd-fonts button{min-width:0;flex:1;padding:0 8px}
.rd-seg{display:flex;align-items:center;gap:2px;border:1px solid var(--rd-line);border-radius:12px;overflow:hidden;
  background:color-mix(in srgb,var(--rd-panel) 80%,transparent)}
.rd-seg button{min-width:46px;min-height:36px;font:500 13px/1 var(--font-chat);color:var(--rd-soft);padding:0 10px}
.rd-seg button:active{color:var(--rd-accent)}
.rd-seg button.on{color:var(--rd-accent);background:color-mix(in srgb,transparent 86%,rgb(var(--accent-rgb)))}
.rd-seg b{min-width:38px;text-align:center;font:500 12px/1 -apple-system,sans-serif;color:var(--rd-ink);font-variant-numeric:tabular-nums}
.rd-color-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rd-color-grid label,.rd-color-grid button{min-height:38px;padding:5px 8px;border:1px solid var(--rd-line);
  border-radius:11px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  font:400 11px/1.2 var(--font-chat);color:var(--rd-soft);background:var(--rd-panel)}
.rd-color-grid input[type="color"]{width:25px;height:25px;padding:0;border:0;border-radius:50%;overflow:hidden;
  background:transparent}
.rd-color-grid button{justify-content:center;color:var(--rd-accent)}

/* 批注编辑 */
.rd-note{position:absolute;left:14px;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 30px);z-index:9;
  padding:15px 16px;border-radius:20px;display:flex;flex-direction:column;gap:10px;
  background:color-mix(in srgb,var(--rd-paper) 96%,transparent);
  border:1px solid var(--rd-line);
  box-shadow:0 18px 50px color-mix(in srgb,transparent 55%,var(--th-bg));
  backdrop-filter:blur(26px) saturate(135%);-webkit-backdrop-filter:blur(26px) saturate(135%)}
.rd-note.hidden{display:none}
.rd-note blockquote{margin:0;padding:8px 12px;border-left:2px solid rgba(var(--accent-rgb),.45);border-radius:8px;
  font:400 12.5px/1.6 var(--font-chat);color:var(--rd-faint);
  background:color-mix(in srgb,transparent 92%,rgb(var(--accent-rgb)));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rd-note textarea{width:100%;resize:none;border:none;outline:none;padding:4px 2px;
  font:400 15px/1.7 var(--font-chat);color:var(--text,var(--th-ink));background:transparent}
.rd-note-actions{display:flex;justify-content:flex-end;gap:8px}
.rd-note-actions button{min-height:38px;padding:0 18px;border-radius:12px;font:500 13px/1 var(--font-chat);color:var(--rd-soft)}
.rd-note-actions .rd-primary{color:var(--th-bg);background:var(--rd-accent)}

@media (prefers-reduced-motion:reduce){
  #reader-root,.rd-toc,.rd-prefs,.rd-chrome{transition:none}
}