/* ============================================================
   全屏条漫阅读器（comic_reader）· NOIR 影院化外观。竖滑无缝图流。
   壳层移植自 novel_reader：顶/底栏、沉浸切换、顶部进度、设置抽屉。

   【NOIR 化】顶栏/底栏/进度条/设置抽屉/按钮换成 noir 暗红金影院质感：
     · 工具链(chrome)恒为深色玻璃 + 暗红 #FF3B5C 进度/激活 + 金 #E6B873 点缀 + 发光；
     · 进度条/激活态/高亮 = --cacc(#FF3B5C)，点缀 = --cgold(#E6B873)。
   【完整保留】阅读背景子主题系统：3 套 data-ctheme（白/护眼/暗）仍切换正文阅读底色，
     与站点昼夜、与工具链外观解耦——chrome 走 noir，正文底色走子主题。
   设置持久化由页面 JS 写 localStorage['uaa-comic-reader']。
   ============================================================ */

/* ---- 阅读区底色仍由 data-ctheme 子主题决定（不强改黑）；
        chrome(顶/底/进度/抽屉) 用独立 noir 影院令牌，恒深色玻璃 ---- */
.creader{position:fixed;inset:0;z-index:1;display:block;background:var(--cbg);color:var(--ctext);
  /* —— 阅读正文底色（子主题覆盖） —— */
  --cbg:#FBFAF7;--ctext:#24242b;--cmuted:#9a9aa3;--cline:#ececf0;--cstage:#f1f0ee;--cwidth:560px;
  /* —— NOIR chrome 令牌（恒定，影院暗红金） —— */
  --cacc:#FF3B5C;            /* 暗红主强调：进度/激活/高亮 */
  --cgold:#E6B873;           /* 金：点缀/边线辉光 */
  --cbar:rgba(11,11,15,.78); /* 深色玻璃工具栏底 */
  --cbar-line:rgba(255,255,255,.10);
  --cbar-ink:#F2F0F2;        /* 工具栏图标/文字常亮 */
  --cbar-muted:#9A98A2;
  --cbar-hover:rgba(255,255,255,.08);
  --csheet-bg:#14141A;       /* 设置抽屉：深色影院面板 */
  --csheet-line:rgba(255,255,255,.09)}
body.creader-page{overflow:hidden}

/* —— 3 套阅读背景子主题：仅改正文阅读底色/正文文本，不动 noir chrome —— */
.creader[data-ctheme="white"]{--cbg:#FBFAF7;--ctext:#24242b;--cmuted:#9a9aa3;--cline:#ececf0;--cstage:#f1f0ee}
.creader[data-ctheme="paper"]{--cbg:#EFE7D6;--ctext:#3a3326;--cmuted:#9a8d76;--cline:#e0d6bf;--cstage:#e6dcc6}
.creader[data-ctheme="dark"]{--cbg:#101013;--ctext:#C7C4CE;--cmuted:#6f6c78;--cline:#26262d;--cstage:#1a1a1f}

/* ---- 顶部进度条：暗红辉光细线 ---- */
.creader-progress{position:absolute;top:0;left:0;right:0;height:3px;z-index:7;
  background:linear-gradient(90deg,rgba(255,59,92,.10),rgba(230,184,115,.06))}
.creader-progress span{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--cacc),#FF6177 70%,var(--cgold));
  box-shadow:0 0 12px -1px rgba(255,59,92,.85),0 0 4px rgba(255,59,92,.6);transition:width .1s linear}

/* ---- 顶栏：深色玻璃 + 发丝线 ---- */
.creader-top{position:absolute;top:0;left:0;right:0;z-index:4;height:54px;display:flex;align-items:center;gap:8px;padding:0 10px;
  background:var(--cbar);backdrop-filter:saturate(150%) blur(18px);-webkit-backdrop-filter:saturate(150%) blur(18px);
  border-bottom:1px solid var(--cbar-line);
  box-shadow:0 1px 0 rgba(255,59,92,.10),0 10px 30px -22px rgba(0,0,0,.9);transition:transform .3s}
.creader-top__wrap{flex:1;min-width:0;text-align:center}
.creader-top__title{font-family:var(--font-serif);font-size:14px;font-weight:700;color:var(--cbar-ink);
  letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.creader-top__sub{font-family:var(--font-latin);font-size:11px;color:var(--cgold);margin-top:1px;letter-spacing:.06em}
.creader-ic{width:40px;height:40px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;color:var(--cbar-ink);
  background:rgba(255,255,255,.04);border:1px solid transparent;transition:.2s}
.creader-ic:hover{background:var(--cbar-hover);border-color:rgba(255,59,92,.45);color:var(--cacc)}
.creader-ic.aa{font-family:var(--font-latin);font-size:17px;font-weight:700}

/* —— 键盘可见焦点：暗红描边，与 noir 影院外壳一致 —— */
.creader-ic:focus-visible,.creader-bic:focus-visible,
.cs-theme:focus-visible,.cs-seg button:focus-visible,
.creader-end .ds-btn:focus-visible{outline:2px solid var(--cacc);outline-offset:2px;border-radius:11px}
.cs-theme:focus-visible{outline-offset:3px;border-radius:50%}

.creader-scroll{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* 图流：PC 限宽居中，移动端整宽；面板间极小间距模拟条漫 */
.creader-flow{max-width:var(--cwidth);margin:0 auto;padding:54px 0 64px;display:flex;flex-direction:column;gap:2px}
.creader-panel{position:relative;width:100%;aspect-ratio:3/4;display:grid;place-items:center;overflow:hidden;
  background:var(--pg,linear-gradient(160deg,#6a6f9a,#2e3050))}
.creader-panel[data-tall]{aspect-ratio:3/5}
.creader-panel__txt{font-family:var(--font-latin);font-size:15px;font-weight:600;letter-spacing:.08em;
  color:rgba(255,255,255,.62);text-shadow:0 1px 8px rgba(0,0,0,.32);padding:8px 16px;text-align:center;line-height:1.7}
.creader-panel__txt small{display:block;font-size:12px;font-weight:400;letter-spacing:.12em;opacity:.78;margin-top:4px}
/* 真实分页图：整宽无缝竖滑，宽度仍受 .creader-flow 的 --cwidth 限制 */
.creader-img{display:block;width:100%;height:auto;background:var(--cstage,#f1f0ee)}

.creader-end{padding:34px 22px calc(76px + env(safe-area-inset-bottom));text-align:center}
.creader-end__lab{font-family:var(--font-latin);font-size:12.5px;color:var(--cmuted);margin-bottom:16px;letter-spacing:.06em}
.creader-end .ds-btn{min-width:200px}
/* 「下一话」CTA：暗红渐变 + 辉光（在任意阅读底色上都醒目） */
.creader-end .ds-btn--primary{background:linear-gradient(135deg,#FF3B5C,#FF6177);color:#fff;border:none;
  box-shadow:0 14px 34px -12px rgba(255,59,92,.7),0 0 0 1px rgba(230,184,115,.18)}
.creader-end .ds-btn--primary:hover{transform:translateY(-1px);box-shadow:0 18px 44px -12px rgba(255,59,92,.9)}

/* ---- 末话催更/打赏：漫画自有样式，不复用小说 reader.css 的 .r-endrow/.r-endbtns/.r-urge/.r-reward ----
   小说末章是 4 个动作要排网格，漫画只有 2 个，直接 flex 居中；两边各自演进，互不影响。 */
.cend-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.cend-acts button{min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 18px;
  border-radius:13px;font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer;
  transition:transform .15s,color .15s,border-color .15s,background .15s}
.cend-acts button:focus-visible{outline:2px solid var(--cacc);outline-offset:2px}
.cend-urge{color:color-mix(in srgb,var(--ctext) 82%,transparent);background:color-mix(in srgb,var(--ctext) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--ctext) 22%,transparent)}
.cend-urge b{font-weight:900;font-size:11.5px;opacity:.86;font-family:var(--font-latin)}
.cend-urge:hover{transform:translateY(-1px);color:var(--cacc);
  border-color:color-mix(in srgb,var(--cacc) 55%,transparent);background:color-mix(in srgb,var(--cacc) 9%,transparent)}
.cend-urge:disabled{opacity:.45;cursor:default}
.cend-urge:disabled:hover{transform:none;color:color-mix(in srgb,var(--ctext) 82%,transparent);
  border-color:color-mix(in srgb,var(--ctext) 22%,transparent);background:color-mix(in srgb,var(--ctext) 7%,transparent)}
/* 打赏固定金色，不跟阅读主题变 */
.cend-reward{color:#C89445;background:color-mix(in srgb,#E6B873 12%,transparent);border:1px solid color-mix(in srgb,#E6B873 30%,transparent)}
.cend-reward:hover{transform:translateY(-1px);color:#E6B873;border-color:#E6B873;background:color-mix(in srgb,#E6B873 18%,transparent)}
@media(max-width:480px){.cend-acts button{padding:0 14px;font-size:12.5px;gap:5px}}

/* ---- 底栏：深色玻璃 + 顶发丝线 ---- */
.creader-bottom{position:absolute;bottom:0;left:0;right:0;z-index:4;display:flex;
  background:var(--cbar);backdrop-filter:saturate(150%) blur(18px);-webkit-backdrop-filter:saturate(150%) blur(18px);
  border-top:1px solid var(--cbar-line);box-shadow:0 -1px 0 rgba(255,59,92,.10),0 -10px 30px -22px rgba(0,0,0,.9);
  padding-bottom:env(safe-area-inset-bottom);transition:transform .3s}
.creader-bic{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 0;
  font-size:11px;font-weight:600;color:var(--cbar-muted);background:transparent;transition:color .2s}
.creader-bic svg{width:20px;height:20px}
.creader-bic:hover{color:var(--cacc)}
.creader-bic:disabled{opacity:.3}

body.creader-immersive .creader-top{transform:translateY(-100%)}
body.creader-immersive .creader-bottom{transform:translateY(100%)}

/* ---- 设置抽屉：深色影院面板（与 chrome 一致，正文底色不受影响）---- */
.creader-sheet{position:absolute;inset:0;z-index:6;display:none}
.creader-sheet.open{display:block}
.creader-sheet__bd{position:absolute;inset:0;background:rgba(4,4,8,.58);backdrop-filter:blur(2px)}
.creader-sheet__panel{position:absolute;left:0;right:0;bottom:0;max-width:600px;margin:0 auto;
  background:var(--csheet-bg);color:var(--cbar-ink);border-top:1px solid var(--csheet-line);
  border-radius:22px 22px 0 0;padding:18px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -22px 60px -22px rgba(0,0,0,.85),0 -1px 0 rgba(255,59,92,.16);
  transform:translateY(102%);transition:transform .34s cubic-bezier(.2,.7,.2,1)}
.creader-sheet.open .creader-sheet__panel{transform:none}
.cs-grip{width:40px;height:4px;border-radius:3px;background:var(--cacc);opacity:.55;margin:0 auto 14px;
  box-shadow:0 0 12px -1px rgba(255,59,92,.7)}
.cs-row{padding:13px 2px;border-bottom:1px solid var(--csheet-line)}
.cs-row:last-child{border-bottom:none}
.cs-lab{font-family:var(--font-latin);font-size:11px;color:var(--cgold);margin-bottom:12px;letter-spacing:.12em;text-transform:uppercase}
.cs-themes{display:flex;gap:13px}
.cs-theme{width:38px;height:38px;border-radius:50%;border:2px solid transparent;cursor:pointer;position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);transition:.2s}
.cs-theme--white{background:#FBFAF7}
.cs-theme--paper{background:#EFE7D6}
.cs-theme--dark{background:#101013}
.cs-theme:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 0 0 3px rgba(255,255,255,.06)}
.cs-theme.on{border-color:var(--cacc);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 16px -2px rgba(255,59,92,.85)}
.cs-theme.on::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--cacc);box-shadow:0 0 8px rgba(255,59,92,.9)}
.cs-seg{display:flex;gap:8px}
.cs-seg button{flex:1;padding:11px 0;border-radius:11px;border:1px solid var(--csheet-line);
  background:rgba(255,255,255,.04);color:var(--cbar-ink);font-family:var(--font-sans);font-size:14px;font-weight:600;transition:.18s}
.cs-seg button:hover{border-color:rgba(255,59,92,.45)}
.cs-seg button.on{background:linear-gradient(135deg,#FF3B5C,#FF6177);color:#fff;border-color:transparent;
  box-shadow:0 10px 24px -10px rgba(255,59,92,.7)}

@media (min-width:900px){
  .creader-flow{padding-top:62px}
  .creader-bottom{justify-content:center;gap:46px}
  .creader-bic{flex:0 0 auto;min-width:96px;flex-direction:row;gap:8px;font-size:13px}
  .creader-sheet__panel{bottom:26px;left:24px;right:24px;border-radius:20px}
}
/* 移动端整宽：忽略 PC 限宽 */
@media (max-width:899px){
  .creader-flow{max-width:none}
}


/* ============================================================
   comic/chapter.html page additions
   Extracted from page inline styles.
   ============================================================ */
html{font-size:62.5%}
/* 书签按钮激活态 */
.creader-ic.mk.on{color:var(--cgold);border-color:rgba(230,184,115,.5)}
.creader-ic.mk.on svg{fill:var(--cgold)}
.creader-ic.moon svg,.creader-ic.sun svg{width:19px;height:19px}
/* 顶/底快速跳转(超一屏才显示) */
.creader-jump{position:absolute;right:14px;bottom:84px;z-index:5;display:flex;flex-direction:column;gap:10px}
.creader-jump[hidden]{display:none}
.creader-jump button{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--csheet-bg);color:var(--cbar-ink);border:1px solid var(--csheet-line);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.6);cursor:pointer;transition:.18s}
.creader-jump button:hover{color:var(--cacc);border-color:rgba(255,59,92,.5)}
.creader-jump svg{width:19px;height:19px}
body.creader-immersive .creader-jump{opacity:0;pointer-events:none;transition:opacity .3s}
/* 目录抽屉(器内、自包含,从左滑出,沿用小说阅读器交互) */
.creader-cat{position:absolute;inset:0;z-index:7;display:none}
.creader-cat.open{display:block}
.creader-cat__bd{position:absolute;inset:0;background:rgba(4,4,8,.58);backdrop-filter:blur(2px)}
.creader-cat__panel{position:absolute;top:0;left:0;bottom:0;width:min(86vw,360px);display:flex;flex-direction:column;
  background:var(--csheet-bg);color:var(--cbar-ink);border-right:1px solid var(--csheet-line);
  box-shadow:22px 0 60px -22px rgba(0,0,0,.85);transform:translateX(-102%);transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.creader-cat.open .creader-cat__panel{transform:none}
.cc-head{display:flex;align-items:center;gap:10px;padding:16px 12px 12px;border-bottom:1px solid var(--csheet-line)}
.cc-tabs{flex:1;display:flex;gap:6px}
.cc-vtab{padding:6px 12px;border-radius:9px;border:1px solid transparent;background:transparent;color:var(--cbar-muted);
  font-family:var(--font-serif);font-weight:700;font-size:15px;cursor:pointer;transition:.16s}
.cc-vtab.on{color:var(--cbar-ink);background:rgba(255,59,92,.14);border-color:rgba(255,59,92,.32)}
.cc-x{width:34px;height:34px;flex:none;border:0;background:none;color:var(--cbar-muted);font-size:26px;line-height:1;cursor:pointer;border-radius:9px}
.cc-x:hover{color:var(--cacc);background:var(--cbar-hover)}
.cc-list{flex:1;overflow-y:auto;padding:6px 6px 18px}
.cc-row{display:flex;align-items:center;gap:11px;padding:12px 12px;border-radius:11px;cursor:pointer;transition:.14s}
.cc-row:hover{background:var(--cbar-hover)}
/* 与小说阅读器目录一致：行首序号列隐藏，话名本身已带「第 N 话」。只藏不删，JS 与书签逻辑不受影响。 */
.cc-row__no{display:none}
.cc-row__nm{flex:1;min-width:0;font-size:14px;color:var(--cbar-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-row.cur .cc-row__nm,.cc-row.cur .cc-row__no{color:var(--cacc);font-weight:700}
/* 话权限标签(已购买/注册会员/游客)，与小说阅读器目录的 .rc-row__acc 同一档视觉 */
.cc-row__acc{flex:none;font-size:10px;font-weight:500;color:var(--cbar-muted);opacity:.6;line-height:19px}
.cc-mark__x{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;color:var(--cbar-muted);font-size:18px;line-height:1}
.cc-mark__x:hover{background:var(--cbar-hover);color:var(--cacc)}
.cc-empty{padding:48px 18px;text-align:center;color:var(--cbar-muted);font-size:13px;line-height:1.9}
/* 轻量提示 */
.creader-toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%) translateY(8px);z-index:9;
  background:rgba(20,20,26,.94);color:#fff;font-size:13px;padding:9px 16px;border-radius:999px;
  opacity:0;pointer-events:none;transition:.22s;box-shadow:0 8px 24px -8px rgba(0,0,0,.7)}
.creader-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}