/*
Theme Name: NXP 3
Theme URI: https://novelxp.com
Description: A fully custom web novel reading platform with coin system, author dashboards, and immersive reading experience.
Version: 3.0.0.0
Author: NovelXP Team
Text Domain: novelxp
*/

/* ═══════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   Search "NN ·" (e.g. "13 ·") or a title to jump to its banner.
   Rules are kept in source order — the cascade is unchanged; this is a
   navigation map of the file as it actually is, not a re-sort.
   ────────────────────────────────────────────────────────────
     01  Design Tokens & CSS Variables      :root, light/sepia/soft/reading modes
     02  Reset & Base                       box-sizing, html/body, tap-delay
     03  Typography                         headings, .display-title
     04  Layout Utilities                   .nxp-container, grids, flex helpers
     05  Components — Buttons               .nxp-btn and variants
     06  Components — Badges & Tags         .nxp-tag, .nxp-badge
     07  Components — Forms                 .nxp-field, inputs, selects
     08  Components — Stars                 .nxp-stars rating
     09  Components — Coin Display          .nxp-coin-display
     10  Components — Alerts & Notices      .nxp-alert
     11  Components — Loading               .nxp-spinner, skeletons
     12  Header                             .nxp-avatar, site header chrome
     13  Single Novel Page                  hero, genre pills, synopsis, tabs
     14  Coin Store                         .nxp-coin-packages
     15  Footer                             compact / centered mobile footer
     16  Toast Notifications                .nxp-toast-*
     17  Modal                              .nxp-modal-* global dialog
     18  Responsive — Tablet   ≤ 1100px      global breakpoint overrides
     19  Responsive — Sm Tablet ≤ 900px      global breakpoint overrides
     20  Responsive — Mobile   ≤ 768px      global breakpoint overrides
     21  Responsive — Sm Mobile ≤ 480px      global breakpoint overrides
     22  Utility Classes                    .hidden and helpers
     23  Horizontal Cards                   list/grid card (novel-hcard) — shared
     24  Grid Pages for Cards               .brw-grid results grid — shared
     25  Reading Page                       .nxp-reader-text and chapter chrome
     26  Shared Components                  cover lightbox, pagination, history cards
     27  Browse / Archive-Novel Page        filters, book grid, layout switcher
     28  Library Page                       shelves, tabs, modals, recent reads
     29  Ranking Page                       rank pills (v1/v3), author meta
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   01 · DESIGN TOKENS & CSS VARIABLES
═══════════════════════════════════════════════════════════════ */
:root {
  /* Brand Colors */
  --nxp-primary:       #3B82F6;   /* blue */
  --nxp-primary-dark:  #2563EB;
  --nxp-accent:        #F59E0B;   /* amber — coins */
  --nxp-accent-dark:   #D97706;
  --nxp-danger:        #EF4444; 
  --nxp-success:       #10B981;

  /* Dark Theme (default) */
  --nxp-bg:            #202020;
  --nxp-bg-2:          #1b1b1b;
  --nxp-bg-tr:          #41414166;
  --nxp-bg-5:          #000000;
  --nxp-bg-3:          #252525;
  --nxp-bg-4:          #22222F;
  --nxp-surface:       #1c1c1c;
  --nxp-card-bg:       #0e0d0d;
  --nxp-border:        rgba(255,255,255,0.07);
  --nxp-border-rw:        rgba(255,255,255,0.07);
  --nxp-border-light:  rgba(255,255,255,0.12);
  --nxp-text:          #E8E8F0;
  --nxp-text-11:        #ffffff;
  --nxp-text-2:        #adadad;
  --nxp-text-3:        #636363;
  --nxp-glow:          rgba(59,130,246,0.15);
  --nxp-header-bg:     #131415;
  --nxp-p-button:   #ffffff;

  /* Typography */
  --font-display:   'Open Sans', 'Palatino Linotype', serif;
  --font-heading:   'Inter', 'Helvetica Neue', sans-serif;
  --font-body:      'Inter', Georgia, serif;
  --font-ui:        'DM Sans', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Layout */
  --max-width:       1280px;
  --content-width:   780px;

  /* Page shell — single source of truth for user-facing page padding.
     Change these two values to re-gutter / re-space every page at once.
     Responsive step-downs live in the media queries just below :root. */
  --gutter-x:        48px;   /* horizontal page gutter (side padding) */
  --page-pad-y:      32px;   /* default vertical rhythm for .nxp-page  */
  --sidebar-width:   300px;
  --header-height:   64px;
  --radius-sm:       3px;
  --radius:          4px;
  --radius-lg:       6px;
  --radius-xl:       15px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow:     0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.6);
  --shadow-glow:0 0 30px rgba(59,130,246,0.2);

  /* Transitions */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   150ms;
  --dur:        250ms;
  --dur-slow:   400ms;
}

/* Responsive step-downs for the page shell tokens. These are the ONLY
   places the side gutter changes across breakpoints — every container
   reads --gutter-x, so nothing else needs per-breakpoint padding. */
@media (max-width: 600px) {
  :root { --gutter-x: 48px; --page-pad-y: 24px; }
}
@media (max-width: 480px) {
  :root { --gutter-x: 16px; }
}
@media (max-width: 360px) {
  :root { --gutter-x: 14px; }
}

/* Light Mode */
html[data-theme="light"] {
  --nxp-bg:           #ffffff;
  --nxp-bg-2:         #ffffff;
  --nxp-bg-tr:         #f8f8f8;
  --nxp-bg-5:         #ffffff;
  --nxp-bg-3:         #e9e9e9;
  --nxp-bg-4:         #D5D5E8;
  --nxp-surface:      #FFFFFF;
  --nxp-card-bg:      #FFFFFF;
  --nxp-border:       rgba(128, 128, 128, 0.267);
  --nxp-border-rw:       #f1f5f9;
  --nxp-border-light: rgba(0,0,0,0.12);
  --nxp-text:         #1A1A2E;
  --nxp-text-11:      #000000;
  --nxp-text-2:       #555570;
  --nxp-text-3:       #999AAA;
  --nxp-glow:         rgba(37,99,235,0.1);
  --nxp-header-bg:    #ffffff;
  --nxp-p-button:   #000000;
}

/* Sepia Mode */
html[data-theme="sepia"] {
  --nxp-bg:           #fdf6e3;
  --nxp-bg-2:         #f5eed8;
  --nxp-bg-tr:        #f5eed8cc;
  --nxp-bg-5:         #fffbef;
  --nxp-bg-3:         #efe6cc;
  --nxp-bg-4:         #d6a41b;
  --nxp-surface:      #faf3de;
  --nxp-card-bg:      #fffdf5;
  --nxp-border:       #e6dfca;
  --nxp-border-rw:    #efe8d3;
  --nxp-border-light: #dcd3b8;
  --nxp-text:         #5b4636;
  --nxp-text-11:      #3e2f23;
  --nxp-text-2:       #7d6a55;
  --nxp-text-3:       #9d8a74;
  --nxp-glow:         rgba(181,131,60,0.15);
  --nxp-header-bg:    #fdf6e3;
  --nxp-p-button:     #3e2f23;
}

/* Soft Green Mode */
html[data-theme="soft"] {
  --nxp-bg:           #e8f5e9;
  --nxp-bg-2:         #dcf0de;
  --nxp-bg-tr:        #dcf0decc;
  --nxp-bg-5:         #f3faf3;
  --nxp-bg-3:         #d2ead4;
  --nxp-bg-4:         #c5e2c8;
  --nxp-surface:      #e2f2e3;
  --nxp-card-bg:      #f4fbf4;
  --nxp-border:       #c8e6c9;
  --nxp-border-rw:    #d7edd8;
  --nxp-border-light: #b7dcb9;
  --nxp-text:         #2e4d32;
  --nxp-text-11:      #1f3a23;
  --nxp-text-2:       #4e6f53;
  --nxp-text-3:       #5e7d62;
  --nxp-glow:         rgba(46,125,50,0.15);
  --nxp-header-bg:    #e8f5e9;
  --nxp-p-button:     #1f3a23;
}

/* Reading Mode Overrides */
body.nxp-reading-sepia {
  --nxp-bg:     #F4ECD8;
  --nxp-bg-2:   #EDE3CA;
  --nxp-surface:#F8F4E8;
  --nxp-text:   #2D1B00;
  --nxp-text-2: #6B4C1E;
}

/* ═══════════════════════════════════════════════════════════════
   02 · RESET & BASE
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-x: none;
}

body {
  font-family: var(--font-ui);
  background: var(--nxp-bg);
  color: var(--nxp-text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background var(--dur), color var(--dur);
  -webkit-tap-highlight-color: transparent;
}

/* Remove 300ms tap delay on all interactive elements */
a, button, [role="button"], input[type="submit"], input[type="button"], label {
  touch-action: manipulation;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--nxp-primary); text-decoration: none; transition: color var(--dur-fast); }
a:hover { color: var(--nxp-primary-dark); }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
ul, ol { list-style: none; }
svg { display: block; }

/* ═══════════════════════════════════════════════════════════════
   03 · TYPOGRAPHY
═══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--nxp-text);
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }

.display-title {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   04 · LAYOUT UTILITIES
═══════════════════════════════════════════════════════════════ */
/* ── Canonical page container ──────────────────────────────────────
   ONE job: max-width + centering + horizontal gutter. No vertical
   padding — that is .nxp-page's job. Side gutter comes from the
   --gutter-x token so every page re-gutters from a single knob. */
.nxp-container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter-x);
  box-sizing: border-box;
}
.nxp-container--narrow  { max-width: 860px; }
.nxp-container--reading { max-width: 820px; }  /* legal / long-form text */
.nxp-container--wide    { max-width: 1440px; }

/* Vertical rhythm helper — add alongside .nxp-container on pages that
   need standard top/bottom breathing room. Kept separate from the
   container so gutter and vertical space stay independently tunable. */
.nxp-page { padding-block: var(--page-pad-y); }

.nxp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.nxp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.nxp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.nxp-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }

.nxp-flex { display: flex; }
.nxp-flex-center { display: flex; align-items: center; justify-content: center; }
.nxp-flex-between { display: flex; align-items: center; justify-content: space-between; }
.nxp-gap-2 { gap: var(--space-2); }
.nxp-gap-3 { gap: var(--space-3); }
.nxp-gap-4 { gap: var(--space-4); }
.nxp-gap-5 { gap: var(--space-5); }

/* ═══════════════════════════════════════════════════════════════
   05 · COMPONENTS — BUTTONS
═══════════════════════════════════════════════════════════════ */
.nxp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 22px;
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  cursor: pointer;
}
.nxp-btn--primary {
  background: linear-gradient(135deg, var(--nxp-primary), var(--nxp-primary-dark));
  color: #fff;
  box-shadow: 0 4px 16px rgba(59,130,246,0.3);
}
.nxp-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59,130,246,0.45);
  color: #fff;
}
.nxp-btn--coin {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #fff;
  box-shadow: 0 4px 16px rgba(245,158,11,0.3);
}
.nxp-btn--coin:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245,158,11,0.45);
  color: #fff;
}
.nxp-btn--ghost {
  background: transparent;
  border: 1px solid var(--nxp-border-light);
  color: var(--nxp-text);
}
/* .nxp-btn--ghost:hover {
  border-color: var(--nxp-primary);
  color: var(--nxp-primary);
} */
.nxp-btn--danger {
  background: var(--nxp-danger);
  color: #fff;
}
.nxp-btn--sm { padding: 6px 14px; font-size: 0.8rem; }
.nxp-btn--lg { padding: 14px 32px; font-size: 1rem; border-radius: var(--radius-lg); }
.nxp-btn--full { width: 100%; justify-content: center; }



/* ═══════════════════════════════════════════════════════════════
   06 · COMPONENTS — BADGES & TAGS
═══════════════════════════════════════════════════════════════ */
.nxp-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  /* background: var(--nxp-bg-3); */
  background: transparent;
  color: var(--nxp-text-2);
  border: 1px solid var(--nxp-border);
  transition: all var(--dur-fast);
  white-space: nowrap;
}

@media (max-width:480px) {
  .nxp-tag {
    line-height: 1.2;
  }
.nxp-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  font-size:15px !important;
}
.nxp-author {
  font-size: 13px;
}
.nxp-genre-row {
  margin-top: -8px;
}
}

.nxp-tag:hover, .nxp-tag.active {
  background: var(--nxp-primary);
  color: #fff;
  border-color: var(--nxp-primary);
}
.nxp-tags-row { display: flex; flex-wrap: wrap; gap: 4px; }

/* ═══════════════════════════════════════════════════════════════
   07 · COMPONENTS — FORMS
═══════════════════════════════════════════════════════════════ */
.nxp-field { margin-bottom: var(--space-5); }
.nxp-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nxp-text-2);
  margin-bottom: var(--space-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nxp-input, .nxp-textarea, .nxp-select {
  width: 100%;
  background: var(--nxp-bg);
  border: 1px solid var(--nxp-border);
  border-radius: var(--radius);
  color: var(--nxp-text);
  font-size: 0.95rem;
  padding: 12px 16px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  outline: none;
}
.nxp-input:focus, .nxp-textarea:focus, .nxp-select:focus {
  border-color: var(--nxp-primary);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.nxp-textarea { resize: vertical; min-height: 120px; }
.nxp-select { appearance: none; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   08 · COMPONENTS — STARS
═══════════════════════════════════════════════════════════════ */
.nxp-stars { display: flex; gap: 2px; }
.nxp-star {
  width: 16px; height: 16px;
  color: var(--nxp-accent);
  fill: currentColor;
}
.nxp-star--empty { color: var(--nxp-bg-4); }

/* ═══════════════════════════════════════════════════════════════
   09 · COMPONENTS — COIN DISPLAY
═══════════════════════════════════════════════════════════════ */
.nxp-coin-display {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 7px 15px;
  background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(217,119,6,0.1));
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 99px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--nxp-accent);
}
.nxp-coin-icon { width: 18px; height: 18px; }

/* ═══════════════════════════════════════════════════════════════
   10 · COMPONENTS — ALERTS & NOTICES
═══════════════════════════════════════════════════════════════ */
.nxp-alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.nxp-alert--success { background: rgba(16,185,129,0.1); border-left: 3px solid var(--nxp-success); color: var(--nxp-success); }
.nxp-alert--error   { background: rgba(239,68,68,0.1); border-left: 3px solid var(--nxp-danger); color: var(--nxp-danger); }
.nxp-alert--info    { background: rgba(59,130,246,0.1); border-left: 3px solid var(--nxp-primary); color: var(--nxp-primary); }
.nxp-alert--warn    { background: rgba(245,158,11,0.1); border-left: 3px solid var(--nxp-accent); color: var(--nxp-accent); }

/* ═══════════════════════════════════════════════════════════════
   11 · COMPONENTS — LOADING
═══════════════════════════════════════════════════════════════ */
.nxp-spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--nxp-border);
  border-top-color: var(--nxp-primary);
  border-radius: 50%;
  animation: nxpSpin 0.7s linear infinite;
}
@keyframes nxpSpin { to { transform: rotate(360deg); } }

.nxp-skeleton {
  background: linear-gradient(90deg, var(--nxp-bg-3) 25%, var(--nxp-bg-4) 50%, var(--nxp-bg-3) 75%);
  background-size: 200% 100%;
  animation: nxpSkeleton 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes nxpSkeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ═══════════════════════════════════════════════════════════════
   12 · HEADER
   (layout, logo, search, nav, dropdown, mobile nav — see header.php's
   inline <style>, which owns all of that; .nxp-avatar stays here
   since it's also used outside the header)
═══════════════════════════════════════════════════════════════ */
.nxp-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nxp-primary), var(--nxp-primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--nxp-rc, var(--nxp-primary));
  transition: border-color var(--dur-fast);
}
.nxp-avatar:hover { border-color: var(--nxp-primary); }
.nxp-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }







/* ═══════════════════════════════════════════════════════════════
   13 · SINGLE NOVEL PAGE
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   13b · SINGLE NOVEL PAGE — moved here from single-novel.php inline block
   (kept at end of file to preserve original cascade order)
═══════════════════════════════════════════════════════════════ */
/* ==========================================================================
   01. GLOBAL & UTILITIES
   ========================================================================== */
/* Small spacing correction for icons inside buttons */
.nxp-btn i.fas { 
    margin-right: 2px; 
}

@media (max-width: 600px) {
    .nxp-hide-mobile { display: none; }
}

/* ==========================================================================
   02. HERO SECTION
   ========================================================================== */
/* ── Hero Actions ── */

/* The hero info column is a grid track (cover | info). Grid items default to
   min-width:auto (= min-content), so a long chapter name in the read button's
   sub-label makes THIS column expand past its track instead of forcing the
   button to truncate — the read button only shrinks on desktop because it has
   a hard max-width:220px cap there. min-width:0 lets the column stay at its
   track width on mobile too, so the buttons inside actually truncate. */
.nxp-novel-hero__info { min-width: 0; }

.nxp-hero-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* both buttons always share the same height */
    gap: 10px;
    min-height: 54px;
    margin-top: var(--space-4);
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
/* Library button shares the row with the read button and shrinks WITH it at
   every width. Its own flex:1 1 50% only kicks in ≤768px; above that it fell
   back to content-width and "didn't get smaller" as the window narrowed. */
.nxp-hero-actions .bl-status-wrapper {
    flex: 1 1 50%;
    min-width: 0;
}
.nxp-hero-actions .bl-status-btn { width: 100%; }
@media (min-width: 769px) {
    /* Cap it to match the read button's 220px desktop ceiling. */
    .nxp-hero-actions .bl-status-wrapper { max-width: 220px; }
}
.nxp-hero-read-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 0 20px;
    border-radius: var(--radius-lg);
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: var(--nxp-primary);
    color: #fff;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
    max-width: 220px;
    /* Clip own content so the nowrap chapter sub-label can't inflate this
       button's intrinsic width and starve the library button of shrink room. */
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.nxp-hero-read-btn:hover {
    background: var(--nxp-primary-dark);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.45);
    transform: translateY(-1px);
    color: #fff;
}
.nxp-hero-read-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}
.nxp-hero-read-btn:focus-visible {
    outline: 2px solid var(--nxp-primary);
    outline-offset: 2px;
}
.nxp-hero-read-btn--disabled {
    cursor: not-allowed;
    background: var(--nxp-bg-3);
    color: var(--nxp-text-2);
    box-shadow: none;
}
.nxp-hero-read-btn--disabled:hover {
    transform: none;
    box-shadow: none;
    background: var(--nxp-bg-3);
    color: var(--nxp-text-2);
}
/* Continue variant stacks the label over a faint chapter name.
   Text is left-aligned but the block stays vertically centered. */
.nxp-hero-read-btn--continue {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    padding: 8px 16px;
}
.nxp-hero-read-btn__label {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nxp-hero-read-btn__sub {
    max-width: 100%;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Cover Badge (Members Only lock, admin-only) ── */
.nxp-cover-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #00000063;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.05em;
    z-index: 10;
    transition: font-size 0.2s, padding 0.2s;
}
@media (min-width: 769px) {
    .nxp-cover-badge {
        font-size: 0.95rem;  
        padding: 4px 18px;    
        top: 10px;            
        right: 10px;
        border-radius: 8px;
    }
}

/* ── Genre Tags ── */
.nxp-genre-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: var(--space-2);
}
.nxp-genre-tag {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 2px;
  text-decoration: none;
  color: #FFF;
  background: rgba(95, 95, 95, 0.47);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  font-size: 0.75rem;
}
.nxp-genre-tag:hover {
    background: rgb(255, 34, 34);
    color: #fff;
}

/* ── Inline Stats Bar ── */
.nxp-fic-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 2px;
    margin: var(--space-2) 0 var(--space-3); 
    font-size: 0.8rem;
    color: var(--nxp-text-2);
    font-family: var(--font-ui);
    width: 100%;
}
.nxp-fic-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-weight: 600;
}
.nxp-fic-stat i { font-size: 0.85em; opacity: 0.75; }
.nxp-fic-stat__label {
    font-weight: 500;
    color: var(--nxp-text-4);
    font-size: 1em;
}
.nxp-fic-stat__sep {
    color: var(--nxp-text-3);
    font-weight: 400;
    margin: 0 3px;
    user-select: none;
}

/* ── Synopsis Engine ── */
.nxp-synopsis-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.nxp-synopsis-text {
    font-family: var(--font-body), sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--nxp-text, #ffffff);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.nxp-synopsis-text.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    max-height: none;
}
.nxp-synopsis-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35px; 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--nxp-bg-2, #1a1a1c));
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.nxp-synopsis-text.is-expanded + .nxp-synopsis-fade {
    opacity: 0;
}
.nxp-synopsis-text p { 
    margin-top: 0 !important;
    margin-bottom: 12px !important; 
    line-height: 1.65 !important;
}
.nxp-synopsis-text p:last-child {
    margin-bottom: 0 !important;
}
.nxp-synopsis-text strong, 
.nxp-synopsis-text b {
    font-weight: 700 !important;
    color: var(--nxp-text,) !important;
}
.nxp-synopsis-text em, 
.nxp-synopsis-text i {
    font-style: italic !important;
}
.nxp-synopsis-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--nxp-primary);
    font-family: var(--font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 2px 0;
    touch-action: manipulation;
}
.nxp-synopsis-toggle__icon {
    font-size: 0.7rem;
    transition: transform 0.25s var(--ease);
}
.nxp-synopsis-toggle[aria-expanded="true"] .nxp-synopsis-toggle__icon {
    transform: rotate(180deg);
}

/* Cover Lightbox Overlay styles live in style.css — "SHARED COMPONENTS". */

/* ==========================================================================
   03. TABS SECTION & LAYOUT
   ========================================================================== */
.nxp-tabs-wrapper {
    grid-column: 1 / -1;
    position: relative; 
    width: 100%;
    margin-bottom: var(--space-1);
}
.nxp-novel-body .nxp-novel-tabs {
    width: 100%;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}
hr.nxp-full-bleed-hr {
    border: none;
    border-top: 1px solid var(--nxp-border);
    position: absolute;
    bottom: 0; 
    left: 50%;
    width: 100vw !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
}
#nxpNovelTabs {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}

/* ==========================================================================
   04. CHAPTERS TAB
   ========================================================================== */
/* ── Chapter Controls ── */
@media (min-width: 769px) {
    .nxp-ch-controls-row {
        flex-wrap: nowrap !important;
    }
    .nxp-ch-controls-row #nxpChSearch {
        flex-shrink: 1;
        min-width: 120px;
    }
}
.nxp-ch-filter-btn { padding: 6px 11px; }
.nxp-ch-filter-btn i { margin-right: 0; }
.nxp-ch-filter-btn--fav.active {
    background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.4); color: #ef4444;
}
.nxp-ch-filter-btn--bookmark.active {
    background: rgba(92, 159, 246, 0.13); border-color: var(--nxp-primary); color: var(--nxp-primary);
}

/* ── Grid Layout ── */
/* Base list is a plain vertical stack so volume cards sit on top of each other */
.nxp-chapter-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}
/* A flat (no-volume) list IS the 2-col grid; a volume body grids only inside its card */
.nxp-chapter-list.is-flat-grid,
.nxp-volume-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
.nxp-chapter-list.is-flat-grid {
    border-top: 1px solid var(--nxp-border);
    border-bottom: 1px solid var(--nxp-border);
}
@media (min-width: 769px) {
    .nxp-chapter-list.is-flat-grid,
    .nxp-volume-body {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 24px;
    }
}

/* ── Chapter Item ── */
.nxp-chapter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0px;
    border-bottom: 1px solid var(--nxp-border);
    text-decoration: none;
    color: inherit;
    gap: 16px;
    min-width: 0;
}
.nxp-chapter-item.read .nxp-chapter-item__title { 
    color: var(--nxp-text-3); 
}
.nxp-chapter-item__left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.nxp-chapter-item__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--nxp-text-1);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
.nxp-chapter-item__submeta {
    display: flex;
    align-items: center;      
    justify-content: flex-start;
    gap: 3px;                 
    font-size: 0.72rem;
    color: var(--nxp-text-3);
    width: 100%;              
}
.nxp-chapter-item__date,
.nxp-chapter-item__views {
    display: inline-flex;     
    align-items: center;      
    white-space: nowrap;      
}
.nxp-chapter-item__views svg {
    flex-shrink: 0;
    margin-right: 3px;        
    display: inline-block;
    vertical-align: middle;
}
.nxp-chapter-item__sep {
    color: var(--nxp-border);
    user-select: none;
    display: inline-block;
}
.nxp-chapter-item__right {
    display: flex;
    align-items: center;
    gap: 10px; 
    flex-shrink: 0;
}
.nxp-chapter-item__badge-wrap {
    display: flex;
    align-items: center;
}
.nxp-chapter-item__read-icon {
    display:none;
    color: var(--nxp-success, #10B981);
    font-size: 0.85rem;
    line-height: 1;
}

/* ── Badges & Icons ── */
.nxp-chapter-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 6px 7px;
    border-radius: 5px;
    line-height: 1;
}
.nxp-chapter-badge svg { width: 11px; height: 11px; flex-shrink: 0; }
.nxp-chapter-badge--locked   { background: rgba(245,158,11,0.12); color: #F59E0B; border: 1px solid rgba(245,158,11,0.3); }
.nxp-chapter-badge--unlocked { background: rgba(34,197,94,0.1);   color: #22c55e; border: 1px solid rgba(34,197,94,0.25); }
.nxp-chapter-badge--read     { background: rgba(139,92,246,0.1);  color: var(--nxp-primary); border: 1px solid rgba(139,92,246,0.2); }

.nxp-chapter-item__fav-icon,
.nxp-chapter-item__bookmark-icon {
    font-size: 0.8rem;
    line-height: 1;
}
.nxp-chapter-item__fav-icon      { color: #ef4444; }
.nxp-chapter-item__bookmark-icon { color: var(--nxp-primary); }

/* ── Empty State ── */
.nxp-chapter-list__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 36px 12px;
    color: var(--nxp-text-3);
    font-size: 0.85rem;
}

/* ── Volumes (collapsible card groups) ── */
.nxp-volume-group {
    margin-bottom: var(--space-4);
    border: 1px solid var(--nxp-border-rw);
    border-radius: 10px;
    overflow: hidden;
    background: var(--nxp-bg-2);
    transition: box-shadow 0.35s;
}
.nxp-volume-group:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
.nxp-volume-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--nxp-border);
    padding: 14px 18px;
    background: var(--nxp-surface);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.nxp-volume-header__icon { color: var(--nxp-primary); font-size: 0.85rem; }
.nxp-volume-header__title {
    font-size: 18px;
    font-weight: 700;
    /* text-transform: uppercase; */
    /* letter-spacing: 0.05em; */
    color: var(--nxp-text);
}
.nxp-volume-header__meta {
    font-size: 0.72rem;
    color: var(--nxp-text-3);
    font-weight: 600;
}
.nxp-volume-header__arrow {
    margin-left: auto;
    color: var(--nxp-text-3);
    transition: transform 0.2s;
    font-size: 0.8rem;
}
.nxp-volume-group.collapsed .nxp-volume-header__arrow { transform: rotate(-90deg); }

/* Smooth collapse/expand via grid-template-rows (animates unknown content height) */
.nxp-volume-collapse {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.nxp-volume-group.collapsed .nxp-volume-collapse { grid-template-rows: 0fr; }
.nxp-volume-collapse > .nxp-volume-body { overflow: hidden; min-height: 0; }
/* Header divider disappears with the body so a collapsed card reads as one clean bar */
.nxp-volume-group.collapsed .nxp-volume-header { border-bottom-color: transparent; }

/* Grid lives inside the card body */
.nxp-volume-body { padding: 0 16px; background: var(--nxp-surface); }
/* Kill the bottom border on the last row so cards don't end on a stray line.
   Mobile = 1 col (just the last item); desktop = 2 cols (also the left item of the last row). */
.nxp-volume-body .nxp-chapter-item:last-child { border-bottom: none; }
@media (min-width: 769px) {
    .nxp-volume-body .nxp-chapter-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}
/* Same treatment for the flat (no-volume) list */
.nxp-chapter-list.is-flat-grid .nxp-chapter-item:last-child { border-bottom: none; }
@media (min-width: 769px) {
    .nxp-chapter-list.is-flat-grid .nxp-chapter-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}

/* ── Pagination ── */
.nxp-ch-pagination {
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 8px;
    padding: 24px 0 16px;
    flex-wrap: wrap;
    width: 100%;
}
.nxp-ch-pager-pages {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.nxp-pager-btn {
    min-width: 36px;
    height: 36px;
    border: 1px solid var(--nxp-border);
    border-radius: 4px;
    background: var(--nxp-surface);
    color: var(--nxp-text-2);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-family: var(--font-ui, inherit);
    
}
/* .nxp-pager-btn:hover:not(:disabled) { 
    border-color: var(--nxp-primary); 
    color: var(--nxp-primary); 
    background: rgba(139, 92, 246, 0.05); 
    transform: translateY(-1px);
} */
.nxp-pager-btn.active { 
    background: var(--nxp-primary); 
    border-color: var(--nxp-primary); 
    color: #fff; 
    
}
.nxp-pager-btn:disabled { 
    opacity: 0.4; 
    cursor: not-allowed; 
    box-shadow: none;
}
.nxp-pager-ellipsis { 
    color: var(--nxp-text-3); 
    padding: 0 4px; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem; 
    font-weight: 700;
    letter-spacing: 1px;
}

/* Pagination Mobile Adjustments */
@media (max-width: 480px) {
    .nxp-ch-pagination { gap: 6px; padding: 16px 0; }
    .nxp-ch-pager-pages { gap: 4px; }
    .nxp-pager-btn { 
        min-width: 30px; 
        height: 30px; 
        font-size: 0.8rem; 
        padding: 0 6px; 
    }
}

/* ==========================================================================
   05. ABOUT TAB
   ========================================================================== */
.nxp-about-info-rows {
    border: 1px solid var(--nxp-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-4);
}
.nxp-about-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px var(--space-4);
    font-size: 0.85rem;
    border-bottom: 1px solid var(--nxp-border);
}
.nxp-about-info-row:last-child { border-bottom: none; }
.nxp-about-info-row__key {
    color: var(--nxp-text-2);
    display: flex;
    align-items: center;
    gap: 8px;
}
.nxp-about-info-row__key i { width: 14px; text-align: center; color: var(--nxp-primary); }
.nxp-about-info-row__val { font-weight: 700; color: var(--nxp-text); }

/* ==========================================================================
   06. REVIEWS SECTION
   ========================================================================== */
.nxp-novel-reviews-section {
    max-width: 100%;
}
.nxp-reviews-title-wrapper {
    position: relative; 
    width: 100%;
    margin-bottom: var(--space-4);
    padding-top: var(--space-4); 
}
.nxp-reviews-heading {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--nxp-text-1);
    margin: 0;
    padding: 0;
}
hr.nxp-full-bleed-hr-reviews {
    border: none;
    border-top: 1px solid var(--nxp-border);
    position: absolute;
    top: 0; 
    left: 50%;
    width: 100vw !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   07. RESPONSIVE BREAKPOINTS (MOBILE OVERRIDES)
   ========================================================================== */
@media (max-width: 768px) {
    /* Hero action bar stays a row, full width */
    .nxp-hero-actions {
        gap: 8px;
        min-height: 50px;
    }
    
    /* Let the read/continue button shrink fluidly beside the library button
       instead of staying pinned at its 220px desktop cap. Both buttons split
       the row 50/50 and share a 50px touch-friendly height. */
    .nxp-hero-read-btn {
        max-width: none;
        flex: 1 1 50%;
        min-height: 50px;
        font-size: 0.95rem;
        padding: 0 12px;
    }
    .nxp-hero-read-btn--continue {
        padding: 6px 10px;
    }
    .nxp-hero-read-btn__label {
        font-size: 1.1rem;
    }
    .nxp-hero-read-btn__sub {
        font-size: 0.65rem;
    }
    /* About stats: 2x2 grid on mobile */
    .nxp-about-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 345px) {
    /* Small phones: tighten the hero action pair and cede a little width to
       the library button, whose content is wider than "Start Reading" */
    .nxp-hero-actions { gap: 6px; }
    .nxp-hero-read-btn {
        flex: 1 1 44%; /* slightly smaller share than the library button (50%) */
        font-size: 0.9rem;
        padding: 0 10px;
    }
    .nxp-hero-read-btn--continue { padding: 6px 12px; }
    .nxp-hero-read-btn__label { font-size: 1.1rem; }
}

@media (max-width: 480px) {
    /* Center genre row and stat bar on small phones */
    .nxp-genre-row,
    .nxp-fic-stats {
        justify-content: center;
        text-align: center;
    }

    /* Hero cover a bit smaller, centered */
    .nxp-novel-hero__cover { width: 150px; }

    /* Synopsis slightly tighter font */
    .nxp-synopsis-text { font-size: 0.95rem; }

    /* Tap targets for toggle */
    .nxp-synopsis-toggle { padding: 2px 0; margin-top: 0px; }

    /* Chapter controls: full-width stack */
    .nxp-chapter-controls {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .nxp-chapter-controls .nxp-input {
        max-width: 100% !important;
        width: 100%;
    }

    /* About info rows: slightly smaller text */
    .nxp-about-info-row { font-size: 0.8rem; padding: 10px var(--space-3); }
}

/* ── Author Widget Buttons ── */
.nxp-author-widget-btns { display: flex; gap: 8px; align-items: stretch; width: 100%; margin-top: 12px; }
.nxp-author-widget-btns > .nxp-btn, 
.nxp-author-widget-btns > .nxp-tip-wrap { flex: 1; display: flex; }
.nxp-author-widget-btns .nxp-tip-toggle { width: 100%; justify-content: center; }

@media (max-width: 500px) {
    .nxp-author-widget-btns { flex-direction: column; gap: 8px; }
    .nxp-author-widget-btns > .nxp-btn, 
    .nxp-author-widget-btns > .nxp-tip-wrap { width: 100%; flex: none; }
}






.cms-hz-genre-pill:hover, 
.cms-chsort-genre-pill:hover, 
.nxp-genre-rank:hover, 
.nxp-genre-tag:hover, 
.nxp-hcard-genre-tag:hover {
    background: rgb(255, 34, 34) !important;
    color: #fff !important;
}

.nxp-novel-hero {
  background: var(--nxp-bg-2);
  border-bottom: 1px solid var(--nxp-border);
  padding: 50px 0px;
}
.nxp-novel-hero__layout {
  display: grid;
  /* minmax(0, 1fr): let the info column shrink below its content's min-content
     width so nowrap children (hero action buttons) truncate instead of blowing
     the track past the container's right gutter. */
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
.nxp-novel-hero__cover {
  width: 300px;
  aspect-ratio: 2/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* box-shadow: var(--shadow-lg); */
  border: 1px solid var(--nxp-border-light);
  flex-shrink: 0;
}
.nxp-novel-hero__cover img { width: 100%; height: 100%; object-fit: cover; }
.nxp-novel-hero__info { padding-bottom: var(--space-6); }
.nxp-novel-hero__type {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nxp-primary);
  margin-bottom: var(--space-2);
}
.nxp-novel-hero__title {
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: var(--space-3);
  line-height: 1.15;
}
.nxp-novel-hero__author-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.nxp-novel-hero__author-name {
  font-weight: 600;
  font-size: 0.95rem;
}
.nxp-novel-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
}
.nxp-novel-stat { display: flex; flex-direction: column; }
.nxp-novel-stat__value { font-size: 1.25rem; font-weight: 800; color: var(--nxp-text); }
.nxp-novel-stat__label { font-size: 0.72rem; color: var(--nxp-text-2); text-transform: uppercase; letter-spacing: 0.08em; }
.nxp-novel-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Novel Tabs */
.nxp-novel-tabs {
  display: flex;
  gap: 0;
  /* border-bottom: 1px solid var(--nxp-border); */
  margin-top: var(--space-5);
}
.nxp-tab-btn {
  padding: 12px 20px;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--nxp-text);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: all var(--dur-fast);
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.nxp-tab-btn:hover { color: var(--nxp-text); }
.nxp-tab-btn.active { color: var(--nxp-primary); border-bottom-color: var(--nxp-primary); }

/* Novel Body Layout */
.nxp-novel-body {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--space-5);
  padding: var(--space-1) 0;
}

@media (max-width:768px) {
.nxp-novel-body {
  gap: 12px !important;
}
}
.nxp-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.nxp-widget {
  background: var(--nxp-card-bg);
  border: 1px solid var(--nxp-border);
  border-radius: var(--radius-lg);
  /* overflow: hidden; */
}
.nxp-widget__title {
  padding: var(--space-4);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--nxp-text-2);
  border-bottom: 1px solid var(--nxp-border);
}
.nxp-widget__body { padding: var(--space-4); }

/* Chapter List */
.nxp-chapter-list { }
.nxp-chapter-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  border-bottom: 1px solid var(--nxp-border);
  transition: background var(--dur-fast);
  cursor: pointer;
}
/* .nxp-chapter-item:last-child { border-bottom: none; } */
.nxp-chapter-item__num {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--nxp-text-3);
  min-width: 32px;
}
.nxp-chapter-item__title {
  flex: 1;
  font-size: 0.875rem;
  color: var(--nxp-text);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ── Chapter badge base ── */
.nxp-chapter-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: 0.03em;
  line-height: 1;
}
.nxp-chapter-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* 🔒 Locked — amber pill */
.nxp-chapter-badge--locked {
  background: rgba(245,158,11,0.12);
  color: var(--nxp-accent);
  border: 1px solid rgba(245,158,11,0.25);
}

/* 🔓 Unlocked (paid) — green pill */
.nxp-chapter-badge--unlocked {
  background: rgba(16,185,129,0.1);
  color: var(--nxp-success);
  border: 1px solid rgba(16,185,129,0.22);
}

/* ✓ Read (free) — subtle muted pill */
.nxp-chapter-badge--read {
  background: rgba(255,255,255,0.04);
  color: var(--nxp-text-3);
  border: 1px solid var(--nxp-border);
}

/* 🩷 Patreon Early Access badge — coral Patreon brand colour */
.nxp-chapter-badge--patreon {
  background: rgba(249,104,84,0.1);
  color: #f96854;
  border: 1px solid rgba(249,104,84,0.25);
  font-size: 0.66rem;
}
.nxp-chapter-badge--patreon .fab {
  font-size: 0.7rem;
}

/* ✅ Patreon Unlocked badge — green, mirrors coin-unlocked style */
.nxp-chapter-badge--patreon-unlocked {
  background: rgba(16,185,129,0.1);
  color: #10b981;
  border: 1px solid rgba(16,185,129,0.25);
  font-size: 0.66rem;
}
.nxp-chapter-badge--patreon-unlocked .fab {
  font-size: 0.7rem;
}

/* Patreon tier label in chapter submeta row */
.nxp-chapter-item__pt-tier {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #f96854;
  opacity: 0.85;
}
.nxp-chapter-item__pt-tier .fab {
  font-size: 0.65rem;
}

/* Green variant — when reader already has Patreon access */
.nxp-chapter-item__pt-tier--unlocked {
  color: #10b981;
  opacity: 1;
}

.nxp-chapter-item.read .nxp-chapter-item__title { color: var(--nxp-text-3); }



/* ═══════════════════════════════════════════════════════════════
   14 · COIN STORE
═══════════════════════════════════════════════════════════════ */
.nxp-coin-packages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top:15px;
}
.nxp-coin-pkg {
  background: var(--nxp-surface);
  border: 2px solid var(--nxp-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  transition: all var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.nxp-coin-pkg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--nxp-accent), transparent);
  opacity: 0;
  transition: opacity var(--dur);
}
.nxp-coin-pkg:hover, .nxp-coin-pkg.popular {
  border-color: var(--nxp-accent);
  box-shadow: 0 8px 32px rgba(245,158,11,0.2);
  transform: translateY(-4px);
}
.nxp-coin-pkg:hover::before, .nxp-coin-pkg.popular::before { opacity: 1; }
.nxp-coin-pkg__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--nxp-accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
}
.nxp-coin-pkg__icon { font-size: 2.5rem; margin-bottom: var(--space-3); }
.nxp-coin-pkg__amount {
  font-size: 2rem;
  font-weight: 900;
  color: var(--nxp-accent);
  margin-bottom: var(--space-1);
}
.nxp-coin-pkg__label { font-size: 0.8rem; color: var(--nxp-text-2); margin-bottom: var(--space-4); }
.nxp-coin-pkg__price {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: var(--space-2);
}
.nxp-coin-pkg__per { font-size: 0.72rem; color: var(--nxp-text-3); margin-bottom: var(--space-5); }


@media (min-width: 768px) {
  .nxp-coin-pkg {
    padding: var(--space-6); /* returns to roomier padding on desktop */
  }
}



/* ═══════════════════════════════════════════════════════════════
   15 · FOOTER - COMPACT & CENTERED MOBILE STYLE
═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
   16 · TOAST NOTIFICATIONS
═══════════════════════════════════════════════════════════════ */
.nxp-toast-container {
  position: fixed;
  top: 80px;
  bottom: auto;
  right: var(--space-5);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
/* On the reader (chapter) page a fixed footer bar holds the text-settings and
   navigation controls. Lift bottom-anchored toasts above it so they never
   cover those controls (main.js reads this var for the inline `bottom`). */
body:has(#nxpFooterBar) { --nxp-toast-safe-bottom: 65px; }
.nxp-toast {
  /* Per-type accent, overridden by the modifier classes below. All the
     configurable knobs (opacity/tint/radius/border) come in as custom
     properties set on the container by the Notification Center config. */
  --nxp-toast-accent: var(--nxp-primary);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px var(--space-4);
  /* Dark glass — the SAME on every theme (unless overridden by the Notification
     Center "Background color" picker): a translucent near-black panel with light
     text. Reads as "blackish" on the white/sepia/soft pages and still sits fine
     on dark pages. Not tied to --nxp-surface, so it can never match the page
     background and blend in. Default supplied as the var() fallback so a value
     set on the container (by main.js) wins instead of being shadowed. */
  color: #F3F4F8;
  /* Translucent frosted panel — neutral base, NO color tint in the fill. The
     accent lives only on the icon. Opacity stays high so the base reads DARK
     (not grey) even over a white page — the blur still lets a little through. */
  background:
    color-mix(in srgb, var(--nxp-toast-surface, #0A0A0D) var(--nxp-toast-opacity, 98%), transparent);
  border: var(--nxp-toast-border, 1px) solid rgba(255, 255, 255, 0.534);
  border-radius: var(--nxp-toast-radius, 12px);
  /* Whole-toast opacity — fades text, icon, border and fill together. */
  opacity: var(--nxp-toast-alpha, 1);
  /* box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); */
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  font-size: 0.875rem;
  font-weight: 500;
  pointer-events: all;
  animation: nxpToastIn 0.35s var(--ease-spring) forwards;
  max-width: 320px;
}
.nxp-toast i { color: var(--nxp-toast-accent); }
.nxp-toast.removing { animation: nxpToastOut 0.25s var(--ease) forwards; }
.nxp-toast--success { --nxp-toast-accent: var(--nxp-success); }
.nxp-toast--error   { --nxp-toast-accent: var(--nxp-danger); }
.nxp-toast--info    { --nxp-toast-accent: var(--nxp-primary); }
.nxp-toast--warn    { --nxp-toast-accent: #F59E0B; }
/* End states resolve to --nxp-toast-alpha (default 1) so the "overall opacity"
   knob survives the animation's `forwards` fill instead of snapping to 1. */
@keyframes nxpToastIn  { from { opacity: 0; transform: translateX(40px); } to { opacity: var(--nxp-toast-alpha, 1); transform: translateX(0); } }
@keyframes nxpToastOut { from { opacity: var(--nxp-toast-alpha, 1); transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } }
/* Toast entrance variants (Notification Center → Appearance → Animation) */
.nxp-toast-anim--fade  { animation: nxpToastFade  0.35s var(--ease) forwards; }
.nxp-toast-anim--scale { animation: nxpToastScale 0.35s var(--ease-spring) forwards; }
@keyframes nxpToastFade  { from { opacity: 0; } to { opacity: var(--nxp-toast-alpha, 1); } }
@keyframes nxpToastScale { from { opacity: 0; transform: scale(0.9); } to { opacity: var(--nxp-toast-alpha, 1); transform: scale(1); } }

/* ═══════════════════════════════════════════════════════════════
   17 · MODAL
═══════════════════════════════════════════════════════════════ */
.nxp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur);
}
.nxp-modal-overlay.open { opacity: 1; pointer-events: all; }
.nxp-modal {
  background: var(--nxp-surface);
  border: 1px solid var(--nxp-border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  transform: scale(0.95) translateY(8px);
  transition: transform var(--dur) var(--ease-spring);
  overflow: hidden;
}
.nxp-modal-overlay.open .nxp-modal { transform: scale(1) translateY(0); }
.nxp-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--nxp-border);
}
.nxp-modal__title { font-size: 1.1rem; font-weight: 700; }
.nxp-modal__close {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--nxp-bg-3);
  color: var(--nxp-text-2);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.nxp-modal__close:hover { background: var(--nxp-danger); color: #fff; }
.nxp-modal__body { padding: var(--space-6); }
.nxp-modal__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--nxp-border);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════
   18 · RESPONSIVE — TABLET (≤ 1100px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .nxp-novel-row { grid-template-columns: repeat(5, 1fr); }
  .nxp-coin-packages { grid-template-columns: repeat(2, 1fr); }
  .nxp-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .nxp-stat-cards { grid-template-columns: repeat(2, 1fr); }

}

/* ═══════════════════════════════════════════════════════════════
   19 · RESPONSIVE — SMALL TABLET (≤ 900px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .nxp-novel-hero__cover {width: 220px;}
  .nxp-novel-hero__layout { grid-template-columns: 220px 1fr; gap: var(--space-5); }
  .nxp-novel-body { grid-template-columns: 1fr; }
  /* Sidebar goes BELOW chapters on mobile — do not set grid-row: 1 */
  .nxp-sidebar { grid-row: auto; }
  .nxp-dash-layout { grid-template-columns: 1fr; }
  .nxp-novel-row { grid-template-columns: repeat(4, 1fr); }


  /* Tables always in scroll wrapper at this size */
  .nxp-table-wrap .nxp-table { min-width: 480px; }
}

/* ═══════════════════════════════════════════════════════════════
   20 · RESPONSIVE — MOBILE (≤ 768px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --header-height: 56px;
    --space-8: 48px;   /* tighten large padding on mobile */
    --space-9: 64px;
  }

  .nxp-ranking-title {
      -webkit-line-clamp: 1 !important;
    }

  /* Shrink coin display so it doesn't crowd the header */
  .nxp-coin-display { padding: 5px 10px; font-size: 0.8rem; }
  .nxp-coin-icon    { width: 15px; height: 15px; }

  /* ── Novel Grid ── */
  .nxp-novel-row { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }

  /* ── Generic Grids ── */
  .nxp-grid-2,
  .nxp-grid-3,
  .nxp-grid-4 { grid-template-columns: 1fr 1fr; }

  /* ── Single Novel Hero ── */
  .nxp-novel-hero { padding: var(--space-5) 0 0; }
  .nxp-novel-hero__layout {
    grid-template-columns: 160px minmax(0, 1fr);   /* side-by-side on mobile: cover left, info right */
    gap: var(--space-4);
    text-align: left;
    align-items: flex-start;
  }
  .nxp-novel-hero__cover {
    width: 160px;
    margin: 0;
  }
  .nxp-novel-hero__info { text-align: left; padding-bottom: var(--space-3); }
  .nxp-novel-hero__author-row { justify-content: flex-start; flex-wrap: wrap; }
  .nxp-novel-hero__stats { justify-content: flex-start; }
  .nxp-novel-hero__actions { justify-content: flex-start; }
  /* Synopsis left-aligned, toggle visible */
  .nxp-synopsis-wrap { text-align: left; }
  .nxp-novel-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .nxp-novel-tabs::-webkit-scrollbar { display: none; }
  .nxp-tab-btn { flex-shrink: 0; padding: 10px 14px; font-size: .9rem; }

  /* ── Chapter Navigation ── */
  .nxp-chapter-nav { grid-template-columns: 1fr 1fr; }

  /* ── Chapter list controls: stack on mobile ── */
  .nxp-chapter-controls {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .nxp-chapter-controls > div {
    width: 100%;
    justify-content: space-between;
  }
  .nxp-chapter-controls .nxp-input {
    max-width: 100% !important;
    flex: 1;
  }

  /* ── Lock Box ── */
  .nxp-lock-box { padding: var(--space-6) var(--space-4); }

  /* ── Hero Section ── */
  .nxp-hero { min-height: 380px; }

  /* ── Stat Cards ── */
  .nxp-stat-cards { grid-template-columns: 1fr 1fr; }
  .nxp-stat-card { padding: var(--space-4); }
  .nxp-stat-card__value { font-size: 1.5rem; }

  /* ── Dashboard layout on mobile ── */
  .nxp-dash-layout { padding: var(--space-4) 0; gap: var(--space-3); }
  .nxp-table-wrap .nxp-table { min-width: 320px; }

  /* Profile card sidebar: horizontal on mobile */
  .nxp-profile-card { display: flex; flex-wrap: wrap; gap: var(--space-3); text-align: left; align-items: center; }
  .nxp-profile-card__avatar-wrap { margin: 0; width: 56px; height: 56px; flex-shrink: 0; }
  .nxp-profile-card__avatar { width: 56px; height: 56px; }
  .nxp-profile-card__stats { margin: 0; padding: 0; border-top: none; flex-shrink: 0; }
  .nxp-profile-card__coins { margin-bottom: 0; }

  /* Profile card: stack on very narrow */
  .nxp-dash-profile { flex-wrap: wrap; }
  .nxp-dash-profile__avatar { width: 52px; height: 52px; }

  /* Panels */
  .nxp-dash-panel__body { padding: var(--space-4); }
  .nxp-dash-panel__head { padding: var(--space-3) var(--space-4); }

  /* Coin hero: smaller */
  .nxp-coin-hero { padding: var(--space-5); }
  .nxp-coin-hero__balance { font-size: 3rem; }

  /* Tables: always scrollable, ensure wrapper is used */
  .nxp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nxp-table { min-width: 480px; }
  .nxp-table th, .nxp-table td { padding: 10px var(--space-3); }

  /* ── Footer ── */
  .nxp-footer { padding: var(--space-6) 0 var(--space-5); margin-top: 50px}
  .nxp-footer__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .nxp-footer__bottom { flex-direction: column; gap: var(--space-2); text-align: center; }

  /* ── Modals ── */
  .nxp-modal { border-radius: var(--radius-lg); }
  .nxp-modal__body { padding: var(--space-4); }
  .nxp-modal__footer { padding: var(--space-3) var(--space-4); flex-wrap: wrap; }

  /* ── Tables: make horizontally scrollable ── */
  .nxp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nxp-table { min-width: 480px; }

  /* ── Auth Box ── */
  .nxp-auth-box { padding: var(--space-5); }

  /* ── Toast: full-width on mobile ── */
  .nxp-toast-container {
    left: var(--space-3);
    right: var(--space-3);
    top: 70px;
    bottom: auto;
  }
  .nxp-toast { max-width: 100%; }

  /* ── Coin Packages ── */
  .nxp-coin-packages { 
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-top:12px; 
  }
  .nxp-coin-pkg { padding: var(--space-4); }
  .nxp-coin-pkg__icon { font-size: 2rem; }
  .nxp-coin-pkg__amount { font-size: 1.5rem; }

  /* ── Pagination ── */
  .nxp-pagination { gap: var(--space-1); flex-wrap: wrap; }

  /* ── Comments ── */
  .nxp-comment--reply { margin-left: var(--space-5); }
}

/* ═══════════════════════════════════════════════════════════════
   21 · RESPONSIVE — SMALL MOBILE (≤ 480px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  :root {
    --space-7: 36px;
    --space-8: 40px;
  }
  .nxp-author-follow {
  display: none;
}

.nxp-novel-hero__title {
  margin-bottom: 6px;
}

  .nxp-dash-nav {
    display: grid !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: var(--radius-lg);
  }


  /* ── Novel Grid: 2 columns on small phones ── */
  .nxp-novel-row { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }

  /* ── Novel card text tighten ── */


  /* ── All grids: stack ── */
  .nxp-grid-2,
  .nxp-grid-3,
  .nxp-grid-4,
  .nxp-grid-5 { grid-template-columns: 1fr; }

  /* ── Auth ── */
  .nxp-auth-box { padding: var(--space-4); }
  .nxp-auth-wrap { padding: var(--space-3); }

  /* ── Coin packages: 1 col on smallest screens ── */


  /* ── Stat cards: 2 col ── */
  .nxp-stat-cards { grid-template-columns: repeat(2, 1fr); }
  .nxp-stat-card__value { font-size: 1.75rem; }

  /* ── Dashboard: full-width, tighter everything ── */
  .nxp-dash-layout { padding: var(--space-3) 0; }
  .nxp-dash-panel { margin-bottom: var(--space-3); border-radius: var(--radius); }
  .nxp-dash-panel__body { padding: var(--space-3); }
  .nxp-dash-panel__head { padding: var(--space-3); }

  /* Profile card: compact horizontal strip */
  .nxp-dash-profile { padding: var(--space-3); gap: var(--space-3); }
  .nxp-dash-profile__avatar { width: 44px; height: 44px; }
  .nxp-dash-profile__name { font-size: 0.9rem; }

  /* Sidebar profile card: ultra compact */
  .nxp-profile-card__avatar { width: 44px; height: 44px; font-size: 1.1rem; }
  .nxp-profile-card__avatar-wrap { width: 44px; height: 44px; }
  .nxp-profile-card__avatar-btn { width: 20px; height: 20px; }
  .nxp-profile-card__name { font-size: 0.82rem; }
  .nxp-profile-card__stat span { font-size: 0.85rem; }

  /* Stat cards: 2 cols still */
  .nxp-stat-card__value { font-size: 1.4rem; }

  /* Continue reading: tighten cover */
  .nxp-cr-card__cover { width: 32px; height: 48px; }
  .nxp-cr-card { padding: 10px var(--space-3); }
  .nxp-cr-card__title { font-size: 0.82rem; }

  /* Coin hero on tiny screens */
  .nxp-coin-hero { padding: var(--space-4); }
  .nxp-coin-hero__balance { font-size: 2.5rem; }

  /* Table: horizontal scroll, compact cells */
  .nxp-table { min-width: 310px; }
  .nxp-table th, .nxp-table td { padding: 8px var(--space-3); font-size: 0.8rem; }

  /* ── Hero ── */
  .nxp-hero { min-height: 300px; }

  /* ── Buttons: ensure tap targets ── */
  .nxp-btn { min-height: 44px; }
  .nxp-btn--sm { min-height: 36px; padding: 6px 12px; }

  /* ── Chapter item: smaller ── */
  .nxp-chapter-item { padding: 10px var(--space-3); }
  .nxp-chapter-item__title { font-size: 0.8rem; }

  /* ── Novel hero on small phones: stack cover on top ── */
  .nxp-novel-hero__layout {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .nxp-novel-hero__cover { width: 150px; margin: 0 auto; }
  .nxp-novel-hero__info { text-align: center; }
  .nxp-novel-hero__author-row { justify-content: center; }
  .nxp-novel-hero__stats { justify-content: center; }
  .nxp-novel-hero__actions { justify-content: center; }
  .nxp-synopsis-wrap { text-align: left; }

  /* ── Tags row: allow scroll ── */
  .nxp-tags-row {
    flex-wrap: wrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .nxp-tags-row::-webkit-scrollbar { display: none; }

  /* ── Footer ── */
  .nxp-footer__grid { gap: var(--space-4); }
  .nxp-footer { padding: var(--space-5) 0 var(--space-4); }

  /* ── Modal: sheet from bottom on small screens ── */
  .nxp-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .nxp-modal {
    max-width: 100%;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  /* ── Comment replies: less indent ── */
  .nxp-comment--reply { margin-left: var(--space-3); }
  .nxp-comment__avatar { width: 32px; height: 32px; font-size: 0.78rem; }

  /* ── Page title on browse ── */
  .nxp-browse-layout { padding: var(--space-4) 0; }
}

/* ═══════════════════════════════════════════════════════════════
   22 · UTILITY CLASSES
═══════════════════════════════════════════════════════════════ */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.mt-auto     { margin-top: auto; }
.w-full      { width: 100%; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-muted  { color: var(--nxp-text-2); }
.text-xs     { font-size: 0.75rem; }
.text-sm     { font-size: 0.875rem; }
.text-coin   { color: var(--nxp-accent); }
.text-primary{ color: var(--nxp-primary); }
.text-success{ color: var(--nxp-success); }
.text-danger { color: var(--nxp-danger); }
.fw-bold     { font-weight: 700; }
.fw-black    { font-weight: 900; }











/* Container for the inline stats bar (Handles both templates and card variants) */
.nxp-hc-stats-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 2px;

    font-size: 0.8rem;
    color: var(--nxp-text-3);
    font-family: var(--font-ui);
    width: 100%;           
}

/* Individual Stat Elements (Icons + Digits + Mini Labels) */
.nxp-hc-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-weight: 600;
}

.nxp-hc-stat-divider {
  color: var(--nxp-text-3);
  font-weight: 400;
  margin: 0 3px;
  user-select: none;
}

/* Text Labels ("Views", "Chapters") */

.nxp-fic-stat__label {
    font-weight: 500;
    color: var(--nxp-text-4);
    font-size: 1em;
}

/* The Inter-item Middle Dot Separators */
.nxp-fic-stat__sep {
    color: var(--nxp-text-3);
    font-weight: 400;
    margin: 0 3px;
    user-select: none;
}

/* Mobile Responsive Center-Alignment Block */
@media (max-width: 480px) {
  .nxp-fic-stats, 
  .nxp-hc-stats-strip {
    justify-content: center !important;
    text-align: center !important;
  }
}
























/* ═══════════════════════════════════════════════════════════════
   23 · HORIZONTAL CARDS  (Library / Ranking / Browse / Archive — in use)
═══════════════════════════════════════════════════════════════ */

.nxp-novel-card {
    align-self: start;
}

/* --- Typography & Base --- */
.nxp-rank-header { margin-bottom: 24px; }
.nxp-header-title { font-size: 1.5rem; font-weight: 800; display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--nxp-text); }
.nxp-header-window { font-size: 0.9rem; font-weight: 500; color: var(--nxp-text-3); }
.nxp-header-desc { font-size: 0.95rem; color: var(--nxp-text-2); margin: 0; }

/* --- Filters Dashboard --- */
.nxp-filters-wrapper { background: var(--nxp-surface); border: 1px solid var(--nxp-border); border-radius: 12px; padding: 12px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.nxp-tabs-sort { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.nxp-tabs-sort::-webkit-scrollbar { display: none; }
.nxp-tab-item {
  flex: 1;
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--nxp-border-rw);
  /* border: 1px solid var(--nxp-border); */
  border-radius: 6px;
  font-size: 0.80rem;
  font-weight: 600;
  color: var(--nxp-text-2);
  text-decoration: none;
  transition: 0.2s;
}
.nxp-tab-item.active {
  background: var(--nxp-primary);
  color: #fff;
  
}

/* --- Secondary Filters --- */
.nxp-filters-secondary { 
    display: flex; 
    flex-wrap: nowrap; 
    gap: 8px; 
    align-items: center; 
    justify-content: space-between; 
}

/* 1. The Switch Track (Container) */
.nxp-pills-window { 
    display: inline-flex; 
    background: var(--nxp-bg-5); /* Creates the darker inset track */
    padding: 4px; /* Creates the inner padding for the switch to move in */
    border-radius: 50px; /* Fully rounded track */
    border: 1px solid var(--nxp-border); 
    flex-shrink: 0; 
    gap: 0; /* Remove gap to make it a continuous track */
}

/* 2. The Inactive Flip Options */
.nxp-pill {
    padding: 5px 12px;
    font-size: 0.75em;
    font-weight: 600;
    color: var(--nxp-text-3); /* Dimmer text for inactive options */
    text-decoration: none;
    border-radius: 46px; /* Inner thumb rounding */
    border: none; /* Remove individual borders */
    background: transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth snap animation */
    cursor: pointer;
}

.nxp-pill:hover {
    color: var(--nxp-text);
}

@media (max-width:600px) {
.nxp-pill {
    padding: 2px 10px;
    font-size: 0.70em;
    font-weight: 600;
    color: var(--nxp-text-3); /* Dimmer text for inactive options */
    text-decoration: none;
    border-radius: 46px; /* Inner thumb rounding */
    border: none; /* Remove individual borders */
    background: transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth snap animation */
    cursor: pointer;
}
}





/* 3. The Active "Thumb" */
.nxp-pill.active {
    background: var(--nxp-surface); /* Matches your card backgrounds to pop out */
    color: var(--nxp-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12); /* Gives it a physical 3D raised look */
}

/* --- Select Dropdown --- */
.nxp-select-genre {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--nxp-text-2);
  font-size: 0.85rem;
  min-width: 0;
  flex: 1;
  max-width: 130px;
  border: 1px solid var(--nxp-border);
}
.nxp-select-genre select { 
  background: transparent; 
  border: none; 
  outline: none; 
  font-weight: 600; 
  color: inherit; 
  cursor: pointer; 
  padding-right: 4px; 
  width: 100%; 
  text-overflow: ellipsis; 
  overflow: hidden; 
  white-space: nowrap; 
}

.nxp-results-count { font-size: 0.85rem; color: var(--nxp-text-3); margin-bottom: 12px; }

/* --- Layout Grid --- */
.nxp-rank-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.nxp-rank-row { display: flex; align-items: center; gap: 10px; margin-bottom: 0px; width: 100%; }

/* --- Novel Card Component (Mobile First) --- */
.nxp-novel-card { 
  box-sizing: border-box; 
  width: 100%;
  margin-top: 20px !important;
  background: var(--nxp-card-bg);
  border: 1px solid #6464644f;
  border-bottom: 2px solid #64646452;
  border-radius: 12px;
  padding: 14px 8px 10px 14px; 
  position: relative;
  display: flex;
  flex-direction: column; 
  transition: box-shadow 0.15s;
}
.nxp-novel-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }

.nxp-card-top-flex { display: flex; gap: 8px; align-items: flex-start; }

.nxp-thumb-mask { background-color: transparent; margin-top: -35px; flex-shrink: 0; position: relative; }
.nxp-thumb { width: 75px; height: 112px; object-fit: cover; border-radius: 3px; display: block; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.nxp-thumb.nxp-cover-ph { width: 75px; height: 112px; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

.nxp-info-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  height: 77px; 
  min-width: 0;
}

/* 2-Line Title Clamp Rules Always */
.nxp-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--nxp-text);
  margin: 0;
  line-height: 1.15;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.nxp-author { font-size: 0.8rem; color: var(--nxp-text-2); display: flex; align-items: center; gap: 2px; font-weight: 600; line-height: 1.2; margin-bottom:auto;}
.nxp-author-by { color: var(--nxp-text-2); font-weight: 400; }

.nxp-meta-strip { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; line-height: 1.2; }
.nxp-meta-item { font-size: 0.75rem; color: var(--nxp-text-2); display: flex; align-items: center; gap: 3px; font-weight: 500; white-space: nowrap; }
.nxp-meta-item i { font-size: 0.85em; opacity: 0.75; color: inherit; }

/* Text Utilities Toggle */
.nxp-text-mobile { display: inline; font-weight: 500; color: var(--nxp-text-4); font-size: 1em; }
.nxp-text-desktop { display: none; }

.nxp-genre-row-rank { 
    display: flex; 
    flex-wrap: nowrap; 
    gap: 5px; 
    margin-top: 12px !important;
    margin-bottom: 8px !important;
    overflow: hidden; 
}

.nxp-hcard-genres {
  display: flex;
  gap: 6px;
  margin-top: 12px !important;
  margin-bottom: 8px !important;
}

.nxp-hcard-genre-tag {
  font-size: 0.65rem;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--nxp-bg-2, #2a2a2c);
  color: var(--nxp-text-2, #a1a1aa);
  text-decoration: none;
  border: 1px solid var(--nxp-border, #3f3f46);
  line-height: 1.2;
  flex-shrink: 0; 
  display: inline-flex; 
  align-items: center; 
  transition: background 0.15s, border-color 0.15s, color 0.15s; 
  white-space: nowrap; 
}

.nxp-genre-lib, 
.nxp-genre-rank {
  font-size: 0.65rem;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--nxp-bg-2, #2a2a2c);
  color: var(--nxp-text-2, #a1a1aa);
  text-decoration: none;
  border: 1px solid var(--nxp-border, #3f3f46);
  line-height: 1.2;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

/* Force max 3 visibility items on mobile */
/* .nxp-genre-tag:nth-child(n+4) { display: none; } */
.nxp-genre-rank:nth-child(n+5) { display: none; }
.nxp-hcard-genre-tag:nth-child(n+4) { display: none; }

/* --- Synopsis Styles (Global) --- */
.nxp-synopsis { 
    margin-top: 0px; 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    cursor: pointer; 
}

.nxp-synopsis-text { 
    font-weight: 400; 
    color: var(--nxp-text); 
    font-size: 0.85rem; 
    margin: 0; 
    line-height: 1.3; 
    
    /* CRITICAL: Global 2-line clamp */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nxp-synopsis-text p { 
    margin-bottom: 15px; 
}

/* Expanded state override */
.nxp-synopsis-text.nxp-hcard__excerpt--expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* --- Modern Rank Badge --- */
.nxp-ranking-badge {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px; 
    background: var(--nxp-surface);
    color: var(--nxp-text-2); 
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
    z-index: 5;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden; 
}
.nxp-ranking-badge span { z-index: 2; letter-spacing: -0.5px; }
.nxp-ranking-badge i { position: absolute; font-size: 1.3rem; opacity: 0.2; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.nxp-ranking-badge--gold { background: linear-gradient(135deg, #FFD700 0%, #FF8C00 100%); color: #fff; border-color: #FF8C00; box-shadow: 0 4px 10px rgba(255, 140, 0, 0.45); transform: translateX(-50%) scale(1.1); }
.nxp-ranking-badge--silver { background: linear-gradient(135deg, #E0E5EC 0%, #9E9E9E 100%); color: #fff; border-color: #9E9E9E; box-shadow: 0 4px 10px rgba(158, 158, 158, 0.35); transform: translateX(-50%) scale(1.05); }
.nxp-ranking-badge--bronze { background: linear-gradient(135deg, #F3A183 0%, #A65D37 100%); color: #fff; border-color: #A65D37; box-shadow: 0 4px 10px rgba(166, 93, 55, 0.35); transform: translateX(-50%) scale(1.02); }
.nxp-ranking-badge--gold i, .nxp-ranking-badge--silver i, .nxp-ranking-badge--bronze i { opacity: 0.3; }

/* --- Pagination & Global Layout Containers --- */
.nxp-pagination { margin-top: 32px; }
.nxp-pagination ul.page-numbers { display: flex; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 0; }
.nxp-pagination ul.page-numbers li { margin: 0; }
.nxp-empty-state { text-align: center; padding: 48px 16px; background: var(--nxp-surface); border-radius: 12px; border: 1px dashed var(--nxp-border); }
.nxp-empty-state i { font-size: 3rem; color: var(--nxp-text-4); margin-bottom: 16px; }

/* .bl-container was merged into .nxp-container (horizontal-only) + .nxp-page
   (vertical). All former usages were renamed; the class is retired. */

/* --- Desktop Layout Enhancements (≥ 768px) --- */
@media (min-width: 768px) {
    .nxp-filters-wrapper { flex-direction: row; justify-content: space-between; align-items: center; }
    .nxp-tabs-sort { flex: unset; }
    
    
    .nxp-novel-card { padding: 24px; margin-top: 20px !important; }
    .nxp-card-top-flex { gap: 10px; }
    .nxp-thumb-mask { margin-top: -40px; }
    .nxp-thumb, .nxp-thumb.nxp-cover-ph { width: 90px; height: 135px; }
    .nxp-info-col { height: 95px; }
    .nxp-title { font-size: 1.25rem; line-height: 1.1; }
    .nxp-author { font-size: 0.9rem; }
    .nxp-meta-strip { gap: 6px 12px; }
    .nxp-synopsis-text { font-size: 0.95rem; line-height: 1.5; }
    
    .nxp-text-desktop { display: inline; }
    .nxp-text-mobile { display: none; }
    
    /* Desktop Responsive Genre Rule Adjustments */
    .nxp-genre-tag:nth-child(n+4) { display: inline-flex; }
    .nxp-genre-tag { line-height: 1; }
}


/*
H-Cards Grid 
*/
@media (min-width:1150px) {
  .nxp-cr-settings-popover {
   right: 100px !important;
  }
  .nxp-rank-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}


@media (min-width:1600px) {
  .nxp-cr-settings-popover {
   right: 500px !important;
  }
}
@media (max-width: 600px) {

  /* .nxp-meta-strip {
    overflow: hidden;
    gap: 5px;
  } */

  /* Tighter card + smaller cover on phones */
  /* .nxp-novel-card { padding: 12px 10px 8px 12px; border-radius: 8px;}
  .nxp-card-top-flex { gap: 10px; }
  .nxp-thumb-mask { margin-top: -28px; }
  .nxp-thumb,
  .nxp-thumb-placeholder { width: 60px; height: 90px; }
  .nxp-thumb-placeholder { font-size: 18px; }
  .nxp-info-col { height: 62px; } */

  /* Typography scales down to match the smaller cover */
  /* .nxp-title { font-size: 0.98rem; }
  .nxp-author { font-size: 0.72rem; }
  .nxp-meta-item { font-size: 0.68rem; gap: 2px; }
  .nxp-meta-item i { font-size: 0.8em; }
  .nxp-synopsis-text { font-size: 0.8rem; } */

  /* Genre chips */
  /* .nxp-hcard-genre-tag,
  .nxp-genre-lib,
  .nxp-genre-rank { font-size: 0.6rem; padding: 2px 6px; }
  .nxp-hcard-genres { gap: 5px; margin-top: 8px !important; } */

  /* Rank badge */
  /* .nxp-ranking-badge { width: 28px; height: 28px; font-size: 0.8rem; bottom: -6px; }
  .nxp-ranking-badge i { font-size: 1.1rem; } */

  /* Ranking page heading (ranking-specific classes — Browse uses its own) */
  .nxp-rank-header { margin-bottom: 12px; }
  .nxp-header-title { font-size: 1.25rem; gap: 6px; }
  .nxp-header-window { font-size: 0.8rem; }
  .nxp-header-desc { font-size: 0.85rem; }

  /* Ranking page filter bar */
  .nxp-filters-wrapper { padding: 10px; gap: 10px; }
  .nxp-tabs-sort { gap: 5px; }
  .nxp-tab-item { padding: 5px 10px; font-size: 0.72rem; }
  .nxp-select-genre { padding: 5px 8px; font-size: 0.78rem; max-width: 120px; }

  /* .nxp-synopsis-text.nxp-hcard__excerpt--expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  } */
}

/* (Removed) Per-page 601px gutter override — the --gutter-x token now
   supplies the 48px desktop side gutter to every .nxp-container. */

/* ═══════════════════════════════════════════════════════════════
   24 · GRID PAGES FOR CARDS  (all card grids — in use)
═══════════════════════════════════════════════════════════════ */


/* ── Results grid ────────────────────────────────────── */
.brw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)) !important;
    gap: 16px;
    margin-bottom: 24px;
}





/* ═══════════════════════════════════════════════════════════════
   25 · READING PAGE
═══════════════════════════════════════════════════════════════ */
.nxp-reader-text {
  font-family: var(--font-body);
  font-size: var(--reader-font-size, 17px);
  line-height: var(--reader-line-height, 1.85);
  color: var(--nxp-text);
  transition: font-size var(--dur), color var(--dur);
}
.nxp-reader-text p { margin-bottom: 1.4em; }
.nxp-reader-text p:last-child { margin-bottom: 0; }
.nxp-reader-text h3 { font-family: var(--font-heading); margin: 2em 0 1em; }

/* Chapter Navigation */
.nxp-chapter-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--nxp-border);
  margin-top: var(--space-7);
}
.nxp-chapter-nav__prev { }
.nxp-chapter-nav__next { text-align: right; }
.nxp-chapter-nav__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--nxp-text-3); margin-bottom: 4px; }
.nxp-chapter-nav__title { font-size: 0.9rem; font-weight: 600; color: var(--nxp-text-2); }
.nxp-chapter-nav__title:hover { color: var(--nxp-primary); }

/* Lock Box */
.nxp-lock-box {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  border: 1px dashed var(--nxp-border-light);
  border-radius: var(--radius-xl);
  margin: var(--space-6) 0;
  background: radial-gradient(ellipse at center, rgba(59,130,246,0.04) 0%, transparent 70%);
}
.nxp-lock-box__icon { font-size: 3rem; margin-bottom: var(--space-4); }
.nxp-lock-box__title { font-size: 1.4rem; font-weight: 800; margin-bottom: var(--space-3); }
.nxp-lock-box__desc { color: var(--nxp-text-2); margin-bottom: var(--space-5); }
.nxp-lock-box__cost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--nxp-accent);
  margin-bottom: var(--space-5);
}
.nxp-lock-box__balance { font-size: 0.85rem; color: var(--nxp-text-2); margin-top: var(--space-3); }
.nxp-lock-box__actions { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }








/* (Removed) The old !important 48px gutter patch across five selectors.
   The --gutter-x token now drives side padding on every container, so
   the override — and its specificity war — is no longer needed.
   Note: .nxp-status still wants the shared gutter; it reads it below. */
.nxp-status { padding-inline: var(--gutter-x); }

/* ═══════════════════════════════════════════════════════════════
   26 · SHARED COMPONENTS
   Moved out of template inline <style> blocks (browse / library /
   ranking / single-novel / dashboard). One canonical copy each.
═══════════════════════════════════════════════════════════════ */

/* ── Cover-as-lightbox trigger ── */
.nxp-cover-trigger { cursor: zoom-in; }
.nxp-cover-trigger:focus-visible { outline: 2px solid var(--nxp-accent); outline-offset: 2px; }

/* ── Cover Lightbox Overlay ── */
.nxp-cover-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-4, 1rem);
    opacity: 0; transition: opacity 0.2s ease;
}
.nxp-cover-lightbox.is-visible { opacity: 1; }
.nxp-cover-lightbox__wrapper {
    position: relative;
    max-width: 90vw; max-height: 85vh;
    display: flex; align-items: center; justify-content: center;
}
.nxp-cover-lightbox__image {
    max-width: 100%; max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transform: scale(0.95); transition: transform 0.2s ease;
}
.nxp-cover-lightbox.is-visible .nxp-cover-lightbox__image { transform: scale(1); }
.nxp-cover-lightbox__close {
    position: absolute; top: -16px; right: -16px;
    background: var(--nxp-primary); color: #fff;
    border: none; border-radius: 50%;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; cursor: pointer;
    box-shadow: var(--shadow-sm); transition: transform 0.2s; z-index: 10;
}
.nxp-cover-lightbox__close:hover { transform: scale(1.1); background: var(--nxp-primary-dark); }
@media (max-width: 480px) {
    .nxp-cover-lightbox__close { top: -12px; right: -12px; }
}

/* ── Pagination (browse + ranking, merged) ── */
.pagination {
    margin-top: 48px;
    display: flex; justify-content: center;
    gap: 6px; flex-wrap: wrap;
}
.pagination .page-numbers {
    display: flex; align-items: center; justify-content: center;
    height: 38px; min-width: 38px;
    padding: 0 12px;
    background: var(--nxp-surface);
    border: 1px solid var(--nxp-border);
    border-radius: var(--radius);
    color: var(--nxp-text-2);
    font-weight: 600; font-size: 0.875rem;
    text-decoration: none;
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.pagination .page-numbers.current {
    background: var(--nxp-primary);
    color: #fff;
    border-color: var(--nxp-primary);
}
.pagination .page-numbers:hover:not(.current) {
    border-color: var(--nxp-primary);
    color: var(--nxp-primary);
    background: rgba(59,130,246,0.06);
}

/* ── Continue-reading history cards (dashboard + library) ── */
.nxp-ud-history-item { display: flex; align-items: center; gap: 16px; padding: 12px; background: var(--nxp-surface); border: 1px solid var(--nxp-border); border-radius: 12px; text-decoration: none; transition: all 0.2s; }
.nxp-ud-history-item:hover { border-color: var(--nxp-primary); box-shadow: 0 4px 16px rgba(0,0,0,0.06); transform: translateY(-2px); }
.nxp-ud-history-item__cover { position: relative; width: 56px; height: 80px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: var(--nxp-bg-3); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.nxp-ud-history-item__cover img { width: 100%; height: 100%; object-fit: cover; }
.nxp-ud-history-item__ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--nxp-text-4); font-size: 1.2rem; }
.nxp-ud-history-item__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; opacity: 0; transition: opacity 0.2s; }
.nxp-ud-history-item:hover .nxp-ud-history-item__overlay { opacity: 1; }
.nxp-ud-history-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nxp-ud-history-item__title { font-size: 1rem; font-weight: 800; color: var(--nxp-text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nxp-ud-history-item__meta { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--nxp-text-3); flex-wrap: nowrap; }
.nxp-ud-history-item__ch { color: var(--nxp-primary); min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxp-ud-history-item__dot, .nxp-ud-history-item__time { flex-shrink: 0; }
.nxp-ud-history-item__progress { margin-top: 8px; height: 5px; width: 100%; background: var(--nxp-bg-3); border-radius: 99px; overflow: hidden; }
.nxp-ud-history-item__progress-bar { height: 100%; background: var(--nxp-primary); border-radius: 99px; transition: width 0.3s ease; }
.nxp-ud-history-item__action { width: 32px; height: 32px; border-radius: 50%; background: var(--nxp-bg-2); border: 1px solid var(--nxp-border); display: flex; align-items: center; justify-content: center; color: var(--nxp-text-3); font-size: 0.9rem; flex-shrink: 0; transition: all 0.2s; }
.nxp-ud-history-item:hover .nxp-ud-history-item__action { background: var(--nxp-primary); border-color: var(--nxp-primary); color: #fff; }

/* ── Loading spinner + shared animations (nxpSpin lives with the
      global keyframes near the top of this file) ── */
.nxp-loading-spinner { width: 32px; height: 32px; border: 3px solid var(--nxp-border); border-top-color: var(--nxp-primary); border-radius: 50%; animation: nxpSpin 0.7s linear infinite; margin: 24px auto; }
@keyframes nxpFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes nxpSlideUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Responsive text swap helpers (markup in novel-hcard + several
      templates; previously only styled on the browse page) ── */
.nxp-text-mobile { display: none; }
.nxp-text-desktop { display: inline; }
@media (max-width: 600px) {
    .nxp-text-desktop { display: none; }
    .nxp-text-mobile { display: inline; }
}

/* ═══════════════════════════════════════════════════════════════
   27 · BROWSE / ARCHIVE-NOVEL PAGE
   Moved from templates/archive-novel.php inline styles.
═══════════════════════════════════════════════════════════════ */

/* ── Sort & Layout Utility Bar ── */
.nxp-utility-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── Compact Sort Pill ── */
.compact-pill-sort {
    display: flex;
    align-items: center;
    background: var(--nxp-bg-5);
    border: 1px solid var(--nxp-border);
    border-radius: 4px;
    padding: 5px 12px;
    gap: 6px;
    transition: all 0.2s ease;
}
.compact-pill-sort:hover { border-color: var(--nxp-primary); }
.compact-pill-sort i {
    font-size: 13px;
    color: var(--nxp-text-3);
    display: inline-flex;
    align-items: center;
}
.pill-sort-select {
    background: transparent !important;
    border: none !important;
    color: var(--nxp-text-2) !important;
    font-size: 0.82rem !important;
    font-weight: 600;
    padding: 0 4px 0 0 !important;
    margin: 0;
    cursor: pointer;
    outline: none;
    box-shadow: none !important;
    min-width: 0;
}
.pill-sort-select option {
    background: var(--nxp-surface);
    color: var(--nxp-text);
}
.nxp-utility-bar .bl-layout-switcher {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

/* Browse-page container tweaks. Scoped to the archive body class so the
   global .nxp-container gutter keeps governing every other page, while
   this page gets tighter top/bottom and a 12px side gutter on mobile. */
.post-type-archive-novel .nxp-container,
.tax-genre .nxp-container,
.tax-novel_tag .nxp-container,
.tax-content_type .nxp-container,
.tax-novel_status .nxp-container {
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
    z-index: 2;
}
@media (max-width: 600px) {
    .post-type-archive-novel .nxp-container,
    .tax-genre .nxp-container,
    .tax-novel_tag .nxp-container,
    .tax-content_type .nxp-container,
    .tax-novel_status .nxp-container {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
}

/* ── Archive header ── */
.bl-header-bg {
    position: relative;
    background: var(--nxp-card-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid var(--nxp-border);
}
.bl-backdrop {
    position: absolute; top: 0; left: 0; width: 100%; height: 250px;
    background-size: cover; background-position: center;
    filter: blur(20px) brightness(0.5);
    opacity: 0.6; z-index: 1;
    mask-image: linear-gradient(to bottom, black, transparent);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
}
.bl-no-img-bg {
    background: linear-gradient(135deg, var(--nxp-bg-3), var(--nxp-bg-4));
}
.bl-archive-content {
    position: relative; z-index: 2;
    padding: 24px;
    display: flex; flex-direction: column; justify-content: center;
}
.bl-main-title {
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-weight: 900;
    color: var(--nxp-text);
    margin: 5px 0 0;
    line-height: 1.1;
    letter-spacing: -0.03em;
}
.bl-sub-label {
    font-size: 0.72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: #fff; margin-bottom: 6px;
    display: inline-block;
    background: var(--nxp-primary);
    padding: 3px 10px; border-radius: var(--radius-sm);
    width: fit-content;
}
.bl-desc-box {
    font-size: 0.88rem;
    color: var(--nxp-text-2);
    line-height: 1.65;
    padding: 6px 0 0;
}
.bl-desc-box p { margin: 0 !important; }

@media (max-width: 600px) {
    .bl-header-bg { margin-bottom: 12px; }
    .bl-backdrop { mask-image: none; opacity: 0.12; }
    .bl-archive-content { padding: 14px; }
    .bl-main-title { font-size: 1.5rem; }
}

/* ── Novel grid (grid view) ── */
.books-grid {
    display: grid;
    gap: 14px;
    /* minmax(0, 1fr) forces columns to ignore content width and stay strictly equal */
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.books-grid .nxp-novel-card { display: none !important; }
.books-grid .bl-s-card { display: flex !important; }

.bl-s-card {
    background: var(--nxp-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--nxp-border);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
    display: flex;
    flex-direction: column;
    width: 100%; height: 100%;
    position: relative;
    text-decoration: none;
    color: inherit;
}
.bl-s-card:hover { border-color: var(--nxp-accent); }
.bl-s-cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    position: relative;
    background: var(--nxp-bg-3);
    flex-shrink: 0;
}
.bl-s-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform var(--dur-slow) var(--ease);
}
.bl-s-badge {
    position: absolute; top: 6px; right: 6px;
    background: rgba(0,0,0,0.55);
    color: var(--nxp-accent);
    font-size: 0.65rem; font-weight: 700;
    padding: 3px 7px; border-radius: var(--radius-sm);
    backdrop-filter: blur(4px); z-index: 2;
}
.bl-s-body {
    padding: 10px;
    background: var(--nxp-surface);
    flex-grow: 1;
    display: flex; flex-direction: column; justify-content: flex-start;
}
.bl-s-title {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--nxp-text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3rem;
    word-break: break-word; /* Prevents long titles from breaking the layout */
    overflow-wrap: anywhere;
}
.bl-s-genre {
    display: inline-block;
    background: var(--nxp-bg-3);
    color: var(--nxp-text-3);
    font-size: 0.68rem; font-weight: 600;
    padding: 2px 8px; border-radius: 20px;
    margin-bottom: 6px; line-height: 1;
    border: 1px solid var(--nxp-border);
    transition: background var(--dur-fast), color var(--dur-fast);
}
.bl-s-card:hover .bl-s-genre {
    background: var(--nxp-primary);
    color: #fff;
    border-color: var(--nxp-primary);
}

/* Site-wide "no cover" placeholder — see nxp_get_cover_placeholder_html() */
.nxp-cover-ph {
    width: 100%; height: 100%;
    background: var(--nxp-bg-3);
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    container-type: inline-size;
}
/* Icon scales with the box itself so a 30px thumb doesn't get the same
   icon as a 200px grid cover — clamped so it never gets illegibly tiny
   or comically large. */
.nxp-cover-ph i { font-size: clamp(12px, 28cqw, 36px); color: var(--nxp-text-3); opacity: .55; }

.bl-s-title-link { text-decoration: none; color: inherit; display: block; }
.bl-s-title-link:hover .bl-s-title { color: var(--nxp-accent); }

/* ── Filter panel ── */
.adv-search-box {
    background: var(--nxp-card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--nxp-border);
    padding: 18px 16px;
    margin-bottom: 10px;
    position: relative;
    z-index: 20;
}

/* Grid breakpoints */
@media (max-width: 1024px) {
    .books-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .books-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px !important; }
    .bl-s-title { font-size: 0.8rem; min-height: 2.1rem; }
}

.adv-header {
    display: flex; justify-content: space-between;
    align-items: center; cursor: pointer;
    padding: 4px 0;
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
}
.adv-title {
    font-family: var(--font-ui);
    font-weight: 700; font-size: 0.95rem;
    color: var(--nxp-text);
    margin: 0; display: flex; align-items: center; gap: 8px;
}
.adv-toggle {
    color: var(--nxp-primary);
    font-weight: 600; font-size: 0.82rem;
}
.adv-form {
    display: none;
    margin-top: 18px;
    border-top: 1px solid var(--nxp-border);
    padding-top: 18px;
}
.adv-form.open { display: block; }

.filter-group { margin-bottom: 18px; position: relative; }
.filter-label {
    display: block; font-weight: 700; margin-bottom: 8px;
    font-size: 0.72rem; color: var(--nxp-text-2);
    text-transform: uppercase; letter-spacing: 0.08em;
}

.genre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    max-height: 200px; overflow-y: auto;
    padding: 10px;
    background: var(--nxp-bg);
    border: 1px solid var(--nxp-border);
    border-radius: var(--radius);
}
.checkbox-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.875rem; color: var(--nxp-text-2); cursor: pointer;
}
.checkbox-label input { accent-color: var(--nxp-primary); width: 15px; height: 15px; }

.form-select, .form-input {
    padding: 10px 12px;
    background: var(--nxp-bg);
    border: 1px solid var(--nxp-border);
    border-radius: var(--radius);
    color: var(--nxp-text);
    font-family: var(--font-ui);
    width: 100%; outline: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    font-size: 0.9rem;
}
.form-select:focus, .form-input:focus {
    border-color: var(--nxp-primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}
.form-select option {
    background: var(--nxp-bg-2);
    color: var(--nxp-text);
}
.filter-row { display: flex; gap: 16px; flex-wrap: wrap; }
.filter-col { flex: 1; min-width: 180px; }

.btn-apply {
    background: linear-gradient(135deg, var(--nxp-primary), var(--nxp-primary-dark));
    color: #fff; border: none;
    padding: 11px 24px;
    border-radius: 50px;
    font-family: var(--font-ui);
    font-weight: 700; font-size: 0.9rem;
    cursor: pointer; margin-top: 18px; width: 100%;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    box-shadow: 0 4px 14px rgba(59,130,246,0.25);
}
.btn-apply:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59,130,246,0.4);
}

/* ── Active filter pills ── */
.bl-active-filters {
    margin-bottom: 20px;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.bl-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--nxp-surface);
    border: 1px solid var(--nxp-border);
    padding: 5px 12px; border-radius: 50px;
    font-size: 0.82rem; font-weight: 600;
    color: var(--nxp-text-2);
    transition: border-color var(--dur-fast), color var(--dur-fast);
    text-decoration: none;
}
.bl-pill:hover { border-color: var(--nxp-primary); color: var(--nxp-primary); }
.bl-pill-remove {
    display: flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; border-radius: 50%;
    background: var(--nxp-bg-3);
    color: var(--nxp-text-3);
    font-size: 13px; line-height: 1;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
    text-decoration: none;
}
.bl-pill-remove:hover { background: var(--nxp-danger); color: #fff; }
.bl-clear-all {
    font-size: 0.82rem; color: var(--nxp-text-3);
    text-decoration: underline; margin-left: 6px; cursor: pointer;
}
.bl-clear-all:hover { color: var(--nxp-primary); }

/* ── Tag pills (selected tags, shown above the input) ── */
.tag-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.tag-pills-container:empty { display: none; margin-bottom: 0; }
.tag-pill {
    display: inline-flex;
    align-items: center;
    color: var(--nxp-text-2);
    font-size: 13px;
    font-weight: 500;
    gap: 5px;
    background: transparent;
    border: 1px solid var(--nxp-border-light);
    border-radius: 20px;
    padding: 3px 10px;
    line-height: 1.2;
}
.tag-pill-x {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    opacity: 0.7;
}
.tag-pill-x:hover { opacity: 1; }

/* ── Tag autocomplete ── */
.tag-dropdown {
    position: absolute; top: 100%; left: 0; width: 100%;
    background: var(--nxp-surface);
    z-index: 100;
    border: 1px solid var(--nxp-border-light);
    border-top: none;
    max-height: 280px; overflow-y: auto;
    box-shadow: var(--shadow-lg);
    border-radius: 8px;
}
.tag-suggestion {
    padding: 10px 14px;
    border-bottom: 1px solid var(--nxp-border);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--nxp-text-2);
    transition: background var(--dur-fast), color var(--dur-fast);
}
.tag-suggestion:last-child { border-bottom: none; }
.tag-suggestion:hover { background: var(--nxp-bg-3); color: var(--nxp-primary); }

/* ── Empty state ── */
.bl-empty-state {
    text-align: center;
    padding: 60px 24px;
    background: var(--nxp-surface);
    border: 1px solid var(--nxp-border);
    border-radius: var(--radius-lg);
    color: var(--nxp-text-2);
}
.bl-empty-state h3 { margin: 0 0 8px; color: var(--nxp-text); }

/* ── Description expand/collapse ── */
.bl-desc-content {
    position: relative;
    transition: max-height var(--dur-slow) ease;
    line-height: 1.65;
    color: var(--nxp-text-2);
}
.bl-desc-content.collapsed {
    max-height: 36px;
    overflow: hidden;
}
.bl-desc-content.collapsed::after {
    content: "";
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 36px;
    background: linear-gradient(to bottom, transparent, var(--nxp-bg-2) 90%);
    pointer-events: none;
}
.bl-desc-toggle-btn {
    background: none; border: none; padding: 0;
    margin-top: 6px;
    font-family: var(--font-ui);
    color: var(--nxp-primary);
    font-weight: 600; cursor: pointer; font-size: 0.875rem;
    text-decoration: underline;
    transition: color var(--dur-fast);
}
.bl-desc-toggle-btn:hover {
    color: var(--nxp-primary-dark);
    text-decoration: none;
}

/* ── Layout Switcher Engine Controls ── */
.bl-layout-switcher {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    background: var(--nxp-surface);
    padding: 8px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--nxp-border);
}
.switcher-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--nxp-text-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.switcher-buttons {
    display: flex;
    background: var(--nxp-bg-5);
    border: 1px solid var(--nxp-border);
    border-radius: 5px;
    padding: 3px;
    gap: 0;
}
.layout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 5px 12px;
    color: var(--nxp-text-3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.layout-btn:hover { color: var(--nxp-text); }
.layout-btn.active {
    background: var(--nxp-surface);
    color: var(--nxp-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* Horizontal / List Layout (the .brw-grid columns rule higher in this
   file keeps winning via !important; this adds the browse gap + card
   visibility switching) */
.brw-grid { gap: 20px; }
.brw-grid .bl-s-card { display: none !important; }
.brw-grid .nxp-novel-card { display: flex !important; }

@media (max-width: 600px) {
    .books-grid { gap: 6px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   28 · LIBRARY PAGE
   Moved from templates/page-library.php inline styles. Rules that
   would collide with global components are scoped to the library
   wrappers (.nxp-lib-modern / .nxp-library__grid / .nxplib-…).
═══════════════════════════════════════════════════════════════ */

/* Hide genres in vertical Grid view; show them in List view */
.nxp-library__grid[data-view="grid"] .nxp-hcard-genres { display: none !important; }
.nxp-library__grid[data-view="list"] .nxp-hcard-genres {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.nxp-lib-modern {
    padding-top: 32px;
    padding-bottom: 60px;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* ── Top Header ── */
.nxp-lib-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 0px;
}
.nxp-lib-header__info { display: flex; flex-direction: column; gap: 4px; }
.nxp-lib-header__title { font-size: 2rem; font-weight: 900; color: var(--nxp-text); margin: 0; letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; }
.nxp-lib-header__sub { font-size: 0.95rem; color: var(--nxp-text-2); margin: 0; }

.nxp-lib-header__stats { display: flex; gap: 10px; }
.nxp-lib-stat-pill { background: var(--nxp-surface); border: 1px solid var(--nxp-border); padding: 12px 16px; border-radius: 4px; font-size: 0.85rem; color: var(--nxp-text-2); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.nxp-lib-stat-pill strong { color: var(--nxp-text); font-weight: 800; font-size: 0.9rem; margin-right: 4px; }

/* ── Horizontal App Tabs ── */
.nxp-lib-nav-wrapper {
    position: sticky;
    top: 64px; /* Adjust based on your main site header height */
    background: var(--nxp-bg);
    z-index: 40;
    padding: 12px 0;
    margin: 0 -16px; /* Edge-to-edge bleed on mobile */
    border-bottom: 1px solid var(--nxp-border);
}
.nxp-lib-nav-scroll {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 16px;
}
.nxp-lib-nav-scroll::-webkit-scrollbar { display: none; }

.nxp-lib-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 16px; font-size: 0.9rem; font-weight: 600;
    color: var(--nxp-text-2); background: var(--nxp-surface);
    border: 1px solid var(--nxp-border); border-radius: 99px;
    text-decoration: none; white-space: nowrap;
    transition: all 0.2s; cursor: pointer; flex-shrink: 0;
}
.nxp-lib-pill i { font-size: 1.1em; opacity: 0.8; }
.nxp-lib-pill:hover { border-color: var(--nxp-text-3); color: var(--nxp-text); }
.nxp-lib-pill.active { background: color-mix(in srgb, var(--nxp-primary) 12%, transparent); border-color: var(--nxp-primary); color: var(--nxp-primary); }
.nxp-lib-pill.active i { opacity: 1; }

.nxp-lib-pill__count { background: var(--nxp-bg-3); color: var(--nxp-text-2); font-size: 0.7rem; font-weight: 800; padding: 2px 8px; border-radius: 12px; border: 1px solid var(--nxp-border); }
.nxp-lib-pill.active .nxp-lib-pill__count { background: var(--nxp-primary); color: #fff; border-color: transparent; }

.nxp-lib-pill-divider { width: 1px; height: 24px; background: var(--nxp-border); flex-shrink: 0; margin: 0 4px; }
.nxp-lib-pill--action { border-style: dashed; background: transparent; }
.nxp-lib-pill--action:hover { background: color-mix(in srgb, var(--nxp-primary) 10%, transparent); border-color: var(--nxp-primary); border-style: solid; color: var(--nxp-primary); }

/* ── Active List Toolbar (Minimal) ── */
.nxp-lib-toolbar-minimal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0 12px;
    padding: 0 4px;
}
.nxp-lib-toolbar-minimal__left { font-size: 0.85rem; color: var(--nxp-text-3); }
.nxp-lib-toolbar-minimal__right { display: flex; align-items: center; gap: 12px; }
.nxp-lib-toolbar__actions { display: flex; gap: 8px; }

/* ── View Toggle ── */
.nxp-library__view-toggle { display: flex; border: 1px solid var(--nxp-border); border-radius: 8px; overflow: hidden; }
.nxp-view-btn { background: var(--nxp-surface); border: none; padding: 8px 14px; cursor: pointer; color: var(--nxp-text-3); font-size: 0.9rem; transition: all 0.15s; display: flex; align-items: center; justify-content: center; }
.nxp-view-btn:hover { background: var(--nxp-bg-3); color: var(--nxp-text); }
.nxp-view-btn.active { background: var(--nxp-primary); color: #fff; }

/* ── App Buttons ── */
.nxp-btn-app { display: inline-flex; align-items: center; justify-content: center; gap: 2px; padding: 6px 16px; font-size: 0.75rem; font-weight: 700; border-radius: 4px; cursor: pointer; text-decoration: none; transition: all 0.2s; border: 1px solid transparent; line-height: 1; white-space: nowrap; }
.nxp-btn-app--primary { background: var(--nxp-primary); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, #000000 20%, transparent); }
.nxp-btn-app--primary:hover { filter: brightness(1.1); color: #fff; }
.nxp-btn-app--ghost {
  background: var(--nxp-card-bg);
  border-color: rgba(199, 199, 199, 0.5);
  color: var(--nxp-text);
}
.nxp-btn-app--ghost:hover { background: var(--nxp-bg-2); border-color: var(--nxp-text-3); }
.nxp-btn-app--danger { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); color: var(--nxp-danger); }
.nxp-btn-app--danger:hover { background: rgba(239,68,68,0.18); color: #ef4444; }
.nxp-btn-app--sm { padding: 8px 14px; font-size: 0.8rem; }
.nxp-btn-app--icon { padding: 8px 10px; flex: none; }

/* ── Grid/List Display Logic ── */
.nxp-library__grid { gap: 16px; }
.nxp-library__grid .nxp-rank-row { min-width: 0; width: 100%; }
.nxp-library__grid .nxp-rank-row .bl-s-card { min-width: 0; max-width: 100%; }

/* Action row inside horizontal cards */
.nxp-lib-card__app-actions { display: flex; align-items: center; gap: 12px; padding-top: 8px; margin-top: 10px; border-top: 1px solid var(--nxp-border); }
.nxp-lib-card__app-actions .nxp-btn-app { flex: 0; }

/* ── List View (Default Horizontal Cards) ── */
.nxp-library__grid[data-view="list"] { grid-template-columns: 1fr; }
.nxp-library__grid[data-view="list"] .bl-s-card-wrapper { display: none; }
.nxp-library__grid[data-view="list"] .nxp-novel-card { display: flex; }

/* ── Grid View (Vertical Cards) ── */
.nxp-library__grid[data-view="grid"] { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.nxp-library__grid[data-view="grid"] .nxp-novel-card { display: none !important; }
.nxp-library__grid[data-view="grid"] .bl-s-card-wrapper { display: flex; flex-direction: column; width: 100%; min-width: 0; }

/* Library cards reuse the browse .bl-s-* set above; this is the
   library-only hover lift */
.nxp-library__grid .bl-s-card:hover { transform: translateY(-3px); border-color: var(--nxp-primary); color: inherit; }

/* Grid Action Buttons (Mini) */
.bl-s-actions { display: flex; gap: 6px; margin-top: 4px; width: 100%; }
.bl-s-actions .nxp-btn-app { flex: 1; padding: 6px 12px; font-size: 0.75rem; border-radius: 3px; }

/* ── Empty States ── */
.nxp-empty-app-state { background: var(--nxp-surface); border: 1px dashed var(--nxp-border); border-radius: 12px; padding: 60px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; grid-column: 1 / -1; }
.nxp-empty-app-state__icon { font-size: 3rem; color: var(--nxp-text-4); margin-bottom: 16px; }
.nxp-empty-app-state__title { font-size: 1.25rem; font-weight: 800; color: var(--nxp-text); margin-bottom: 8px; }
.nxp-empty-app-state__desc { font-size: 0.95rem; color: var(--nxp-text-2); max-width: 340px; line-height: 1.5; }

/* ── Library Modals (scoped so the global .nxp-modal__* / .nxp-input
      components elsewhere keep their own look) ── */
.nxplib-isolated-window .nxp-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px 16px; border-bottom: 1px solid var(--nxp-border); }
.nxplib-isolated-window .nxp-modal__title { font-size: 1.1rem; font-weight: 800; margin: 0; }
.nxplib-isolated-window .nxp-modal__body { padding: 24px; }
.nxplib-isolated-window .nxp-modal__footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--nxp-border); background: var(--nxp-bg-2); border-radius: 0 0 14px 14px; }
.nxplib-isolated-window .nxp-form-label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; color: var(--nxp-text-2); text-transform: uppercase; letter-spacing: 0.05em; }
.nxplib-isolated-window .nxp-input { width: 100%; padding: 12px 16px; border: 1px solid var(--nxp-border); border-radius: 8px; background: var(--nxp-bg-1); color: var(--nxp-text); font-size: 0.95rem; box-sizing: border-box; outline: none; transition: border-color 0.2s; font-family: inherit; }
.nxplib-isolated-window .nxp-input:focus { border-color: var(--nxp-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nxp-primary) 15%, transparent); }

/* ── Custom List Icon Picker ── */
.nxp-icon-picker { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
.nxp-icon-opt { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 1px solid var(--nxp-border); background: var(--nxp-bg-1); color: var(--nxp-text-2); border-radius: 8px; cursor: pointer; font-size: 0.95rem; transition: all 0.15s; padding: 0; }
.nxp-icon-opt:hover { border-color: var(--nxp-text-3); color: var(--nxp-text); transform: translateY(-1px); }
.nxp-icon-opt.active { border-color: var(--nxp-primary); color: var(--nxp-primary); background: color-mix(in srgb, var(--nxp-primary) 12%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nxp-primary) 25%, transparent); }
@media (max-width: 480px) { .nxp-icon-picker { grid-template-columns: repeat(5, 1fr); } }

.nxp-manage-list-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--nxp-border); }
.nxp-manage-list-item:last-child { border-bottom: none; }
.nxp-manage-list-item label { flex: 1; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 0.95rem; font-weight: 500; color: var(--nxp-text); }
.nxp-manage-list-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--nxp-primary); cursor: pointer; }
.nxp-manage-saving { font-size: 0.8rem; color: var(--nxp-text-3); margin-left: auto; font-weight: 600; }

.nxplib-isolated-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 99999 !important; padding: 16px; animation: nxpFadeIn 0.15s ease; }
.nxplib-isolated-overlay[hidden] { display: none !important; }
.nxplib-isolated-window { background: var(--nxp-surface); border: 1px solid var(--nxp-border); border-radius: 16px; width: 100%; max-height: 90vh; overflow-y: auto; animation: nxpSlideUp 0.2s ease; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.nxplib-isolated-close { background: var(--nxp-bg-3); border: none; cursor: pointer; color: var(--nxp-text); font-size: 1.1rem; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.nxplib-isolated-close:hover { background: var(--nxp-border); }

/* ── Library Responsive ── */
@media (min-width: 768px) {
    .nxp-library__grid[data-view="list"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
    .nxp-library__grid[data-view="grid"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .nxp-lib-modern { padding-top: 16px; }
    .nxp-lib-header { flex-direction: column; align-items: flex-start; gap: 16px; }
    .nxp-lib-header__title { font-size: 1.6rem; }
    .nxp-lib-header__stats { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .nxp-lib-stat-pill { text-align: center; justify-content: center; }
    .nxp-library__grid[data-view="grid"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
@media (max-width: 480px) {
    .bl-s-actions .nxp-btn-app { flex: 0; }
    .mng-mobile-hide { display: none; }
    .nxp-lib-toolbar__actions { width: 100%; }
    .nxp-lib-toolbar__actions .nxp-btn-app { flex: 1; }
    .nxp-lib-card__app-actions { align-items: stretch; }
}

/* Library horizontal cards get tighter padding (scoped: h-cards on
   other pages keep the shared component padding) */
.nxp-lib-modern .nxp-novel-card { padding: 16px 16px 10px 16px !important; }

/* ── Recent Reads (uses the shared .nxp-ud-history-item cards) ── */
.nxp-lib-recent-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.nxp-recent-item.is-hidden { display: none; }
.nxp-recent-loadmore-wrap { display: flex; justify-content: center; margin-top: 20px; }
.nxp-recent-loadmore-wrap .nxp-btn-app { padding: 10px 24px; font-size: 0.85rem; }
.nxp-recent-remaining { opacity: 0.7; font-weight: 600; }
@media (max-width: 640px) {
    .nxp-lib-recent-list { grid-template-columns: 1fr; gap: 10px; }
    .nxp-ud-history-item { gap: 12px; padding: 10px; border-radius: 10px; }
    .nxp-ud-history-item__cover { width: 44px; height: 62px; border-radius: 5px; }
    .nxp-ud-history-item__ph { font-size: 1rem; }
    .nxp-ud-history-item__title { font-size: 0.85rem; -webkit-line-clamp: 1; }
    .nxp-ud-history-item__meta { font-size: 0.72rem; gap: 4px; flex-wrap: nowrap; }
    .nxp-ud-history-item__progress { height: 4px; margin-top: 6px; }
    .nxp-ud-history-item__action { width: 26px; height: 26px; font-size: 0.75rem; }
    .nxp-recent-loadmore-wrap .nxp-btn-app { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   29 · RANKING PAGE
   Moved from templates/page-ranking.php inline styles. Markup for
   the pill/author classes is emitted only by inc/ranking.php.
═══════════════════════════════════════════════════════════════ */

/* ── Combined Ranking & Popularity Pills — V1: Connected Split ── */
.nxp-pill-v1 {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    border-radius: var(--radius-lg, 6px);
    overflow: hidden;
    border: 1px solid var(--nxp-border, #334155);
    font-size: 11px;
    line-height: 1.2;
    margin-top: auto;
    max-width: 100%;
}
.nxp-pill-v1 .pill-rank {
    padding: 4px 8px;
    font-weight: 900;
    font-family: var(--font-mono), monospace;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
}
.nxp-pill-v1 .pill-rank i { font-size: 10px; }
.nxp-pill-v1 .pill-metric {
    background-color: var(--nxp-bg-5, #000000);
    color: var(--nxp-text-2, #cbd5e1);
    padding: 4px 4px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    border-left: 1px solid var(--nxp-border, rgba(51, 65, 85, 0.6));
    white-space: nowrap;
}

/* V1 Rank-Specific Theme Gradients */
.nxp-pill-v1.nxp-rank-gold { border-color: rgba(245, 158, 11, 0.3); }
.nxp-pill-v1.nxp-rank-gold .pill-rank { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #000000; }
.nxp-pill-v1.nxp-rank-silver { border-color: rgba(203, 213, 225, 0.3); }
.nxp-pill-v1.nxp-rank-silver .pill-rank { background: linear-gradient(135deg, #e2e8f0, #cbd5e1); color: #000000; }
.nxp-pill-v1.nxp-rank-bronze { border-color: rgba(180, 83, 9, 0.3); }
.nxp-pill-v1.nxp-rank-bronze .pill-rank { background: linear-gradient(135deg, #d97706, #b45309); color: #ffffff; }
.nxp-pill-v1.nxp-rank-normal { border-color: var(--nxp-border, #1e293b); }
.nxp-pill-v1.nxp-rank-normal .pill-rank { background: var(--nxp-border-rw, #1e293b); color: var(--nxp-text-2, #cbd5e1); }

/* ── V3: Slanted Slits Badge ── */
.nxp-pill-v3 {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    border-radius: var(--radius, 4px);
    overflow: hidden;
    border: 1px solid var(--nxp-border, #334155);
    font-size: 11px;
    line-height: 1.2;
    margin: 6px 0;
    font-weight: 600;
}
.nxp-pill-v3 .pill-rank {
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
}
.nxp-pill-v3 .pill-rank i { font-size: 10px; }
.nxp-pill-v3 .pill-metric {
    background-color: var(--nxp-bg-5, #000000);
    color: var(--nxp-text-2, #cbd5e1);
    padding: 3px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* V3 Rank-Specific Themes */
.nxp-pill-v3.nxp-rank-gold .pill-rank { background: linear-gradient(to right, #fbbf24, #f59e0b); color: #000000; font-weight: 900; }
.nxp-pill-v3.nxp-rank-silver .pill-rank { background: linear-gradient(to right, #e2e8f0, #cbd5e1); color: #000000; font-weight: 800; }
.nxp-pill-v3.nxp-rank-bronze .pill-rank { background: linear-gradient(to right, #d97706, #b45309); color: #ffffff; font-weight: 800; }
.nxp-pill-v3.nxp-rank-normal .pill-rank { background: linear-gradient(to right, #1e293b, #334155); color: var(--nxp-text-3, #94a3b8); }

/* Ranking h-card tweaks — scoped to the results container so h-cards
   on other pages keep the shared component spacing */
#nxp-rank-results .nxp-meta-strip { margin: 6px 0 !important; }

.nxp-genre-row-rank { align-items: center; }
.nxp-author-name {
    color: var(--nxp-text);
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid var(--nxp-accent);
}
.author-pill { display: flex; align-items: center; gap: 5px; }
.nxp-dot-separator { color: var(--nxp-text-3, #64748b); font-size: 12px; line-height: 1; }

/* ── AJAX loading state (JS toggles .nxp-rank-loading) ── */
#nxp-rank-results { transition: opacity 0.15s ease; }
#nxp-rank-results.nxp-rank-loading { opacity: 0.45; pointer-events: none; }