/* ============================================================
 * Modern theme - based on Gradient Able (Bootstrap 5)
 * 仅承载主题外壳；.coma 内容渲染样式仍由 base.css 提供。
 * ============================================================ */

/* ---------- 全局 ---------- */
body.modern-page {
    background: #f5f7fb;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                 "PingFang SC", "Microsoft YaHei", sans-serif;
}
/* Sticky footer：body 弹性纵向，footer auto-margin 推到底
   reader 页用 pc-container 自带的 min-height 处理，不参与这套 flex。 */
body.modern-page:not(.modern-page-reader) {
    display: flex;
    flex-direction: column;
}
body.modern-page:not(.modern-page-reader) > .modern-footer {
    margin-top: auto;
}

/* ---------- 站点级 pc-header（非 reader 页面用，跟随 .content 宽度）---------- */
.pc-header.pc-header-site {
    /* 渐变 bar 仍然全屏贴顶（in-flow），仅内部 .container 跟随内容宽度 */
    position: relative !important; /* 不能用 static，否则 z-index 失效，下拉会被 card 盖住 */
    left: auto;
    right: auto;
    top: auto;
    z-index: 1025;
    display: block;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    overflow: visible; /* 让 dropdown 可以溢出 */
    box-shadow: 0 2px 8px rgba(27, 46, 94, 0.08);
}
.modern-site-header-inner {
    display: flex;
    align-items: center;
    min-height: 60px;
    gap: 8px;
}
.modern-site-brand {
    display: inline-flex;
    align-items: center;
    color: #fff;
}
.modern-site-brand .logo-lg {
    object-fit: contain;
    padding: 3px;
}
.modern-site-brand .logo-text { letter-spacing: 0.3px; }

/* 站点级 header 里的搜索框跟着收窄，避免挤掉导航 */
.pc-header.pc-header-site .modern-search-header {
    width: 280px;
    max-width: 30vw;
}
@media (max-width: 991.98px) {
    .pc-header.pc-header-site .modern-search-header { width: 220px; max-width: 40vw; }
}

/* ---------- 顶部导航 ---------- */
.modern-navbar {
    height: 64px;
    background: linear-gradient(135deg, #4099ff 0%, #73b4ff 100%);
    box-shadow: 0 2px 8px rgba(27, 46, 94, 0.08);
    z-index: 1030;
}
.modern-navbar .navbar-logo {
    object-fit: contain;
    padding: 3px;
}
.modern-navbar .navbar-brand,
.modern-navbar .navbar-site-name {
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.modern-navbar .nav-link {
    color: rgba(255,255,255,0.88) !important;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: color .15s ease;
}
.modern-navbar .nav-link:hover,
.modern-navbar .nav-link:focus {
    color: #fff !important;
}
.modern-navbar .navbar-toggler {
    color: #fff;
}
.modern-navbar .dropdown-menu {
    border-radius: 8px;
    border: 0;
    box-shadow: 0 8px 24px rgba(27, 46, 94, 0.12);
    margin-top: 0.25rem;
}

/* 搜索框 */
.modern-search {
    position: relative;
    width: 280px;
    max-width: 100%;
}
.modern-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ea7b8;
    font-size: 16px;
    pointer-events: none;
}
.modern-search-input {
    padding-left: 34px;
    padding-right: 70px;
    height: 38px;
    background: rgba(255,255,255,0.95);
    border: 0;
    border-radius: 20px;
}
.modern-search-input:focus {
    box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
    background: #fff;
}
.modern-search-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 16px;
    padding: 0.25rem 0.75rem;
}

.modern-mobile-search.offcanvas.offcanvas-top {
    --bs-offcanvas-height: 64px !important;
    height: 64px !important;
    min-height: 0 !important;
    max-height: 64px !important;
}
.modern-mobile-search .offcanvas-body {
    padding: 0.5rem 0.75rem;
}
.modern-mobile-nav-parent {
    background: #f8f9fc;
}

/* ---------- Hero ---------- */
.modern-hero {
    position: relative;
    height: 600px;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #4099ff 0%, #73b4ff 50%, #b39ddb 100%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
@media (max-width: 767.98px) {
    .modern-hero { height: 300px; }
}
.modern-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 100%);
}
.modern-hero-content {
    position: relative;
    z-index: 2;
    padding: 60px 0;
    width: 100%;
}
.modern-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 180px;
}
@media (max-width: 767.98px) {
    .modern-hero-icon {
        width: 120px;
        height: 120px;
        font-size: 80px;
    }
}
.modern-hero-meta .badge {
    font-size: 0.85rem;
    padding: 0.5rem 0.85rem;
    border-radius: 20px;
}
/* hero meta 行内 icon 与中文字符基线不同，用 inline-flex 强制居中对齐到水平中线 */
.modern-hero-meta > span,
.modern-hero-meta > a {
    display: inline-flex;
    align-items: center;
}
.modern-hero-meta i.ph { line-height: 1; }

/* ---------- 通用 section/content ---------- */
.modern-section {
    padding: 48px 0;
}
.modern-content {
    padding: 32px 0;
}
.modern-section-title {
    border-left: 4px solid var(--bs-primary, #4099ff);
    padding-left: 12px;
    line-height: 1;
}

/* 卡片 */
.modern-feature-card {
    border: 0;
    box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.08);
    border-radius: 10px;
    transition: box-shadow .2s ease, transform .2s ease;
}
.modern-feature-card:hover {
    box-shadow: 0 8px 24px rgba(27, 46, 94, 0.12);
    transform: translateY(-2px);
}
.modern-feature-card .avtar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

/* ---------- 书籍列表行 ---------- */
.modern-book-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 20px;
}
.modern-book-cover {
    width: 80px;
    height: auto;
    max-height: 110px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    flex-shrink: 0;
}
.modern-line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.modern-cat-book-item {
    padding: 4px 8px;
    border-radius: 4px;
}
.modern-cat-book-item:hover {
    background: rgba(64, 153, 255, 0.08);
}

/* ---------- 书详情 ---------- */
/* 用 float 让文字环绕封面：默认在右侧，文字超出封面高度后自动回到封面左缘下方 */
.modern-book-detail { display: block; }
.modern-book-detail::after { content: ""; display: block; clear: both; }
.modern-book-detail-cover {
    float: left;
    width: 100px;
    height: auto;
    max-height: 150px;
    margin: 0 20px 12px 0;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
@media (max-width: 576px) {
    .modern-book-detail-cover {
        width: 100px;
        max-height: 140px;
        margin-right: 14px;
    }
}

/* TOC tree (book_toc) */
.modern-toc-h1 a, .modern-toc-h2 a {
    font-weight: 600;
}
.modern-toc-h1 { padding: 6px 0; font-size: 1.05rem; }
.modern-toc-h2 { padding: 4px 0 4px 16px; font-size: 1rem; }
.modern-toc-h3 { padding: 3px 0 3px 32px; font-size: 0.95rem; }
.modern-toc-h4 { padding: 3px 0 3px 48px; font-size: 0.9rem; }
.modern-toc-h5 { padding: 2px 0 2px 64px; font-size: 0.875rem; }
.modern-toc-h6 { padding: 2px 0 2px 80px; font-size: 0.85rem; }

/* ---------- Reader (book_content) 布局 ---------- */
/* 阅读页使用 Gradient Able 自带的 pc-sidebar/pc-header/pc-container 布局，
   因此关闭全局 modern-page 的 body padding-top（pc-container 已经为 fixed header 让位）。 */
body.modern-page-reader { padding-top: 0; background: #f5f7fb; }

/* 侧栏宽度：从 245px → 300px。
   关键：Gradient Able 在 .navbar-wrapper / .pc-sidebar / .m-header / .pc-container 等
   多个位置都用 245px 写死，必须一并覆盖才能让滚动条/箭头/hover 背景一起跟上。 */
.modern-page-reader .pc-sidebar { width: 300px; }
.modern-page-reader .pc-sidebar .navbar-wrapper { width: 300px; }
.modern-page-reader .pc-sidebar.pc-sidebar-hide,
.modern-page-reader .pc-sidebar.pc-sidebar-hide .navbar-wrapper { width: 0; }
.modern-page-reader .pc-sidebar ~ .pc-container { margin-left: 300px; }
.modern-page-reader .pc-sidebar.pc-sidebar-hide ~ .pc-container { margin-left: 0; }
.modern-page-reader .pc-sidebar ~ .pc-footer { margin-left: 300px; }
.modern-page-reader .pc-sidebar.pc-sidebar-hide ~ .pc-footer { margin-left: 0; }
.modern-page-reader .pc-header .m-header { width: 300px; }
@media (max-width: 1024px) {
    .modern-page-reader .pc-sidebar { left: -300px; }
    .modern-page-reader .pc-sidebar.mob-sidebar-active { left: 0; }
    .modern-page-reader .pc-sidebar ~ .pc-container,
    .modern-page-reader .pc-sidebar ~ .pc-footer { margin-left: 0; }
}

/* Gradient Able 的 .pc-sidebar .navbar-content 原生依赖 simplebar/perfect-scrollbar
   提供滚动条；未引入这些库时回退到原生滚动，并阻止滚动穿透到 body。 */
.pc-sidebar .navbar-content {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.18) transparent;
}
.pc-sidebar .navbar-content::-webkit-scrollbar { width: 6px; }
.pc-sidebar .navbar-content::-webkit-scrollbar-track { background: transparent; }
.pc-sidebar .navbar-content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 3px;
}
.pc-sidebar .navbar-content::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }
[data-pc-sidebar-theme='dark'] .pc-sidebar .navbar-content {
    scrollbar-color: rgba(255,255,255,0.25) transparent;
}
[data-pc-sidebar-theme='dark'] .pc-sidebar .navbar-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
}

/* pc-header 内部置入搜索框时的微调：常态白底黑字，避免与渐变 header 同色 */
.pc-header .modern-search-header {
    width: 320px;
    max-width: 50vw;
}
.pc-header .modern-search-header .modern-search-icon { color: #6c757d; }
.pc-header .modern-search-header .modern-search-input {
    background: #fff !important;
    color: #1f2937 !important;
    border: 1px solid rgba(0,0,0,0.06);
}
.pc-header .modern-search-header .modern-search-input::placeholder { color: #9aa3b2; }
.pc-header .modern-search-header .modern-search-input:focus {
    background: #fff !important;
    color: #1f2937 !important;
    box-shadow: 0 0 0 2px rgba(64,153,255,0.35);
    border-color: rgba(64,153,255,0.5);
}

@media (max-width: 575.98px) {
    .pc-header .modern-search-header { width: 100%; max-width: 100%; }
    .pc-header .modern-search-header .modern-search-btn { display: none; }
    .pc-header .modern-search-header .modern-search-input { padding-right: 12px; }
}

/* pc-header 右侧导航菜单项（迁移自 classical 的 libSetting.NavItems）
   不能复用 .pc-head-link：它是 44×44; overflow:hidden 的圆形图标按钮，文字会被裁。 */
.pc-header .reader-nav-item {
    align-items: center;
    min-height: 60px;
}
.pc-header .reader-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    margin: 0 2px;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}
.pc-header .reader-nav-link:hover,
.pc-header .reader-nav-link:focus,
.pc-header .reader-nav-item.show > .reader-nav-link {
    color: #fff;
    background: transparent;
}
.pc-header .reader-nav-link .reader-nav-text {
    color: #fff;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
}
.pc-header .reader-nav-link .reader-nav-caret {
    color: rgba(255,255,255,0.85);
    font-size: 0.75rem;
}
.pc-header .reader-nav-link.dropdown-toggle::after { display: none; }

/* pc-h-dropdown 默认（Gradient Able 的 _pc-header.scss）会让下拉菜单在 sm 以下
   断点撑满 viewport（min/max-width:calc(100vw - 24px)），那是为长长的通知面板设计的；
   我们的菜单只有几项，需要让它按内容宽度展示。 */
.pc-header .pc-h-dropdown {
    min-width: initial;
    border-radius: 6px;
}
@media (max-width: 575.98px) {
    .pc-header .pc-h-item .pc-h-dropdown {
        left: auto !important;
        min-width: initial;
        max-width: none;
        width: auto;
    }
}
.pc-header .pc-h-dropdown .dropdown-item.disabled {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
}

/* logo + 站点名在 pc-header（渐变 header）里需要白色文字 */
.pc-header .m-header .logo-text {
    color: #fff;
    letter-spacing: 0.3px;
}
.pc-header .m-header .b-brand { display: inline-flex; align-items: center; text-decoration: none; }
.pc-header .m-header .logo-lg,
.pc-sidebar .m-header .logo-lg {
    width: 40px;
    height: 40px;
    object-fit: contain;
    padding: 3px;
    flex-shrink: 0;
}

/* 阅读页主卡片 */
.modern-reader-card {
    border: 0;
    box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.08);
    border-radius: 10px;
}
.modern-reader-card .coma { font-size: 1.05rem; }
.modern-reader-card .coma h1 { font-size: 1.6rem; }
.modern-reader-card .btn-light-primary {
    background: rgba(64,153,255,0.1);
    color: var(--bs-primary, #4099ff);
    border: 0;
}
.modern-reader-card .btn-light-primary:hover {
    background: var(--bs-primary, #4099ff);
    color: #fff;
}

/* ---------- reader-row：flex 布局 ----------
   TOC 面板 flex:1 铺满；阅读列固定最大阅读宽度；中间 gap 24px。 */
.modern-reader-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.modern-toc-pinned {
    flex: 0 0 300px;
    max-width: 300px;
    min-width: 0;
    position: sticky;
    top: 80px;
}
.modern-reader-article-col {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}
.modern-reader-article-col--full {
    flex: 1 1 auto;
}

/* 大屏给 reader-row 左右留出空间，避免被右下角 fixbar / 浮动操作条遮挡。
   仅作用于 reader 全屏页面 (.pc-content 内)，book_toc 等放在 .container 中
   的页面有自己的 gutter，不需要再加 margin。 */
@media (min-width: 1200px) {
    .pc-content > .modern-reader-row { margin-left: 24px; margin-right: 24px; }
}
@media (min-width: 1600px) {
    .pc-content > .modern-reader-row { margin-left: 40px; margin-right: 40px; }
}

@media (max-width: 991.98px) {
    .modern-reader-row { display: block; }
    .modern-toc-pinned { position: static; }
    .modern-reader-article-col { max-width: none; }
}

/* TOC 面板填满其父容器宽度 */
.reader-toc-offcanvas,
.reader-toc-offcanvas .offcanvas-body,
.reader-toc-panel,
.reader-toc-panel > .card { width: 100%; }

/* 移动端：offcanvas-lg 此时变成全屏弹出层（高度=100vh），
   需要让 panel/card 跟着撑满，scroll-block 用 flex 填满剩余高度。 */
@media (max-width: 991.98px) {
    .reader-toc-offcanvas { height: 100%; display: flex; flex-direction: column; }
    .reader-toc-offcanvas .offcanvas-body { flex: 1 1 auto; min-height: 0; display: flex; }
    .reader-toc-offcanvas .reader-toc-panel { flex: 1 1 auto; min-height: 0; display: flex; }
    .reader-toc-offcanvas .reader-toc-panel > .card {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        border-radius: 0;
        box-shadow: none;
    }
    .reader-toc-offcanvas .reader-toc-panel .scroll-block {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }
}

/* ---------- 章内 TOC pinned 面板（仿 ecom-filter）---------- */
.reader-toc-panel .card {
    border: 0;
    box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.08);
    border-radius: 10px;
}
.reader-toc-panel .card-header {
    border-bottom: 1px solid var(--bs-border-color, #eef0f5);
    padding: 14px 18px;
}
.reader-toc-panel .card-header h5 {
    font-size: 1rem;
    color: var(--bs-primary, #4099ff);
}
.reader-toc-panel .scroll-block {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}
.reader-toc-panel .card-body { padding: 10px 14px 16px; }

/* 注入进来的 #coma-toc 列表样式 */
#reader-chapter-toc ul,
#reader-chapter-toc ol {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
#reader-chapter-toc ul ul,
#reader-chapter-toc ol ol {
    padding-left: 14px;
    border-left: 1px dashed #d6dbe6;
    margin-left: 4px;
}
#reader-chapter-toc li { margin: 2px 0; }
#reader-chapter-toc a {
    display: block;
    padding: 5px 10px;
    color: #39465f;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    transition: background .12s ease, color .12s ease;
}
#reader-chapter-toc a:hover,
#reader-chapter-toc a.active {
    background: rgba(64,153,255,0.1);
    color: var(--bs-primary, #4099ff);
}


/* 阅读页主内容列在 pc-content 内的留白 */
#reader-main-col { min-width: 0; }

/* TOC 树（book_toc 页继续使用——保留 modern-toc-h* 样式即可，无需树结构变量）*/

/* ---------- 章节翻页按钮 ---------- */
.modern-reader-card .btn-light-primary {
    background: rgba(64,153,255,0.1);
    color: var(--bs-primary, #4099ff);
    border: 0;
}
.modern-reader-card .btn-light-primary:hover {
    background: var(--bs-primary, #4099ff);
    color: #fff;
}

/* ---------- 面包屑 ---------- */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0;
    font-size: 0.875rem;
    align-items: center;
}
.breadcrumb a { text-decoration: none; }
.breadcrumb-item.active a { color: #6c757d; pointer-events: none; }
/* 用 Phosphor 图标替换默认的 ">" 文本分隔符。
   原因：">" 在多数字体里的字形垂直居中于 em-box，而中文字符视觉重心更靠下，
   并排放置时分隔符看起来比文字偏高。改用图标后两者通过 inline-flex+align-items
   一起以视觉中心对齐，就不会"漂"。 */
.breadcrumb-item { display: inline-flex; align-items: center; }
.breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.breadcrumb-item + .breadcrumb-item::before {
    font-family: "Phosphor", sans-serif;
    content: "\e13a"; /* ph-caret-right (regular variant) */
    padding: 0 8px;
    font-size: 0.8em;
    color: #adb5bd;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* ---------- 页脚 ---------- */
.modern-footer {
    margin-top: 24px;
    padding: 24px 0;
    background: #fff;
    border-top: 1px solid #eef0f5;
    text-align: center;
    color: #6c757d;
}

[v-cloak] { display: none !important; }

/* ---------- 暗色模式下 .coma 内容的可读性覆盖 ----------
 * base.css 给 .coma 写死了 color: var(--nord1)（正文）/ var(--nord0)（标题），
 * 暗色模式下背景变深、文字仍为暗色就完全看不见。这里统一覆盖。 */
[data-pc-theme='dark'] .coma,
[data-darkmode='dark'] .coma {
    color: #d7dde6;
}
[data-pc-theme='dark'] .coma h1,
[data-pc-theme='dark'] .coma h2,
[data-pc-theme='dark'] .coma h3,
[data-pc-theme='dark'] .coma h4,
[data-pc-theme='dark'] .coma h5,
[data-pc-theme='dark'] .coma h6,
[data-darkmode='dark'] .coma h1,
[data-darkmode='dark'] .coma h2,
[data-darkmode='dark'] .coma h3,
[data-darkmode='dark'] .coma h4,
[data-darkmode='dark'] .coma h5,
[data-darkmode='dark'] .coma h6 {
    color: #f0f3f8;
}
[data-pc-theme='dark'] .coma a,
[data-darkmode='dark'] .coma a {
    color: #6db6ff;
}
[data-pc-theme='dark'] .coma code,
[data-darkmode='dark'] .coma code {
    color: #66d9ef;
    background: rgba(255,255,255,0.08);
}
[data-pc-theme='dark'] .coma strong,
[data-pc-theme='dark'] .coma b,
[data-darkmode='dark'] .coma strong,
[data-darkmode='dark'] .coma b {
    color: #fff;
}
/* 同时让阅读卡片的底色跟着变深，避免依然亮白让眼睛刺 */
[data-pc-theme='dark'] .modern-reader-card,
[data-pc-theme='dark'] .reader-toc-panel .card {
    background: #2b3038;
    color: #d7dde6;
}
[data-pc-theme='dark'] .modern-reader-card .breadcrumb-item.active a,
[data-pc-theme='dark'] .modern-reader-card .breadcrumb a,
[data-pc-theme='dark'] .reader-toc-panel a {
    color: #cfd7e3;
}
/* 注意：data-pc-theme 是挂在 <body> 上，所以要同元素选择，不能用后代选择器 */
body[data-pc-theme='dark'].modern-page,
body[data-pc-theme='dark'].modern-page-reader {
    background: #1d2229;
    color: #d7dde6;
}
html:has(body[data-pc-theme='dark']) { background: #1d2229; }
body[data-pc-theme='dark'] .pc-container,
body[data-pc-theme='dark'] .pc-content { background: transparent; }
body[data-pc-theme='dark'] .modern-footer {
    background: #2b3038;
    border-top-color: rgba(255,255,255,0.06);
    color: #aab3c2;
}

/* TOC 面板的链接 / 标题在暗色下 */
[data-pc-theme='dark'] .reader-toc-panel .card-header {
    border-bottom-color: rgba(255,255,255,0.08);
}
[data-pc-theme='dark'] .reader-toc-panel .card-header h5 { color: #6db6ff; }
[data-pc-theme='dark'] #reader-chapter-toc a { color: #cfd7e3; }
[data-pc-theme='dark'] #reader-chapter-toc a:hover,
[data-pc-theme='dark'] #reader-chapter-toc a.active {
    background: rgba(109,182,255,0.16);
    color: #fff;
}
[data-pc-theme='dark'] #reader-chapter-toc ul ul,
[data-pc-theme='dark'] #reader-chapter-toc ol ol {
    border-left-color: rgba(255,255,255,0.14);
}

/* ---------- 浮动操作条（fixbar）：替代 layui.util.fixbar ---------- */
.modern-fixbar {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.modern-fixbar-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: var(--bs-primary, #4099ff);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.modern-fixbar-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.22);
}
.modern-fixbar-btn i { font-size: 20px; }
@media (max-width: 575.98px) {
    .modern-fixbar { right: 12px; bottom: 12px; }
    .modern-fixbar-btn { width: 40px; height: 40px; }
}

/* ---------- 内容里 .coma 的小调整（在 modern 卡片中） ---------- */
.modern-reader-card .coma { font-size: 1.05rem; }
.modern-reader-card .coma h1 { font-size: 1.6rem; }