/* =============================================================
   xxs 阅读页：顶部条 / 正文 / 6 主题 / 目录抽屉 / 设置面板
   ============================================================= */

/* 阅读进度条 */
.xs-readbar {
    position: fixed;
    top: 0;
    z-index: 950;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, .08);
}
.xs-readbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--xs-gold-2), var(--xs-gold)); }

/* 阅读顶部条 */
.xs-read-header {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 24px;
    background: rgba(10, 12, 17, .9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--xs-line);
}
.xs-read-back { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 14.5px; color: var(--xs-text-2); }
.xs-read-back svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; }
.xs-read-back span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.xs-read-tools { display: flex; gap: 4px; flex-shrink: 0; }
.xs-read-tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 12px;
    color: var(--xs-text-2);
}
.xs-read-tool-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.xs-read-tool-btn span { font-size: 11px; }
.xs-read-tool-btn:hover { color: var(--xs-gold); }

/* 正文主体 */
.xs-reader {
    transition: background .25s ease, color .25s ease;
    min-height: calc(100vh - 56px);
}
.xs-reader-inner {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 40px 28px 60px;
    transition: max-width .25s ease;
}
.xs-chapter-head { text-align: center; margin-bottom: 36px; }
.xs-chapter-title { font-size: 26px; font-family: var(--xs-serif); margin-bottom: 14px; }
.xs-chapter-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: 13px; opacity: .72; }

.xs-chapter-content { font-size: 18px; line-height: 1.95; }
.xs-chapter-content p { margin: 0 0 1.1em; text-indent: 2em; }

/* 章节分页 */
.xs-chapter-pager { display: flex; gap: 12px; margin-top: 48px; }
.xs-pager-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px;
    border-radius: var(--xs-r-sm);
    font-size: 14.5px;
    border: 1px solid var(--xs-line-2);
    color: var(--xs-text-2);
    background: rgba(255, 255, 255, .03);
}
.xs-pager-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.xs-pager-btn:hover { color: var(--xs-gold); border-color: var(--xs-gold); }
.xs-pager-center { flex: 0 0 110px; }
.xs-pager-btn.is-disabled { opacity: .4; pointer-events: none; }

/* ---------- 6 个阅读主题（作用于正文区域） ---------- */
.xs-reader[data-theme="brown"] { background: #e8dcc8; color: #4a3f33; }
.xs-reader[data-theme="brown"] .xs-pager-btn { color: #5d5040; border-color: rgba(74, 63, 51, .25); background: rgba(255, 255, 255, .35); }
.xs-reader[data-theme="brown"] .xs-chapter-meta { color: #6b5d4c; }

.xs-reader[data-theme="green"] { background: #dce8d4; color: #3a4536; }
.xs-reader[data-theme="green"] .xs-pager-btn { color: #4a5744; border-color: rgba(58, 69, 54, .25); background: rgba(255, 255, 255, .35); }
.xs-reader[data-theme="green"] .xs-chapter-meta { color: #5a6754; }

.xs-reader[data-theme="pink"] { background: #f3e0e6; color: #5a3d47; }
.xs-reader[data-theme="pink"] .xs-pager-btn { color: #6f4a57; border-color: rgba(90, 61, 71, .25); background: rgba(255, 255, 255, .4); }
.xs-reader[data-theme="pink"] .xs-chapter-meta { color: #7d5a66; }

.xs-reader[data-theme="blue"] { background: #dde7f2; color: #38465a; }
.xs-reader[data-theme="blue"] .xs-pager-btn { color: #47576e; border-color: rgba(56, 70, 90, .25); background: rgba(255, 255, 255, .45); }
.xs-reader[data-theme="blue"] .xs-chapter-meta { color: #5a6b82; }

.xs-reader[data-theme="gray"] { background: #e6e6e6; color: #3f3f3f; }
.xs-reader[data-theme="gray"] .xs-pager-btn { color: #555; border-color: rgba(63, 63, 63, .25); background: rgba(255, 255, 255, .5); }
.xs-reader[data-theme="gray"] .xs-chapter-meta { color: #6a6a6a; }

.xs-reader[data-theme="black"] { background: #14161b; color: #b9b5ac; }
.xs-reader[data-theme="black"] .xs-pager-btn { color: #a8a49c; border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
.xs-reader[data-theme="black"] .xs-chapter-meta { color: #88857e; }

/* 主题切换时顶部条保持深色 */
.xs-read-header, .xs-readbar { background-color: rgba(10, 12, 17, .92); }

/* ---------- 目录抽屉 ---------- */
.xs-drawer-mask2 {
    position: fixed;
    inset: 0;
    z-index: 960;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
}
.xs-drawer-mask2.open { opacity: 1; visibility: visible; }
.xs-toc-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 970;
    width: min(84vw, 380px);
    display: flex;
    flex-direction: column;
    background: var(--xs-bg-2);
    border-right: 1px solid var(--xs-line-2);
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.xs-toc-drawer.open { transform: translateX(0); }
.xs-toc-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 14px; }
.xs-toc-head h3 { font-size: 20px; margin-bottom: 4px; }
.xs-toc-head p { font-size: 13px; color: var(--xs-muted); }
.xs-toc-head button { font-size: 26px; color: var(--xs-muted); line-height: 1; }
.xs-toc-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 18px 12px;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--xs-bg-3);
    border: 1px solid var(--xs-line-2);
}
.xs-toc-search svg { width: 17px; height: 17px; fill: none; stroke: var(--xs-muted); stroke-width: 2; }
.xs-toc-search input { flex: 1; background: none; border: 0; outline: none; min-width: 0; font-size: 14px; }
.xs-toc-list { flex: 1; overflow-y: auto; padding: 4px 10px 20px; }
.xs-toc-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
    border-radius: var(--xs-r-xs);
    color: var(--xs-text-2);
    font-size: 14px;
}
.xs-toc-item:hover { background: var(--xs-panel-3); color: var(--xs-gold); }
.xs-toc-no { width: 28px; flex-shrink: 0; font-size: 12px; color: var(--xs-dim); text-align: center; }
.xs-toc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-toc-item.on { background: var(--xs-gold-soft); color: var(--xs-gold-2); }
.xs-toc-item.on .xs-toc-no { color: var(--xs-gold); }

/* ---------- 设置面板（底部弹层） ---------- */
.xs-set-mask {
    position: fixed;
    inset: 0;
    z-index: 960;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility .25s;
}
.xs-set-mask.open { opacity: 1; visibility: visible; }
.xs-set-panel {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 970;
    padding: 22px 24px calc(26px + env(safe-area-inset-bottom));
    background: var(--xs-bg-2);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid var(--xs-line-2);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.xs-set-panel.open { transform: translateY(0); }
.xs-set-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.xs-set-head h3 { font-size: 19px; }
.xs-set-head button { font-size: 26px; color: var(--xs-muted); line-height: 1; }
.xs-set-group { margin-bottom: 20px; }
.xs-set-label { font-size: 13.5px; color: var(--xs-muted); margin-bottom: 10px; }
.xs-theme-list { display: flex; gap: 14px; }
.xs-theme-dot {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.xs-theme-dot.is-active { border-color: var(--xs-gold); box-shadow: 0 0 0 2px var(--xs-gold-soft); }
.xs-opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.xs-opt-row button {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    color: var(--xs-text-2);
    background: var(--xs-panel);
    border: 1px solid var(--xs-line);
}
.xs-opt-row button.is-active { color: #1a140a; background: linear-gradient(135deg, var(--xs-gold-2), var(--xs-gold)); border-color: transparent; }

/* =============================================================
   响应式
   ============================================================= */
@media (max-width: 768px) {
    .xs-read-header { padding: 8px 14px; }
    .xs-read-back span { max-width: 130px; }
    .xs-read-tool-btn { padding: 4px 8px; }
    .xs-reader-inner { padding: 28px 18px 50px; }
    .xs-chapter-title { font-size: 22px; }
    .xs-chapter-content { font-size: 17px; }
    .xs-chapter-pager { gap: 8px; }
    .xs-pager-btn { padding: 10px 6px; font-size: 13.5px; }
    .xs-pager-center { flex: 0 0 80px; }
}

@media (max-width: 480px) {
    .xs-read-tool-btn span { display: none; }
    .xs-read-tool-btn svg { width: 23px; height: 23px; }
    .xs-read-back span { max-width: 100px; font-size: 13.5px; }
    .xs-chapter-content { font-size: 16px; }
}