/* ==========================================================================
   ModernNovel Pro - 沉浸式小说阅读器生产级样式
   assets/novel.css
   ========================================================================== */

/* 1. 基础容器与平滑过渡 */
.novel-view { 
    max-width: 800px; 
    margin: 0 auto; 
    padding: 1px; 
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 2. 云端调取档案 - 旋转加载特效 */
.novel-loading { 
    text-align: center; 
    padding: 120px 0; 
    color: #999; 
}
.novel-loading .spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 20px;
    border: 3px solid rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    border-top-color: var(--cinema-theme-color, #0a84ff); /* 智能沿用主色调 */
    animation: novelSpin 0.8s linear infinite;
}
@keyframes novelSpin {
    to { transform: rotate(360deg); }
}

/* 3. 头部元数据与工具栏 */
.novel-head { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    border-bottom: 1px solid rgba(0,0,0,0.08); 
    margin-bottom: 20px; 
    padding-bottom: 15px; 
}
.book-title { 
    font-size: 14px; 
    font-weight: normal;
    opacity: 0.5; 
    margin: 0; 
}
.novel-toolbar button { 
    background: transparent; 
    border: 1px solid rgba(0,0,0,0.15); 
    padding: 4px 10px; 
    font-size: 12px; 
    cursor: pointer; 
    margin-left: 6px; 
    border-radius: 6px; 
    color: inherit;
    transition: all 0.2s ease;
}
.novel-toolbar button:hover {
    border-color: var(--cinema-theme-color, #0a84ff);
    color: var(--cinema-theme-color, #0a84ff);
}

/* 4. 黄金比例正文排版（核心） */
.novel-body { 
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Serif CJK SC", serif; 
}
.chapter-name { 
    font-size: 28px; 
    font-weight: 600;
    margin-bottom: 45px; 
    color: #111; 
    text-align: center; 
    transition: color 0.3s ease;
}
.chapter-content { 
    line-height: 1.85; 
    color: #2c2c2c; 
    text-align: justify; 
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}
/* 标准闭合 P 标签完美内边距 */
.chapter-content p { 
    margin: 0 0 1.6em 0; 
    text-indent: 2em; 
    word-break: break-all;
}

/* 5. 底部单页秒切按钮 */
.novel-nav-bottom { 
    display: flex; 
    justify-content: space-between; 
    margin-top: 60px; 
    padding-top: 25px; 
    border-top: 1px solid rgba(0,0,0,0.05); 
}
.n-btn { 
    outline: none;
    border: none;
    color: #444; 
    background: rgba(0,0,0,0.04); 
    padding: 10px 28px; 
    border-radius: 30px; 
    font-size: 14px; 
    font-weight: 500;
    transition: all 0.25s ease; 
    cursor: pointer; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.n-btn:hover { 
    background: #111; 
    color: #fff; 
}
.n-btn.btn-menu {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0,0,0,0.08);
}

/* 6. 侧边抽屉目录（完美重构对接 Button 节点） */
.novel-drawer { 
    position: fixed; 
    left: -325px; 
    top: 0; 
    width: 310px; 
    height: 100%; 
    background: #fff; 
    z-index: 2005; 
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
    overflow-y: auto; 
    box-shadow: 5px 0 25px rgba(0,0,0,0.08); 
    will-change: transform;
}
.novel-drawer.open { 
    transform: translateX(325px); /* 采用高性能硬件加速位移 */
}
.drawer-header { 
    padding: 22px 20px; 
    background: #1a1a1a; 
    color: #fff; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    font-size: 15px;
}
.drawer-header .close-btn { 
    font-size: 22px; 
    cursor: pointer; 
    opacity: 0.7; 
    transition: opacity 0.2s;
    padding: 0 5px;
}
.drawer-header .close-btn:hover { opacity: 1; }

.drawer-list .drawer-item { 
    display: flex; 
    align-items: center;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    text-align: left;
    padding: 15px 20px; 
    border-bottom: 1px solid rgba(0,0,0,0.03); 
    color: #555; 
    font-size: 14px; 
    cursor: pointer;
    transition: all 0.2s ease;
}
.drawer-list .drawer-item:hover { 
    background: rgba(0,0,0,0.02); 
    color: #111;
}
.drawer-list .drawer-item .num {
    margin-right: 12px;
    font-size: 12px;
    opacity: 0.4;
    width: 20px;
}
.drawer-list .drawer-item.active { 
    color: var(--cinema-theme-color, #0a84ff) !important; 
    background: rgba(10, 132, 255, 0.06) !important; 
    font-weight: 600;
}

/* 遮罩阴影层 */
#drawer-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.4); 
    display: none; 
    z-index: 2000; 
    backdrop-filter: blur(2px); /* 增加高端环境微模糊 */
}
#drawer-overlay.show { display: block; }


/* ==========================================================================
   7. 记忆化沉浸配色方案（强力修复老版本权重冲突大坑）
   ========================================================================== */

/* 【护眼模式高权重覆盖组】 */
body.n-eye { 
    background-color: #eef5eb !important; 
}
body.n-eye .novel-view { color: #23341f !important; }
body.n-eye .chapter-name { color: #1c2b19 !important; }
body.n-eye .chapter-content, 
body.n-eye .chapter-content p { color: #23341f !important; }
body.n-eye .novel-head { border-bottom-color: rgba(0,0,0,0.06) !important; }
body.n-eye .novel-drawer { background: #f4faf0 !important; }
body.n-eye .drawer-list .drawer-item { color: #3b5037; border-bottom-color: rgba(0,0,0,0.03); }
body.n-eye .drawer-list .drawer-item:hover { background: rgba(0,0,0,0.03); }