/* ==============================
   NovelVersea PC Main Style
   Header v2026090507
============================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: Inter, Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #1f2937;
    background: #f6f8fc;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
}

input,
button {
    font-family: inherit;
}

/* ==============================
   Header
============================== */

.nl-header {
    width: 100% !important;
    height: 82px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e8edf5 !important;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nl-header-inner {
    width: 100% !important;
    max-width: 1320px !important;
    height: 82px !important;
    margin: 0 auto !important;
    padding: 0 52px !important;
    display: flex !important;
    align-items: center !important;
}

/* ==============================
   Logo: icon + text
============================== */

.nl-logo {
    flex: 0 0 auto !important;
    margin-right: 68px !important;
}

.nl-logo-link {
    height: 82px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 13px !important;
}

.nl-logo-icon-img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    flex: 0 0 44px !important;
}

.nl-logo-word {
    display: inline-block !important;
    font-size: 26px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.8px !important;
    color: #071532 !important;
    white-space: nowrap !important;
}

/* ==============================
   Navigation
============================== */

.nl-nav {
    height: 82px !important;
    display: flex !important;
    align-items: center !important;
    gap: 30px !important;
    flex: 0 0 auto !important;
}

.nl-nav-link {
    height: 50px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 50px !important;
    color: #253044 !important;
    background: transparent !important;
    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        transform 0.22s ease;
}

.nl-nav-link:hover {
    color: #2563eb !important;
    background: rgba(37, 99, 235, 0.075) !important;
}


.nl-dropdown-toggle {
    padding-right: 16px !important;
}

.nl-arrow-svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    flex: 0 0 20px !important;
    stroke: currentColor !important;
    stroke-width: 2.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    fill: none !important;
    color: #758197 !important;
    transform: translateY(1px);
    transition:
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.24s ease;
}

.nl-nav-dropdown:hover .nl-arrow-svg {
    transform: translateY(1px) rotate(180deg);
    color: #2563eb !important;
}

/* ==============================
   Dropdown Base - Smooth Version
============================== */

.nl-nav-dropdown {
    height: 82px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.nl-dropdown-menu {
    position: absolute !important;
    top: 68px !important;
    left: 0 !important;
    z-index: 1001 !important;

    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(221, 228, 239, 0.9) !important;
    border-radius: 16px !important;

    box-shadow:
        0 10px 24px rgba(15, 23, 42, 0),
        0 2px 8px rgba(15, 23, 42, 0) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate3d(0, 8px, 0) scale(0.992) !important;
    transform-origin: 32px 0 !important;
    pointer-events: none !important;

    will-change: opacity, transform, box-shadow !important;
    backface-visibility: hidden !important;

    transition:
        opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.22s,
        transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nl-nav-dropdown:hover .nl-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    pointer-events: auto !important;

    box-shadow:
        0 22px 48px rgba(15, 23, 42, 0.13),
        0 8px 18px rgba(15, 23, 42, 0.07) !important;

    transition:
        opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s,
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.34s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* hover 缓冲区：避免鼠标从导航移动到菜单时断掉 */
.nl-dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    top: -20px;
    width: 100%;
    height: 20px;
    background: transparent;
}


/* ==============================
   Browse Dropdown
============================== */

.nl-browse-menu {
    width: 218px !important;
    padding: 12px 0 !important;
}

.nl-dropdown-link {
    height: 48px !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    white-space: nowrap !important;
    letter-spacing: -0.1px !important;
    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}

.nl-dropdown-link:hover {
    color: #2563eb !important;
    background: #f6f8fc !important;
}

.nl-menu-icon {
    width: 22px !important;
    height: 22px !important;
    margin-right: 18px !important;
    flex: 0 0 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9aa4b5 !important;
}

.nl-menu-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: currentColor !important;
    stroke: none !important;
}


.nl-menu-icon .nl-icon-check {
    fill: none !important;
    stroke: #ffffff !important;
    stroke-width: 2.6 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}
/* Dropdown item smooth reveal */
.nl-dropdown-link,
.nl-genres-head,
.nl-genres-grid,
.nl-genres-foot {
    opacity: 0;
    transform: translate3d(0, 4px, 0);
    transition:
        opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.nl-nav-dropdown:hover .nl-dropdown-link,
.nl-nav-dropdown:hover .nl-genres-head,
.nl-nav-dropdown:hover .nl-genres-grid,
.nl-nav-dropdown:hover .nl-genres-foot {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Browse 四个菜单项做轻微错峰 */
.nl-browse-menu .nl-dropdown-link:nth-child(1) {
    transition-delay: 0.025s;
}

.nl-browse-menu .nl-dropdown-link:nth-child(2) {
    transition-delay: 0.045s;
}

.nl-browse-menu .nl-dropdown-link:nth-child(3) {
    transition-delay: 0.065s;
}

.nl-browse-menu .nl-dropdown-link:nth-child(4) {
    transition-delay: 0.085s;
}

/* Genres 内容轻微错峰 */
.nl-genres-menu .nl-genres-head {
    transition-delay: 0.025s;
}

.nl-genres-menu .nl-genres-grid {
    transition-delay: 0.055s;
}

.nl-genres-menu .nl-genres-foot {
    transition-delay: 0.085s;
}

/* ==============================
   Genres Dropdown
============================== */

.nl-genre-dropdown {
    position: relative !important;
}

.nl-genres-menu {
    width: 530px !important;
    padding: 22px 24px 18px !important;
}

.nl-genres-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 14px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid #edf0f5 !important;
}

.nl-genres-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #253044 !important;
}

.nl-genres-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 28px !important;
    row-gap: 4px !important;
}

.nl-genres-grid a {
    height: 38px !important;
    line-height: 38px !important;
    display: block !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #344256 !important;
    white-space: nowrap !important;
    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.nl-genres-grid a:hover {
    color: #2563eb !important;
    transform: translateX(4px);
}

.nl-genres-foot {
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid #edf0f5 !important;
}

.nl-genres-foot a {
    font-size: 15px !important;
    color: #2563eb !important;
    font-weight: 600 !important;
}

/* ==============================
   Search
============================== */

.nl-search {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-left: 70px !important;
}

.nl-search-form {
    width: 300px !important;
    height: 42px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    background: #f3f5fa !important;
    border: 1px solid #edf0f5 !important;
    border-radius: 10px !important;
    transition:
        background-color 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

.nl-search-form:focus-within {
    background: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12) !important;
}

.nl-search-icon {
    width: 18px !important;
    height: 18px !important;
    margin-right: 10px !important;
    color: #9aa5b5 !important;
    flex: 0 0 18px !important;
}

.nl-search-icon svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.4 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.nl-search-input {
    width: 100% !important;
    height: 40px !important;
    border: 0 !important;
    outline: none !important;
    background: transparent !important;
    font-size: 14px !important;
    color: #1f2937 !important;
}

.nl-search-input::placeholder {
    color: #9aa5b5 !important;
}

/* ==============================
   User
============================== */

.nl-user {
    flex: 0 0 auto !important;
    margin-left: 16px !important;
}

.nl-login-btn {
    min-width: 86px !important;
    height: 42px !important;
    padding: 0 20px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #2563eb !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24) !important;
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.nl-login-btn:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.3) !important;
}

/* ==============================
   Page Test Layout
============================== */

.nl-container {
    width: 100% !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 0 52px !important;
}

.nl-main {
    min-height: 500px !important;
    padding: 0px 0 !important;
}

.nl-test-section {
    padding: 48px 40px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #edf0f5 !important;
}

.nl-test-section h1 {
    margin: 0 0 12px !important;
    font-size: 32px !important;
    color: #111827 !important;
}

.nl-test-section p {
    margin: 0 !important;
    font-size: 16px !important;
    color: #6b7280 !important;
}
/* ==============================
   Home Hero Section
   v2026090509
============================== */

.nl-home-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 330px !important;
    gap: 24px !important;
    align-items: stretch !important;
}

/* Left featured card */
.nl-hero-featured {
    min-height: 360px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 78% 28%, rgba(66, 211, 255, 0.32), transparent 34%),
        radial-gradient(circle at 26% 16%, rgba(70, 111, 255, 0.28), transparent 30%),
        linear-gradient(135deg, #091733 0%, #122b68 48%, #1f6feb 100%) !important;
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.18),
        0 8px 20px rgba(37, 99, 235, 0.16) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 48px 54px !important;
}

/* soft light overlay */
.nl-hero-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 48%),
        radial-gradient(circle at 88% 78%, rgba(255, 255, 255, 0.22), transparent 26%);
    pointer-events: none;
}

.nl-hero-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 560px !important;
}

.nl-hero-label {
    display: inline-flex !important;
    align-items: center !important;
    height: 30px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: #dbeafe !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    backdrop-filter: blur(8px);
}

.nl-hero-title {
    margin: 18px 0 16px !important;
    max-width: 560px !important;
    font-size: 46px !important;
    line-height: 1.08 !important;
    font-weight: 850 !important;
    letter-spacing: -1.8px !important;
    color: #ffffff !important;
}

.nl-hero-desc {
    margin: 0 !important;
    max-width: 520px !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: rgba(226, 232, 240, 0.9) !important;
}

.nl-hero-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 22px !important;
}

.nl-hero-tags a {
    height: 32px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #eaf2ff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.nl-hero-tags a:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-1px);
}

.nl-hero-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 30px !important;
}

.nl-primary-btn,
.nl-secondary-btn {
    height: 44px !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    font-weight: 750 !important;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.nl-primary-btn {
    background: #ffffff !important;
    color: #1d4ed8 !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18) !important;
}

.nl-primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.22) !important;
}

.nl-secondary-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.nl-secondary-btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: translateY(-1px);
}

/* Fake featured book cover */
.nl-hero-book {
    position: relative !important;
    z-index: 2 !important;
    flex: 0 0 180px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.nl-book-cover-placeholder {
    width: 170px !important;
    height: 238px !important;
    border-radius: 16px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.26), rgba(255,255,255,0.06)),
        linear-gradient(135deg, #0f172a 0%, #1d4ed8 48%, #67e8f9 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    box-shadow:
        0 28px 46px rgba(2, 6, 23, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    transform: rotate(4deg);
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 18px !important;
}

.nl-book-cover-placeholder span {
    width: 100% !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    backdrop-filter: blur(8px);
}

/* Right ranking card */
.nl-hero-ranking {
    min-height: 360px !important;
    padding: 24px !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    border: 1px solid #edf0f5 !important;
    box-shadow:
        0 18px 44px rgba(15, 23, 42, 0.06) !important;
}

.nl-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 18px !important;
}

.nl-section-head h2 {
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #111827 !important;
    letter-spacing: -0.4px !important;
}

.nl-section-head a {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #2563eb !important;
}

.nl-rank-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.nl-rank-item {
    height: 48px !important;
    padding: 0 10px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}

.nl-rank-item:hover {
    background: #f6f8fc !important;
    transform: translateX(2px);
}

.nl-rank-num {
    width: 26px !important;
    height: 26px !important;
    margin-right: 12px !important;
    border-radius: 8px !important;
    background: #eef2f7 !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    flex: 0 0 26px !important;
}

.nl-rank-num.top1 {
    background: linear-gradient(135deg, #f59e0b, #facc15) !important;
    color: #ffffff !important;
}

.nl-rank-num.top2 {
    background: linear-gradient(135deg, #94a3b8, #cbd5e1) !important;
    color: #ffffff !important;
}

.nl-rank-num.top3 {
    background: linear-gradient(135deg, #b45309, #f97316) !important;
    color: #ffffff !important;
}

.nl-rank-title {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    color: #263244 !important;
}
/* ==============================
   WebNovel-like Weekly Book Card
   Vertical cover + blurred background
============================== */

.nl-home-top {
    max-width: 1040px !important;
    margin: 48px auto 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 420px !important;
    gap: 34px !important;
    align-items: start !important;
}

.nl-home-section-title {
    margin-bottom: 18px !important;
}

.nl-home-section-title h2 {
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #222631 !important;
    letter-spacing: -0.4px !important;
}

.nl-weekly-card.novel-bg-card {
    position: relative !important;
    height: 246px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    padding: 26px 30px !important;
    background: #222 !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12) !important;
}

/* same cover as big blurred background */
.novel-bg-blur {
    position: absolute !important;
    inset: -28px !important;
    background-size: cover !important;
    background-position: center !important;
    filter: blur(18px) !important;
    transform: scale(1.14) !important;
    opacity: 0.86 !important;
    z-index: 1 !important;
}

/* dark overlay, makes text readable */
.novel-bg-mask {
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.48) 46%, rgba(0, 0, 0, 0.36) 100%),
        radial-gradient(circle at 72% 50%, rgba(255, 255, 255, 0.12), transparent 42%) !important;
    z-index: 2 !important;
}

.novel-cover-wrap {
    position: relative !important;
    z-index: 3 !important;
    width: 146px !important;
    height: 198px !important;
    flex: 0 0 146px !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    background: #111827 !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.34) !important;
}

.novel-cover-wrap img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

.novel-info-panel {
    position: relative !important;
    z-index: 3 !important;
    min-width: 0 !important;
    padding-left: 30px !important;
    color: #ffffff !important;
}

.novel-info-panel h3 {
    margin: 0 0 18px !important;
    font-size: 25px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.3px !important;
}

.novel-info-panel p {
    margin: 0 !important;
    max-width: 270px !important;
    height: 92px !important;
    overflow: hidden !important;
    font-size: 15px !important;
    line-height: 1.42 !important;
    color: rgba(255, 255, 255, 0.88) !important;
}

.novel-meta {
    margin-top: 12px !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.75) !important;
}

.nl-weekly-dots {
    position: absolute !important;
    left: 30px !important;
    bottom: -22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.nl-weekly-dots span {
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.38) !important;
}

.nl-weekly-dots span.active {
    background: #ffffff !important;
}

/* right news column, close to WebNovel layout */
.nl-meet-box {
    min-width: 0 !important;
}

.nl-news-list {
    display: flex !important;
    flex-direction: column !important;
    border-top: 1px solid #e5e7eb !important;
}

.nl-news-item {
    min-height: 78px !important;
    padding: 14px 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 88px !important;
    gap: 16px !important;
    align-items: center !important;
}

.nl-news-text h3 {
    margin: 0 0 5px !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    color: #222631 !important;
    font-weight: 800 !important;
}

.nl-news-text p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: #7b8190 !important;
}

.nl-news-thumb {
    width: 88px !important;
    height: 40px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    overflow: hidden !important;
}

.nl-news-thumb.thumb-blue {
    background: linear-gradient(135deg, #2563eb, #67e8f9) !important;
}

.nl-news-thumb.thumb-purple {
    background: linear-gradient(135deg, #7c3aed, #c084fc) !important;
}

.nl-news-thumb.thumb-orange {
    background: linear-gradient(135deg, #f97316, #fb7185) !important;
}
/* ==============================
   Weekly Book real slider
============================== */

.nl-weekly-slider {
    position: relative !important;
}

.nl-weekly-slide {
    display: none !important;
}

.nl-weekly-slide.active {
    display: block !important;
}

.nl-weekly-dots {
    position: absolute !important;
    left: 170px !important;
    bottom: 14px !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.nl-weekly-dots button {
    width: 7px !important;
    height: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.45) !important;
    cursor: pointer !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.nl-weekly-dots button.active {
    width: 18px !important;
    background: #ffffff !important;
}
/* =========================================================
   NovelVersea Home - Weekly Featured
   Added: 2026-09-06
========================================================= */

.nl-featured-section {
    width: 100% !important;
    max-width: 850px !important;
    margin: 54px auto 0 auto !important;
    padding: 0 0 20px 0 !important;
    box-sizing: border-box !important;
}

.nl-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 18px !important;
}

.nl-section-head h2 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #252a35 !important;
}

.nl-section-action {
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    color: #3f63f1 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

.nl-section-action:hover {
    color: #2447d8 !important;
    text-decoration: none !important;
}

.nl-featured-list {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
}

.nl-featured-item {
    display: block !important;
    min-width: 0 !important;
    color: #252a35 !important;
    text-decoration: none !important;
}

.nl-featured-cover {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background: #111827 !important;
    box-shadow: 0 8px 18px rgba(18, 24, 40, 0.14) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.nl-featured-cover img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.nl-featured-title {
    margin-top: 9px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #252a35 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.nl-featured-item:hover .nl-featured-cover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 26px rgba(18, 24, 40, 0.2) !important;
}

.nl-featured-item:hover .nl-featured-title {
    color: #3158f0 !important;
}

/* Keep the featured section close to the WebNovel layout on medium screens */
@media (max-width: 980px) {
    .nl-featured-section {
        max-width: 760px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .nl-featured-list {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 14px !important;
    }
}

@media (max-width: 720px) {
    .nl-featured-section {
        margin-top: 36px !important;
    }

    .nl-featured-list {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
    }

    .nl-section-head h2 {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    .nl-featured-list {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 11px !important;
    }

    .nl-featured-title {
        font-size: 12px !important;
    }
}
/* =========================================================
   NovelVersea Fix - Broken Cover Fallback & Featured Layout
   Added: 2026-09-06
========================================================= */

/* Weekly slider: keep only active slide visible */
.nl-weekly-slide {
    display: none !important;
}

.nl-weekly-slide.active {
    display: block !important;
}

/* Weekly Book dots generated by JS */
.nl-weekly-dots {
    position: absolute !important;
    left: 170px !important;
    bottom: 14px !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.nl-weekly-dots button {
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    min-height: 7px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.48) !important;
    cursor: pointer !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.nl-weekly-dots button.active {
    width: 18px !important;
    background: #ffffff !important;
}

/* Featured section: more stable WebNovel-like row */
.nl-featured-section {
    width: 100% !important;
    max-width: 850px !important;
    margin: 54px auto 0 auto !important;
    padding: 0 0 26px 0 !important;
    box-sizing: border-box !important;
}

.nl-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 18px !important;
}

.nl-section-head h2 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #252a35 !important;
}

.nl-section-action {
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    color: #3f63f1 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

.nl-featured-list {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
}

.nl-featured-item {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    color: #252a35 !important;
    text-decoration: none !important;
}

.nl-featured-cover {
    position: relative !important;
    width: 100% !important;
    height: 118px !important;
    overflow: hidden !important;
    border-radius: 3px !important;
    background: #111827 url('/template/pc/novelversea/images/000.png') center center / cover no-repeat !important;
    box-shadow: 0 7px 16px rgba(18, 24, 40, 0.16) !important;
}

.nl-featured-cover img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.nl-featured-title {
    margin-top: 8px !important;
    height: 36px !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 600 !important;
    color: #202532 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.nl-featured-item:hover .nl-featured-title {
    color: #3158f0 !important;
}

@media (max-width: 980px) {
    .nl-featured-section {
        max-width: 760px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .nl-featured-list {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 14px !important;
    }

    .nl-featured-cover {
        height: 128px !important;
    }
}

@media (max-width: 720px) {
    .nl-featured-section {
        margin-top: 36px !important;
    }

    .nl-featured-list {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
    }

    .nl-featured-cover {
        height: 132px !important;
    }
}

@media (max-width: 480px) {
    .nl-featured-list {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 11px !important;
    }

    .nl-featured-cover {
        height: 126px !important;
    }

    .nl-featured-title {
        font-size: 12px !important;
    }
}
/* =========================================================
   NovelVersea Polish - Smooth Weekly Slider + Featured Resize
   Added: 2026-09-06
========================================================= */

/* Smooth Weekly Book slider */
.nl-weekly-slider {
    position: relative !important;
}

.nl-weekly-slide {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(10px) !important;
    transition:
        opacity 0.52s ease,
        transform 0.52s ease,
        visibility 0.52s ease !important;
}

.nl-weekly-slide.active {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
    z-index: 2 !important;
}

.nl-weekly-slide.leaving {
    position: absolute !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-10px) !important;
    z-index: 1 !important;
}

/* Keep dots above fading slides */
.nl-weekly-dots {
    z-index: 30 !important;
}

/* Featured section aligned with top area */
.nl-featured-section {
    width: 100% !important;
    max-width: 880px !important;
    margin: 54px auto 0 auto !important;
    padding: 0 0 34px 0 !important;
    box-sizing: border-box !important;
}

/* Featured title same visual level as top titles */
.nl-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 18px !important;
}

.nl-section-head h2 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #252a35 !important;
    letter-spacing: -0.2px !important;
}

/* Match home section title size if previous CSS differs */
.nl-home-section-title h2 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
}

/* MORE button */
.nl-section-action {
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #3f63f1 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

.nl-section-action:hover {
    color: #2549dc !important;
}

/* Bigger featured covers */
.nl-featured-list {
    display: grid !important;
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 16px !important;
    align-items: start !important;
}

.nl-featured-item {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    text-decoration: none !important;
    color: #202532 !important;
}

.nl-featured-cover {
    position: relative !important;
    width: 100% !important;
    height: 132px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background: #111827 url('/template/pc/novelversea/images/000.png') center center / cover no-repeat !important;
    box-shadow: 0 8px 18px rgba(18, 24, 40, 0.16) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

.nl-featured-cover img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.nl-featured-title {
    margin-top: 9px !important;
    height: 40px !important;
    font-size: 13px !important;
    line-height: 20px !important;
    font-weight: 700 !important;
    color: #202532 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.nl-featured-item:hover .nl-featured-cover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 26px rgba(18, 24, 40, 0.22) !important;
}

.nl-featured-item:hover .nl-featured-title {
    color: #3158f0 !important;
}

/* Medium screens */
@media (max-width: 980px) {
    .nl-featured-section {
        max-width: 760px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .nl-featured-list {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 15px !important;
    }

    .nl-featured-cover {
        height: 142px !important;
    }
}

/* Small screens */
@media (max-width: 720px) {
    .nl-featured-section {
        margin-top: 38px !important;
    }

    .nl-featured-list {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 13px !important;
    }

    .nl-featured-cover {
        height: 138px !important;
    }

    .nl-section-head h2,
    .nl-home-section-title h2 {
        font-size: 20px !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .nl-featured-list {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }

    .nl-featured-cover {
        height: 132px !important;
    }

    .nl-featured-title {
        font-size: 12px !important;
        line-height: 18px !important;
        height: 36px !important;
    }
}
/* =========================================================
   NovelVersea Final Override - Slider Smooth + Featured Align
   Added: 2026-09-06
========================================================= */

/* Force slider to fade smoothly instead of hard display switching */
body .nl-main .nl-weekly-slider {
    position: relative !important;
    overflow: hidden !important;
}

body .nl-main .nl-weekly-slide {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(14px) !important;
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;
    z-index: 1 !important;
}

body .nl-main .nl-weekly-slide.active {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
    z-index: 3 !important;
}

body .nl-main .nl-weekly-slide.leaving {
    display: block !important;
    position: absolute !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-14px) !important;
    z-index: 2 !important;
}

/* Keep dots clickable and visible */
body .nl-main .nl-weekly-dots {
    z-index: 50 !important;
}

/* Match top area visual width */
body .nl-main .nl-featured-section {
    width: 100% !important;
    max-width: 704px !important;
    margin: 54px auto 0 auto !important;
    padding: 0 0 36px 0 !important;
    box-sizing: border-box !important;
}

/* Header alignment and font unification */
body .nl-main .nl-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body .nl-main .nl-section-head h2,
body .nl-main .nl-home-section-title h2 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #252a35 !important;
    letter-spacing: -0.2px !important;
}

body .nl-main .nl-section-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #3f63f1 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

body .nl-main .nl-section-action:hover {
    color: #2549dc !important;
    text-decoration: none !important;
}

/* Bigger, cleaner Weekly Featured row */
body .nl-main .nl-featured-list {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    align-items: start !important;
    margin: 0 !important;
    padding: 0 !important;
}

body .nl-main .nl-featured-item {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    color: #202532 !important;
    text-decoration: none !important;
}

body .nl-main .nl-featured-cover {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 122px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background: #111827 url('/template/pc/novelversea/images/000.png') center center / cover no-repeat !important;
    box-shadow: 0 8px 18px rgba(18, 24, 40, 0.15) !important;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease !important;
}

body .nl-main .nl-featured-cover img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

body .nl-main .nl-featured-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    margin: 9px 0 0 0 !important;
    height: 38px !important;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 19px !important;
    font-weight: 700 !important;
    color: #202532 !important;
    text-decoration: none !important;
}

body .nl-main .nl-featured-item:hover .nl-featured-cover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 26px rgba(18, 24, 40, 0.22) !important;
}

body .nl-main .nl-featured-item:hover .nl-featured-title {
    color: #3158f0 !important;
}

/* Responsive */
@media (max-width: 900px) {
    body .nl-main .nl-featured-section {
        max-width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    body .nl-main .nl-featured-list {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    body .nl-main .nl-featured-cover {
        height: 132px !important;
    }
}

@media (max-width: 680px) {
    body .nl-main .nl-featured-list {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    body .nl-main .nl-featured-cover {
        height: 136px !important;
    }

    body .nl-main .nl-section-head h2,
    body .nl-main .nl-home-section-title h2 {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    body .nl-main .nl-featured-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 11px !important;
    }

    body .nl-main .nl-featured-cover {
        height: 130px !important;
    }

    body .nl-main .nl-featured-title {
        height: 36px !important;
        font-size: 12px !important;
        line-height: 18px !important;
    }
}
/* =========================================================
   NovelVersea Fix - WebNovel-like Weekly Featured Width
   Added: 2026-09-06
========================================================= */

/* Smoother and a little faster weekly slider */
body .nl-main .nl-weekly-slider {
    position: relative !important;
    overflow: hidden !important;
}

body .nl-main .nl-weekly-slide {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(12px) !important;
    transition:
        opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.52s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.52s cubic-bezier(0.22, 1, 0.36, 1) !important;
    z-index: 1 !important;
}

body .nl-main .nl-weekly-slide.active {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
    z-index: 3 !important;
}

body .nl-main .nl-weekly-slide.leaving {
    display: block !important;
    position: absolute !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-12px) !important;
    z-index: 2 !important;
}

/* Weekly Featured: use wider WebNovel-like content width */
body .nl-main .nl-featured-section {
    width: 100% !important;
    max-width: 850px !important;
    margin: 56px auto 0 auto !important;
    padding: 0 0 40px 0 !important;
    box-sizing: border-box !important;
}

/* Header style same as WebNovel sample */
body .nl-main .nl-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body .nl-main .nl-section-head h2 {
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #252a35 !important;
    letter-spacing: -0.3px !important;
}

/* Keep top titles visually close */
body .nl-main .nl-home-section-title h2 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #252a35 !important;
}

body .nl-main .nl-section-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #3158f0 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

body .nl-main .nl-section-action:hover {
    color: #1f43d4 !important;
    text-decoration: none !important;
}

/* Bigger covers, closer to WebNovel */
body .nl-main .nl-featured-list {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: start !important;
}

body .nl-main .nl-featured-item {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    color: #202532 !important;
    text-decoration: none !important;
}

body .nl-main .nl-featured-cover {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 134px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background: #111827 url('/template/pc/novelversea/images/000.png') center center / cover no-repeat !important;
    box-shadow: 0 8px 18px rgba(18, 24, 40, 0.14) !important;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease !important;
}

body .nl-main .nl-featured-cover img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Title like WebNovel: bold, two lines */
body .nl-main .nl-featured-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    margin: 10px 0 0 0 !important;
    height: 40px !important;
    overflow: hidden !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 700 !important;
    color: #202532 !important;
    text-decoration: none !important;
}

/* Category text below title */
body .nl-main .nl-featured-cate {
    margin-top: 5px !important;
    height: 18px !important;
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
    color: #8c94a3 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

body .nl-main .nl-featured-item:hover .nl-featured-cover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 26px rgba(18, 24, 40, 0.22) !important;
}

body .nl-main .nl-featured-item:hover .nl-featured-title {
    color: #3158f0 !important;
}

/* Responsive */
@media (max-width: 980px) {
    body .nl-main .nl-featured-section {
        max-width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    body .nl-main .nl-featured-list {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 15px !important;
    }

    body .nl-main .nl-featured-cover {
        height: 142px !important;
    }
}

@media (max-width: 720px) {
    body .nl-main .nl-featured-section {
        margin-top: 40px !important;
    }

    body .nl-main .nl-featured-list {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 13px !important;
    }

    body .nl-main .nl-featured-cover {
        height: 140px !important;
    }

    body .nl-main .nl-section-head h2 {
        font-size: 21px !important;
    }
}

@media (max-width: 480px) {
    body .nl-main .nl-featured-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    body .nl-main .nl-featured-cover {
        height: 132px !important;
    }

    body .nl-main .nl-featured-title {
        height: 38px !important;
        font-size: 13px !important;
        line-height: 19px !important;
    }

    body .nl-main .nl-featured-cate {
        font-size: 12px !important;
    }
}
/* =========================================================
   NovelVersea Final Fix - Weekly Featured Same Width As Top
   Added: 2026-09-06
========================================================= */

/* Weekly Featured container: exactly align with top block width */
html body .nl-main > .nl-featured-section {
    width: 704px !important;
    max-width: 704px !important;
    min-width: 704px !important;
    margin: 56px auto 0 auto !important;
    padding: 0 0 42px 0 !important;
    box-sizing: border-box !important;
}

/* Header inside Weekly Featured */
html body .nl-main > .nl-featured-section .nl-section-head {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 0 22px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Make section title visually consistent */
html body .nl-main > .nl-featured-section .nl-section-head h2 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #252a35 !important;
    letter-spacing: -0.2px !important;
}

/* SWITCH button position */
html body .nl-main > .nl-featured-section .nl-section-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    color: #3158f0 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

/* 8 books across the same width as top section */
html body .nl-main > .nl-featured-section .nl-featured-list {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    column-gap: 15px !important;
    row-gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: start !important;
    box-sizing: border-box !important;
}

/* Each item */
html body .nl-main > .nl-featured-section .nl-featured-item {
    width: 100% !important;
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #202532 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* Cover size: bigger inside the same aligned section */
html body .nl-main > .nl-featured-section .nl-featured-cover {
    width: 100% !important;
    height: 128px !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background: #111827 url('/template/pc/novelversea/images/000.png') center center / cover no-repeat !important;
    box-shadow: 0 8px 18px rgba(18, 24, 40, 0.14) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    box-sizing: border-box !important;
}

/* Cover image */
html body .nl-main > .nl-featured-section .nl-featured-cover img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

/* Book title */
html body .nl-main > .nl-featured-section .nl-featured-title {
    width: 100% !important;
    height: 38px !important;
    margin: 9px 0 0 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    font-size: 13px !important;
    line-height: 19px !important;
    font-weight: 700 !important;
    color: #202532 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* Hide category line if old HTML/CSS remains cached */
html body .nl-main > .nl-featured-section .nl-featured-cate {
    display: none !important;
}

/* Hover */
html body .nl-main > .nl-featured-section .nl-featured-item:hover .nl-featured-cover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 26px rgba(18, 24, 40, 0.22) !important;
}

html body .nl-main > .nl-featured-section .nl-featured-item:hover .nl-featured-title {
    color: #3158f0 !important;
}

/* Keep top slider smooth and faster */
html body .nl-main .nl-weekly-slider {
    position: relative !important;
    overflow: hidden !important;
}

html body .nl-main .nl-weekly-slide {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(12px) !important;
    transition:
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
    z-index: 1 !important;
}

html body .nl-main .nl-weekly-slide.active {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
    z-index: 3 !important;
}

html body .nl-main .nl-weekly-slide.leaving {
    display: block !important;
    position: absolute !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(-12px) !important;
    z-index: 2 !important;
}

/* Responsive */
@media (max-width: 760px) {
    html body .nl-main > .nl-featured-section {
        width: calc(100% - 36px) !important;
        max-width: calc(100% - 36px) !important;
        min-width: 0 !important;
    }

    html body .nl-main > .nl-featured-section .nl-featured-list {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 13px !important;
    }

    html body .nl-main > .nl-featured-section .nl-featured-cover {
        height: 138px !important;
    }
}

@media (max-width: 480px) {
    html body .nl-main > .nl-featured-section .nl-featured-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    html body .nl-main > .nl-featured-section .nl-featured-cover {
        height: 132px !important;
    }
}
/* =========================================================
   NovelVersea Emergency Fix
   1. Move top home block closer to header
   2. Add visible Weekly Featured soft background
   Added: 2026-09-06
========================================================= */

/* 1. 顶部主区域往上移动 */
html body main.nl-main {
    padding-top: 70px !important;
}

/* 如果旧 CSS 给 home-top 加了大 margin，这里强制压掉 */
html body main.nl-main section.nl-home-top,
html body .nl-main #homeTopArea {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 2. Weekly Featured 外层背景带：不用伪元素，直接给 section 背景 */
html body main.nl-main section#weeklyFeaturedSection,
html body main.nl-main section.nl-featured-section {
    background-color: #f4f6fb !important;
    border-radius: 0 !important;

    /*
      关键：
      这里用左右超大 box-shadow 把背景延展到整屏，
      比 ::before 更不容易被旧 CSS 或层级影响。
    */
    box-shadow: 9999px 0 0 #f4f6fb, -9999px 0 0 #f4f6fb !important;

    margin-top: 34px !important;
    padding-top: 30px !important;
    padding-bottom: 42px !important;
}

/* Weekly Featured 内部标题间距 */
html body main.nl-main section#weeklyFeaturedSection .nl-section-head,
html body main.nl-main section.nl-featured-section .nl-section-head {
    margin-bottom: 22px !important;
}

/* Weekly Featured 标题字号保持和上面一致 */
html body main.nl-main section#weeklyFeaturedSection .nl-section-head h2,
html body main.nl-main section.nl-featured-section .nl-section-head h2 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #252a35 !important;
}

/* 书封面继续保持偏大 */
html body main.nl-main section#weeklyFeaturedSection .nl-featured-cover,
html body main.nl-main section.nl-featured-section .nl-featured-cover {
    height: 142px !important;
}

/* 如果你觉得上方仍然太远，再强制压导航下面空白 */
html body .nl-header + .nl-main,
html body header + main.nl-main {
    padding-top: 34px !important;
}
/* =========================================================
   Final Visible Fix - Weekly Featured Background
========================================================= */

/* 让整个 Weekly Featured 背景明显可见 */
html body main.nl-main div#weeklyFeaturedBg.nl-featured-bg {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;

    /* 这里用更明显的 WebNovel 风格浅灰蓝 */
    background-color: #eef2fa !important;
    background-image: none !important;

    /* 上下间距 */
    margin-top: 36px !important;
    padding-top: 32px !important;
    padding-bottom: 46px !important;
}

/* 防止里面的 section 自己又盖白色背景 */
html body main.nl-main div#weeklyFeaturedBg.nl-featured-bg > section#weeklyFeaturedSection,
html body main.nl-main div#weeklyFeaturedBg.nl-featured-bg > section.nl-featured-section {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;

    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 如果旧 CSS 给 Weekly Featured 自己设置了白色，这里强制透明 */
html body main.nl-main section#weeklyFeaturedSection {
    background-color: transparent !important;
    background-image: none !important;
}

/* 标题和书籍内容保持在背景层上 */
html body main.nl-main div#weeklyFeaturedBg.nl-featured-bg .nl-section-head,
html body main.nl-main div#weeklyFeaturedBg.nl-featured-bg .nl-featured-list {
    position: relative !important;
    z-index: 2 !important;
}

/* 背景区域顶部不要离上面太远 */
html body main.nl-main section#homeTopArea,
html body main.nl-main section.nl-home-top {
    margin-bottom: 0 !important;
}
/* =========================================================
   NovelVersea Home Continued Sections
   Ranking / Latest Update / Completed Novel / Popular Tags / Bottom
   Added: 2026-09-07
========================================================= */

/* Global home section width follows the same visual container */
html body main.nl-main .nl-home-section {
    width: 100%;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Common section header */
html body main.nl-main .nl-home-section > .nl-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
    margin: 0 0 24px 0;
    padding: 0 0 14px 0;
    border-bottom: 1px solid rgba(31, 41, 55, 0.08);
    box-sizing: border-box;
}

html body main.nl-main .nl-home-section > .nl-section-head h2 {
    margin: 0;
    padding: 0;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 800;
    color: #252a35;
    letter-spacing: -0.3px;
}

html body main.nl-main .nl-home-section > .nl-section-head .nl-section-action {
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    color: #3158f0;
    text-decoration: none;
    text-transform: uppercase;
}

/* =========================================================
   Ranking Section
========================================================= */

html body main.nl-main .nl-ranking-section {
    padding-top: 46px;
    padding-bottom: 44px;
}

html body main.nl-main .nl-ranking-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 42px;
    width: 100%;
    box-sizing: border-box;
}

html body main.nl-main .nl-ranking-column {
    min-width: 0;
}

html body main.nl-main .nl-ranking-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 30px;
    margin-bottom: 18px;
    padding: 0 18px 0 12px;
    background: #3158f0;
    color: #ffffff;
    font-size: 18px;
    line-height: 30px;
    font-weight: 800;
    box-sizing: border-box;
}

html body main.nl-main .nl-ranking-title::after {
    content: "";
    position: absolute;
    right: -12px;
    top: 0;
    width: 18px;
    height: 30px;
    background: #ffc66d;
    transform: skewX(-14deg);
    z-index: -1;
}

html body main.nl-main .nl-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

html body main.nl-main .nl-ranking-item {
    display: grid;
    grid-template-columns: 28px 50px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    min-height: 66px;
    color: #252a35;
    text-decoration: none;
}

html body main.nl-main .nl-ranking-num {
    font-size: 16px;
    font-weight: 800;
    color: #a0a7b5;
    text-align: left;
}

html body main.nl-main .nl-ranking-item:nth-child(1) .nl-ranking-num {
    color: #ef4444;
}

html body main.nl-main .nl-ranking-item:nth-child(2) .nl-ranking-num {
    color: #f97316;
}

html body main.nl-main .nl-ranking-item:nth-child(3) .nl-ranking-num {
    color: #10b981;
}

html body main.nl-main .nl-ranking-cover {
    width: 50px;
    height: 66px;
    overflow: hidden;
    border-radius: 4px;
    background: #111827 url('/template/pc/novelversea/images/000.png') center center / cover no-repeat;
    box-shadow: 0 6px 14px rgba(18, 24, 40, 0.12);
}

html body main.nl-main .nl-ranking-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html body main.nl-main .nl-ranking-info {
    min-width: 0;
}

html body main.nl-main .nl-ranking-info h3 {
    height: 20px;
    margin: 0 0 4px 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 15px;
    line-height: 20px;
    font-weight: 800;
    color: #252a35;
}

html body main.nl-main .nl-ranking-info p {
    height: 18px;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 18px;
    color: #8a93a3;
}

html body main.nl-main .nl-ranking-info span {
    display: block;
    height: 18px;
    margin-top: 1px;
    font-size: 12px;
    line-height: 18px;
    color: #8a93a3;
}

html body main.nl-main .nl-ranking-item:hover .nl-ranking-info h3 {
    color: #3158f0;
}

html body main.nl-main .nl-ranking-more {
    margin-top: 26px;
    text-align: center;
}

html body main.nl-main .nl-ranking-more a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #3158f0;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

/* =========================================================
   Latest Update Section
========================================================= */

html body main.nl-main .nl-latest-bg {
    width: 100%;
    margin: 0;
    padding: 48px 0 44px 0;
    background-color: #eef2fa;
    box-sizing: border-box;
}

html body main.nl-main .nl-latest-section {
    margin-top: 0;
    margin-bottom: 0;
}

html body main.nl-main .nl-book-grid {
    display: grid;
    width: 100%;
    box-sizing: border-box;
}

html body main.nl-main .nl-book-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px 18px;
}

html body main.nl-main .nl-book-card {
    display: block;
    min-width: 0;
    color: #252a35;
    text-decoration: none;
}

html body main.nl-main .nl-book-cover {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    background: #111827 url('/template/pc/novelversea/images/000.png') center center / cover no-repeat;
    box-shadow: 0 8px 20px rgba(18, 24, 40, 0.14);
}

html body main.nl-main .nl-book-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

html body main.nl-main .nl-book-status {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 0 0 4px 0;
    background: #2699e6;
    color: #ffffff;
    font-size: 11px;
    line-height: 22px;
    font-weight: 800;
    text-transform: lowercase;
}

html body main.nl-main .nl-book-name {
    height: 40px;
    margin-top: 11px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 15px;
    line-height: 20px;
    font-weight: 800;
    color: #252a35;
}

html body main.nl-main .nl-book-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 18px;
    margin-top: 6px;
    font-size: 12px;
    line-height: 18px;
    color: #8a93a3;
}

html body main.nl-main .nl-book-meta span:last-child {
    color: #f5b301;
}

html body main.nl-main .nl-book-card:hover .nl-book-name {
    color: #3158f0;
}

/* =========================================================
   Completed Novel
========================================================= */

html body main.nl-main .nl-completed-section {
    padding-top: 48px;
    padding-bottom: 44px;
}

html body main.nl-main .nl-completed-list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

html body main.nl-main .nl-completed-section .nl-featured-cover {
    height: 142px;
}

/* =========================================================
   Popular Tags
========================================================= */

html body main.nl-main .nl-tags-section {
    padding-top: 0;
    padding-bottom: 54px;
}

html body main.nl-main .nl-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 24px;
    width: 100%;
    box-sizing: border-box;
}

html body main.nl-main .nl-tags-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    height: 40px;
    padding: 0 18px;
    background: #ffffff;
    color: #3158f0;
    font-size: 13px;
    line-height: 40px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(18, 24, 40, 0.07);
    transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

html body main.nl-main .nl-tags-list a:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(18, 24, 40, 0.12);
    color: #1d4ed8;
}

/* =========================================================
   Bottom Common Template Style
   Used by html/bottom.html
========================================================= */

html body .nl-bottom {
    width: 100%;
    margin: 0;
    padding: 56px 0 48px 0;
    background: #25263a;
    color: rgba(255, 255, 255, 0.74);
    box-sizing: border-box;
}

html body .nl-bottom-inner {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 56px;
    box-sizing: border-box;
}

html body .nl-bottom-brand {
    min-width: 0;
}

html body .nl-bottom-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
}

html body .nl-bottom-logo img {
    width: 42px;
    height: 42px;
    display: block;
    border-radius: 10px;
}

html body .nl-bottom-social {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

html body .nl-bottom-social a {
    color: rgba(255, 255, 255, 0.62);
    font-size: 16px;
    text-decoration: none;
}

html body .nl-bottom-social a:hover {
    color: #ffffff;
}

html body .nl-bottom-copy {
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.46);
}

html body .nl-bottom-col h3 {
    margin: 0 0 22px 0;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
}

html body .nl-bottom-col a {
    display: block;
    margin-bottom: 13px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
}

html body .nl-bottom-col a:hover {
    color: #ffffff;
}

/* =========================================================
   Responsive
========================================================= */

@media (max-width: 980px) {
    html body main.nl-main .nl-home-section {
        max-width: calc(100% - 36px);
    }

    html body main.nl-main .nl-ranking-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    html body main.nl-main .nl-book-grid-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html body main.nl-main .nl-book-cover {
        height: 240px;
    }

    html body main.nl-main .nl-completed-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    html body .nl-bottom-inner {
        max-width: calc(100% - 36px);
        grid-template-columns: 1fr 1fr;
        gap: 34px;
    }
}

@media (max-width: 640px) {
    html body main.nl-main .nl-book-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body main.nl-main .nl-book-cover {
        height: 220px;
    }

    html body main.nl-main .nl-completed-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html body main.nl-main .nl-tags-list {
        gap: 14px;
    }

    html body main.nl-main .nl-tags-list a {
        min-width: auto;
        height: 38px;
        padding: 0 14px;
        font-size: 12px;
    }

    html body .nl-bottom-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    html body main.nl-main .nl-book-grid-5 {
        grid-template-columns: 1fr;
    }

    html body main.nl-main .nl-book-cover {
        height: 300px;
    }

    html body main.nl-main .nl-completed-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* =========================================================
   NovelVersea Final Width + Ranking Layout Fix
   Added: 2026-09-07
========================================================= */

/* 1. 所有首页内容板块默认不要再用 880px 瘦宽度 */
html body main.nl-main .nl-home-section,
html body main.nl-main .nl-ranking-section,
html body main.nl-main .nl-latest-section,
html body main.nl-main .nl-completed-section,
html body main.nl-main .nl-tags-section {
    box-sizing: border-box !important;
}

/* 2. Latest Update 背景保持整屏，但里面内容宽度由 JS 同步 */
html body main.nl-main .nl-latest-bg {
    width: 100% !important;
    background-color: #eef2fa !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
    box-sizing: border-box !important;
}

/* 3. Ranking 改成：封面 + 序号 + 信息，贴近 WebNovel */
html body main.nl-main .nl-ranking-item {
    display: grid !important;
    grid-template-columns: 50px 28px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    align-items: center !important;
    min-height: 66px !important;
    color: #252a35 !important;
    text-decoration: none !important;
}

/* 封面放第一列 */
html body main.nl-main .nl-ranking-cover {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 50px !important;
    height: 66px !important;
}

/* 序号放封面后面 */
html body main.nl-main .nl-ranking-num {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    padding-top: 3px !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 20px !important;
    font-weight: 800 !important;
}

/* 信息放第三列 */
html body main.nl-main .nl-ranking-info {
    grid-column: 3 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
}

/* 序号补 0 的视觉，模板变量本身仍是数字 */
html body main.nl-main .nl-ranking-num {
    color: #a0a7b5 !important;
}

html body main.nl-main .nl-ranking-item:nth-child(1) .nl-ranking-num {
    color: #ef4444 !important;
}

html body main.nl-main .nl-ranking-item:nth-child(2) .nl-ranking-num {
    color: #f97316 !important;
}

html body main.nl-main .nl-ranking-item:nth-child(3) .nl-ranking-num {
    color: #10b981 !important;
}

/* Ranking 三列之间距离稍微收一点，避免太散 */
html body main.nl-main .nl-ranking-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 52px !important;
}

/* Ranking 标题条更接近 WebNovel */
html body main.nl-main .nl-ranking-title {
    margin-bottom: 18px !important;
    height: 31px !important;
    padding: 0 20px 0 12px !important;
    background: #3158f0 !important;
    color: #fff !important;
    font-size: 18px !important;
    line-height: 31px !important;
    font-weight: 800 !important;
}

html body main.nl-main .nl-ranking-title::after {
    right: -12px !important;
    height: 31px !important;
    background: #ffc66d !important;
}

/* 4. Latest Update 改成更像模板：两排 5 列，大卡片 */
html body main.nl-main .nl-latest-section .nl-book-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 26px 22px !important;
}

html body main.nl-main .nl-latest-section .nl-book-cover {
    height: 260px !important;
    border-radius: 4px 4px 0 0 !important;
}

/* 5. Completed Novel 宽度和上面统一后，8列保持 */
html body main.nl-main .nl-completed-list {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

html body main.nl-main .nl-completed-section .nl-featured-cover {
    height: 142px !important;
}

/* 6. Popular Tags 不要缩窄 */
html body main.nl-main .nl-tags-list {
    width: 100% !important;
}

/* 7. section 之间距离接近 WebNovel */
html body main.nl-main .nl-ranking-section {
    padding-top: 48px !important;
    padding-bottom: 46px !important;
}

html body main.nl-main .nl-completed-section {
    padding-top: 48px !important;
    padding-bottom: 46px !important;
}

html body main.nl-main .nl-tags-section {
    padding-top: 0 !important;
    padding-bottom: 60px !important;
}

/* 8. 移动端保护 */
@media (max-width: 980px) {
    html body main.nl-main .nl-ranking-grid {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    html body main.nl-main .nl-latest-section .nl-book-grid-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html body main.nl-main .nl-latest-section .nl-book-cover {
        height: 240px !important;
    }

    html body main.nl-main .nl-completed-list {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    html body main.nl-main .nl-latest-section .nl-book-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body main.nl-main .nl-latest-section .nl-book-cover {
        height: 220px !important;
    }

    html body main.nl-main .nl-completed-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
/* =========================================================
   NovelVersea Detail Fix
   Ranking spacing / Latest 6 columns / Cover ratio polish
   Added: 2026-09-07
========================================================= */

/* =========================================================
   1. Ranking: 封面加大，间距收紧
========================================================= */

/* Ranking 三列整体保持 */
html body main.nl-main .nl-ranking-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 48px !important;
}

/* 每一项改成：封面 + 序号 + 信息，间距更紧 */
html body main.nl-main .nl-ranking-item {
    display: grid !important;
    grid-template-columns: 58px 20px minmax(0, 1fr) !important;
    column-gap: 8px !important;
    align-items: center !important;
    min-height: 78px !important;
    text-decoration: none !important;
}

/* Ranking 封面加大 */
html body main.nl-main .nl-ranking-cover {
    width: 58px !important;
    height: 76px !important;
    border-radius: 4px !important;
    box-shadow: 0 7px 16px rgba(18, 24, 40, 0.14) !important;
}

/* 序号靠近书名，不要撑太开 */
html body main.nl-main .nl-ranking-num {
    width: 20px !important;
    padding-top: 0 !important;
    align-self: start !important;
    margin-top: 4px !important;
    font-size: 15px !important;
    line-height: 18px !important;
    font-weight: 800 !important;
    text-align: left !important;
}

/* 书名区域稍微靠近 */
html body main.nl-main .nl-ranking-info {
    min-width: 0 !important;
    padding-left: 0 !important;
}

html body main.nl-main .nl-ranking-info h3 {
    height: 20px !important;
    margin: 0 0 3px 0 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 800 !important;
}

html body main.nl-main .nl-ranking-info p {
    height: 17px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 17px !important;
}

html body main.nl-main .nl-ranking-info span {
    height: 17px !important;
    margin-top: 0 !important;
    font-size: 12px !important;
    line-height: 17px !important;
}

/* Ranking 列表项间距 */
html body main.nl-main .nl-ranking-list {
    gap: 12px !important;
}

/* 排行榜标题条保持 WebNovel 风格 */
html body main.nl-main .nl-ranking-title {
    margin-bottom: 18px !important;
}

/* =========================================================
   2. Latest Update: 一排 6 个，封面稍微小一点
========================================================= */

html body main.nl-main .nl-latest-section .nl-book-grid-5 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 26px 18px !important;
}

/* 一排 6 个后，封面高度降低 */
html body main.nl-main .nl-latest-section .nl-book-cover {
    height: 220px !important;
    border-radius: 4px 4px 0 0 !important;
}

/* Latest 标题稍微收紧 */
html body main.nl-main .nl-latest-section .nl-book-name {
    height: 40px !important;
    margin-top: 10px !important;
    font-size: 14px !important;
    line-height: 20px !important;
}

/* meta 行 */
html body main.nl-main .nl-latest-section .nl-book-meta {
    margin-top: 5px !important;
}

/* Latest 背景上下空间 */
html body main.nl-main .nl-latest-bg {
    padding-top: 46px !important;
    padding-bottom: 48px !important;
}

/* =========================================================
   3. Weekly Featured / Completed Novel: 封面再高一点
========================================================= */

/* Weekly Featured 封面比例拉高 */
html body main.nl-main #weeklyFeaturedSection .nl-featured-cover {
    height: 156px !important;
}

/* Completed Novel 封面比例拉高 */
html body main.nl-main .nl-completed-section .nl-featured-cover {
    height: 156px !important;
}

/* 这两个列表仍然保持 8 列 */
html body main.nl-main #weeklyFeaturedSection .nl-featured-list,
html body main.nl-main .nl-completed-section .nl-completed-list {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

/* 标题区域适配更高封面 */
html body main.nl-main #weeklyFeaturedSection .nl-featured-title,
html body main.nl-main .nl-completed-section .nl-featured-title {
    height: 40px !important;
    margin-top: 10px !important;
    font-size: 13px !important;
    line-height: 20px !important;
}

/* =========================================================
   4. 响应式保护
========================================================= */

@media (max-width: 1100px) {
    html body main.nl-main .nl-latest-section .nl-book-grid-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    html body main.nl-main .nl-latest-section .nl-book-cover {
        height: 230px !important;
    }
}

@media (max-width: 980px) {
    html body main.nl-main .nl-ranking-grid {
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    html body main.nl-main .nl-latest-section .nl-book-grid-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html body main.nl-main .nl-latest-section .nl-book-cover {
        height: 240px !important;
    }

    html body main.nl-main #weeklyFeaturedSection .nl-featured-list,
    html body main.nl-main .nl-completed-section .nl-completed-list {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    html body main.nl-main #weeklyFeaturedSection .nl-featured-cover,
    html body main.nl-main .nl-completed-section .nl-featured-cover {
        height: 150px !important;
    }
}

@media (max-width: 640px) {
    html body main.nl-main .nl-latest-section .nl-book-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body main.nl-main .nl-latest-section .nl-book-cover {
        height: 220px !important;
    }

    html body main.nl-main #weeklyFeaturedSection .nl-featured-list,
    html body main.nl-main .nl-completed-section .nl-completed-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
/* =========================================================
   NovelVersea Bottom Template
   English footer version
   Updated: 2026-09-07
========================================================= */

html body .nl-bottom {
    width: 100% !important;
    margin: 0 !important;
    padding: 52px 0 22px 0 !important;
    background: #232337 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

html body .nl-bottom-inner {
    width: 100% !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1.45fr 0.8fr 0.95fr 0.9fr !important;
    gap: 72px !important;
    box-sizing: border-box !important;
}

html body .nl-bottom-brand {
    min-width: 0 !important;
}

html body .nl-bottom-logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 24px 0 !important;
    color: #ffffff !important;
    font-size: 23px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

html body .nl-bottom-logo img {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 9px !important;
    object-fit: cover !important;
}

html body .nl-bottom-logo span {
    color: #ffffff !important;
    font-size: 23px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.3px !important;
}

html body .nl-bottom-desc {
    max-width: 340px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.66) !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
    font-weight: 500 !important;
}

html body .nl-bottom-social {
    display: none !important;
}

html body .nl-bottom-col {
    min-width: 0 !important;
}

html body .nl-bottom-col h3 {
    margin: 0 0 22px 0 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
}

html body .nl-bottom-col a {
    display: block !important;
    margin: 0 0 14px 0 !important;
    color: rgba(255, 255, 255, 0.56) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.18s ease, transform 0.18s ease !important;
}

html body .nl-bottom-col a:hover {
    color: #ffffff !important;
    transform: translateX(2px) !important;
}

html body .nl-bottom-copyright {
    width: 100% !important;
    max-width: 1120px !important;
    margin: 46px auto 0 auto !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.48) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Remove possible legacy statistic text spacing */
html body .nl-bottom + *,
html body footer.nl-bottom + * {
    margin-top: 0 !important;
}

/* Bottom responsive */
@media (max-width: 1180px) {
    html body .nl-bottom-inner,
    html body .nl-bottom-copyright {
        max-width: calc(100% - 48px) !important;
    }

    html body .nl-bottom-inner {
        gap: 48px !important;
    }
}

@media (max-width: 900px) {
    html body .nl-bottom-inner {
        grid-template-columns: 1fr 1fr !important;
        gap: 38px 48px !important;
    }

    html body .nl-bottom-desc {
        max-width: 420px !important;
    }
}

@media (max-width: 560px) {
    html body .nl-bottom {
        padding-top: 42px !important;
    }

    html body .nl-bottom-inner {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    html body .nl-bottom-copyright {
        margin-top: 34px !important;
        text-align: left !important;
    }
}
/* =========================================================
   NovelVersea Bottom - Clean Large Version
   Updated: 2026-09-07
========================================================= */

html body .nl-bottom {
    width: 100% !important;
    margin: 0 !important;
    padding: 62px 0 68px 0 !important;
    background: #24243a !important;
    color: rgba(255, 255, 255, 0.72) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

html body .nl-bottom-inner {
    width: 100% !important;
    max-width: 1120px !important;
    min-height: 132px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1.45fr 0.9fr 1.05fr 1fr !important;
    gap: 78px !important;
    align-items: start !important;
    box-sizing: border-box !important;
}

/* Brand column */
html body .nl-bottom-brand {
    min-width: 0 !important;
    min-height: 132px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

html body .nl-bottom-logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

html body .nl-bottom-logo img {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
}

html body .nl-bottom-logo span {
    color: #ffffff !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.4px !important;
}

/* Remove old description / social if cached or left in template */
html body .nl-bottom-desc,
html body .nl-bottom-social,
html body .nl-bottom-copyright {
    display: none !important;
}

/* Columns */
html body .nl-bottom-col {
    min-width: 0 !important;
}

html body .nl-bottom-col h3 {
    margin: 0 0 24px 0 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: 0.2px !important;
    text-transform: uppercase !important;
}

html body .nl-bottom-col a {
    display: block !important;
    margin: 0 0 17px 0 !important;
    color: rgba(255, 255, 255, 0.58) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.18s ease, transform 0.18s ease !important;
}

html body .nl-bottom-col a:hover {
    color: #ffffff !important;
    transform: translateX(2px) !important;
}

/* Prevent any old footer text from sticking outside */
html body .nl-bottom * {
    box-sizing: border-box !important;
}

/* Responsive */
@media (max-width: 1180px) {
    html body .nl-bottom-inner {
        max-width: calc(100% - 48px) !important;
        gap: 54px !important;
    }
}

@media (max-width: 900px) {
    html body .nl-bottom {
        padding: 50px 0 56px 0 !important;
    }

    html body .nl-bottom-inner {
        grid-template-columns: 1fr 1fr !important;
        gap: 42px 56px !important;
    }

    html body .nl-bottom-brand {
        min-height: auto !important;
        align-items: flex-start !important;
    }
}

@media (max-width: 560px) {
    html body .nl-bottom {
        padding: 42px 0 48px 0 !important;
    }

    html body .nl-bottom-inner {
        max-width: calc(100% - 36px) !important;
        grid-template-columns: 1fr !important;
        gap: 34px !important;
    }

    html body .nl-bottom-logo {
        font-size: 24px !important;
    }

    html body .nl-bottom-logo span {
        font-size: 24px !important;
    }

    html body .nl-bottom-logo img {
        width: 40px !important;
        height: 40px !important;
    }
}
/* =========================================================
   NovelVersea Tag Genre Page
   File: html/custom/action.html etc.
   Updated: 2026-09-07
========================================================= */

html body .nl-tag-main {
    width: 100%;
    min-height: 620px;
    padding: 34px 0 54px 0;
    background: #f6f7fb;
    box-sizing: border-box;
}

html body .nl-tag-wrap {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 204px minmax(0, 1fr);
    gap: 24px;
    box-sizing: border-box;
}

/* Sidebar */
html body .nl-tag-sidebar {
    min-width: 0;
}

html body .nl-tag-side-card {
    width: 100%;
    padding: 18px 12px 14px 12px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 28, 50, 0.04);
    box-sizing: border-box;
}

html body .nl-tag-side-card h3 {
    margin: 0 0 12px 0;
    color: #1f2937;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 900;
}

html body .nl-tag-menu {
    max-height: 398px;
    overflow-y: auto;
    padding-right: 4px;
}

html body .nl-tag-menu::-webkit-scrollbar {
    width: 4px;
}

html body .nl-tag-menu::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 999px;
}

html body .nl-tag-menu a {
    display: block;
    height: 32px;
    padding: 0 10px;
    margin-bottom: 4px;
    border-radius: 6px;
    color: #374151;
    font-size: 13px;
    line-height: 32px;
    font-weight: 700;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: background 0.16s ease, color 0.16s ease;
}

html body .nl-tag-menu a:hover {
    background: #f1f4ff;
    color: #3158f0;
}

html body .nl-tag-menu a.active {
    background: #3158f0;
    color: #ffffff;
}

/* Content */
html body .nl-tag-content {
    min-width: 0;
}

html body .nl-tag-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

html body .nl-tag-head h1 {
    margin: 0 0 7px 0;
    color: #1f2937;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.3px;
}

html body .nl-tag-head p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
}

html body .nl-tag-tabs {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    box-shadow: 0 8px 18px rgba(20, 28, 50, 0.04);
    overflow: hidden;
    flex-shrink: 0;
}

html body .nl-tag-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    border-radius: 5px;
    color: #4b5563;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease;
}

html body .nl-tag-tabs a:hover {
    color: #3158f0;
}

html body .nl-tag-tabs a.active {
    background: #3158f0;
    color: #ffffff;
}

/* Book Grid */
html body .nl-tag-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px 18px;
}

html body .nl-tag-book {
    display: block;
    min-width: 0;
    background: #ffffff;
    border-radius: 7px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(20, 28, 50, 0.05);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

html body .nl-tag-book:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(20, 28, 50, 0.10);
}

html body .nl-tag-cover {
    position: relative;
    width: 100%;
    height: 248px;
    overflow: hidden;
    background: #e5e7eb;
}

html body .nl-tag-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.22s ease;
}

html body .nl-tag-book:hover .nl-tag-cover img {
    transform: scale(1.035);
}

html body .nl-tag-status {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 2;
    height: 22px;
    padding: 0 8px;
    border-radius: 5px;
    background: #1798e8;
    color: #ffffff;
    font-size: 11px;
    line-height: 22px;
    font-weight: 800;
    text-transform: lowercase;
    box-shadow: 0 4px 12px rgba(23, 152, 232, 0.26);
}

html body .nl-tag-status.completed {
    background: #16a34a;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}

html body .nl-tag-book-info {
    padding: 11px 10px 12px 10px;
    box-sizing: border-box;
}

html body .nl-tag-book-info h3 {
    height: 34px;
    margin: 0 0 8px 0;
    color: #1f2937;
    font-size: 13px;
    line-height: 17px;
    font-weight: 800;
    overflow: hidden;
}

html body .nl-tag-book:hover .nl-tag-book-info h3 {
    color: #3158f0;
}

html body .nl-tag-book-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

html body .nl-tag-book-meta span {
    color: #6b7280;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}

html body .nl-tag-book-meta em {
    color: #f59e0b;
    font-size: 12px;
    line-height: 1;
    font-style: normal;
    font-weight: 800;
}

/* Pagination */
html body .nl-tag-page {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 28px;
    min-height: 34px;
}

html body .nl-tag-page a,
html body .nl-tag-page span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    margin: 0 4px;
    padding: 0 10px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
}

html body .nl-tag-page a:hover,
html body .nl-tag-page .on {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

/* Responsive */
@media (max-width: 1180px) {
    html body .nl-tag-wrap {
        max-width: calc(100% - 48px);
    }
}

@media (max-width: 980px) {
    html body .nl-tag-wrap {
        grid-template-columns: 1fr;
    }

    html body .nl-tag-menu {
        max-height: none;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        overflow: visible;
    }

    html body .nl-tag-menu a {
        width: auto;
        margin: 0;
        padding: 0 12px;
    }

    html body .nl-tag-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    html body .nl-tag-head {
        display: block;
    }

    html body .nl-tag-tabs {
        margin-top: 16px;
    }

    html body .nl-tag-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html body .nl-tag-cover {
        height: 230px;
    }
}

@media (max-width: 420px) {
    html body .nl-tag-grid {
        gap: 18px 12px;
    }

    html body .nl-tag-cover {
        height: 210px;
    }
}
/* =========================================================
   NovelVersea Tag Sidebar Font Tuning
   Updated: 2026-09-07
========================================================= */

html body .nl-tag-side-card h3 {
    font-size: 15px !important;
    margin-bottom: 14px !important;
}

html body .nl-tag-menu a {
    height: 36px !important;
    padding: 0 12px !important;
    margin-bottom: 5px !important;
    font-size: 15px !important;
    line-height: 36px !important;
    font-weight: 800 !important;
    border-radius: 7px !important;
}

html body .nl-tag-side-card {
    padding: 18px 12px 16px 12px !important;
}

html body .nl-tag-menu {
    max-height: 430px !important;
}
/* =========================================================
   NovelVersea Tag Page Detail Fix
   Updated: 2026-09-08
========================================================= */

/* Left sidebar sticky */
html body .nl-tag-sidebar {
    position: relative !important;
}

html body .nl-tag-side-card {
    position: sticky !important;
    top: 96px !important;
    z-index: 5 !important;
}

/* Bigger sidebar text */
html body .nl-tag-side-card h3 {
    font-size: 16px !important;
    margin-bottom: 14px !important;
    font-weight: 900 !important;
}

html body .nl-tag-menu a {
    height: 36px !important;
    padding: 0 12px !important;
    margin-bottom: 5px !important;
    font-size: 15px !important;
    line-height: 36px !important;
    font-weight: 800 !important;
    border-radius: 7px !important;
}

html body .nl-tag-menu a.active {
    background: #3158f0 !important;
    color: #ffffff !important;
}

/* Manual pagination */
html body .nl-tag-page {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 34px !important;
    min-height: 36px !important;
}

html body .nl-tag-page a,
html body .nl-tag-page span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    color: #4b5563 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 6px 14px rgba(20, 28, 50, 0.04) !important;
}

html body .nl-tag-page a:hover {
    background: #3158f0 !important;
    border-color: #3158f0 !important;
    color: #ffffff !important;
}

html body .nl-tag-page span.on {
    background: #111827 !important;
    border-color: #111827 !important;
    color: #ffffff !important;
}
/* ================================
   NovelVersea Category Page
   ================================ */

.nl-tag-main {
    background: #f5f6fa;
    min-height: 720px;
    padding: 32px 0 48px;
}

.nl-tag-wrap {
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 24px;
}

.nl-tag-sidebar {
    width: 170px;
}

.nl-tag-side-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 16px 10px 16px 12px;
    position: sticky;
    top: 88px;
    max-height: 420px;
    overflow-y: auto;
}

.nl-tag-side-card h3 {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px;
    padding: 0 2px;
}

.nl-tag-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nl-tag-menu a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.2;
    color: #374151;
    text-decoration: none;
    font-weight: 500;
    transition: all .16s ease;
}

.nl-tag-menu a:hover {
    color: #2457ff;
    background: #eef3ff;
}

.nl-tag-menu a.active {
    color: #ffffff;
    background: #315bff;
    font-weight: 700;
}

.nl-tag-content {
    min-width: 0;
}

.nl-tag-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.nl-tag-titlebox h1 {
    font-size: 24px;
    line-height: 1.25;
    color: #111827;
    margin: 0 0 6px;
    font-weight: 800;
}

.nl-tag-titlebox p {
    margin: 0;
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.nl-tag-tabs {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    overflow: hidden;
    flex-shrink: 0;
}

.nl-tag-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 34px;
    padding: 0 12px;
    font-size: 13px;
    color: #4b5563;
    text-decoration: none;
    border-right: 1px solid #e5e7eb;
    background: #ffffff;
    transition: all .16s ease;
}

.nl-tag-tabs a:last-child {
    border-right: 0;
}

.nl-tag-tabs a:hover {
    color: #315bff;
    background: #f7f9ff;
}

.nl-tag-tabs a.active {
    color: #ffffff;
    background: #315bff;
    border-color: #315bff;
}

.nl-tag-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.nl-tag-book {
    display: block;
    background: #ffffff;
    border-radius: 7px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .16s ease, box-shadow .16s ease;
}

.nl-tag-book:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
}

.nl-tag-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #e5e7eb;
    overflow: hidden;
}

.nl-tag-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.nl-tag-status {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 8px;
    height: 20px;
    line-height: 20px;
    padding: 0 7px;
    border-radius: 4px;
    font-size: 11px;
    color: #ffffff;
    background: #1687d9;
    font-weight: 700;
    text-transform: lowercase;
}

.nl-tag-status.completed {
    background: #16a34a;
}

.nl-tag-book-info {
    padding: 10px 9px 9px;
}

.nl-tag-book-info h3 {
    height: 34px;
    margin: 0 0 8px;
    color: #111827;
    font-size: 13px;
    line-height: 17px;
    font-weight: 700;
    overflow: hidden;
}

.nl-tag-book:hover .nl-tag-book-info h3 {
    color: #315bff;
}

.nl-tag-book-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1;
}

.nl-tag-book-meta span {
    min-width: 0;
    color: #6b7280;
}

.nl-tag-book-meta em {
    color: #f5a623;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.nl-tag-empty {
    margin: 30px 0;
    padding: 24px;
    background: #ffffff;
    border-radius: 8px;
    color: #6b7280;
    text-align: center;
    font-size: 14px;
}

/* Pagination */
.nl-tag-page {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 34px 0 0;
    flex-wrap: wrap;
}

.nl-tag-page a,
.nl-tag-page span,
.nl-tag-page em,
.nl-tag-page strong {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 7px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    line-height: 34px;
    text-align: center;
    text-decoration: none;
    font-style: normal;
    font-weight: 600;
    box-sizing: border-box;
}

.nl-tag-page a:hover {
    color: #315bff;
    border-color: #315bff;
    background: #f7f9ff;
}

.nl-tag-page .active,
.nl-tag-page span.current,
.nl-tag-page strong,
.nl-tag-page em {
    color: #ffffff;
    background: #111827;
    border-color: #111827;
}

.nl-tag-page .disabled {
    color: #9ca3af;
    background: #f9fafb;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 1024px) {
    .nl-tag-wrap {
        max-width: 94%;
        grid-template-columns: 150px 1fr;
        gap: 18px;
    }

    .nl-tag-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .nl-tag-main {
        padding: 20px 0 36px;
    }

    .nl-tag-wrap {
        display: block;
        max-width: 92%;
    }

    .nl-tag-sidebar {
        width: 100%;
        margin-bottom: 18px;
    }

    .nl-tag-side-card {
        position: static;
        max-height: none;
    }

    .nl-tag-menu {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nl-tag-head {
        display: block;
    }

    .nl-tag-tabs {
        margin-top: 14px;
        width: max-content;
        max-width: 100%;
    }

    .nl-tag-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 480px) {
    .nl-tag-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .nl-tag-titlebox h1 {
        font-size: 21px;
    }

    .nl-tag-tabs a {
        min-width: 54px;
        padding: 0 9px;
        font-size: 12px;
    }
}
/* =========================================================
   NovelVersea Book Category Page - Final
   ========================================================= */

.nl-category-main {
    width: 100%;
    min-height: 720px;
    padding: 32px 0 48px;
    background: #f5f6fa;
    box-sizing: border-box;
}

.nl-category-wrap {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 24px;
    box-sizing: border-box;
}

.nl-category-sidebar {
    width: 190px;
    min-width: 190px;
    box-sizing: border-box;
}

.nl-category-side-card {
    width: 100%;
    max-height: 420px;
    padding: 16px 10px 16px 12px;
    background: #ffffff;
    border-radius: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    position: sticky;
    top: 90px;
}

.nl-category-side-card h3 {
    display: block;
    height: auto;
    margin: 0 0 12px 0;
    padding: 0 8px;
    font-size: 14px;
    line-height: 20px;
    color: #111827;
    font-weight: 800;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.nl-category-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
}

.nl-category-menu a {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 32px;
    padding: 8px 10px;
    margin: 0;
    border: 0;
    border-radius: 6px;
    box-sizing: border-box;

    font-size: 13px !important;
    line-height: 16px !important;
    font-weight: 600;
    color: #374151;
    text-decoration: none;
    text-align: left;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;

    background: transparent;
    transition: background .16s ease, color .16s ease;
}

.nl-category-menu a:hover {
    color: #315bff;
    background: #eef3ff;
}

.nl-category-menu a.active {
    color: #ffffff !important;
    background: #315bff !important;
    font-weight: 800;
}

.nl-category-content {
    min-width: 0;
    box-sizing: border-box;
}

.nl-category-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.nl-category-title h1 {
    margin: 0 0 6px 0;
    color: #111827;
    font-size: 24px;
    line-height: 30px;
    font-weight: 800;
}

.nl-category-title p {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
}

.nl-category-tabs {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
}

.nl-category-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 34px;
    padding: 0 12px;
    border-right: 1px solid #e5e7eb;
    box-sizing: border-box;
    background: #ffffff;

    color: #4b5563;
    font-size: 13px;
    line-height: 34px;
    font-weight: 700;
    text-decoration: none;
}

.nl-category-tabs a:last-child {
    border-right: 0;
}

.nl-category-tabs a:hover {
    color: #315bff;
    background: #f7f9ff;
}

.nl-category-tabs a.active {
    color: #ffffff !important;
    background: #315bff !important;
    border-color: #315bff;
}

.nl-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.nl-category-book {
    display: block;
    overflow: hidden;
    border-radius: 7px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .16s ease, box-shadow .16s ease;
}

.nl-category-book:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
}

.nl-category-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #e5e7eb;
}

.nl-category-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nl-category-status {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 8px;
    display: inline-block;
    height: 20px;
    padding: 0 7px;
    border-radius: 4px;

    color: #ffffff;
    font-size: 11px;
    line-height: 20px;
    font-weight: 800;
    text-transform: lowercase;
}

.nl-category-status.ongoing {
    background: #1687d9;
}

.nl-category-status.completed {
    background: #16a34a;
}

.nl-category-info {
    padding: 10px 9px 9px;
    box-sizing: border-box;
}

.nl-category-info h3 {
    height: 34px;
    margin: 0 0 8px 0;
    color: #111827;
    font-size: 13px;
    line-height: 17px;
    font-weight: 800;
    overflow: hidden;
}

.nl-category-book:hover .nl-category-info h3 {
    color: #315bff;
}

.nl-category-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #6b7280;
    font-size: 12px;
    line-height: 16px;
}

.nl-category-meta span {
    min-width: 0;
    color: #6b7280;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nl-category-meta em {
    flex-shrink: 0;
    color: #f5a623;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

/* Pagination */
.nl-category-page {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    margin: 34px 0 0;
    flex-wrap: wrap;
    text-align: center;
}

.nl-category-page a,
.nl-category-page span,
.nl-category-page em,
.nl-category-page strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    box-sizing: border-box;
    background: #ffffff;

    color: #374151;
    font-size: 13px;
    line-height: 34px;
    font-style: normal;
    font-weight: 700;
    text-decoration: none;
}

.nl-category-page a:hover {
    color: #315bff;
    border-color: #315bff;
    background: #f7f9ff;
}

.nl-category-page strong,
.nl-category-page em,
.nl-category-page .active,
.nl-category-page .current {
    color: #ffffff !important;
    background: #111827 !important;
    border-color: #111827 !important;
}

/* If MCCMS outputs select pagination */
.nl-category-page.has-select-page {
    display: flex;
    justify-content: center;
}

.nl-category-page.has-select-page select,
.nl-category-page select {
    width: auto;
    min-width: 88px;
    height: 34px;
    padding: 0 30px 0 12px;
    border: 1px solid #d8dee9;
    border-radius: 7px;
    background-color: #ffffff;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    outline: none;
    cursor: pointer;
}

.nl-category-page.has-select-page select:hover,
.nl-category-page select:hover {
    border-color: #315bff;
}

/* Responsive */
@media (max-width: 1024px) {
    .nl-category-wrap {
        max-width: 94%;
        grid-template-columns: 170px minmax(0, 1fr);
        gap: 18px;
    }

    .nl-category-sidebar {
        width: 170px;
        min-width: 170px;
    }

    .nl-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .nl-category-main {
        padding: 20px 0 36px;
    }

    .nl-category-wrap {
        display: block;
        width: 92%;
        max-width: 92%;
    }

    .nl-category-sidebar {
        width: 100%;
        min-width: 0;
        margin-bottom: 18px;
    }

    .nl-category-side-card {
        position: static;
        max-height: none;
    }

    .nl-category-menu {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .nl-category-head {
        display: block;
    }

    .nl-category-tabs {
        margin-top: 14px;
    }

    .nl-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 480px) {
    .nl-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .nl-category-title h1 {
        font-size: 21px;
        line-height: 27px;
    }

    .nl-category-tabs a {
        min-width: 56px;
        padding: 0 9px;
        font-size: 12px;
    }
}
/* Pretty category pagination */
.nl-category-page-wrap {
    width: 100%;
    margin: 34px 0 0;
}

.nl-category-page-source {
    display: none;
}

.nl-category-page {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nl-category-page a,
.nl-category-page span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 7px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    font-size: 13px;
    line-height: 34px;
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
}

.nl-category-page a:hover {
    color: #315bff;
    border-color: #315bff;
    background: #f7f9ff;
}

.nl-category-page span.active {
    color: #ffffff;
    background: #111827;
    border-color: #111827;
}

.nl-category-page span.dots {
    min-width: auto;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: #9ca3af;
}

.nl-category-page span.disabled {
    color: #c4c9d4;
    background: #f9fafb;
    border-color: #edf0f5;
    cursor: default;
}

.nl-category-page .prev,
.nl-category-page .next {
    font-size: 16px;
    font-weight: 800;
}
/* Latest / Ranking / New / Completed list page */
.nl-list-main {
    background: #f5f7fb;
    min-height: 100vh;
    padding: 40px 0 72px;
}

.nl-list-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.nl-list-header {
    margin-bottom: 22px;
}

.nl-list-header h1 {
    margin: 0 0 10px;
    font-size: 30px;
    line-height: 1.2;
    color: #111827;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.nl-list-header p {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

.nl-list-filters {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

.nl-list-select-wrap {
    width: 180px;
}

.nl-list-select {
    width: 100%;
    height: 40px;
    padding: 0 34px 0 14px;
    border: 1px solid #dfe5f0;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    font-size: 14px;
    outline: none;
}

.nl-list-tabs {
    display: inline-flex;
    background: #fff;
    border: 1px solid #e0e6f0;
    border-radius: 8px;
    overflow: hidden;
}

.nl-list-tabs a {
    min-width: 86px;
    height: 40px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-right: 1px solid #e0e6f0;
}

.nl-list-tabs a:last-child {
    border-right: 0;
}

.nl-list-tabs a.active,
.nl-list-tabs a:hover {
    background: #3158ff;
    color: #fff;
}

.nl-list-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 22px;
}

.nl-list-book-card {
    display: block;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform .18s ease, box-shadow .18s ease;
}

.nl-list-book-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

.nl-list-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #e5e7eb;
    overflow: hidden;
}

.nl-list-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.nl-list-status {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 4px 8px;
    border-radius: 5px;
    font-size: 11px;
    line-height: 1;
    color: #fff;
    font-weight: 800;
    text-transform: lowercase;
}

.nl-list-status.ongoing {
    background: #228be6;
}

.nl-list-status.completed {
    background: #1f9d55;
}

.nl-list-book-info {
    padding: 12px 12px 13px;
}

.nl-list-book-info h3 {
    margin: 0 0 10px;
    min-height: 38px;
    font-size: 14px;
    line-height: 1.35;
    color: #111827;
    font-weight: 800;
}

.nl-list-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 13px;
}

.nl-list-meta em {
    color: #f59e0b;
    font-style: normal;
    font-weight: 800;
}

.nl-list-time {
    color: #64748b;
    font-size: 12px;
}

.nl-list-page-wrap {
    margin-top: 44px;
}

.nl-list-page-source {
    display: none;
}

.nl-list-page {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.nl-list-page a,
.nl-list-page span {
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 7px;
    border: 1px solid #dfe5f0;
    background: #fff;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.nl-list-page span.active {
    background: #111827;
    color: #fff;
    border-color: #111827;
}

.nl-list-page span.dots {
    border-color: transparent;
    background: transparent;
}

.nl-list-page span.disabled {
    opacity: .45;
    cursor: not-allowed;
}

@media (max-width: 1180px) {
    .nl-list-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .nl-list-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nl-list-filters {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .nl-list-main {
        padding-top: 84px;
    }

    .nl-list-container {
        padding: 0 14px;
    }

    .nl-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .nl-list-tabs a {
        min-width: auto;
        padding: 0 14px;
    }
}
/* =========================================================
   NovelVersea Book Detail Page
   File: /template/pc/novelversea/book/info.html
   ========================================================= */

body {
    background: #f6f7fb;
}

.nv-detail-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 26px 16px 50px;
    box-sizing: border-box;
}

.nv-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: #7b8190;
    font-size: 13px;
}

.nv-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
}

.nv-breadcrumb a:hover {
    color: #3157f6;
}

.nv-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 20px;
    align-items: start;
}

.nv-main-col,
.nv-side-col {
    min-width: 0;
}

.nv-book-hero {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 24px;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
}

.nv-book-cover {
    position: relative;
    width: 100%;
    height: 318px;
    border-radius: 7px;
    overflow: hidden;
    background: #eef2ff;
}

.nv-book-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.nv-status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 9px;
    border-radius: 4px;
    background: #3157f6;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    text-transform: lowercase;
}

.nv-book-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 4px 0 0;
}

.nv-genre-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 5px 9px;
    border-radius: 4px;
    background: #eef3ff;
    color: #3157f6;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 12px;
}

.nv-book-title {
    margin: 0 0 10px;
    color: #171c2a;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 800;
}

.nv-book-author {
    color: #5f6675;
    font-size: 14px;
    margin-bottom: 16px;
}

.nv-book-author a {
    color: #3157f6;
    text-decoration: none;
    font-weight: 700;
}

.nv-rating-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: #4b5563;
    font-size: 13px;
}

.nv-stars {
    color: #f7b500;
    font-size: 19px;
    letter-spacing: 1px;
    white-space: nowrap;
}

.nv-score {
    color: #111827;
    font-weight: 800;
}

.nv-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: #5f6675;
    font-size: 13px;
    margin-bottom: 24px;
}

.nv-stat-row span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nv-hero-spacer {
    flex: 1;
    min-height: 70px;
}

.nv-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: auto;
}

.nv-btn-primary,
.nv-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    box-sizing: border-box;
}

.nv-btn-primary {
    background: #3157f6;
    color: #fff;
}

.nv-btn-primary:hover {
    background: #2148e8;
}

.nv-btn-secondary {
    background: #fff;
    color: #1f2937;
    border: 1px solid #d8deea;
}

.nv-btn-secondary:hover {
    border-color: #3157f6;
    color: #3157f6;
}

.nv-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
}

.nv-tabs-card {
    margin-top: 18px;
    overflow: hidden;
}

.nv-tabs {
    display: flex;
    align-items: center;
    height: 46px;
    border-bottom: 1px solid #edf0f6;
}

.nv-tab-btn {
    height: 46px;
    padding: 0 18px;
    border: 0;
    background: transparent;
    color: #596174;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
}

.nv-tab-btn.active {
    color: #3157f6;
}

.nv-tab-btn.active:after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    background: #3157f6;
    border-radius: 2px 2px 0 0;
}

.nv-tab-panel {
    display: none;
    padding: 18px;
}

.nv-tab-panel.active {
    display: block;
}

.nv-synopsis {
    color: #485064;
    font-size: 14px;
    line-height: 1.9;
    white-space: normal;
}

.nv-chapter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 14px;
}

.nv-chapter-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
}

.nv-chapter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 6px;
    color: #1f2937;
    text-decoration: none;
    box-sizing: border-box;
    transition: all .18s ease;
}

.nv-chapter-item:hover {
    background: #eef3ff;
    color: #3157f6;
}

.nv-chapter-name {
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nv-chapter-date {
    display: block;
    margin-top: 4px;
    color: #8b94a5;
    font-size: 11px;
    font-weight: 400;
}

.nv-chapter-arrow {
    color: #a5adbb;
    font-size: 18px;
    margin-left: 10px;
}

.nv-tags-block {
    margin-top: 18px;
}

.nv-block-title {
    margin: 0 0 12px;
    color: #171c2a;
    font-size: 15px;
    font-weight: 800;
}

.nv-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nv-tags-list a,
.nv-tags-list span {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 4px;
    background: #f0f3f8;
    color: #4b5563;
    font-size: 12px;
    text-decoration: none;
}

.nv-recommend-section {
    margin-top: 24px;
}

.nv-recommend-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.nv-rec-card {
    min-width: 0;
    color: #111827;
    text-decoration: none;
}

.nv-rec-cover {
    position: relative;
    height: 178px;
    border-radius: 7px;
    overflow: hidden;
    background: #eef2ff;
    margin-bottom: 8px;
}

.nv-rec-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.nv-rec-status {
    position: absolute;
    top: 7px;
    left: 7px;
    padding: 4px 7px;
    border-radius: 4px;
    background: #2da8ff;
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

.nv-rec-title {
    color: #171c2a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nv-rec-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    color: #8b94a5;
    font-size: 12px;
}

.nv-rec-meta em {
    color: #f7b500;
    font-style: normal;
}

.nv-latest-series {
    margin-top: 28px;
    padding: 16px;
}

.nv-latest-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.nv-latest-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 16px;
    gap: 10px;
    align-items: center;
    min-height: 62px;
    padding: 10px;
    border-radius: 7px;
    background: #f8fafc;
    color: #111827;
    text-decoration: none;
}

.nv-latest-item:hover {
    background: #eef3ff;
}

.nv-latest-thumb {
    width: 44px;
    height: 54px;
    border-radius: 5px;
    overflow: hidden;
    background: #e5e7eb;
}

.nv-latest-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.nv-latest-name {
    min-width: 0;
    color: #171c2a;
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nv-latest-meta {
    margin-top: 5px;
    color: #8b94a5;
    font-size: 11px;
}

.nv-side-card {
    padding: 14px;
    margin-bottom: 16px;
}

.nv-side-title {
    margin: 0 0 12px;
    color: #171c2a;
    font-size: 15px;
    font-weight: 900;
}

.nv-trend-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nv-trend-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 9px;
    color: #111827;
    text-decoration: none;
}

.nv-trend-cover {
    width: 48px;
    height: 64px;
    border-radius: 5px;
    overflow: hidden;
    background: #e5e7eb;
}

.nv-trend-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.nv-trend-name {
    color: #171c2a;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nv-trend-meta {
    margin-top: 4px;
    color: #7b8190;
    font-size: 11px;
    line-height: 1.5;
}

.nv-side-more {
    margin-top: 12px;
}

.nv-side-more a {
    color: #3157f6;
    font-size: 13px;
    text-decoration: none;
    font-weight: 700;
}

.nv-rank-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.nv-rank-item {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    color: #111827;
    text-decoration: none;
    font-size: 12px;
}

.nv-rank-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: #f0f3f8;
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
}

.nv-rank-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #374151;
}

@media (max-width: 980px) {
    .nv-detail-layout {
        grid-template-columns: 1fr;
    }

    .nv-side-col {
        display: none;
    }

    .nv-recommend-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .nv-book-hero {
        grid-template-columns: 1fr;
    }

    .nv-book-cover {
        max-width: 230px;
        height: 310px;
        margin: 0 auto;
    }

    .nv-book-title {
        font-size: 23px;
    }

    .nv-action-row {
        grid-template-columns: 1fr;
    }

    .nv-chapter-list,
    .nv-latest-list {
        grid-template-columns: 1fr;
    }

    .nv-recommend-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .nv-detail-wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    .nv-recommend-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nv-rec-cover {
        height: 190px;
    }
}
.nv-synopsis img {
    max-width: 100%;
    height: auto;
}

.nv-chapter-item > span:first-child {
    min-width: 0;
}

.nv-chapter-empty {
    grid-column: 1 / -1;
    padding: 22px 16px;
    border-radius: 7px;
    background: #f8fafc;
    color: #7b8190;
    font-size: 13px;
    text-align: center;
}
/* =========================================================
   NovelVersea Book Detail Page Final v2
   File: /template/pc/novelversea/html/book/info.html
   ========================================================= */

body {
    background: #f6f7fb;
}

.nv-detail-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 26px 16px 50px;
    box-sizing: border-box;
}

.nv-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: #7b8190;
    font-size: 13px;
}

.nv-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
}

.nv-breadcrumb a:hover {
    color: #3157f6;
}

.nv-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 286px;
    gap: 20px;
    align-items: start;
}

.nv-main-col,
.nv-side-col {
    min-width: 0;
}

/* ---------- Hero ---------- */

.nv-book-hero {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 24px;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
}

.nv-book-cover {
    position: relative;
    width: 100%;
    height: 318px;
    border-radius: 7px;
    overflow: hidden;
    background: #eef2ff;
}

.nv-book-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.nv-status-badge,
.nv-rec-status {
    position: absolute;
    z-index: 2;
    padding: 6px 9px;
    border-radius: 4px;
    background: #2f63f6;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    text-transform: lowercase;
}

.nv-status-badge {
    top: 10px;
    right: 10px;
}

.nv-rec-status {
    top: 7px;
    left: 7px;
    background: #249cf2;
}

.nv-book-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 4px 0 0;
}

.nv-main-genre {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    max-width: 100%;
    height: 26px;
    padding: 0 10px;
    margin-bottom: 12px;
    border-radius: 4px;
    background: #edf3ff;
    color: #3157f6;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nv-book-title {
    margin: 0 0 10px;
    color: #171c2a;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 900;
}

.nv-book-author {
    color: #5f6675;
    font-size: 14px;
    margin-bottom: 15px;
}

.nv-book-author span {
    color: #3157f6;
    font-weight: 800;
}

.nv-rating-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    color: #4b5563;
    font-size: 13px;
}

.nv-stars {
    color: #f6b800;
    font-size: 19px;
    letter-spacing: 1px;
    white-space: nowrap;
}

.nv-score {
    color: #111827;
    font-weight: 900;
}

.nv-review-text {
    color: #5f6675;
}

.nv-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    color: #5f6675;
    font-size: 13px;
    margin-bottom: 24px;
}

.nv-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nv-stat-item em {
    font-style: normal;
}

.nv-hero-spacer {
    flex: 1;
    min-height: 70px;
}

.nv-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: auto;
}

.nv-btn-primary,
.nv-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    box-sizing: border-box;
}

.nv-btn-primary {
    background: #3157f6;
    color: #fff;
}

.nv-btn-primary:hover {
    background: #2148e8;
}

.nv-btn-secondary {
    background: #fff;
    color: #1f2937;
    border: 1px solid #d8deea;
}

.nv-btn-secondary:hover {
    border-color: #3157f6;
    color: #3157f6;
}

/* ---------- Cards ---------- */

.nv-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
}

.nv-tabs-card {
    margin-top: 18px;
    overflow: hidden;
}

.nv-tabs {
    display: flex;
    align-items: center;
    height: 48px;
    border-bottom: 1px solid #edf0f6;
}

.nv-tab-btn {
    height: 48px;
    padding: 0 18px;
    border: 0;
    background: transparent;
    color: #596174;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    position: relative;
}

.nv-tab-btn.active {
    color: #3157f6;
}

.nv-tab-btn.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    background: #3157f6;
    border-radius: 2px 2px 0 0;
}

.nv-tab-panel {
    display: none;
    padding: 18px;
}

.nv-tab-panel.active {
    display: block;
}

/* ---------- Synopsis ---------- */

.nv-synopsis {
    color: #485064;
    font-size: 14px;
    line-height: 1.72;
}

.nv-synopsis p {
    margin: 0 0 11px;
}

.nv-synopsis p:last-child {
    margin-bottom: 0;
}

.nv-synopsis img {
    max-width: 100%;
    height: auto;
}

/* ---------- Chapters ---------- */

.nv-chapter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 14px;
}

.nv-sort-btn {
    border: 0;
    background: transparent;
    color: #4b5563;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.nv-sort-btn::before {
    content: "↕ ";
    color: #4b5563;
}

.nv-chapter-scroll {
    max-height: 432px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
}

.nv-chapter-scroll::-webkit-scrollbar {
    width: 6px;
}

.nv-chapter-scroll::-webkit-scrollbar-thumb {
    background: #d6ddeb;
    border-radius: 10px;
}

.nv-chapter-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.nv-chapter-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
}

.nv-chapter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 10px 13px;
    background: #f8fafc;
    border-radius: 6px;
    color: #1f2937;
    text-decoration: none;
    box-sizing: border-box;
    transition: all .18s ease;
}

.nv-chapter-item:hover {
    background: #eef3ff;
    color: #3157f6;
}

.nv-chapter-item > span:first-child {
    min-width: 0;
}

.nv-chapter-name {
    display: block;
    min-width: 0;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nv-chapter-date {
    display: block;
    margin-top: 4px;
    color: #8b94a5;
    font-size: 11px;
    font-weight: 400;
}

.nv-chapter-arrow {
    color: #a5adbb;
    font-size: 20px;
    margin-left: 10px;
}

/* ---------- Chapter Pager ---------- */

.nv-page-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
}

.nv-page-btn,
.nv-page-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 7px;
    background: #f1f4f9;
    color: #4b5563;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.nv-page-btn.active {
    background: #3157f6;
    color: #fff;
}

.nv-page-btn.disabled {
    opacity: .45;
    pointer-events: none;
}

/* ---------- Section Titles / Tags ---------- */

.nv-tags-block {
    margin-top: 20px;
}

.nv-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.nv-block-title {
    margin: 0 0 13px;
    color: #171c2a;
    font-size: 17px;
    font-weight: 900;
}

.nv-section-head .nv-block-title {
    margin-bottom: 0;
}

.nv-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.nv-tags-list span {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 4px;
    background: #edf3ff;
    color: #3157f6;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* ---------- You May Also Like ---------- */

.nv-recommend-section {
    margin-top: 26px;
    position: relative;
}

.nv-recommend-shell {
    position: relative;
    overflow: hidden;
}

.nv-recommend-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
}

.nv-recommend-scroll::-webkit-scrollbar {
    height: 0;
}

.nv-rec-arrows {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nv-rec-arrow {
    width: 31px;
    height: 31px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #647084;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.nv-rec-arrow:hover {
    background: #3157f6;
    color: #fff;
}

.nv-rec-card {
    flex: 0 0 146px;
    min-width: 0;
    color: #111827;
    text-decoration: none;
    scroll-snap-align: start;
}

.nv-rec-cover {
    position: relative;
    height: 202px;
    border-radius: 7px;
    overflow: hidden;
    background: #eef2ff;
    margin-bottom: 8px;
}

.nv-rec-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.nv-rec-title {
    color: #171c2a;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
    height: 36px;
    overflow: hidden;
}

.nv-rec-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    color: #8b94a5;
    font-size: 12px;
}

.nv-rec-meta em {
    color: #f7b500;
    font-style: normal;
}

/* ---------- Latest Series ---------- */

.nv-latest-series {
    margin-top: 28px;
    padding: 16px;
}

.nv-latest-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.nv-latest-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 16px;
    gap: 11px;
    align-items: center;
    min-height: 66px;
    padding: 10px;
    border-radius: 7px;
    background: #f8fafc;
    color: #111827;
    text-decoration: none;
}

.nv-latest-item:hover {
    background: #eef3ff;
}

.nv-latest-thumb {
    width: 48px;
    height: 58px;
    border-radius: 5px;
    overflow: hidden;
    background: #e5e7eb;
}

.nv-latest-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.nv-latest-body {
    min-width: 0;
}

.nv-latest-name {
    min-width: 0;
    color: #171c2a;
    font-size: 13px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nv-latest-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    color: #8b94a5;
    font-size: 11px;
}

.nv-latest-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nv-latest-arrow {
    color: #a5adbb;
    font-size: 18px;
}

/* ---------- Sidebar ---------- */

.nv-side-card {
    padding: 18px 18px 16px;
    margin-bottom: 18px;
}

.nv-side-title {
    margin: 0 0 15px;
    color: #171c2a;
    font-size: 16px;
    font-weight: 900;
}

.nv-trend-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.nv-trend-item {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 12px;
    color: #111827;
    text-decoration: none;
}

.nv-trend-cover {
    width: 62px;
    height: 82px;
    border-radius: 5px;
    overflow: hidden;
    background: #e5e7eb;
}

.nv-trend-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.nv-trend-body {
    min-width: 0;
    padding-right: 2px;
}

.nv-trend-name {
    color: #171c2a;
    font-size: 13.5px;
    line-height: 1.35;
    font-weight: 900;
    max-height: 38px;
    overflow: hidden;
}

.nv-trend-meta {
    margin-top: 7px;
    color: #7b8190;
    font-size: 12px;
    line-height: 1.55;
}

.nv-trend-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nv-side-more {
    margin-top: 14px;
    padding-left: 2px;
}

.nv-side-more a {
    color: #3157f6;
    font-size: 13px;
    text-decoration: none;
    font-weight: 800;
}

/* ---------- Recommendations Sidebar ---------- */

.nv-reco-side-card {
    padding-left: 18px;
    padding-right: 18px;
}

.nv-rank-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nv-rank-item {
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    color: #111827;
    text-decoration: none;
    font-size: 13px;
    min-height: 25px;
}

.nv-rank-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 4px;
    background: #f0f3f8;
    color: #6b7280;
    font-size: 11px;
    font-weight: 900;
}

.nv-rank-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #374151;
    font-weight: 750;
}

/* ---------- Mini Icons closer to template ---------- */

.nv-mini-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    font-style: normal;
    line-height: 1;
}

.nv-mini-eye::before {
    content: "◉";
    color: #5b6474;
    font-size: 9px;
}

.nv-mini-book::before {
    content: "▣";
    color: #5b6474;
    font-size: 10px;
}

.nv-mini-save::before {
    content: "▮";
    color: #5b6474;
    font-size: 10px;
}

.nv-mini-fire::before {
    content: "♨";
    color: #f59e0b;
    font-size: 13px;
    font-weight: 900;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
    .nv-detail-layout {
        grid-template-columns: 1fr;
    }

    .nv-side-col {
        display: none;
    }
}

@media (max-width: 720px) {
    .nv-book-hero {
        grid-template-columns: 1fr;
    }

    .nv-book-cover {
        max-width: 230px;
        height: 310px;
        margin: 0 auto;
    }

    .nv-book-title {
        font-size: 23px;
    }

    .nv-action-row {
        grid-template-columns: 1fr;
    }

    .nv-chapter-list,
    .nv-latest-list {
        grid-template-columns: 1fr;
    }

    .nv-rec-card {
        flex-basis: 130px;
    }

    .nv-rec-cover {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .nv-detail-wrap {
        padding-left: 12px;
        padding-right: 12px;
    }

    .nv-rec-card {
        flex-basis: 122px;
    }

    .nv-rec-cover {
        height: 170px;
    }
}
/* Font Awesome icon tuning */
.nv-stat-item i,
.nv-trend-meta i,
.nv-latest-meta i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    min-width: 14px;
    margin-right: 5px;
    font-size: 12px;
    line-height: 1;
    color: #6b7280;
}

.nv-stat-item .fa-eye {
    color: #4b5563;
}

.nv-stat-item .fa-book {
    color: #4b5563;
    font-size: 11px;
}

.nv-stat-item .fa-bookmark {
    color: #4b5563;
    font-size: 12px;
}

.nv-fire-icon {
    color: #f97316 !important;
    font-size: 11px !important;
}

.nv-book-icon {
    color: #6b7280 !important;
    font-size: 11px !important;
}

.nv-eye-icon {
    color: #6b7280 !important;
    font-size: 11px !important;
}

/* Top stat row closer to Novellunar style */
.nv-stat-row {
    gap: 18px;
}

.nv-stat-item {
    display: inline-flex;
    align-items: center;
    color: #4b5563;
    font-size: 13px;
    line-height: 1;
}

.nv-stat-item em {
    font-style: normal;
}

/* Sidebar meta closer to reference */
.nv-trend-meta span,
.nv-latest-meta span {
    display: inline-flex;
    align-items: center;
}
/* =========================================================
   Sidebar size fix - Weekly Trending & Recommendations
   Force override old duplicated styles
========================================================= */

/* 右侧卡片整体 */
.nv-side-card {
    padding: 18px 18px 20px !important;
}

/* Weekly Trending 列表间距 */
.nv-trend-list {
    gap: 13px !important;
}

/* Weekly Trending 单项 */
.nv-trend-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 0 !important;
}

/* Weekly Trending 封面：放大 */
.nv-trend-cover {
    width: 58px !important;
    min-width: 58px !important;
    height: 78px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #e5e7eb !important;
}

.nv-trend-cover img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

/* Weekly Trending 文字区域 */
.nv-trend-body {
    flex: 1 !important;
    min-width: 0 !important;
    padding-top: 1px !important;
}

/* Weekly Trending 标题：放大并允许两行 */
.nv-trend-name {
    color: #171c2a !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    max-height: 36px !important;
    overflow: hidden !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
}

/* Weekly Trending 元信息 */
.nv-trend-meta {
    margin-top: 6px !important;
    color: #6b7280 !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.nv-trend-meta span {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #6b7280 !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
}

/* Recommendations 列表整体 */
.nv-rank-list {
    gap: 0 !important;
}

/* Recommendations 单项：增大高度 */
.nv-rank-item {
    min-height: 38px !important;
    padding: 9px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Recommendations 排名数字 */
.nv-rank-num {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

/* Recommendations 小说名 */
.nv-rank-name {
    flex: 1 !important;
    min-width: 0 !important;
    color: #171c2a !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* 右侧标题也稍微加大 */
.nv-side-title {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #111827 !important;
    margin-bottom: 15px !important;
}
/* =========================================================
   Detail Page - Tags + You May Also Like Final Fix
   Add at the END of style.css
========================================================= */


/* =========================
   Tags
========================= */

.nv-tags-block {
    margin-top: 24px !important;
    margin-bottom: 28px !important;
}

.nv-tags-block .nv-block-title {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #111827 !important;
    margin: 0 0 13px !important;
}

.nv-tags-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 34px !important;
}

.nv-tags-list span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 7px 13px !important;
    border-radius: 7px !important;
    background: #eef4ff !important;
    border: 1px solid #dbeafe !important;
    color: #2563eb !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.nv-tags-list span:hover {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}


/* =========================
   You May Also Like Layout
========================= */

.nv-recommend-section {
    position: relative !important;
    margin-top: 24px !important;
    margin-bottom: 34px !important;
}

.nv-recommend-section .nv-section-head {
    display: block !important;
    margin-bottom: 12px !important;
    padding-right: 0 !important;
}

.nv-recommend-section .nv-block-title {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #111827 !important;
    margin: 0 !important;
}


/* 外层允许箭头浮出来 */
.nv-recommend-shell {
    position: relative !important;
    width: 100% !important;
    overflow: visible !important;
}


/* 横向滚动容器 */
.nv-recommend-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 2px 10px !important;
    scrollbar-width: none !important;
}

.nv-recommend-scroll::-webkit-scrollbar {
    display: none !important;
}


/* 每一本小说：真正的小盒子 */
.nv-rec-card {
    flex: 0 0 128px !important;
    width: 128px !important;
    min-width: 128px !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: inherit !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06) !important;
    border: 1px solid rgba(229, 231, 235, 0.9) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.nv-rec-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12) !important;
}


/* 封面比例 */
.nv-rec-cover {
    position: relative !important;
    width: 100% !important;
    height: 178px !important;
    border-radius: 10px 10px 0 0 !important;
    overflow: hidden !important;
    background: #e5e7eb !important;
}

.nv-rec-cover img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}


/* 如果你想封面完全显示，不裁切，把上面的 cover 改成 contain */
/*
.nv-rec-cover img {
    object-fit: contain !important;
    background: #f3f4f6 !important;
}
*/


/* 状态角标 */
.nv-rec-status {
    position: absolute !important;
    top: 7px !important;
    left: 7px !important;
    z-index: 3 !important;
    min-height: 18px !important;
    padding: 3px 7px !important;
    border-radius: 5px !important;
    background: #1d9bf0 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: lowercase !important;
}


/* 小说名 */
.nv-rec-title {
    margin: 8px 8px 0 !important;
    color: #111827 !important;
    font-size: 12.5px !important;
    line-height: 1.32 !important;
    font-weight: 800 !important;
    height: 33px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
}


/* 章节数和评分：紧跟小说名 */
.nv-rec-meta {
    margin: 7px 8px 9px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    color: #7b8190 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.nv-rec-meta span {
    color: #7b8190 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.nv-rec-meta em {
    color: #f6b400 !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}


/* =========================
   Carousel Arrows
   模板同款：浮在轮播左右两侧
========================= */

.nv-rec-arrows {
    position: static !important;
    display: block !important;
}


/* 两个按钮共用 */
.nv-rec-arrow {
    position: absolute !important;
    top: 108px !important;
    z-index: 20 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: #ffffff !important;
    color: #6b7280 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18) !important;
    transition: all 0.2s ease !important;
}

.nv-rec-arrow:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}


/* 左箭头 */
#nvRecPrev {
    left: -16px !important;
}


/* 右箭头 */
#nvRecNext {
    right: -16px !important;
}


/* 手机端稍微收回来 */
@media (max-width: 768px) {
    .nv-rec-card {
        flex-basis: 122px !important;
        width: 122px !important;
        min-width: 122px !important;
    }

    .nv-rec-cover {
        height: 170px !important;
    }

    #nvRecPrev {
        left: -8px !important;
    }

    #nvRecNext {
        right: -8px !important;
    }
}
/* =========================================================
   Detail Page Final Override
   Tags + You May Also Like + Sidebar
   Add at the END of style.css
========================================================= */


/* ---------- Font Awesome icon tuning ---------- */
.nv-stat-item i,
.nv-trend-meta i,
.nv-latest-meta i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 14px !important;
    min-width: 14px !important;
    margin-right: 5px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    color: #6b7280 !important;
}

.nv-fire-icon {
    color: #f97316 !important;
    font-size: 11px !important;
}

.nv-book-icon,
.nv-eye-icon {
    color: #6b7280 !important;
    font-size: 11px !important;
}

.nv-stat-row {
    gap: 18px !important;
}

.nv-stat-item {
    display: inline-flex !important;
    align-items: center !important;
    color: #4b5563 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

.nv-stat-item em {
    font-style: normal !important;
}


/* =========================================================
   Tags
========================================================= */

.nv-tags-block {
    margin-top: 24px !important;
    margin-bottom: 30px !important;
}

.nv-tags-block .nv-block-title {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #111827 !important;
    margin: 0 0 13px !important;
}

.nv-tags-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 9px !important;
    min-height: 34px !important;
}

.nv-tags-list span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 7px 13px !important;
    border-radius: 7px !important;
    background: #eef4ff !important;
    border: 1px solid #dbeafe !important;
    color: #2563eb !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.nv-tags-list span:hover {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}


/* =========================================================
   You May Also Like
========================================================= */

.nv-recommend-section {
    position: relative !important;
    margin-top: 24px !important;
    margin-bottom: 36px !important;
}

.nv-recommend-section .nv-section-head {
    display: block !important;
    margin-bottom: 12px !important;
    padding-right: 0 !important;
}

.nv-recommend-section .nv-block-title {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #111827 !important;
    margin: 0 !important;
}

.nv-recommend-shell {
    position: relative !important;
    width: 100% !important;
    overflow: visible !important;
}

.nv-recommend-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 2px 12px !important;
    scrollbar-width: none !important;
}

.nv-recommend-scroll::-webkit-scrollbar {
    display: none !important;
}

/* 每本书一个独立小盒子 */
.nv-rec-card {
    flex: 0 0 128px !important;
    width: 128px !important;
    min-width: 128px !important;
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: inherit !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(229, 231, 235, 0.95) !important;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.07) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.nv-rec-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.13) !important;
}

.nv-rec-cover {
    position: relative !important;
    width: 100% !important;
    height: 178px !important;
    border-radius: 10px 10px 0 0 !important;
    overflow: hidden !important;
    background: #e5e7eb !important;
}

.nv-rec-cover img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.nv-rec-status {
    position: absolute !important;
    top: 7px !important;
    left: 7px !important;
    z-index: 3 !important;
    min-height: 18px !important;
    padding: 3px 7px !important;
    border-radius: 5px !important;
    background: #1d9bf0 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: lowercase !important;
}

.nv-rec-title {
    margin: 8px 8px 0 !important;
    color: #111827 !important;
    font-size: 12.5px !important;
    line-height: 1.32 !important;
    font-weight: 800 !important;
    height: 33px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
}

.nv-rec-meta {
    margin: 7px 8px 9px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    color: #7b8190 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.nv-rec-meta span {
    color: #7b8190 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.nv-rec-meta em {
    color: #f6b400 !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}


/* 左右箭头浮在轮播两侧 */
.nv-rec-arrows {
    position: static !important;
    display: block !important;
}

.nv-rec-arrow {
    position: absolute !important;
    top: 112px !important;
    z-index: 20 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: #ffffff !important;
    color: #6b7280 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18) !important;
    transition: all 0.2s ease !important;
}

.nv-rec-arrow:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

#nvRecPrev {
    left: -16px !important;
}

#nvRecNext {
    right: -16px !important;
}


/* =========================================================
   Sidebar: Weekly Trending + Recommendations
========================================================= */

.nv-side-card {
    padding: 18px 18px 20px !important;
}

.nv-side-title {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #111827 !important;
    margin-bottom: 15px !important;
}

.nv-trend-list {
    gap: 13px !important;
}

.nv-trend-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 0 !important;
}

.nv-trend-cover {
    width: 58px !important;
    min-width: 58px !important;
    height: 78px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #e5e7eb !important;
}

.nv-trend-cover img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

.nv-trend-body {
    flex: 1 !important;
    min-width: 0 !important;
    padding-top: 1px !important;
}

.nv-trend-name {
    color: #171c2a !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    max-height: 36px !important;
    overflow: hidden !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
}

.nv-trend-meta {
    margin-top: 6px !important;
    color: #6b7280 !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.nv-trend-meta span {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #6b7280 !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
}

.nv-rank-list {
    gap: 0 !important;
}

.nv-rank-item {
    min-height: 38px !important;
    padding: 9px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.nv-rank-num {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.nv-rank-name {
    flex: 1 !important;
    min-width: 0 !important;
    color: #171c2a !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}


/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .nv-rec-card {
        flex-basis: 122px !important;
        width: 122px !important;
        min-width: 122px !important;
    }

    .nv-rec-cover {
        height: 170px !important;
    }

    #nvRecPrev {
        left: -8px !important;
    }

    #nvRecNext {
        right: -8px !important;
    }
}
/* =========================================================
   You May Also Like - Bigger cards + tighter title/meta
   Add at the END of style.css
========================================================= */

/* 横向间距略微加大 */
.nv-recommend-scroll {
    gap: 16px !important;
    padding: 0 2px 14px !important;
}

/* 卡片整体同比例放大 */
.nv-rec-card {
    flex: 0 0 144px !important;
    width: 144px !important;
    min-width: 144px !important;
    border-radius: 11px !important;
}

/* 封面同比例放大 */
.nv-rec-cover {
    height: 202px !important;
    border-radius: 11px 11px 0 0 !important;
}

/* 小说名：取消过高固定高度，压紧下面的 ch */
.nv-rec-title {
    margin: 8px 9px 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;

    /* 关键：不要让标题区域固定撑太高 */
    height: auto !important;
    min-height: 16px !important;
    max-height: 33px !important;

    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
}

/* 章节数和评分：往上收紧 */
.nv-rec-meta {
    margin: 4px 9px 10px !important;
    padding: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
}

.nv-rec-meta span,
.nv-rec-meta em {
    font-size: 11.5px !important;
    line-height: 1.1 !important;
}

/* 状态角标也跟着稍微变大 */
.nv-rec-status {
    top: 8px !important;
    left: 8px !important;
    min-height: 19px !important;
    padding: 4px 8px !important;
    font-size: 10.5px !important;
}

/* 箭头根据新卡片高度下移一点，居中在封面中部 */
.nv-rec-arrow {
    top: 118px !important;
}

/* 滑动步长对应新版卡片尺寸 */
/* =========================================================
   You May Also Like - Wider and less tall cards
   Fix skinny card ratio
========================================================= */

/* 横向间距 */
.nv-recommend-scroll {
    gap: 15px !important;
    padding: 0 2px 14px !important;
}

/* 卡片加宽 */
.nv-rec-card {
    flex: 0 0 154px !important;
    width: 154px !important;
    min-width: 154px !important;
    border-radius: 11px !important;
}

/* 封面不要太高，比例更接近模板 */
.nv-rec-cover {
    height: 200px !important;
    border-radius: 11px 11px 0 0 !important;
}

/* 封面图片居中裁切 */
.nv-rec-cover img {
    object-fit: cover !important;
    object-position: center center !important;
}

/* 小说名放大一点，但保持紧凑 */
.nv-rec-title {
    margin: 8px 9px 0 !important;
    font-size: 13px !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    height: auto !important;
    min-height: 16px !important;
    max-height: 32px !important;
}

/* ch 和评分继续靠近标题 */
.nv-rec-meta {
    margin: 4px 9px 10px !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
}

/* 箭头位置跟随新的封面比例 */
.nv-rec-arrow {
    top: 116px !important;
}

/* 滚动步长适配新版尺寸 */
/* =========================================================
   Latest Series - Match section title + enlarge items
   Add at the END of style.css
========================================================= */

/* Latest Series 标题：和 You May Also Like 一样大 */
.nv-latest-series .nv-block-title {
    font-size: 17px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    color: #111827 !important;
    margin: 0 0 16px !important;
}

/* Latest Series 卡片整体留白稍微加大 */
.nv-latest-series {
    padding: 20px 20px 18px !important;
}

/* 列表两列之间和上下间距 */
.nv-latest-list {
    gap: 14px 18px !important;
}

/* 每一本书条目：高度加大 */
.nv-latest-item {
    min-height: 72px !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    gap: 12px !important;
}

/* 缩略图放大 */
.nv-latest-thumb {
    width: 52px !important;
    min-width: 52px !important;
    height: 68px !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    background: #e5e7eb !important;
}

.nv-latest-thumb img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

/* 文字区域 */
.nv-latest-body {
    min-width: 0 !important;
    flex: 1 !important;
}

/* 小说名放大 */
.nv-latest-name {
    font-size: 13.5px !important;
    line-height: 1.32 !important;
    font-weight: 800 !important;
    color: #111827 !important;
    max-height: 36px !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
}

/* ch/views 信息放大一点 */
.nv-latest-meta {
    margin-top: 7px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #7b8190 !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
}

.nv-latest-meta span {
    display: inline-flex !important;
    align-items: center !important;
    color: #7b8190 !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
}

.nv-latest-meta i {
    font-size: 11.5px !important;
    width: 13px !important;
    min-width: 13px !important;
    margin-right: 5px !important;
}

/* 右侧箭头居中且稍微明显 */
.nv-latest-arrow {
    font-size: 22px !important;
    color: #b6bdc9 !important;
    margin-left: 8px !important;
}
/* =========================================================
   NovelVersea Reader Page
   Full chapter reading page styles
   Add at the END of style.css
========================================================= */


/* =========================================================
   Base Reader Layout
========================================================= */

.nv-reader-body {
    background: #f5f6fa !important;
    color: #111827 !important;
}

.nv-reader-body.nv-modal-open {
    overflow: hidden !important;
}

.nv-reader-page {
    min-height: 100vh !important;
    background: #f5f6fa !important;
}

.nv-reader-container {
    width: 100% !important;
    max-width: 805px !important;
    margin: 0 auto !important;
}


/* =========================================================
   Reader Header
========================================================= */

.nv-reader-head {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 24px 0 14px !important;
}

.nv-reader-breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 13px !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.nv-reader-breadcrumb a {
    color: #6b7280 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.nv-reader-breadcrumb a:hover {
    color: #2563eb !important;
}

.nv-reader-breadcrumb i {
    font-size: 13px !important;
    color: #64748b !important;
}

.nv-reader-book-link {
    max-width: 230px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.nv-reader-title {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
}

.nv-reader-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 9px !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

.nv-reader-date i {
    font-size: 13px !important;
    color: #6b7280 !important;
}


/* =========================================================
   Top Navigation
========================================================= */

.nv-reader-nav-wrap {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04) !important;
}

.nv-reader-nav {
    height: 54px !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    gap: 16px !important;
}

.nv-reader-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: fit-content !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 7px !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.nv-reader-nav-btn i {
    font-size: 11px !important;
}

.nv-reader-nav-btn:hover {
    background: #e5e7eb !important;
    color: #111827 !important;
}

.nv-reader-prev {
    justify-self: start !important;
}

.nv-reader-next {
    justify-self: end !important;
    background: #2563eb !important;
    color: #ffffff !important;
}

.nv-reader-next:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

.nv-reader-progress {
    min-height: 30px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.nv-reader-progress:hover {
    background: #e5e7eb !important;
}

.nv-reader-progress i {
    font-size: 12px !important;
    color: #6b7280 !important;
}

.nv-reader-nav-btn.disabled,
.nv-reader-bottom-btn.disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}


/* =========================================================
   Main Reading Area
========================================================= */

.nv-reader-main {
    padding: 32px 0 54px !important;
}

.nv-reader-ad {
    margin-bottom: 20px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
    background: #e5e7eb !important;
}

.nv-reader-ad a,
.nv-reader-ad img {
    display: block !important;
    width: 100% !important;
}

.nv-reader-ad img {
    height: auto !important;
    min-height: 120px !important;
    object-fit: cover !important;
}

.nv-reader-card {
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
    padding: 30px 28px !important;
}

.nv-reader-content {
    color: #1f2937 !important;
    font-size: 18px;
    line-height: 1.9 !important;
    font-weight: 400 !important;
    word-break: break-word !important;
}

.nv-reader-content p {
    margin: 0 0 25px !important;
}

.nv-reader-content p:last-child {
    margin-bottom: 0 !important;
}


/* =========================================================
   Bottom Navigation
========================================================= */

.nv-reader-bottom-nav {
    display: grid !important;
    grid-template-columns: 1fr 46px 1fr !important;
    gap: 18px !important;
    align-items: center !important;
    margin-top: 28px !important;
}

.nv-reader-bottom-btn,
.nv-reader-bottom-menu {
    height: 38px !important;
    border-radius: 8px !important;
    border: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.nv-reader-bottom-prev {
    background: #f3f4f6 !important;
    color: #374151 !important;
}

.nv-reader-bottom-prev:hover {
    background: #e5e7eb !important;
}

.nv-reader-bottom-next {
    background: #2563eb !important;
    color: #ffffff !important;
}

.nv-reader-bottom-next:hover {
    background: #1d4ed8 !important;
}

.nv-reader-bottom-menu {
    background: #f3f4f6 !important;
    color: #4b5563 !important;
}

.nv-reader-bottom-menu:hover {
    background: #e5e7eb !important;
}


/* =========================================================
   Floating Buttons
========================================================= */

.nv-reader-float-tools {
    position: fixed !important;
    right: 24px !important;
    bottom: 32px !important;
    z-index: 900 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.nv-reader-float-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: #ffffff !important;
    color: #4b5563 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16) !important;
    transition: all 0.2s ease !important;
}

.nv-reader-float-btn:hover {
    transform: translateY(-2px) !important;
    color: #2563eb !important;
}

.nv-reader-float-primary {
    background: #2563eb !important;
    color: #ffffff !important;
}

.nv-reader-float-primary:hover {
    background: #1d4ed8 !important;
    color: #ffffff !important;
}


/* =========================================================
   Modal Overlay
========================================================= */

.nv-reader-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 980 !important;
    background: rgba(0, 0, 0, 0.48) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.2s ease !important;
}

.nv-reader-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.nv-reader-modal {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    z-index: 990 !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, -48%) scale(0.98) !important;
    transition: all 0.22s ease !important;
}

.nv-reader-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) scale(1) !important;
}

.nv-modal-head {
    height: 58px !important;
    padding: 0 18px !important;
    border-bottom: 1px solid #eef0f4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.nv-modal-head h3 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.nv-modal-head h3 i {
    color: #2563eb !important;
    font-size: 16px !important;
}

.nv-modal-close {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: transparent !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.nv-modal-close:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}


/* =========================================================
   Settings Modal
========================================================= */

.nv-settings-modal {
    width: 380px !important;
    max-width: calc(100vw - 32px) !important;
}

.nv-settings-body {
    padding: 18px !important;
}

.nv-setting-row {
    margin-bottom: 22px !important;
}

.nv-setting-label {
    margin-bottom: 11px !important;
    color: #111827 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.nv-font-control {
    display: grid !important;
    grid-template-columns: 36px 1fr 36px !important;
    gap: 12px !important;
    align-items: center !important;
}

.nv-font-btn {
    width: 36px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #f3f4f6 !important;
    color: #374151 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.nv-font-btn:hover {
    background: #e5e7eb !important;
}

.nv-font-slider-track input {
    width: 100% !important;
    accent-color: #2563eb !important;
}

.nv-theme-options {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
}

.nv-theme-btn {
    height: 48px !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.nv-theme-btn[data-theme="sepia"] {
    background: #f5ead7 !important;
}

.nv-theme-btn[data-theme="dark"] {
    background: #111827 !important;
    color: #ffffff !important;
}

.nv-theme-btn[data-theme="green"] {
    background: #dff4df !important;
}

.nv-theme-btn.active {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16) !important;
}

.nv-reader-preview {
    padding: 16px 14px !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    color: #111827 !important;
    font-size: 18px;
    line-height: 1.6 !important;
}

.nv-reset-reader {
    width: 100% !important;
    height: 34px !important;
    border: 0 !important;
    background: transparent !important;
    color: #374151 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.nv-reset-reader:hover {
    color: #2563eb !important;
}


/* =========================================================
   Chapter Modal
========================================================= */

.nv-chapter-modal {
    width: 510px !important;
    max-width: calc(100vw - 32px) !important;
    max-height: 72vh !important;
    display: flex !important;
    flex-direction: column !important;
}

.nv-chapter-modal-head {
    flex: 0 0 auto !important;
}

.nv-chapter-modal-title {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-width: 0 !important;
}

.nv-chapter-modal-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 9px !important;
    background: #2563eb !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.nv-chapter-modal-title h3 {
    margin: 0 !important;
    color: #111827 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    max-width: 340px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.nv-chapter-modal-title p {
    margin: 3px 0 0 !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 600 !important;
}

.nv-chapter-modal-tools {
    flex: 0 0 auto !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #eef0f4 !important;
}

.nv-chapter-modal-tools input {
    width: 100% !important;
    height: 38px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #f9fafb !important;
    color: #111827 !important;
    font-size: 13px !important;
    padding: 0 12px !important;
    outline: none !important;
}

.nv-chapter-modal-tools input:focus {
    border-color: #2563eb !important;
    background: #ffffff !important;
}

.nv-reader-chapter-list {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 14px 16px 16px !important;
}

.nv-reader-chapter-item {
    min-height: 54px !important;
    padding: 9px 10px !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #111827 !important;
    text-decoration: none !important;
    margin-bottom: 8px !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
}

.nv-reader-chapter-item:hover {
    background: #eef4ff !important;
    border-color: #dbeafe !important;
}

.nv-reader-chapter-item.active {
    background: #eef4ff !important;
    border-color: #2563eb !important;
}

.nv-reader-chapter-num {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    background: #e5e7eb !important;
    color: #6b7280 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.nv-reader-chapter-item.active .nv-reader-chapter-num {
    background: #2563eb !important;
    color: #ffffff !important;
}

.nv-reader-chapter-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

.nv-reader-chapter-info strong {
    color: #111827 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.nv-reader-chapter-info em {
    color: #6b7280 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-style: normal !important;
    white-space: nowrap !important;
}


/* =========================================================
   Reader Themes
========================================================= */

/* Default */
body[data-reader-theme="default"] {
    background: #f5f6fa !important;
}

body[data-reader-theme="default"] .nv-reader-page,
body[data-reader-theme="default"] .nv-reader-main {
    background: #f5f6fa !important;
}

body[data-reader-theme="default"] .nv-reader-card {
    background: #ffffff !important;
}

body[data-reader-theme="default"] .nv-reader-content {
    color: #1f2937 !important;
}

/* Sepia */
body[data-reader-theme="sepia"],
body[data-reader-theme="sepia"] .nv-reader-page,
body[data-reader-theme="sepia"] .nv-reader-main {
    background: #f4ead8 !important;
}

body[data-reader-theme="sepia"] .nv-reader-card {
    background: #fff7e8 !important;
    border-color: #eadcc4 !important;
}

body[data-reader-theme="sepia"] .nv-reader-content {
    color: #3f2f1f !important;
}

/* Dark */
body[data-reader-theme="dark"],
body[data-reader-theme="dark"] .nv-reader-page,
body[data-reader-theme="dark"] .nv-reader-main {
    background: #0f172a !important;
}

body[data-reader-theme="dark"] .nv-reader-head,
body[data-reader-theme="dark"] .nv-reader-nav-wrap {
    background: #111827 !important;
    border-color: #1f2937 !important;
}

body[data-reader-theme="dark"] .nv-reader-card {
    background: #111827 !important;
    border-color: #1f2937 !important;
}

body[data-reader-theme="dark"] .nv-reader-title,
body[data-reader-theme="dark"] .nv-reader-content {
    color: #e5e7eb !important;
}

body[data-reader-theme="dark"] .nv-reader-breadcrumb,
body[data-reader-theme="dark"] .nv-reader-breadcrumb a,
body[data-reader-theme="dark"] .nv-reader-date {
    color: #9ca3af !important;
}

/* Green */
body[data-reader-theme="green"],
body[data-reader-theme="green"] .nv-reader-page,
body[data-reader-theme="green"] .nv-reader-main {
    background: #eaf6ea !important;
}

body[data-reader-theme="green"] .nv-reader-card {
    background: #f7fff5 !important;
    border-color: #d7ead4 !important;
}

body[data-reader-theme="green"] .nv-reader-content {
    color: #1f3a24 !important;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 900px) {
    .nv-reader-container {
        max-width: calc(100% - 32px) !important;
    }

    .nv-reader-float-tools {
        right: 16px !important;
        bottom: 24px !important;
    }
}

@media (max-width: 640px) {
    .nv-reader-head {
        padding: 18px 0 12px !important;
    }

    .nv-reader-title {
        font-size: 20px !important;
    }

    .nv-reader-nav {
        grid-template-columns: 1fr auto 1fr !important;
        gap: 8px !important;
    }

    .nv-reader-nav-btn {
        padding: 0 10px !important;
        font-size: 12px !important;
    }

    .nv-reader-progress {
        padding: 0 9px !important;
        font-size: 12px !important;
    }

    .nv-reader-main {
        padding: 22px 0 46px !important;
    }

    .nv-reader-card {
        padding: 24px 18px !important;
    }

    .nv-reader-content {
        font-size: 17px;
        line-height: 1.85 !important;
    }

    .nv-reader-content p {
        margin-bottom: 22px !important;
    }

    .nv-reader-bottom-nav {
        grid-template-columns: 1fr 42px 1fr !important;
        gap: 10px !important;
    }

    .nv-reader-bottom-btn,
    .nv-reader-bottom-menu {
        height: 38px !important;
        font-size: 12px !important;
    }

    .nv-reader-float-btn {
        width: 42px !important;
        height: 42px !important;
    }

    .nv-theme-options {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .nv-chapter-modal {
        max-height: 78vh !important;
    }

    .nv-reader-chapter-info {
        display: block !important;
    }

    .nv-reader-chapter-info strong {
        display: block !important;
        margin-bottom: 5px !important;
    }
}
/* =========================
   Reader page width optimize
   ========================= */

.nv-reader-container {
    max-width: 1180px;
}

.nv-reader-card {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.nv-reader-content {
    max-width: 100%;
}

/* 顶部广告区域，如果广告图存在，也跟随加宽 */
.nv-reader-ad {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.nv-reader-ad img {
    width: 100%;
    display: block;
}

/* 底部导航宽度跟正文对齐 */
.nv-reader-bottom-nav {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

/* Previous 按钮颜色加深，不要太浅 */
.nv-reader-prev,
.nv-reader-bottom-prev {
    background: #e8edff;
    color: #3154d4;
    border: 1px solid #c8d3ff;
}

.nv-reader-prev:hover,
.nv-reader-bottom-prev:hover {
    background: #dbe4ff;
    color: #2345c7;
}

/* disabled 状态仍然保持灰，但比之前清楚一点 */
.nv-reader-nav-btn.disabled,
.nv-reader-bottom-btn.disabled {
    background: #f1f3f8 !important;
    color: #9aa3b8 !important;
    border-color: #e0e4ee !important;
    cursor: not-allowed;
    opacity: 1;
}

/* 顶部中间章节进度样式 */
.nv-reader-progress span {
    min-width: 54px;
    text-align: center;
    display: inline-block;
}

/* 章节弹窗去掉搜索后，顶部间距更紧凑 */
.nv-chapter-modal-tools {
    display: none !important;
}

/* 章节弹窗稍微宽一点 */
.nv-chapter-modal {
    width: 460px;
    max-width: calc(100vw - 32px);
}
/* =========================================================
   NovelVersea Search Page
   搜索页样式
   ========================================================= */

.nv-search-body {
    background: #f5f7fb;
}

.nv-search-page {
    min-height: 70vh;
    background: #f5f7fb;
}

.nv-search-container {
    max-width: 1180px;
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
}

/* Search Hero */
.nv-search-hero {
    background: #ffffff;
    border-bottom: 1px solid #e8ecf5;
    padding: 28px 0 34px;
}

.nv-search-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8791a7;
    font-size: 13px;
    margin-bottom: 20px;
}

.nv-search-breadcrumb a {
    color: #6f7b93;
    text-decoration: none;
}

.nv-search-breadcrumb a:hover {
    color: #315be8;
}

.nv-search-hero-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.nv-search-title-block {
    flex: 1;
    min-width: 0;
}

.nv-search-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eef3ff;
    color: #315be8;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

.nv-search-title-block h1 {
    margin: 0;
    color: #121a31;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
}

.nv-search-title-block p {
    margin: 10px 0 0;
    color: #69758d;
    font-size: 15px;
}

/* Search Form */
.nv-search-form {
    width: 480px;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.nv-search-input-wrap {
    flex: 1;
    height: 48px;
    background: #f4f6fb;
    border: 1px solid #e4e9f3;
    border-radius: 14px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    transition: all 0.2s ease;
}

.nv-search-input-wrap:focus-within {
    background: #ffffff;
    border-color: #9eb4ff;
    box-shadow: 0 8px 22px rgba(49, 91, 232, 0.12);
}

.nv-search-input-wrap i {
    color: #9aa5b8;
    font-size: 14px;
    margin-right: 10px;
}

.nv-search-input-wrap input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #121a31;
    font-size: 14px;
}

.nv-search-input-wrap input::placeholder {
    color: #a2abbc;
}

.nv-search-form button {
    height: 48px;
    border: 0;
    border-radius: 14px;
    padding: 0 22px;
    background: #315be8;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 24px rgba(49, 91, 232, 0.22);
    transition: all 0.2s ease;
}

.nv-search-form button:hover {
    background: #244dde;
    transform: translateY(-1px);
}

/* Main */
.nv-search-main {
    padding: 30px 0 48px;
}

.nv-search-panel {
    background: #ffffff;
    border: 1px solid #e8ecf5;
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(20, 31, 58, 0.06);
    overflow: hidden;
}

.nv-search-panel-head {
    padding: 24px 26px;
    border-bottom: 1px solid #edf1f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.nv-search-panel-head h2 {
    margin: 0;
    color: #121a31;
    font-size: 22px;
    font-weight: 800;
}

.nv-search-panel-head p {
    margin: 8px 0 0;
    color: #69758d;
    font-size: 14px;
}

.nv-search-panel-head p strong {
    color: #315be8;
}

.nv-search-count {
    min-width: 96px;
    padding: 10px 14px;
    background: #f4f7ff;
    border: 1px solid #e1e8ff;
    border-radius: 14px;
    text-align: center;
}

.nv-search-count span {
    display: block;
    color: #315be8;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
}

.nv-search-count em {
    display: block;
    margin-top: 3px;
    color: #71809c;
    font-size: 12px;
    font-style: normal;
}

/* Result List */
.nv-search-list {
    padding: 10px 0;
}

.nv-search-item {
    display: flex;
    gap: 20px;
    padding: 22px 26px;
    border-bottom: 1px solid #edf1f7;
    transition: background 0.2s ease;
}

.nv-search-item:hover {
    background: #fafbff;
}

.nv-search-item:last-child {
    border-bottom: 0;
}

.nv-search-cover {
    width: 96px;
    height: 132px;
    flex: 0 0 96px;
    border-radius: 12px;
    overflow: hidden;
    background: #eef1f7;
    box-shadow: 0 8px 20px rgba(20, 31, 58, 0.12);
}

.nv-search-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Info */
.nv-search-info {
    flex: 1;
    min-width: 0;
}

.nv-search-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.nv-search-item-top h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 800;
}

.nv-search-item-top h3 a {
    color: #121a31;
    text-decoration: none;
}

.nv-search-item-top h3 a:hover {
    color: #315be8;
}

.nv-search-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef3ff;
    color: #315be8;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.nv-search-desc {
    margin: 0;
    color: #4b5870;
    font-size: 14px;
    line-height: 1.75;
    max-height: 74px;
    overflow: hidden;
}

.nv-search-meta {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    color: #7a869d;
    font-size: 13px;
}

.nv-search-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nv-search-meta i {
    color: #9aa5b8;
}

.nv-search-actions {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nv-search-btn {
    min-height: 36px;
    padding: 0 15px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: all 0.2s ease;
}

.nv-search-btn-primary {
    background: #315be8;
    color: #ffffff;
    border: 1px solid #315be8;
    box-shadow: 0 8px 18px rgba(49, 91, 232, 0.18);
}

.nv-search-btn-primary:hover {
    background: #244dde;
    border-color: #244dde;
    color: #ffffff;
    transform: translateY(-1px);
}

.nv-search-btn-light {
    background: #f2f5fb;
    color: #34425d;
    border: 1px solid #e2e7f1;
}

.nv-search-btn-light:hover {
    background: #e8edff;
    color: #315be8;
    border-color: #c8d5ff;
}

/* Empty */
.nv-search-empty {
    display: none;
    min-height: 280px;
    padding: 48px 24px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    border-top: 1px solid #edf1f7;
}

.nv-search-empty-icon {
    width: 70px;
    height: 70px;
    border-radius: 22px;
    background: #f0f4ff;
    color: #315be8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 18px;
}

.nv-search-empty h3 {
    margin: 0;
    color: #121a31;
    font-size: 22px;
    font-weight: 800;
}

.nv-search-empty p {
    margin: 10px 0 0;
    color: #707c93;
    font-size: 14px;
}

.nv-search-empty-btn {
    margin-top: 20px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    background: #315be8;
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 800;
}

/* Pagination */
.nv-search-pagination {
    padding: 22px 26px 26px;
    border-top: 1px solid #edf1f7;
    display: flex;
    justify-content: center;
}

.nv-search-pagination ul,
.nv-search-pagination .page,
.nv-search-pagination .pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nv-search-pagination a,
.nv-search-pagination span {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 10px;
    background: #f4f6fb;
    border: 1px solid #e3e8f2;
    color: #536078;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
}

.nv-search-pagination a:hover,
.nv-search-pagination .on,
.nv-search-pagination span.on {
    background: #315be8;
    border-color: #315be8;
    color: #ffffff;
}

/* Responsive */
@media (max-width: 900px) {
    .nv-search-hero-inner {
        align-items: stretch;
        flex-direction: column;
    }

    .nv-search-form {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .nv-search-container {
        width: calc(100% - 24px);
    }

    .nv-search-hero {
        padding: 22px 0 28px;
    }

    .nv-search-title-block h1 {
        font-size: 28px;
    }

    .nv-search-form {
        flex-direction: column;
        gap: 10px;
    }

    .nv-search-input-wrap,
    .nv-search-form button {
        width: 100%;
    }

    .nv-search-panel-head {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .nv-search-count {
        width: 100%;
        text-align: left;
    }

    .nv-search-item {
        padding: 20px;
        gap: 16px;
    }

    .nv-search-cover {
        width: 82px;
        height: 114px;
        flex-basis: 82px;
    }

    .nv-search-item-top {
        flex-direction: column;
        gap: 8px;
    }

    .nv-search-item-top h3 {
        font-size: 17px;
    }

    .nv-search-desc {
        font-size: 13px;
        line-height: 1.65;
        max-height: 66px;
    }

    .nv-search-actions {
        flex-wrap: wrap;
    }
}
/* =========================================================
   NovelVersea Search Page
   搜索页样式 - Webnovel inspired layout
   ========================================================= */

.nv-search-body {
    background: #f5f7fb;
}

.nv-search-page {
    min-height: 70vh;
    background: #f5f7fb;
}

.nv-search-container {
    max-width: 1180px;
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
}

/* Search Hero */
.nv-search-hero {
    background: #ffffff;
    border-bottom: 1px solid #e8ecf5;
    padding: 28px 0 34px;
}

.nv-search-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8791a7;
    font-size: 13px;
    margin-bottom: 20px;
}

.nv-search-breadcrumb a {
    color: #6f7b93;
    text-decoration: none;
}

.nv-search-breadcrumb a:hover {
    color: #315be8;
}

.nv-search-hero-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

.nv-search-title-block {
    flex: 1;
    min-width: 0;
}

.nv-search-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eef3ff;
    color: #315be8;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
}

.nv-search-title-block h1 {
    margin: 0;
    color: #121a31;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
}

.nv-search-title-block p {
    margin: 10px 0 0;
    color: #69758d;
    font-size: 15px;
}

/* Search Form */
.nv-search-form {
    width: 480px;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.nv-search-input-wrap {
    flex: 1;
    height: 48px;
    background: #f4f6fb;
    border: 1px solid #e4e9f3;
    border-radius: 14px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    transition: all 0.2s ease;
}

.nv-search-input-wrap:focus-within {
    background: #ffffff;
    border-color: #9eb4ff;
    box-shadow: 0 8px 22px rgba(49, 91, 232, 0.12);
}

.nv-search-input-wrap i {
    color: #9aa5b8;
    font-size: 14px;
    margin-right: 10px;
}

.nv-search-input-wrap input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #121a31;
    font-size: 14px;
}

.nv-search-input-wrap input::placeholder {
    color: #a2abbc;
}

.nv-search-form button {
    height: 48px;
    border: 0;
    border-radius: 14px;
    padding: 0 22px;
    background: #315be8;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 24px rgba(49, 91, 232, 0.22);
    transition: all 0.2s ease;
}

.nv-search-form button:hover {
    background: #244dde;
    transform: translateY(-1px);
}

/* Main */
.nv-search-main {
    padding: 30px 0 48px;
}

.nv-search-panel {
    background: #ffffff;
    border: 1px solid #e8ecf5;
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(20, 31, 58, 0.06);
    overflow: hidden;
}

.nv-search-panel-head {
    padding: 24px 26px;
    border-bottom: 1px solid #edf1f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.nv-search-panel-head h2 {
    margin: 0;
    color: #121a31;
    font-size: 22px;
    font-weight: 800;
}

.nv-search-panel-head p {
    margin: 8px 0 0;
    color: #69758d;
    font-size: 14px;
}

.nv-search-panel-head p strong {
    color: #315be8;
}

.nv-search-count {
    min-width: 96px;
    padding: 10px 14px;
    background: #f4f7ff;
    border: 1px solid #e1e8ff;
    border-radius: 14px;
    text-align: center;
}

.nv-search-count span {
    display: block;
    color: #315be8;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
}

.nv-search-count em {
    display: block;
    margin-top: 3px;
    color: #71809c;
    font-size: 12px;
    font-style: normal;
}

/* Result List */
.nv-search-list {
    padding: 8px 0;
}

.nv-search-item {
    display: flex;
    gap: 16px;
    padding: 18px 26px;
    border-bottom: 1px solid #edf1f7;
    transition: background 0.2s ease;
}

.nv-search-item:hover {
    background: #fafbff;
}

.nv-search-item:last-child {
    border-bottom: 0;
}

.nv-search-cover {
    width: 88px;
    height: 122px;
    flex: 0 0 88px;
    border-radius: 8px;
    overflow: hidden;
    background: #eef1f7;
    box-shadow: 0 8px 20px rgba(20, 31, 58, 0.12);
}

.nv-search-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Info */
.nv-search-info {
    flex: 1;
    min-width: 0;
}

.nv-search-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.nv-search-item-top h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 800;
}

.nv-search-item-top h3 a {
    color: #121a31;
    text-decoration: none;
}

.nv-search-item-top h3 a:hover {
    color: #315be8;
}

.nv-search-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef3ff;
    color: #315be8;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.nv-search-rating {
    height: 18px;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.nv-search-stars {
    color: #c7cbd6;
    font-size: 12px;
    letter-spacing: 1px;
}

.nv-search-desc {
    margin: 0;
    color: #263143;
    font-size: 14px;
    line-height: 1.6;
    max-height: 46px;
    overflow: hidden;
}

/* Tags line under description */
.nv-search-tags {
    margin-top: 9px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nv-search-tags span {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #f0f4ff;
    border: 1px solid #cdd9ff;
    color: #315be8;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

/* Meta */
.nv-search-meta {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    color: #7a869d;
    font-size: 13px;
}

.nv-search-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nv-search-meta i {
    color: #9aa5b8;
}

.nv-search-actions {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nv-search-btn {
    min-height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: all 0.2s ease;
}

.nv-search-btn-primary {
    background: #315be8;
    color: #ffffff;
    border: 1px solid #315be8;
    box-shadow: 0 8px 18px rgba(49, 91, 232, 0.18);
}

.nv-search-btn-primary:hover {
    background: #244dde;
    border-color: #244dde;
    color: #ffffff;
    transform: translateY(-1px);
}

.nv-search-btn-light {
    background: #f2f5fb;
    color: #34425d;
    border: 1px solid #e2e7f1;
}

.nv-search-btn-light:hover {
    background: #e8edff;
    color: #315be8;
    border-color: #c8d5ff;
}

/* Empty */
.nv-search-empty {
    display: none;
    min-height: 280px;
    padding: 48px 24px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    border-top: 1px solid #edf1f7;
}

.nv-search-empty-icon {
    width: 70px;
    height: 70px;
    border-radius: 22px;
    background: #f0f4ff;
    color: #315be8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 18px;
}

.nv-search-empty h3 {
    margin: 0;
    color: #121a31;
    font-size: 22px;
    font-weight: 800;
}

.nv-search-empty p {
    margin: 10px 0 0;
    color: #707c93;
    font-size: 14px;
}

.nv-search-empty-btn {
    margin-top: 20px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    background: #315be8;
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 800;
}

/* Responsive */
@media (max-width: 900px) {
    .nv-search-hero-inner {
        align-items: stretch;
        flex-direction: column;
    }

    .nv-search-form {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .nv-search-container {
        width: calc(100% - 24px);
    }

    .nv-search-hero {
        padding: 22px 0 28px;
    }

    .nv-search-title-block h1 {
        font-size: 28px;
    }

    .nv-search-form {
        flex-direction: column;
        gap: 10px;
    }

    .nv-search-input-wrap,
    .nv-search-form button {
        width: 100%;
    }

    .nv-search-panel-head {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
    }

    .nv-search-count {
        width: 100%;
        text-align: left;
    }

    .nv-search-item {
        padding: 18px 20px;
        gap: 14px;
    }

    .nv-search-cover {
        width: 76px;
        height: 106px;
        flex-basis: 76px;
    }

    .nv-search-item-top {
        flex-direction: column;
        gap: 8px;
    }

    .nv-search-item-top h3 {
        font-size: 17px;
    }

    .nv-search-desc {
        font-size: 13px;
        line-height: 1.55;
        max-height: 42px;
    }

    .nv-search-meta {
        display: none;
    }

    .nv-search-actions {
        flex-wrap: wrap;
    }
}
/* =========================================================
   NovelVersea Search Page
   ========================================================= */

.nv-search-body {
    background: #f5f7fb;
}

.nv-search-page {
    background: #f5f7fb;
}

.nv-search-container {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
}

/* Hero */
.nv-search-hero {
    padding: 34px 0 28px;
    background:
        radial-gradient(circle at top left, rgba(49, 91, 232, 0.12), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
}

.nv-search-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: #9aa4b8;
    font-size: 13px;
    font-weight: 700;
}

.nv-search-breadcrumb a {
    color: #315be8;
    text-decoration: none;
}

.nv-search-hero-inner {
    background: #ffffff;
    border: 1px solid #edf1f7;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
    display: grid;
    grid-template-columns: 1fr 430px;
    gap: 28px;
    align-items: center;
}

.nv-search-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eef3ff;
    color: #315be8;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 13px;
}

.nv-search-title-block h1 {
    margin: 0;
    color: #111827;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.nv-search-title-block p {
    margin: 12px 0 0;
    color: #69758b;
    font-size: 15px;
    line-height: 1.7;
}

/* Search form */
.nv-search-form {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nv-search-input-wrap {
    flex: 1;
    height: 48px;
    border-radius: 15px;
    background: #f5f7fc;
    border: 1px solid #e7ecf6;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 10px;
}

.nv-search-input-wrap i {
    color: #a7b0c2;
    font-size: 14px;
}

.nv-search-input-wrap input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
}

.nv-search-input-wrap input::placeholder {
    color: #a7b0c2;
}

.nv-search-form button {
    height: 48px;
    border: 0;
    border-radius: 15px;
    padding: 0 20px;
    background: #315be8;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    box-shadow: 0 12px 22px rgba(49, 91, 232, 0.18);
    transition: all 0.18s ease;
}

.nv-search-form button:hover {
    background: #244dde;
    transform: translateY(-1px);
}

/* Main */
.nv-search-main {
    padding: 0 0 38px;
}

.nv-search-panel {
    background: #ffffff;
    border: 1px solid #edf1f7;
    border-radius: 0 0 18px 18px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
}

.nv-search-panel-head {
    padding: 22px 26px;
    border-bottom: 1px solid #edf1f7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.nv-search-panel-head h2 {
    margin: 0;
    color: #111827;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.nv-search-panel-head p {
    margin: 7px 0 0;
    color: #7b8599;
    font-size: 13px;
    font-weight: 700;
}

.nv-search-panel-head strong {
    color: #315be8;
}

.nv-search-count {
    min-width: 92px;
    height: 50px;
    border-radius: 16px;
    background: #f5f7fc;
    border: 1px solid #e8edf7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nv-search-count span {
    color: #111827;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
}

.nv-search-count em {
    margin-top: 4px;
    color: #8b95aa;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

/* List */
.nv-search-list {
    display: flex;
    flex-direction: column;
}

.nv-search-item {
    display: grid;
    grid-template-columns: 94px 1fr;
    gap: 18px;
    padding: 22px 26px;
    border-bottom: 1px solid #edf1f7;
    background: #ffffff;
    transition: background 0.18s ease;
}

.nv-search-item:hover {
    background: #fbfcff;
}

.nv-search-cover {
    width: 94px;
    height: 126px;
    border-radius: 10px;
    overflow: hidden;
    background: #eef1f7;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
    display: block;
}

.nv-search-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Info */
.nv-search-info {
    min-width: 0;
}

.nv-search-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.nv-search-item-top h3 {
    margin: 0;
    color: #111827;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 900;
}

.nv-search-item-top h3 a {
    color: inherit;
    text-decoration: none;
}

.nv-search-item-top h3 a:hover {
    color: #315be8;
}

.nv-search-status {
    flex: 0 0 auto;
    height: 27px;
    padding: 0 10px;
    border-radius: 999px;
    background: #eef3ff;
    color: #315be8;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.nv-search-rating {
    margin-top: 6px;
}

.nv-search-stars {
    color: #f59e0b;
    font-size: 12px;
    letter-spacing: 1px;
}

.nv-search-desc {
    margin: 9px 0 0;
    color: #4b5568;
    font-size: 13px;
    line-height: 1.7;
}

/* Tags */
.nv-search-tags {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nv-search-tags span {
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #eef3ff;
    color: #315be8;
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
}

/* Meta */
.nv-search-meta {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: #7b8599;
    font-size: 12px;
    font-weight: 700;
}

.nv-search-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nv-search-meta i {
    color: #b3bbca;
}

/* Actions */
.nv-search-actions {
    margin-top: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nv-search-btn {
    height: 32px;
    padding: 0 13px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    transition: all 0.18s ease;
}

.nv-search-btn-primary {
    background: #315be8;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(49, 91, 232, 0.15);
}

.nv-search-btn-primary:hover {
    background: #244dde;
    transform: translateY(-1px);
}

.nv-search-btn-light {
    background: #f5f7fc;
    color: #4b5568;
    border: 1px solid #e4eaf5;
}

.nv-search-btn-light:hover {
    background: #eef3ff;
    color: #315be8;
}

/* Empty */
.nv-search-empty {
    display: none;
    min-height: 280px;
    padding: 52px 24px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    border-bottom: 1px solid #edf1f7;
}

.nv-search-empty-icon {
    width: 70px;
    height: 70px;
    border-radius: 22px;
    background: #eef3ff;
    color: #315be8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 18px;
}

.nv-search-empty h3 {
    margin: 0;
    color: #111827;
    font-size: 22px;
    font-weight: 900;
}

.nv-search-empty p {
    margin: 10px 0 20px;
    color: #7b8599;
    font-size: 14px;
}

.nv-search-empty-btn {
    height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    background: #315be8;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
}

/* =========================================================
   Search Pagination - Same Style as Category Page
   ========================================================= */

.nv-search-pagination {
    padding: 24px 26px 28px;
    border-top: 1px solid #edf1f7;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 原始 MCCMS 分页容器 */
.nv-search-page-source {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* JS 生成的新分页 */
.nv-search-page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 单个分页按钮 */
.nv-search-page-numbers .nv-page-item,
.nv-search-page-source a,
.nv-search-page-source span {
    min-width: 28px;
    height: 28px;
    padding: 0 9px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #edf1f7;
    color: #7c869b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    transition: all 0.18s ease;
    box-sizing: border-box;
}

/* hover */
.nv-search-page-numbers a.nv-page-item:hover,
.nv-search-page-source a:hover {
    color: #111827;
    border-color: #d9e0ee;
    background: #f8fafc;
}

/* 当前页 */
.nv-search-page-numbers .nv-page-item.is-active,
.nv-search-page-source .on,
.nv-search-page-source .active,
.nv-search-page-source .current {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12);
}

/* 禁用按钮 */
.nv-search-page-numbers .nv-page-item.is-disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* 省略号 */
.nv-search-page-numbers .nv-page-dots {
    border-color: transparent;
    background: transparent;
    padding: 0 2px;
    min-width: auto;
    color: #9ca3af;
}

/* 上一页/下一页 */
.nv-search-page-numbers .nv-page-prev,
.nv-search-page-numbers .nv-page-next {
    font-size: 16px;
    font-weight: 800;
    padding-bottom: 1px;
}

/* 隐藏原始 select */
.nv-search-pagination select {
    display: none !important;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 860px) {
    .nv-search-hero-inner {
        grid-template-columns: 1fr;
    }

    .nv-search-form {
        flex-direction: column;
        align-items: stretch;
    }

    .nv-search-form button {
        justify-content: center;
    }

    .nv-search-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .nv-search-container {
        width: min(100% - 22px, 1120px);
    }

    .nv-search-hero {
        padding: 22px 0 20px;
    }

    .nv-search-hero-inner {
        padding: 20px;
        border-radius: 18px;
    }

    .nv-search-title-block h1 {
        font-size: 27px;
    }

    .nv-search-item {
        grid-template-columns: 74px 1fr;
        gap: 13px;
        padding: 18px 16px;
    }

    .nv-search-cover {
        width: 74px;
        height: 102px;
        border-radius: 9px;
    }

    .nv-search-item-top {
        display: block;
    }

    .nv-search-status {
        margin-top: 8px;
    }

    .nv-search-item-top h3 {
        font-size: 15px;
    }

    .nv-search-desc {
        font-size: 12px;
        line-height: 1.6;
    }

    .nv-search-meta {
        gap: 8px;
        font-size: 11px;
    }

    .nv-search-actions {
        flex-wrap: wrap;
    }

    .nv-search-page-numbers {
        gap: 6px;
        flex-wrap: wrap;
    }

    .nv-search-page-numbers .nv-page-item {
        min-width: 27px;
        height: 27px;
        padding: 0 8px;
        border-radius: 7px;
        font-size: 11px;
    }
}
/* =========================================================
   NovelVersea Header User / Auth Modal
   ========================================================= */

.nl-user {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Login button */
.nl-login-btn {
    height: 38px;
    padding: 0 22px;
    border: 0;
    border-radius: 10px;
    background: #315be8;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(49, 91, 232, 0.18);
    transition: all 0.18s ease;
}

.nl-login-btn:hover {
    background: #244dde;
    color: #ffffff;
    transform: translateY(-1px);
}

/* User menu */
.nl-user-menu {
    position: relative;
}

.nl-user-avatar-btn {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff6b35 0%, #ef4444 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(239, 68, 68, 0.18);
    transition: all 0.18s ease;
}

.nl-user-avatar-btn:hover {
    transform: translateY(-1px);
}

.nl-user-avatar-btn span {
    color: #ffffff;
    font-size: 16px;
    line-height: 1;
    font-weight: 900;
}

.nl-user-avatar-btn img,
.nl-user-dropdown-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dropdown */
.nl-user-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 230px;
    background: #ffffff;
    border: 1px solid #edf1f7;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.18s ease;
    z-index: 9999;
}

.nl-user-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nl-user-dropdown::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 15px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-left: 1px solid #edf1f7;
    border-top: 1px solid #edf1f7;
    transform: rotate(45deg);
}

.nl-user-dropdown-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px 12px;
}

.nl-user-dropdown-avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff6b35 0%, #ef4444 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    overflow: hidden;
}

.nl-user-dropdown-avatar span {
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
}

.nl-user-dropdown-head strong {
    display: block;
    color: #111827;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 900;
}

.nl-user-dropdown-head p {
    margin: 4px 0 0;
    color: #8b95aa;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 700;
}

.nl-user-dropdown-link {
    height: 36px;
    padding: 0 10px;
    border-radius: 9px;
    color: #374151;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: all 0.16s ease;
}

.nl-user-dropdown-link:hover {
    background: #f5f7fc;
    color: #315be8;
}

.nl-user-dropdown-line {
    height: 1px;
    background: #edf1f7;
    margin: 8px 0;
}

.nl-user-logout {
    color: #ef4444;
}

.nl-user-logout:hover {
    background: #fff1f2;
    color: #ef4444;
}

/* Modal */
.nl-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}

.nl-auth-modal.is-open {
    display: flex;
}

.nl-auth-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.nl-auth-open {
    overflow: hidden;
}

.nl-auth-card {
    position: relative;
    z-index: 2;
    width: min(356px, calc(100% - 34px));
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.25);
    padding: 23px 20px 21px;
    animation: nlAuthPop 0.22s ease both;
}

@keyframes nlAuthPop {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.nl-auth-close {
    position: absolute;
    top: 12px;
    right: 13px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
}

.nl-auth-back {
    position: absolute;
    top: 17px;
    left: 17px;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.nl-auth-panel {
    display: none;
}

.nl-auth-panel.is-active {
    display: block;
}

.nl-auth-logo {
    width: 42px;
    height: 42px;
    margin: 0 auto 14px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(49, 91, 232, 0.18);
}

.nl-auth-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nl-auth-panel h2 {
    margin: 0;
    color: #111827;
    text-align: center;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
}

.nl-auth-subtitle {
    margin: 5px 0 18px;
    color: #9aa4b8;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
}

.nl-auth-form {
    display: flex;
    flex-direction: column;
}

.nl-auth-message {
    display: none;
    margin: 0 0 12px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.nl-auth-message.is-error {
    display: block;
    background: #fff1f2;
    color: #e11d48;
    border: 1px solid #fecdd3;
}

.nl-auth-message.is-success {
    display: block;
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #bbf7d0;
}

.nl-auth-message.is-info {
    display: block;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.nl-auth-form label {
    margin: 0 0 7px;
    color: #374151;
    font-size: 12px;
    font-weight: 800;
}

.nl-auth-form input {
    width: 100%;
    height: 43px;
    margin: 0 0 13px;
    padding: 0 13px;
    border: 1px solid #d9dee8;
    border-radius: 6px;
    background: #ffffff;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
    transition: all 0.18s ease;
}

.nl-auth-form input::placeholder {
    color: #a5adbc;
}

.nl-auth-form input:focus {
    border-color: #315be8;
    box-shadow: 0 0 0 3px rgba(49, 91, 232, 0.12);
}

.nl-auth-submit {
    width: 100%;
    height: 42px;
    margin-top: 3px;
    border: 0;
    border-radius: 6px;
    background: #315be8;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: all 0.18s ease;
}

.nl-auth-submit:hover {
    background: #244dde;
}

.nl-auth-submit:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

.nl-auth-register-btn {
    margin-top: 5px;
}

/* Divider */
.nl-auth-divider {
    position: relative;
    margin: 16px 0 14px;
    text-align: center;
}

.nl-auth-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: #e5e7eb;
}

.nl-auth-divider span {
    position: relative;
    z-index: 1;
    padding: 0 10px;
    background: #ffffff;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
}

/* Google */
.nl-google-login {
    height: 36px;
    border: 1px solid #d9dee8;
    border-radius: 6px;
    background: #ffffff;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: all 0.18s ease;
}

.nl-google-login:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #111827;
}

.nl-google-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nl-google-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Switch */
.nl-auth-switch {
    margin-top: 18px;
    text-align: center;
}

.nl-auth-switch p {
    margin: 0;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
}

.nl-auth-switch button {
    margin-top: 4px;
    border: 0;
    background: transparent;
    color: #38bdf8;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 520px) {
    .nl-auth-card {
        width: calc(100% - 26px);
        padding: 22px 17px 20px;
    }

    .nl-auth-panel h2 {
        font-size: 17px;
    }

    .nl-auth-form input {
        height: 42px;
    }

    .nl-login-btn {
        height: 36px;
        padding: 0 16px;
        font-size: 13px;
    }

    .nl-user-avatar-btn {
        width: 36px;
        height: 36px;
    }

    .nl-user-dropdown {
        right: -8px;
        width: 220px;
    }
}
/* ==============================
   NovelVersea User Avatar Menu
   ============================== */

.nl-user {
    position: relative;
    display: flex;
    align-items: center;
}

.nl-user-menu {
    position: relative;
}

.nl-user-avatar-btn {
    width: 40px;
    height: 40px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nl-user-avatar-btn img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.35);
}

.nl-user-avatar-default {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6c5ce7 0%, #8e5cff 45%, #4f8cff 100%);
    box-shadow: 0 8px 18px rgba(108, 92, 231, 0.28);
    border: 2px solid #ffffff;
}

.nl-user-avatar-default svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nl-user-dropdown {
    position: absolute;
    top: 52px;
    right: 0;
    width: 240px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
    border: 1px solid rgba(226, 232, 240, 0.9);
    padding: 0;
    overflow: hidden;
    display: none;
    z-index: 9999;
}

.nl-user-dropdown.is-open {
    display: block;
}

.nl-user-dropdown-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 16px;
    border-bottom: 1px solid #eef2f7;
}

.nl-user-dropdown-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    overflow: hidden;
}

.nl-user-dropdown-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.nl-user-dropdown-avatar .nl-user-avatar-default {
    width: 48px;
    height: 48px;
    border: 0;
}

.nl-user-dropdown-avatar .nl-user-avatar-default svg {
    width: 28px;
    height: 28px;
}

.nl-user-dropdown-head strong {
    display: block;
    max-width: 145px;
    font-size: 14px;
    line-height: 1.25;
    color: #111827;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nl-user-dropdown-head p {
    max-width: 145px;
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.25;
    color: #7b8494;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nl-user-dropdown-link {
    display: block;
    padding: 13px 18px;
    font-size: 14px;
    color: #1f2937;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}

.nl-user-dropdown-link:hover {
    background: #f7f8ff;
    color: #4f46e5;
}

.nl-user-dropdown-line {
    height: 1px;
    background: #eef2f7;
    margin: 4px 0;
}

.nl-user-logout {
    color: #ef4444;
}

.nl-user-logout:hover {
    background: #fff1f2;
    color: #dc2626;
}
/* ==============================
   Login/User State Force Control
   ============================== */

/* 默认：未登录，显示 Login，隐藏头像菜单 */
#nlUserArea .nl-login-btn {
    display: inline-flex;
}

#nlUserArea .nl-user-menu {
    display: none;
}

/* 登录后：隐藏 Login，显示头像菜单 */
#nlUserArea.is-logged-in .nl-login-btn {
    display: none !important;
}

#nlUserArea.is-logged-in .nl-user-menu {
    display: block !important;
}

/* 未登录强制状态 */
#nlUserArea.is-guest .nl-login-btn {
    display: inline-flex !important;
}

#nlUserArea.is-guest .nl-user-menu {
    display: none !important;
}
/* 下拉菜单项目垂直居中修正 */
.nl-user-dropdown-link {
    min-height: 42px;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
    box-sizing: border-box;
}

/* 分割线距离收紧，避免 Sign Out 看起来太靠下 */
.nl-user-dropdown-line {
    margin: 0 !important;
}

/* 让退出按钮视觉更居中、更干净 */
.nl-user-logout {
    min-height: 42px;
    display: flex !important;
    align-items: center !important;
    color: #ef4444;
}
/* ==============================
   Login/User State Force Control
   ============================== */

#nlUserArea .nl-login-btn {
    display: inline-flex;
}

#nlUserArea .nl-user-menu {
    display: none;
}

#nlUserArea.is-logged-in .nl-login-btn {
    display: none !important;
}

#nlUserArea.is-logged-in .nl-user-menu {
    display: block !important;
}

#nlUserArea.is-guest .nl-login-btn {
    display: inline-flex !important;
}

#nlUserArea.is-guest .nl-user-menu {
    display: none !important;
}

/* 下拉菜单项目垂直居中修正 */
.nl-user-dropdown-link {
    min-height: 42px;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
    box-sizing: border-box;
}

.nl-user-dropdown-line {
    margin: 0 !important;
}

.nl-user-logout {
    min-height: 42px;
    display: flex !important;
    align-items: center !important;
    color: #ef4444;
}
/* ==============================
   NovelVersea Library Page
   Separated CSS Version
   ============================== */

body {
    background: #f7f8fb;
}

.library-page {
    min-height: calc(100vh - 76px);
    background: #f7f8fb;
    padding: 28px 0 96px;
}

/* 
   参考站当前 1024 宽截图下，内容区约 797px。
   这里固定宽度做像素级还原。
*/
.library-shell {
    width: 1200px;
    margin: 0 auto;
}

/* Library 顶部标题区域 */
.library-head {
    margin-bottom: 24px;
}

.library-title-line {
    display: flex;
    align-items: center;
    gap: 12px;
}

.library-head-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: linear-gradient(135deg, #8b2cff 0%, #6d39ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.24);
}

.library-head-icon svg {
    width: 21px;
    height: 21px;
    display: block;
}

.library-head-icon path {
    fill: #ffffff;
}

.library-title-line h1 {
    margin: 0;
    color: #121827;
    font-size: 26px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.035em;
}

.library-head > p {
    margin: 7px 0 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.4;
}


.library-content {
    width: 100%;
}

.library-empty {
    width: 100%;
    min-height: 300px;
    background: #ffffff;
    border-radius: 7px;
    border: 1px solid #f0f2f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 42px 20px;
    box-sizing: border-box;
}

.library-empty-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.library-empty-icon svg {
    width: 35px;
    height: 35px;
    display: block;
}

.library-empty-icon .book-fill {
    fill: #d1d5de;
}

.library-empty-icon .book-line {
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.library-empty h2 {
    margin: 0 0 8px;
    color: #4b5568;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.library-empty p {
    margin: 0 0 18px;
    color: #7a8396;
    font-size: 13px;
    line-height: 1.4;
}

.library-empty-btn {
    min-width: 108px;
    height: 34px;
    border-radius: 6px;
    background: #315cf6;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    box-shadow: 0 8px 18px rgba(49, 92, 246, 0.18);
    box-sizing: border-box;
}

.library-empty-btn:hover {
    background: #244ce0;
}

/* 有收藏时：5列，一页10本 */
.library-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px 16px;
}

.library-card {
    position: relative;
    background: #ffffff;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid #eef1f6;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.library-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
}

.library-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.library-cover {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #edf0f6;
    overflow: hidden;
}

.library-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.35s ease;
}

.library-card:hover .library-cover img {
    transform: scale(1.055);
}

.library-card-body {
    padding: 10px 10px 11px;
}

.library-card-body h3 {
    margin: 0 0 9px;
    color: #111827;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 800;
    height: 32px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.library-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #697386;
    font-size: 12px;
    line-height: 1.2;
    margin-bottom: 6px;
}

.library-progress-row em {
    font-style: normal;
    white-space: nowrap;
}

.library-progress-bar {
    width: 100%;
    height: 4px;
    border-radius: 99px;
    background: #edf0f5;
    overflow: hidden;
}

.library-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
}

.library-remove {
    position: absolute;
    z-index: 5;
    top: 8px;
    right: 8px;
    width: 27px;
    height: 27px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px) scale(0.92);
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.15);
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.library-card:hover .library-remove {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.library-remove:hover {
    background: #ef4444;
    color: #ffffff;
}

.library-remove svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.library-remove svg path:first-child {
    fill: currentColor;
    stroke: none;
}

.library-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 34px;
}

.library-page-btn {
    min-width: 31px;
    height: 31px;
    border: 1px solid #e3e8f1;
    border-radius: 7px;
    background: #ffffff;
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.library-page-btn.is-active {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

.library-page-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.library-page-dot {
    color: #6b7280;
    font-size: 13px;
    padding: 0 3px;
}

/* 响应式 */
@media (max-width: 900px) {
    .library-shell {
        width: calc(100vw - 40px);
    }

    .library-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 520px) {
    .library-shell {
        width: calc(100vw - 28px);
    }

    .library-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .library-head-text h1 {
        font-size: 23px;
    }
}
/* ==============================
   Detail Page Library Button State
   ============================== */

.nv-btn-secondary.nv-library-toggle {
    gap: 6px;
}

.nv-btn-secondary.nv-library-toggle.is-in-library {
    background: #34a853 !important;
    border-color: #34a853 !important;
    color: #ffffff !important;
}

.nv-btn-secondary.nv-library-toggle.is-in-library:hover {
    background: #2f984b !important;
    border-color: #2f984b !important;
    color: #ffffff !important;
}

.nv-btn-secondary.nv-library-toggle.is-in-library i {
    color: #ffffff !important;
    font-size: 13px;
}
/* =========================================================
   NovelVersea Instant Auth State Fix
   防止登录用户首屏先显示 Login 再变头像
   ========================================================= */

/* 本地判断为已登录时：首屏直接隐藏 Login */
html.nl-instant-logged-in #nlUserArea .nl-login-btn {
    display: none !important;
}

/* 本地判断为已登录时：首屏直接显示用户菜单 */
html.nl-instant-logged-in #nlUserArea .nl-user-menu {
    display: block !important;
}

/* 本地判断为已登录时：用户区域按登录态处理 */
html.nl-instant-logged-in #nlUserArea {
    display: flex !important;
    align-items: center !important;
}

/* 本地判断为游客时：显示 Login */
html.nl-instant-guest #nlUserArea .nl-login-btn {
    display: inline-flex !important;
}

/* 本地判断为游客时：隐藏头像菜单 */
html.nl-instant-guest #nlUserArea .nl-user-menu {
    display: none !important;
}

/* 防止原始 is-guest class 抢样式 */
html.nl-instant-logged-in #nlUserArea.is-guest .nl-login-btn {
    display: none !important;
}

html.nl-instant-logged-in #nlUserArea.is-guest .nl-user-menu {
    display: block !important;
}
/* =========================================================
   NovelVersea User Avatar - Refined Style
   ========================================================= */

.nl-user-avatar-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 999px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 6px 18px rgba(15, 23, 42, 0.08),
        0 1px 2px rgba(15, 23, 42, 0.08);
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.nl-user-avatar-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow:
        0 10px 24px rgba(99, 102, 241, 0.16),
        0 2px 6px rgba(15, 23, 42, 0.08);
}

.nl-user-avatar-btn img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 999px;
}

/* 默认头像如果是透明或很旧的 user.png，给它一点现代感 */
.nl-user-avatar-btn img[src*="user.png"],
.nl-user-dropdown-avatar img[src*="user.png"] {
    padding: 7px;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.2) 38%, transparent 39%),
        linear-gradient(135deg, #eef2ff 0%, #dbeafe 45%, #f5d0fe 100%);
    object-fit: contain;
}

/* 下拉菜单里的大头像 */
.nl-user-dropdown-avatar {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.nl-user-dropdown-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 999px;
}

/* 下拉菜单顶部排版微调 */
.nl-user-dropdown-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nl-user-dropdown-head strong {
    display: block;
    max-width: 170px;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nl-user-dropdown-head p {
    max-width: 170px;
    margin: 3px 0 0;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* =========================================================
   NovelVersea Static Policy Pages
   privacy.html / terms.html
========================================================= */

.nv-static-page {
    background: #f7f8fb;
    min-height: 100vh;
    color: #263238;
}

.nv-static-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.nv-static-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.nv-static-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #111827;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}

.nv-static-logo img {
    width: 34px;
    height: 34px;
    display: block;
}

.nv-static-logo span {
    line-height: 1;
}

.nv-static-nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.nv-static-nav a {
    color: #4b5563;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.nv-static-nav a:hover {
    color: #111827;
}

.nv-static-main {
    max-width: 980px;
    margin: 40px auto 70px;
    padding: 0 20px;
    box-sizing: border-box;
}

.nv-static-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 42px 48px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    line-height: 1.75;
}

.nv-static-card h1 {
    margin: 0 0 12px;
    font-size: 34px;
    line-height: 1.25;
    color: #111827;
    font-weight: 800;
}

.nv-static-updated {
    margin-bottom: 32px;
    color: #7b8190;
    font-size: 14px;
}

.nv-static-card h2 {
    margin-top: 34px;
    margin-bottom: 12px;
    font-size: 22px;
    color: #111827;
    font-weight: 700;
}

.nv-static-card p {
    margin: 0 0 16px;
    color: #374151;
    font-size: 15px;
}

.nv-static-card ul {
    margin: 0 0 18px 22px;
    padding: 0;
}

.nv-static-card li {
    margin-bottom: 8px;
    color: #374151;
    font-size: 15px;
}

.nv-static-footer-spacer {
    margin-top: 50px;
}

@media (max-width: 768px) {
    .nv-static-header-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .nv-static-nav {
        flex-wrap: wrap;
        gap: 12px 18px;
    }

    .nv-static-main {
        margin: 28px auto 50px;
        padding: 0 14px;
    }

    .nv-static-card {
        padding: 28px 22px;
        border-radius: 14px;
    }

    .nv-static-card h1 {
        font-size: 28px;
    }

    .nv-static-card h2 {
        font-size: 20px;
    }
}