/*
Theme Name: Madara-Child
Description:  A child theme for Madara - WordPress Theme for Manga, Novel sites
Author:       Madara
Author URI:   https://mangabooth.com/
Template: madara
Tags: one-column, two-columns, right-sidebar, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Version: 1.0.5
*/


/* =============================================================================
   NK DESIGN SYSTEM — Dark Theme Variables (GitHub-dark inspired)
   These variables drive the entire colour palette. To adjust the site's
   look-and-feel, change values here — every component references them.
   ============================================================================= */
:root {
    /* Backgrounds — muted, low-contrast layers for minimal depth */
    --nk-bg-main: #0d1117;
    --nk-bg-header: #0d1117;
    --nk-bg-surface: #161b22;
    --nk-bg-elevated: #1c2128;
    --nk-bg-inset: #010409;

    /* Borders — barely-there separators */
    --nk-border: #30363d;
    --nk-border-muted: #21262d;

    /* Text */
    --nk-text-primary: #e6edf3;
    --nk-text-secondary: #8b949e;
    --nk-text-link: #58a6ff;

    /* Accent */
    --nk-accent: var(--madara-main-color, #58a6ff);

    /* Radius scale */
    --nk-radius-sm: 6px;
    --nk-radius: 8px;
    --nk-radius-lg: 12px;

    /* Transitions */
    --nk-ease: 150ms ease;
}

html,
body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* =============================================================================
   NK HEADER — Custom Header Styles
   All classes use nk- prefix to avoid conflicts with Madara / Bootstrap.
   ============================================================================= */

/* --- 1. STICKY HEADER BASE --- */
:root {
    --nk-header-height: 65px;
    --nk-google-top-gap: 0px;
    --nk-google-bottom-gap: 0px;
    --nk-bottom-anchor-offset: 0px;
}

body.nk-has-site-header {
    overflow-x: hidden;
}

body.nk-has-site-header .body-wrap {
    padding-top: var(--nk-header-height);
}

.nk-header {
    position: relative;
    top: 0;
    z-index: 9999;
    background: var(--nk-bg-header);
    border-bottom: 1px solid var(--nk-border-muted);
    transition: transform 0.25s ease;
}

body.nk-has-site-header .nk-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

body.admin-bar.nk-has-site-header .nk-header {
    top: 32px;
}

body.admin-bar.nk-has-site-header .body-wrap {
    padding-top: calc(var(--nk-header-height) + 32px);
}

@media (max-width: 782px) {
    body.admin-bar.nk-has-site-header .nk-header {
        top: 46px;
    }

    body.admin-bar.nk-has-site-header .body-wrap {
        padding-top: calc(var(--nk-header-height) + 46px);
    }
}

/* Fallback for browsers without backdrop-filter — no longer needed */

/* Hide-on-scroll-down state (toggled by JS) */
.nk-header.nk-header--hidden {
    transform: translateY(-100%);
}

/* Reader pages use their own sticky reading toolbar. Keep the site header
   in normal document flow there so the two headers never compete. */
body.nk-reader-page .nk-header {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
}

body.nk-reader-page .nk-header.nk-header--hidden {
    transform: none;
}

/* --- 2. HEADER INNER CONTAINER --- */
.nk-header__inner {
    max-width: 1152px;
    margin: 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 24px;
}

@media (min-width: 640px) {
    .nk-header__inner {
        padding: 0 24px;
    }
}

@media (min-width: 1024px) {
    .nk-header__inner {
        padding: 0 32px;
    }
}

/* --- 3. LOGO --- */
.nk-header__logo {
    flex-shrink: 0;
}

.nk-logo {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    color: inherit !important;
}

.nk-logo__img {
    width: auto;
    height: 32px;
    border-radius: var(--nk-radius-sm);
    transition: opacity var(--nk-ease);
}

.nk-logo:hover .nk-logo__img {
    opacity: 0.85;
}

.nk-logo__text {
    margin-left: 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--nk-text-primary);
    white-space: nowrap;
}

/* --- 4. DESKTOP NAVIGATION --- */
.nk-header__nav {
    display: none;
    /* No margin-left here — .nk-header__inner gap:24px already provides
       the spacing between logo and nav. The old margin-left:24px was
       doubling it to 48px. */
}

@media (min-width: 768px) {
    .nk-header__nav {
        display: flex;
        align-items: center;
        flex: 1; /* Grow to fill middle — pushes search+actions to the right edge */
    }
}

/* Reset WordPress menu output */
.nk-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nk-nav li {
    position: relative;
}

.nk-nav>li>a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--nk-text-secondary) !important;
    text-decoration: none !important;
    border-radius: var(--nk-radius-sm);
    transition: color var(--nk-ease);
    white-space: nowrap;
}

.nk-nav>li>a:hover,
.nk-nav>li.current-menu-item>a,
.nk-nav>li.current-menu-ancestor>a {
    color: var(--nk-text-primary) !important;
}

/* Sub-menus (dropdowns) */
.nk-nav li .sub-menu {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 192px;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    background: var(--nk-bg-surface);
    border: 1px solid var(--nk-border-muted);
    border-radius: var(--nk-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 4px 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transform-origin: top left;
    transition: opacity var(--nk-ease), transform var(--nk-ease), visibility var(--nk-ease);
    z-index: 9998;
}

/*
 * Multi-column dropdown for nav items with the .col3 class.
 * WordPress/Madara's menu walker adds .col3 to items with many children.
 * Without this, 26 genre links form a single column that extends far
 * below the viewport. Grid layout keeps it compact and scannable.
 */
.nk-nav li.col3 .sub-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    min-width: 380px;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: 6px;
    column-gap: 0;
}

.nk-nav li.col3 .sub-menu li {
    width: auto;
    /* Override any parent-theme 33.33% width rules */
}

.nk-nav li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nk-nav li .sub-menu a {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--nk-text-primary) !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nk-nav li .sub-menu a:hover {
    background-color: var(--nk-bg-elevated);
    color: var(--nk-text-primary) !important;
}

/* --- 5. DESKTOP SEARCH --- */
.nk-header__search {
    display: none;
    flex: 0 0 auto; /* Fixed width — does not grow/shrink with the nav */
    min-width: 0;
    width: 280px; /* Consistent right-side width regardless of menu length */
    max-width: 320px;
}

@media (min-width: 768px) {
    .nk-header__search {
        display: flex;
        /* Must be flex (not block) so inner form fills width */
        align-items: center;
    }
}

.nk-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    /* Fill .nk-header__search (flex container) */
}

.nk-search__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nk-text-secondary);
    pointer-events: none;
    z-index: 1;
}

.nk-search__input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 8px 36px 8px 40px;
    border: 1px solid var(--nk-border);
    border-radius: 8px;
    background: var(--nk-bg-inset);
    font-size: 14px;
    line-height: 1.5;
    color: var(--nk-text-primary);
    outline: none;
    cursor: text;
    pointer-events: auto;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nk-search__input::placeholder {
    color: var(--nk-text-secondary);
}

.nk-search__input:focus {
    border-color: var(--nk-accent);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.1);
}

.nk-search__loader {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.nk-search.loading .nk-search__loader {
    display: block;
}

/*
 * Suppress parent theme's adjacent-sibling-based loader rule for our forms.
 * Parent: input.ui-autocomplete-loading + input[type="submit"] + .loader-inner { display:block }
 * Our DOM has input[type="hidden"] (not submit) so the sibling chain never
 * matches, but the complementary hide rule can still leak in. Override it.
 */
.nk-header .nk-search.manga-search-form .loader-inner {
    display: none;
}

.nk-header .nk-search.manga-search-form.loading .nk-search__loader {
    display: block;
}

/* Flatten input bottom corners when autocomplete dropdown is open */
.nk-search.ac-open .nk-search__input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.nk-search.ac-open .ui-autocomplete {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: none;
    margin-top: 0;
}

/* --- 5b. SEARCH AUTOCOMPLETE DROPDOWN (jQuery UI) ---
   Madara's script.js appends the .ui-autocomplete <ul> inside the <form>
   (appendTo: $(input).parent()). The form has position:relative so the
   dropdown positions relative to it. */
.nk-search .ui-autocomplete {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 6px;
    padding: 4px;
    list-style: none;
    background: var(--nk-bg-surface);
    border: 1px solid var(--nk-border-muted);
    border-radius: var(--nk-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 10001;
}

.nk-search .ui-autocomplete>li {
    margin: 0;
    padding: 0;
}

.nk-search .ui-autocomplete>li.search-item {
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--nk-text-primary);
    transition: background-color 0.15s ease;
}

.nk-search .ui-autocomplete>li.search-item:hover,
.nk-search .ui-autocomplete>li.ui-state-active,
.nk-search .ui-autocomplete>li.ui-state-focus {
    background: var(--nk-bg-elevated);
    color: var(--nk-text-primary);
}

.nk-search .ui-autocomplete>li.search-item div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nk-search .ui-autocomplete .manga-text-highlight {
    font-weight: 700;
    color: var(--nk-accent);
}

/* Hide jQuery UI helper-hidden-accessible within our forms */
.nk-search .ui-helper-hidden-accessible {
    display: none !important;
}

/* --- 6. DESKTOP RIGHT ACTIONS --- */
.nk-header__actions {
    display: none;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .nk-header__actions {
        display: flex;
    }
}

/* NK Buttons (used in header actions) */
.nk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--nk-radius-sm);
    cursor: pointer;
    text-decoration: none !important;
    transition: color var(--nk-ease), background-color var(--nk-ease);
    white-space: nowrap;
    border: none;
}

.nk-btn--text {
    background: transparent;
    color: var(--nk-text-secondary) !important;
}

.nk-btn--text:hover {
    color: var(--nk-accent) !important;
}

.nk-btn--primary {
    background: var(--nk-accent);
    color: #fff !important;
}

.nk-btn--primary:hover {
    opacity: 0.85;
}

.nk-btn--outline {
    background: transparent;
    border: 1px solid var(--nk-accent);
    color: var(--nk-accent) !important;
}

.nk-btn--outline:hover {
    background: var(--nk-accent);
    color: #fff !important;
}

/* --- 6b. AUTH WRAPPER — Consistent sizing for both guest and logged-in states --- */
.nk-auth {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    /* Lock height to match button/toggle heights */
    flex-shrink: 0;
    overflow: visible;
    /* Allow dropdown to overflow */
    position: relative;
}

/* Guest auth: two buttons side by side */
.nk-auth--guest {
    gap: 8px;
}

/* Logged-in auth: contains Madara's .c-user_item */
.nk-auth--user {
    gap: 0;
}

/*
 * Override Madara parent theme .c-user_item layout within NK header.
 * Parent uses: .c-user_item > * { display: inline-block; vertical-align: middle }
 * We need: flex alignment, overflow containment, consistent height.
 */
.nk-auth--user .c-user_item {
    display: flex !important;
    align-items: center;
    gap: 8px;
    height: 40px;
    white-space: nowrap;
    cursor: pointer;
}

/* "Hi, Username" text */
.nk-auth--user .c-user_item>span {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: var(--nk-text-secondary) !important;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.4;
}

/* Avatar container — relative for dropdown positioning */
.nk-auth--user .c-user_avatar {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Avatar image wrapper */
.nk-auth--user .c-user_avatar-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}

/* Avatar img — fixed size, override parent's 36px with our own for certainty */
.nk-auth--user .c-user_avatar-image img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 2px solid var(--nk-border) !important;
    object-fit: cover;
    display: block;
    transition: border-color 0.2s ease;
}

.nk-auth--user .c-user_avatar:hover .c-user_avatar-image img {
    border-color: var(--nk-accent) !important;
}

/* Notification badge (usually hidden but style defensively) */
.nk-auth--user .c-user_notify {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    border-radius: 50%;
    z-index: 1;
}

/* User dropdown menu */
.nk-auth--user .c-user_menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 180px;
    max-width: 240px;
    background: var(--nk-bg-surface);
    border: 1px solid var(--nk-border-muted);
    border-radius: var(--nk-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 4px;
    list-style: none;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--nk-ease), visibility var(--nk-ease), transform var(--nk-ease);
    white-space: nowrap;
}

/* Invisible hover bridge between avatar and dropdown */
.nk-auth--user .c-user_menu::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

/* Show dropdown on hover */
.nk-auth--user .c-user_avatar:hover .c-user_menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown menu items */
.nk-auth--user .c-user_menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nk-auth--user .c-user_menu li a {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--nk-text-primary) !important;
    text-decoration: none !important;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
    line-height: 1.4;
}

.nk-auth--user .c-user_menu li a:hover {
    background: var(--nk-bg-elevated);
    color: var(--nk-text-primary) !important;
}

/* Suppress parent theme's ::after hover bridge (we replaced it) */
.nk-auth--user .c-user_menu::after {
    display: none !important;
}

/* Hide "Hi, Username" text on smaller desktops to save space */
@media (max-width: 1023px) {
    .nk-auth--user .c-user_item>span {
        display: none;
    }
}

/* --- 7. DARK MODE TOGGLE BUTTON --- */
.nk-darkmode-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--nk-text-secondary);
    cursor: pointer;
    transition: color var(--nk-ease);
}

.nk-darkmode-toggle:hover {
    color: #fbbf24;
}

.nk-darkmode-icon {
    width: 20px;
    height: 20px;
}

/* JS controls visibility via display property */
.nk-darkmode-icon--sun {
    display: none;
}

.nk-darkmode-icon--moon {
    display: block;
}

/* --- 8. MOBILE CONTROLS --- */
.nk-header__mobile {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

@media (min-width: 768px) {
    .nk-header__mobile {
        display: none;
    }
}

.nk-mobile-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--nk-text-secondary);
    cursor: pointer;
    transition: color var(--nk-ease);
}

.nk-mobile-btn:hover {
    color: var(--nk-text-primary);
}

.nk-mobile-btn.is-active {
    color: var(--nk-accent);
}

/* Hamburger icon (3 lines) */
.nk-hamburger {
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

.nk-hamburger__line {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nk-hamburger__line+.nk-hamburger__line {
    margin-top: 4px;
}

/* Animated X when panel is open.
   Uses aria-expanded="true" on #nk-hamburger (set by nk-header.js openPanel()).
   The old approach used .nk-mobile-panel.is-open ~ .nk-header__inner which
   never matched because .nk-header__inner precedes .nk-mobile-panel in the DOM. */
#nk-hamburger[aria-expanded="true"] .nk-hamburger__line:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}

#nk-hamburger[aria-expanded="true"] .nk-hamburger__line:nth-child(2) {
    opacity: 0;
}

#nk-hamburger[aria-expanded="true"] .nk-hamburger__line:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* --- 9. MOBILE SEARCH BAR (slide-down) ---
   Uses clip-path instead of overflow:hidden so autocomplete
   dropdown can escape the container vertically. The clip-path
   is removed when results are showing (via .ac-open class). */
.nk-mobile-search {
    max-height: 0;
    overflow: visible;
    transition: max-height 0.3s ease, border-color 0.3s ease;
    border-top: 1px solid transparent;
    /* Clip content when collapsed but allow overflow when open */
    clip-path: inset(0 0 100% 0);
}

@media (min-width: 768px) {
    .nk-mobile-search {
        display: none !important;
    }
}

.nk-mobile-search.is-open {
    max-height: 80px;
    border-top-color: var(--nk-border);
    clip-path: none;
}

.nk-mobile-search__inner {
    padding: 12px 16px;
    position: relative;
    /* Anchor for autocomplete dropdown */
}

.nk-mobile-search .nk-search__input {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 16px;
    /* Prevents iOS zoom on focus */
}

/* Mobile autocomplete dropdown.
   appendTo targets the form (position:relative inside .nk-mobile-search__inner
   which is also position:relative). The dropdown is position:absolute so it
   extends below the form and out of the 80px container (overflow:visible). */
.nk-mobile-search .ui-autocomplete {
    max-height: 50vh;
    margin-top: 4px;
    font-size: 15px;
    /* Slightly larger for touch targets */
}

/* --- 10. MOBILE PANEL (off-canvas from left) --- */
.nk-mobile-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
}

.nk-mobile-panel.is-open {
    display: block;
    pointer-events: auto;
}

@media (min-width: 768px) {

    .nk-mobile-panel,
    .nk-mobile-panel.is-open {
        display: none !important;
    }
}

.nk-mobile-panel__backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.nk-mobile-panel.is-open .nk-mobile-panel__backdrop {
    opacity: 1;
    pointer-events: auto;
}

.nk-mobile-panel__drawer {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: 80%;
    max-width: 320px;
    background: var(--nk-bg-surface);
    z-index: 9999;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--nk-border-muted);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}

.nk-mobile-panel__drawer::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.nk-mobile-panel.is-open .nk-mobile-panel__drawer {
    transform: translateX(0);
}

html.nk-mobile-panel-open,
body.nk-mobile-panel-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

body.nk-mobile-panel-open {
    position: static;
    width: auto;
}

.nk-mobile-panel__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(14px, env(safe-area-inset-top)) 16px 12px;
    border-bottom: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    position: sticky;
    top: 0;
    z-index: 2;
}

.nk-mobile-panel__title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nk-text-primary);
}

.nk-mobile-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--nk-text-primary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.nk-mobile-panel__close:hover {
    color: var(--nk-text-primary);
    opacity: 0.75;
}

/* --- 11. MOBILE PANEL — User Section --- */
.nk-panel-user {
    padding: 24px;
    text-align: center;
    border-bottom: 1px solid var(--nk-border);
}

.nk-panel-user__avatar {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
}

.nk-panel-user__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nk-panel-user__avatar--guest {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nk-bg-elevated);
    color: var(--nk-text-secondary);
}

.nk-panel-user__name {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--nk-text-primary);
}

.nk-panel-user__desc {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--nk-text-secondary);
}

.nk-panel-user__actions {
    display: flex;
    gap: 12px;
}

.nk-panel-user__actions .nk-btn {
    flex: 1;
    padding: 8px 16px;
    font-size: 14px;
}

/* --- 12. MOBILE PANEL — Navigation --- */
.nk-panel-nav {
    padding: 16px;
}

.nk-panel-nav__heading {
    margin: 0 0 12px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--nk-text-secondary);
}

.nk-panel-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nk-panel-menu li {
    margin: 0;
}

.nk-panel-menu>li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    border-top: 1px solid var(--nk-border-muted);
}

.nk-panel-menu>li:first-child {
    border-top: none;
}

.nk-panel-menu>li>a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--nk-text-primary) !important;
    text-decoration: none !important;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nk-panel-menu>li>a:hover {
    color: var(--nk-text-primary) !important;
}

.nk-panel-menu>li.current-menu-item>a {
    color: var(--nk-accent) !important;
}

/* Sub-menu in mobile panel */
.nk-panel-menu .sub-menu,
.nk-panel-menu .dropdown-menu,
.nk-panel-submenu {
    /* Override Bootstrap .dropdown-menu: position:absolute, float:left, border,
       min-width, background, box-shadow, etc. Our specificity (0-2-0) beats
       Bootstrap's single-class rule (0-1-0), no !important needed here. */
    position: static;
    float: none;
    min-width: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    z-index: auto;
    transform: none;
    /* Layout */
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
    grid-column: 1 / -1;
    /* Animated collapse — element stays in grid flow (no display:none so
       grid-column:1/-1 always applies), hidden via max-height + opacity */
    display: block;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease;
}

.nk-panel-menu .is-expanded>.sub-menu,
.nk-panel-menu .is-expanded>.dropdown-menu,
.nk-panel-menu .is-expanded>.nk-panel-submenu {
    opacity: 1;
    padding-bottom: 8px;
}

.nk-panel-menu .sub-menu li,
.nk-panel-menu .dropdown-menu li,
.nk-panel-submenu li {
    margin-top: 6px;
}

.nk-panel-menu .sub-menu a,
.nk-panel-menu .dropdown-menu a,
.nk-panel-submenu a {
    display: block;
    padding: 6px 12px;
    font-size: 13px;
    color: var(--nk-text-secondary) !important;
    text-decoration: none !important;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nk-panel-menu .sub-menu a:hover,
.nk-panel-menu .dropdown-menu a:hover,
.nk-panel-submenu a:hover {
    color: var(--nk-text-primary) !important;
}

.nk-panel-menu .dropdown-toggle::after,
.nk-panel-menu .menu-link.dropdown-toggle::after {
    display: none !important;
}

.nk-panel-menu__item--has-children>a {
    min-width: 0;
}

.nk-panel-submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--nk-text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.nk-panel-submenu-toggle:hover {
    color: var(--nk-text-primary);
    border-color: var(--nk-border);
    background: var(--nk-bg-elevated);
}

.nk-panel-submenu-toggle__icon {
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.2s ease;
}

.nk-panel-menu .is-expanded>.nk-panel-submenu-toggle .nk-panel-submenu-toggle__icon {
    transform: rotate(225deg) translateY(-1px);
}


/* =============================================================================
   NK HEADER — Madara Dark-Mode Class Compatibility
   Since the base theme is already dark, body.text-ui-dark / body.text-ui-light
   (Madara cookie toggle) only need minor alignment — no wholesale re-colouring.
   ============================================================================= */

/* Madara's text-ui-light class (confusingly = dark BG, light text) sets
   input { color:#f2f2f2; background:rgba(235,235,235,.2) } globally.
   Our NK header inputs already use --nk-* vars, but the parent rule's
   specificity (0,2,2) can override.  Pin our input colours. */
body.text-ui-light .nk-header .nk-search__input {
    background: var(--nk-bg-inset) !important;
    border-color: var(--nk-border) !important;
    color: var(--nk-text-primary) !important;
}

body.text-ui-light .nk-header .nk-search__input::placeholder {
    color: var(--nk-text-secondary) !important;
}

body.text-ui-light .nk-header .nk-search__icon {
    color: var(--nk-text-secondary) !important;
}

/* =============================================================================
   NK HEADER — Override / Suppress Parent Theme Header Conflicts
   The parent's .site-header styles may bleed into the new header if not scoped.
   These rules neutralize specific parent-theme declarations.
   ============================================================================= */

/* Prevent parent's forced white color on all header links */
.nk-header.site-header a,
.nk-header.site-header span {
    color: inherit !important;
}

/*
 * Suppress parent theme .c-user_item styles within NK header.
 * Parent sets: .c-user_item > * { display: inline-block; vertical-align: middle }
 * and various width/margin/padding on .c-user_avatar, .c-user_menu, img.
 * Our .nk-auth--user rules take full control via higher specificity + !important.
 */
.nk-header .nk-auth--user .c-user_item>* {
    display: flex !important;
    vertical-align: unset !important;
}

.nk-header .nk-auth--user .c-user_item>span {
    display: inline-block !important;
}

/* Prevent parent's margin-top on .c-user_menu (uses 12px gap) */
.nk-header .nk-auth--user .c-user_menu {
    margin-top: 8px !important;
    border-bottom: none !important;
    border-top: none !important;
}

/* Prevent parent navigation background from applying */
.nk-header .main-navigation {
    display: none !important;
}

/* Hide parent's search overlay, mobile nav, since we replaced them */
.nk-header .c-header__top,
.nk-header .search-main-menu {
    display: none !important;
}

/* Hide the parent's mobile-menu div if somehow still rendered */
.nk-header~.mobile-menu.off-canvas {
    display: none !important;
}

/* Ensure sub-header-nav (reading nav) still works below our header */
.c-sub-header-nav {
    position: relative;
    z-index: 9990;
}

/* Suppress parent theme autocomplete styles that conflict with ours */
.nk-header .manga-autocomplete.ui-autocomplete {
    /* Parent sets width: calc(100% - 130px) and margin-left: 15px for
       .site-header .c-header__top — override those */
    width: 100% !important;
    margin-left: 0 !important;
}

/* Prevent parent's .search-form, .manga-search-form default styles */
.nk-header .nk-search.manga-search-form {
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

/* Prevent parent theme overrides on our search input.
 * The parent has: body.text-ui-light input[type="text"] { color:#f2f2f2; background:rgba(235,235,235,.2) }
 * That rule's specificity (0,2,2) beats our base .nk-search__input (0,1,0).
 * Enforce our dark-theme vars with !important. */
.nk-header .nk-search__input.manga-search-field {
    color: var(--nk-text-primary) !important;
    background: var(--nk-bg-inset) !important;
    height: auto !important;
    line-height: 1.5 !important;
    padding: 8px 36px 8px 40px !important;
    font-size: 14px !important;
    cursor: text !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
    background-clip: padding-box !important;
}

/*
 * Suppress parent theme's global .site-header .c-header__top loader rule.
 * Parent hides .loader-inner inside .manga-search-form by default and only
 * shows it via the adjacent-sibling chain:
 *   input.ui-autocomplete-loading + input[type="submit"] + .loader-inner
 * Our DOM has input[type="hidden"] (not submit) so that chain never fires.
 * Without this suppression, .loader-inner in our form stays hidden even
 * when .loading class is set by our MutationObserver bridge.
 */
.nk-header form.nk-search .nk-search__loader>.loader-inner {
    display: block;
    /* Always shown when parent .nk-search__loader is visible */
}


/* --- END NK HEADER --- */


/* =============================================================================
   UNIVERSAL FULL-WIDTH LAYOUT — CSS Safety Net
   The PHP filter (madara_sidebar_setting → 'full') handles the logic, but
   these rules act as a backstop for any template or plugin that renders
   sidebar markup despite the filter.
   ============================================================================= */
.sidebar-col,
#main-sidebar,
.main-sidebar {
    display: none !important;
}

.main-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}


/* =============================================================================
   SITE-WIDE DARK THEME OVERRIDES
   Forces the dark palette across all Madara parent-theme surfaces.
   Uses the --nk-* design tokens defined in :root above.
   ============================================================================= */

/* --- A. BODY / PAGE BACKGROUND --- */
body {
    background-color: var(--nk-bg-main) !important;
    color: var(--nk-text-primary) !important;
}

.body-wrap,
.wrap {
    background-color: var(--nk-bg-main) !important;
}

/* --- B. TYPOGRAPHY — System font stack with Inter for a clean, modern feel --- */
body,
body p,
body span,
body li {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    color: var(--nk-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--nk-text-primary) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
}

a {
    color: var(--nk-text-link);
    transition: color var(--nk-ease);
}

a:hover {
    color: var(--nk-accent);
}

/* --- C. CONTENT AREA --- */
.site-content {
    background-color: transparent;
}

.c-page-content {
    background-color: transparent !important;
    color: var(--nk-text-primary) !important;
}

.c-page .c-page__content {
    color: var(--nk-text-primary);
}

/* --- D. CARDS / WIDGETS / PANELS --- */
.widget>.c-widget-wrap,
.widget.background>.c-widget-wrap {
    background-color: var(--nk-bg-surface) !important;
    border-color: var(--nk-border) !important;
}

.widget:not(.default):not(.background)>.c-widget-wrap {
    border-color: var(--nk-border) !important;
}

.widget .widget-title,
.widget .c-widget__header h4 {
    color: var(--nk-text-primary) !important;
}

/* Popular item wraps */
.widget.c-popular .popular-item-wrap {
    border-color: var(--nk-border) !important;
}

/* Tabs (Trending / Popular / Latest etc.) */
.nav-tabs {
    border-bottom-color: var(--nk-border) !important;
}

.nav-tabs>li>a {
    color: var(--nk-text-secondary) !important;
}

.nav-tabs>li>a:hover,
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    color: var(--nk-text-primary) !important;
    background-color: var(--nk-bg-surface) !important;
    border-color: var(--nk-border) var(--nk-border) transparent !important;
}

.tab-content {
    background-color: var(--nk-bg-surface) !important;
    border-color: var(--nk-border) !important;
}

/* Listing items / manga cards */
.page-content-listing .page-listing-item {
    background-color: transparent;
}

.page-item-detail .item-summary .post-title h3 a,
.page-item-detail .item-summary .post-title h5 a {
    color: var(--nk-text-primary) !important;
}

.page-item-detail .item-summary .post-title h3 a:hover,
.page-item-detail .item-summary .post-title h5 a:hover {
    color: var(--nk-accent) !important;
}

/* Chapter lists on listing pages */
.page-item-detail .item-summary .list-chapter .chapter-item a {
    color: var(--nk-text-secondary) !important;
}

.page-item-detail .item-summary .list-chapter .chapter-item a:hover {
    color: var(--nk-accent) !important;
}

.page-item-detail .item-summary .rating .score {
    color: var(--nk-text-secondary) !important;
}

/* --- E. SIDEBAR --- */
#main-sidebar {
    color: var(--nk-text-primary);
}

#main-sidebar .widget {
    color: var(--nk-text-primary);
}

#main-sidebar .search-main-menu form input[type="text"],
#main-sidebar .widget.widget_search input[type="search"] {
    background-color: var(--nk-bg-inset) !important;
    border: 1px solid var(--nk-border) !important;
    color: var(--nk-text-primary) !important;
}

#main-sidebar .widget_search input[type="submit"] {
    border-left: 1px solid var(--nk-border) !important;
}

/* --- F. BREADCRUMBS --- */
.c-breadcrumb .breadcrumb {
    background-color: transparent !important;
}

.c-breadcrumb .breadcrumb li,
.c-breadcrumb .breadcrumb li a {
    color: var(--nk-text-secondary) !important;
}

.c-breadcrumb .breadcrumb li a:hover {
    color: var(--nk-accent) !important;
}

/* --- G. FORMS & INPUTS (global) --- */
input:not([type]),
input[type="color"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="text"],
input[type="search"],
textarea,
select {
    background-color: var(--nk-bg-inset) !important;
    color: var(--nk-text-primary) !important;
    border-color: var(--nk-border) !important;
}

/* --- H. BUTTONS (parent theme) --- */
.c-btn.c-btn_style-1 {
    color: #fff !important;
}

.c-btn.c-btn_style-3 {
    color: var(--nk-text-primary) !important;
    border-color: var(--nk-border) !important;
}

.c-btn.c-btn_style-3:hover {
    color: #fff !important;
}

/* Load-more / AJAX load buttons */
.navigation-ajax .load-ajax {
    color: var(--nk-text-primary) !important;
    border-color: var(--nk-border) !important;
}

.navigation-ajax .load-ajax:hover {
    color: #fff !important;
}

/* --- I. PAGINATION --- */
.wp-pagenavi a,
.wp-pagenavi span.current {
    background-color: var(--nk-bg-surface) !important;
    border-color: var(--nk-border) !important;
    color: var(--nk-text-primary) !important;
}

.wp-pagenavi a:hover,
.wp-pagenavi span.current {
    background-color: var(--nk-accent) !important;
    color: #fff !important;
}

/* --- J. NOVEL / MANGA DETAIL PAGE --- */
.profile-manga .summary_content,
.profile-manga .summary_content_wrap {
    color: var(--nk-text-primary);
}

.profile-manga .post-title h1 {
    color: var(--nk-text-primary) !important;
}

.profile-manga .summary-content p,
.profile-manga .description-summary p {
    color: var(--nk-text-secondary) !important;
}

/* Tabs on detail page (Description / Chapters / Comments) */
.manga-page .c-page .c-page__content .tab-wrap .tab-summary,
.manga-page .c-page .c-page__content .description-summary {
    color: var(--nk-text-primary);
}

/* Chapter list on detail page — handled by Section R (R3/R4) */
/* Global fallback for chapter links outside the detail page context */
.listing-chapters_wrap .wp-manga-chapter a {
    color: var(--nk-text-primary) !important;
}

.listing-chapters_wrap .wp-manga-chapter a:hover {
    color: var(--nk-accent) !important;
}

.listing-chapters_wrap .wp-manga-chapter .chapter-release-date i {
    color: var(--nk-text-secondary) !important;
}

/* Summary heading labels ("Rank", "Author(s)", "Genre(s)", "Type") */
.profile-manga .post-content_item .summary-heading h5 {
    color: var(--nk-text-secondary) !important;
}

/* Summary content values (plain text like "90th", "OnGoing") */
.profile-manga .post-content_item .summary-content {
    color: var(--nk-text-primary) !important;
}

/* Summary content links (author, artist) — parent hardcodes #333 */
.profile-manga .summary-content a,
.profile-manga .author-content a,
.profile-manga .artist-content a {
    color: var(--nk-text-link) !important;
}

.profile-manga .summary-content a:hover,
.profile-manga .author-content a:hover,
.profile-manga .artist-content a:hover {
    color: var(--nk-accent) !important;
}

/* Independent dark matte panels */
.profile-manga .tab-summary .summary_image {
    background-color: rgba(22, 27, 34, 0.82) !important;
    border-radius: var(--nk-radius) !important;
}

.profile-manga .tab-summary .summary_content_wrap {
    padding-left: 16px !important;
}

.profile-manga .tab-summary .summary_content_wrap .summary_content {
    background-color: rgba(22, 27, 34, 0.82) !important;
    border-radius: var(--nk-radius) !important;
}

/* Tablet: tighter gap when parent shrinks image to 150px */
@media (max-width: 992px) {
    .profile-manga .tab-summary .summary_content_wrap {
        padding-left: 12px !important;
    }
}

/* Action area (bookmark / comment count) */
.profile-manga .manga-action .action_detail,
.profile-manga .manga-action .action_detail span {
    color: var(--nk-text-secondary) !important;
}

.profile-manga .manga-action .action_icon a {
    color: var(--nk-accent) !important;
}

/* Comment/bookmark divider — parent sets #e1e1e1 */
.profile-manga .manga-action .count-comment {
    border-right-color: var(--nk-border) !important;
}

/* Rating score text — parent sets #333 */
.profile-manga .tab-summary .post-rating span {
    color: var(--nk-text-primary) !important;
}

/* Genre / tag links */
.genres-content a,
.item-tags a,
.wp-manga-tags-list a {
    color: var(--nk-text-secondary) !important;
    border-color: var(--nk-border) !important;
}

.genres-content a:hover,
.item-tags a:hover,
.wp-manga-tags-list a:hover {
    color: var(--nk-accent) !important;
    border-color: var(--nk-accent) !important;
}

/* Tag cloud */
.widget.widget_tag_cloud .tag-cloud-link {
    color: var(--nk-text-secondary) !important;
}

.widget.widget_tag_cloud .tag-cloud-link:hover {
    color: var(--nk-accent) !important;
}

/* --- K. POPULAR SLIDER --- */
.popular-slider .slider__container .slider__item .item__wrap {
    background-color: var(--nk-bg-surface) !important;
}

/* --- L. SEARCH PAGE --- */
.search-wrap .tab-content-wrap .c-tabs-item .c-tabs-item__content .tab-meta .rating .score {
    color: #fff !important;
}

.search-wrap .tab-content-wrap .c-tabs-item .c-tabs-item__content .tab-summary .post-content {
    background-color: var(--nk-bg-surface) !important;
}

.search-wrap .tab-content-wrap .c-tabs-item .c-tabs-item__content .tab-summary .post-content .post-content_item .summary-heading h5 {
    color: var(--nk-text-primary) !important;
}

/* --- L2. SEARCH PAGE — MOBILE OVERFLOW FIXES ---
   At mobile widths (≤600px CSS), several search page elements overflow:
   1) The heading / sort-tabs flex row collapses the H1 to 0 width
   2) The parent theme floats Status + Release side-by-side, overflowing the card
   ========================================================================== */
@media (max-width: 600px) {

    /* 1. Sort-bar heading + tabs: stack vertically & scroll tabs */
    body.search .search-wrap .c-blog__heading.style-2 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    body.search .search-wrap .c-blog__heading.style-2 h1,
    body.search .search-wrap .c-blog__heading.style-2 h4,
    body.search .search-wrap .c-blog__heading.style-2 .h4 {
        width: 100% !important;
        flex: none !important;
    }

    body.search .search-wrap .c-blog__heading.style-2 ul.c-tabs-content {
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
        white-space: nowrap;
    }

    body.search .search-wrap .c-blog__heading.style-2 ul.c-tabs-content::-webkit-scrollbar {
        display: none;
    }

    body.search .search-wrap .c-blog__heading.style-2 ul.c-tabs-content li {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* 2. Status + Release: clear parent theme's float */
    body.search .search-wrap .tab-content-wrap .c-tabs-item .c-tabs-item__content
        .tab-summary .post-content .post-content_item:not(.nofloat):nth-last-of-type(-n+2) {
        display: block !important;
        float: none !important;
        width: auto !important;
    }

    body.search .search-wrap .tab-content-wrap .c-tabs-item .c-tabs-item__content
        .tab-summary .post-content .post-content_item:not(.nofloat):last-child {
        margin-left: 0 !important;
    }

    /* 3. Contain overflow inside the card content column */
    body.search .search-wrap .tab-content-wrap .c-tabs-item .c-tabs-item__content .tab-summary {
        overflow: hidden !important;
    }
}

/* --- M. COMMENTS --- */
.comment-list .comment,
#comments .comment-body {
    border-color: var(--nk-border) !important;
}

.comment-author .fn,
.comment-author .fn a {
    color: var(--nk-text-primary) !important;
}

.comment-content p {
    color: var(--nk-text-primary) !important;
}

/* --- N. ALPHABET FILTER BAR --- */
#manga-filte-alphabeta-bar a {
    background-color: var(--nk-bg-surface) !important;
    color: var(--nk-text-primary) !important;
}

#manga-filte-alphabeta-bar a:hover,
#manga-filte-alphabeta-bar a.active {
    background-color: var(--nk-accent) !important;
    color: #fff !important;
}

/* --- O. MISC MADARA ELEMENTS --- */

/* Go to top button */
.go-to-top {
    background-color: var(--nk-bg-surface) !important;
    color: var(--nk-text-primary) !important;
    border-color: var(--nk-border) !important;
}

/* ==========================================================================
   Sign-In / Sign-Up / Reset Modal — Full Dark Overhaul
   ========================================================================== */

/* --- Backdrop --- */
body.modal-open .modal {
    background-color: rgba(0, 0, 0, 0.65) !important;
}

/* --- Dialog container: kill parent background-image, centre it --- */
body.modal-open .modal .modal-dialog {
    background-image: none !important;
    background-color: transparent !important;
    max-width: 420px;
    width: 92%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
}

/* --- Card shell --- */
body.modal-open .modal .modal-content {
    background-color: var(--nk-bg-surface) !important;
    border: 1px solid var(--nk-border-muted) !important;
    border-radius: var(--nk-radius-lg) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden;
}

/* --- Header / Footer resets --- */
body.modal-open .modal .modal-content .modal-header,
body.modal-open .modal .modal-content .modal-footer {
    border: none !important;
    padding: 0 !important;
}

/* --- Close button --- */
body.modal-open .modal .modal-content .modal-header .close,
body.modal-open .modal .modal-content .modal-footer .close {
    color: var(--nk-text-secondary) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-size: 28px;
    top: 14px !important;
    right: 16px !important;
    z-index: 10;
    transition: color 0.2s ease;
}

body.modal-open .modal .modal-content .modal-header .close:hover,
body.modal-open .modal .modal-content .modal-footer .close:hover {
    color: var(--nk-text-primary) !important;
}

/* --- Modal body --- */
body.modal-open .modal .modal-content .modal-body {
    padding: 0 !important;
}

/* --- Login / Register / Reset pane --- */
body.modal-open .modal .modal-body .login:not(.message) {
    padding: 36px 32px 28px !important;
}

/* --- Heading --- */
body.modal-open .modal .modal-body .login h3 {
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    margin-bottom: 24px !important;
    color: var(--nk-text-primary) !important;
    letter-spacing: 0.01em;
}

body.modal-open .modal .modal-body .login h3 a {
    color: var(--nk-text-primary) !important;
    text-decoration: none !important;
    pointer-events: none;
}

/* --- Error / success message --- */
body.modal-open .modal .modal-body .login .message.login,
body.modal-open .modal .modal-body .login .message.register {
    color: #f85149 !important;
    font-size: 13px;
    text-align: center;
    margin-bottom: 8px;
}

/* --- Labels --- */
body.modal-open .modal .modal-body .login label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    color: var(--nk-text-secondary) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    margin-bottom: 16px !important;
    letter-spacing: 0.02em;
}

body.modal-open .modal .modal-body .login label[for="rememberme"] {
    font-weight: 400 !important;
    font-size: 13px !important;
    color: var(--nk-text-secondary) !important;
    margin-bottom: 0 !important;
}

/* --- Text / Password / Email inputs --- */
body.modal-open .modal .modal-body .login input[type="text"],
body.modal-open .modal .modal-body .login input[type="email"],
body.modal-open .modal .modal-body .login input[type="url"],
body.modal-open .modal .modal-body .login input[type="password"],
body.modal-open .modal .modal-body .login input[type="search"] {
    width: 100% !important;
    padding: 12px 14px !important;
    background-color: var(--nk-bg-inset) !important;
    border: 1px solid var(--nk-border) !important;
    border-radius: 8px !important;
    color: var(--nk-text-primary) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-top: 8px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
}

body.modal-open .modal .modal-body .login input[type="text"]:focus,
body.modal-open .modal .modal-body .login input[type="email"]:focus,
body.modal-open .modal .modal-body .login input[type="url"]:focus,
body.modal-open .modal .modal-body .login input[type="password"]:focus,
body.modal-open .modal .modal-body .login input[type="search"]:focus {
    outline: none !important;
    border-color: var(--nk-accent) !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15) !important;
}

body.modal-open .modal .modal-body .login input::placeholder {
    color: var(--nk-text-secondary) !important;
    opacity: 0.6;
}

/* --- Checkbox (remember me) --- */
body.modal-open .modal .modal-body .login #loginform input[type="checkbox"],
body.modal-open .modal .modal-body .login #registerform input[type="checkbox"] {
    accent-color: var(--nk-accent);
    width: 15px;
    height: 15px;
    vertical-align: middle;
    margin-right: 6px;
    margin-top: -1px;
    cursor: pointer;
}

/* --- Form layout --- */
body.modal-open .modal .modal-body .login #loginform,
body.modal-open .modal .modal-body .login #registerform,
body.modal-open .modal .modal-body .login #resetform {
    font-size: 14px !important;
}

body.modal-open .modal .modal-body .login #loginform>*,
body.modal-open .modal .modal-body .login #registerform>*,
body.modal-open .modal .modal-body .login #resetform>* {
    font-size: 14px !important;
}

/* --- Forgetmenot + submit row --- */
body.modal-open .modal .modal-body .login #loginform .forgetmenot,
body.modal-open .modal .modal-body .login #loginform .submit {
    display: inline-block;
    width: 50% !important;
    vertical-align: middle;
}

body.modal-open .modal .modal-body .login #loginform .forgetmenot {
    float: right !important;
    margin-top: 10px !important;
    text-align: right;
}

body.modal-open .modal .modal-body .login .submit {
    float: left !important;
}

/* --- Submit button (Log In / Register / Reset) --- */
body.modal-open .modal .modal-body .login .submit .wp-submit {
    display: inline-block !important;
    padding: 11px 28px !important;
    background-color: var(--nk-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--nk-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer;
    transition: opacity var(--nk-ease);
    line-height: 1.4 !important;
}

body.modal-open .modal .modal-body .login .submit .wp-submit:hover {
    opacity: 0.85;
}

body.modal-open .modal .modal-body .login .submit .wp-submit:active {
    opacity: 0.75;
}

body.modal-open .modal .modal-body .login .submit .wp-submit[disabled] {
    background-color: var(--nk-bg-elevated) !important;
    color: var(--nk-text-secondary) !important;
    cursor: not-allowed;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

/* --- Footer nav links (Lost password, back to site, switch forms) --- */
body.modal-open .modal .modal-body .login p.nav,
body.modal-open .modal .modal-body .login p.backtoblog {
    text-align: center !important;
    margin: 6px 0 !important;
}

body.modal-open .modal .modal-body .login p.nav:first-of-type {
    margin-top: 20px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--nk-border-muted) !important;
}

body.modal-open .modal .modal-body .login p.nav a,
body.modal-open .modal .modal-body .login p.backtoblog a {
    color: var(--nk-text-secondary) !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

body.modal-open .modal .modal-body .login p.nav a:hover,
body.modal-open .modal .modal-body .login p.backtoblog a:hover {
    color: var(--nk-accent) !important;
}

/* --- Loading screen overlay (when AJAX fires) --- */
body.modal-open .modal .modal-loading-screen {
    background-color: var(--nk-bg-surface) !important;
    background-image: none !important;
    border-radius: 16px;
}

/* --- clearfix for forms --- */
body.modal-open .modal .modal-body .login #loginform:after,
body.modal-open .modal .modal-body .login #registerform:after,
body.modal-open .modal .modal-body .login #resetform:after {
    display: table;
    clear: both;
    content: "";
}

/* --- Mobile responsive (≤ 600px) --- */
@media (max-width: 600px) {
    body.modal-open .modal .modal-dialog {
        max-width: 360px;
        width: 94%;
    }

    body.modal-open .modal .modal-body .login:not(.message) {
        padding: 28px 20px 22px !important;
    }

    body.modal-open .modal .modal-body .login h3 {
        font-size: 19px !important;
        margin-bottom: 18px !important;
    }

    body.modal-open .modal .modal-body .login label {
        margin-bottom: 12px !important;
    }

    body.modal-open .modal .modal-body .login input[type="text"],
    body.modal-open .modal .modal-body .login input[type="email"],
    body.modal-open .modal .modal-body .login input[type="password"] {
        padding: 10px 12px !important;
    }

    body.modal-open .modal .modal-body .login #loginform .forgetmenot,
    body.modal-open .modal .modal-body .login #loginform .submit {
        width: 100% !important;
        float: none !important;
        text-align: center !important;
    }

    body.modal-open .modal .modal-body .login #loginform .forgetmenot {
        margin-top: 4px !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }

    body.modal-open .modal .modal-body .login .submit .wp-submit {
        width: 100% !important;
        padding: 12px !important;
    }
}

/* Dropdown menus (Bootstrap) */
.dropdown-menu {
    background-color: var(--nk-bg-surface) !important;
    border-color: var(--nk-border) !important;
}

.dropdown-menu>li>a {
    color: var(--nk-text-primary) !important;
}

.dropdown-menu>li>a:hover {
    background-color: var(--nk-bg-elevated) !important;
    color: var(--nk-accent) !important;
}

/* Select-picker / chapter selectors */
.selectpicker,
.c-selectpicker .selectpicker,
.c-selectpicker select {
    background-color: var(--nk-bg-inset) !important;
    color: var(--nk-text-primary) !important;
    border-color: var(--nk-border) !important;
}

/* #hover-infor tooltip */
#hover-infor {
    background-color: var(--nk-bg-surface) !important;
    border-color: var(--nk-border) !important;
    color: var(--nk-text-primary) !important;
}

#hover-infor .item_thumb .post-title a {
    color: var(--nk-accent) !important;
}

/* My History widget */
.widget .my-history .my-history-item-wrap {
    border-color: var(--nk-border) !important;
}

/* Sub-header nav background */
.c-sub-header-nav {
    background-color: var(--nk-bg-header) !important;
}


/* ====================================================================
   P. USER SETTINGS / ACCOUNT DASHBOARD
   Professional dark dashboard for NovelKeep account management.
   Covers: sidebar nav, account settings, reader settings,
           bookmarks table, reading history, avatar, forms.
   ==================================================================== */

/* --- P1. Page-level container --- */
.settings-page {
    margin-top: 8px;
}

/* --- P2. Sidebar Navigation --- */
.settings-page .nav-tabs-wrap {
    margin-bottom: 0;
}

.settings-page .nav-tabs-wrap ul.nav-tabs {
    border-bottom: none;
    background-color: var(--nk-bg-surface);
    border-radius: var(--nk-radius);
    overflow: hidden;
    padding: 6px;
}

.settings-page .nav-tabs-wrap ul.nav-tabs li {
    width: 100%;
    position: relative;
    margin-bottom: 2px;
}

.settings-page .nav-tabs-wrap ul.nav-tabs li:last-child {
    margin-bottom: 0;
}

.settings-page .nav-tabs-wrap ul.nav-tabs li a {
    background-color: transparent !important;
    color: var(--nk-text-secondary) !important;
    font-weight: 500;
    padding: 12px 16px 10px;
    border: none !important;
    border-radius: 8px !important;
    margin-right: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.settings-page .nav-tabs-wrap ul.nav-tabs li a:hover {
    background-color: var(--nk-bg-elevated) !important;
    color: var(--nk-text-primary) !important;
}

.settings-page .nav-tabs-wrap ul.nav-tabs li a i {
    font-size: 20px;
    margin-right: 12px;
    width: 24px;
    text-align: center;
    color: inherit;
}

/* Hide parent theme's arrow indicator */
.settings-page .nav-tabs-wrap ul.nav-tabs li:after {
    display: none !important;
}

/* Active tab — accent highlight bar */
.settings-page .nav-tabs-wrap ul.nav-tabs li.active a {
    background: var(--nk-bg-elevated) !important;
    color: var(--nk-text-primary) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--nk-accent);
    border-radius: var(--nk-radius-sm) !important;
}

/* --- P3. Content Area Wrapper --- */
.settings-page .tabs-content-wrap {
    background-color: var(--nk-bg-surface);
    border-radius: var(--nk-radius);
    padding: 24px 28px 28px !important;
    min-height: 400px;
}

/* --- P4. Tab Content Sections --- */
.settings-page .tabs-content-wrap .tab-group-item .tab-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--nk-border-muted) !important;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item:first-child {
    padding-top: 0;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item:last-child {
    border-bottom: none !important;
}

/* --- P5. Section Headings --- */
.settings-page .tabs-content-wrap .tab-group-item .tab-item .settings-title h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--nk-text-primary) !important;
    margin-bottom: 18px;
    letter-spacing: 0.02em;
}

/* Reader / Image settings panel header */
.settings-page .tabs-content-wrap .tab-group-item.image_setting .settings-heading,
.settings-page .tabs-content-wrap .tab-group-item.other_setting .settings-heading {
    background-color: var(--nk-bg-elevated) !important;
    padding: 14px 24px;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--nk-border-muted);
}

.settings-page .tabs-content-wrap .tab-group-item.image_setting .settings-heading h3,
.settings-page .tabs-content-wrap .tab-group-item.other_setting .settings-heading h3 {
    color: var(--nk-text-primary) !important;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.05em;
}

/* --- P6. Avatar Area --- */
.settings-page .tabs-content-wrap .tab-group-item .tab-item .choose-avatar {
    width: 140px !important;
    height: 140px !important;
    border: 2px solid var(--nk-border) !important;
    border-radius: 50% !important;
    overflow: hidden;
    margin-right: 24px;
    margin-bottom: 16px;
    background-color: var(--nk-bg-inset);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .choose-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* File upload area */
.settings-page .tabs-content-wrap .tab-group-item .tab-item .form-choose-avatar {
    color: var(--nk-text-secondary) !important;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .form-choose-avatar .select-avata:after {
    background-color: var(--nk-bg-elevated) !important;
    border: 1px solid var(--nk-border) !important;
    color: var(--nk-text-primary) !important;
    border-radius: 6px !important;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .form-choose-avatar .select-avata:hover:after {
    background-color: var(--nk-accent) !important;
    border-color: var(--nk-accent) !important;
    color: #fff !important;
}

/* --- P7. Form Labels & Values --- */
.settings-page .tabs-content-wrap .tab-group-item .tab-item label {
    color: var(--nk-text-secondary) !important;
    font-weight: 500;
    font-size: 13px;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .show {
    color: var(--nk-text-primary) !important;
    font-weight: 600;
}

/* --- P8. Form Inputs --- */
.settings-page .tabs-content-wrap .tab-group-item .tab-item input[type="text"],
.settings-page .tabs-content-wrap .tab-group-item .tab-item input[type="email"],
.settings-page .tabs-content-wrap .tab-group-item .tab-item input[type="url"],
.settings-page .tabs-content-wrap .tab-group-item .tab-item input[type="password"],
.settings-page .tabs-content-wrap .tab-group-item .tab-item input[type="search"],
.settings-page .tabs-content-wrap .tab-group-item .tab-item textarea,
.settings-page .tabs-content-wrap .tab-group-item .tab-item select {
    background-color: var(--nk-bg-inset) !important;
    color: var(--nk-text-primary) !important;
    border: 1px solid var(--nk-border) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    max-width: 400px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item input:focus,
.settings-page .tabs-content-wrap .tab-group-item .tab-item textarea:focus,
.settings-page .tabs-content-wrap .tab-group-item .tab-item select:focus {
    border-color: var(--nk-accent) !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15) !important;
    outline: none !important;
}

/* Password strength meter */
#password-strength {
    margin-top: 8px;
    border-radius: 4px;
    overflow: hidden;
}

/* --- P9. Submit / Action Buttons --- */
.settings-page input[type="submit"],
.settings-page .tabs-content-wrap input[type="submit"] {
    background-color: var(--nk-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 24px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}

.settings-page input[type="submit"]:hover,
.settings-page .tabs-content-wrap input[type="submit"]:hover {
    opacity: 0.85;
}

/* Delete / remove buttons — stable footer row */
/* Anchor the bottom action row so few-items tables don't shift */
.settings-page table.list-bookmark>tbody>tr:last-child>td[colspan] {
    padding: 10px 16px !important;
    border-top: 1px solid var(--nk-border-muted) !important;
    vertical-align: middle;
    /* Clear any height collapse caused by floated children */
    height: 52px;
}

.settings-page .remove-all {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    /* Override the float-right class so it doesn't collapse the cell */
    float: none !important;
    width: 100%;
}

.settings-page .remove-all .checkbox {
    margin: 0 !important;
    padding-right: 0 !important;
}

.settings-page .remove-all #delete-bookmark-manga {
    background-color: #da3633 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.settings-page .remove-all #delete-bookmark-manga:hover {
    opacity: 0.85;
}

/* --- P10. Bookmark Table --- */
.settings-page table.list-bookmark {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
}

.settings-page table.list-bookmark>thead>tr>th {
    background-color: var(--nk-bg-elevated) !important;
    border-bottom: 1px solid var(--nk-border-muted) !important;
    font-weight: 600;
    color: var(--nk-text-primary) !important;
    padding: 12px 16px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.settings-page table.list-bookmark>thead>tr>th:nth-child(1) {
    border-top-left-radius: 8px;
}

.settings-page table.list-bookmark>thead>tr>th:nth-child(3) {
    border-top-right-radius: 8px;
}

.settings-page table.list-bookmark>tbody>tr>td {
    background-color: transparent;
    border-top: 1px solid var(--nk-border-muted) !important;
    padding: 12px 16px;
    color: var(--nk-text-primary);
    vertical-align: middle;
}

.settings-page table.list-bookmark>tbody>tr:hover>td {
    background-color: var(--nk-bg-elevated) !important;
}

.settings-page table.list-bookmark>tbody>tr:last-child {
    color: var(--nk-text-secondary) !important;
}

/* Bookmark manga name cell */
.settings-page .mange-name .item-thumb {
    border-radius: 6px;
    overflow: hidden;
}

.settings-page .mange-name .item-infor .post-title h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--nk-text-primary) !important;
    margin: 10px 0 8px;
}

.settings-page .mange-name .item-infor .post-title h3 a {
    color: var(--nk-text-primary) !important;
}

.settings-page .mange-name .item-infor .post-title h3 a:hover {
    color: var(--nk-accent) !important;
}

/* Bookmark chapter links */
.settings-page .mange-name .item-infor .chapter span a {
    color: var(--nk-text-secondary) !important;
}

.settings-page .mange-name .item-infor .chapter span a:hover {
    color: var(--nk-accent) !important;
}

.settings-page .mange-name .item-infor .chapter span+span:before {
    background-color: var(--nk-border) !important;
}

/* Notification badge on bookmark */
.settings-page .mange-name .item-thumb .c-notifications {
    background-color: #da3633 !important;
    color: #fff;
    font-weight: 700;
}

/* Bookmark checkbox */
.settings-page table.list-bookmark .bookmark-checkbox input,
.settings-page table.list-bookmark #checkall {
    accent-color: var(--nk-accent);
}

/* Post-on / date column */
.settings-page .post-on {
    color: var(--nk-text-secondary) !important;
    font-size: 13px;
}

/* Action delete icon */
.settings-page .action a {
    color: var(--nk-text-secondary) !important;
    transition: color 0.2s ease;
}

.settings-page .action a:hover {
    color: #f85149 !important;
}

/* Delete confirmation link text */
.settings-page .wp-manga-delete-bookmark {
    color: var(--nk-text-secondary) !important;
}

.settings-page .wp-manga-delete-bookmark:hover {
    color: #f85149 !important;
}

/* --- P11. Reading History Cards --- */

/* Space between card rows (each .tab-item is a Bootstrap row of cards) */
.settings-page .tabs-content-wrap .tab-group-item .tab-item .row>[class*="col-"] {
    margin-bottom: 10px;
}

/* Card base — flexbox to properly align thumb + info */
.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content {
    position: relative;
    display: flex !important;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    background-color: transparent !important;
    border: 1px solid var(--nk-border-muted);
    border-radius: var(--nk-radius);
    padding: 14px 36px 14px 14px !important;
    margin-bottom: 0;
    box-sizing: border-box;
    transition: border-color var(--nk-ease);
}

/* Kill old float-based clearfix — not needed with flexbox */
.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content:after {
    display: none !important;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content:hover {
    border-color: var(--nk-border);
}

/* Left-side accent bar — removed for minimalism */

/* — Cover Thumbnail — */
.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .item-thumb {
    flex-shrink: 0;
    width: 54px !important;
    height: 76px;
    border-radius: 6px;
    overflow: hidden;
    float: none !important;
    margin-right: 0 !important;
    background-color: var(--nk-bg-surface);
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .item-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .item-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* — Info block — */
.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .item-infor {
    flex: 1;
    min-width: 0;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Title */
.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .item-infor .settings-title {
    margin-right: 0 !important;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .item-infor .settings-title h3 {
    margin: 0 0 2px !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--nk-text-primary) !important;
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .item-infor .settings-title h3 a {
    color: var(--nk-text-primary) !important;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .item-infor .settings-title h3 a:hover {
    color: var(--nk-accent) !important;
}

/* Chapter + page stacked vertically */
.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .item-infor .chapter {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .item-infor .chapter span {
    display: block;
}

/* Chapter link */
.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .item-infor .chapter span.chap a {
    color: var(--nk-accent) !important;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .item-infor .chapter span.chap a:hover {
    color: var(--nk-text-primary) !important;
}

/* Page link — smaller, secondary */
.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .item-infor .chapter span.page a {
    color: var(--nk-text-secondary) !important;
    font-size: 10px;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .item-infor .chapter span.page a:hover {
    color: var(--nk-accent) !important;
}

/* Hide the vertical bar divider between spans — stacked layout doesn't need it */
.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .item-infor .chapter span+span:before {
    display: none !important;
}

/* Timestamp — pushed to bottom of info block */
.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .item-infor .post-on {
    color: var(--nk-text-secondary) !important;
    font-size: 10px;
    margin-top: auto;
    padding-top: 5px;
}

/* — Delete (×) button — */
.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .action {
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 0;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .action a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: transparent;
    color: var(--nk-text-secondary) !important;
    opacity: 0.3;
    padding: 0;
    transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .action a i {
    font-size: 18px;
    line-height: 1;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content:hover .action a {
    opacity: 0.7;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .history-content .action a:hover {
    color: #f85149 !important;
    background-color: rgba(248, 81, 73, 0.12);
    opacity: 1 !important;
}

/* --- P12. Chapter List (in bookmark expanded) --- */
.settings-page .list-chapter {
    background-color: transparent;
    border-radius: 0;
    padding: 4px 0;
}

.settings-page .list-chapter .chapter-item {
    border-bottom-color: var(--nk-border-muted) !important;
}

.settings-page .list-chapter .chapter-item:last-child {
    border-bottom: none !important;
}

.settings-page .list-chapter .chapter-item .chapter {
    background-color: transparent !important;
    border: 1px solid var(--nk-border) !important;
    border-radius: 4px;
}

.settings-page .list-chapter .chapter-item .chapter a {
    color: var(--nk-text-secondary) !important;
}

.settings-page .list-chapter .chapter-item .chapter a:hover {
    color: var(--nk-accent) !important;
}

.settings-page .list-chapter .chapter-item .chapter.unread {
    border-color: var(--nk-accent) !important;
}

.settings-page .list-chapter .chapter-item .chapter.unread a {
    color: var(--nk-accent) !important;
    font-weight: 600;
}

.settings-page .list-chapter .chapter-item a {
    color: var(--nk-text-secondary) !important;
}

.settings-page .list-chapter .chapter-item a:hover {
    color: var(--nk-accent) !important;
}

/* --- P13. Reader Settings Radio Options --- */
.settings-page .tabs-content-wrap .tab-group-item .tab-item .checkbox label {
    color: var(--nk-text-primary) !important;
    font-weight: 400;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item .checkbox label:before {
    color: var(--nk-accent) !important;
}

.settings-page .tabs-content-wrap .tab-group-item .tab-item input[type="radio"] {
    accent-color: var(--nk-accent);
}

/* --- P14. Loading overlay --- */
.settings-page .loading-overlay {
    background-color: rgba(28, 33, 40, 0.6);
    border-radius: 50%;
}

/* --- P15. Mobile Responsive Adjustments --- */
@media (max-width: 768px) {
    .settings-page .nav-tabs-wrap ul.nav-tabs {
        border-radius: 8px;
        padding: 6px;
        margin-bottom: 16px;
    }

    .settings-page .nav-tabs-wrap ul.nav-tabs li a {
        padding: 10px 14px 8px;
        font-size: 13px;
    }

    .settings-page .nav-tabs-wrap ul.nav-tabs li a i {
        font-size: 18px;
        margin-right: 10px;
    }

    .settings-page .tabs-content-wrap {
        padding: 16px 14px 20px !important;
        border-radius: 8px;
    }

    /* Avatar centering on mobile */
    .settings-page .tabs-content-wrap .tab-group-item .tab-item .choose-avatar {
        float: none !important;
        margin: 0 auto 16px !important;
    }

    /* Bookmark table mobile card layout */
    .settings-page table.list-bookmark>tbody tr {
        border: 1px solid var(--nk-border) !important;
        border-radius: 8px;
        margin-bottom: 16px;
        overflow: hidden;
    }

    .settings-page table.list-bookmark>tbody tr td>div:before {
        color: var(--nk-text-secondary) !important;
    }

    .settings-page table.list-bookmark>tbody tr:last-child {
        border: none !important;
    }
}

@media (max-width: 480px) {
    .settings-page .tabs-content-wrap .tab-group-item .tab-item .choose-avatar {
        width: 110px !important;
        height: 110px !important;
    }
}


/* ====================================================================
   R. NOVEL DETAIL PAGE — Content Area Design Overhaul
   Covers: section headings, summary/description, chapter list,
           show more/less, comment form, related novels, edit link.
   ==================================================================== */

/* --- R1. Section Headings (.c-blog__heading.style-2) --- */
.c-blog__heading.style-2 {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    border: none !important;
    border-bottom: 1px solid var(--nk-border-muted) !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin-bottom: 16px;
    padding: 0 0 10px 0;
}

/* Heading text */
.c-blog__heading.style-2 h2,
.c-blog__heading.style-2 h4,
.c-blog__heading.style-2 .h4 {
    color: var(--nk-text-primary) !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    flex: 1;
    min-width: 0;
}

/* Hide star icons in all section headings on the novel detail page.
   The Synopsis heading has no icon in the template override;
   this targets any remaining headings (Chapters, Related, etc.)
   whose icons are rendered by parent theme templates. */
.c-blog__heading h2>i,
.c-blog__heading .h4>i,
.c-blog__heading h4>i {
    display: none !important;
}

/* Reverse order button — flex item, no float needed */
.c-blog__heading a.btn-reverse-order {
    flex-shrink: 0;
    color: var(--nk-text-secondary) !important;
    transition: color 0.2s ease;
}

.c-blog__heading a.btn-reverse-order:hover {
    color: var(--nk-accent) !important;
}

.c-blog__heading a.btn-reverse-order i {
    color: var(--nk-text-secondary) !important;
    background: none !important;
    font-size: 18px;
    margin: 0 !important;
    transform: none !important;
    transition: color 0.2s ease;
    display: inline-block !important;
}

.c-blog__heading a.btn-reverse-order:hover i {
    color: var(--nk-accent) !important;
}

/* --- R2. Synopsis / Description Section --- */
body.manga-page .description-summary {
    background-color: var(--nk-bg-surface);
    border: 1px solid var(--nk-border-muted);
    border-radius: var(--nk-radius);
    padding: 24px;
    color: var(--nk-text-primary);
    position: relative;
    margin-bottom: 8px;
}

/* Accent left stripe — removed for minimalism */

body.manga-page .description-summary .summary__content {
    padding-left: 4px;
}

body.manga-page .description-summary .summary__content p {
    color: var(--nk-text-secondary) !important;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 10px;
}

body.manga-page .description-summary .summary__content p:last-child {
    margin-bottom: 0;
}

/* Fix show-more gradient to blend with card surface */
body.manga-page .description-summary .summary__content.show-more:after {
    background: linear-gradient(to bottom, transparent, var(--nk-bg-surface)) !important;
}

/* Safety net: parent adds hide_show-more when it hides the button but forgets to
   remove the height:119px clip and gradient. Show content fully until our JS re-evaluates. */
body.manga-page .description-summary.hide_show-more .summary__content.show-more {
    height: auto !important;
    overflow: visible !important;
}

body.manga-page .description-summary.hide_show-more .summary__content.show-more:after {
    display: none !important;
}

/* Show More / Show Less button (synopsis card) */
body.manga-page .description-summary .c-content-readmore {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--nk-border-muted);
    text-align: center;
}

body.manga-page .content-readmore,
body.manga-page .chapter-readmore {
    color: var(--nk-accent) !important;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
}

body.manga-page .content-readmore:hover,
body.manga-page .chapter-readmore:hover {
    opacity: 0.85;
}

body.manga-page .content-readmore:after,
body.manga-page .chapter-readmore:after {
    color: inherit !important;
}

/* --- R3. Chapter List Container --- */
body.manga-page .page-content-listing.single-page {
    background-color: transparent;
    border-radius: var(--nk-radius);
    padding: 14px 16px;
    border: 1px solid var(--nk-border-muted);
}

/* Override parent show-more mechanism */
body.manga-page .listing-chapters_wrap.show-more .version-chap {
    max-height: none !important;
    overflow: visible !important;
}

body.manga-page .listing-chapters_wrap.show-more .version-chap:after {
    display: none !important;
}

body.manga-page .listing-chapters_wrap .c-chapter-readmore {
    display: none !important;
}

/* Chapter list UL — clean up */
body.manga-page .page-content-listing.single-page .listing-chapters_wrap>ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- R3a. Chapter Toolbar (count + jump) --- */
.nk-chap-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.nk-chap-count {
    color: var(--nk-text-secondary);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.nk-chap-count-num {
    color: var(--nk-text-primary);
    font-weight: 700;
}

.nk-chap-jump {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.nk-chap-jump-input {
    width: 130px;
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
    color: var(--nk-text-primary);
    background-color: var(--nk-bg-inset);
    border: 1px solid var(--nk-border);
    border-right: none;
    border-radius: 6px 0 0 6px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nk-chap-jump-input::placeholder {
    color: var(--nk-text-secondary);
    opacity: 0.7;
}

.nk-chap-jump-input:focus {
    border-color: var(--nk-accent);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.12);
}

.nk-chap-jump-input.nk-chap-jump-error {
    border-color: #f85149 !important;
    box-shadow: 0 0 0 2px rgba(248, 81, 73, 0.2) !important;
}

.nk-chap-jump-btn {
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background-color: var(--nk-accent);
    border: 1px solid var(--nk-accent);
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

.nk-chap-jump-btn:hover {
    background-color: #4393e6;
}

/* --- R3b. Pagination Bar --- */
.nk-chap-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--nk-border-muted);
    min-height: 42px;
}

.nk-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--nk-text-secondary);
    background-color: transparent;
    border: 1px solid var(--nk-border-muted);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.nk-page-btn:hover:not(.disabled):not(.active) {
    color: var(--nk-text-primary);
    background-color: var(--nk-bg-elevated);
    border-color: var(--nk-border);
}

.nk-page-btn.active {
    color: #fff;
    background-color: var(--nk-accent);
    border-color: var(--nk-accent);
    font-weight: 600;
    cursor: default;
}

.nk-page-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.nk-page-nav {
    font-size: 16px;
    font-weight: 700;
    min-width: 34px;
}

.nk-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 34px;
    color: var(--nk-text-secondary);
    font-size: 14px;
    user-select: none;
}

.nk-page-info {
    color: var(--nk-text-secondary);
    font-size: 12px;
    margin-left: 8px;
    white-space: nowrap;
}

/* --- R3c. Chapter Highlight (jump-to) --- */
.nk-chap-highlight {
    background-color: rgba(88, 166, 255, 0.1) !important;
    transition: background-color 0.3s ease;
}

/* --- R4. Individual Chapter Items --- */
body.manga-page .page-content-listing.single-page .listing-chapters_wrap>ul.main.version-chap li {
    position: relative;
    padding: 9px 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Separator between chapters */
body.manga-page .page-content-listing.single-page .listing-chapters_wrap>ul.main.version-chap li:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--nk-border-muted) !important;
    opacity: 0.6 !important;
}

body.manga-page .page-content-listing.single-page .listing-chapters_wrap>ul.main.version-chap>li:last-child:after {
    display: none !important;
}

/* Chapter link */
body.manga-page .page-content-listing.single-page .listing-chapters_wrap>ul.main.version-chap li a {
    color: var(--nk-text-primary) !important;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.15s ease;
    padding: 0 !important;
}

body.manga-page .page-content-listing.single-page .listing-chapters_wrap>ul.main.version-chap li a:hover {
    color: var(--nk-accent) !important;
}

/* Unread chapter accent */
body.manga-page .page-content-listing.single-page li.wp-manga-chapter.unread a {
    color: var(--nk-accent) !important;
    font-weight: 600;
}

/* Release date */
body.manga-page .page-content-listing.single-page .listing-chapters_wrap>ul.main.version-chap li .chapter-release-date {
    color: var(--nk-text-secondary) !important;
    font-size: 11px;
    flex-shrink: 0;
    opacity: 0.7;
}

body.manga-page .page-content-listing.single-page .listing-chapters_wrap>ul.main.version-chap li .chapter-release-date i {
    color: var(--nk-text-secondary) !important;
    font-style: normal;
}

/* Chapter show-more gradient/overlay from parent — disabled by pagination */
body.manga-page .listing-chapters_wrap.show-more .version-chap:after {
    display: none !important;
}

/* --- R5. Chapter "Show More" Button — hidden by pagination --- */

/* --- R6. Discussion Heading --- */
#manga-discussion.c-blog__heading {
    margin-top: 36px;
}

/* --- R7. Comment Form --- */
#madara-comments.comments-area {
    margin-top: 0 !important;
}

#madara-comments.comments-area .hr,
.manga-discussion .hr {
    display: none !important;
}

#madara-comments.comments-area #respond.comment-respond {
    position: relative;
    margin: 0 0 30px !important;
    padding: 22px 20px 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 100%),
        var(--nk-bg-surface);
    border: 1px solid var(--nk-border-muted);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(1, 4, 9, 0.22);
    overflow: hidden;
}

#madara-comments.comments-area #respond.comment-respond::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, rgba(192, 192, 192, 0) 0%, rgba(192, 192, 192, 0.22) 22%, rgba(192, 192, 192, 0.1) 78%, rgba(192, 192, 192, 0) 100%);
    pointer-events: none;
}

#madara-comments.comments-area #respond.comment-respond .comment-form {
    margin: 0 !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
    font-size: 14px;
}

#madara-comments.comments-area #respond.comment-respond .comment-form>p {
    margin: 0 !important;
    padding: 0 !important;
}

#madara-comments.comments-area #respond.comment-respond .comment-form .comment-notes,
#madara-comments.comments-area #respond.comment-respond .comment-form .logged-in-as,
#madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-comment,
#madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-cookies-consent,
#madara-comments.comments-area #respond.comment-respond .comment-form .form-submit {
    grid-column: 1 / -1;
}

#madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-comment,
#madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-author,
#madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-email,
#madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-url {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
}

#madara-comments.comments-area #respond.comment-respond .comment-form>.comment-form-author,
#madara-comments.comments-area #respond.comment-respond .comment-form>.comment-form-email,
#madara-comments.comments-area #respond.comment-respond .comment-form>.comment-form-url {
    width: 100% !important;
}

#madara-comments.comments-area #respond.comment-respond .comment-form .form-submit {
    justify-self: end;
}

#madara-comments.comments-area #respond.comment-respond .comment-form label {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--nk-text-primary) !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Logged in as text */
#madara-comments .comment-form .logged-in-as {
    color: var(--nk-text-secondary) !important;
    font-size: 13px;
}

#madara-comments .comment-form .logged-in-as a {
    color: var(--nk-accent) !important;
}

#madara-comments .comment-form .logged-in-as a:hover {
    color: var(--nk-text-primary) !important;
}

/* Required fields message */
#madara-comments.comments-area #respond.comment-respond .comment-form .comment-notes {
    color: var(--nk-text-secondary) !important;
    font-size: 13px;
    line-height: 1.7;
}

#madara-comments .comment-form .required-field-message {
    color: var(--nk-text-secondary) !important;
}

/* Textarea */
#madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-comment #comment {
    background-color: var(--nk-bg-inset) !important;
    color: var(--nk-text-primary) !important;
    border: 1px solid var(--nk-border) !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    font-size: 14px;
    line-height: 1.6;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    resize: vertical;
    min-height: 190px;
}

#madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-comment #comment::placeholder {
    color: var(--nk-text-secondary);
}

#madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-comment #comment:focus {
    border-color: var(--nk-accent) !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15) !important;
    outline: none !important;
}

/* Guest inputs (name, email, url) */
#madara-comments.comments-area #respond.comment-respond .comment-form>* input#author,
#madara-comments.comments-area #respond.comment-respond .comment-form>* input#email,
#madara-comments.comments-area #respond.comment-respond .comment-form>* input#url {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    font-size: 14px;
    background-color: var(--nk-bg-inset) !important;
    color: var(--nk-text-primary) !important;
    border: 1px solid var(--nk-border) !important;
    border-radius: 8px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#madara-comments.comments-area #respond.comment-respond .comment-form>* input::placeholder {
    color: var(--nk-text-secondary);
}

#madara-comments.comments-area #respond.comment-respond .comment-form>* input:focus {
    border-color: var(--nk-accent) !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15) !important;
    outline: none !important;
}

#madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--nk-text-secondary) !important;
    font-size: 13px;
    line-height: 1.5;
}

#madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-cookies-consent input {
    margin-top: 3px;
    accent-color: var(--nk-accent);
}

#madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-cookies-consent label {
    margin-bottom: 0;
    color: var(--nk-text-secondary) !important;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
}

/* Submit button */
#madara-comments.comments-area #respond.comment-respond .comment-form .form-submit #submit {
    background-color: var(--nk-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 14px;
    min-height: 44px;
    padding: 10px 28px !important;
    box-shadow: 0 10px 24px rgba(192, 192, 192, 0.16);
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

#madara-comments.comments-area #respond.comment-respond .comment-form .form-submit #submit:hover {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(192, 192, 192, 0.2);
}

/* Reply title */
#madara-comments h4.comment-reply-title {
    color: var(--nk-text-primary) !important;
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

#madara-comments h4.comment-reply-title a {
    color: var(--nk-accent) !important;
    font-size: 12px;
    margin-left: 8px;
}

@media (max-width: 768px) {
    #madara-comments.comments-area #respond.comment-respond {
        padding: 18px 16px 16px;
        border-radius: 12px;
    }

    #madara-comments.comments-area #respond.comment-respond::before {
        left: 16px;
        right: 16px;
    }

    #madara-comments.comments-area #respond.comment-respond .comment-form {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-author,
    #madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-email,
    #madara-comments.comments-area #respond.comment-respond .comment-form .comment-form-url,
    #madara-comments.comments-area #respond.comment-respond .comment-form .form-submit {
        grid-column: 1 / -1;
    }

    #madara-comments.comments-area #respond.comment-respond .comment-form .form-submit {
        justify-self: stretch;
    }

    #madara-comments h4.comment-reply-title {
        font-size: 20px;
    }
}

/* --- R8. Related Novels --- */
.related-manga {
    margin-top: 36px !important;
}

/* Related novel card — modernised vertical card layout */
.related-reading-wrap.related-style-1 {
    background-color: var(--nk-bg-surface);
    border: 1px solid var(--nk-border-muted);
    border-radius: var(--nk-radius);
    padding: 12px;
    transition: border-color var(--nk-ease);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.related-reading-wrap.related-style-1:hover {
    border-color: var(--nk-border);
}

/* Kill old float clearfix */
.related-reading-wrap:after {
    display: none !important;
}

/* Thumbnail */
.related-reading-wrap .related-reading-img {
    flex-shrink: 0;
    width: 60px;
    height: 85px;
    float: none !important;
    margin-right: 0 !important;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--nk-bg-inset);
}

.related-reading-wrap .related-reading-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content */
.related-reading-wrap .related-reading-content {
    flex: 1;
    min-width: 0;
    overflow: visible !important;
}

.related-reading-wrap .related-reading-content h5 {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    margin-top: 0;
    color: var(--nk-text-primary) !important;
}

.related-reading-wrap .related-reading-content h5 a {
    color: var(--nk-text-primary) !important;
    transition: color 0.15s ease;
}

.related-reading-wrap .related-reading-content h5 a:hover {
    color: var(--nk-accent) !important;
}

/* Date stamp */
.related-reading-wrap .post-on {
    color: var(--nk-text-secondary) !important;
    font-size: 11px;
}

.related-reading-wrap .post-on span {
    color: var(--nk-text-secondary) !important;
}

/* --- R9. Edit This Novel link --- */
.post-edit-link {
    color: var(--nk-text-secondary) !important;
    font-size: 12px;
    opacity: 0.5;
    transition: color 0.2s ease, opacity 0.2s ease;
    padding: 16px 0;
    display: inline-block;
}

.post-edit-link:hover {
    color: var(--nk-accent) !important;
    opacity: 1;
}

/* --- R10. Mobile Responsive --- */
@media (max-width: 768px) {
    body.manga-page .page-content-listing.single-page {
        padding: 14px 16px;
        border-radius: 8px;
    }

    .related-reading-wrap.related-style-1 {
        padding: 10px;
        border-radius: 8px;
    }

    /* Pagination toolbar */
    .nk-chap-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .nk-chap-jump {
        width: 100%;
    }

    .nk-chap-jump-input {
        flex: 1;
        min-width: 0;
        width: auto;
    }

    /* Pagination bar */
    .nk-chap-pagination {
        justify-content: center;
        flex-wrap: nowrap;
        gap: 2px;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .nk-chap-pagination::-webkit-scrollbar {
        display: none;
    }

    .nk-page-btn {
        flex: 0 0 auto;
        min-width: 28px;
        height: 28px;
        padding: 0 5px;
        font-size: 11px;
    }

    .nk-page-nav {
        font-size: 13px;
        min-width: 28px;
    }

    .nk-page-ellipsis {
        flex: 0 0 auto;
        min-width: 18px;
        height: 28px;
        font-size: 12px;
    }

    .nk-page-info {
        display: none;
    }
}


/* ====================================================================
   Q. SEARCH PAGE — Advanced Search Dark Dashboard
   Covers: wrapper background, search bar, advanced toggle, genre
           checkboxes, form fields, status checkboxes, buttons.
   ==================================================================== */

/* --- Q0. Wrapper — override the parent background-image completely --- */
.c-search-header__wrapper {
    background-image: none !important;
    background-color: var(--nk-bg-main) !important;
    padding-top: 24px;
    padding-bottom: 24px;
}

/* Search content row — flex layout for search + adv button */
.c-search-header__wrapper .search-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 0 !important;
}

.c-search-header__wrapper .search-content:after {
    display: none !important;
}

.c-search-header__wrapper .search-content>* {
    display: inline-flex;
    vertical-align: middle;
}

/* Search form fills remaining space */
.c-search-header__wrapper .search-content .search-form {
    flex: 1;
    min-width: 0;
    position: relative;
}

/* --- Q1. Search Bar --- */
.c-search-header__wrapper .search-content .search-form .search-field {
    background-color: var(--nk-bg-inset) !important;
    color: var(--nk-text-primary) !important;
    border: 1px solid var(--nk-border) !important;
    border-radius: 10px !important;
    font-size: 16px;
    padding: 14px 90px 14px 20px !important;
    height: auto !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.c-search-header__wrapper .search-content .search-form .search-field::placeholder {
    color: var(--nk-text-secondary);
    opacity: 1;
}

.c-search-header__wrapper .search-content .search-form .search-field:focus {
    border-color: var(--nk-accent) !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15) !important;
    outline: none !important;
}

/* Search icon overlay */
.c-search-header__wrapper .search-content .search-form .icon,
.c-search-header__wrapper .search-content .search-form>i {
    color: var(--nk-text-secondary) !important;
    font-size: 22px;
}

/* Submit button (overlaid inside input) */
.c-search-header__wrapper .search-content .search-form .search-submit {
    background-color: var(--nk-accent) !important;
    border-radius: 0 10px 10px 0 !important;
    height: 100% !important;
    transition: background-color 0.2s ease;
}

.c-search-header__wrapper .search-content .search-form .search-submit:hover {
    background-color: #4393e6 !important;
}

/* --- Q2. Advanced Toggle Button --- */
.c-search-header__wrapper .search-content .btn-search-adv {
    background-color: transparent !important;
    border: 2px solid var(--nk-accent) !important;
    color: var(--nk-accent) !important;
    border-radius: 10px !important;
    font-weight: 600;
    padding: 14px 22px !important;
    transition: all 0.2s ease;
}

.c-search-header__wrapper .search-content .btn-search-adv:hover {
    background-color: var(--nk-accent) !important;
    border-color: var(--nk-accent) !important;
    color: #fff !important;
}

/* When collapsed (advanced panel hidden) */
.c-search-header__wrapper .search-content .btn-search-adv.collapsed {
    background-color: var(--nk-accent) !important;
    border-color: var(--nk-accent) !important;
    color: #fff !important;
}

.c-search-header__wrapper .search-content .btn-search-adv.collapsed:hover {
    background-color: #4393e6 !important;
    border-color: #4393e6 !important;
}

/* --- Q3. Advanced Search Panel Container --- */
#search-advanced {
    background-color: var(--nk-bg-surface);
    border: 1px solid var(--nk-border-muted);
    border-radius: var(--nk-radius);
    padding: 24px 28px 28px;
    margin-top: 16px;
}

/* --- Q4. Genre Checkbox Grid --- */
#search-advanced .search-advanced-form .form-group.checkbox-group {
    margin-top: 0;
    padding: 0;
}

#search-advanced .search-advanced-form .form-group.checkbox-group .checkbox {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 6px 0;
}

#search-advanced .search-advanced-form .form-group.checkbox-group .checkbox label {
    color: var(--nk-text-secondary) !important;
    font-weight: 500;
    font-size: 13px;
    padding-left: 0;
    transition: color 0.15s ease;
    cursor: pointer;
    user-select: none;
}

#search-advanced .search-advanced-form .form-group.checkbox-group .checkbox label:hover {
    color: var(--nk-text-primary) !important;
}

/* Custom checkbox styling */
#search-advanced .search-advanced-form .form-group.checkbox-group .checkbox input[type="checkbox"] {
    accent-color: var(--nk-accent);
}

#search-advanced .search-advanced-form .form-group.checkbox-group .checkbox input[type="checkbox"]:checked+label {
    color: var(--nk-accent) !important;
    font-weight: 600;
}

/* Checkbox :before icon (Madara custom) */
#search-advanced .search-advanced-form .form-group.checkbox-group .checkbox label:before {
    color: var(--nk-text-secondary);
}

#search-advanced .search-advanced-form .form-group.checkbox-group .checkbox input[type="checkbox"]:checked+label:before {
    color: var(--nk-accent) !important;
}

/* --- Q5. Form Groups (Author, Artist, Year, etc.) --- */
#search-advanced .search-advanced-form .form-group:not(.checkbox-group) {
    margin-bottom: 20px;
}

/* Labels ("Author", "Artist", etc.) */
#search-advanced .search-advanced-form .form-group:not(.checkbox-group)>span.label,
#search-advanced .search-advanced-form .form-group .label {
    color: var(--nk-text-secondary) !important;
    font-weight: 600;
    font-size: 13px;
    background-color: transparent !important;
    padding: 0 !important;
    margin-right: 12px;
}

/* Text inputs & selects (including .form-control) */
#search-advanced .search-advanced-form .form-group:not(.checkbox-group) input[type="text"],
#search-advanced .search-advanced-form .form-group:not(.checkbox-group) select,
#search-advanced .search-advanced-form .form-group:not(.checkbox-group) .form-control {
    background-color: var(--nk-bg-inset) !important;
    color: var(--nk-text-primary) !important;
    border: 1px solid var(--nk-border) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-weight: 400 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#search-advanced .search-advanced-form .form-group:not(.checkbox-group) input[type="text"]:focus,
#search-advanced .search-advanced-form .form-group:not(.checkbox-group) select:focus,
#search-advanced .search-advanced-form .form-group:not(.checkbox-group) .form-control:focus {
    border-color: var(--nk-accent) !important;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15) !important;
    outline: none !important;
}

/* Select dropdown option colors */
#search-advanced .search-advanced-form .form-group:not(.checkbox-group) select option {
    background-color: var(--nk-bg-surface);
    color: var(--nk-text-primary);
}

/* --- Q6. Genres Condition label --- */
#search-advanced .search-advanced-form .form-group:not(.checkbox-group) span {
    color: var(--nk-text-secondary) !important;
    font-weight: 600;
}

/* --- Q7. Status Inline Checkboxes --- */
#search-advanced .search-advanced-form .form-group .checkbox-inline {
    padding-left: 0;
}

#search-advanced .search-advanced-form .form-group .checkbox-inline label {
    color: var(--nk-text-secondary) !important;
    font-weight: 500;
    font-size: 13px;
    padding-left: 0;
    cursor: pointer;
    transition: color 0.15s ease;
}

#search-advanced .search-advanced-form .form-group .checkbox-inline label:hover {
    color: var(--nk-text-primary) !important;
}

#search-advanced .search-advanced-form .form-group .checkbox-inline input[type="checkbox"] {
    accent-color: var(--nk-accent);
}

#search-advanced .search-advanced-form .form-group .checkbox-inline input[type="checkbox"]:checked+label {
    color: var(--nk-accent) !important;
}

#search-advanced .search-advanced-form .form-group .checkbox-inline label:before {
    color: var(--nk-text-secondary);
}

#search-advanced .search-advanced-form .form-group .checkbox-inline input[type="checkbox"]:checked+label:before {
    color: var(--nk-accent) !important;
}

/* --- Q8. Search / Reset Buttons --- */
#search-advanced .search-advanced-form .form-group.group-btn {
    text-align: center;
    padding-top: 8px;
    border-top: 1px solid var(--nk-border-muted);
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Search button */
#search-advanced .search-advanced-form .form-group.group-btn .c-btn.search-adv-submit {
    background-color: var(--nk-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 36px !important;
    transition: all 0.2s ease;
}

#search-advanced .search-advanced-form .form-group.group-btn .c-btn.search-adv-submit:hover {
    opacity: 0.85;
}

/* Reset button */
#search-advanced .search-advanced-form .form-group.group-btn .c-btn.search-adv-reset {
    background-color: transparent !important;
    color: var(--nk-text-secondary) !important;
    border: 1px solid var(--nk-border) !important;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 36px !important;
    transition: all 0.2s ease;
}

#search-advanced .search-advanced-form .form-group.group-btn .c-btn.search-adv-reset:hover {
    background-color: var(--nk-bg-elevated) !important;
    color: var(--nk-text-primary) !important;
    border-color: var(--nk-border) !important;
}

/* --- Q9. Autocomplete Dropdown --- */
.search-content .ui-autocomplete {
    background-color: var(--nk-bg-surface) !important;
    border: 1px solid var(--nk-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    overflow: hidden;
}

.search-content .ui-autocomplete .ui-menu-item {
    border-bottom: 1px solid var(--nk-border-muted);
}

.search-content .ui-autocomplete .ui-menu-item:last-child {
    border-bottom: none;
}

.search-content .ui-autocomplete .ui-menu-item a,
.search-content .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper {
    color: var(--nk-text-primary) !important;
    background-color: transparent !important;
    padding: 10px 14px;
}

.search-content .ui-autocomplete .ui-menu-item a:hover,
.search-content .ui-autocomplete .ui-menu-item .ui-menu-item-wrapper:hover,
.search-content .ui-autocomplete .ui-menu-item .ui-state-active {
    background-color: var(--nk-bg-elevated) !important;
    color: var(--nk-accent) !important;
}

/* --- Q10. Mobile Responsive --- */
@media (max-width: 768px) {
    #search-advanced {
        padding: 16px 14px 20px;
        border-radius: 8px;
    }

    #search-advanced .search-advanced-form .form-group.group-btn {
        flex-direction: column;
        align-items: stretch;
    }

    #search-advanced .search-advanced-form .form-group.group-btn .c-btn {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .c-search-header__wrapper > .container {
        padding-left: 0;
        padding-right: 0;
    }

    .c-search-header__wrapper .search-content {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 10px;
    }

    .c-search-header__wrapper .search-content .search-form {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        margin-right: 0 !important;
    }

    .c-search-header__wrapper .search-content .search-form .search-field {
        border-radius: 8px !important;
        font-size: 14px;
        padding: 10px 56px 10px 14px !important;
    }

    .c-search-header__wrapper .search-content .search-form .search-submit {
        width: 48px;
        min-width: 48px;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .c-search-header__wrapper .search-content .btn-search-adv {
        width: 100%;
        min-width: 0;
        padding: 10px 12px !important;
        border-radius: 8px !important;
        font-size: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    .mobile .c-search-header__wrapper .search-content .btn-search-adv .label {
        display: inline !important;
        font-size: 0;
    }

    .mobile .c-search-header__wrapper .search-content .btn-search-adv .label::before {
        content: "Filter";
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
    }

    .mobile .c-search-header__wrapper .search-content .btn-search-adv .icon-search-adv {
        display: none !important;
    }
}


/* ==========================================================================
   S. BREADCRUMB & GENRE ARCHIVE PAGE — Design Overhaul
   ========================================================================== */

/* --- S1. Breadcrumb Wrapper --- */
.c-breadcrumb-wrapper {
    background-image: none !important;
    background-color: var(--nk-bg-inset) !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid var(--nk-border-muted);
}

.c-breadcrumb-wrapper .c-breadcrumb {
    margin: 0 !important;
}

.c-breadcrumb-wrapper .c-breadcrumb .breadcrumb {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.c-breadcrumb-wrapper .c-breadcrumb .breadcrumb li {
    font-size: 13px !important;
    color: var(--nk-text-secondary) !important;
    line-height: 1.4;
}

.c-breadcrumb-wrapper .c-breadcrumb .breadcrumb li a {
    color: var(--nk-text-secondary) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.c-breadcrumb-wrapper .c-breadcrumb .breadcrumb li a:hover {
    color: var(--nk-accent) !important;
}

.c-breadcrumb-wrapper .c-breadcrumb .breadcrumb li+li:before {
    content: "\203A" !important;
    padding: 0 8px !important;
    color: var(--nk-text-secondary) !important;
    opacity: 0.4;
    font-size: 15px;
}

.c-breadcrumb-wrapper .c-breadcrumb .breadcrumb li:last-child,
.c-breadcrumb-wrapper .c-breadcrumb .breadcrumb li:last-child a {
    color: var(--nk-text-primary) !important;
    font-weight: 600;
}

@media (max-width: 600px) {
    .c-breadcrumb-wrapper {
        overflow: hidden;
    }

    .c-breadcrumb-wrapper .c-breadcrumb .breadcrumb {
        flex-wrap: nowrap !important;
        align-items: center;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    .c-breadcrumb-wrapper .c-breadcrumb .breadcrumb li {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        min-width: 0;
        line-height: 1.2;
        white-space: nowrap;
    }

    .c-breadcrumb-wrapper .c-breadcrumb .breadcrumb li+li:before {
        flex: 0 0 auto;
    }

    .c-breadcrumb-wrapper .c-breadcrumb .breadcrumb li:last-child {
        flex: 1 1 auto;
        align-items: center;
        overflow: hidden;
    }

    .c-breadcrumb-wrapper .c-breadcrumb .breadcrumb li:last-child a {
        flex: 1 1 auto;
        min-width: 0;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* --- S2. Genres Block --- */
.c-breadcrumb-wrapper .c-genres-block {
    margin-top: 20px !important;
}

/* --- S3. "GENRES" heading row — flex with toggle on right --- */
.c-genres-block .genres_wrap {
    position: relative;
}

.c-genres-block .genres_wrap .c-blog__heading.style-3.font-heading {
    display: inline-flex !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.c-genres-block .genres_wrap .c-blog__heading.style-3.font-heading:after {
    border-top-color: var(--nk-accent) !important;
}

.c-genres-block .genres_wrap .c-blog__heading.style-3 h5 {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--nk-text-secondary) !important;
    margin: 0 !important;
}

/* --- S4. Toggle button --- */
.genres_wrap a.btn-genres {
    border: 1px solid var(--nk-border) !important;
    border-radius: 6px !important;
    padding: 3px 9px !important;
    color: var(--nk-text-secondary) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
}

.genres_wrap a.btn-genres:hover,
.genres_wrap a.btn-genres.active {
    background-color: var(--nk-bg-elevated) !important;
    border-color: var(--nk-accent) !important;
    color: var(--nk-accent) !important;
}

/* --- S5. Genre items — uniform CSS grid --- */
.genres_wrap .genres__collapse {
    padding-top: 12px !important;
    padding-bottom: 4px !important;
}

/* Override Bootstrap row negative margins so grid doesn't bleed to edges */
.genres_wrap .genres__collapse .genres {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.genres_wrap .genres__collapse .genres ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Each li becomes a grid cell */
.genres_wrap .genres__collapse .genres ul li {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    float: none !important;
    padding: 0 !important;
}

/* Genre row: name left / count right */
.genres_wrap .genres__collapse .genres ul li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 7px 12px !important;
    background-color: var(--nk-bg-surface) !important;
    border: 1px solid var(--nk-border-muted) !important;
    border-radius: var(--nk-radius-sm) !important;
    color: var(--nk-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: border-color var(--nk-ease), color var(--nk-ease) !important;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.4 !important;
    width: 100% !important;
}

/* Hide parent's Ionicons bullet ::before */
.genres_wrap .genres__collapse .genres ul li a:before {
    display: none !important;
}

/* Count — right-aligned, dim badge */
.genres_wrap .genres__collapse .genres ul li a .count {
    flex-shrink: 0 !important;
    margin-left: 6px !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    color: var(--nk-text-secondary) !important;
    opacity: 0.55;
    background-color: var(--nk-bg-inset) !important;
    border-radius: 10px !important;
    padding: 1px 6px !important;
    line-height: 1.6 !important;
}

/* Hover */
.genres_wrap .genres__collapse .genres ul li a:hover {
    background-color: var(--nk-bg-elevated) !important;
    border-color: var(--nk-accent) !important;
    color: var(--nk-text-primary) !important;
}

.genres_wrap .genres__collapse .genres ul li a:hover .count {
    opacity: 0.8;
}

/* Active / current genre link highlight */
.genres_wrap .genres__collapse .genres ul li a.active,
.genres_wrap .genres__collapse .genres ul li.active a {
    background-color: var(--nk-bg-elevated) !important;
    border-color: var(--nk-accent) !important;
    color: var(--nk-accent) !important;
}

/* --- S6. Responsive --- */
@media (max-width: 768px) {
    .c-breadcrumb-wrapper {
        padding: 14px 0 !important;
    }

    .c-breadcrumb-wrapper .c-genres-block {
        margin-top: 16px !important;
    }

    .genres_wrap .genres__collapse {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .genres_wrap .genres__collapse .genres ul {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 5px !important;
    }

    .genres_wrap .genres__collapse .genres ul li a {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
}

@media (max-width: 480px) {
    .c-breadcrumb-wrapper .c-breadcrumb .breadcrumb li {
        font-size: 12px !important;
    }

    .genres_wrap .genres__collapse {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    .genres_wrap .genres__collapse .genres ul {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px !important;
    }

    .genres_wrap .genres__collapse .genres ul li a {
        font-size: 12px !important;
        padding: 6px 9px !important;
    }
}


/* ==========================================================================
   T. ARCHIVE NUMBERED PAGINATION
   The archive page now uses .nk-chap-pagination / .nk-page-btn directly,
   sharing all styles with the novel detail chapter list pagination.
   Only extra rules needed here are archive-specific adjustments.
   ========================================================================== */

/* --- T1: Hide the parent's old-style "Older / Newer Posts" nav --- */
.navigation.paging-navigation {
    display: none !important;
}

/* --- T2: Archive-context spacing tweak ---
   The shared .nk-chap-pagination has border-top + margin-top from R3.
   On the archive listing we want a little more breathing room above. */
.c-tabs-item>.nk-chap-pagination {
    margin-top: 24px !important;
    padding-bottom: 8px;
}

/* --- T3: Ensure <a>.nk-page-btn has no underline (links vs buttons) --- */
a.nk-page-btn {
    text-decoration: none !important;
}


/* --- END SITE-WIDE DARK THEME OVERRIDES --- */


/* --- NOVEL READER UI OVERRIDES --- */

/* Hide Default Madara Reader Navigation Headers / Footers */
#manga-reading-nav-head,
#manga-reading-nav-foot,
#text-chapter-toolbar,
.listing-chapters_wrap .wp-manga-chapter.reading:before {
    display: none !important;
}

/* 1. TOP STICKY MENU */
.reading-sticky-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #212529;
    color: #fff;
    height: 60px;
    z-index: 1040;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    padding: 0 15px;
    transform: translateY(-100%);
    /* Start hidden */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

.reading-sticky-menu.visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Admin bar offset — reader sticky menu */
body.admin-bar .reading-sticky-menu.visible {
    transform: translateY(32px);
}

@media (max-width: 782px) {
    body.admin-bar .reading-sticky-menu.visible {
        transform: translateY(46px);
    }
}

/* Fix WP Admin Bar on Mobile so sticky headers don't detach when scrolling down */
@media screen and (max-width: 600px) {
    #wpadminbar {
        position: fixed !important;
    }
}

.reading-sticky-menu-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 60px;
    width: 100%;
    min-width: 0;
}

.reading-sticky-menu .back-to-novel-detail,
.reading-sticky-menu .current-chapter {
    min-width: 0;
}

.reading-sticky-menu .back-to-novel-detail {
    flex: 1 1 52%;
}

.reading-sticky-menu .current-chapter {
    flex: 1 1 48%;
}

.reading-sticky-menu .back-to-novel-detail h4 {
    margin: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    min-width: 0;
}

.reading-sticky-menu .back-to-novel-detail h4 i {
    margin-right: 8px;
    font-size: 18px;
    color: var(--madara-main-color);
    flex: 0 0 auto;
}

.reading-sticky-menu .back-to-novel-detail a {
    display: block;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.sticky-menu-separator {
    margin: 0 10px;
    color: var(--nk-text-secondary);
    flex: 0 0 auto;
}

.reading-sticky-menu .current-chapter h3 {
    display: block;
    margin: 0;
    font-size: 14px;
    color: #ddd;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

@media (max-width: 767px) {
    .reading-sticky-menu {
        height: 56px;
        padding: 0 10px;
    }

    .reading-sticky-menu-inner {
        height: 56px;
        gap: 8px;
    }

    .reading-sticky-menu .back-to-novel-detail h4 {
        font-size: 14px;
    }

    .reading-sticky-menu .back-to-novel-detail h4 i {
        margin-right: 6px;
        font-size: 15px;
    }

    .reading-sticky-menu .current-chapter h3 {
        font-size: 13px;
    }

    .sticky-menu-separator {
        margin: 0 4px;
    }
}

@media (max-width: 480px) {
    .sticky-menu-separator {
        display: block;
        margin: 0 2px;
        opacity: 0.75;
    }

    .reading-sticky-menu .back-to-novel-detail {
        flex-basis: 44%;
    }

    .reading-sticky-menu .current-chapter {
        flex-basis: 56%;
    }
}

/* Adjust main content padding to account for fixed header */
.c-page-content.reading-content-wrap {
    padding-top: 80px;
    /* Space for sticky header */
    padding-bottom: calc(80px + var(--nk-bottom-anchor-offset));
}

/* 2. MANGA INFO BLOCK */
.manga-info {
    position: relative;
    padding: 30px;
    text-align: center;
    color: #fff;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
}

.manga-info .manga-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.manga-info .summary_image {
    position: relative;
    z-index: 1;
    width: 120px;
    margin: 0 auto 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.manga-info .summary_image img {
    border-radius: 4px;
    width: 100%;
    display: block;
}

.manga-info .manga-title h4 {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
}

.manga-info .manga-title a {
    color: #fff;
}

.manga-info .manga-title a:hover {
    color: var(--madara-main-color);
}

.manga-info .chapter-title {
    position: relative;
    z-index: 1;
    margin: 0 0 15px;
}

.manga-info .chapter-title h4,
.manga-info .chapter-title h5 {
    font-size: 16px;
    font-weight: 400;
    color: #ffd900;
    /* Use a distinct warning/accent color to separate it from the novel title */
    margin: 0;
}

/* Ensure visibility in light/warm modes */
body.text-ui-light .manga-info .chapter-title h4,
body.text-ui-light .manga-info .chapter-title h5 {
    color: #d4a000;
    /* Darker gold/yellow for better contrast on light backgrounds */
}

.manga-info .manga-author {
    position: relative;
    z-index: 1;
    font-size: 14px;
    color: #ddd;
}

/* Novel Detail Blurred Background */
.profile-manga.custom-blurred-bg {
    position: relative;
    overflow: hidden;
    background-color: #111;
}

.profile-manga.custom-blurred-bg .manga-background-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Universal Edge-Case Blur Support */
    -webkit-filter: blur(20px);
    /* Safari, iOS, Chrome */
    -moz-filter: blur(20px);
    /* Legacy Firefox */
    -o-filter: blur(20px);
    /* Legacy Opera */
    -ms-filter: blur(20px);
    /* Legacy IE / Edge */
    filter: blur(20px);
    /* Modern W3C Standard */

    /* Universal Transform & GPU Acceleration Matrix */
    -webkit-transform: translateZ(0) scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
    transform: translateZ(0) scale(1.15);

    /* Hardware Acceleration Triggers */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;

    opacity: 0.35;
    z-index: 0;
    overflow: hidden;
}

.profile-manga.custom-blurred-bg .manga-background-blur img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-manga.custom-blurred-bg .container {
    position: relative;
    z-index: 1;
}

/* Prevent horizontal overflow on novel detail pages */
.post-type-wp-manga {
    overflow-x: hidden;
}

/* 3. SIDE-COL (SLIDING SIDEBAR) */
.side-col {
    position: fixed;
    top: 64px;
    /* Sit below the 60px sticky header + small offset */
    right: -350px;
    /* Hidden initially */
    width: 350px;
    height: calc(100vh - 64px);
    background-color: var(--nk-bg-surface);
    z-index: 1050;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
    transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    color: var(--nk-text-primary);
}

.theme-dark .side-col {
    background-color: var(--nk-bg-surface);
    color: var(--nk-text-primary);
}

.theme-yellow .side-col {
    background-color: #f4ecd8;
    color: #5b4636;
}

.theme-yellow .side-col h4 {
    background-color: #ebe3ce;
    border-color: #d6cdb5;
    color: #5b4636;
}

.theme-yellow .side-col h4 span.active {
    color: #5b4636;
}

.theme-yellow .chapters-list .wp-manga-chapter {
    border-color: #d6cdb5;
}

.theme-yellow .chapters-list .wp-manga-chapter a {
    color: #5b4636;
}

.side-col.open {
    right: 0;
}

/* Admin bar offset — side-col panel */
body.admin-bar .side-col {
    top: calc(64px + 32px);
    height: calc(100vh - 64px - 32px);
}

@media (max-width: 782px) {
    body.admin-bar .side-col {
        top: calc(64px + 46px);
        height: calc(100vh - 64px - 46px);
    }
}

.side-col h4 {
    margin: 0;
    padding: 15px 20px;
    background-color: var(--nk-bg-elevated);
    border-bottom: 1px solid var(--nk-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.theme-dark .side-col h4 {
    background-color: var(--nk-bg-elevated);
    border-color: var(--nk-border);
    color: var(--nk-text-primary);
}

.side-col-tabs {
    display: flex;
    align-items: center;
    gap: 15px;
}

.side-col-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.side-col h4 span {
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: var(--nk-text-secondary);
    padding-bottom: 5px;
}

.side-col h4 span.active {
    color: var(--nk-text-primary);
    border-bottom: 2px solid var(--madara-main-color);
}

.theme-dark .side-col h4 span.active {
    color: var(--nk-text-primary);
}

.btn-reverse-chapters {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--nk-text-secondary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    transform: rotate(90deg);
}

.btn-reverse-chapters:hover {
    color: var(--madara-main-color);
    background-color: rgba(0, 0, 0, 0.05);
}

.theme-dark .btn-reverse-chapters:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.btn-reverse-chapters.reversed {
    color: var(--madara-main-color);
}

.side-col .close-btn button {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--nk-text-secondary);
    cursor: pointer;
    padding: 0;
}

.side-col .close-btn button:hover {
    color: var(--madara-main-color);
}

.side-col-inner {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* Sidebar Tab Content */
.chapters-list,
.comments-list {
    display: none;
}

.chapters-list.active,
.comments-list.active {
    display: block;
}

/* Chapter List Styling inside sidebar */
.chapters-list .version-chap {
    list-style: none;
    padding: 0;
    margin: 0;
}

.chapters-list .wp-manga-chapter {
    padding: 10px 0;
    border-bottom: 1px solid var(--nk-border-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.theme-dark .chapters-list .wp-manga-chapter {
    border-color: var(--nk-border);
}

.chapters-list .wp-manga-chapter a {
    color: var(--nk-text-primary);
    text-decoration: none;
    font-size: 14px;
}

.theme-dark .chapters-list .wp-manga-chapter a {
    color: var(--nk-text-secondary);
}

.chapters-list .wp-manga-chapter.reading a {
    color: var(--madara-main-color);
    font-weight: 600;
}

.chapters-list .chapter-release-date i {
    font-size: 12px;
    color: var(--nk-text-secondary);
}

/* Adjust Main Body when sidebar open */
body.novel-sidebar-open {
    overflow: hidden;
    /* Prevent scrolling body when sidebar is open */
}

/* 4. BOTTOM SIDEBAR TOOLS (Floating Navbar) */
.sidebar-tools {
    position: fixed;
    bottom: calc(20px + var(--nk-bottom-anchor-offset));
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--nk-bg-surface);
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
    z-index: 1045;
    padding: 5px 20px;
    display: flex;
    align-items: center;
}

.theme-dark .sidebar-tools {
    background-color: var(--nk-bg-elevated);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.sidebar-tools-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sidebar-tools-item {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Spacing between buttons */
}

.sidebar-tools button,
.sidebar-tools .btn-nav-chap {
    background: none;
    border: none;
    color: var(--nk-text-secondary) !important;
    font-size: 20px;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-dark .sidebar-tools button,
.theme-dark .sidebar-tools .btn-nav-chap {
    color: var(--nk-text-secondary) !important;
}

.sidebar-tools button:hover,
.sidebar-tools .btn-nav-chap:not(.disabled):hover {
    color: var(--madara-main-color) !important;
    background-color: rgba(0, 0, 0, 0.05);
}

.theme-dark .sidebar-tools button:hover,
.theme-dark .sidebar-tools .btn-nav-chap:not(.disabled):hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-tools .btn-nav-chap.disabled {
    opacity: 0.15;
    cursor: not-allowed;
}

.reading-settings {
    position: relative;
}

/* 5. READER SETTINGS MODAL */
#wp-manga-reader-settings {
    display: none;
    position: absolute;
    bottom: 60px;
    /* Above the bottom bar */
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    background-color: var(--nk-bg-surface);
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.35);
    z-index: 1060;
    overflow: hidden;
    color: var(--nk-text-primary);
}

.theme-dark #wp-manga-reader-settings {
    background-color: var(--nk-bg-surface);
    color: var(--nk-text-primary);
}

#wp-manga-reader-settings.show {
    display: block;
    animation: slideUpFade 0.3s ease forwards;
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translate(-50%, 10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

#wp-manga-reader-settings .box-header {
    padding: 0;
    height: 40px;
    border-bottom: 1px solid var(--nk-border);
    position: relative;
}

.theme-dark #wp-manga-reader-settings .box-header {
    border-color: var(--nk-border);
}

#wp-manga-reader-settings .box-header .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: var(--nk-text-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
}

#wp-manga-reader-settings .box-header .close:hover {
    color: var(--madara-main-color);
}

#wp-manga-reader-settings .box-body {
    padding: 20px;
}

#wp-manga-reader-settings section {
    margin-bottom: 20px;
}

#wp-manga-reader-settings h6 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nk-text-secondary);
    text-transform: uppercase;
}

.theme-dark #wp-manga-reader-settings h6 {
    color: var(--nk-text-secondary);
}

/* Font Selection */
.theme-set-font {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}

.theme-set-font li {
    flex: 1;
}

.theme-set-font input[type="radio"] {
    display: none;
}

.theme-set-font label {
    display: block;
    text-align: center;
    padding: 8px 0;
    border: 1px solid var(--nk-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
    color: var(--nk-text-primary);
}

.theme-dark .theme-set-font label {
    border-color: var(--nk-border);
}

.theme-set-font input[type="radio"]:checked+label {
    border-color: var(--madara-main-color);
    color: var(--madara-main-color);
    background-color: rgba(0, 0, 0, 0.05);
}

/* Text Size Slider */
.slidecontainer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slidecontainer .slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--nk-border);
    outline: none;
}

.theme-dark .slidecontainer .slider {
    background: var(--nk-border);
}

.slidecontainer .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--madara-main-color);
    cursor: pointer;
}

/* Background Color Selection */
.theme-set-color {
    display: flex;
    gap: 10px;
}

.theme-set-color label {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
}

.theme-set-color label input {
    display: none;
}

.theme-set-color label[data-schema="default"] {
    background-color: #fff;
    border-color: var(--nk-border);
}

.theme-set-color label[data-schema="yellow"] {
    background-color: #f4ecd8;
}

.theme-set-color label[data-schema="dark"] {
    background-color: #222;
}

.theme-set-color label.active {
    border-color: var(--madara-main-color);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--madara-main-color);
}

.theme-set-color label strong {
    display: none;
    /* Hide the 'T', keep it clean */
}

/* Settings Footer */
.box-footer {
    padding: 15px;
    text-align: center;
    border-top: 1px solid var(--nk-border);
}

.theme-dark .box-footer {
    border-color: var(--nk-border);
}

.reset-reader-settings {
    background: none;
    border: none;
    color: var(--nk-text-secondary);
    font-size: 14px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 600;
}

.reset-reader-settings:hover {
    color: var(--nk-text-primary);
}

.theme-dark .reset-reader-settings:hover {
    color: var(--nk-text-primary);
}

/* 6. READING CONTENT THEMES */
/* Ensure the wrapper covers the full area and provides the background context */
.reading-content-wrap {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Base Reading Content specificity boost */
.reading-content,
.reading-content p,
.reading-content span,
.reading-content div {
    color: inherit !important;
}

/* Light Theme */
body.theme-light {
    background-color: #ffffff !important;
}

.theme-light.reading-content-wrap,
.theme-light .c-page-content {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* Dark Theme (Default) */
body.theme-dark {
    background-color: #1a1a1a !important;
}

.theme-dark.reading-content-wrap,
.theme-dark .c-page-content {
    background-color: #1a1a1a !important;
    color: #eeeeee !important;
}

/* Yellow / Warm Theme */
body.theme-yellow {
    background-color: #f4ecd8 !important;
}

.theme-yellow.reading-content-wrap,
.theme-yellow .c-page-content {
    background-color: #f4ecd8 !important;
    color: #5b4636 !important;
}

/* Specific overrides for Madara's native elements to prevent color bleeding */
.theme-light .reading-content p,
.theme-light .reading-content h1,
.theme-light .reading-content h2,
.theme-light .reading-content h3 {
    color: #333333 !important;
}

.theme-dark .reading-content p,
.theme-dark .reading-content h1,
.theme-dark .reading-content h2,
.theme-dark .reading-content h3 {
    color: #eeeeee !important;
}

.theme-yellow .reading-content p,
.theme-yellow .reading-content h1,
.theme-yellow .reading-content h2,
.theme-yellow .reading-content h3 {
    color: #5b4636 !important;
}

/* 7. GLOBAL HEADER FIXES / PROTECTIONS */
/* Ensure footer and header maintain their native colors regardless of body reader-theme */
.site-footer,
.site-footer .copyright p,
.copyright a {
    color: var(--nk-text-secondary) !important;
}

/* Force sub-header-nav elements to maintain visibility on dark header background
   Scoped to .c-sub-header-nav to avoid conflicting with the new nk-header */
.c-sub-header-nav a,
.c-sub-header-nav span {
    color: #ffffff !important;
}

/* Ensure dropdown menus remain legible (light text on dark background) */
.c-sub-header-nav .sub-menu a,
.c-sub-header-nav .sub-menu span,
.c-sub-header-nav .sub-menu li,
.c-sub-header-nav .sub-menu i,
.c-sub-header-nav .dropdown-menu a,
.c-sub-header-nav .dropdown-menu span,
.c-sub-header-nav .dropdown-menu li,
.c-sub-header-nav .dropdown-menu i {
    color: var(--nk-text-primary) !important;
}

/* Protect header background from theme-class bleed */
.c-sub-header-nav {
    background-color: inherit;
}

/* Fix Search Icon: Hide chaotic inner tags from Madara parent theme (sub-header only) */
.c-sub-header-nav .open-search-main-menu i {
    display: none !important;
}

.c-sub-header-nav .open-search-main-menu {
    background: transparent !important;
    width: 40px;
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    text-decoration: none !important;
}

.c-sub-header-nav .open-search-main-menu:hover {
    border-color: rgba(255, 255, 255, 0.7) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Default state: Magnifying Glass */
.c-sub-header-nav .open-search-main-menu:before {
    font-family: 'Font Awesome 5 Free', 'FontAwesome', sans-serif !important;
    content: '\f002' !important;
    /* fa-search */
    font-weight: 900 !important;
    font-size: 14px;
    color: #ffffff !important;
}

/* Open state: 'X' Close icon */
.c-sub-header-nav .open-search-main-menu.search-open:before {
    content: '\f00d' !important;
    /* fa-times */
}

/* Note: we override the parent .c-page-content color rules to allow the reader settings JS to take full priority */
.reading-content p {
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
}



/* 7. IMMERSIVE READING MODE (AUTO-HIDE UI) */
.reading-sticky-menu,
.sidebar-tools {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
}

body.reader-ui-hidden .reading-sticky-menu {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

body.reader-ui-hidden .sidebar-tools {
    transform: translateX(-50%) translateY(150%);
    opacity: 0;
    pointer-events: none;
}

/* 8. FOOTER CENTERING & PADDING OVERRIDE */
.site-footer {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    text-align: center;
    background-color: var(--nk-bg-header) !important;
    border-top: 1px solid var(--nk-border-muted) !important;
    border-bottom: none !important;
}

.site-footer .copyright p {
    margin-bottom: 0;
    line-height: normal;
}

/* Ensure the page always fills the full viewport height, preventing any gap below footer */
html.theme-dark,
html.theme-light,
html.theme-yellow {
    min-height: 100%;
    overscroll-behavior: none;
    /* Prevents iOS/Android rubber-band bounce exposing white canvas */
}

body.theme-dark,
body.theme-light,
body.theme-yellow {
    min-height: 100vh;
    overscroll-behavior: none;
}

/* Sticky Footer: Ensure footer is always at the bottom of the viewport */
.body-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
}

/* 9. GOOGLE ADSENSE / AUTO ADS STABILITY
   Goal: allow vignette + bottom anchor ads to render while preventing
   Google-injected body siblings from pushing the header or footer out of place.
   A small runtime observer in nk-header.js measures any flow-based Google
   placeholders and updates these CSS variables accordingly. */
body > .wrap {
    position: relative;
    z-index: 1;
    margin-top: calc(var(--nk-google-top-gap) * -1);
    margin-bottom: calc(var(--nk-google-bottom-gap) * -1);
}

/* Reader pages keep the same stable reading surface even when a bottom
   anchor ad appears. The toolbar is lifted above the ad by the shared
   --nk-bottom-anchor-offset variable updated at runtime. */
body.nk-reader-page {
    --nk-reader-bottom-safe-area: calc(var(--nk-bottom-anchor-offset) + env(safe-area-inset-bottom, 0px));
}

/* 10. MANGA ITEM UI ENHANCEMENTS */
/* Rounded Corners for Manga Thumbnails, Single Page Images, and Sliders */
.item-thumb,
.summary_image,
.slider__thumb,
.item-thumb img,
.summary_image img,
.slider__thumb img,
.placeholder-image {
    border-radius: var(--nk-radius) !important;
    overflow: hidden !important;
}

/* Ensure the hover effect respects rounded corners */
.c-image-hover {
    border-radius: var(--nk-radius) !important;
    overflow: hidden !important;
}

.c-image-hover:hover img {
    border-radius: var(--nk-radius) !important;
}

/* Rounded Corners for Summary Content Buttons and Actions */
.summary_content .c-btn,
.summary_content .action_icon,
.summary_content .add-bookmark .action_icon,
.manga-action .action_icon {
    border-radius: var(--nk-radius) !important;
    overflow: hidden !important;
}

/* Round summary content container */
.summary_content {
    border-radius: var(--nk-radius) !important;
}

/* 11. MOBILE LAYOUT IMPROVEMENTS */
@media (max-width: 768px) {

    /* Side-col: full width on mobile */
    .side-col {
        width: 100%;
        right: -100%;
    }

    /* Add gap between summary content and action buttons (Read First/Last) */
    #init-links {
        margin-top: 20px !important;
        clear: both;
        display: block;
        width: 100%;
    }

    /* Ensure buttons stack nicely or have space */
    #init-links span {
        display: block;
        width: 100%;
    }

    #init-links .c-btn {
        margin-bottom: 10px;
        width: 100%;
        display: block;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --- NOVEL DETAIL: stable block layout on mobile (prevents reflow shift) --- */
    /* Parent leaves .tab-summary as display:table and sets .summary_image to
       display:inherit (inherits table!) — force everything to block. */
    .profile-manga .tab-summary {
        display: block !important;
        padding-bottom: 20px !important;
    }

    /* Cover image wrapper: fixed width box, centered, no bleed */
    .profile-manga .tab-summary .summary_image {
        display: block !important;
        width: 193px !important;
        max-width: 100% !important;
        margin: 0 auto 16px !important;
        padding: 10px !important;
        box-sizing: content-box !important;
    }

    /* Contain the image flush inside the matte wrapper */
    .profile-manga .tab-summary .summary_image a {
        display: block;
    }

    .profile-manga .tab-summary .summary_image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        padding-top: 0 !important;
        /* override lazyload inline padding-top */
    }

    .profile-manga .tab-summary .summary_content_wrap {
        display: block !important;
        padding-left: 0 !important;
        padding-top: 0 !important;
    }

    .profile-manga .tab-summary .summary_content_wrap .summary_content {
        min-height: auto !important;
        left: 0 !important;
        padding: 20px 16px 16px !important;
    }
}


/* =============================================================================
   NK NOVEL LISTING — Archive / Genre / Taxonomy listing pages
   Design overhaul for symmetry, better UI/UX, and seamless appearance.
   Uses the NK design-system variables defined in :root.

   NOTE: Parent theme (madara) uses long body.page-prefixed selectors.
   Our overrides MUST match or exceed that specificity.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. RESULTS HEADER BAR  (.c-blog__heading)
   The top bar showing result count + order-by filter tabs.
   --------------------------------------------------------------------------- */
.c-page__content .c-blog__heading.style-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    background: var(--nk-bg-surface);
    border: 1px solid var(--nk-border-muted);
    border-radius: var(--nk-radius);
    padding: 14px 20px;
    margin-bottom: 24px;
}

/* Suppress parent theme's bottom border and heading underline */
body.page .c-page-content .main-col-inner .c-blog__heading.style-2 {
    border-bottom: none;
}

/* Results count badge */
.c-blog__heading.style-2 .h4 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nk-text-secondary);
    margin: 0;
    padding: 0;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.c-blog__heading.style-2 .h4 i {
    color: var(--nk-accent);
    font-size: 16px;
}

/* Suppress parent theme's ::before/::after pseudo-elements on the heading */
.c-page__content .c-blog__heading.style-2::before,
.c-page__content .c-blog__heading.style-2::after {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   2. ORDER-BY TABS  (.c-nav-tabs)
   Horizontal pill-shaped filter toggles.
   --------------------------------------------------------------------------- */
.c-blog__heading .c-nav-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.c-blog__heading .c-nav-tabs>span {
    font-size: 13px;
    font-weight: 500;
    color: var(--nk-text-secondary);
    margin-right: 4px;
    white-space: nowrap;
}

.c-blog__heading .c-nav-tabs .c-tabs-content {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.c-blog__heading .c-nav-tabs .c-tabs-content li {
    margin: 0;
    padding: 0;
}

.c-blog__heading .c-nav-tabs .c-tabs-content li a {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--nk-text-secondary) !important;
    text-decoration: none !important;
    border-radius: 6px;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.c-blog__heading .c-nav-tabs .c-tabs-content li a:hover {
    color: var(--nk-text-primary) !important;
    background: var(--nk-bg-elevated);
    border-color: var(--nk-border-muted);
    text-decoration: none !important;
}

.c-blog__heading .c-nav-tabs .c-tabs-content li a:active,
.c-blog__heading .c-nav-tabs .c-tabs-content li a:focus {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Active tab */
.c-blog__heading .c-nav-tabs .c-tabs-content li.active a {
    color: var(--nk-text-primary) !important;
    background: var(--nk-bg-elevated);
    border-color: var(--nk-border);
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   3. TAB WRAPPER CLEANUP
   Remove parent theme visual artifacts from the tab/page wrapper.
   --------------------------------------------------------------------------- */
.c-page__content .tab-wrap {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.c-page__content .tab-content-wrap {
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   4. NOVEL LISTING GRID  (.page-listing-item rows)
   Override parent theme's border-based separators with card-based layout.
   --------------------------------------------------------------------------- */
body.page .page-content-listing {
    margin-top: 0;
}

body.page .page-content-listing .page-listing-item {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 20px !important;
}

body.page .page-content-listing .page-listing-item:last-of-type {
    margin-bottom: 0 !important;
}

body.page .page-content-listing .page-listing-item {
    --nk-row-gap: 20px;
    --nk-column-size: calc((100% - var(--nk-row-gap)) / 2);
    --nk-card-direction: row;
    --nk-card-align: flex-start;
    --nk-card-gap: 16px;
    --nk-card-padding: 16px;
    --nk-thumb-width: 110px;
    --nk-thumb-max-width: 110px;
    --nk-thumb-aspect: 175 / 238;
    --nk-title-size: 15px;
    --nk-title-min-height: 0px;
    --nk-rating-min-height: auto;
    --nk-chapter-min-height: 0px;
    --nk-chapter-offset: 0;
}

body.page .page-content-listing .page-listing-item>.row {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--nk-row-gap);
    margin: 0;
    padding: 0;
}

body.page .page-content-listing .page-listing-item>.row>[class*="col-"] {
    flex: 0 0 var(--nk-column-size);
    max-width: var(--nk-column-size);
    padding: 0 !important;
    margin-bottom: 0;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   5. NOVEL CARD PANEL  (.page-item-detail)
   Surface-colored panels with border, radius, and hover elevation.
   Override parent's float-based layout with flexbox.
   --------------------------------------------------------------------------- */
body.page .page-content-listing .page-listing-item .page-item-detail {
    display: flex !important;
    flex-direction: var(--nk-card-direction);
    align-items: var(--nk-card-align);
    gap: var(--nk-card-gap);
    background: var(--nk-bg-surface);
    border: 1px solid var(--nk-border-muted);
    border-radius: var(--nk-radius);
    padding: var(--nk-card-padding);
    margin-bottom: 0 !important;
    height: 100%;
    box-sizing: border-box;
    transition: border-color var(--nk-ease);
}

body.page .page-content-listing .page-listing-item .page-item-detail:hover {
    border-color: var(--nk-border);
}

/* Suppress parent's clearfix ::after */
body.page .page-content-listing .page-listing-item .page-item-detail:after {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   6. THUMBNAIL  (.item-thumb)
   Override parent's float:left with flex-shrink. Consistent size + rounded.
   --------------------------------------------------------------------------- */
body.page .page-content-listing .page-listing-item .page-item-detail .item-thumb {
    flex-shrink: 0;
    width: var(--nk-thumb-width) !important;
    max-width: var(--nk-thumb-max-width);
    float: none !important;
    margin-right: 0 !important;
    border-radius: var(--nk-radius-sm);
    overflow: hidden;
    transition: opacity var(--nk-ease);
}

body.page .page-content-listing .page-listing-item .page-item-detail:hover .item-thumb {
    opacity: 0.9;
}

body.page .page-content-listing .page-listing-item .page-item-detail .item-thumb a {
    display: block;
    line-height: 0;
    aspect-ratio: var(--nk-thumb-aspect);
}

body.page .page-content-listing .page-listing-item .page-item-detail .item-thumb img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover;
    border-radius: 8px;
}

/* ---------------------------------------------------------------------------
   7. ITEM SUMMARY  (.item-summary)
   Override parent's overflow:hidden with flex column.
   --------------------------------------------------------------------------- */
body.page .page-content-listing .page-listing-item .page-item-detail .item-summary {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible !important;
}

/* Novel title */
body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .post-title {
    margin: 0;
    padding: 0;
    min-height: var(--nk-title-min-height);
}

body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .post-title h3 {
    margin: 0;
    padding: 0;
    font-size: var(--nk-title-size);
    font-weight: 700;
    line-height: 1.4;
}

body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .post-title h3 a {
    color: var(--nk-text-primary) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .post-title h3 a:hover {
    color: var(--nk-accent) !important;
}

/* Hide empty rating divs to prevent extra spacing */
body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .rating {
    margin-bottom: 0 !important;
    min-height: var(--nk-rating-min-height);
}

body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .rating .post-total-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .rating .score {
    margin-left: 2px;
}

body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter {
    margin-top: var(--nk-chapter-offset);
}

body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .meta-item.rating:empty {
    display: none;
}

/* ---------------------------------------------------------------------------
   8. CHAPTER LINKS  (.list-chapter, .chapter-item)
   Override parent's pill-button style with compact clean rows.
   --------------------------------------------------------------------------- */
body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 8px !important;
    min-height: var(--nk-chapter-min-height);
    border: 1px solid var(--nk-border-muted);
    border-radius: 8px;
    background: transparent;
}

body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item:last-child {
    margin-bottom: 0 !important;
}

/* Chapter link span container — remove parent's pill styling */
body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item .chapter {
    background-color: transparent !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    max-width: none !important;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: normal !important;
}

/* Also override the dark mode border styling from parent */
body.page.text-ui-light .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item .chapter {
    background: transparent !important;
    border: none !important;
}

/* Chapter link text */
body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item .chapter a {
    display: block !important;
    font-size: 13px;
    font-weight: 500;
    color: var(--nk-text-secondary) !important;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
}

body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item .chapter a:hover {
    color: var(--nk-accent) !important;
}

/* Override parent's hover state that turns pill bg to primary color */
body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item .chapter:hover {
    background-color: transparent !important;
}

body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item .chapter:hover a {
    color: var(--nk-accent) !important;
}

/* Chapter item spans — override parent's inline-block + margin */
body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item span {
    display: inline-flex !important;
    margin-right: 0 !important;
    vertical-align: middle;
}

body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item span:last-child {
    margin-right: 0 !important;
}

/* Timestamp */
body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item .post-on.font-meta {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--nk-text-secondary);
    opacity: 0.7;
    white-space: nowrap;
    display: none !important;
}

.widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item .post-on {
    display: none !important;
}

/* Also override the generic chapter-item a color from parent */
body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item a {
    color: var(--nk-text-secondary) !important;
    font-weight: 500 !important;
}

body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item a:hover {
    color: var(--nk-accent) !important;
}

/* ---------------------------------------------------------------------------
   9. DARK MODE OVERRIDES for chapter styling
   Match the extremely long selectors the parent theme uses.
   --------------------------------------------------------------------------- */
body.page.text-ui-light .c-page-content .c-page .c-page__content .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item .chapter {
    background: transparent !important;
    border: none !important;
}

body.page.text-ui-light .c-page-content .c-page .c-page__content .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item .chapter a {
    color: var(--nk-text-secondary) !important;
}

body.page.text-ui-light .c-page-content .c-page .c-page__content .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item .chapter a:hover {
    color: var(--nk-accent) !important;
}

/* Also override the border-color on listing items in dark mode */
body.page.text-ui-light .c-page-content .c-page .c-page__content .page-content-listing .page-listing-item {
    border-color: transparent !important;
}

@media (min-width: 768px) {
    body.page .page-content-listing .page-listing-item.nk-cols-2 {
        --nk-column-size: calc((100% - var(--nk-row-gap)) / 2);
        --nk-thumb-width: clamp(84px, 9vw, 104px);
        --nk-thumb-max-width: 104px;
        --nk-card-gap: 14px;
        --nk-title-min-height: 42px;
        --nk-rating-min-height: 20px;
        --nk-chapter-min-height: 38px;
    }

    body.page .page-content-listing .page-listing-item.nk-cols-3 {
        --nk-column-size: calc((100% - (var(--nk-row-gap) * 2)) / 3);
        --nk-thumb-width: clamp(88px, 8vw, 112px);
        --nk-thumb-max-width: 112px;
        --nk-card-gap: 14px;
        --nk-title-min-height: 42px;
        --nk-rating-min-height: 20px;
        --nk-chapter-min-height: 38px;
    }

    body.page .page-content-listing .page-listing-item.nk-cols-4 {
        --nk-column-size: calc((100% - (var(--nk-row-gap) * 3)) / 4);
        --nk-thumb-width: clamp(92px, 7vw, 120px);
        --nk-thumb-max-width: 120px;
        --nk-card-gap: 14px;
        --nk-card-padding: 14px;
        --nk-title-size: 14px;
        --nk-title-min-height: 40px;
        --nk-rating-min-height: 18px;
        --nk-chapter-min-height: 36px;
    }

    body.page .page-content-listing .page-listing-item.nk-cols-5,
    body.page .page-content-listing .page-listing-item.nk-cols-6,
    body.page .page-content-listing.auto-cols .page-listing-item {
        --nk-card-direction: column;
        --nk-card-align: stretch;
        --nk-card-gap: 12px;
        --nk-card-padding: 12px;
        --nk-thumb-width: 100%;
        --nk-thumb-max-width: none;
        --nk-title-size: 14px;
        --nk-title-min-height: 58px;
        --nk-rating-min-height: 18px;
        --nk-chapter-min-height: 36px;
        --nk-chapter-offset: auto;
    }

    body.page .page-content-listing .page-listing-item.nk-cols-5 {
        --nk-column-size: calc((100% - (var(--nk-row-gap) * 4)) / 5);
    }

    body.page .page-content-listing .page-listing-item.nk-cols-6,
    body.page .page-content-listing.auto-cols .page-listing-item {
        --nk-column-size: calc((100% - (var(--nk-row-gap) * 5)) / 6);
    }

    body.page .page-content-listing .page-listing-item.nk-cols-5 .page-item-detail .item-summary,
    body.page .page-content-listing .page-listing-item.nk-cols-6 .page-item-detail .item-summary,
    body.page .page-content-listing.auto-cols .page-listing-item .page-item-detail .item-summary {
        width: 100%;
    }

    body.page .page-content-listing .page-listing-item.nk-cols-5 .page-item-detail .item-thumb,
    body.page .page-content-listing .page-listing-item.nk-cols-6 .page-item-detail .item-thumb,
    body.page .page-content-listing.auto-cols .page-listing-item .page-item-detail .item-thumb {
        margin-bottom: 0;
    }

    body.page .page-content-listing .page-listing-item.nk-cols-5 .page-item-detail .item-summary .post-title h3 a,
    body.page .page-content-listing .page-listing-item.nk-cols-6 .page-item-detail .item-summary .post-title h3 a,
    body.page .page-content-listing.auto-cols .page-listing-item .page-item-detail .item-summary .post-title h3 a {
        -webkit-line-clamp: 3;
    }

    body.page .page-content-listing .page-listing-item.nk-cols-5 .page-item-detail .item-summary,
    body.page .page-content-listing .page-listing-item.nk-cols-6 .page-item-detail .item-summary,
    body.page .page-content-listing.auto-cols .page-listing-item .page-item-detail .item-summary {
        gap: 8px;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    body.page .page-content-listing .page-listing-item.nk-cols-4 {
        --nk-card-direction: column;
        --nk-card-align: stretch;
        --nk-card-gap: 12px;
        --nk-thumb-width: 100%;
        --nk-thumb-max-width: none;
        --nk-card-padding: 12px;
        --nk-title-min-height: 54px;
        --nk-chapter-offset: auto;
    }
}

@media (min-width: 1025px) and (max-width: 1399px) {
    body.page .page-content-listing .page-listing-item.nk-cols-5 {
        --nk-title-min-height: 54px;
    }
}

@media (min-width: 1400px) {
    body.page .page-content-listing .page-listing-item {
        --nk-row-gap: 22px;
    }

    body.page .page-content-listing .page-listing-item.nk-cols-5,
    body.page .page-content-listing .page-listing-item.nk-cols-6,
    body.page .page-content-listing.auto-cols .page-listing-item {
        --nk-card-padding: 14px;
    }
}

/* ---------------------------------------------------------------------------
   10. RESPONSIVE — Mobile (< 768px)
   Single-column layout with adapted spacing.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* Header bar — stack vertically */
    .c-page__content .c-blog__heading.style-2 {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
        gap: 10px;
        border-radius: 10px;
        margin-bottom: 16px;
    }

    /* Tabs scroll horizontally on small screens */
    .c-blog__heading .c-nav-tabs {
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .c-blog__heading .c-nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .c-blog__heading .c-nav-tabs .c-tabs-content {
        flex-wrap: nowrap;
    }

    /* Single column cards */
    body.page .page-content-listing .page-listing-item>.row>[class*="col-"] {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px;
    }

    body.page .page-content-listing .page-listing-item>.row {
        gap: 12px;
    }

    /* Card padding */
    body.page .page-content-listing .page-listing-item .page-item-detail {
        padding: 14px !important;
        gap: 14px;
        border-radius: 10px;
        align-items: stretch;
    }

    /* Slightly smaller thumb on mobile */
    body.page .page-content-listing .page-listing-item .page-item-detail .item-thumb {
        width: 90px !important;
    }

    body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .post-title h3 {
        font-size: 14px;
    }

    body.page .page-content-listing .page-listing-item .page-item-detail .item-summary {
        gap: 8px;
    }

    body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .rating {
        min-height: 18px;
    }

    body.page .page-content-listing .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item {
        min-height: 34px;
    }

    body.page .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    body.page .page-content-listing.item-big_thumbnail .page-listing-item>.row {
        display: flex !important;
        flex-wrap: wrap;
        gap: 12px;
        margin: 0;
        padding: 0;
    }

    body.page .page-content-listing.item-big_thumbnail .page-listing-item>.row>[class*="col-"] {
        flex: 0 0 calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        min-width: 0;
        padding: 0 !important;
        margin-bottom: 0;
        box-sizing: border-box;
    }

    body.page .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-thumb {
        width: 100% !important;
        max-width: none;
        margin: 0 0 10px !important;
    }

    body.page .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-thumb a {
        aspect-ratio: auto;
    }

    body.page .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-thumb img {
        height: auto !important;
    }

    body.page .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary {
        width: 100%;
        gap: 8px;
        flex: 1 1 auto;
    }

    body.page .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .post-title {
        min-height: 0;
    }

    /* Override parent's mobile margin on item-detail */
    body.page .page-content-listing .page-listing-item .page-item-detail {
        margin-bottom: 0 !important;
    }
}

/* ---------------------------------------------------------------------------
   11. RESPONSIVE — Tablet tweaks (768px – 1024px)
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
    body.page .page-content-listing .page-listing-item .page-item-detail .item-thumb {
        width: 100px !important;
    }

    body.page .page-content-listing .page-listing-item .page-item-detail {
        padding: 14px !important;
        gap: 14px;
    }
}

@media (max-width: 767px) {
    .page-content-listing.item-big_thumbnail .page-listing-item>.row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start;
        gap: 12px;
        margin: 0;
        padding: 0;
    }

    .page-content-listing.item-big_thumbnail .page-listing-item>.row>[class*="col-"] {
        flex: 0 0 calc((100% - 12px) / 2) !important;
        width: calc((100% - 12px) / 2) !important;
        max-width: calc((100% - 12px) / 2) !important;
        min-width: 0;
        float: none !important;
        clear: none !important;
        padding: 0 !important;
        margin-bottom: 0;
        box-sizing: border-box;
        align-self: flex-start;
    }

    .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-thumb {
        width: 100% !important;
        max-width: none;
        float: none !important;
        margin: 0 0 10px !important;
    }

    .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-thumb a {
        aspect-ratio: auto;
    }

    .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-thumb img {
        height: auto !important;
    }

    .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary {
        width: 100%;
        gap: 8px;
        flex: 0 1 auto;
    }

    .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .post-title {
        min-height: 36px;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item>.row {
        display: flex !important;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
        margin: 0;
        padding: 0;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item>.row>[class*="col-"] {
        flex: 0 0 calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        min-width: 0;
        padding: 0 !important;
        margin-bottom: 0;
        box-sizing: border-box;
        align-self: flex-start;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        padding: 10px !important;
        gap: 0;
        height: auto;
        min-height: 0;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-thumb {
        width: 100% !important;
        max-width: none;
        float: none !important;
        margin: 0 0 10px !important;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 0 1 auto;
        width: 100%;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .post-title {
        min-height: 36px;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .post-title h3 {
        font-size: 13px;
        line-height: 1.35;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .rating {
        display: flex;
        align-items: center;
        min-height: 18px;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .rating .post-total-rating {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .rating .ratings_stars {
        font-size: 13px;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .rating .score {
        font-size: 12px;
        margin-left: 2px;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .list-chapter {
        margin-top: 0;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        padding: 6px 8px;
        margin-bottom: 0 !important;
        gap: 6px;
        min-height: 32px;
        border-radius: 7px;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item:nth-child(n+2) {
        display: none !important;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item .post-on {
        display: none !important;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item .chapter {
        display: flex !important;
        align-items: center;
        gap: 4px;
        min-width: 0;
        width: 100%;
        margin-right: 0 !important;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item .chapter::before {
        content: none;
    }

    .widget.widget_manga-listing .page-content-listing.item-big_thumbnail .page-listing-item .page-item-detail .item-summary .list-chapter .chapter-item .chapter a {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        line-height: 1.3;
        color: var(--nk-text-primary) !important;
    }
}


/* =============================================================================
   NK SIDEBAR WIDGET — Popular / Latest novels widget
   Design overhaul for the .widget.c-popular sidebar component.
   Replaces float layout + grey pill chapters with flex + clean rows.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. ITEM WRAPPER  (.popular-item-wrap)
   Override border-bottom separator with card-style surface panels.
   --------------------------------------------------------------------------- */
.widget.c-popular .popular-item-wrap {
    display: flex !important;
    align-items: flex-start;
    gap: 14px;
    background: var(--nk-bg-surface);
    border: 1px solid var(--nk-border-muted) !important;
    border-radius: var(--nk-radius);
    padding: 14px !important;
    margin-bottom: 12px !important;
    transition: border-color var(--nk-ease);
}

.widget.c-popular .popular-item-wrap:hover {
    border-color: var(--nk-border) !important;
}

.widget.c-popular .popular-item-wrap:last-of-type {
    margin-bottom: 0 !important;
}

/* Suppress parent's clearfix ::after */
.widget.c-popular .popular-item-wrap:after {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   2. THUMBNAIL  (.popular-img)
   Override parent's float:left + max-width:65px with flex-shrink.
   --------------------------------------------------------------------------- */
.widget.c-popular .popular-item-wrap .popular-img,
.widget.c-popular .style-1 .popular-item-wrap .popular-img {
    flex-shrink: 0;
    width: 70px !important;
    max-width: none !important;
    float: none !important;
    margin-right: 0 !important;
    border-radius: var(--nk-radius-sm);
    overflow: hidden;
    transition: opacity var(--nk-ease);
}

.widget.c-popular .popular-item-wrap:hover .popular-img {
    opacity: 0.9;
}

.widget.c-popular .popular-item-wrap .popular-img a {
    display: block;
    line-height: 0;
}

.widget.c-popular .popular-item-wrap .popular-img img {
    width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: cover;
    border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   3. CONTENT AREA  (.popular-content)
   Override parent's overflow:hidden with flex column.
   --------------------------------------------------------------------------- */
.widget.c-popular .popular-item-wrap .popular-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: visible !important;
}

/* ---------------------------------------------------------------------------
   4. NOVEL TITLE  (.widget-title)
   Clean typography with 2-line clamp and accent hover.
   --------------------------------------------------------------------------- */
.widget.c-popular .popular-item-wrap .popular-content .widget-title {
    margin: 0 !important;
    padding: 0;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.35;
}

.widget.c-popular .popular-item-wrap .popular-content .widget-title a {
    color: var(--nk-text-primary) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.widget.c-popular .popular-item-wrap .popular-content .widget-title a:hover {
    color: var(--nk-accent) !important;
}

.widget.c-popular .popular-item-wrap .popular-content .rating {
    margin-bottom: 0;
    min-height: 18px;
}

.widget.c-popular .popular-item-wrap .popular-content .rating .post-total-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.widget.c-popular .popular-item-wrap .popular-content .rating .ratings_stars {
    font-size: 13px;
    color: var(--nk-accent) !important;
}

.widget.c-popular .popular-item-wrap .popular-content .rating .score {
    font-size: 12px;
    margin-left: 2px;
    color: var(--nk-text-secondary) !important;
}

/* ---------------------------------------------------------------------------
   5. CHAPTER LINKS  (.chapter-item)
   Replace grey pill buttons with compact clean rows.
   --------------------------------------------------------------------------- */
.widget.c-popular .popular-item-wrap .popular-content .chapter-item {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    margin-bottom: 5px !important;
    border: 1px solid var(--nk-border-muted);
    border-radius: 6px;
    background: transparent;
}

.widget.c-popular .popular-item-wrap .popular-content .chapter-item:last-child {
    margin-bottom: 0 !important;
}

/* Chapter link span — remove parent's pill styling */
.widget.c-popular .popular-item-wrap .popular-content .chapter-item .chapter {
    background-color: transparent !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    max-width: none !important;
    font-weight: normal !important;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Chapter link text */
.widget.c-popular .popular-item-wrap .popular-content .chapter-item .chapter a {
    display: block !important;
    font-size: 12px;
    font-weight: 500;
    color: var(--nk-text-secondary) !important;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
}

.widget.c-popular .popular-item-wrap .popular-content .chapter-item .chapter a:hover {
    color: var(--nk-accent) !important;
    text-decoration: none !important;
}

/* Override parent's hover that changes pill bg to primary color */
.widget.c-popular .popular-item-wrap .popular-content .chapter-item .chapter:hover {
    background-color: transparent !important;
}

.widget.c-popular .popular-item-wrap .popular-content .chapter-item .chapter:hover a {
    color: var(--nk-accent) !important;
}

/* Chapter item spans — override parent's inline-block + margin */
.widget.c-popular .popular-item-wrap .popular-content .chapter-item span {
    display: inline-flex !important;
    margin-right: 0 !important;
    vertical-align: middle;
}

.widget.c-popular .popular-item-wrap .popular-content .chapter-item span:last-child {
    margin-right: 0 !important;
}

/* Timestamp — override parent's float:right */
.widget.c-popular .popular-item-wrap .popular-content .chapter-item span.post-on {
    flex-shrink: 0;
    float: none !important;
    font-size: 11px;
    font-weight: 400;
    color: var(--nk-text-secondary);
    opacity: 0.65;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   6. DARK MODE OVERRIDES
   Match parent's long selectors for .text-ui-light
   --------------------------------------------------------------------------- */
.text-ui-light .widget.c-popular .popular-item-wrap {
    border-color: var(--nk-border-muted) !important;
}

.text-ui-light .widget.c-popular .popular-item-wrap .popular-content .chapter-item .chapter {
    background: transparent !important;
    border: none !important;
}

.text-ui-light .widget.c-popular .popular-item-wrap .popular-content .chapter-item .chapter a {
    color: var(--nk-text-secondary) !important;
}

.text-ui-light .widget.c-popular .popular-item-wrap .popular-content .chapter-item .chapter a:hover {
    color: var(--nk-accent) !important;
}

/* ---------------------------------------------------------------------------
   7. RESPONSIVE — Sidebar on small screens
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .widget.c-popular .popular-item-wrap {
        padding: 12px !important;
        gap: 12px;
        border-radius: 8px;
    }

    .widget.c-popular .popular-item-wrap .popular-img,
    .widget.c-popular .style-1 .popular-item-wrap .popular-img {
        width: 60px !important;
    }

    .widget.c-popular .popular-item-wrap .popular-content .widget-title {
        font-size: 13px !important;
    }
}


/* =============================================================================
   NK NOVEL DETAIL — Gap between synopsis and chapter list
   Ensures breathing room regardless of synopsis content length.
   ============================================================================= */
body.manga-page .description-summary {
    margin-bottom: 20px !important;
}

body.manga-page #manga-chapters-holder {
    margin-top: 40px;
}

/* =============================================================================
   NK NOVEL DETAIL — Transparent breadcrumb bar
   Remove the solid background so the breadcrumb integrates seamlessly
   with the novel cover image / blurred background behind it.
   ============================================================================= */

/* The sub-header bar that wraps the breadcrumb — all variants */
body.manga-page .site-header .c-sub-header-nav,
body.manga-page .c-sub-header-nav,
body.manga-page .site-header .c-sub-header-nav.with-border,
body.manga-page .c-sub-header-nav.with-border {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* The breadcrumb wrapper + the ol itself (Bootstrap adds mb + border) */
body.manga-page .c-breadcrumb-wrapper,
body.manga-page .c-breadcrumb,
body.manga-page .c-breadcrumb .breadcrumb {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0;
}

/* Breadcrumb links — keep readable against the dark cover bg */
body.manga-page .c-breadcrumb .breadcrumb li a {
    color: rgba(230, 237, 243, 0.75) !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

body.manga-page .c-breadcrumb .breadcrumb li a:hover {
    color: var(--nk-accent) !important;
}

/* Separator "/" between crumbs */
body.manga-page .c-breadcrumb .breadcrumb li+li:before {
    color: rgba(230, 237, 243, 0.4);
}

/* Last crumb (current page) — slightly brighter */
body.manga-page .c-breadcrumb .breadcrumb li:last-child a {
    color: var(--nk-text-primary) !important;
    font-weight: 500;
}


/* =============================================================================
   NK CHAPTER LIST — AJAX Lazy Loading Animation (Primary)
   Styles the #manga-chapters-holder container that appears during AJAX fetch.
   Replaces the default Font Awesome spinner with "LOADING CHAPTERS..." animation.
   ============================================================================= */

/* Keyframes for the loading text pulse effect */
@keyframes nk-loading-pulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

@-webkit-keyframes nk-loading-pulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* Keyframes for the animated dots — cycles the full badge text so !important on content isn't needed */
@keyframes nk-loading-text {
    0%,  22% { content: "LOADING CHAPTERS";    }
    25%, 47% { content: "LOADING CHAPTERS .";  }
    50%, 72% { content: "LOADING CHAPTERS .."; }
    75%, 97% { content: "LOADING CHAPTERS ..."; }
}
@-webkit-keyframes nk-loading-text {
    0%,  22% { content: "LOADING CHAPTERS";    }
    25%, 47% { content: "LOADING CHAPTERS .";  }
    50%, 72% { content: "LOADING CHAPTERS .."; }
    75%, 97% { content: "LOADING CHAPTERS ..."; }
}

/* Hide the default Font Awesome spinner icon and override fa-spin */
#manga-chapters-holder > i.fa-spinner,
#manga-chapters-holder > i.fas.fa-spinner,
#manga-chapters-holder > i.fa-spin,
#manga-chapters-holder > i.fas.fa-spin {
    /* Stop FA spin animation */
    -webkit-animation: none !important;
    animation: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    
    /* Keep this styling isolated to the temporary spinner node */
    font-size: 0 !important;
    width: max-content !important;
    height: auto !important;
    margin: 40px auto !important;
    padding: 0 !important;
    
    /* Use positioning to contain the custom loader */
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Custom "LOADING CHAPTERS..." animation via ::before pseudo-element */
#manga-chapters-holder > i.fa-spinner::before,
#manga-chapters-holder > i.fas.fa-spinner::before {
    /*
     * content WITHOUT !important: CSS @keyframes cannot override !important
     * declarations. Our selector specificity (1,0,1,1) already beats FA's
     * (.fas.fa-spinner::before at 0,0,2,1), so !important is not required.
     * This lets the nk-loading-text keyframes cycle the text+dots properly.
     */
    content: "LOADING CHAPTERS";
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    
    /* Reset FA transforms */
    -webkit-transform: none !important;
    transform: none !important;
    
    /* Sizing & layout — min-width prevents badge from resizing as dots appear */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 24px !important;
    min-width: 272px !important;
    white-space: nowrap !important;
    
    /* Styling */
    background: var(--nk-bg-elevated, #1c2128) !important;
    color: var(--nk-accent, #58a6ff) !important;
    border: 1px solid var(--nk-border, #30363d) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
    
    /* Pulse + text-cycling animations combined */
    -webkit-animation: nk-loading-pulse 1.4s ease-in-out infinite, nk-loading-text 1.2s steps(4) infinite !important;
    animation: nk-loading-pulse 1.4s ease-in-out infinite, nk-loading-text 1.2s steps(4) infinite !important;
}

/* ::after — not used; suppress any FA or browser default */
#manga-chapters-holder > i.fa-spinner::after,
#manga-chapters-holder > i.fas.fa-spinner::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* =============================================================================
   NK MOBILE GRID LOCK — Always 2 columns for big-thumbnail auto-cols listings
   Prevent auto-fill/minmax from collapsing to 1 column on narrow phone widths.
   ============================================================================= */
@media (max-width: 767px) {
    body.page .widget-elementor.widget_manga-listing .page-content-listing.item-big_thumbnail.auto-cols,
    body.page .widget.widget_manga-listing .page-content-listing.item-big_thumbnail.auto-cols {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 8px !important;
        row-gap: 8px !important;
    }

    body.page .widget-elementor.widget_manga-listing .page-content-listing.item-big_thumbnail.auto-cols .page-listing-item,
    body.page .widget.widget_manga-listing .page-content-listing.item-big_thumbnail.auto-cols .page-listing-item,
    body.page .widget-elementor.widget_manga-listing .page-content-listing.item-big_thumbnail.auto-cols .page-listing-item .auto-col,
    body.page .widget.widget_manga-listing .page-content-listing.item-big_thumbnail.auto-cols .page-listing-item .auto-col {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        margin: 0 !important;
    }
}

/* =============================================================================
   NK READER HERO BLOCK - Visual disable without template removal
   Keeps markup in DOM while hiding the whole manga-info section on reader pages.
   ============================================================================= */
body.nk-reader-page .manga-info {
    display: none !important;
}

/* =============================================================================
   NK RELATED NOVELS (SINGLE NOVEL PAGE)
   Horizontal scrolling carousel for 8 big thumbnail related items.
   ============================================================================= */
.nk-related-novels-scrollable {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
    margin-bottom: 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(150, 150, 150, 0.5) transparent; /* Compatible styling */
}

/* Custom Scrollbar for Webkit */
.nk-related-novels-scrollable::-webkit-scrollbar {
    height: 6px;
}
.nk-related-novels-scrollable::-webkit-scrollbar-track {
    background: transparent;
}
.nk-related-novels-scrollable::-webkit-scrollbar-thumb {
    background-color: rgba(150, 150, 150, 0.5);
    border-radius: 10px;
}

.nk-related-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    padding-left: 0;
    margin: 0;
}

.nk-related-item {
    flex: 0 0 140px; /* Fixed width for mobile so they peek offscreen naturally */
    max-width: 140px;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .nk-related-item {
        flex: 0 0 180px; /* Larger fixed width for PC */
        max-width: 180px;
    }
}

.nk-related-item-img {
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    background-color: rgba(150, 150, 150, 0.1); /* Skeleton background */
    aspect-ratio: 2/3; /* Anti-Layout Shift (CLS) */
    position: relative;
    display: block;
}

.nk-related-item-img:hover {
    transform: translateY(-2px); /* Slight hover pop */
}

.nk-related-item-img img {
    width: 100%;
    height: 100%; /* Force fill the aspect-ratio wrapper */
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.nk-related-item-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Keep bottom meta data fully aligned */
}

.nk-related-item-content .widget-title {
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 5px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Truncate after 2 lines */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    font-weight: 600;
    min-height: 38px; /* Force minimum height for exact symmetry when mixing 1-line and 2-line titles */
}

.nk-related-item-content .widget-title a {
    color: inherit;
    text-decoration: none;
}

.nk-related-item-content .post-on.font-meta {
    font-size: 12px;
    color: #888;
}