.nxp-novel-badge{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;font-size:10px;font-weight:700;line-height:1.2;white-space:nowrap;vertical-align:middle;transition:opacity .15s,transform .15s;text-decoration:none;cursor:default}.nxp-badge-icon{display:inline-flex;align-items:center;font-style:normal;line-height:1}.nxp-badge-icon--svg svg{width:1em;height:1em;vertical-align:middle}.nxp-badge-label{display:inline}.nxp-badge-strip{display:flex;flex-wrap:wrap;gap:4px;line-height:1}.nxp-badge-strip--cover{position:absolute;top:6px;left:6px;z-index:10;flex-direction:column;align-items:flex-start;pointer-events:none}.nxp-badge-strip--inline{position:relative;margin-bottom:2px}.cms-badge-strip{display:flex;flex-wrap:wrap;gap:4px;line-height:1}.cms-badge-strip--cover{position:absolute;top:6px;left:6px;z-index:10;flex-direction:column;align-items:flex-start;pointer-events:none}.cms-novel-badge{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;font-size:10px;font-weight:700;line-height:1.2;white-space:nowrap}:root{--nxp-primary:#007bff;--nxp-primary-dark:#0070e7;--nxp-accent:#F59E0B;--nxp-accent-dark:#D97706;--nxp-danger:#EF4444;--nxp-success:#10B981;--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;--nxp-patreon:#ffffff;--nxp-patreon-ink:#000000;--nxp-patreon-rgb:255,255,255;--nxp-patreon-mark:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path transform='matrix(.47407 0 0 .47407 .383 .422)' d='M1033.05 324.45c-.19-137.9-107.59-250.92-233.6-291.7-156.48-50.64-362.86-43.3-512.28 27.2-181.1 85.46-237.99 272.66-240.11 459.36-1.74 153.5 13.58 557.79 241.62 560.67 169.44 2.15 194.67-216.18 273.07-321.33 55.78-74.81 127.6-95.94 216.01-117.82 151.95-37.61 255.51-157.53 255.29-316.38z'/></svg>");

  /* Typography */
  --font-display:   'Open Sans', 'Palatino Linotype', serif;
  --font-heading:   'Inter', 'Helvetica Neue', sans-serif;
  --font-body:      'Inter', Georgia, serif;
  --font-ui:        'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:      'Space Mono', ui-monospace, 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;
  --nxp-patreon:      #000000;
  --nxp-patreon-ink:  #ffffff;
  --nxp-patreon-rgb:  0,0,0;
}

/* 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;
  --nxp-patreon:      #000000;
  --nxp-patreon-ink:  #fdf6e3;
  --nxp-patreon-rgb:  0,0,0;
}

/* 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;
  --nxp-patreon:      #000000;
  --nxp-patreon-ink:  #f3faf3;
  --nxp-patreon-rgb:  0,0,0;
}

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

/* Patreon logo — Font Awesome's fa-patreon is still the pre-2023 mark
   (the circle-and-bar "P"), and there is no updated glyph to switch to.
   Blank the glyph and mask the current logo over the element instead, so
   every `<i class="fab fa-patreon">` in the theme renders the new mark
   without touching its ~40 call sites. Inherits colour via currentColor,
   so existing `color:` rules keep working. */
.fa-patreon::before { content: "" !important; }
.fa-patreon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--nxp-patreon-mark) no-repeat center / contain;
          mask: var(--nxp-patreon-mark) no-repeat center / contain;
}

/* ═══════════════════════════════════════════════════════════════
   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);
  /* Plus Jakarta Sans sets noticeably wider than the DM Sans it replaced, so
     copy that fitted its container before — novel-page blurbs, card subtext,
     tab labels — started running long and looser. A touch of negative
     tracking brings the measure back without changing the face. Headings are
     unaffected: h1–h6 set their own -0.02em and out-specify this. */
  letter-spacing: -0.005em;
  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;
  padding-top: 20px;
  padding-bottom: 20px;
}
.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 color-mix(in srgb, var(--nxp-primary) 30%, transparent);
}
.nxp-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--nxp-primary) 45%, transparent);
  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 color-mix(in srgb, var(--nxp-primary) 18%, transparent);
}
.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: color-mix(in srgb, var(--nxp-primary) 10%, transparent); 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
═══════════════════════════════════════════════════════════════ */

/* ==========================================================================
   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; }
}
.nxp-container-novel {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter-x);
  box-sizing: border-box;
}
/* ==========================================================================
   02. HERO SECTION
   ========================================================================== */
.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%;
}
.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) {
    .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;
    /* Brand gradient, matching the comment submit button and the reader's
       primary actions. The glow was a hardcoded #007bff5c — a literal blue
       that stayed blue on a crimson site, and the single most visible place
       the old palette leaked through. It is now derived from the brand
       colour via color-mix, so it follows whatever --nxp-primary is. */
    background: linear-gradient(135deg, var(--nxp-primary), var(--nxp-primary-dark));
    color: #fff;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s, filter 0.15s;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--nxp-primary) 36%, transparent);
    max-width: 220px;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.nxp-hero-read-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--nxp-primary) 30%, transparent);
}
.nxp-hero-read-btn:focus-visible {
    outline: 2px solid var(--nxp-primary);
    outline-offset: 2px;
}
.nxp-hero-read-btn--disabled {
    cursor: not-allowed;
    /* Flat, not the gradient: "disabled" should read as inert. */
    background: var(--nxp-primary);
    color: #fff;
    box-shadow: none;
}
/* 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 12px;
    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);
}
@media (min-width:480px) {
    .nxp-genre-row {
margin-top: 10px;
}
}
.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 ── */
.novel-synopsis-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.novel-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);
}
.novel-synopsis-text.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    max-height: none;
}
.novel-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;
}
.novel-synopsis-text.is-expanded + .novel-synopsis-fade {
    opacity: 0;
}
.novel-synopsis-text p { 
    margin-top: 0 !important;
    margin-bottom: 12px !important; 
    line-height: 1.65 !important;
}
.novel-synopsis-text p:last-child {
    margin-bottom: 0 !important;
}
.novel-synopsis-text strong, 
.novel-synopsis-text b {
    font-weight: 700 !important;
    color: var(--nxp-text,) !important;
}
.novel-synopsis-text em, 
.novel-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.95rem;
    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: 10px 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;
    flex: 1;
    min-width: 0;
}
.nxp-chapter-item__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--nxp-text);
    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-text-3);
    user-select: none;
    display: inline-block;
    font-size: 20px;
    line-height: .001;
}
.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;
    }

    .nxp-chapter-item__submeta {
        gap: 3px;                 
        font-size: 0.6rem;        
    }
    .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) {
    .nxp-hero-actions { gap: 6px; }
    .nxp-hero-read-btn {
        flex: 1 1 44%;
        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) {
    .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;
  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;
  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;
  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); }

/* Count pill on a tab (Early Access) */
.nxp-tab-count {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 99px; font-size: 0.72rem; font-weight: 800;
  background: rgba(var(--nxp-patreon-rgb), 0.14); color: var(--nxp-patreon);
  vertical-align: middle;
}
.nxp-tab-btn--ea.active { color: var(--nxp-patreon); border-bottom-color: var(--nxp-patreon); }

/* ── Early Access tab ──────────────────────────────────────────────────────
   Patreon coral throughout, so the perk reads as the author's rather than as
   another site currency. Metadata only — no chapter body is ever rendered
   here; access is decided per request by nxp_ea_reader_can_access(). */
.nxp-ea-intro {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px; margin: var(--space-4) 0 18px;
  border: 1px solid rgba(var(--nxp-patreon-rgb), 0.28); border-radius: 14px;
  background: rgba(var(--nxp-patreon-rgb), 0.06);
}
.nxp-ea-intro__icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--nxp-patreon); color: var(--nxp-patreon-ink); font-size: 1rem;
}
.nxp-ea-intro__text { flex: 1; min-width: 0; }
.nxp-ea-intro__text strong { display: block; font-size: 0.98rem; font-weight: 800; }
.nxp-ea-intro__text span { font-size: 0.82rem; color: var(--nxp-text-2); line-height: 1.5; }
.nxp-ea-intro__cta {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 9px 16px; border-radius: 99px; text-decoration: none;
  background: var(--nxp-patreon); color: var(--nxp-patreon-ink); font-weight: 700; font-size: 0.82rem;
  transition: filter var(--dur-fast), transform var(--dur-fast);
}
.nxp-ea-intro__cta:hover { opacity: 0.85; transform: translateY(-1px); color: var(--nxp-patreon-ink); }

.nxp-ea-list { display: flex; flex-direction: column; gap: 8px; }
.nxp-ea-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 12px; text-decoration: none;
  background: var(--nxp-bg-2, rgba(255,255,255,0.02));
  border: 1px solid var(--nxp-border, rgba(255,255,255,0.08));
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.nxp-ea-row:hover { border-color: rgba(var(--nxp-patreon-rgb), 0.5); transform: translateY(-1px); }
.nxp-ea-row__pos {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800;
  background: rgba(var(--nxp-patreon-rgb), 0.12); color: var(--nxp-patreon);
}
/* Unlocked rows reuse the coin "unlocked" green (--nxp-success) rather than a
   green of their own, so a Patreon unlock and a coin unlock read identically. */
.nxp-ea-row.is-open .nxp-ea-row__pos { background: rgba(16,185,129,0.14); color: var(--nxp-success); }
.nxp-ea-row__main  { flex: 1; min-width: 0; }
.nxp-ea-row__title {
  display: block; font-weight: 700; font-size: 0.92rem; color: var(--nxp-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nxp-ea-row__meta {
  display: block; margin-top: 2px; font-size: 0.75rem; color: var(--nxp-text-3);
}
.nxp-ea-row__meta i { font-size: 0.68rem; margin-right: 3px; }
.nxp-ea-row.is-open .nxp-ea-row__meta i { color: var(--nxp-success); }
.nxp-ea-row__go { flex-shrink: 0; color: var(--nxp-text-3); font-size: 0.78rem; }
.nxp-ea-row:hover .nxp-ea-row__go { color: var(--nxp-patreon); }

.nxp-ea-foot {
  margin: 18px 0 0; padding-top: 14px; font-size: 0.8rem; line-height: 1.6;
  color: var(--nxp-text-3); border-top: 1px solid var(--nxp-border, rgba(255,255,255,0.08));
}

@media (max-width: 600px) {
  .nxp-ea-intro { padding: 14px; }
  .nxp-ea-intro__cta { width: 100%; justify-content: center; }
  .nxp-ea-row { padding: 11px 13px; gap: 11px; }
}

/* ── Free chapters banner (Wait To Unlock) ─────────────────────────────────
   Sits under the hero action buttons. A quiet secondary strip, not a call to
   action: the reader has already been given Continue and Library above, and
   this only tells them what the novel is offering.

   Layout: a fixed icon badge on the left spanning both content lines, then a
   body column — title + count on the top row, a segmented progress bar beneath.
   One segment per free chapter, so the bar is countable at a glance.

   Colour comes from --nxp-primary and the neutral tokens rather than literal
   slate/blue, because the site's DEFAULT theme is dark and there are four more
   (light, sepia, soft, and the reader themes). Hardcoding the light palette
   would leave the banner glowing white on a #202020 page.

   The countdown reuses the lock box's class contract (.nxp-lb-countdown /
   .nxp-lb-cd-unit / .nxp-lb-cd-sep) so one ticker in main.js drives both
   surfaces. Those rules cannot simply be shared: reader.css is enqueued only on
   chapter pages, so the few lines the banner needs are restated here. */
.nxp-wtu-banner {
  display: flex; align-items: center; gap: 8px;
  background: var(--nxp-bg-2); border: 1px solid var(--nxp-border);
  border-radius: 6px; padding: 6px 8px;
  margin: 12px 0 20px;
  transition: border-color var(--dur-fast, .18s), box-shadow var(--dur-fast, .18s);
}
.nxp-wtu-banner:hover { border-color: var(--nxp-border-light); }

/* Fixed square so the two text lines always sit against the same anchor,
   whatever the title wraps to. */
.nxp-wtu-banner__left-icon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 8px; font-size: 0.875rem;
  background: color-mix(in srgb, var(--nxp-primary) 12%, transparent); color: var(--nxp-primary);
}
.nxp-wtu-banner.is-charging .nxp-wtu-banner__left-icon {
  background: var(--nxp-bg-3); color: var(--nxp-text-3);
}

.nxp-wtu-banner__body {
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; margin-bottom: 4px;
}
.nxp-wtu-banner__main {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}

/* flex:1 makes the title the element that GIVES WAY on a narrow screen, and
   min-width:0 is what lets the ellipsis actually engage inside a flex row —
   without it the title refuses to shrink below its content and shoves the
   status out of the row. */
.nxp-wtu-banner__text { flex: 1 1 auto; min-width: 0; }
.nxp-wtu-banner__text strong {
  display: block; font-size: 0.8125rem; font-weight: 600; color: var(--nxp-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
}

/* Never shrinks and never wraps: the count is the one thing that must stay
   readable and pinned right, whatever the title does. */
.nxp-wtu-banner__status {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0; line-height: 1;
  white-space: nowrap; margin-left: auto;
}
.nxp-wtu-banner__count { font-size: 0.8125rem; font-weight: 700; color: var(--nxp-text); }
.nxp-wtu-banner__count span { font-size: 0.75rem; font-weight: 500; color: var(--nxp-text-3); }
.nxp-wtu-banner__lbl { font-size: 0.7rem; font-weight: 500; color: var(--nxp-text-3); }
.nxp-wtu-banner__lbl::before { content: '\00b7'; margin-right: 2px; }

/* The shared ticker writes h / m / s into three units. The banner wants only
   "22h 59m", so the seconds unit and both separators are hidden rather than the
   ticker being taught a second output format. */
.nxp-wtu-banner .nxp-lb-countdown {
  display: inline-flex; align-items: baseline; gap: 3px;
  font-variant-numeric: tabular-nums;
}
.nxp-wtu-banner .nxp-lb-cd-sep,
.nxp-wtu-banner .nxp-lb-cd-unit:last-child { display: none; }
.nxp-wtu-banner .nxp-lb-cd-unit i { font-style: normal; }

/* Segmented bar. Slots are equal-width by default; the >10 fallback overrides
   flex inline to become one proportional fill. */
.nxp-wtu-banner__bar {
  width: 100%; display: flex; gap: 4px; margin-top: 1px;
  position: relative; border-radius: 999px; overflow: hidden;
}
.nxp-wtu-banner__segment {
  height: 4px; flex: 1; border-radius: 999px;
  background-color: var(--nxp-bg-3);
  transition: background-color var(--dur-fast, .18s) ease;
}
.nxp-wtu-banner__segment--filled { background: var(--nxp-primary); }
.nxp-wtu-banner__bar--solid { background: var(--nxp-bg-3); }

/* Charging: one sweep across the WHOLE bar, not per segment — the refill is a
   single event that returns every chapter at once, and n independent shimmers
   would imply they come back one at a time. */
.nxp-wtu-banner.is-charging .nxp-wtu-banner__bar::after {
  content: ''; position: absolute; inset: 0 auto 0 -100%; width: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--nxp-primary) 75%, transparent), transparent);
  animation: nxp-wtu-charging 1.6s infinite ease-in-out;
  pointer-events: none;
}
@keyframes nxp-wtu-charging { 0% { left: -100%; } 100% { left: 100%; } }

/* Respect a reader who has asked the OS for less motion: the shimmer is
   decorative, and the countdown already carries the information. */
@media (prefers-reduced-motion: reduce) {
  .nxp-wtu-banner.is-charging .nxp-wtu-banner__bar::after { animation: none; opacity: 0; }
}

/* Deliberately NO mobile wrap rule. Letting .__main wrap puts the status on its
   own line, where justify-content:space-between leaves it stranded on the LEFT.
   The title ellipsis is what absorbs a narrow screen instead — which is how the
   row is designed to behave, and it was authored at mobile width to begin with. */

/* Desktop: match the action buttons above, never outrun them.
   .nxp-hero-actions is width:100%, but its two children are individually capped
   from 769px up, so the buttons occupy a fixed 450px inside a wider hero column
   and the banner would otherwise overhang them. The sum is spelled out rather
   than hardcoded as 450px so it stays traceable:
       220px  .nxp-hero-read-btn        max-width
        10px  .nxp-hero-actions         gap
       220px  .bl-status-wrapper        max-width (@media min-width:769px)
   Change any of those three and this must follow. Below 769px both caps are
   lifted and the buttons go full width, so the banner does too — which is why
   this is scoped to the same breakpoint rather than applied unconditionally. */
@media (min-width: 769px) {
  .nxp-wtu-banner { max-width: calc(220px + 10px + 220px); }
}

/* 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); }

/*  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 — Patreon brand colour (see --nxp-patreon) */
.nxp-chapter-badge--patreon {
  background: rgba(var(--nxp-patreon-rgb), 0.1);
  color: var(--nxp-patreon);
  border: 1px solid rgba(var(--nxp-patreon-rgb), 0.25);
  font-size: 0.66rem;
}
.nxp-chapter-badge--patreon .fab {
  font-size: 0.7rem;
}

/* ✅ Patreon Unlocked badge — deliberately identical to .nxp-chapter-badge--unlocked
   (the coin one) so an unlock reads the same whichever way it was earned. Only the
   glyph inside differs. Keep these two rules in sync. */
.nxp-chapter-badge--patreon-unlocked {
  background: rgba(16,185,129,0.1);
  color: var(--nxp-success);
  border: 1px solid rgba(16,185,129,0.22);
  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: var(--nxp-patreon);
  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: var(--nxp-success);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   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 0; }
  .nxp-chapter-item__title { font-size: 0.95rem; }

  /* ── 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) {

  /* 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;
  } */
}

/* ── 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, color-mix(in srgb, var(--nxp-primary) 4%, transparent) 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: color-mix(in srgb, var(--nxp-primary) 6%, transparent);
}

/* ── 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
.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, 34cqw, 56px); 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.85rem; color: var(--nxp-text-2);
}

.genre-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    max-height: 280px; 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; }

/* ── Tri-state genre checkboxes (empty / green check / red minus) ── */
.genre-chip {
    display: flex; align-items: center; gap: 6px;
    width: 100%; text-align: left;
    padding: 0; background: none; border: none;
    color: var(--nxp-text-2);
    font-family: var(--font-ui);
    font-size: 0.875rem; font-weight: 400;
    line-height: 1.3;
    cursor: pointer;
    transition: color var(--dur-fast);
}
.genre-chip-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.genre-chip-box {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px;
    border: 1.5px solid var(--nxp-border-light);
    border-radius: 3px;
    background: var(--nxp-bg-2);
    transition: background var(--dur-fast), border-color var(--dur-fast);
}
.genre-chip-icon { font-size: 9px; color: #fff; line-height: 1; }
.genre-chip:hover { color: var(--nxp-text); }
.genre-chip:hover .genre-chip-box { border-color: var(--nxp-primary); }

.genre-chip.is-include { color: #22c55e; font-weight: 600; }
.genre-chip.is-include .genre-chip-box {
    background: #22c55e;
    border-color: #22c55e;
}

.genre-chip.is-exclude { color: #ef4444; font-weight: 600; }
.genre-chip.is-exclude .genre-chip-box {
    background: #ef4444;
    border-color: #ef4444;
}

/* ── AND / OR match toggle ── */
.filter-label-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.filter-label-row .filter-label { margin-bottom: 8px; }
.match-toggle {
    display: inline-flex;
    border: 1px solid var(--nxp-border);
    border-radius: 50px;
    overflow: hidden;
    margin-bottom: 8px;
}
.match-btn {
    background: transparent;
    border: none;
    padding: 4px 14px;
    font-family: var(--font-ui);
    font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--nxp-text-3);
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.match-btn:hover { color: var(--nxp-text); }
.match-btn.active {
    background: var(--nxp-primary);
    color: #fff;
}
.filter-hint {
    margin: -2px 0 8px;
    font-size: 0.75rem;
    color: var(--nxp-text-3);
}
.filter-hint .hint-inc { color: #22c55e; font-weight: 600; }
.filter-hint .hint-exc { color: #ef4444; font-weight: 600; }
.filter-label-exclude { color: #ef4444; }

.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 color-mix(in srgb, var(--nxp-primary) 18%, transparent);
}
.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 color-mix(in srgb, var(--nxp-primary) 25%, transparent);
}
.btn-apply:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--nxp-primary) 40%, transparent);
}

/* ── Active filter summary — one pill per facet ── */
.bl-active-filters {
    margin-bottom: 20px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.bl-pill {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 100%;
    background: var(--nxp-bg-2);
    border: 1px solid var(--nxp-border);
    padding: 4px 6px 4px 11px; border-radius: 50px;
    font-size: 0.82rem;
    color: var(--nxp-text-2);
    text-decoration: none;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}
.bl-pill:hover { border-color: var(--nxp-primary); }
.bl-pill-key {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--nxp-text-3);
}
.bl-pill-val {
    font-weight: 600;
    color: var(--nxp-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bl-pill-exclude {
    border-color: rgba(239,68,68,0.4);
    background: rgba(239,68,68,0.08);
}
.bl-pill-exclude:hover { border-color: #ef4444; }
.bl-pill-exclude .bl-pill-key { color: rgba(239,68,68,0.8); }
.bl-pill-exclude .bl-pill-val { color: #ef4444; }
.bl-pill-remove {
    flex-shrink: 0;
    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;
    text-decoration: none;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.bl-pill-remove:hover { background: var(--nxp-danger, #ef4444); color: #fff; }

.bl-clear-all {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.78rem; font-weight: 600;
    color: var(--nxp-text-3);
    text-decoration: none; cursor: pointer;
    transition: color var(--dur-fast);
}
.bl-clear-all i { font-size: 10px; }
.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-pill-icon { font-size: 8px; opacity: 0.6; }
.tag-pill-exclude {
    border-color: var(--nxp-danger, #ef4444);
    color: #ef4444;
    background: rgba(239,68,68,0.08);
}
.tag-pill-exclude .tag-pill-icon { 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; }





/* ── Loading spinners under reduced motion ───────────────────────────────
   Font Awesome 6 kills fa-spin when the OS asks for reduced motion:
     @media (prefers-reduced-motion: reduce) { .fa-spin { animation-duration: 1ms } }
   That is right for decorative spin, and wrong for a LOADING indicator — a
   frozen spinner on "Confirming your payment…" reads as a stalled payment. So the animation is restored here,but slowed well below the threshold that makes motion uncomfortable. The preference is honoured in spirit (calmer,not absent) rather than by removing the only signal that work is happening. */ @media (prefers-reduced-motion:reduce){.fa-spin{animation-name:nxp-reduced-spin!important;animation-duration:2.4s!important;animation-timing-function:linear!important;animation-iteration-count:infinite!important;animation-delay:0s!important}}@keyframes nxp-reduced-spin{to{transform:rotate(360deg)}}.nxp-cosmetic-frame{position:relative;display:inline-block;line-height:0;padding:var(--nxp-frame-pad,2px);transform-origin:center}.nxp-cosmetic-frame::before{content:"";position:absolute;inset:0;z-index:0;clip-path:inherit;-webkit-mask-image:inherit;mask-image:inherit;border-radius:inherit}.nxp-cosmetic-frame>img,.nxp-cosmetic-frame>.nxp-cosmetic-avatar-fallback{position:relative;z-index:1;display:block;object-fit:cover;clip-path:inherit;-webkit-mask-image:inherit;mask-image:inherit;border-radius:inherit;transform:scale(var(--nxp-inner-scale,1))}.nxp-cosmetic-avatar-fallback{background:#374151;color:#e5e7eb;text-align:center;font-weight:700}.nxp-shape--circle{border-radius:50%}.nxp-shape--square{border-radius:20%}.nxp-frame--none::before{background:var(--nxp-border-rw)}.kts-rank-wrap:has(.nxp-cosmetic-frame)::after{display:none}@keyframes nxp-frame-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes nxp-frame-pulse{0%,100%{opacity:1}50%{opacity:.55}}@keyframes nxp-frame-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes nxp-frame-flicker{0%,19%,21%,23%,54%,56%,100%{opacity:1}20%,22%,55%{opacity:.4}}@keyframes nxp-glow-pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}@keyframes nxp-glow-wave{0%{box-shadow:0 0 6px currentColor}50%{box-shadow:0 0 16px currentColor}100%{box-shadow:0 0 6px currentColor}}@keyframes nxp-glow-flicker{0%,19%,21%,23%,54%,56%,100%{opacity:1}20%,22%,55%{opacity:.5}}@keyframes nxp-glow-huespin{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}.nxp-cosmetic-frame::before{will-change:transform,opacity,background-position}@keyframes nxp-fr-spin-ccw{to{transform:rotate(-360deg)}}@keyframes nxp-fr-pulse-ring{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.45);opacity:0}}@keyframes nxp-fr-neon{from{box-shadow:0 0 10px currentColor,0 0 20px currentColor}to{box-shadow:0 0 2px currentColor,0 0 6px currentColor}}@keyframes nxp-fr-fire{from{box-shadow:0 0 6px currentColor,0 -6px 12px currentColor,inset 0 -4px 8px currentColor}to{box-shadow:0 0 10px currentColor,0 -12px 20px currentColor,inset 0 -6px 12px currentColor}}@keyframes nxp-fr-aura{0%,100%{box-shadow:0 0 8px currentColor,inset 0 0 6px currentColor}50%{box-shadow:0 0 18px currentColor,inset 0 0 12px currentColor}}@keyframes nxp-fr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes nxp-fr-heartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.12)}30%{transform:scale(1)}45%{transform:scale(1.12)}}@keyframes nxp-fr-coin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}@keyframes nxp-fr-bounce{0%,100%{transform:translateY(0);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(5px);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes nxp-fr-morph-blob{0%,100%{border-radius:40% 60% 70% 30% / 40% 50% 60% 50%}34%{border-radius:70% 30% 50% 50% / 30% 30% 70% 70%}67%{border-radius:100% 60% 60% 100% / 100% 100% 60% 60%}}@keyframes nxp-fr-morph-wild{0%,100%{border-radius:50%}25%{border-radius:31% 69% 26% 74%}50%{border-radius:74% 26% 69% 31%}75%{border-radius:35% 65% 42% 58%}}@keyframes nxp-fr-matrix{0%{background-position:0 -100%}100%{background-position:0 100%}}@keyframes nxp-fr-radar{to{transform:rotate(360deg)}}@keyframes nxp-fr-svgdash{0%{stroke-dasharray:10 280;stroke-dashoffset:0}50%{stroke-dasharray:140 150;stroke-dashoffset:-90}100%{stroke-dasharray:10 280;stroke-dashoffset:-290}}.nxp-frame-halo{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;clip-path:inherit;border:2px solid currentColor;pointer-events:none}.nxp-frame-overlay{position:absolute;inset:0;z-index:2;border-radius:inherit;clip-path:inherit;-webkit-mask-image:inherit;mask-image:inherit;overflow:hidden;pointer-events:none}.nxp-ovfx--svg-dash{overflow:visible;clip-path:none;-webkit-mask-image:none;mask-image:none;border-radius:0;inset:calc(-1 * var(--nxp-frame-pad, 2px))}.nxp-ovfx--svg-dash svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}.nxp-ovfx--svg-dash circle{fill:none;stroke-width:4;stroke-linecap:round;animation:nxp-fr-svgdash var(--nxp-ov-speed,3s) ease-in-out infinite}.nxp-motion--float{animation:nxp-fr-float var(--nxp-motion-speed,3s) ease-in-out infinite}.nxp-motion--heartbeat{animation:nxp-fr-heartbeat var(--nxp-motion-speed,1.5s) ease-in-out infinite}.nxp-motion--coin-spin{animation:nxp-fr-coin var(--nxp-motion-speed,3s) linear infinite;transform-style:preserve-3d}.nxp-motion--bounce{animation:nxp-fr-bounce var(--nxp-motion-speed,2s) infinite}.nxp-morph--blob{border-radius:45%;animation:nxp-fr-morph-blob var(--nxp-morph-speed,6s) ease-in-out infinite alternate}.nxp-morph--wild{border-radius:50%;animation:nxp-fr-morph-wild var(--nxp-morph-speed,4s) linear infinite}.nxp-cosmetic-avatar-wrap{position:relative;display:inline-block;line-height:0}.nxp-cosmetic-level-hex{position:absolute;bottom:-3px;right:-3px;z-index:2;min-width:25px;height:18px;padding:0 3px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;background:#4b5563;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)}.nxp-lvl{display:inline-block;vertical-align:middle;flex-shrink:0;width:var(--nxp-lvl-size,24px);min-width:var(--nxp-lvl-size,24px);height:var(--nxp-lvl-size,24px);background-image:url(/wp-content/themes/nxp/image/lvls.svg);background-repeat:no-repeat;background-size:100%;background-position:0 var(--nxp-lvl-cell,0%);-webkit-user-select:none;user-select:none}.nxp-user-title{display:inline-block;font-size:.85em}.nxp-title-animwrap{display:inline-block;line-height:inherit}@keyframes nxp-title-pulse{0%,100%{opacity:1}50%{opacity:.6}}@keyframes nxp-title-shimmer{0%{filter:brightness(1)}50%{filter:brightness(1.4)}100%{filter:brightness(1)}}@keyframes nxp-title-rainbow{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}.nxp-title-anim--pulse{animation:nxp-title-pulse 2s ease-in-out infinite}.nxp-title-anim--shimmer{animation:nxp-title-shimmer 2.4s ease-in-out infinite}.nxp-title-anim--rainbow{animation:nxp-title-rainbow 3s linear infinite}.nxp-badges-row{display:inline-flex;gap:4px;align-items:center;vertical-align:middle}.nxp-badge{display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background:color-mix(in srgb,var(--nxp-badge-bg,#1f2937) calc(var(--nxp-badge-bg-opacity, 1) * 100%),transparent)}.nxp-badge--small{width:16px;height:16px;font-size:9px}.nxp-badge--medium{width:20px;height:20px;font-size:11px}.nxp-badge--large{width:26px;height:26px;font-size:14px}.nxp-badge img{width:70%;height:70%;object-fit:contain}.nxp-badge--has-text{width:auto;height:auto;border-radius:999px;padding:2px 8px 2px 6px;gap:4px}.nxp-badge--has-text.nxp-badge--small{padding:1px 6px 1px 5px}.nxp-badge--has-text.nxp-badge--large{padding:3px 10px 3px 7px}.nxp-badge-text{font-weight:700;white-space:nowrap;line-height:1}.nxp-badge--image{width:auto;height:20px;border-radius:0;background:transparent!important;padding:0}.nxp-badge--image.nxp-badge--small{height:16px}.nxp-badge--image.nxp-badge--medium{height:20px}.nxp-badge--image.nxp-badge--large{height:28px}.nxp-badge--image img{width:auto;height:100%;max-width:140px;object-fit:contain}.nxp-badge--image.nxp-badge--has-text{border-radius:0;padding:0;gap:5px}@keyframes nxp-badge-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}@keyframes nxp-badge-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}.nxp-badge-anim--pulse{animation:nxp-badge-pulse 1.6s ease-in-out infinite}.nxp-badge-anim--bounce{animation:nxp-badge-bounce 1.2s ease-in-out infinite}:root{--nxp-rp-color:#9CA3AF;--nxp-rp-glow:transparent}.nxp-rp-hero{border:1px solid var(--nxp-border);border-radius:20px;overflow:hidden;margin-bottom:16px;position:relative}.nxp-rp-hero__banner{position:absolute;top:0;left:0;width:100%;height:110px;z-index:0;pointer-events:none}.nxp-rp-hero__body{padding:50px 24px 24px;position:relative;z-index:1}.nxp-rp-hero__top{display:flex;align-items:center;text-align:left;gap:10px;margin-bottom:14px}.nxp-rp-avatar-wrap{position:relative;flex-shrink:0;line-height:0}.nxp-rp-hero__info{min-width:0;max-width:100%;line-height:1.2}.nxp-rp-name{font-size:1.4rem;font-weight:800;color:var(--nxp-text);margin:0 0 2px;line-height:1.2;display:flex;align-items:center;justify-content:flex-start;gap:8px;min-width:0}.nxp-rp-name-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nxp-rp-rank-row{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-wrap:wrap;margin-top:4px}.nxp-rp-hero__actions{position:absolute;top:10px;right:14px;z-index:2;display:flex;align-items:center;gap:6px}.nxp-ud-hero-action{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:var(--nxp-surface);color:var(--nxp-text-2);font-size:.8rem;text-decoration:none;border:1px solid var(--nxp-border-rw);transition:background 0.15s,color 0.15s}.nxp-ud-hero-action:hover{background:var(--nxp-bg-2);color:var(--nxp-text)}.nxp-rp-like-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-size:.76rem;font-weight:700;color:var(--nxp-text-2);background:var(--nxp-surface);border:1px solid var(--nxp-border-rw);cursor:pointer;transition:color 0.15s,border-color 0.15s,background 0.15s}.nxp-rp-like-btn:hover{border-color:#f06767;color:#f06767}.nxp-rp-like-btn i{font-size:.82rem}.nxp-rp-like-btn.is-liked{color:#f06767;border-color:color-mix(in srgb,#f06767 40%,transparent);background:color-mix(in srgb,#f06767 8%,var(--nxp-bg-3))}.nxp-rp-like-btn--readonly{cursor:default;color:var(--nxp-text-2)}.nxp-rp-like-btn--readonly:hover{border-color:var(--nxp-border);color:var(--nxp-text-2)}.nxp-rp-like-count{font-variant-numeric:tabular-nums}.nxp-rp-bio{font-size:.88rem;color:var(--nxp-text-2);line-height:1.55;margin:0 0 16px}.nxp-rp-xp{border:1px solid var(--nxp-border);border-radius:12px;padding:14px 16px}.nxp-rp-xp__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.nxp-rp-xp__label{font-size:.78rem;font-weight:700;color:var(--nxp-rp-color)}.nxp-rp-xp__nums{font-size:.72rem;color:var(--nxp-text-3)}.nxp-rp-xp__bar{height:8px;background:var(--nxp-bg-2);border-radius:99px;overflow:hidden;margin-bottom:6px}.nxp-rp-xp__fill{height:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--nxp-rp-color) 70%,#fff),var(--nxp-rp-color));transition:width 1.2s cubic-bezier(.34,1.56,.64,1)}.nxp-rp-xp__meta{display:flex;justify-content:space-between;font-size:.7rem;color:var(--nxp-text-3)}.nxp-rp-joined{font-size:.72rem;color:var(--nxp-text-4);text-align:right;margin-top:8px}.nxp-rp-avatar-cam-overlay{position:absolute;inset:0;z-index:3;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgb(0 0 0 / .5);color:#fff;font-size:1.1rem;cursor:pointer;opacity:0;transition:opacity 0.15s}.nxp-rp-avatar-wrap:hover .nxp-rp-avatar-cam-overlay,.nxp-rp-avatar-cam-overlay:focus-visible{opacity:1}@media (max-width:600px){.nxp-rp-hero__banner{height:84px}.nxp-rp-hero__body{padding:45px 14px 16px}.nxp-rp-hero__actions{top:10px;right:10px;gap:6px}.nxp-rp-name{font-size:1.15rem;gap:6px}.nxp-rp-bio{font-size:.8rem}.nxp-rp-joined{font-size:.66rem}}:root{--nxp-primary:#2563EB;--nxp-primary-dark:#1D4ED8;--nxp-glow:rgba(225, 29, 72, 0.15);--shadow-glow:0 0 30px rgba(225, 29, 72, 0.2)}html[data-theme="light"]{--nxp-glow:rgba(225, 29, 72, 0.10)}html[data-theme="sepia"]{--nxp-glow:rgba(225, 29, 72, 0.15)}html[data-theme="soft"]{--nxp-glow:rgba(225, 29, 72, 0.15)}