/**
 * Novel-Plus Theme for BookStack
 * 基于小说精品屋(novel-plus)视觉风格
 *
 * 所有样式规则限定在 body.np-active 作用域下
 * 仅当管理后台选择 Novel 主题时才会激活
 *
 * 特性：
 * - 绿色主调配色（可自定义主题色）
 * - 卡片化布局优化
 * - 阅读主题切换
 * - 中文排版优化
 */

/* ========================================
   1. CSS 变量 - 主题配色系统（限定在 body.np-active 下）
   ======================================== */

body.np-active {
    /* 主色调 - 默认绿色（novel-plus 风格） */
    --np-primary: #3eaf7c;
    --np-primary-light: #65bf96;
    --np-primary-lighter: #78c7a3;
    --np-primary-dark: #2d8a5e;

    /* 背景色 */
    --np-bg-body: #f5f5f5;
    --np-bg-page: #ffffff;
    --np-bg-card: #ffffff;
    --np-bg-hover: #f9f9f9;
    --np-bg-soft: #f6f6f6;

    /* 文字色 */
    --np-text-primary: #333333;
    --np-text-secondary: #666666;
    --np-text-muted: #999999;
    --np-text-light: #cccccc;

    /* 边框色 */
    --np-border: #eeeeee;
    --np-border-dark: #e0e0e0;
    --np-border-dotted: #eae6e2;

    /* 排名色 */
    --np-rank-1: #3eaf7c;
    --np-rank-2: #65bf96;
    --np-rank-3: #78c7a3;

    /* 强调色 */
    --np-accent-red: #ed4259;
    --np-accent-blue: #4a90e2;
    --np-accent-orange: #f60;

    /* 阴影 */
    --np-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --np-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --np-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* 圆角 */
    --np-radius-sm: 2px;
    --np-radius-md: 4px;
    --np-radius-lg: 8px;

    /* 字体 */
    --np-font-body: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --np-font-code: "JetBrains Mono", "Fira Code", "Source Code Pro", Consolas, monospace;
    --np-font-reading: "PingFang SC", "Microsoft YaHei", "Noto Serif SC", serif;

    /* 阅读主题变量（默认浅色） */
    --np-reading-bg: #ffffff;
    --np-reading-text: #333333;
    --np-reading-link: #3eaf7c;
    --np-reading-border: #eeeeee;

    /* 全局基础样式 */
    font-family: var(--np-font-body);
    color: var(--np-text-primary);
    background-color: var(--np-bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    scroll-behavior: smooth;
}

/* 覆盖 BookStack 的 height:100%，让 body 随内容增长，避免滚动后底部露出白色背景 */
/* 编辑器页面(body.flexbox)不会加载主题CSS，因此不受影响 */
body.np-active {
    height: auto !important;
    min-height: 100vh;
}

/* #content 自动扩展并让内部布局填满 */
body.np-active #content {
    flex: 1;
}

body.np-active .tri-layout-container {
    min-height: calc(100vh - 60px);
}

body.np-active .tri-layout-sides {
    background-color: var(--np-bg-body);
}

/* ========================================
   2. 所有主题样式 - 限定在 body.np-active 下
   ======================================== */

/* 主题色预设 - 通过 body class 切换 */
body.np-active.np-theme-green {
    --np-primary: #3eaf7c;
    --np-primary-light: #65bf96;
    --np-primary-lighter: #78c7a3;
    --np-primary-dark: #2d8a5e;
}

body.np-active.np-theme-orange {
    --np-primary: #e86320;
    --np-primary-light: #f0884d;
    --np-primary-lighter: #f5a673;
    --np-primary-dark: #c44d10;
}

body.np-active.np-theme-blue {
    --np-primary: #206ea7;
    --np-primary-light: #429fe3;
    --np-primary-lighter: #6bb5ec;
    --np-primary-dark: #155a8a;
}

body.np-active.np-theme-red {
    --np-primary: #d63031;
    --np-primary-light: #e55656;
    --np-primary-lighter: #ed7676;
    --np-primary-dark: #b52020;
}

body.np-active.np-theme-purple {
    --np-primary: #7e50b1;
    --np-primary-light: #a66ce8;
    --np-primary-lighter: #bc8aed;
    --np-primary-dark: #633d8e;
}

/* 阅读主题 */
body.np-active.np-reading-green {
    --np-reading-bg: #cbdec9;
    --np-reading-text: #333333;
    --np-reading-link: #2d8a5e;
    --np-reading-border: #b8ccb6;
}

body.np-active.np-reading-yellow {
    --np-reading-bg: #ebe5d8;
    --np-reading-text: #333333;
    --np-reading-link: #8b6914;
    --np-reading-border: #d9d0be;
}

body.np-active.np-reading-pink {
    --np-reading-bg: #edd4d4;
    --np-reading-text: #333333;
    --np-reading-link: #c44d6a;
    --np-reading-border: #dcc0c0;
}

body.np-active.np-reading-gray {
    --np-reading-bg: #d3d3d3;
    --np-reading-text: #333333;
    --np-reading-link: #555555;
    --np-reading-border: #c0c0c0;
}

body.np-active.np-reading-dark {
    --np-reading-bg: #1a1a1a;
    --np-reading-text: #cccccc;
    --np-reading-link: #65bf96;
    --np-reading-border: #333333;
}

/* ---- 顶部导航栏 ---- */

body.np-active header#header {
    background: var(--np-primary) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-bottom: none;
    color: #fff;
}

body.np-active header#header .logo {
    color: #fff;
}

body.np-active header#header .logo a {
    color: #fff !important;
}

body.np-active header#header .logo-text {
    color: #fff !important;
}

body.np-active header#header .logo:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

body.np-active header#header nav.header-links {
    background: transparent;
}

body.np-active header#header .links a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 16px;
    transition: background-color 0.2s;
    border-radius: 4px;
}

body.np-active header#header .links a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.15);
    text-decoration: none;
}

body.np-active header#header .avatar,
body.np-active header#header .user-name {
    color: #fff;
}

body.np-active header#header .user-name:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

body.np-active header#header .search-box input {
    background-color: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 40px;
    padding: 6px 16px;
    font-size: 14px;
    color: #fff;
    transition: border-color 0.2s, background-color 0.2s;
}

body.np-active header#header .search-box input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

body.np-active header#header .search-box input:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: none;
}

body.np-active header#header .mobile-menu-toggle {
    color: #fff;
    fill: #fff;
    border-color: rgba(255, 255, 255, 0.6);
}

/* ---- 内容区域布局 ---- */

body.np-active .container {
    max-width: 1200px;
}

body.np-active .container.small {
    max-width: 840px;
}

body.np-active .card {
    background: var(--np-bg-card);
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius-md);
    box-shadow: var(--np-shadow-sm);
    transition: box-shadow 0.2s;
    animation: np-fade-in 0.3s ease-out;
}

body.np-active .card:hover {
    box-shadow: var(--np-shadow-md);
}

body.np-active .card.content-wrap {
    padding: 24px;
}

body.np-active .list-heading {
    color: var(--np-text-primary);
    font-size: 18px;
    font-weight: 600;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--np-primary);
    display: inline-block;
}

body.np-active .grid {
    gap: 20px;
}

body.np-active .grid.half {
    gap: 24px;
}

/* ---- 书架/书籍/章节/页面 卡片 ---- */

body.np-active .bookshelf-card,
body.np-active div[bookshelf] {
    border-radius: var(--np-radius-md);
    overflow: hidden;
}

body.np-active .book-cover {
    border-radius: var(--np-radius-sm);
    box-shadow: var(--np-shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
}

body.np-active .book-cover:hover {
    transform: translateY(-2px);
    box-shadow: var(--np-shadow-md);
}

body.np-active .book-list-item {
    padding: 12px 0;
    border-bottom: 1px dotted var(--np-border-dotted);
}

body.np-active .book-list-item:last-child {
    border-bottom: none;
}

body.np-active .book-list-item .title {
    font-size: 15px;
    font-weight: 500;
    color: var(--np-text-primary);
}

body.np-active .book-list-item .title a {
    color: var(--np-text-primary);
    transition: color 0.2s;
}

body.np-active .book-list-item .title a:hover {
    color: var(--np-primary);
}

body.np-active .chapter-list-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--np-border);
}

body.np-active .chapter-list-item:last-child {
    border-bottom: none;
}

body.np-active .page-list-item {
    padding: 8px 0;
}

/* ---- 排名/列表样式 ---- */

body.np-active .rank-number {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: var(--np-text-muted);
    color: #fff;
    border-radius: var(--np-radius-sm);
    font-size: 12px;
    font-weight: 600;
}

body.np-active .rank-number.top-1 {
    background-color: var(--np-rank-1);
}

body.np-active .rank-number.top-2 {
    background-color: var(--np-rank-2);
}

body.np-active .rank-number.top-3 {
    background-color: var(--np-rank-3);
}

/* ---- 按钮样式 ---- */

body.np-active button.button,
body.np-active a.button {
    background-color: var(--np-primary);
    color: #fff;
    border: 1px solid var(--np-primary);
    border-radius: var(--np-radius-sm);
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

body.np-active button.button:hover,
body.np-active a.button:hover {
    background-color: var(--np-primary-dark);
    border-color: var(--np-primary-dark);
    box-shadow: var(--np-shadow-sm);
}

body.np-active button.button.outline,
body.np-active a.button.outline {
    background-color: transparent;
    color: var(--np-primary);
    border: 1px solid var(--np-primary);
}

body.np-active button.button.outline:hover,
body.np-active a.button.outline:hover {
    background-color: var(--np-primary);
    color: #fff;
}

body.np-active button.button.small,
body.np-active a.button.small {
    padding: 4px 12px;
    font-size: 13px;
}

/* ---- 链接样式 ---- */

body.np-active a:not(.button):not(.btn) {
    color: var(--np-primary);
    text-decoration: none;
    transition: color 0.2s;
}

body.np-active a:not(.button):not(.btn):hover {
    color: var(--np-primary-dark);
}

body.np-active .text-link {
    color: var(--np-primary);
}

body.np-active .text-link:hover {
    color: var(--np-primary-dark);
}

/* 详细信息和近期活动的链接保留 hover 下划线 */
body.np-active .details a:hover,
body.np-active .activity-list-item a:hover {
    text-decoration: underline;
}

/* ---- 表单元素 ---- */

body.np-active input[type="text"],
body.np-active input[type="email"],
body.np-active input[type="password"],
body.np-active input[type="search"],
body.np-active input[type="url"],
body.np-active input[type="number"],
body.np-active textarea,
body.np-active select {
    border: 1px solid var(--np-border-dark);
    border-radius: var(--np-radius-md);
    padding: 8px 12px;
    font-size: 14px;
    color: var(--np-text-primary);
    background-color: var(--np-bg-page);
    transition: border-color 0.2s, box-shadow 0.2s;
}

body.np-active input:focus,
body.np-active textarea:focus,
body.np-active select:focus {
    border-color: var(--np-primary);
    box-shadow: 0 0 0 3px rgba(62, 175, 124, 0.1);
    outline: none;
}

body.np-active input[type="checkbox"],
body.np-active input[type="radio"] {
    accent-color: var(--np-primary);
}

/* ---- 表格样式 ---- */

body.np-active table th {
    background-color: var(--np-bg-soft);
    color: var(--np-text-primary);
    font-weight: 600;
    font-size: 14px;
    padding: 12px;
    border-bottom: 2px solid var(--np-border-dark);
    text-align: left;
}

body.np-active table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--np-border);
    font-size: 14px;
    color: var(--np-text-secondary);
}

body.np-active table tr:hover td {
    background-color: var(--np-bg-hover);
}

/* ---- 分页样式 ---- */

body.np-active .pagination {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

body.np-active .pagination li a,
body.np-active .pagination li span {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--np-border);
    border-radius: var(--np-radius-sm);
    color: var(--np-text-secondary);
    font-size: 14px;
    transition: all 0.2s;
}

body.np-active .pagination li a:hover {
    background-color: var(--np-primary);
    color: #fff;
    border-color: var(--np-primary);
}

body.np-active .pagination li.active span {
    background-color: var(--np-primary);
    color: #fff;
    border-color: var(--np-primary);
}

/* ---- 标签/徽章 ---- */

body.np-active .tag,
body.np-active .badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 12px;
    border-radius: var(--np-radius-sm);
    background-color: var(--np-bg-soft);
    color: var(--np-text-secondary);
    border: 1px solid var(--np-border);
}

body.np-active .tag-primary,
body.np-active .badge-primary {
    background-color: var(--np-primary);
    color: #fff;
    border-color: var(--np-primary);
}

/* ---- 通知/提示 ---- */

body.np-active .notification,
body.np-active .alert {
    padding: 12px 16px;
    border-radius: var(--np-radius-md);
    font-size: 14px;
    margin-bottom: 16px;
}

body.np-active .notification.success,
body.np-active .alert-success {
    background-color: rgba(62, 175, 124, 0.1);
    border: 1px solid var(--np-primary);
    color: var(--np-primary-dark);
}

body.np-active .notification.error,
body.np-active .alert-error {
    background-color: rgba(237, 66, 89, 0.1);
    border: 1px solid var(--np-accent-red);
    color: var(--np-accent-red);
}

body.np-active .notification.warning,
body.np-active .alert-warning {
    background-color: rgba(240, 136, 77, 0.1);
    border: 1px solid var(--np-accent-orange);
    color: var(--np-accent-orange);
}

body.np-active .notification.info,
body.np-active .alert-info {
    background-color: rgba(74, 144, 226, 0.1);
    border: 1px solid var(--np-accent-blue);
    color: var(--np-accent-blue);
}

/* ---- 阅读区域优化 ---- */

body.np-active .page-content,
body.np-active .page-html {
    background-color: var(--np-reading-bg);
    color: var(--np-reading-text);
    padding: 32px;
    border-radius: var(--np-radius-md);
    line-height: var(--np-line-height, 1.8);
    font-size: var(--np-font-size, 16px);
}

/* 确保字号和行距应用到所有子元素 */
body.np-active .page-content *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(code):not(pre) {
    font-size: inherit;
    line-height: inherit;
}

/* 标题字号单独控制（相对于正文） */
body.np-active .page-content h1 { font-size: 1.8em; }
body.np-active .page-content h2 { font-size: 1.5em; }
body.np-active .page-content h3 { font-size: 1.3em; }
body.np-active .page-content h4 { font-size: 1.15em; }
body.np-active .page-content h5 { font-size: 1em; }
body.np-active .page-content h6 { font-size: 0.9em; }

/* 代码块字号单独控制 */
body.np-active .page-content code,
body.np-active .page-content pre {
    font-size: 0.9em;
}

body.np-active .page-content a,
body.np-active .page-html a {
    color: var(--np-reading-link);
}

body.np-active .page-content h1,
body.np-active .page-content h2,
body.np-active .page-content h3,
body.np-active .page-content h4,
body.np-active .page-content h5,
body.np-active .page-content h6 {
    color: var(--np-reading-text);
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

body.np-active .page-content p {
    margin-bottom: 1em;
    text-indent: 0;
}

body.np-active .page-content code {
    background-color: var(--np-bg-soft);
    padding: 2px 6px;
    border-radius: var(--np-radius-sm);
    font-family: var(--np-font-code);
    font-size: 0.9em;
}

body.np-active .page-content pre {
    background-color: var(--np-bg-soft);
    padding: 16px;
    border-radius: var(--np-radius-md);
    overflow-x: auto;
    border: 1px solid var(--np-reading-border);
}

body.np-active .page-content pre code {
    background: none;
    padding: 0;
}

body.np-active .page-content blockquote {
    border-left: 4px solid var(--np-primary);
    padding-left: 16px;
    margin-left: 0;
    color: var(--np-text-secondary);
    font-style: italic;
}

body.np-active .page-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--np-radius-md);
    margin: 16px 0;
}

/* ---- 阅读设置工具栏（面包屑行右侧） ---- */

/* 面包屑 + 设置按钮 行容器 */
body.np-active .np-breadcrumb-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.np-active .np-breadcrumb-bar__left {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

body.np-active .np-breadcrumb-bar__right {
    flex-shrink: 0;
    position: relative;
}

/* 阅读设置容器 - 弹窗定位基准 */
body.np-active .np-reading-settings {
    position: relative;
}

/* 设置触发按钮 */
body.np-active .np-rs-trigger {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--np-border, #eee);
    background: var(--np-bg-card, #fff);
    color: var(--np-text-secondary, #666);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

body.np-active .np-rs-trigger:hover {
    border-color: var(--np-primary, #3eaf7c);
    color: var(--np-primary, #3eaf7c);
    box-shadow: 0 2px 8px rgba(62,175,124,0.15);
}

body.np-active .np-rs-trigger.active {
    background: var(--np-primary, #3eaf7c);
    color: #fff;
    border-color: var(--np-primary, #3eaf7c);
}

/* 设置弹出面板 */
body.np-active .np-rs-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: var(--np-bg-card, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--np-border, #eee);
    display: none;
    z-index: 100;
    overflow: hidden;
}

body.np-active .np-rs-panel.visible {
    display: block;
    animation: np-panel-fade-in 0.2s ease;
}

@keyframes np-panel-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 标签页头部 */
body.np-active .np-rs-tabs {
    display: flex;
    border-bottom: 1px solid var(--np-border, #eee);
    background: var(--np-bg-soft, #f6f6f6);
}

body.np-active .np-rs-tab {
    flex: 1;
    padding: 10px 4px;
    border: none;
    background: transparent;
    color: var(--np-text-muted, #999);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

body.np-active .np-rs-tab:hover {
    color: var(--np-primary, #3eaf7c);
    background: rgba(62,175,124,0.05);
}

body.np-active .np-rs-tab.active {
    color: var(--np-primary, #3eaf7c);
    border-bottom-color: var(--np-primary, #3eaf7c);
    background: var(--np-bg-card, #fff);
}

/* 标签页内容 */
body.np-active .np-rs-tab-content {
    display: none;
    padding: 16px;
}

body.np-active .np-rs-tab-content.active {
    display: block;
}

body.np-active .np-rs-desc {
    font-size: 12px;
    color: var(--np-text-muted, #999);
    margin: 0 0 12px 0;
}

/* 沉浸式模式切换 */
body.np-active .np-rs-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

body.np-active .np-rs-toggle-track {
    display: inline-block;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: #ddd;
    position: relative;
    transition: background 0.2s ease;
}

body.np-active .np-rs-toggle.active .np-rs-toggle-track {
    background: var(--np-primary, #3eaf7c);
}

body.np-active .np-rs-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: left 0.2s ease;
}

body.np-active .np-rs-toggle.active .np-rs-toggle-thumb {
    left: 22px;
}

body.np-active .np-rs-toggle-label {
    font-size: 13px;
    color: var(--np-text-primary, #333);
}

/* 护眼主题色块行 */
body.np-active .np-rs-theme-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

body.np-active .np-rs-theme-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

body.np-active .np-rs-theme-dot:hover {
    transform: scale(1.15);
}

body.np-active .np-rs-theme-dot.active {
    border-color: var(--np-primary, #3eaf7c);
    box-shadow: 0 0 0 2px rgba(62, 175, 124, 0.3);
}

body.np-active .np-theme-white  { background: #ffffff; }
body.np-active .np-theme-green  { background: #cbdec9; }
body.np-active .np-theme-yellow { background: #ebe5d8; }
body.np-active .np-theme-pink   { background: #edd4d4; }
body.np-active .np-theme-gray   { background: #d3d3d3; }
body.np-active .np-theme-dark   { background: #1a1a1a; }

body.np-active .np-rs-theme-dot.active.np-theme-white {
    border-color: var(--np-primary, #3eaf7c);
}

/* 护眼适用范围切换 */
body.np-active .np-rs-scope-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--np-border);
}

body.np-active .np-rs-scope-label {
    font-size: 12px;
    color: var(--np-text-muted);
}

body.np-active .np-rs-scope-btn {
    font-size: 12px;
    padding: 3px 10px;
    border: 1px solid var(--np-border-dark);
    border-radius: 12px;
    background: var(--np-bg-page);
    color: var(--np-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.4;
}

body.np-active .np-rs-scope-btn:hover {
    border-color: var(--np-primary);
    color: var(--np-primary);
}

body.np-active .np-rs-scope-btn.active {
    background: var(--np-primary);
    border-color: var(--np-primary);
    color: #fff;
}

/* 字体/行距调节按钮组 */
body.np-active .np-rs-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

body.np-active .np-rs-step-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--np-border-dark, #e0e0e0);
    background: var(--np-bg-page, #fff);
    color: var(--np-text-secondary, #666);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

body.np-active .np-rs-step-btn:hover {
    border-color: var(--np-primary, #3eaf7c);
    color: var(--np-primary, #3eaf7c);
    background: rgba(62, 175, 124, 0.05);
}

body.np-active .np-rs-step-btn:active {
    transform: scale(0.92);
}

body.np-active .np-rs-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--np-text-primary, #333);
    min-width: 52px;
    text-align: center;
}

/* ---- 沉浸式模式 ---- */
body.np-active.np-immersive .tri-layout-left,
body.np-active.np-immersive .tri-layout-right,
body.np-active.np-immersive .tri-layout-sides {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

body.np-active.np-immersive .tri-layout-middle {
    max-width: 800px;
    margin: 0 auto;
    transition: max-width 0.3s ease;
}

body.np-active.np-immersive .tri-layout-mobile-tabs {
    display: none;
}

/* ---- 护眼主题背景覆盖 ---- */
body.np-active.np-reading-green,
body.np-active.np-reading-green .tri-layout-sides,
body.np-active.np-reading-green .tri-layout-left,
body.np-active.np-reading-green .tri-layout-right,
body.np-active.np-reading-green .tri-layout-left-contents,
body.np-active.np-reading-green .tri-layout-right-contents,
body.np-active.np-reading-green .card,
body.np-active.np-reading-green .content-wrap,
body.np-active.np-reading-green main,
body.np-active.np-reading-green .page-content,
body.np-active.np-reading-green .tri-layout-middle,
body.np-active.np-reading-green .tri-layout-middle-contents,
body.np-active.np-reading-green .np-book-header,
body.np-active.np-reading-green .np-book-contents,
body.np-active.np-reading-green .entity-list,
body.np-active.np-reading-green .entity-list-item,
body.np-active.np-reading-green .actions,
body.np-active.np-reading-green .details,
body.np-active.np-reading-green .sidebar-section,
body.np-active.np-reading-green .sticky-panel {
    background-color: #cbdec9 !important;
}
body.np-active.np-reading-yellow,
body.np-active.np-reading-yellow .tri-layout-sides,
body.np-active.np-reading-yellow .tri-layout-left,
body.np-active.np-reading-yellow .tri-layout-right,
body.np-active.np-reading-yellow .tri-layout-left-contents,
body.np-active.np-reading-yellow .tri-layout-right-contents,
body.np-active.np-reading-yellow .card,
body.np-active.np-reading-yellow .content-wrap,
body.np-active.np-reading-yellow main,
body.np-active.np-reading-yellow .page-content,
body.np-active.np-reading-yellow .tri-layout-middle,
body.np-active.np-reading-yellow .tri-layout-middle-contents,
body.np-active.np-reading-yellow .np-book-header,
body.np-active.np-reading-yellow .np-book-contents,
body.np-active.np-reading-yellow .entity-list,
body.np-active.np-reading-yellow .entity-list-item,
body.np-active.np-reading-yellow .actions,
body.np-active.np-reading-yellow .details,
body.np-active.np-reading-yellow .sidebar-section,
body.np-active.np-reading-yellow .sticky-panel {
    background-color: #ebe5d8 !important;
}
body.np-active.np-reading-pink,
body.np-active.np-reading-pink .tri-layout-sides,
body.np-active.np-reading-pink .tri-layout-left,
body.np-active.np-reading-pink .tri-layout-right,
body.np-active.np-reading-pink .tri-layout-left-contents,
body.np-active.np-reading-pink .tri-layout-right-contents,
body.np-active.np-reading-pink .card,
body.np-active.np-reading-pink .content-wrap,
body.np-active.np-reading-pink main,
body.np-active.np-reading-pink .page-content,
body.np-active.np-reading-pink .tri-layout-middle,
body.np-active.np-reading-pink .tri-layout-middle-contents,
body.np-active.np-reading-pink .np-book-header,
body.np-active.np-reading-pink .np-book-contents,
body.np-active.np-reading-pink .entity-list,
body.np-active.np-reading-pink .entity-list-item,
body.np-active.np-reading-pink .actions,
body.np-active.np-reading-pink .details,
body.np-active.np-reading-pink .sidebar-section,
body.np-active.np-reading-pink .sticky-panel {
    background-color: #edd4d4 !important;
}
body.np-active.np-reading-gray,
body.np-active.np-reading-gray .tri-layout-sides,
body.np-active.np-reading-gray .tri-layout-left,
body.np-active.np-reading-gray .tri-layout-right,
body.np-active.np-reading-gray .tri-layout-left-contents,
body.np-active.np-reading-gray .tri-layout-right-contents,
body.np-active.np-reading-gray .card,
body.np-active.np-reading-gray .content-wrap,
body.np-active.np-reading-gray main,
body.np-active.np-reading-gray .page-content,
body.np-active.np-reading-gray .tri-layout-middle,
body.np-active.np-reading-gray .tri-layout-middle-contents,
body.np-active.np-reading-gray .np-book-header,
body.np-active.np-reading-gray .np-book-contents,
body.np-active.np-reading-gray .entity-list,
body.np-active.np-reading-gray .entity-list-item,
body.np-active.np-reading-gray .actions,
body.np-active.np-reading-gray .details,
body.np-active.np-reading-gray .sidebar-section,
body.np-active.np-reading-gray .sticky-panel {
    background-color: #d3d3d3 !important;
}
body.np-active.np-reading-dark,
body.np-active.np-reading-dark .tri-layout-sides,
body.np-active.np-reading-dark .tri-layout-left,
body.np-active.np-reading-dark .tri-layout-right,
body.np-active.np-reading-dark .tri-layout-left-contents,
body.np-active.np-reading-dark .tri-layout-right-contents,
body.np-active.np-reading-dark .card,
body.np-active.np-reading-dark .content-wrap,
body.np-active.np-reading-dark main,
body.np-active.np-reading-dark .page-content,
body.np-active.np-reading-dark .tri-layout-middle,
body.np-active.np-reading-dark .tri-layout-middle-contents,
body.np-active.np-reading-dark .np-book-header,
body.np-active.np-reading-dark .np-book-contents,
body.np-active.np-reading-dark .entity-list,
body.np-active.np-reading-dark .entity-list-item,
body.np-active.np-reading-dark .actions,
body.np-active.np-reading-dark .details,
body.np-active.np-reading-dark .sidebar-section,
body.np-active.np-reading-dark .sticky-panel {
    background-color: #1a1a1a !important;
    color: #cccccc !important;
}

/* 夜间模式文字颜色适配 */
body.np-active.np-reading-dark .page-content,
body.np-active.np-reading-dark .tri-layout-middle-contents {
    color: #cccccc;
}
body.np-active.np-reading-dark .card {
    background-color: #2a2a2a;
    border-color: #333;
}

/* 侧边栏滚动渐变指示器适配护眼模式 */
body.np-active.np-reading-green .scroll-away-from-top::before,
body.np-active.np-reading-green .scroll-away-from-bottom::after {
    background: linear-gradient(to bottom, #cbdec9, transparent) !important;
}
body.np-active.np-reading-green .scroll-away-from-bottom::after {
    background: linear-gradient(to top, #cbdec9, transparent) !important;
}

body.np-active.np-reading-yellow .scroll-away-from-top::before,
body.np-active.np-reading-yellow .scroll-away-from-bottom::after {
    background: linear-gradient(to bottom, #ebe5d8, transparent) !important;
}
body.np-active.np-reading-yellow .scroll-away-from-bottom::after {
    background: linear-gradient(to top, #ebe5d8, transparent) !important;
}

body.np-active.np-reading-pink .scroll-away-from-top::before,
body.np-active.np-reading-pink .scroll-away-from-bottom::after {
    background: linear-gradient(to bottom, #edd4d4, transparent) !important;
}
body.np-active.np-reading-pink .scroll-away-from-bottom::after {
    background: linear-gradient(to top, #edd4d4, transparent) !important;
}

body.np-active.np-reading-gray .scroll-away-from-top::before,
body.np-active.np-reading-gray .scroll-away-from-bottom::after {
    background: linear-gradient(to bottom, #d3d3d3, transparent) !important;
}
body.np-active.np-reading-gray .scroll-away-from-bottom::after {
    background: linear-gradient(to top, #d3d3d3, transparent) !important;
}

body.np-active.np-reading-dark .scroll-away-from-top::before,
body.np-active.np-reading-dark .scroll-away-from-bottom::after {
    background: linear-gradient(to bottom, #1a1a1a, transparent) !important;
}
body.np-active.np-reading-dark .scroll-away-from-bottom::after {
    background: linear-gradient(to top, #1a1a1a, transparent) !important;
}

/* ---- 侧边栏优化 ---- */

body.np-active .tri-layout-left {
    background-color: var(--np-reading-bg, var(--np-bg-page));
    border-right: 1px solid var(--np-border);
    min-height: 100vh;
}

body.np-active .tri-layout-right {
    background-color: var(--np-reading-bg, var(--np-bg-page));
    border-left: 1px solid var(--np-border);
    min-height: 100vh;
}

body.np-active .tri-layout-left-contents,
body.np-active .tri-layout-right-contents {
    background-color: var(--np-reading-bg, var(--np-bg-page));
    min-height: 100vh;
}

body.np-active .tri-layout-left nav,
body.np-active .tri-layout-right nav {
    padding: 16px;
}

body.np-active .tri-layout-left nav a,
body.np-active .tri-layout-right nav a {
    display: block;
    padding: 8px 12px;
    color: var(--np-text-secondary);
    border-radius: var(--np-radius-sm);
    transition: background-color 0.2s, color 0.2s;
}

body.np-active .tri-layout-left nav a:hover,
body.np-active .tri-layout-right nav a:hover {
    background-color: var(--np-bg-hover);
    color: var(--np-primary);
}

body.np-active .tri-layout-left nav a.active,
body.np-active .tri-layout-right nav a.active {
    background-color: rgba(62, 175, 124, 0.1);
    color: var(--np-primary);
    font-weight: 500;
}

/* ---- 页脚 ---- */

body.np-active footer.footer {
    background-color: var(--np-bg-page);
    border-top: 1px solid var(--np-border);
    color: var(--np-text-muted);
    padding: 20px 0;
    font-size: 13px;
}

body.np-active footer.footer a {
    color: var(--np-text-secondary);
}

body.np-active footer.footer a:hover {
    color: var(--np-primary);
}

/* ---- 动画 ---- */

@keyframes np-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ========================================
   6. 书籍详情页 - 小说风格
   ======================================== */

/* 书籍信息头部 */
body.np-active .np-book-header {
    padding: 28px 32px;
    margin-bottom: 16px;
}

/* 第一行：书名 */
body.np-active .np-book-header__title {
    font-size: 26px;
    font-weight: 700;
    color: var(--np-text-primary, #333);
    margin: 0 0 16px 0;
    line-height: 1.3;
}

/* 第二行：封面 + 概要 */
body.np-active .np-book-header__body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 16px;
}

body.np-active .np-book-header__cover {
    flex-shrink: 0;
    width: 130px;
}

body.np-active .np-book-header__cover-img {
    width: 130px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    display: block;
}

body.np-active .np-book-header__desc {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--np-text-secondary, #666);
}

body.np-active .np-book-header__desc p {
    margin: 0 0 8px 0;
}

/* 第三行：元数据 + 操作按钮 */
body.np-active .np-book-header__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--np-border, #eee);
    flex-wrap: wrap;
}

body.np-active .np-book-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: var(--np-text-muted, #999);
}

body.np-active .np-book-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.np-active .np-book-meta-item svg {
    width: 14px;
    height: 14px;
}

body.np-active .np-book-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.np-active .np-book-header__actions .button {
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 6px;
}

/* 章节目录区域 */
body.np-active .np-book-contents {
    padding: 24px 32px 32px;
}

body.np-active .np-book-contents__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--np-text-primary, #333);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--np-border, #eee);
    display: flex;
    align-items: center;
    gap: 8px;
}

body.np-active .np-book-contents__title svg {
    width: 18px;
    height: 18px;
    color: var(--np-primary, #3eaf7c);
}

/* 目录列表 */
body.np-active .np-toc {
    display: flex;
    flex-direction: column;
}

body.np-active .np-toc-chapter {
    margin-bottom: 8px;
}

body.np-active .np-toc-chapter__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

body.np-active .np-toc-chapter__header:hover {
    background-color: var(--np-bg-hover, #f9f9f9);
}

body.np-active .np-toc-chapter__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--np-primary, #3eaf7c);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

body.np-active .np-toc-chapter__name {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--np-text-primary, #333);
    text-decoration: none;
    transition: color 0.15s ease;
}

body.np-active .np-toc-chapter__name:hover {
    color: var(--np-primary, #3eaf7c);
}

body.np-active .np-toc-chapter__count {
    font-size: 12px;
    color: var(--np-text-muted, #999);
    flex-shrink: 0;
}

body.np-active .np-toc-chapter__pages {
    padding-left: 40px;
    display: flex;
    flex-direction: column;
}

body.np-active .np-toc-page {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

body.np-active .np-toc-page:hover {
    background-color: var(--np-bg-hover, #f9f9f9);
}

body.np-active .np-toc-page::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--np-text-muted, #ccc);
    flex-shrink: 0;
    position: relative;
    top: -1px;
}

body.np-active .np-toc-page__name {
    font-size: 14px;
    color: var(--np-text-secondary, #555);
    transition: color 0.15s ease;
}

body.np-active .np-toc-page:hover .np-toc-page__name {
    color: var(--np-primary, #3eaf7c);
}

body.np-active .np-toc-page__excerpt {
    font-size: 12px;
    color: var(--np-text-muted, #999);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.np-active .np-toc-page--standalone {
    padding-left: 0;
}

body.np-active .np-toc-page--standalone .np-toc-page__link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 6px;
    text-decoration: none;
    border-left: 3px solid var(--np-primary, #3eaf7c);
    transition: background-color 0.15s ease;
}

body.np-active .np-toc-page--standalone .np-toc-page__link:hover {
    background-color: var(--np-bg-hover, #f9f9f9);
}

body.np-active .np-toc-page--standalone .np-toc-page__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--np-text-primary, #333);
}

/* 空状态 */
body.np-active .np-book-empty {
    text-align: center;
    padding: 48px 24px;
}

body.np-active .np-book-empty p {
    font-size: 14px;
    margin-bottom: 16px;
}

body.np-active .np-book-empty__actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* ---- 响应式适配 ---- */

@media screen and (max-width: 1000px) {
    body.np-active .tri-layout-left,
    body.np-active .tri-layout-right {
        display: none;
    }
    body.np-active .container {
        padding: 0 16px;
    }
}

@media screen and (max-width: 768px) {
    body.np-active .card.content-wrap {
        padding: 16px;
    }
    body.np-active .list-heading {
        font-size: 16px;
    }
    body.np-active .page-content,
    body.np-active .page-html {
        padding: 16px;
        font-size: 15px;
    }
    body.np-active .np-rs-panel {
        width: 260px;
        right: -8px;
    }
    /* 书籍详情页移动端适配 */
    body.np-active .np-book-header {
        padding: 20px;
    }
    body.np-active .np-book-header__title {
        font-size: 20px;
    }
    body.np-active .np-book-header__body {
        gap: 14px;
    }
    body.np-active .np-book-header__cover {
        width: 100px;
    }
    body.np-active .np-book-header__cover-img {
        width: 100px;
    }
    body.np-active .np-book-header__footer {
        flex-direction: column;
        align-items: flex-start;
    }
    body.np-active .np-book-contents {
        padding: 16px 20px 20px;
    }
    body.np-active .np-toc-chapter__pages {
        padding-left: 20px;
    }
}

/* ========================================
   首页 - 小说风格自定义首页
   ======================================== */

body.np-active .np-home {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

/* 通用段落标题 */
body.np-active .np-home-section {
    margin-bottom: 28px;
}

body.np-active .np-home-section__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--np-text-primary);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.np-active .np-home-section__title svg {
    fill: var(--np-primary);
    width: 20px;
    height: 20px;
}

body.np-active .np-home-section__icon {
    display: inline-flex;
    align-items: center;
}

body.np-active .np-home-section__icon svg {
    fill: var(--np-primary);
    width: 20px;
    height: 20px;
}

/* ---- 精选书籍横向滚动 ---- */

body.np-active .np-home-hero {
    padding: 24px;
    overflow: hidden;
}

body.np-active .np-home-books-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

body.np-active .np-home-book-card {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}

body.np-active .np-home-book-card:hover {
    transform: translateY(-4px);
}

body.np-active .np-home-book-card__cover {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--np-radius-md);
    overflow: hidden;
    box-shadow: var(--np-shadow-md);
    margin-bottom: 8px;
    background: var(--np-bg-soft);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

body.np-active .np-home-book-card__no-cover {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--np-primary), var(--np-primary-dark));
    color: #fff;
    font-size: 42px;
    font-weight: 700;
}

body.np-active .np-home-book-card__no-cover--sm {
    font-size: 24px;
}

body.np-active .np-home-book-card__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--np-text-primary);
    line-height: 1.4;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- 书架分类（标签切换） ---- */

body.np-active .np-home-shelf-tabs {
    padding: 0;
    overflow: hidden;
}

body.np-active .np-home-shelf-tabs__nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--np-border);
    overflow-x: auto;
    scrollbar-width: thin;
}

body.np-active .np-home-shelf-tabs__tab {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--np-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}

body.np-active .np-home-shelf-tabs__tab:hover {
    color: var(--np-primary);
}

body.np-active .np-home-shelf-tabs__tab.is-active {
    color: var(--np-primary);
    border-bottom-color: var(--np-primary);
}

body.np-active .np-home-shelf-tabs__body {
    position: relative;
}

body.np-active .np-home-shelf-tabs__panel {
    display: none;
    padding: 20px 24px;
    gap: 24px;
}

body.np-active .np-home-shelf-tabs__panel.is-active {
    display: flex;
}

/* 左侧：封面 + 简介 */
body.np-active .np-home-shelf-tabs__info {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.np-active .np-home-shelf-tabs__cover {
    width: 220px;
    height: 140px;
    border-radius: var(--np-radius-md);
    overflow: hidden;
    background: var(--np-bg-soft);
}

body.np-active .np-home-shelf-tabs__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.np-active .np-home-shelf-tabs__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--np-primary-light), var(--np-primary));
    color: rgba(255,255,255,0.7);
}

body.np-active .np-home-shelf-tabs__placeholder svg {
    width: 48px;
    height: 48px;
    fill: rgba(255,255,255,0.7);
}

body.np-active .np-home-shelf-tabs__meta {
    flex: 1;
}

body.np-active .np-home-shelf-tabs__name {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

body.np-active .np-home-shelf-tabs__name a {
    color: var(--np-text-primary);
    text-decoration: none;
}

body.np-active .np-home-shelf-tabs__name a:hover {
    color: var(--np-primary);
}

body.np-active .np-home-shelf-tabs__desc {
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* 右侧：书籍文字列表 */
body.np-active .np-home-shelf-tabs__books {
    flex: 1;
    min-width: 0;
}

body.np-active .np-home-shelf-tabs__list {
    display: flex;
    flex-direction: column;
}

body.np-active .np-home-shelf-tabs__item {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 6px;
    padding: 5px 0;
    text-decoration: none !important;
    color: inherit !important;
    border-bottom: 1px dashed var(--np-border);
    transition: background-color 0.15s;
    align-items: baseline;
}

body.np-active .np-home-shelf-tabs__item:last-child {
    border-bottom: none;
}

body.np-active .np-home-shelf-tabs__item:hover {
    background-color: var(--np-bg-hover);
}

body.np-active .np-home-shelf-tabs__item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--np-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.np-active .np-home-shelf-tabs__item-name svg {
    width: 16px;
    height: 16px;
    fill: var(--np-primary);
    flex-shrink: 0;
}

body.np-active .np-home-shelf-tabs__item:hover .np-home-shelf-tabs__item-name {
    color: var(--np-primary);
}

body.np-active .np-home-shelf-tabs__item-excerpt {
    font-size: 13px;
    line-height: 1.5;
    color: var(--np-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.np-active .np-home-shelf-tabs__item-stats {
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--np-text-muted);
}

body.np-active .np-home-shelf-tabs__empty {
    padding: 40px 0;
    text-align: center;
    width: 100%;
    font-size: 14px;
}

/* 响应式 */
@media (max-width: 700px) {
    body.np-active .np-home-shelf-tabs__panel {
        flex-direction: column;
    }
    body.np-active .np-home-shelf-tabs__info {
        flex: none;
        flex-direction: row;
        align-items: flex-start;
    }
    body.np-active .np-home-shelf-tabs__cover {
        width: 100px;
        height: 100px;
        flex-shrink: 0;
    }
    body.np-active .np-home-shelf-tabs__item {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* ---- 底部双栏：最近更新 + 动态 ---- */

body.np-active .np-home-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 32px;
    align-items: stretch;
}

body.np-active .np-home-bottom .card {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

body.np-active .np-home-recent__list {
    display: flex;
    flex-direction: column;
}

body.np-active .np-home-recent__item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--np-border);
    transition: background-color 0.15s;
}

body.np-active .np-home-recent__item:last-child {
    border-bottom: none;
}

body.np-active .np-home-recent__item:hover {
    background-color: var(--np-bg-hover);
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: var(--np-radius-sm);
}

body.np-active .np-home-recent__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

body.np-active .np-home-recent__icon svg {
    width: 14px;
    height: 14px;
    fill: var(--np-primary);
}

body.np-active .np-home-recent__time {
    flex: 0 0 62px;
    font-size: 12px;
    color: var(--np-text-muted);
    font-variant-numeric: tabular-nums;
    font-family: var(--np-font-code);
}

body.np-active .np-home-recent__name {
    font-size: 14px;
    color: var(--np-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 书籍名称链接 - 主题色 */
body.np-active .np-home-recent__name a.np-home-recent__book {
    color: var(--np-primary);
    font-size: 12px;
    flex-shrink: 0;
    text-decoration: none;
}

body.np-active .np-home-recent__name a.np-home-recent__book:hover {
    text-decoration: underline;
}

/* 分隔符 */
body.np-active .np-home-recent__sep {
    color: var(--np-text-light);
    margin: 0 4px;
}

/* 页面标题链接 - 正文色，hover 时变主题色 */
body.np-active .np-home-recent__name > a:not(.np-home-recent__book) {
    color: var(--np-text-primary);
    text-decoration: none;
}

body.np-active .np-home-recent__name > a:not(.np-home-recent__book):hover {
    color: var(--np-primary);
    text-decoration: underline;
}

body.np-active .np-home-activity .activity-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--np-border);
}

body.np-active .np-home-activity .activity-list-item:last-child {
    border-bottom: none;
}

body.np-active .np-home-activity .activity-list-item > div:first-child {
    flex: 0 0 auto;
}

body.np-active .np-home-activity .activity-list-item .avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

body.np-active .np-home-activity .activity-list-item > div:last-child {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.np-active .np-home-activity .activity-list-item > div:last-child br {
    display: none;
}

body.np-active .np-home-activity .activity-list-item > div:last-child .text-muted {
    margin-left: 6px;
    font-size: 12px;
}

body.np-active .np-home-activity .activity-list-item > div:last-child .text-muted svg {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
    fill: var(--np-text-muted);
}

/* ========================================
   书架索引页 - 小说风格书架卡片
   ======================================== */

body.np-active .np-shelf-index__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

body.np-active .np-shelf-index__header .list-heading {
    margin: 0;
}

body.np-active .np-shelf-index__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.np-active .np-shelf-card {
    display: flex;
    align-items: stretch;
    padding: 16px;
    border: 1px solid var(--np-border);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

body.np-active .np-shelf-card:hover {
    border-color: var(--np-primary-light);
    box-shadow: 0 2px 8px rgba(62, 175, 124, 0.1);
}

body.np-active .np-shelf-card__cover {
    flex: 0 0 120px;
    width: 120px;
    height: 75px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--np-bg-soft);
}

body.np-active .np-shelf-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.np-active .np-shelf-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--np-bg-soft);
}

body.np-active .np-shelf-card__placeholder svg {
    width: 32px;
    height: 32px;
    fill: var(--np-text-light);
}

body.np-active .np-shelf-card__info {
    flex: 1;
    min-width: 0;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.np-active .np-shelf-card__name {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px 0;
    color: var(--np-text-primary);
    line-height: 1.3;
}

body.np-active .np-shelf-card__desc {
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.np-active .np-shelf-card__count {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.np-active .np-shelf-card__count svg {
    width: 14px;
    height: 14px;
    fill: var(--np-text-muted);
}

body.np-active .np-shelf-card__books {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 16px;
    border-left: 1px solid var(--np-border);
}

body.np-active .np-shelf-card__book-thumb {
    width: 48px;
    height: 30px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--np-bg-soft);
    flex-shrink: 0;
}

body.np-active .np-shelf-card__book-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.np-active .np-shelf-card__book-no-cover {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--np-text-muted);
    background: var(--np-bg-soft);
}

body.np-active .np-shelf-index__pagination {
    margin-top: 24px;
}

body.np-active .np-shelf-index__pagination .pagination {
    justify-content: center;
}

/* ---- 响应式 ---- */

@media (max-width: 880px) {
    body.np-active .np-home-bottom {
        grid-template-columns: 1fr;
    }
    body.np-active .np-home-books-row {
        grid-template-columns: repeat(3, 1fr);
    }
    body.np-active .np-shelf-card {
        flex-wrap: wrap;
    }
    body.np-active .np-shelf-card__books {
        width: 100%;
        padding-left: 0;
        padding-top: 12px;
        margin-top: 12px;
        border-left: none;
        border-top: 1px solid var(--np-border);
    }
}

/* ========================================
   页脚增强 - 版权/技术支持/链接布局
   ======================================== */

body.np-active footer {
    padding: 1.5rem 1rem 2rem;
    text-align: center;
}

body.np-active .np-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

body.np-active .np-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
}

body.np-active .np-footer-links a {
    font-size: 13px;
    color: var(--np-text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

body.np-active .np-footer-links a:hover {
    color: var(--np-primary);
}

body.np-active .np-footer-copyright {
    font-size: 12px;
    color: var(--np-text-muted);
    line-height: 1.5;
}

body.np-active .np-footer-copyright a {
    color: var(--np-text-secondary);
    text-decoration: none;
}

body.np-active .np-footer-copyright a:hover {
    color: var(--np-primary);
}

body.np-active .np-footer-powered {
    font-size: 12px;
    color: var(--np-text-muted);
}

body.np-active .np-footer-powered a {
    color: var(--np-text-secondary);
    text-decoration: none;
    font-weight: 500;
}

body.np-active .np-footer-powered a:hover {
    color: var(--np-primary);
}

/* 打印时隐藏工具栏 */
@media print {
    .np-reading-settings {
        display: none !important;
    }
}