/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* LOAD-BEARING: html/body get NO height and NO overflow rules here. Three
   sticky/scroll traps were hit in sequence on this line (2026-07-17):
   1. height:100% made body its own scroll container → window.scrollY stuck
      at 0 → every scroll-driven feature dead.
   2. overflow-x:hidden on body made body a never-scrolling scrollport →
      sticky headers stuck to body and scrolled away with the page.
   3. overflow-x:hidden even on html alone still broke position:sticky
      against the viewport (long-standing Chrome behavior).
   The site's other pages set no root overflow and sticky works there —
   keep the reader identical. Horizontal clipping is handled locally by
   .nxp-cr-container { overflow-x: hidden }. */
html, body { width: 100%; }

/* ── Reader Wrapper — theme variables live here ── */
#nxp-reader {
    --cr-bg:       #ffffff;
    --cr-surface:  #f5f5f5;
    --cr-text:     #424242;
    --cr-meta:     #6e6e6e;
    --cr-border:   #e8e8e8;
    --nxp-card-bg:      #FFFFFF;
    --cr-font:     'Open Sans', sans-serif;
    
    /* Reader typography — driven by CSS vars so the parse-time inline script
       in single-chapter.php can set the saved size/height on this wrapper
       BEFORE first paint. .nxp-cr-content inherits them, so the content (and
       the locked teaser, same element) never flashes the 16/28 default then
       reflows to the reader's real settings when reader.js runs in the footer. */
    --cr-fz:       16px;
    --cr-lh:       28px;
    background: var(--cr-bg);
    color: var(--cr-text);
    min-height: 100vh;
    min-height: -webkit-fill-available;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    transition: background 0.3s, color 0.3s;
}

/* Themes */
/* Reader theme set is kept identical to the site theme set (style.css) —
   order: light (base) · dark · sepia · soft. */
#nxp-reader[data-theme="dark"]   { 
    --cr-bg:#202020; 
    --cr-surface:#1c1c1c; 
    --cr-text:#E8E8F0; 
    --cr-border:rgba(255,255,255,0.07); 
    --cr-meta:#9999B0; 
    --nxp-card-bg:       #0e0d0d;
}
#nxp-reader[data-theme="sepia"]  { 
    --cr-bg:#fdf6e3; 
    --cr-surface:#f5eed8; 
    --cr-text:#5b4636; 
    --cr-border:#e6dfca; 
    --cr-meta:#7d6a55; 
    --nxp-card-bg:      #fffdf5;
}
#nxp-reader[data-theme="soft"]   {
    --cr-bg:#e8f5e9; 
    --cr-surface:#dcf0de; 
    --cr-text:#2e4d32; 
    --cr-border:#c8e6c9; 
    --cr-meta:#4e6f53; 
    --nxp-card-bg:      #f4fbf4;
}

/* Contrast overrides */
#nxp-reader[data-contrast="soft"] { --cr-text: #71717a; }
#nxp-reader[data-theme="dark"][data-contrast="soft"]  { --cr-text: #94a3b8; }
#nxp-reader[data-theme="sepia"][data-contrast="soft"] { --cr-text: #8d7d66; }


#nxp-reader[data-contrast="high"] { --cr-text: #000000; }
#nxp-reader[data-theme="dark"][data-contrast="high"]  { --cr-text: #ffffff; }

/* ── Progress Bar ── */
#nxp-progress {
    position: fixed; top: 0; left: 0; height: 3px;
    background: var(--nxp-primary); z-index: 9999;
    width: 0%; transition: width 0.1s linear;
    pointer-events: none;
}

/* ── Sticky Header ──
   Sticks BELOW the site header (top: --header-height), never behind it —
   both are sticky and the site header wins on z-index, so top:0 here would
   bury this header mid-page. When the site header hides (it broadcasts
   body.nxp-siteheader-hidden), this one slides up to sit right under the
   site header's peek lip; top is transitioned so the move animates. */
.nxp-cr-header {
    position: sticky; top: var(--header-height, 64px); z-index: 90;
    background: var(--cr-bg);
    border-bottom: 1px solid var(--cr-border);
    /* Same visual thickness as the site header — height-locked to the
       shared --header-height token instead of padding + content height
       (the old 10px padding + 55px thumb made this one visibly fatter). */
    height: calc(var(--header-height, 64px) + env(safe-area-inset-top, 0px));
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
    /* transform/top 0.25s is only the RELEASE glide (reset near top) —
       actual hiding is scroll-linked; .scrub drops these transitions. */
    transition: background 0.3s, border-color 0.3s,
                transform 0.25s ease,
                top 0.25s ease;
}
/* Immersive mode (Header Behavior Engine, reader.js): header slides up and
   away on a deliberate scroll down; the footer bar follows 60ms later (its
   own transition-delay) for a staggered, more polished exit.

   Hiding is SCROLL-LINKED (reader.js staged scrub): the engine sets an
   inline translateY per frame, down to a --nxp-peek-ch lip (max scrub =
   height - peek). In stacked mode the sticky `top` is ALSO driven per
   frame (it tracks the site header's visible bottom edge), so .scrub
   drops both the transform and top transitions — easing either would lag
   behind the finger. On release (near top / mode off) the class comes
   off and the reset glides back via the base 0.25s transitions. */
.nxp-cr-header.scrub {
    transition: background 0.3s, border-color 0.3s;
}
.nxp-cr-header__inner {
    max-width: 1030px; margin: 0 auto;
    padding: 0 8px;
    height: 100%;
    display: flex; align-items: center;
    justify-content: space-between; gap: 8px;
}
.nxp-cr-header__left  { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nxp-cr-header__right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.nxp-cr-back {
    color: var(--cr-meta);
    font-size: 18px;
    text-decoration: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    width: 22px;
    height: 32px;
    justify-content: center;
}
.nxp-cr-thumb {
    /* Sized to fit the height-locked header (--header-height 64/56px) */
    width: 32px;
    height: 44px;
    object-fit: cover; 
    border-radius: 2px;
    /* box-shadow: 0 2px 6px rgba(0,0,0,0.15); */
    flex-shrink: 0;
}
.nxp-cr-novel-title {
    font-size: 17px; font-weight: 700;
    color: var(--cr-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 280px;
    text-decoration: none;
}
.nxp-cr-novel-title:hover { color: var(--nxp-primary); }

.nxp-cr-circ-btn {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--cr-border);
    background: transparent; color: var(--nxp-primary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.2s; text-decoration: none;
    font-size: 14px;
}
.nxp-cr-circ-btn:hover { background: var(--nxp-primary); color: #fff; border-color: var(--nxp-primary); }

/* Owner "edit chapter" pencil in the header right slot */
.nxp-cr-edit-btn {
    color: var(--cr-meta); font-size: 16px; text-decoration: none;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; transition: color 0.2s;
}
.nxp-cr-edit-btn:hover { color: var(--nxp-primary); }

/* ── Main Content Container ── */
.nxp-cr-container {
    max-width: 1000px; margin: 0 auto;
    padding: 28px 20px 140px;
    width: 100%; overflow-x: hidden;
    clear: both;
}

/* Chapter heading */
.nxp-cr-chapter-heading {
    font-family: var(--cr-font);
    font-size: 20px; font-weight: 700;
    color: var(--cr-text);
    margin-bottom: 6px; line-height: 1.3;
}
.nxp-cr-chapter-meta {
    font-size: 0.78rem; color: var(--cr-meta);
    margin-bottom: 14px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.nxp-cr-chapter-meta span { display: flex; align-items: center; gap: 3px; }
.nxp-cr-chapter-meta .sep { color: var(--cr-border); }

.nxp-cr-content {
    font-family: var(--cr-font);
    font-size: var(--cr-fz);
    line-height: var(--cr-lh);
    color: var(--cr-text);
    word-wrap: break-word;
    transition: font-size 0.15s, line-height 0.15s, font-family 0.15s;
}
.nxp-cr-content p { margin-bottom: 24px; }
.nxp-cr-content p:last-child { margin-bottom: 0; }

/* The chapter body is author-supplied HTML and wp_kses_post preserves inline
   color (common in content pasted from Word/Docs). Left alone, a hardcoded
   dark color renders black — off-palette on sepia/soft and outright INVISIBLE
   on the dark theme. Force body text to the active theme's --cr-text
   so the theme switch stays the single source of truth. Links are excluded so
   they keep the accent; :where() keeps specificity low, !important beats the
   inline style. */
.nxp-cr-content :where(p, span, div, section, article, li, ul, ol, dl, dd, dt,
    blockquote, h1, h2, h3, h4, h5, h6, strong, b, em, i, u, s, mark, small,
    sub, sup, figcaption) {
    color: var(--cr-text) !important;
}

/* Bottom Nav Pills */
.nxp-cr-bottom-nav {
    display: flex; align-items: center; width: 100%;
    margin-top: 10px; padding-top: 16px;
}
.nxp-cr-bottom-nav > :nth-child(1) { order: 1; }
.nxp-cr-bottom-nav > :nth-child(3) { order: 2; margin-left: 8px; }
.nxp-cr-bottom-nav > :nth-child(2) {
    order: 3; margin-left: auto; display: flex; gap: 2px !important;
}

.nxp-cr-nav-pill {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff !important;
    padding: 8px 18px; border-radius: 50px;
    text-decoration: none; font-weight: 700; font-size: 13px; border: none;
    display: flex; align-items: center; gap: 6px; cursor: pointer; transition: all 0.2s ease;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.25);
}
.nxp-cr-nav-pill svg { width: 14px; height: 14px; }
.nxp-cr-nav-pill:hover {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    transform: translateY(-2px); box-shadow: 0 5px 14px rgba(37, 99, 235, 0.35);
}
.nxp-cr-nav-pill:active { transform: scale(0.95); }
.nxp-cr-nav-pill.disabled {
    background: var(--cr-surface); color: var(--cr-meta) !important;
    border: 1px solid var(--cr-border); box-shadow: none; opacity: 0.5; pointer-events: none;
}

.nxp-cr-bottom-nav .nxp-cr-icon-btn {width: 35px;
    background: transparent; border: none; padding: 6px 8px; font-size: 22px;
    color: var(--cr-meta); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s;
}
.nxp-cr-bottom-nav .nxp-cr-icon-btn:hover { transform: scale(1.15); }
.nxp-cr-bottom-nav .nxp-cr-fav-btn.active { color: #ef4444; }
.nxp-cr-bottom-nav .nxp-cr-bookmark-btn.active { color: var(--nxp-primary); }

/* ── Comments Section ── */
.nxp-cr-comments { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--cr-border); }

/* ── Lock Box (redesigned card) ── */
.nxp-redesign-lockbox {
    position: relative;
    background: var(--cr-bg);
    border: 1.5px solid var(--cr-border, #e8e8e8);
    border-radius: 24px;
    padding: 52px 28px 36px; /* extra top room for the protruding lock badge */
    margin: 60px auto 32px;
    /* Full width — matches the chapter content column (.nxp-cr-container). */
    width: 100%;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.05);
    transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
/* Softer, glowing card + badge in dark mode */
#nxp-reader[data-theme="dark"] .nxp-redesign-lockbox {
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5), 0 0 1px 1px rgba(255,255,255,0.05);
}
#nxp-reader[data-theme="dark"] .nxp-lb-icon-wrap {
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}

/* Lock icon — deliberately STATIC (no idle animation; it repaints forever on
   low-end phones sitting at the paywall). Straddles the card's top border:
   50% above, 50% inside. Icon sits directly inside the wrap now. */
.nxp-lb-icon-wrap {
    position: absolute; top: 0; 
    left: 50%;
    transform: translate(-50%, -45%);
    width: 88px; 
    height: 88px; 
    border-radius: 50%;
    background: var(--cr-bg);
    border: 2px solid var(--cr-border, #e8e8e8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px; 
    color: var(--nxp-text-2); 
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
/* Bigger, more prominent lock badge on wide screens. */
@media (min-width: 768px) {
    .nxp-lb-icon-wrap { width: 104px; height: 104px; font-size: 42px; border-width: 2.5px; }
    .nxp-redesign-lockbox { padding-top: 78px; margin-top: 70px; }
}

/* Header (title + subtitle) */
.nxp-lb-header { text-align: center; margin-bottom: 22px; padding-top: 6px; }
.nxp-cr-lock-title { font-size: 20px; font-weight: 800; color: var(--cr-text); margin-bottom: 6px; line-height: 1.25; letter-spacing: -0.01em; }
.nxp-cr-lock-sub   { font-size: 0.8rem; color: var(--cr-meta); line-height: 1.6; max-width: 24rem; margin: 0 auto; }

/* ── Guest actions (Sign in / Create account — no inner card) ── */
.nxp-lb-guest-actions {
    display: flex; flex-direction: column; gap: 10px;
    max-width: 420px; margin: 0 auto;
}
.nxp-lb-guest-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; border-radius: 99px; font-weight: 700; font-size: 0.85rem;
    text-decoration: none; cursor: pointer; transition: 0.2s;
}
.nxp-lb-guest-btn--primary { padding: 12px 16px; background: var(--nxp-primary); color: #fff; border: none; }
.nxp-lb-guest-btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.nxp-lb-guest-btn--ghost { padding: 11px 16px; background: transparent; border: 2px solid var(--cr-border); color: var(--cr-text); }
.nxp-lb-guest-btn--ghost:hover { border-color: #F59E0B; color: #F59E0B; }

/* ── Member panels: tabs + height-locked switcher ── */
/* Keep the controls in a centered, readable column even though the card
   itself now spans the full content width. */
.nxp-lb-member { max-width: 620px; margin: 0 auto; }
.nxp-lb-tabs {
    display: flex; gap: 6px; background: var(--cr-surface); border: 1px solid var(--cr-border);
    padding: 4px; border-radius: 12px; margin-bottom: 18px;
}
.nxp-tab-btn {
    position: relative; flex: 1; padding: 10px 14px;
    font-size: 0.82rem; font-weight: 700; color: var(--cr-meta);
    border-radius: 9px; background: transparent; border: none; cursor: pointer;
    transition: color 0.25s, background-color 0.25s;
}
.nxp-tab-btn.active { color: var(--cr-text); background: var(--cr-bg); box-shadow: 0 2px 8px -1px rgba(0,0,0,0.06); }
#nxp-reader[data-theme="dark"] .nxp-tab-btn.active { background: rgba(255,255,255,0.06); color: #fff; }

/* Height-locked so switching tabs never jumps the page. */
.v1-panels-container { position: relative; height: 148px; width: 100%; ; }
.v1-panel-wrapper {
    display: flex; flex-direction: column; justify-content: center;
}
/* When tabbed, panels stack absolutely and cross-fade. Single-gate (no
   container) panels flow normally. */
.v1-panels-container .v1-panel-wrapper {
    position: absolute; inset: 0;
    opacity: 0; pointer-events: none;
    transform: scale(0.98) translateY(6px);
    transition: opacity 0.25s cubic-bezier(0.16,1,0.3,1), transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.v1-panels-container .v1-panel-wrapper.active-panel {
    opacity: 1; pointer-events: auto; transform: scale(1) translateY(0);
}
/* Actions fill the centered member column (.nxp-lb-member caps the width),
   so the unlock button lines up with the tab row above it. */
.nxp-lb-panel-inner { width: 100%; margin: 0 auto; text-align: center; }

/* Patreon CTA button */
.nxp-premium-cta-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; max-width: 22rem; margin: 0 auto; padding: 14px 28px; border-radius: 99px;
    font-weight: 800; font-size: 1rem; cursor: pointer; border: none; text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
    position: relative; overflow: hidden; min-height: 52px; color: #fff;
}
.nxp-premium-cta-btn:hover:not(:disabled) { transform: translateY(-2px); }
.nxp-premium-cta-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.nxp-premium-cta-btn--patreon { background: linear-gradient(135deg, #f96854, #d84c36); box-shadow: 0 4px 18px rgba(249,104,84,0.3); }
.nxp-premium-cta-btn--patreon:hover { color: #fff; }

/* Secondary Patreon link (author page / sync-now) */
.nxp-lb-pt-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    margin: 10px auto 0; font-size: 0.75rem; font-weight: 700; color: var(--cr-meta);
    background: none; border: none; cursor: pointer; text-decoration: none;
    transition: color 0.2s;
}
.nxp-lb-pt-link:hover { color: #f96854; }


.nxp-cr-unlock-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 15px 24px; border-radius: 99px;
    background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; font-weight: 800; font-size: 1rem;
    border: none; cursor: pointer; box-shadow: 0 4px 18px rgba(245,158,11,0.38); transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; margin-bottom: 5px;
    position: relative; z-index: 1; overflow: hidden;
    /* Constant height across normal ↔ loading states so the label→bar
       swap can't shift the layout below the button. */
    min-height: 51px;
}
.nxp-cr-unlock-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 22px rgba(245,158,11,0.52); color: #fff; }
.nxp-cr-unlock-btn:disabled { opacity: 0.42; cursor: not-allowed; }
/* JS disables the button while the purchase is in flight — without this
   exception the :disabled dim (0.42) flashes the whole button dark on
   click. Loading is an active state, not a dead one: stay full-color. */
.nxp-cr-unlock-btn.is-loading:disabled { opacity: 1; cursor: progress; }
.nxp-cr-unlock-btn .nxp-btn-spinner { display: none; }
.nxp-cr-unlock-btn.is-loading .nxp-btn-spinner {
    display: block; font-size: 0.85rem; letter-spacing: 0.02em; line-height: 1;
}
.nxp-cr-unlock-btn.is-loading .nxp-btn-label  { display: none; }

/* While the purchase request is in flight the button stacks a smaller
   "Unlocking…" line over a small progress bar INSIDE the button: a white
   fill grows left-to-right along a translucent track. Duration is unknown,
   so the fill eases toward ~95% and holds (the swap replaces the region
   the moment the server answers). Transform-only (scaleX) — compositor-
   friendly, no repaints. */
.nxp-cr-unlock-btn.is-loading {
    flex-direction: column; gap: 5px;
    padding-top: 8px; padding-bottom: 8px;
    /* Freeze the resting geometry: no hover-lift snapping back, no height
       jump when the label swaps to the smaller text + bar stack. */
    transform: none !important;
    box-shadow: 0 4px 18px rgba(245,158,11,0.38) !important;
}
.nxp-btn-bar {
    display: none; width: 170px; max-width: 65%; height: 4px;
    border-radius: 4px; background: rgba(255,255,255,0.25);
    overflow: hidden; position: relative;
}
.nxp-cr-unlock-btn.is-loading .nxp-btn-bar { display: block; }
.nxp-btn-bar span {
    position: absolute; inset: 0;
    background: #fff; border-radius: 4px;
    transform: scaleX(0); transform-origin: left center;
    animation: nxpBarFill 2.4s cubic-bezier(0.25,0.65,0.3,1) forwards;
}
@keyframes nxpBarFill {
    0%   { transform: scaleX(0); }
    70%  { transform: scaleX(0.82); }
    100% { transform: scaleX(0.95); }
}

.nxp-cr-buy-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 24px; border-radius: 99px;
    background: transparent; border: 2px solid var(--cr-border); color: var(--cr-text); font-weight: 800; font-size: 1rem;
    text-decoration: none; transition: 0.2s; position: relative; z-index: 1;
}
.nxp-cr-buy-btn:hover { border-color: #F59E0B; color: #F59E0B; }

/* Insufficient-balance variant: a single blue "Buy Coins & Unlock" CTA that
   replaces the amber unlock button (styled as an <a> to /buy-coins/). */
.nxp-cr-unlock-btn--buy {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 4px 18px rgba(59,130,246,0.38);
}
.nxp-cr-unlock-btn--buy:hover { box-shadow: 0 7px 22px rgba(59,130,246,0.52) !important; color: #fff !important;}

/* ── Unlock reveal (wrapper main.js puts around the injected chapter body
      after a successful purchase). The text un-fades from top to bottom:
      a page-background overlay with a soft feathered top edge slides down
      over the content, mirroring the teaser's fade dissolving away. The
      first ~180px (heading + meta + opening lines — what the teaser already
      showed) start visible, so the swap reads as a seamless continuation.
      One-shot, transform-only (compositor-friendly), then inert. ── */
.nxp-unlock-reveal {
    position: relative;
    overflow: hidden;
}
.nxp-unlock-reveal::after {
    content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--cr-bg, #fff) 180px);
    animation: nxpRevealDown 1.3s ease-in-out forwards;
}
@keyframes nxpRevealDown {
    100% { transform: translateY(103%); }
}

/* Toggles & Settings */
.nxp-cr-toggle-wrap { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.nxp-cr-toggle-input { display: none; }
.nxp-cr-toggle-track { position: relative; width: 42px; height: 24px; background: var(--cr-border); border-radius: 999px; transition: background 0.2s; flex-shrink: 0; }
.nxp-cr-toggle-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: left 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.nxp-cr-toggle-input:checked + .nxp-cr-toggle-track { background: #F59E0B; }
.nxp-cr-toggle-input:checked + .nxp-cr-toggle-track::after { left: 21px; }
.nxp-cr-toggle-label { font-size: 0.88rem; font-weight: 600; color: var(--cr-text); }

/* Auto-unlock row with (?) tooltip */
.nxp-cr-autounlock { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; position: relative; z-index: 1; }
.nxp-au-tip {
    position: relative; display: flex; align-items: center;
    color: var(--cr-meta); font-size: 13px; cursor: pointer; flex-shrink: 0;
}
.nxp-au-tip:hover .nxp-au-tip__bubble,
.nxp-au-tip:focus .nxp-au-tip__bubble,
.nxp-au-tip.open .nxp-au-tip__bubble { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nxp-au-tip__bubble {
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%) translateY(5px);
    width: 216px;
    background: var(--cr-bg); border: 1px solid var(--cr-border);
    color: var(--cr-text); font-size: 0.76rem; line-height: 1.55;
    padding: 9px 13px; border-radius: 10px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none; z-index: 99; text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18); white-space: normal;
}
.nxp-au-tip__bubble::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--cr-border);
}

/* Heartfelt message (single, randomised server-side on load) */
.nxp-cr-lock-sub {
    font-size: 0.9rem; color: var(--cr-meta); line-height: 1.6; text-align: center;
    max-width: 390px; 
    /* margin: 6px 0 18px;  */
    position: relative; z-index: 1;
}

/* Cost / Balance info chips — horizontal with icon bubble */
.nxp-lb-info-row {
    display: flex; align-items: center; gap: 8px; margin: 0 auto 16px; max-width: 580px;
    position: relative; z-index: 1;
}
.nxp-lb-info-chip {
    display: flex; flex-direction: row; align-items: center; gap: 10px;
    background: var(--cr-bg, #fff);
    border: 1px solid var(--cr-border);
    border-radius: 14px; padding: 10px 14px; flex: 1; min-width: 0;
}
.nxp-lb-chip-icon {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.nxp-lb-chip-icon--coin    { background: #F59E0B; color: #fff; }
.nxp-lb-chip-icon--balance { background: var(--cr-surface); color: var(--cr-meta); }
.nxp-lb-chip-icon--patreon { background: #f96854; color: #fff; }
.nxp-lb-chip-text { display: flex; flex-direction: column; gap: 1px; overflow: hidden; text-overflow: ellipsis;}
.nxp-lb-info-chip__label {
    font-size: 0.62rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cr-meta); text-align:left; line-height: .8;
}
.nxp-lb-info-chip__val {
    font-size: 1rem; font-weight: 800; color: var(--cr-text); text-align: left; line-height: 1.2; white-space:nowrap; overflow: hidden;
text-overflow: ellipsis;
}
.nxp-lb-info-chip__val--muted   { color: var(--cr-meta); }
.nxp-lb-info-chip__val--patreon { color: #f96854; }
.nxp-lb-info-sep { color: var(--cr-meta); font-size: 1.1rem; flex-shrink: 0; }
.nxp-lb-info-sep--arrow { font-size: 1rem; }

/* "One-time purchase" note below unlock button */
.nxp-lb-one-time {
    font-size: 0.65rem; color: var(--cr-meta); margin: 2px 0 0px; position: relative; z-index: 1;
}

/* Footer & Overlays */
.nxp-cr-footer-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: var(--cr-bg); border-top: 1px solid var(--cr-border);
    padding: 6px 0; padding-bottom: max(6px, env(safe-area-inset-bottom)); box-shadow: 0 -4px 20px rgba(0,0,0,0.07); transition: transform 0.25s ease, background 0.3s, border-color 0.3s;
}
/* Scroll-linked scrub (reader.js sets inline translateY per frame) — the
   transform transition must be off while scrubbing. Base 0.25s above is
   only the release glide back into view. */
.nxp-cr-footer-bar.scrub { transition: background 0.3s, border-color 0.3s; }
.nxp-cr-footer-inner { max-width: 1000px; margin: 0 auto; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; }
.nxp-cr-footer-right { display: flex; align-items: center; gap: 0px; }
.nxp-cr-footer-nav  { display: flex; gap: 0px; margin-left: 4px; }

.nxp-cr-icon-btn {
    background: transparent; border: none; color: var(--cr-meta);
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); text-decoration: none;
    font-size: 22px;
    padding: 8px 7px;
}
.nxp-cr-icon-btn:hover { color: var(--nxp-primary); transform: scale(1.15); }
.nxp-cr-icon-btn.active { color: var(--nxp-primary); }
.nxp-cr-fav-btn.active { color: #ef4444; } /* heart/like is always red, bookmark stays primary */

/* ── Chapter Index Drawer (left slide-out) ── */
.nxp-cr-index-backdrop {
    position: fixed; inset: 0; z-index: 99;
    background: rgba(0,0,0,0.5);
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease;
}
.nxp-cr-index-backdrop.active { opacity: 1; visibility: visible; }

.nxp-cr-index-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 99;
    width: 320px; max-width: 85vw;
    background: var(--cr-bg);
    border-right: 1px solid var(--cr-border);
    transform: translateX(-100%);
    transition: transform 0.28s ease, background 0.3s, border-color 0.3s;
    display: flex; flex-direction: column;
}
.nxp-cr-index-drawer.active { transform: translateX(0); }

.nxp-cr-index-header {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 10px;
    padding: 16px 16px;
    padding-top: calc(var(--header-height, 64px) + 12px + env(safe-area-inset-top, 0px));
    border-bottom: 1px solid var(--cr-border);
}
.nxp-cr-index-header__thumb {
    width: 36px; height: 50px; object-fit: cover; border-radius: 4px; flex-shrink: 0;
}
.nxp-cr-index-header__info { flex: 1; min-width: 0; }
.nxp-cr-index-header__title {
    font-size: 14px; font-weight: 700; color: var(--cr-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nxp-cr-index-header__count { font-size: 0.75rem; color: var(--cr-meta); margin-top: 2px; }
.nxp-cr-index-close {
    flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    background: var(--cr-surface); border: 1px solid var(--cr-border);
    color: var(--cr-text); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: 0.2s;
}
.nxp-cr-index-close:hover { border-color: var(--nxp-primary); color: var(--nxp-primary); }

.nxp-cr-index-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.nxp-cr-index-item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px;
    text-decoration: none; color: var(--cr-text);
    border-bottom: 1px solid var(--cr-border);
    transition: background 0.15s;
}
.nxp-cr-index-item:hover { background: var(--cr-surface); }
.nxp-cr-index-item__main { flex: 1; min-width: 0; }
.nxp-cr-index-item__title {
    font-size: 16px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nxp-cr-index-item__scheduled { opacity: 0.6; font-size: 0.7rem; font-style: italic; margin-left: 4px; }
.nxp-cr-index-item__meta {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.72rem; color: var(--cr-meta);
    margin-top: 3px;
}
.nxp-cr-index-item__sep { color: var(--cr-border); }
.nxp-cr-index-item__lock { flex-shrink: 0; font-size: 0.7rem; color: #F59E0B; }
.nxp-cr-index-item.current {
    background: rgba(132,150,252,0.1);
    color: var(--nxp-primary);
    border-left: 3px solid var(--nxp-primary);
    padding-left: 13px;
}
.nxp-cr-index-item.current .nxp-cr-index-item__meta { color: var(--nxp-primary); opacity: 0.8; }
.nxp-cr-index-empty { padding: 24px 16px; font-size: 0.85rem; color: var(--cr-meta); text-align: center; }

.nxp-cr-settings-popover {
    position: absolute; bottom: 70px; right: 16px; background: var(--nxp-card-bg); border: 1px solid var(--cr-border); border-radius: 8px;
    padding: 20px; width: 320px; box-shadow: 0 10px 40px rgba(0,0,0,0.15); display: none; z-index: 1001;
}
.nxp-cr-settings-popover.active { display: block; }
.cr-sett-section { margin-bottom: 15px; }
.cr-sett-label { font-size: 15px; font-weight: 600; color: var(--cr-meta); margin-bottom: 10px; display: block; }

/* Font grid */
.cr-font-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cr-font-opt {
    padding: 8px 10px; background: var(--cr-surface);
    border: 1.5px solid transparent; border-radius: 8px;
    cursor: pointer; text-align: center; font-size: 14px;
    color: var(--cr-text); font-weight: 600; transition: 0.2s;
}
.cr-font-opt.active { background: transparent; border-color: var(--nxp-primary); color: var(--nxp-primary); }

/* Render specific options in their actual font families */
.cr-font-opt[data-font*="'Open Sans'"] { font-family: 'Open Sans', sans-serif; }
.cr-font-opt[data-font*="'Lora'"] { font-family: 'Lora', serif; }
.cr-font-opt[data-font*="'Merriweather'"] { font-family: 'Merriweather', serif; }
.cr-font-opt[data-font*="'Source Serif 4'"] { font-family: 'Source Serif 4', serif; }
.cr-font-opt[data-font*="'Inter'"] { font-family: 'Inter', sans-serif; }
.cr-font-opt[data-font*="'Lexend'"] { font-family: 'Lexend', sans-serif; }

/* Size / LH controls */
.cr-ctrl-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cr-ctrl-label { font-size: 14px; color: var(--cr-text); }
.cr-ctrl-actions { display: flex; align-items: center; gap: 12px; }
.cr-ctrl-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--cr-border); background: var(--cr-surface); color: var(--cr-text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: 0.2s; }
.cr-ctrl-val { font-size: 15px; font-weight: 700; min-width: 28px; text-align: center; color: var(--cr-text); }
/* Theme picker — circle + centered dot, mirroring the site header's theme
   swatches. The circle background, border color, and dot color are HARDCODED
   per option inline (so they preview the theme and never inherit the active
   theme's vars). The dot is ::before with background:currentColor, i.e. it
   picks up each option's inline `color`. */
.cr-theme-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 4px; }
.cr-theme-circle {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid;                 /* color set inline per theme */
    cursor: pointer;
    transition: transform 0.15s ease;
}
.cr-theme-circle::before {             /* the dot */
    content: "";
    position: absolute; top: 50%; left: 50%;
    width: 40%; height: 40%;
    border-radius: 50%;
    background: currentColor;          /* = each option's inline color */
    transform: translate(-50%, -50%);
}
/* Selected: accent check badge on the edge (border stays the theme color) */
.cr-theme-circle.active::after {
    content: "";
    position: absolute; top: -3px; right: -3px;
    width: 15px; height: 15px; border-radius: 50%;
    background-color: var(--nxp-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 9px; background-repeat: no-repeat; background-position: center;
    border: 2px solid var(--cr-bg);    /* ring so the badge reads on any circle */
}
.cr-contrast-row { display: flex; gap: 7px; }
.cr-contrast-pill { flex: 1; padding: 5px 7px; background: var(--cr-surface); border: 1px solid var(--cr-border); border-radius: 99px; text-align: center; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--cr-text); transition: 0.2s; }
.cr-contrast-pill.active { background: var(--nxp-primary); color: #fff; border-color: var(--nxp-primary); }
.cr-reset-btn { width: 100%; padding: 10px; background: transparent; border: 1.5px solid var(--nxp-primary); color: var(--nxp-primary); border-radius: 25px; font-weight: 700; font-size: 14px; cursor: pointer; transition: 0.2s; }
.cr-reset-btn:hover { background: var(--nxp-primary); color: #fff; }

/* Button Loading Spinner */
@keyframes nxpBtnSpin { 100% { transform: rotate(360deg); } }

@media (max-width: 600px) {
    .nxp-cr-novel-title { max-width: 260px; font-size: 16px; }
    .nxp-cr-thumb { 
        width: 28px; 
        height: 38px;
    } /* fits mobile --header-height 56px */
    .nxp-cr-settings-popover { width: 280px; right: 10px; left: auto; bottom: 55px; padding: 16px; }
    .nxp-cr-container { padding: 20px 16px 130px; }
}

@media (max-width: 480px) {
    .nxp-redesign-lockbox { padding: 48px 16px 24px; margin: 44px auto 20px; border-radius: 20px; }
    .nxp-lb-icon-wrap { width: 85px; height: 85px; font-size: 32px; }
    /* Slightly taller cap on small screens so the coin/patreon panels never
       clip when the Cost/Balance chips wrap. */
    .v1-panels-container { height: 165px; }
    .nxp-tab-btn { padding: 8px 6px; font-size: 0.76rem; }
    .nxp-lb-info-row { gap: 1px; }
    .nxp-lb-info-chip { padding: 6px 10px; gap: 6px; border-radius: 10px; }
    .nxp-lb-chip-icon { width: 32px; height: 32px; font-size: 12px; }
    .nxp-lb-info-chip__label { font-size: 0.55rem; letter-spacing: 0.04em; }
    .nxp-lb-info-chip__val { font-size: 0.85rem; }
}

button#nxpBookmarkBtn {
    margin-right: 10px;
}

/* ── Modern CSS Loader ── */
.nxp-modern-loader {
    width: 36px;
    height: 36px;
    border: 3px solid var(--cr-border);
    border-bottom-color: var(--nxp-primary);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: nxpRotation 0.8s linear infinite;
    margin-bottom: 12px;
}
@keyframes nxpRotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.nxp-loader-wrap {
    padding: 50px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--cr-meta);
    opacity: 0;
    animation: nxpFadeIn 0.3s ease forwards;
}
.nxp-loader-text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
@keyframes nxpFadeIn {
    to { opacity: 1; }
}