/* ==========================================================================
   移动端「下一章 / 返回目录」底部导航样式 (2026-07-03)
   仅 < 768px 显示，桌面端完全隐藏
   主题色由 next-page.js 注入的 CSS 变量决定
   ========================================================================== */

/* 默认：桌面端隐藏（>768px 完全不占空间） */
#nextPageNav {
    display: none;
}

@media (max-width: 768px) {
    #nextPageNav {
        display: block;
        margin: 12px 0 0 0;
    }

    .next-page-link {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        margin-bottom: 6px;
        background: linear-gradient(135deg, var(--np-light) 0%, #ffffff 100%);
        border: 2px solid var(--np-border);
        border-left: 6px solid var(--np-primary);
        border-radius: 12px;
        text-decoration: none;
        color: var(--np-text);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .next-page-link:active {
        transform: scale(0.98);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }

    .next-page-link .np-label {
        font-size: 12px;
        font-weight: 600;
        color: var(--np-primary);
        background: var(--np-light);
        padding: 4px 10px;
        border-radius: 999px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .next-page-link .np-label.back {
        color: var(--np-text);
        background: #f3f4f6;
    }

    .next-page-link .np-title {
        flex: 1;
        font-size: 15px;
        font-weight: 600;
        color: var(--np-text);
        line-height: 1.4;
    }

    .next-page-link .np-arrow {
        font-size: 28px;
        font-weight: 300;
        color: var(--np-primary);
        flex-shrink: 0;
        line-height: 1;
    }

    .next-page-link .np-arrow.back {
        color: var(--np-text);
    }

    /* 末章样式：只有返回目录时的视觉微调 */
    .next-page-link.back {
        background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    }
}