/* ==========================================================================
   阅读设置（参考 hlcgw 站点）：字体大小 / 主题色 / 字体
   - 字体大小：JS 直接设置 documentElement.style.fontSize，全站 rem 等比缩放
   - 主题色：通过 body class（reading-theme-*）+ 站点原生 theme-dark/dark-mode 联动
   - 字体：通过 body class（reading-font-*）切换 font-family
   - 持久化在 read-settings.js 中通过 localStorage
   ========================================================================== */

/* ==========================================================================
   主题色：默认 / 米色 / 护眼绿 / 夜间
   说明：选 default/sepia/mint 时 JS 会移除 theme-dark dark-mode；
        选 night 时 JS 会加上 theme-dark dark-mode；
        sepia/mint 在浅色基础上额外覆盖背景与正文颜色。
   ========================================================================== */

/* 米色（沉浸阅读经典色） */
body.reading-theme-sepia,
body.reading-theme-sepia #wrap,
body.reading-theme-sepia #body,
body.reading-theme-sepia #content {
    background-color: #f4ecd8 !important;
    color: #5b4636 !important;
}

body.reading-theme-sepia .post-content {
    color: #5b4636 !important;
}

/* 护眼绿 */
body.reading-theme-mint,
body.reading-theme-mint #wrap,
body.reading-theme-mint #body,
body.reading-theme-mint #content {
    background-color: #cce8cf !important;
    color: #1f3b1d !important;
}

body.reading-theme-mint .post-content {
    color: #1f3b1d !important;
}

/* night/default 不需要额外样式：交给 mirages 站点本身的 dark/light 主题接管 */

/* ==========================================================================
   字体：默认（系统）/ 衬线 / 圆润非衬线
   ========================================================================== */
body.reading-font-default,
body.reading-font-default .post-content,
body.reading-font-default .post-card-title,
body.reading-font-default .post-card-info {
    font-family: 'Mirages Custom', 'Open Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif !important;
}

body.reading-font-serif,
body.reading-font-serif .post-content,
body.reading-font-serif .post-card-title,
body.reading-font-serif .post-card-info {
    font-family: 'Noto Serif CJK SC', 'Source Han Serif', 'PT Serif', 'SongTi SC', Georgia, serif !important;
}

body.reading-font-sans,
body.reading-font-sans .post-content,
body.reading-font-sans .post-card-title,
body.reading-font-sans .post-card-info {
    font-family: 'Open Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif !important;
}

/* ==========================================================================
   触发按钮
   ========================================================================== */
#nav-side-toolbar-read-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity .2s ease;
}

#nav-side-toolbar-read-settings:hover {
    opacity: .8;
}

#nav-side-toolbar-read-settings .icon img {
    width: 24px;
    height: 24px;
    display: block;
}

/* ==========================================================================
   弹层
   ========================================================================== */
.read-settings-panel {
    position: fixed;
    top: 64px;
    right: 16px;
    z-index: 9999;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: #fff;
    color: #2c3e50;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 18px 18px 20px;
    display: none;
    font-size: 14px;
    line-height: 1.5;
}

.read-settings-panel.is-open {
    display: block;
}

.read-settings-panel .rs-section+.rs-section {
    margin-top: 18px;
}

.read-settings-panel .rs-title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: .5px;
}

.read-settings-panel .rs-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.read-settings-panel .rs-option {
    flex: 1 1 auto;
    min-width: 56px;
    padding: 8px 12px;
    background: #f3f4f6;
    border: 1px solid transparent;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: all .15s ease;
    color: #374151;
}

.read-settings-panel .rs-option:hover {
    background: #e5e7eb;
}

.read-settings-panel .rs-option.is-active {
    background: #fff;
    border-color: #2563eb;
    color: #2563eb;
    font-weight: 600;
}

/* 主题色 swatch */
.read-settings-panel .rs-option-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
}

.read-settings-panel .rs-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.read-settings-panel .rs-swatch.swatch-default {
    background: #ffffff;
}

.read-settings-panel .rs-swatch.swatch-sepia {
    background: #f4ecd8;
}

.read-settings-panel .rs-swatch.swatch-mint {
    background: #cce8cf;
}

.read-settings-panel .rs-swatch.swatch-night {
    background: #1a1a1a;
}

/* 字体大小：A- / A+ 控件 */
.read-settings-panel .rs-size-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.read-settings-panel .rs-size-btn {
    flex: 0 0 auto;
    width: 48px;
    height: 40px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 8px;
    cursor: pointer;
    color: #374151;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.read-settings-panel .rs-size-btn:hover:not(:disabled) {
    background: #fff;
    border-color: #2563eb;
    color: #2563eb;
}

.read-settings-panel .rs-size-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.read-settings-panel .rs-size-letter {
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.read-settings-panel .rs-size-letter-small {
    font-size: 14px;
}

.read-settings-panel .rs-size-letter-large {
    font-size: 18px;
}

.read-settings-panel .rs-size-display {
    flex: 1 1 auto;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #2563eb;
    font-variant-numeric: tabular-nums;
}

/* 移动端贴边 */
@media (max-width: 760px) {
    .read-settings-panel {
        top: auto;
        bottom: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: 60vh;
        overflow: auto;
    }
}

/* 夜间主题下面板自身适配 */
body.reading-theme-night .read-settings-panel,
body.theme-dark.dark-mode .read-settings-panel {
    background: #232323;
    color: #d0d0d0;
}

body.reading-theme-night .read-settings-panel .rs-title,
body.theme-dark.dark-mode .read-settings-panel .rs-title {
    color: #9ca3af;
}

body.reading-theme-night .read-settings-panel .rs-option,
body.theme-dark.dark-mode .read-settings-panel .rs-option {
    background: #2f2f2f;
    color: #d0d0d0;
}

body.reading-theme-night .read-settings-panel .rs-option:hover,
body.theme-dark.dark-mode .read-settings-panel .rs-option:hover {
    background: #3a3a3a;
}

body.reading-theme-night .read-settings-panel .rs-option.is-active,
body.theme-dark.dark-mode .read-settings-panel .rs-option.is-active {
    background: #1a1a1a;
    border-color: #60a5fa;
    color: #60a5fa;
}

body.reading-theme-night .read-settings-panel .rs-size-btn,
body.theme-dark.dark-mode .read-settings-panel .rs-size-btn {
    background: #2f2f2f;
    border-color: #3a3a3a;
    color: #d0d0d0;
}

body.reading-theme-night .read-settings-panel .rs-size-btn:hover:not(:disabled),
body.theme-dark.dark-mode .read-settings-panel .rs-size-btn:hover:not(:disabled) {
    background: #1a1a1a;
    border-color: #60a5fa;
    color: #60a5fa;
}

body.reading-theme-night .read-settings-panel .rs-size-display,
body.theme-dark.dark-mode .read-settings-panel .rs-size-display {
    color: #60a5fa;
}

/* ==========================================================================
   登录弹窗（.login_modal / .login_content）主题适配
   说明：原站点登录框默认深色 (#222)；default/sepia/mint 都要覆盖；night 保持原样。
   ========================================================================== */

/* default（浅色）：强制白底深字 */
body.reading-theme-default .login_content {
    background-color: #ffffff !important;
    color: #2c3e50 !important;
}

body.reading-theme-default .login_dialog .slogan,
body.reading-theme-default .login_tips_title,
body.reading-theme-default .login_tips_item {
    color: #2c3e50 !important;
}

body.reading-theme-default .login_form_item>input {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    color: #2c3e50 !important;
}

body.reading-theme-default .login_form_item>input::placeholder {
    color: #9ca3af !important;
}

/* sepia（米色） */
body.reading-theme-sepia .login_content {
    background-color: #f7f0dc !important;
    color: #5b4636 !important;
}

body.reading-theme-sepia .login_dialog .slogan,
body.reading-theme-sepia .login_tips_title,
body.reading-theme-sepia .login_tips_item {
    color: #5b4636 !important;
}

body.reading-theme-sepia .login_form_item>input {
    background-color: #f4ecd8 !important;
    border-color: #d6c9a3 !important;
    color: #5b4636 !important;
}

body.reading-theme-sepia .login_form_item>input::placeholder {
    color: #8a7960 !important;
}

/* mint（护眼绿） */
body.reading-theme-mint .login_content {
    background-color: #d8eedb !important;
    color: #1f3b1d !important;
}

body.reading-theme-mint .login_dialog .slogan,
body.reading-theme-mint .login_tips_title,
body.reading-theme-mint .login_tips_item {
    color: #1f3b1d !important;
}

body.reading-theme-mint .login_form_item>input {
    background-color: #cce8cf !important;
    border-color: #9bc2a0 !important;
    color: #1f3b1d !important;
}

body.reading-theme-mint .login_form_item>input::placeholder {
    color: #4a6b48 !important;
}

/* night：保留站点原有深色样式，不做覆盖 */

/* ==========================================================================
   导航栏适配：mirages 把导航尺寸和按钮重置规则只放在 body.theme-dark 下
   （search.css 1357 行），切到非 dark 主题会导致：
     1) <button class="nav-link"> 露出浏览器默认 background/border
     2) 没了 min/max-width 间距塌陷成"按文字宽度撑开"
   下面把那份规则在 default/sepia/mint 下还原；下拉菜单背景同理处理。
   ========================================================================== */
body.reading-theme-default .navbar-color .navbar-nav .nav-link,
body.reading-theme-sepia .navbar-color .navbar-nav .nav-link,
body.reading-theme-mint .navbar-color .navbar-nav .nav-link {
    width: 100%;
    min-width: 4rem;
    max-width: 6.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    font-size: 0.9375rem;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.reading-theme-default .navbar-color .navbar-nav .nav-link {
    color: #2c3e50;
}

body.reading-theme-sepia .navbar-color .navbar-nav .nav-link {
    color: #5b4636;
}

body.reading-theme-mint .navbar-color .navbar-nav .nav-link {
    color: #1f3b1d;
}

/* 一级下拉菜单（dropdown-menu）背景适配 */
body.reading-theme-default .mr-auto .dropdown-menu.show {
    background-color: #ffffff !important;
    border-radius: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.reading-theme-sepia .mr-auto .dropdown-menu.show {
    background-color: #f7f0dc !important;
    border-radius: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(91, 70, 54, 0.15);
}

body.reading-theme-mint .mr-auto .dropdown-menu.show {
    background-color: #d8eedb !important;
    border-radius: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 4px 12px rgba(31, 59, 29, 0.15);
}

/* 一级下拉菜单 item 背景跟随 */
body.reading-theme-default .mr-auto .dropdown-menu.show .dropdown-item {
    background-color: #ffffff !important;
    height: 3.125rem;
}

body.reading-theme-sepia .mr-auto .dropdown-menu.show .dropdown-item {
    background-color: #f7f0dc !important;
    height: 3.125rem;
}

body.reading-theme-mint .mr-auto .dropdown-menu.show .dropdown-item {
    background-color: #d8eedb !important;
    height: 3.125rem;
}

/* 一级下拉项链接颜色 */
body.reading-theme-default .mr-auto .dropdown-item>a,
body.reading-theme-default .mr-auto .dropdown-item a {
    color: #2c3e50 !important;
}

body.reading-theme-sepia .mr-auto .dropdown-item>a,
body.reading-theme-sepia .mr-auto .dropdown-item a {
    color: #5b4636 !important;
}

body.reading-theme-mint .mr-auto .dropdown-item>a,
body.reading-theme-mint .mr-auto .dropdown-item a {
    color: #1f3b1d !important;
}

/* hover 高亮（保持各主题色调） */
body.reading-theme-default .mr-auto .dropdown-item:hover {
    background-color: #f3f4f6 !important;
}

body.reading-theme-sepia .mr-auto .dropdown-item:hover {
    background-color: #ecdfc4 !important;
}

body.reading-theme-mint .mr-auto .dropdown-item:hover {
    background-color: #c1dfc6 !important;
}

/* ==========================================================================
   #masthead 整块（PC + H5）三主题适配
   - mirages.min.css:1464 默认 #masthead { background:#1e1e1f }
   - search.css PC 端 body.use-navbar #masthead .inner { background:#303030 }
   - search.css H5 端 #masthead { background:#343232 }
   - .blog-title / .detail 默认白字
   下面统一把三主题下的 #masthead / .inner / 文字色全部盖掉。
   ========================================================================== */
body.reading-theme-default #masthead,
body.reading-theme-default.use-navbar #masthead .inner {
    background-color: #ffffff !important;
}

body.reading-theme-default #masthead,
body.reading-theme-default .blog-title,
body.reading-theme-default .blog-description,
body.reading-theme-default #masthead .detail,
body.reading-theme-default #masthead .blog-title {
    color: #2c3e50 !important;
}

body.reading-theme-sepia #masthead,
body.reading-theme-sepia.use-navbar #masthead .inner {
    background-color: #f4ecd8 !important;
}

body.reading-theme-sepia #masthead,
body.reading-theme-sepia .blog-title,
body.reading-theme-sepia .blog-description,
body.reading-theme-sepia #masthead .detail {
    color: #5b4636 !important;
}

body.reading-theme-mint #masthead,
body.reading-theme-mint.use-navbar #masthead .inner {
    background-color: #cce8cf !important;
}

body.reading-theme-mint #masthead,
body.reading-theme-mint .blog-title,
body.reading-theme-mint .blog-description,
body.reading-theme-mint #masthead .detail {
    color: #1f3b1d !important;
}

/* ==========================================================================
   帖子详情页 .links-list / .tips-box / .row-link 主题适配
   原 common.css 写死 background-color:#343232（深底）+ tip-content 色 #bcbcbc。
   ========================================================================== */
body.reading-theme-default .links-list>p,
body.reading-theme-default .tips-box>div,
body.reading-theme-default .row-link {
    background-color: #f3f4f6 !important;
    color: #2c3e50 !important;
}

body.reading-theme-default .tips-box>div .tip-content {
    color: #4b5563 !important;
}

body.reading-theme-default .tips-box>div .tip-index {
    background-color: rgba(26, 188, 157, 0.18) !important;
    color: #1abc9d !important;
}

body.reading-theme-default .important-tip {
    color: #6b7280 !important;
}

body.reading-theme-sepia .links-list>p,
body.reading-theme-sepia .tips-box>div,
body.reading-theme-sepia .row-link {
    background-color: #ecdfc4 !important;
    color: #5b4636 !important;
}

body.reading-theme-sepia .tips-box>div .tip-content {
    color: #6f5840 !important;
}

body.reading-theme-sepia .tips-box>div .tip-index {
    background-color: rgba(91, 70, 54, 0.18) !important;
    color: #5b4636 !important;
}

body.reading-theme-sepia .important-tip {
    color: #7a6448 !important;
}

body.reading-theme-mint .links-list>p,
body.reading-theme-mint .tips-box>div,
body.reading-theme-mint .row-link {
    background-color: #c1dfc6 !important;
    color: #1f3b1d !important;
}

body.reading-theme-mint .tips-box>div .tip-content {
    color: #38573a !important;
}

body.reading-theme-mint .tips-box>div .tip-index {
    background-color: rgba(31, 59, 29, 0.18) !important;
    color: #1f3b1d !important;
}

body.reading-theme-mint .important-tip {
    color: #4a6b48 !important;
}

/* ==========================================================================
   H5 侧栏 .expand-contract-group 阅读设置项的图标尺寸对齐
   ========================================================================== */
#nav-mobile-read-settings img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* ==========================================================================
   #footer 与 #body-bottom 的主题适配
   说明：sepia/mint 启用 theme-white 后，footer/body-bottom 默认是 #fafafa/#fff，
        需叠加米色/护眼色覆盖；default 直接交给 mirages theme-white 接管。
   ========================================================================== */
body.reading-theme-sepia #footer,
body.reading-theme-sepia #body-bottom {
    background-color: #f4ecd8 !important;
    color: #5b4636 !important;
}

body.reading-theme-sepia #footer a,
body.reading-theme-sepia #body-bottom a {
    color: #5b4636 !important;
}

body.reading-theme-sepia #footer h1,
body.reading-theme-sepia #footer h2,
body.reading-theme-sepia #footer p {
    text-shadow: none !important;
}

body.reading-theme-mint #footer,
body.reading-theme-mint #body-bottom {
    background-color: #cce8cf !important;
    color: #1f3b1d !important;
}

body.reading-theme-mint #footer a,
body.reading-theme-mint #body-bottom a {
    color: #1f3b1d !important;
}

body.reading-theme-mint #footer h1,
body.reading-theme-mint #footer h2,
body.reading-theme-mint #footer p {
    text-shadow: none !important;
}

/* ==========================================================================
   H5 侧栏 #site-navigation / #nav / #menu-menu-1 与顶部 nav.xqbj-header
   原 mirages 把背景写死 #191919/#222222/#1b1b1b，菜单文字 #fff !important，
   theme-white 仅换 #nav 容器色；子元素和 H5 搜索栏仍深色。统一覆盖。
   ========================================================================== */

/* default（浅色） */
body.reading-theme-default #nav {
    background: #fafafa !important;
    border-right: 1px solid #efefef !important;
}

body.reading-theme-default #nav .menu li {
    background-color: #ffffff !important;
}

body.reading-theme-default #nav .menu li.dropdown-item {
    background-color: #f3f4f6 !important;
}

body.reading-theme-default #nav #menu-menu-1 li a,
body.reading-theme-default #nav #menu-menu-1 li button {
    color: #2c3e50 !important;
}

body.reading-theme-default #nav #menu-menu-1 .dropdown-menu.show li a {
    color: #4b5563 !important;
}

body.reading-theme-default #nav .search-box .search {
    background-color: #ffffff !important;
    color: #6b7280 !important;
    border: 1px solid #e5e7eb !important;
}

/* sepia（米色） */
body.reading-theme-sepia #nav {
    background: #f4ecd8 !important;
    border-right: 1px solid #e2d5b1 !important;
}

body.reading-theme-sepia #nav .menu li {
    background-color: #f7f0dc !important;
}

body.reading-theme-sepia #nav .menu li.dropdown-item {
    background-color: #ecdfc4 !important;
}

body.reading-theme-sepia #nav #menu-menu-1 li a,
body.reading-theme-sepia #nav #menu-menu-1 li button {
    color: #5b4636 !important;
}

body.reading-theme-sepia #nav #menu-menu-1 .dropdown-menu.show li a {
    color: #7a6448 !important;
}

body.reading-theme-sepia #nav .search-box .search {
    background-color: #f7f0dc !important;
    color: #8a7960 !important;
    border: 1px solid #d6c9a3 !important;
}

/* mint（护眼绿） */
body.reading-theme-mint #nav {
    background: #cce8cf !important;
    border-right: 1px solid #9bc2a0 !important;
}

body.reading-theme-mint #nav .menu li {
    background-color: #d8eedb !important;
}

body.reading-theme-mint #nav .menu li.dropdown-item {
    background-color: #c1dfc6 !important;
}

body.reading-theme-mint #nav #menu-menu-1 li a,
body.reading-theme-mint #nav #menu-menu-1 li button {
    color: #1f3b1d !important;
}

body.reading-theme-mint #nav #menu-menu-1 .dropdown-menu.show li a {
    color: #38573a !important;
}

body.reading-theme-mint #nav .search-box .search {
    background-color: #d8eedb !important;
    color: #4a6b48 !important;
    border: 1px solid #9bc2a0 !important;
}

/* 侧栏一级下拉容器（.dropdown-menu.no-dropdown-close.show）背景：
   与展开后的 .dropdown-item 背景保持一致，跟随主题切换。
   night（theme-dark）下容器与 item 已同为 #1b1b1b，无需在此覆盖。 */
body.reading-theme-default #nav #menu-menu-1 .dropdown-menu.show {
    background-color: #f3f4f6 !important;
}

body.reading-theme-sepia #nav #menu-menu-1 .dropdown-menu.show {
    background-color: #ecdfc4 !important;
}

body.reading-theme-mint #nav #menu-menu-1 .dropdown-menu.show {
    background-color: #c1dfc6 !important;
}

/* 三主题下顶部 #ai-navigation-container 容器：保持透明，由 .navbar-color / .xqbj-header 子元素决定 */
body.reading-theme-default #ai-navigation-container,
body.reading-theme-sepia #ai-navigation-container,
body.reading-theme-mint #ai-navigation-container {
    background: transparent;
}

/* ==========================================================================
   顶栏内的搜索容器（navbar/header 弹层）+ PC 顶栏右侧工具栏：
   不跟随主题切换，保持系统默认深灰背景 #2c2a2a + 白色文字。
   严格限定到 #navbar / nav.xqbj-header 内，避免命中 #xqbj-container（独立 /search 页面）。
   ========================================================================== */
body[class*="reading-theme-"] #navbar .nav-search-container,
body[class*="reading-theme-"] nav.xqbj-header .nav-search-container,
body[class*="reading-theme-"] nav.xqbj-header .nav-search-container.nav-search-container-hook,
body[class*="reading-theme-"] nav.xqbj-header .search-input {
    background-color: #2c2a2a !important;
    border-color: #2c2a2a !important;
}

body[class*="reading-theme-"] #navbar .nav-search-container .input-control,
body[class*="reading-theme-"] nav.xqbj-header .nav-search-container .input-control,
body[class*="reading-theme-"] nav.xqbj-header .search-input input {
    color: #ffffff !important;
}

body[class*="reading-theme-"] #navbar .nav-search-container .input-control::placeholder,
body[class*="reading-theme-"] nav.xqbj-header .nav-search-container .input-control::placeholder,
body[class*="reading-theme-"] nav.xqbj-header .search-input input::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

body[class*="reading-theme-"] #navbar .navbar-nav.side-toolbar-list li>a,
body[class*="reading-theme-"] #navbar .navbar-nav.side-toolbar-list li>button {
    background: #2c2a2a !important;
    color: #ffffff !important;
    border: none !important;
}

body[class*="reading-theme-"] #navbar .navbar-nav.side-toolbar-list li>a:hover,
body[class*="reading-theme-"] #navbar .navbar-nav.side-toolbar-list li>button:hover {
    background: #1f1d1d !important;
    color: #ffffff !important;
}

/* ==========================================================================
   导航栏箭头 .xqbj-icon-toggle / .xqbj-icon-up：
   原 PNG 是固定白色 (icon-up@3x.png / icon-down@3x.png) 不能变色。
   改用 inline SVG 作 CSS mask，用 background-color: currentColor 跟随父元素文字色
   → 切到任意主题时自动跟随 .nav-link 的颜色，不需要单独再加主题规则。
   ========================================================================== */
.nav-link .xqbj-icon-toggle,
.nav-link .xqbj-icon-up {
    width: 0.9375rem;
    height: 0.9375rem;
    background-image: none !important;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color .15s ease, transform .2s ease;
}

/* 默认 toggle（折叠态）— 向下 chevron */
.nav-link .xqbj-icon-toggle {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6 L8 10 L12 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6 L8 10 L12 6' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* toggle 展开态 — 向上 chevron（覆盖默认） */
.nav-link.show .xqbj-icon-toggle {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 10 L8 6 L12 10' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 10 L8 6 L12 10' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* PC navbar .xqbj-icon-up 永远向上 chevron */
.nav-link .xqbj-icon-up {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 10 L8 6 L12 10' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 10 L8 6 L12 10' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ==========================================================================
   分页 .page-nav / .page-jump / .page-navigator 主题适配
   修 mirages.min.css 选择器分组 bug：
     `body.theme-dark .page-navigator li a, .page-navigator li span {color:#fff;...}`
     第二个 selector 没加 body.theme-dark 前缀，导致 light 主题下 span 也是白字白边。
   ========================================================================== */

/* default（浅色） */
body.reading-theme-default .page-navigator li a,
body.reading-theme-default .page-navigator li span,
body.reading-theme-default .page-jump .page-info,
body.reading-theme-default .page-jump input,
body.reading-theme-default .page-jump button {
    color: #2c3e50 !important;
    border-color: #2c3e50 !important;
}

body.reading-theme-default .page-jump button:hover {
    color: #111 !important;
    border-color: #111 !important;
}

body.reading-theme-default .page-navigator li.active a {
    background: #2c3e50 !important;
    color: #ffffff !important;
}

/* sepia（米色） */
body.reading-theme-sepia .page-navigator li a,
body.reading-theme-sepia .page-navigator li span,
body.reading-theme-sepia .page-jump .page-info,
body.reading-theme-sepia .page-jump input,
body.reading-theme-sepia .page-jump button {
    color: #5b4636 !important;
    border-color: #5b4636 !important;
}

body.reading-theme-sepia .page-jump button:hover {
    color: #3f2f22 !important;
    border-color: #3f2f22 !important;
}

body.reading-theme-sepia .page-navigator li.active a {
    background: #5b4636 !important;
    color: #f7f0dc !important;
}

/* mint（护眼绿） */
body.reading-theme-mint .page-navigator li a,
body.reading-theme-mint .page-navigator li span,
body.reading-theme-mint .page-jump .page-info,
body.reading-theme-mint .page-jump input,
body.reading-theme-mint .page-jump button {
    color: #1f3b1d !important;
    border-color: #1f3b1d !important;
}

body.reading-theme-mint .page-jump button:hover {
    color: #102510 !important;
    border-color: #102510 !important;
}

body.reading-theme-mint .page-navigator li.active a {
    background: #1f3b1d !important;
    color: #d8eedb !important;
}

/* 跳转输入框文字居中 */
.page-jump input,
#pageNum {
    text-align: center;
}

/* ==========================================================================
   面包屑 .nav-breadcrumb-wrap 主题适配
   修 common.css 写死的 `.nav-breadcrumb-wrap .name { color: rgba(255,255,255,.5) }`
   ========================================================================== */
body.reading-theme-default .nav-breadcrumb-wrap,
body.reading-theme-default .nav-breadcrumb-wrap .name {
    color: rgba(44, 62, 80, 0.85) !important;
}

body.reading-theme-default .nav-breadcrumb-wrap a:hover,
body.reading-theme-default .nav-breadcrumb-wrap a:hover .name {
    color: #2c3e50 !important;
}

body.reading-theme-default .nav-breadcrumb-wrap .point {
    filter: invert(20%) brightness(0.8);
}

body.reading-theme-sepia .nav-breadcrumb-wrap,
body.reading-theme-sepia .nav-breadcrumb-wrap a,
body.reading-theme-sepia .nav-breadcrumb-wrap .name {
    color: rgba(91, 70, 54, 0.9) !important;
}

body.reading-theme-sepia .nav-breadcrumb-wrap a:hover,
body.reading-theme-sepia .nav-breadcrumb-wrap a:hover .name {
    color: #3f2f22 !important;
}

body.reading-theme-sepia .nav-breadcrumb-wrap .point {
    filter: invert(25%) sepia(30%);
}

body.reading-theme-mint .nav-breadcrumb-wrap,
body.reading-theme-mint .nav-breadcrumb-wrap a,
body.reading-theme-mint .nav-breadcrumb-wrap .name {
    color: rgba(31, 59, 29, 0.9) !important;
}

body.reading-theme-mint .nav-breadcrumb-wrap a:hover,
body.reading-theme-mint .nav-breadcrumb-wrap a:hover .name {
    color: #102510 !important;
}

body.reading-theme-mint .nav-breadcrumb-wrap .point {
    filter: invert(20%) sepia(40%) hue-rotate(60deg);
}

/* ==========================================================================
   /search 独立搜索页 #xqbj-container 下的 .container-hot-search.show
   - 与顶栏 navbar 的搜索弹层（保持深灰）相区分
   - 容器、文字、边框、历史记录、热搜列表全部跟随主题
   - 原 search.css 写死 background:#222 / border:#3b3c3e / color:#888 等深色
   ========================================================================== */
/* default */
body.reading-theme-default #xqbj-container,
body.reading-theme-default #xqbj-container .nav-search-container,
body.reading-theme-default #xqbj-container .container-hot-search,
body.reading-theme-default #xqbj-container .container-hot-search.show {
    background-color: #ffffff !important;
}

body.reading-theme-default #xqbj-container .container-hot-search,
body.reading-theme-default #xqbj-container .container-hot-search .search-title,
body.reading-theme-default #xqbj-container .container-hot-search .search-title span,
body.reading-theme-default #xqbj-container .container-hot-search .container-search-context-title,
body.reading-theme-default #xqbj-container .container-hot-search .rank-card,
body.reading-theme-default #xqbj-container .container-hot-search .rank-card-icon,
body.reading-theme-default #xqbj-container .container-hot-search .rank-card-title,
body.reading-theme-default #xqbj-container .container-hot-search .no-data,
body.reading-theme-default #xqbj-container .container-hot-search .input-control {
    color: #2c3e50 !important;
}

body.reading-theme-default #xqbj-container .container-hot-search .container-search-context-louyat,
body.reading-theme-default #xqbj-container .container-hot-search .search-title {
    border-bottom-color: rgba(44, 62, 80, 0.12) !important;
}

body.reading-theme-default #xqbj-container .container-hot-search .search-title.search-border {
    border-top-color: rgba(44, 62, 80, 0.12) !important;
}

body.reading-theme-default #xqbj-container .container-hot-search .history-record a {
    background: rgba(26, 188, 157, 0.08) !important;
    color: #4b5563 !important;
    border-color: rgba(44, 62, 80, 0.18) !important;
}

body.reading-theme-default #xqbj-container .search-input-wrap {
    background-color: #f3f4f6 !important;
    border-radius: 0.5rem !important;
}

body.reading-theme-default #xqbj-container .search-input-wrap .search-input {
    color: #2c3e50 !important;
    background: transparent !important;
}

body.reading-theme-default #xqbj-container .search-input-wrap .search-input::placeholder {
    color: #9ca3af !important;
}

body.reading-theme-default #xqbj-container .search-butn {
    color: #ffffff !important;
    background: #2c3e50 !important;
}

/* sepia */
body.reading-theme-sepia #xqbj-container,
body.reading-theme-sepia #xqbj-container .nav-search-container,
body.reading-theme-sepia #xqbj-container .container-hot-search,
body.reading-theme-sepia #xqbj-container .container-hot-search.show {
    background-color: #f4ecd8 !important;
}

body.reading-theme-sepia #xqbj-container .container-hot-search,
body.reading-theme-sepia #xqbj-container .container-hot-search .search-title,
body.reading-theme-sepia #xqbj-container .container-hot-search .search-title span,
body.reading-theme-sepia #xqbj-container .container-hot-search .container-search-context-title,
body.reading-theme-sepia #xqbj-container .container-hot-search .rank-card,
body.reading-theme-sepia #xqbj-container .container-hot-search .rank-card-icon,
body.reading-theme-sepia #xqbj-container .container-hot-search .rank-card-title,
body.reading-theme-sepia #xqbj-container .container-hot-search .no-data,
body.reading-theme-sepia #xqbj-container .container-hot-search .input-control {
    color: #5b4636 !important;
}

body.reading-theme-sepia #xqbj-container .container-hot-search .container-search-context-louyat,
body.reading-theme-sepia #xqbj-container .container-hot-search .search-title {
    border-bottom-color: rgba(91, 70, 54, 0.18) !important;
}

body.reading-theme-sepia #xqbj-container .container-hot-search .search-title.search-border {
    border-top-color: rgba(91, 70, 54, 0.18) !important;
}

body.reading-theme-sepia #xqbj-container .container-hot-search .history-record a {
    background: rgba(91, 70, 54, 0.08) !important;
    color: #6f5840 !important;
    border-color: rgba(91, 70, 54, 0.25) !important;
}

body.reading-theme-sepia #xqbj-container .search-input-wrap {
    background-color: #ecdfc4 !important;
    border-radius: 0.5rem !important;
}

body.reading-theme-sepia #xqbj-container .search-input-wrap .search-input {
    color: #5b4636 !important;
    background: transparent !important;
}

body.reading-theme-sepia #xqbj-container .search-input-wrap .search-input::placeholder {
    color: #8a7960 !important;
}

body.reading-theme-sepia #xqbj-container .search-butn {
    color: #f7f0dc !important;
    background: #5b4636 !important;
}

/* mint */
body.reading-theme-mint #xqbj-container,
body.reading-theme-mint #xqbj-container .nav-search-container,
body.reading-theme-mint #xqbj-container .container-hot-search,
body.reading-theme-mint #xqbj-container .container-hot-search.show {
    background-color: #cce8cf !important;
}

body.reading-theme-mint #xqbj-container .container-hot-search,
body.reading-theme-mint #xqbj-container .container-hot-search .search-title,
body.reading-theme-mint #xqbj-container .container-hot-search .search-title span,
body.reading-theme-mint #xqbj-container .container-hot-search .container-search-context-title,
body.reading-theme-mint #xqbj-container .container-hot-search .rank-card,
body.reading-theme-mint #xqbj-container .container-hot-search .rank-card-icon,
body.reading-theme-mint #xqbj-container .container-hot-search .rank-card-title,
body.reading-theme-mint #xqbj-container .container-hot-search .no-data,
body.reading-theme-mint #xqbj-container .container-hot-search .input-control {
    color: #1f3b1d !important;
}

body.reading-theme-mint #xqbj-container .container-hot-search .container-search-context-louyat,
body.reading-theme-mint #xqbj-container .container-hot-search .search-title {
    border-bottom-color: rgba(31, 59, 29, 0.18) !important;
}

body.reading-theme-mint #xqbj-container .container-hot-search .search-title.search-border {
    border-top-color: rgba(31, 59, 29, 0.18) !important;
}

body.reading-theme-mint #xqbj-container .container-hot-search .history-record a {
    background: rgba(31, 59, 29, 0.08) !important;
    color: #38573a !important;
    border-color: rgba(31, 59, 29, 0.25) !important;
}

body.reading-theme-mint #xqbj-container .search-input-wrap {
    background-color: #c1dfc6 !important;
    border-radius: 0.5rem !important;
}

body.reading-theme-mint #xqbj-container .search-input-wrap .search-input {
    color: #1f3b1d !important;
    background: transparent !important;
}

body.reading-theme-mint #xqbj-container .search-input-wrap .search-input::placeholder {
    color: #4a6b48 !important;
}

body.reading-theme-mint #xqbj-container .search-butn {
    color: #d8eedb !important;
    background: #1f3b1d !important;
}