/* =========================================================
   Bunnybookery — "Blush"
   A single warm-white theme (no dark mode): white surfaces, rose
   pink for every accent — actions/likes, coins/ratings/signature
   elements included; no gold or yellow anywhere in the palette.
   Signature devices: a folded page-corner on every
   cover, a hairline gradient "spine" rule under cards and section
   headings, and a drop cap opening every chapter. Admin panel is
   untouched — see .admin-page-container override block below,
   which pins the admin area back to its original dark palette and
   type regardless of anything set here.
   ========================================================= */


:root {
    /* Ink & surfaces — a single warm white theme (pink only,
       no gold/yellow), no separate dark mode. */
    --dark: #2E1B24;
    --bg: #FFFFFF;
    --card-bg: #FFFFFF;
    --card-bg-2: #FBEEF3;
    --border: #F2D6E0;

    /* Text */
    --text: #2E1B24;
    --muted: #9B7C89;

    /* Accents */
    --primary: #E85C8A;   /* rose pink — CTAs, likes, premium */
    --gold: #E85C8A;      /* same rose pink — coins, ratings, signature (kept as its own variable name for compatibility with existing rules, but no longer gold) */
    --on-accent: #2E1B24; /* ink used on top of accent fills */
    --success-text: #3F7D4F;
    --success-bg: rgba(63, 125, 79, 0.12);
    --error-text: #A23B2E;
    --error-bg: rgba(162, 59, 46, 0.10);

    /* Type */
    --font-display: 'Newsreader', Georgia, serif;
    --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Admin panel — compact, data-dense design tokens (unchanged) */
    --admin-radius: 8px;
    --admin-radius-sm: 5px;
    --admin-gap: 10px;
    --admin-pad-x: 10px;
    --admin-pad-y: 7px;
    --admin-font-size: 12.5px;
    --admin-shadow: 0 1px 2px rgba(0,0,0,0.25);
    --admin-shadow-raised: 0 4px 16px rgba(0,0,0,0.35);
}

/* ---------------------------------------------------------
   Admin area lock-in — the admin/author panel keeps its exact
   original palette and fonts no matter what the tokens above
   become, because every admin-* rule (further down, verbatim
   and untouched) reads its colors from these same var() names.
   Scoping the OLD values here, on the one container class every
   admin page already renders inside, means the whole admin UI
   inherits its old look automatically — nothing in the admin
   section of this file needed to change at all.
   --------------------------------------------------------- */
.admin-page-container {
    --dark: #15121F;
    --bg: #1B1730;
    --card-bg: #241F3B;
    --card-bg-2: #2C2648;
    --border: #362F52;
    --text: #F1ECE4;
    --muted: #A79FC0;
    --primary: #E8607C;
    --gold: #E8607C;
    --success-text: #6FC495;
    --success-bg: rgba(111, 196, 149, 0.14);
    --error-text: #FF8A93;
    --error-bg: rgba(232, 96, 107, 0.14);
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


* { box-sizing: border-box; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

html { width: 100%; background: var(--bg); }

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    width: 100%;
}

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

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}
.admin-page-container { max-width: none; }
main.admin-page-container { padding: 0; }

h1 { font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: 0.1px; }
h2 { font-family: var(--font-display); font-weight: 600; font-size: 23px; }
main { min-height: 70vh; padding: 36px 0; }

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.sitewide-banner {
    background: var(--gold);
    color: var(--on-accent);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 9px 20px;
}
.sitewide-banner-inner { max-width: 1120px; margin: 0 auto; }

.site-header {
    /* No backdrop-filter here on purpose — it (like `filter`)
       creates a new CSS containing block for any position:fixed
       descendant, which was trapping the full-screen mobile menu
       drawer inside the header's own box instead of covering the
       viewport. Removing it fixes that; the header stays
       effectively opaque anyway at this alpha value. */
    background: rgba(255, 255, 255, 0.98);
    color: var(--text);
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(46,27,36,0.06);
}
.site-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(232,92,138,0.6), rgba(232,92,138,0.6), transparent);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 1120px;
    margin: 0 auto;
}
#theme-mode-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
#theme-mode-toggle:hover { border-color: var(--gold); transform: rotate(-14deg); }

.logo {
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 700;
    font-style: italic;
    color: var(--gold);
    text-decoration: none;
    letter-spacing: 0.2px;
    flex-shrink: 0;
    position: relative;
    padding-bottom: 2px;
}
.logo-img { max-height: 40px; display: block; }
.site-header nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.site-header nav .nav-primary-link { display: none; }
.site-header nav .mobile-nav-2col { display: none; }
/* The drawer's own close button — same pattern as .nav-primary-link
   above: this markup is shared between the desktop inline nav and
   the mobile slide-in drawer, but the close (×) button only makes
   sense once that drawer is a full-screen overlay, so it stays
   hidden here and is switched back on inside the mobile media query
   below. */
.nav-close-btn { display: none; }
.site-header-row2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 9px 20px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.site-header-row2 a { color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 600; transition: color 0.15s ease; position: relative; }
.site-header-row2 a:hover { color: var(--gold); }
.site-header nav a {
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.15s ease;
    position: relative;
    padding-bottom: 3px;
}
.site-header nav a:not(.nav-btn):not(.username):not(.coins)::after,
.site-header-row2 a::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: -1px;
    height: 2px;
    background: var(--gold);
    transition: right 0.18s ease;
}
.site-header nav a:not(.nav-btn):not(.username):not(.coins):hover::after,
.site-header-row2 a:hover::after { right: 0; }
.site-header nav a:hover { color: var(--gold); }
.coins { color: var(--gold) !important; font-weight: 700; font-size: 14px; text-decoration: none; }
.online-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(111,176,126,0.14);
    border: 1px solid rgba(111,176,126,0.35);
    color: var(--success-text) !important;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none;
    transition: border-color 0.15s ease;
}
.online-count-badge:hover { border-color: var(--success-text); }
.username { color: var(--text) !important; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.header-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--gold); }

.nav-btn {
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #fff !important;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.nav-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.nav-btn-login, .nav-btn-logout { background: var(--primary); }
.nav-btn-login:hover, .nav-btn-logout:hover { box-shadow: 0 4px 14px rgba(232,92,138,0.35); }

/* "Novel Categories" hover/click dropdown in the header — reuses
   the same shared class names the old generic "More" menu used. */
.nav-more-dropdown { position: relative; }
.nav-more-toggle {
    background: none; border: 1px solid var(--border); border-radius: 999px;
    color: var(--text); font-family: var(--font-body); font-size: 14px; font-weight: 600;
    padding: 7px 15px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease;
}
.nav-more-toggle:hover { border-color: var(--gold); color: var(--gold); }
.nav-more-menu {
    display: none;
    position: absolute; top: calc(100% + 10px); right: 0;
    background: #fff; border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 14px 34px rgba(46,27,36,0.22);
    min-width: 190px; padding: 8px; z-index: 60;
    flex-direction: column; gap: 2px;
}
.nav-more-menu.open, .nav-more-dropdown:hover .nav-more-menu { display: flex; }
.nav-more-menu a {
    color: #2E1B24 !important; text-decoration: none; font-size: 14px; font-weight: 600;
    padding: 10px 12px; border-radius: 8px; transition: background 0.15s ease, color 0.15s ease;
}
.nav-more-menu a::after { display: none !important; content: none !important; }
.nav-more-menu a:hover { background: #FBEEF3; color: var(--primary) !important; }
@media (max-width: 780px) { .nav-more-dropdown { display: none; } }

/* Shared pill-style header links (Advanced Search, Coins and
   Subscriptions) — sit directly in the header on desktop; hidden on
   mobile since the same links already appear in the full-width menu
   drawer there. */
.header-advanced-search-link {
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
    color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 600;
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.header-advanced-search-link:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 780px) { .header-advanced-search-link { display: none; } }

/* ---------------------------------------------------------
   Hero banner — auto-advancing, moving image slider using
   trending novel covers, replacing the old text hero.
   --------------------------------------------------------- */
.hero-banner {
    position: relative;
    height: 380px;
    border-radius: 20px;
    overflow: hidden;
    margin: 18px 0 8px;
    box-shadow: 0 14px 34px rgba(46,27,36,0.18);
}
.hero-banner-track { position: relative; width: 100%; height: 100%; }
.hero-banner-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--card-bg-2);
    opacity: 0;
    transition: opacity 0.9s ease;
}
.hero-banner-slide.active { opacity: 1; }
.hero-banner-scrim {
    position: absolute; left: 0; right: 0; bottom: 0; top: 40%;
    background: linear-gradient(180deg, transparent, rgba(46,27,36,0.85) 80%);
    display: flex; align-items: flex-end;
    padding: 26px;
}
.hero-banner-info h2 { font-family: var(--font-display); font-size: 26px; color: #fff; margin-bottom: 12px; max-width: 70%; }
.hero-banner-dots { position: absolute; bottom: 16px; right: 20px; display: flex; gap: 7px; z-index: 2; }
.hero-banner-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,0.5); cursor: pointer; padding: 0; transition: background 0.15s ease, transform 0.15s ease; }
.hero-banner-dot.active { background: #fff; transform: scale(1.25); }
@media (max-width: 640px) {
    .hero-banner { height: 260px; border-radius: 16px; }
    .hero-banner-info h2 { font-size: 19px; max-width: 100%; }
}


/* ---------------------------------------------------------
   Cover gallery — a horizontal, image-forward showcase distinct
   from the standard grid cards: big cover art, title/meta on a
   bottom scrim, no surrounding card chrome.
   --------------------------------------------------------- */
.cover-gallery-section { margin-top: 40px; }
.cover-gallery {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding: 6px 2px 14px;
    scroll-snap-type: x proximity;
}
.cover-gallery::-webkit-scrollbar { height: 6px; }
.cover-gallery::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.cover-gallery-item {
    position: relative;
    flex: 0 0 160px;
    aspect-ratio: 2/3;
    border-radius: 14px;
    overflow: hidden;
    display: block;
    scroll-snap-align: start;
    box-shadow: 0 8px 22px rgba(46,27,36,0.3);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.cover-gallery-item:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(232,92,138,0.28); }
.cover-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.cover-gallery-item:hover img { transform: scale(1.08); }
.cover-gallery-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px;
    background: linear-gradient(135deg, var(--primary), #8A2E52);
    color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 15px;
}
.cover-gallery-scrim {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 30px 12px 12px;
    background: linear-gradient(180deg, transparent, rgba(46,27,36,0.92));
    color: #fff;
}
.cover-gallery-title { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; line-height: 1.3; margin-bottom: 3px; }
.cover-gallery-meta { font-size: 11px; color: #E4D4BE; }
@media (max-width: 640px) { .cover-gallery-item { flex-basis: 130px; } }

/* ---------------------------------------------------------
   Novel grid + card (signature: page-fold corner + gradient
   spine bar under every cover)
   --------------------------------------------------------- */
.novel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 22px;
    margin-top: 22px;
}
@media (max-width: 780px) {
    .more-like-this-grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 14px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    .more-like-this-grid .novel-card {
        flex: 0 0 auto;
        width: 130px;
        scroll-snap-align: start;
    }
}
.novel-list-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 8px;
    transition: border-color 0.15s ease;
}
.novel-list-row:hover { border-color: var(--gold); }
.novel-list-thumb {
    width: 50px;
    height: 66px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.novel-list-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg-2);
    color: var(--muted);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
}
.novel-list-info { flex: 1; min-width: 180px; }
.novel-list-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.novel-card {
    position: relative;
    background: var(--card-bg);
    border-radius: 16px 16px 6px 6px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(46,27,36,0.3);
    text-decoration: none;
    color: var(--text);
    display: block;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    border: 1px solid var(--border);
    padding: 3px 3px 0;
}
.novel-card::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--gold));
    z-index: 3;
}
.novel-card:hover {
    transform: translateY(-6px) rotate(-0.6deg);
    box-shadow: 0 18px 34px rgba(232,92,138,0.24);
}
.novel-card:nth-child(even):hover { transform: translateY(-6px) rotate(0.6deg); }
.novel-cover-wrap {
    position: relative;
    display: block;
    align-self: flex-start;
    border-radius: 13px 13px 3px 3px;
    overflow: hidden;
}
.novel-cover-wrap img.novel-cover { transition: transform 0.3s ease; }
.novel-card:hover .novel-cover-wrap img.novel-cover { transform: scale(1.05); }
.novel-cover-watermark {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 15%;
    max-width: 46px;
    min-width: 22px;
    aspect-ratio: 1 / 1;
    background-image: var(--site-logo-url, none);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    pointer-events: none;
    z-index: 2;
}
.novel-cover {
    position: relative;
    width: 100%;
    height: auto;
    background: linear-gradient(135deg, var(--primary), #8A2E52);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    padding: 2px;
}
img.novel-cover { display: block; }
div.novel-cover { aspect-ratio: 1/1; }
/* folded page-corner — the signature device */
.novel-cover::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 24px 24px 0;
    border-color: transparent rgba(243,231,214,0.85) transparent transparent;
    filter: drop-shadow(-2px 2px 3px rgba(46,27,36,0.35));
}
.novel-info { padding: 13px 14px 14px; }
.novel-title { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; margin-bottom: 4px; line-height: 1.3; }
.novel-meta { font-size: 12px; color: var(--muted); }

/* "List wise" homepage category sections — a grid of horizontal
   rows on desktop (3 columns x 2 rows for the usual 6-novel
   section), collapsing to a single stacked column on mobile;
   alternates with the grid-of-cards ("column wise") layout above.
   Cover width matches every other gallery/grid on the site (160px
   desktop / 130px mobile) so novel covers read as one consistent
   size everywhere, not just within this one layout. */
.home-novel-list { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.home-novel-list-row {
    display: flex;
    gap: 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.home-novel-list-row:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(232,92,138,0.18); border-color: var(--primary); }
.home-novel-list-row .novel-cover, .home-novel-list-row .novel-cover-wrap { flex: 0 0 160px; width: 160px; aspect-ratio: 2/3; border-radius: 10px; height: auto; }
/* The row's own default align-items:stretch already makes this
   column exactly as tall as the cover beside it — flexing it into a
   column, and letting the synopsis grow to fill whatever's left
   after the title/meta/badges, means the amount of synopsis shown
   is always however much actually fits within that cover's height,
   on any screen size, without separate line-clamp numbers tuned per
   breakpoint. */
.home-novel-list-row .novel-info { padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.home-novel-list-row .novel-title { font-size: 16px; }
.home-novel-list-row .card-synopsis {
    flex: 1;
    min-height: 0;
    margin-top: 8px;
    -webkit-line-clamp: 20;
    overflow: hidden;
}
@media (min-width: 781px) {
    .home-novel-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (max-width: 560px) {
    .home-novel-list-row { gap: 12px; padding: 10px; }
    .home-novel-list-row .novel-cover, .home-novel-list-row .novel-cover-wrap { flex-basis: 130px; width: 130px; }
    .home-novel-list-row .novel-title { font-size: 14px; }
}
.chapter-breadcrumb { font-size: 14px; }
.chapter-back-to-novel { font-size: 14px; }
.chapter-back-to-novel a { display: inline-block; padding: 2px 0; }
@media (max-width: 780px) {
    .chapter-back-to-novel { font-size: 16px; }
}

/* ---------------------------------------------------------
   Categories
   --------------------------------------------------------- */
.category-btn-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.category-btn {
    background: var(--card-bg);
    border: 2px solid var(--border);
    padding: 12px 26px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.category-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(232,92,138,0.2);
}
.category-btn-all, .category-btn-all:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #FFF6EA;
}
.category-btn-all:hover { filter: brightness(1.08); }
.category-btn-all.category-btn-active { box-shadow: 0 0 0 3px rgba(232,92,138,0.3); }

/* Homepage-only wrappers for the category section (top of page) and
   the tag cloud (bottom, before the footer) — both reuse existing
   button/pill component styles, just within their own section
   spacing on this one page. */
.home-categories-section { margin-top: 28px; }
.home-tags-section { margin-top: 48px; margin-bottom: 12px; }
.home-tags-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.home-tag-pill {
    font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none;
    background: var(--card-bg); border: 1px solid var(--border);
    padding: 8px 16px; border-radius: 999px;
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.home-tag-pill:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-2px); }

/* ---------------------------------------------------------
   Forms & cards
   --------------------------------------------------------- */
.form-card {
    max-width: 430px;
    margin: 40px auto;
    background: var(--card-bg);
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(46,27,36,0.28);
    border: 1px solid var(--border);
    border-top: 3px solid var(--primary);
    animation: formCardRise 0.3s ease both;
}
.account-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}
.account-stats-grid .form-card { max-width: none; margin: 0; }
@media (max-width: 780px) { .account-stats-grid { grid-template-columns: 1fr; } }

.add-novel-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 800px) { .add-novel-grid { grid-template-columns: 1fr; } }
@keyframes formCardRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.form-card h1 { font-size: 25px; margin-bottom: 22px; }
.form-group { margin-bottom: 17px; }
.form-group label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; color: var(--muted); }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    background: #FBF3E4;
    color: #241A10;
    font-family: var(--font-body);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(232,92,138,0.18);
}
/* The base rule above is hardcoded cream-on-dark-brown for the
   public site's own forms (login, register, reviews, etc.) — admin
   and author pages use the same .form-group class throughout their
   own forms (novels, chapters, categories, users, settings...), so
   this keeps those fields on the same dark palette as everything
   else in the panel instead of showing a jarring light patch. */
body.admin-page-container .form-group input,
body.admin-page-container .form-group select,
body.admin-page-container .form-group textarea {
    background: var(--card-bg);
    color: var(--text);
}
/* Same reasoning as .form-group above — .toolbar-btn and
   .modal-search are shared with the public chapter-reading page
   (which wants its own warm cream look there), but admin and
   author pages reuse both for their own search boxes and action
   buttons (gallery, chapter management, etc.). */
body.admin-page-container .toolbar-btn {
    background: var(--card-bg-2);
    border-color: var(--border);
    color: var(--text);
}
body.admin-page-container .toolbar-btn:hover { background: var(--border); }
body.admin-page-container .modal-search {
    background: var(--card-bg);
    color: var(--text);
}
.btn {
    display: inline-block;
    background: var(--primary);
    color: #FFF6EA;
    border: none;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
    font-family: var(--font-body);
    box-shadow: 0 4px 14px rgba(232,92,138,0.25);
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(232,92,138,0.35); }
.btn:active { transform: translateY(0); }
.error-box {
    background: var(--error-bg);
    color: var(--error-text);
    padding: 11px 15px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 16px;
    border: 1px solid rgba(224,135,118,0.3);
}
.success-box {
    background: var(--success-bg);
    color: var(--success-text);
    padding: 11px 15px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 16px;
    border: 1px solid rgba(111,176,126,0.3);
}

/* ---------------------------------------------------------
   Wallet & Subscription page
   --------------------------------------------------------- */
.wallet-summary-card {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(232,92,138,0.16), rgba(232,92,138,0.1));
    border: 1px solid rgba(232,92,138,0.3);
    border-radius: 14px;
    padding: 22px 24px;
    margin-top: 16px;
}
.wallet-summary-item { flex: 1; min-width: 180px; }
.wallet-summary-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); margin-bottom: 6px; }
.wallet-summary-value { font-family: var(--font-display); font-size: 23px; font-weight: 700; color: var(--gold); }
.wallet-summary-unit { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 6px; }

/* ---------------------------------------------------------
   Pricing page
   --------------------------------------------------------- */
.pricing-intro-box {
    background: linear-gradient(135deg, rgba(232,92,138,0.16), rgba(232,92,138,0.1));
    border: 1px solid rgba(232,92,138,0.3);
    border-radius: 14px;
    padding: 17px 20px;
    margin-top: 16px;
}
.pricing-intro-box p { font-size: 14.5px; line-height: 1.6; margin: 0; }
.pricing-intro-box a { color: var(--gold); font-weight: 600; }

.pricing-cta-section {
    margin-top: 40px;
    padding: 30px 20px;
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.pricing-cta-section p { font-size: 15px; color: var(--muted); margin-bottom: 14px; }
.pricing-cta-section .btn { display: inline-block; }

.already-subscribed-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--success-bg);
    border: 1px solid rgba(111,176,126,0.3);
    border-radius: 14px;
    padding: 19px 20px;
}
.already-subscribed-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--success-text);
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
}
.already-subscribed-box strong:first-child { display: block; font-size: 15px; margin-bottom: 4px; color: var(--success-text); }
.already-subscribed-box p { font-size: 13.5px; color: var(--text); line-height: 1.6; margin: 0; }

/* ---------------------------------------------------------
   Novel detail
   --------------------------------------------------------- */
.novel-detail {
    display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 32px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px;
    position: relative;
    overflow: hidden;
}
.novel-detail::before {
    content: '';
    position: absolute; top: -40%; left: -10%;
    width: 340px; height: 340px;
    background: radial-gradient(circle, rgba(232,92,138,0.14), transparent 70%);
    pointer-events: none;
}
.novel-detail .novel-cover { width: 260px; border-radius: 12px; box-shadow: 0 14px 30px rgba(46,27,36,0.35); }
.novel-detail-info { flex: 1; min-width: 260px; position: relative; }
.novel-detail-info h1 { font-size: 29px; margin-bottom: 10px; }
.novel-chapters-toolbar {
    background: var(--card-bg-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
}
.chapter-list li:nth-child(even) { background: var(--card-bg-2); }
@media (max-width: 640px) { .novel-detail { padding: 20px 16px; border-radius: 16px; } }
.chapter-list { list-style: none; margin-top: 20px; }
.chapter-list-fixed-area {
    max-height: 620px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card-bg);
    padding: 10px;
}
.chapter-list-fixed-area::-webkit-scrollbar { width: 8px; }
.chapter-list-fixed-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.chapter-list-fixed-area::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.chapter-list li {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 8px;
}
.chapter-list a:hover { color: var(--gold); }
.lock {
    display: inline-block;
    color: var(--on-accent);
    background: var(--gold);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 11px;
    border-radius: 999px;
    position: relative;
    white-space: nowrap;
    margin-left: 8px;
}
.free-badge {
    display: inline-block;
    color: var(--success-text);
    background: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
    white-space: nowrap;
    margin-left: 8px;
}
.listen-icon { padding: 0 14px; font-size: 16px; text-decoration: none; flex-shrink: 0; transition: transform 0.15s ease; }
.listen-icon:hover { transform: scale(1.15); }

/* ---------------------------------------------------------
   Chapter reader
   --------------------------------------------------------- */
.reader-box {
    background: #FBF3E4;
    color: #2A1D10;
    padding: 38px;
    border-radius: 16px;
    max-width: 100%;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.9;
    box-shadow: 0 6px 24px rgba(46,27,36,0.25);
}
.reader-box h1 { font-size: 24px; margin-bottom: 22px; color: #2A1D10; }
.chapter-ad-slot { margin: 20px 0; text-align: center; overflow: hidden; }
#reader-content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
}
#reader-content img, #reader-content video, #reader-content iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 16px auto;
    border-radius: 8px;
}
#reader-content table { max-width: 100%; display: block; overflow-x: auto; }
#reader-content p { margin-bottom: 1.15em; }
#reader-content p:last-child { margin-bottom: 0; }
/* Drop cap on the opening paragraph — a small literary signature
   that costs nothing structurally since it only needs the
   content that's already there. */
#reader-content > p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-size: 3.4em;
    font-weight: 700;
    float: left;
    line-height: 0.8;
    padding: 0.06em 0.08em 0 0;
    color: var(--primary);
}

.rich-content { line-height: 1.8; }
.rich-content h1, .rich-content h2, .rich-content h3,
.rich-content h4, .rich-content h5, .rich-content h6 {
    font-family: var(--font-display);
    margin: 1.2em 0 0.5em;
    line-height: 1.3;
    color: var(--text);
}
.rich-content h1 { font-size: 27px; }
.rich-content h2 { font-size: 22px; }
.rich-content h3 { font-size: 19px; }
.rich-content h4, .rich-content h5, .rich-content h6 { font-size: 16px; }
.rich-content p { margin-bottom: 1em; }
.rich-content p:last-child { margin-bottom: 0; }
.rich-content ul, .rich-content ol { margin: 0 0 1em; padding-left: 1.6em; }
.rich-content li { margin-bottom: 0.4em; }
.rich-content a { color: var(--gold); text-decoration: underline; }
.rich-content a:hover { color: var(--primary); }
.rich-content blockquote {
    margin: 1em 0;
    padding: 10px 18px;
    border-left: 3px solid var(--gold);
    background: var(--card-bg-2);
    color: var(--muted);
    font-style: italic;
}
.rich-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 0.8em 0; display: block; }
.rich-content table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.rich-content table td, .rich-content table th {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
}
.rich-content table th { background: var(--card-bg-2); font-weight: 700; }
.rich-content strong { font-weight: 700; }
.rich-content em { font-style: italic; }
.reader-box .novel-meta a { color: var(--primary); text-decoration: none; }
.reader-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 32px;
}
.reader-nav .btn, .reader-nav .toolbar-btn {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The "no next chapter yet" status text (coming soon / novel
   completed) runs longer than a normal nav label — let it wrap
   instead of truncating with an ellipsis like the short Prev/Next
   labels do. */
.reader-nav .toolbar-btn-disabled {
    white-space: normal;
    line-height: 1.3;
    font-size: 12.5px;
    padding-top: 10px;
    padding-bottom: 10px;
}
@media (max-width: 480px) {
    .reader-nav { gap: 6px; }
    .reader-nav .btn, .reader-nav .toolbar-btn { font-size: 12.5px; padding-left: 8px; padding-right: 8px; }
}

/* Like/Bookmark/Report — its own row right below the Prev/Chapter
   List/Next row at the end of the chapter. */
.chapter-action-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* Sticky bottom bar — Chapter List, Settings, and Comments, pinned
   to the bottom of the viewport at all times on every device, so
   they stay one tap away no matter how far into the chapter the
   reader has scrolled. Page content gets bottom padding equal to
   the bar's own height so the last lines of a chapter (and the
   Prev/Next/action rows) are never hidden underneath it. */
.reader-sticky-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 14px rgba(46,27,36,0.15);
    padding: 10px max(10px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
}
.reader-sticky-bar .toolbar-btn {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.chapter-reading-page { padding-bottom: 64px; }
@media (max-width: 480px) {
    .reader-sticky-bar .toolbar-btn { font-size: 12px; padding-left: 6px; padding-right: 6px; }
}

@media (max-width: 780px) {
    body.chapter-reading-page #main-content.container { max-width: none; padding: 0; margin: 0; }
    body.chapter-reading-page .chapter-breadcrumb,
    body.chapter-reading-page #main-content > .error-box {
        padding-left: 20px;
        padding-right: 20px;
    }
    body.chapter-reading-page .reader-box { border-radius: 0; }
}
.toolbar-btn {
    background: #F0E4CB;
    border: 1px solid #DCC49B;
    padding: 9px 15px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    color: #2A1D10;
    font-family: var(--font-body);
    font-weight: 600;
    transition: background 0.15s ease;
}
.toolbar-btn:hover { background: #E7D6AF; }
.toolbar-btn-disabled { opacity: 0.3; pointer-events: none; }
.toolbar-btn-label { margin-left: 5px; }

/* Locked chapter panel — a distinct raised card (not just a
   gradient fade) so it reads as a deliberate moment, not a fizzle
   at the bottom of the reading box. */
.lock-panel {
    margin: 24px 20px 10px;
    padding: 38px 22px;
    text-align: center;
    background: #F8F0DD;
    border: 1px solid #DCC49B;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(46,27,36,0.14);
    position: relative;
    overflow: hidden;
}
.lock-panel::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--gold));
}
.lock-icon {
    font-size: 26px;
    width: 58px;
    height: 58px;
    line-height: 58px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    margin: 0 auto 14px;
    box-shadow: 0 6px 18px rgba(232,92,138,0.4);
}
.lock-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 6px; color: #2A1D10; }
.lock-sub { font-size: 14px; color: #8A7457; max-width: 420px; margin: 0 auto 18px; }
.lock-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-outline { background: transparent; border: 1.5px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }

/* ---------------------------------------------------------
   Batched import progress bar
   --------------------------------------------------------- */
.import-progress-bar-track { width: 100%; height: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.import-progress-bar-fill { height: 100%; background: var(--gold); transition: width 0.2s ease; }

/* Reading themes (user-selected — independent of site chrome).
   Kept as their own deliberate, already-tuned reading-comfort
   palette (12 total: Light/Dark/Gray/Sepia/Night/Forest/Cream/
   Rose/Mint/Ocean/Charcoal/Lavender) rather than re-colored to the
   brand — a reader picks these for eye comfort during long
   sessions, not for brand consistency. Only the chrome around them
   (toolbar buttons, lock panel) is refreshed to the new
   shapes/fonts above. */
body.chapter-reading-page.theme-dark { --bg: #1e1e2b; --text: #e4e4ef; --card-bg: #17171f; --card-bg-2: #2a2a3a; --border: #333; --muted: #a79fc0; }
body.chapter-reading-page.theme-gray { --bg: #eef0f2; --text: #333; --card-bg: #dfe3e6; --card-bg-2: #e5e8ea; --border: #c8ccd0; --muted: #5a5f66; }
body.chapter-reading-page.theme-sepia { --bg: #f4ecd8; --text: #5b4636; --card-bg: #ebe0c4; --card-bg-2: #efe6d0; --border: #d9c9a3; --muted: #7a6551; }
body.chapter-reading-page.theme-night { --bg: #000000; --text: #cfcfd6; --card-bg: #141414; --card-bg-2: #0a0a0a; --border: #2a2a2a; --muted: #8a8a94; }
body.chapter-reading-page.theme-forest { --bg: #e9f0e6; --text: #33402f; --card-bg: #dde8d8; --card-bg-2: #e3ecdf; --border: #c3d4bc; --muted: #5a6b54; }
body.chapter-reading-page.theme-cream { --bg: #fbf8f1; --text: #4a4238; --card-bg: #f5f0e3; --card-bg-2: #f9f5ea; --border: #e8dfc8; --muted: #8a7f68; }
body.chapter-reading-page.theme-rose { --bg: #fdf0f3; --text: #4a2a35; --card-bg: #f9e4ea; --card-bg-2: #fceaef; --border: #f0c9d4; --muted: #9c6b78; }
body.chapter-reading-page.theme-mint { --bg: #edf7f0; --text: #2e4a38; --card-bg: #dff0e4; --card-bg-2: #e6f4ea; --border: #c3dfc9; --muted: #5f8268; }
body.chapter-reading-page.theme-ocean { --bg: #eaf1f7; --text: #263745; --card-bg: #dce9f2; --card-bg-2: #e3edf5; --border: #bfd4e3; --muted: #5a7286; }
body.chapter-reading-page.theme-charcoal { --bg: #2b2b2e; --text: #dadadc; --card-bg: #232326; --card-bg-2: #1d1d20; --border: #3a3a3d; --muted: #8f8f94; }
body.chapter-reading-page.theme-lavender { --bg: #f3eff9; --text: #3e3450; --card-bg: #e9e1f4; --card-bg-2: #eee7f7; --border: #d4c5ea; --muted: #7c6d93; }

/* The reading theme above is scoped to <body>, so its overridden
   --bg/--text/etc. would otherwise cascade down into the site
   header and footer too, since they're still descendants of that
   same <body> — e.g. Night's near-white --text sitting on the
   header's own hardcoded white background would go almost
   invisible. Resetting the variables back to their normal site
   defaults here, scoped to the header/footer specifically, keeps
   both looking exactly the same regardless of which reading theme
   is active — only the reading area itself (.reader-box and what's
   inside it) is meant to change. */
body.chapter-reading-page .site-header,
body.chapter-reading-page .site-footer {
    --bg: #FFFFFF;
    --card-bg: #FFFFFF;
    --card-bg-2: #FBEEF3;
    --border: #F2D6E0;
    --text: #2E1B24;
    --muted: #9B7C89;
    --primary: #E85C8A;
    --gold: #E85C8A;
    --on-accent: #2E1B24;
}

.reader-box.theme-dark { background: #1e1e2b; color: #e4e4ef; }
.reader-box.theme-dark h1, .reader-box.theme-dark .lock-title { color: #e4e4ef; }
.reader-box.theme-dark .lock-panel { background: linear-gradient(180deg, rgba(30,30,43,0) 0%, #17171f 15%, #17171f 100%); border-color: #333; }
.reader-box.theme-dark .lock-sub { color: #a79fc0; }
.reader-box.theme-dark .toolbar-btn { background: #2a2a3a; border-color: #3a3a4a; color: #e4e4ef; }
.reader-box.theme-gray { background: #eef0f2; color: #333; }
.reader-box.theme-gray .toolbar-btn { background: #dfe3e6; border-color: #c8ccd0; color: #333; }
.reader-box.theme-sepia { background: #f4ecd8; color: #5b4636; }
.reader-box.theme-sepia h1, .reader-box.theme-sepia .lock-title { color: #4a3728; }
.reader-box.theme-sepia .lock-panel { background: linear-gradient(180deg, rgba(244,236,216,0) 0%, #f4ecd8 15%, #f4ecd8 100%); border-color: #d9c9a3; }
.reader-box.theme-sepia .lock-sub { color: #7a6551; }
.reader-box.theme-sepia .toolbar-btn { background: #ebe0c4; border-color: #d9c9a3; color: #5b4636; }
.reader-box.theme-night { background: #000000; color: #cfcfd6; }
.reader-box.theme-night h1, .reader-box.theme-night .lock-title { color: #e8e8ee; }
.reader-box.theme-night .lock-panel { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 15%, #000 100%); border-color: #2a2a2a; }
.reader-box.theme-night .lock-sub { color: #8a8a94; }
.reader-box.theme-night .toolbar-btn { background: #141414; border-color: #2a2a2a; color: #cfcfd6; }
.reader-box.theme-forest { background: #e9f0e6; color: #33402f; }
.reader-box.theme-forest h1, .reader-box.theme-forest .lock-title { color: #2a3527; }
.reader-box.theme-forest .lock-panel { background: linear-gradient(180deg, rgba(233,240,230,0) 0%, #e9f0e6 15%, #e9f0e6 100%); border-color: #c3d4bc; }
.reader-box.theme-forest .lock-sub { color: #5a6b54; }
.reader-box.theme-forest .toolbar-btn { background: #dde8d8; border-color: #c3d4bc; color: #33402f; }
.reader-box.theme-cream { background: #fbf8f1; color: #4a4238; }
.reader-box.theme-cream h1, .reader-box.theme-cream .lock-title { color: #3a3328; }
.reader-box.theme-cream .lock-panel { background: linear-gradient(180deg, rgba(251,248,241,0) 0%, #fbf8f1 15%, #fbf8f1 100%); border-color: #e8dfc8; }
.reader-box.theme-cream .lock-sub { color: #8a7f68; }
.reader-box.theme-cream .toolbar-btn { background: #f5f0e3; border-color: #e8dfc8; color: #4a4238; }
.reader-box.theme-rose { background: #fdf0f3; color: #4a2a35; }
.reader-box.theme-rose h1, .reader-box.theme-rose .lock-title { color: #3d1f29; }
.reader-box.theme-rose .lock-panel { background: linear-gradient(180deg, rgba(253,240,243,0) 0%, #fdf0f3 15%, #fdf0f3 100%); border-color: #f0c9d4; }
.reader-box.theme-rose .lock-sub { color: #9c6b78; }
.reader-box.theme-rose .toolbar-btn { background: #f9e4ea; border-color: #f0c9d4; color: #4a2a35; }
.reader-box.theme-mint { background: #edf7f0; color: #2e4a38; }
.reader-box.theme-mint h1, .reader-box.theme-mint .lock-title { color: #223a2b; }
.reader-box.theme-mint .lock-panel { background: linear-gradient(180deg, rgba(237,247,240,0) 0%, #edf7f0 15%, #edf7f0 100%); border-color: #c3dfc9; }
.reader-box.theme-mint .lock-sub { color: #5f8268; }
.reader-box.theme-mint .toolbar-btn { background: #dff0e4; border-color: #c3dfc9; color: #2e4a38; }
.reader-box.theme-ocean { background: #eaf1f7; color: #263745; }
.reader-box.theme-ocean h1, .reader-box.theme-ocean .lock-title { color: #1c2a35; }
.reader-box.theme-ocean .lock-panel { background: linear-gradient(180deg, rgba(234,241,247,0) 0%, #eaf1f7 15%, #eaf1f7 100%); border-color: #bfd4e3; }
.reader-box.theme-ocean .lock-sub { color: #5a7286; }
.reader-box.theme-ocean .toolbar-btn { background: #dce9f2; border-color: #bfd4e3; color: #263745; }
.reader-box.theme-charcoal { background: #2b2b2e; color: #dadadc; }
.reader-box.theme-charcoal h1, .reader-box.theme-charcoal .lock-title { color: #ececee; }
.reader-box.theme-charcoal .lock-panel { background: linear-gradient(180deg, rgba(43,43,46,0) 0%, #232326 15%, #232326 100%); border-color: #3a3a3d; }
.reader-box.theme-charcoal .lock-sub { color: #8f8f94; }
.reader-box.theme-charcoal .toolbar-btn { background: #232326; border-color: #3a3a3d; color: #dadadc; }
.reader-box.theme-lavender { background: #f3eff9; color: #3e3450; }
.reader-box.theme-lavender h1, .reader-box.theme-lavender .lock-title { color: #2f2740; }
.reader-box.theme-lavender .lock-panel { background: linear-gradient(180deg, rgba(243,239,249,0) 0%, #f3eff9 15%, #f3eff9 100%); border-color: #d4c5ea; }
.reader-box.theme-lavender .lock-sub { color: #7c6d93; }
.reader-box.theme-lavender .toolbar-btn { background: #e9e1f4; border-color: #d4c5ea; color: #3e3450; }

.reader-box.font-serif #reader-content { font-family: Georgia, 'Times New Roman', serif; }
.reader-box.font-sans #reader-content { font-family: Arial, Helvetica, sans-serif; }
.reader-box.font-georgia #reader-content { font-family: Georgia, serif; }
.reader-box.font-system #reader-content { font-family: var(--font-body); }

/* ---------------------------------------------------------
   Ratings, likes, favorites
   --------------------------------------------------------- */
.rating-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.stars { font-size: 21px; cursor: pointer; }
.stars .star { color: var(--border); transition: color 0.15s ease, transform 0.15s ease; display: inline-block; }
.stars .star.filled { color: var(--gold); }
.stars .star:hover { color: var(--gold); transform: scale(1.15); }
.action-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.action-btn {
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 10px 17px;
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.action-btn:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(232,92,138,0.16); }

.social-share-section { margin-top: 20px; max-width: 100%; }
.social-share-heading { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.social-share-icons { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.social-share-icon {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
    background: var(--card-bg); border: 1px solid var(--border); color: var(--text);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.social-share-icon span { line-height: 1; }
.social-share-icon:hover { background: var(--brand-color, var(--gold)); color: #fff; border-color: var(--brand-color, var(--gold)); transform: translateY(-2px); }
@media (max-width: 780px) { .social-share-icon { width: 42px; height: 42px; font-size: 14px; } }

.continue-reading-box {
    margin-top: 18px;
    padding: 17px 19px;
    background: linear-gradient(135deg, rgba(232,92,138,0.16), rgba(232,92,138,0.1));
    border: 1px solid rgba(232,92,138,0.3);
    border-radius: 14px;
    transition: border-color 0.2s ease;
}
.continue-reading-box .novel-meta { color: var(--gold); font-weight: 700; }
.continue-reading-box:hover { border-color: rgba(232,92,138,0.55); }

.novel-reading-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.novel-reading-buttons .btn { font-size: 13px; }

.upcoming-chapter-banner {
    margin: 14px 0 0;
    padding: 13px 17px;
    background: linear-gradient(135deg, rgba(232,92,138,0.16), rgba(232,92,138,0.1));
    border: 1px solid rgba(232,92,138,0.3);
    border-radius: 12px;
    font-size: 13.5px;
    color: var(--text);
}
.upcoming-chapter-banner #upcoming-chapter-countdown { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }

.ways-to-read-mobile { margin-top: 36px; }

.password-field { position: relative; display: flex; }
.password-field .pw-input { flex: 1; padding-right: 44px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 15px; padding: 4px 8px; }

/* ---------------------------------------------------------
   Modal (chapter list, reader settings)
   --------------------------------------------------------- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(46,27,36,0.78);
    backdrop-filter: blur(3px);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalFadeIn 0.15s ease;
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-overlay.open { display: flex; }
.modal-box {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(46,27,36,0.5);
    animation: modalRise 0.2s ease;
}
@keyframes modalRise { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 17px 20px; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-family: var(--font-display); font-size: 18px; }
#chapter-list-modal .modal-box { max-width: 760px; }

.homepage-popup-box {
    position: relative;
    background: linear-gradient(160deg, var(--card-bg) 0%, var(--dark) 100%);
    border: 1px solid var(--gold);
    border-radius: 20px;
    max-width: 420px;
    width: 100%;
    padding: 38px 30px 30px;
    text-align: center;
    box-shadow: 0 26px 70px rgba(46,27,36,0.55), 0 0 0 1px rgba(232,92,138,0.15);
    animation: modalRise 0.25s ease;
}
.homepage-popup-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px; transition: color 0.15s ease; }
.homepage-popup-close:hover { color: var(--gold); }
.homepage-popup-icon { font-size: 46px; margin-bottom: 12px; filter: drop-shadow(0 4px 12px rgba(232,92,138,0.4)); }
.homepage-popup-message { font-size: 15px; line-height: 1.7; color: var(--text); }
.homepage-popup-got-it { margin-top: 22px; padding: 11px 32px; border-radius: 999px; }
.modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--muted); line-height: 1; }
.modal-search { margin: 14px 20px 0; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; background: #FBF3E4; color: #241A10; transition: box-shadow 0.15s ease; }
.modal-search:focus { outline: none; box-shadow: 0 0 0 3px rgba(232,92,138,0.3); }

.gallery-picker-box { max-width: min(92vw, 1100px); max-height: 88vh; }
.gallery-picker-search-wrap { position: relative; margin: 14px 20px 0; }
.gallery-picker-search-wrap .gallery-picker-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: 0.6; pointer-events: none; }
.gallery-picker-search { margin: 0; width: 100%; padding: 12px 14px 12px 36px; font-size: 15px; }
.gallery-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 16px 20px; max-height: 65vh; overflow-y: auto; }
.gallery-picker-thumb { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--card-bg-2); transition: border-color 0.15s ease, transform 0.15s ease; display: flex; flex-direction: column; }
.gallery-picker-thumb:hover { border-color: var(--gold); transform: translateY(-2px); }
.gallery-picker-thumb-imgwrap { width: 100%; aspect-ratio: 4/3; background: var(--card-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gallery-picker-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.gallery-picker-thumb-title { padding: 7px 9px; font-size: 11px; color: var(--muted); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--border); }
.gallery-picker-load-more-wrap { text-align: center; margin: 16px 20px 4px; }
@media (max-width: 780px) { .gallery-picker-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 14px; gap: 10px; } }

.chapter-list-results { overflow-y: auto; padding: 10px 20px; flex: 1; }
.chapter-list-item.current { color: var(--gold); font-weight: 700; }
.chapter-row { display: grid; grid-template-columns: 1fr 34px; align-items: center; }
.chapter-row-link { display: grid; grid-template-columns: 40px 1fr 145px 30px; align-items: center; gap: 14px; padding: 13px 16px; text-decoration: none; color: var(--text); font-size: 14px; }
.chapter-row-link:hover { color: var(--gold); }
.chapter-row-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--gold);
    background: var(--card-bg-2);
    border-radius: 8px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.chapter-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapter-row-col { text-align: center; }
.chapter-row-badge { text-align: left; }
.chapter-row-badge .lock { background: none; color: var(--gold); padding: 0; border-radius: 0; margin-left: 0; }
.chapter-row-date { font-size: 11px; color: var(--muted); white-space: nowrap; }
@media (max-width: 560px) {
    .chapter-row-link { grid-template-columns: 30px 1fr 92px 22px; gap: 6px; font-size: 13px; }
    .chapter-row-num { width: 26px; height: 26px; font-size: 11px; border-radius: 6px; }
    .chapter-row-date { font-size: 9.5px; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
}

.pagination { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border); justify-content: center; }
.page-btn { border: 1px solid var(--border); background: var(--card-bg); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer; min-width: 30px; }
.page-btn.active { background: var(--gold); color: var(--on-accent); border-color: var(--gold); font-weight: 700; }
.page-btn-nav { font-weight: 600; }
.page-ellipsis { color: var(--muted); font-size: 12px; padding: 0 2px; user-select: none; }

.settings-group { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.settings-group label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 8px; letter-spacing: 0.3px; }
.settings-row { display: flex; gap: 8px; }
.settings-row.settings-row-wrap { flex-wrap: wrap; }
.settings-row.settings-row-wrap .settings-option { flex: 1 1 calc(33.333% - 6px); min-width: 80px; }
.settings-option { flex: 1; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); border-radius: 10px; padding: 8px; font-size: 13px; cursor: pointer; }
.settings-option.active { background: var(--gold); color: var(--on-accent); border-color: var(--gold); font-weight: 700; }

/* Reading-mode swatches — a color chip with its name underneath,
   so it's clear at a glance which is which; the active one gets a
   checkmark badge on the chip itself rather than a filled/
   highlighted button state (the chip IS the theme's own color, so
   filling it gold on selection would just misrepresent the theme). */
.theme-swatch-row { gap: 14px; justify-content: flex-start; }
.theme-swatch-row .settings-option.theme-swatch {
    flex: 0 0 auto; width: 56px;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    background: none; border: none; padding: 0;
}
.theme-swatch-color {
    display: block; width: 38px; height: 38px; border-radius: 50%;
    border: 2px solid var(--border); position: relative;
}
.theme-swatch-name { font-size: 10.5px; font-weight: 600; color: var(--text); line-height: 1.1; text-align: center; }
.theme-swatch-row .settings-option.theme-swatch.active .theme-swatch-color {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(232,92,138,0.25);
}
.theme-swatch-row .settings-option.theme-swatch.active .theme-swatch-color::after {
    content: '✓';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 800; color: #fff;
    text-shadow: 0 0 3px rgba(0,0,0,0.85), 0 0 3px rgba(0,0,0,0.85);
}
.theme-swatch-row .settings-option.theme-swatch.active .theme-swatch-name { color: var(--primary); font-weight: 800; }
.settings-select { width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; background: #FBF3E4; color: #241A10; }

/* Plans / pricing */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; }
.plan-card { background: var(--card-bg); border-radius: 16px; padding: 28px 20px; text-align: center; box-shadow: 0 4px 16px rgba(46,27,36,0.22); border: 2px solid var(--border); }
.plan-card.active-plan { border-color: var(--gold); }
.plan-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.plan-price { font-size: 26px; font-weight: 800; color: var(--gold); margin-bottom: 4px; }
.plan-duration { font-size: 12px; color: var(--muted); margin-bottom: 16px; }

/* Coin/subscription pick-one list — a single radio-selectable row
   per package or plan, paired with one "Pay Now" button below the
   whole list rather than a separate button per card. */
.price-list { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.price-list-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--card-bg); border: 2px solid var(--border); border-radius: 12px;
    padding: 14px 16px; cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.price-list-row:has(input:checked) { border-color: var(--primary); box-shadow: 0 4px 14px rgba(232,92,138,0.15); }
.price-list-row.price-list-row-selected { border-color: var(--primary); box-shadow: 0 4px 14px rgba(232,92,138,0.15); }
.price-list-row:hover { border-color: var(--primary); }
.price-list-row input[type="radio"] { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.price-list-name { font-weight: 700; font-size: 14px; flex: 1; min-width: 100px; }
.price-list-detail { font-size: 13px; color: var(--muted); flex: 1; min-width: 90px; }
.price-list-price { font-weight: 800; font-size: 15px; color: var(--gold); white-space: nowrap; }
.price-list-row-disabled { opacity: 0.5; cursor: not-allowed; }
.price-list-row-disabled:hover { border-color: var(--border); }
@media (max-width: 560px) {
    .price-list-row { flex-wrap: wrap; }
    .price-list-name, .price-list-detail { flex-basis: 100%; }
}

table { color: var(--text); }
table thead tr { background: var(--dark) !important; color: #fff !important; }
table tbody tr { border-bottom: 1px solid var(--border) !important; }
table a { color: var(--gold); }

/* ---------------------------------------------------------
   Homepage FAQ + Quick Contact
   --------------------------------------------------------- */
.faq-section, .quick-contact-section { max-width: 100%; margin: 50px auto 0; padding: 0 20px; }
.faq-section-title { font-family: var(--font-display); font-size: 25px; margin-bottom: 18px; text-align: center; }
.faq-accordion { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: start; }
@media (max-width: 780px) { .faq-accordion { grid-template-columns: 1fr; } }
.faq-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: none; border: none; color: var(--text); text-align: left; padding: 15px 17px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font-body); }
.faq-question:hover { color: var(--gold); }
.faq-toggle-icon { flex-shrink: 0; font-size: 18px; color: var(--gold); transition: transform 0.2s ease; }
.faq-item.open .faq-toggle-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.25s ease, padding 0.25s ease; padding: 0 17px; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.faq-item.open .faq-answer { max-height: 500px; padding: 0 17px 17px; }

.quick-contact-section { text-align: center; margin-top: 42px; margin-bottom: 22px; }
.quick-contact-text { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.quick-contact-email {
    display: inline-block;
    background: var(--gold);
    color: var(--on-accent);
    font-weight: 700;
    padding: 13px 26px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 15px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 14px rgba(232,92,138,0.25);
}
.quick-contact-email:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(232,92,138,0.35); }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer {
    /* Scoped overrides — footer text/links/icons read light
       against the deep pink surface below. */
    --text: #fff;
    --muted: #F6D3E1;
    --border: rgba(255,255,255,0.22);
    --card-bg: rgba(255,255,255,0.12);
    --card-bg-2: rgba(255,255,255,0.18);
    background: #C43F6C;
    color: var(--muted);
    padding: 44px 0 0;
    font-size: 13px;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--gold), #fff) 1;
}

.footer-minimal-inner {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: 16px; padding-bottom: 32px;
}
.footer-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.footer-logo-text { font-family: var(--font-display); font-style: italic; font-size: 20px; font-weight: 700; color: var(--text); }
.footer-logo .logo-img { height: 32px; width: auto; }

.footer-social-icons { display: flex; gap: 10px; }
.footer-social-icon {
    width: 40px; height: 40px; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--border); color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.footer-social-icon:hover { background: var(--brand-color, var(--gold)); color: #fff; border-color: var(--brand-color, var(--gold)); transform: translateY(-2px); }

@media (max-width: 780px) {
    .footer-minimal-inner { flex-direction: column; text-align: center; justify-content: center; }
    .footer-social-icons { justify-content: center; }
    .footer-social-icon { width: 44px; height: 44px; }
}

.footer-copyright { text-align: center; padding: 17px 20px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.footer-pages-row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
    padding: 0 20px 20px; text-align: center;
}
.footer-pages-row a { color: var(--muted); text-decoration: none; font-size: 13px; }
.footer-pages-row a:hover { color: var(--primary); }

#back-to-top-btn {
    position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%;
    background: var(--primary); color: #fff; border: none; font-size: 18px; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 18px rgba(46,27,36,0.35); opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, filter 0.15s ease; z-index: 90;
}
#back-to-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); }
#back-to-top-btn:hover { filter: brightness(1.1); }

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 640px) {
    .hero h1 { font-size: 32px; }
    .header-inner { padding: 12px 16px; }
    .site-header nav { gap: 12px; }
    .novel-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .reader-box { padding: 24px 16px; }
}

/* ---------------------------------------------------------
   Accessibility & mobile navigation
   --------------------------------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--gold); color: var(--on-accent); padding: 10px 18px; font-weight: 700; z-index: 200; border-radius: 0 0 10px 0; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; flex-shrink: 0; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text); margin: 0 auto; }

.mobile-info-grid, .mobile-avatar-link { display: none; }
.mobile-search-bar { display: none; }

/* ---------------------------------------------------------
   Quick notification ticker
   --------------------------------------------------------- */
#quick-notification-bar {
    --text: #2E1B24;
    --muted: #9B7C89;
    background: linear-gradient(135deg, rgba(232,92,138,0.35), rgba(255,255,255,0.9));
    border-bottom: 2px solid var(--gold);
}
#quick-notification-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; max-width: 1120px; margin: 0 auto; padding: 11px 20px; opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease, transform 0.3s ease; }
#quick-notification-bar.show #quick-notification-inner { opacity: 1; transform: translateY(0); }
#quick-notification-inner a, #quick-notification-inner span { font-size: 13.5px; font-weight: 700; color: var(--text); text-decoration: none; }
#quick-notification-inner a:hover { color: var(--gold); }
#quick-notification-dnd { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
#quick-notification-dnd input { width: auto; margin: 0; cursor: pointer; }

@media (max-width: 780px) {
    .nav-toggle { display: flex; order: 4; }
    .header-inner { flex-wrap: nowrap; align-items: center; gap: 8px; }
    .logo { flex-shrink: 0; order: 1; }
    .header-search { order: 2; flex: 1; min-width: 0; max-width: none; }
    .mobile-avatar-link { order: 3; }
    .mobile-avatar-link { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
    .mobile-avatar-link .header-avatar { width: 32px; height: 32px; }
    .mobile-avatar-username { font-size: 10px; font-weight: 600; color: var(--text); max-width: 56px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .site-header nav .nav-primary-link { display: block; }

    /* Full-width slide-in drawer, left to right, with its own
       close button — not a collapsible panel below the header. */
    .site-header nav {
        display: flex;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 60px 22px 24px;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        z-index: 250;
    }
    .site-header nav.open { transform: translateX(0); }
    .nav-close-btn {
        display: block;
        position: absolute; top: 14px; right: 16px;
        width: 40px; height: 40px; border-radius: 50%;
        background: #FBEEF3; border: none; color: #2E1B24;
        font-size: 22px; line-height: 1; cursor: pointer;
    }
    /* Plain link rows — no button/card styling — for the general
       nav links only; Login/Sign Up/Logout/Gossip/Coins/Online
       badge keep their own distinct pill-button look. */
    .site-header nav a:not(.nav-btn):not(.coins):not(.online-count-badge):not(.username) {
        display: block;
        color: #2E1B24;
        padding: 14px 2px;
        border-bottom: 1px solid #F2D6E0;
        font-size: 15px;
    }
    .site-header nav a:not(.nav-btn):not(.coins):not(.online-count-badge):not(.username):hover { color: var(--primary); }
    .site-header nav a::after { display: none; content: none; }
    .site-header nav .nav-btn,
    .site-header nav .coins,
    .site-header nav .online-count-badge { margin: 8px 0; }
    .site-header nav .username { display: none; }
    .nav-bottom-link { margin-top: 10px; padding-top: 14px; border-top: none; width: 100%; text-align: center; }
    body.nav-drawer-open { overflow: hidden; }
}

.toolbar-btn, .action-btn, .page-btn, .settings-option, .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.chapter-list-item { min-height: 40px; }

@media (max-width: 640px) {
    .form-group input, .form-group select, .form-group textarea, .modal-search, .settings-select { font-size: 16px; }
}

/* ---------------------------------------------------------
   Header live search
   --------------------------------------------------------- */
.header-search { position: relative; flex: 1; max-width: 320px; min-width: 140px; }
.header-search input { width: 100%; padding: 10px 15px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg-2); color: var(--text); font-size: 14px; font-family: var(--font-body); }
.header-search input::placeholder { color: var(--muted); }
.header-search input:focus { outline: none; background: #fff; color: var(--text); box-shadow: 0 0 0 3px rgba(232,92,138,0.15); border-color: var(--primary); }
.header-search-results {
    /* Resets back to normal light-card colors regardless of the
       pink header it's nested inside — this is a results list,
       not header chrome. */
    --text: #2E1B24;
    --muted: #9B7C89;
    --border: #F2D6E0;
    --card-bg: #ffffff;
    --card-bg-2: #FBEEF3;
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 28px rgba(46,27,36,0.4); z-index: 50; overflow: hidden;
}
.header-search-results.open { display: block; }
.header-search-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); font-size: 13px; }
.header-search-item:hover { background: var(--card-bg-2); }
.header-search-item img, .hsr-cover-fallback { width: 34px; height: 45px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.hsr-cover-fallback { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), #8A2E52); color: #fff; font-family: var(--font-display); font-weight: 700; }
.header-search-viewall { display: block; padding: 10px 14px; text-align: center; color: var(--gold); text-decoration: none; font-size: 13px; font-weight: 600; }
.header-search-empty { padding: 14px; font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------
   Enhanced novel card badges (rating, likes, category, status)
   --------------------------------------------------------- */
.card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.card-category, .card-status, .card-rating, .card-likes, .card-views { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.card-category { background: rgba(232,92,138,0.16); color: var(--gold); }
.card-status { background: var(--card-bg-2); color: var(--muted); }
.card-status.status-ongoing { background: rgba(111,176,126,0.18); color: var(--success-text); }
.card-status.status-completed { background: rgba(232,92,138,0.18); color: var(--primary); }
.card-status.status-hiatus { background: var(--card-bg-2); color: var(--muted); }

/* ---------------------------------------------------------
   Novel detail page — author badge, mobile centering
   --------------------------------------------------------- */
.novel-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.author-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); font-weight: 600; }

@media (max-width: 640px) {
    .novel-detail { flex-direction: column; align-items: center; text-align: center; }
    .novel-detail .novel-cover { width: 230px; }
    .novel-meta-row, .rating-row, .action-row { justify-content: center; }
    .novel-cover-wrap { align-self: center; }
}

/* ---------------------------------------------------------
   Ranking carousels (New Arrivals, Top Rated, Mostly Viewed,
   Popular) — plain cover-only cards you swipe through by hand
   (no auto-movement). Tap/click a cover to reveal an overlay
   with synopsis, author, rating, likes, views, and a View More
   button; the first card in each row starts revealed already, as
   a hint for how the rest work.
   --------------------------------------------------------- */
.rank-scroll-section { margin-top: 42px; }
.rank-carousel-wrap { position: relative; margin-top: 14px; }

/* Arrow buttons — desktop only (shown/hidden per-section by
   novel-card.js based on viewport width, matching the category
   page's own gallery arrows). */
.rank-arrow {
    display: none;
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 50%;
    background: var(--card-bg); color: var(--text); font-size: 20px; cursor: pointer; z-index: 5;
    transition: .2s;
}
.rank-arrow:hover { border-color: var(--primary); color: var(--primary); }
.rank-arrow-prev { left: -10px; }
.rank-arrow-next { right: -10px; }

/* ---------------------------------------------------------
   Trending podium + Rising list — sits side by side above the
   ranking carousels, built from the same "Popular" data (top 3 go
   into the podium, the next 5 into the Rising list).
   --------------------------------------------------------- */
.trending-rising-section {
    display: flex;
    gap: 24px;
    margin-top: 42px;
    align-items: flex-start;
}
.trending-panel { flex: 1 1 65%; min-width: 0; }
.rising-panel {
    flex: 1 1 32%;
    min-width: 280px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
}
.rising-panel .section-header { margin-top: 0; }

.podium-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 18px;
    margin-top: 18px;
    padding: 30px 20px 0;
    background: var(--card-bg-2);
    border-radius: 18px;
}
.podium-item { display: block; text-decoration: none; text-align: center; }
.podium-cover {
    width: 130px; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden;
    box-shadow: 0 10px 24px rgba(46,27,36,0.25);
}
.podium-place-1 .podium-cover { width: 160px; }
.podium-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.podium-cover-fallback {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px;
    background: linear-gradient(135deg, var(--primary), #8A2E52); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13px;
}
.podium-ribbon {
    position: relative;
    margin: -14px auto 0;
    width: 84%;
    padding: 8px 6px 10px;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    text-align: center;
    clip-path: polygon(6% 0%, 94% 0%, 100% 50%, 94% 100%, 6% 100%, 0% 50%);
}
.podium-place-2 .podium-ribbon { background: linear-gradient(90deg, #C43F6C, var(--primary)); }
.podium-place-1 .podium-ribbon { background: linear-gradient(90deg, var(--primary), #F0839F); font-size: 17px; padding: 10px 6px 12px; }
.podium-place-3 .podium-ribbon { background: linear-gradient(90deg, #8A3E7A, #B25C9E); }

.podium-captions {
    display: flex;
    gap: 18px;
    margin-top: 18px;
    text-decoration: none;
}
.podium-caption {
    flex: 1 1 0;
    min-width: 0;
    text-decoration: none;
    color: var(--text);
    display: block;
}
.podium-caption-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3; margin-bottom: 4px; }
.podium-caption-category { color: var(--primary); font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.podium-caption-author { color: var(--muted); font-size: 12.5px; margin-bottom: 6px; }
.podium-caption-excerpt { color: var(--muted); font-size: 12.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.rising-list { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.rising-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 4px;
    text-decoration: none; color: var(--text);
    border-bottom: 1px solid var(--border);
}
.rising-item:last-child { border-bottom: none; }
.rising-rank {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px; color: #fff;
    background: var(--muted);
}
.rising-rank-4, .rising-rank-5 { background: var(--muted); color: var(--text); }
.rising-rank-1 { background: var(--primary); }
.rising-rank-2 { background: linear-gradient(135deg, #C43F6C, var(--primary)); }
.rising-rank-3 { background: linear-gradient(135deg, #8A3E7A, #B25C9E); }
.rising-cover { flex-shrink: 0; width: 46px; aspect-ratio: 2/3; border-radius: 6px; overflow: hidden; }
.rising-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rising-cover-fallback {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;
    background: linear-gradient(135deg, var(--primary), #8A2E52); color: #fff; font-size: 9px; font-weight: 700;
}
.rising-info { min-width: 0; flex: 1; }
.rising-title { font-weight: 700; font-size: 13.5px; line-height: 1.3; margin-bottom: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.rising-meta { font-size: 12px; margin-bottom: 2px; }
.rising-category { color: var(--primary); font-weight: 600; }
.rising-author { color: var(--muted); }
.rising-views { font-size: 11.5px; color: var(--muted); }

@media (max-width: 780px) {
    .trending-rising-section { flex-direction: column; }
    .rising-panel { width: 100%; min-width: 0; }
    .podium-cover { width: 100px; }
    .podium-place-1 .podium-cover { width: 124px; }
    .podium-ribbon { font-size: 13px; }
    .podium-place-1 .podium-ribbon { font-size: 14px; }
    .podium-caption-excerpt { display: none; }
}


/* Mobile — "peek" carousel. Every visible card renders at the SAME
   full width (set inline by novel-card.js: 80% at either end of the
   row, 70% once it has neighbors on both sides); the previous/next
   cards are positioned mostly outside the viewport so only a real
   partial slice of their actual cover shows at the edge — clipped
   by overflow:hidden — rather than the whole cover shrunk down to
   fit a narrow box. */
.rank-peek-viewport {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1.05; /* matches a 70%-wide, 2:3 card's height */
}
.rank-peek-viewport.rank-peek-lone-active { aspect-ratio: 1 / 1.2; } /* matches an 80%-wide, 2:3 card's height */
.rank-card {
    position: absolute;
    top: 0;
    aspect-ratio: 2 / 3;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(46,27,36,0.18);
    cursor: pointer;
    transition: left 0.35s ease, width 0.35s ease;
}
.rank-card.rank-peek-hidden { visibility: hidden; pointer-events: none; }

/* Desktop — plain horizontally-scrollable row of same-size cards;
   novel-card.js clears the mobile inline left/width styles above
   before these rules apply. */
@media (min-width: 641px) {
    .rank-peek-viewport {
        position: static;
        overflow-x: auto;
        overflow-y: hidden;
        aspect-ratio: unset;
        display: flex;
        gap: 12px;
        padding-bottom: 8px;
        cursor: grab;
        scrollbar-width: none;
    }
    .rank-peek-viewport::-webkit-scrollbar { display: none; }
    .rank-peek-viewport.rank-peek-dragging { cursor: grabbing; }
    .rank-card {
        position: relative;
        flex: 0 0 auto;
        width: 168px;
        top: auto;
    }
}

.rank-card-cover-btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; margin: 0; border: none; background: none; cursor: pointer; display: block; }
.rank-card-cover-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rank-card-cover-fallback {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px;
    background: linear-gradient(135deg, var(--primary), #8A2E52); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13px;
}
.rank-card-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 12px;
    background: linear-gradient(180deg, rgba(46,27,36,0.05) 0%, rgba(46,27,36,0.75) 38%, rgba(46,27,36,0.97) 100%);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.rank-card-overlay.open { opacity: 1; pointer-events: auto; }
.rank-card-overlay-title { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; line-height: 1.25; margin-bottom: 2px; }
.rank-card-overlay-author { font-size: 10.5px; color: #E4D4BE; margin-bottom: 6px; }
.rank-card-overlay-stats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rank-card-overlay-stat { font-size: 10.5px; font-weight: 700; color: var(--gold); }
.rank-card-overlay-synopsis { font-size: 10.5px; line-height: 1.5; color: #EADFD3; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rank-card-viewmore-btn { align-self: flex-start; padding: 6px 14px; font-size: 11.5px; }

/* ---------------------------------------------------------
   Latest Chapters section
   --------------------------------------------------------- */
.latest-chapters-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 16px; }
.latest-chapter-item { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--text); font-size: 13px; display: flex; align-items: center; gap: 12px; transition: border-color 0.15s ease; }
.latest-chapter-item .latest-chapter-cover { width: 42px; height: 58px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.latest-chapter-item:hover { border-color: var(--gold); }
.latest-chapter-item strong { color: var(--gold); }

/* ---------------------------------------------------------
   Profile page horizontal sliders
   --------------------------------------------------------- */
.profile-slider { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; margin-top: 12px; scroll-snap-type: x proximity; }
.profile-slider-card { flex: 0 0 140px; scroll-snap-align: start; }
.profile-slider::-webkit-scrollbar { height: 6px; }
.profile-slider::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.card-rating { background: rgba(232,92,138,0.16); color: var(--gold); }
.card-likes { background: rgba(232,92,138,0.16); color: var(--primary); }
.card-views { background: var(--card-bg-2); color: var(--muted); }
.card-synopsis { font-size: 12px; color: var(--muted); margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------------------------------------------------
   Curated homepage sections
   --------------------------------------------------------- */
.novel-section { margin-top: 42px; }
/* Pink-to-white gradient bar behind every homepage section heading
   (Featured Novels, Completed Novels, curated category rows,
   Trending/Rising, the ranking carousels) — full-strength pink on
   the left fading to fully transparent on the right, so it reads
   as a soft highlight rather than a solid block. */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 15px;
    padding: 14px 18px;
    border-radius: 10px;
    background: linear-gradient(to right, rgba(232,92,138,1) 0%, rgba(232,92,138,0) 100%);
}
.section-header h2 { color: var(--text); }
.section-more { color: var(--gold); text-decoration: none; font-size: 13px; font-weight: 600; }
/* ---------------------------------------------------------
   Admin navigation — categorized accordion groups.
   Right sidebar on desktop, full-width panel on mobile (both use
   the same vertical accordion layout, just different width).
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   Admin panel — WordPress-style layout: a thin top admin bar,
   plus a dark icon+label sidebar with expandable groups. Every
   color below reuses this site's own existing variables — the
   admin/author color scheme is unchanged, only rearranged.
   --------------------------------------------------------- */
.wp-admin-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 14px;
    background: var(--dark);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
    font-size: 12.5px;
}
.wp-admin-bar a { color: #cfc7e0; text-decoration: none; padding: 0 10px; height: 100%; display: flex; align-items: center; }
.wp-admin-bar a:hover { color: var(--gold); background: rgba(255,255,255,0.05); }
.wp-admin-bar-spacer { flex: 1; }
.wp-admin-bar-howdy { color: var(--muted); padding: 0 10px; }
.wp-admin-bar-logout:hover { color: var(--primary) !important; }

.admin-layout { display: flex; gap: 0; flex-direction: row; align-items: flex-start; }
.admin-content { flex: 1; min-width: 0; padding: 20px var(--admin-pad-x, 20px); }
/* Hidden by default (desktop) — the mobile media query below
   switches these on and defines their actual mobile appearance. */
.admin-mobile-nav-toggle, .admin-mobile-nav-backdrop { display: none; }
.admin-nav {
    flex: 0 0 190px;
    position: sticky;
    /* The site's own header no longer renders on admin pages at
       all (see includes/header.php) — only the 34px top admin bar
       sits above this now, so that's the only offset needed. */
    top: 34px;
    max-height: calc(100vh - 34px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--dark);
    border-right: 1px solid var(--border);
    padding: 6px 0;
    /* Firefox's equivalent of the thin, border-colored ::-webkit-
       scrollbar rules just below — Firefox doesn't support styling
       via ::-webkit-scrollbar at all, so without this it would fall
       back to its own default (usually much wider, mismatched)
       scrollbar regardless of how the webkit one below is styled. */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.admin-nav::-webkit-scrollbar { width: 8px; }
.admin-nav::-webkit-scrollbar-track { background: transparent; }
.admin-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.admin-nav::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.admin-nav-group summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    user-select: none;
    color: #cfc7e0;
    border-left: 3px solid transparent;
}
.admin-nav-icon { font-size: 15px; flex-shrink: 0; width: 18px; text-align: center; }
.admin-nav-label { flex: 1; }
.admin-nav-group summary::-webkit-details-marker { display: none; }
.admin-nav-group summary::after { content: '▸'; color: var(--muted); font-size: 10px; margin-left: auto; transition: transform 0.15s ease; }
.admin-nav-group[open] summary::after { transform: rotate(90deg); }
.admin-nav-group summary:hover { background: rgba(255,255,255,0.05); color: #fff; }
/* has-active: this group contains the page currently being viewed.
   [open]: the group is simply expanded right now, regardless of
   whether it contains the active page — clicking a heading to open
   it should turn that heading pink immediately, the same way a
   clicked FAQ-style tab does elsewhere on the site, not only once
   navigation happens to land inside it. */
.admin-nav-group.has-active summary, .admin-nav-group[open] summary { border-left-color: var(--gold); color: var(--gold); background: rgba(232,96,124,0.08); }

.admin-nav-group-items { display: flex; flex-direction: column; padding: 2px 0 6px; background: rgba(0,0,0,0.15); }
.admin-nav-group-items a {
    padding: 8px 16px 8px 44px;
    color: var(--muted);
    text-decoration: none;
    font-size: 12.5px;
    border-left: 3px solid transparent;
}
.admin-nav-group-items a:hover { background: rgba(255,255,255,0.04); color: #fff; }
.admin-nav-group-items a.active { color: var(--gold); font-weight: 700; border-left-color: var(--gold); background: rgba(232,96,124,0.08); }

/* ---------------------------------------------------------
   Admin design system — compact, data-dense.
   Retrofit target: replace repeated inline table/card styles
   across admin pages with these shared classes.
   --------------------------------------------------------- */
.admin-h1 {
    font-family: var(--font-body);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.2px;
}
.admin-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
    padding: 14px;
}
.admin-card h2 { font-size: 14px; font-weight: 700; margin-bottom: 10px; }

.admin-table-wrap {
    overflow-x: auto;
    border-radius: var(--admin-radius);
    border: 1px solid var(--border);
    box-shadow: var(--admin-shadow);
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.admin-table-wrap::-webkit-scrollbar { height: 8px; }
.admin-table-wrap::-webkit-scrollbar-track { background: transparent; }
.admin-table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.admin-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.admin-table { width: 100%; border-collapse: collapse; background: var(--card-bg); font-size: var(--admin-font-size); }
.admin-table thead tr { background: var(--dark); color: #fff; text-align: left; }
.admin-table th { padding: 8px var(--admin-pad-x); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); position: sticky; top: 0; background: var(--dark); z-index: 1; }
.admin-table td { padding: var(--admin-pad-y) var(--admin-pad-x); border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tbody tr:hover { background: var(--card-bg-2); }
.admin-table tbody tr:last-child td { border-bottom: none; }

/* Responsive tables — below this width, an admin table with
   several inline mini-forms per cell stops being usable even with
   horizontal scroll (you'd have to scroll sideways mid-edit). Turn
   each row into a labeled stacked card instead: add this class to
   any admin-table you want this treatment for, and a data-label
   attribute on each <td> naming its column. */
@media (max-width: 780px) {
    .admin-table.admin-table-responsive-cards thead { display: none; }
    .admin-table.admin-table-responsive-cards, .admin-table.admin-table-responsive-cards tbody { display: block; width: 100%; }
    .admin-table.admin-table-responsive-cards tr {
        display: block;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: var(--admin-radius);
        margin-bottom: 10px;
        padding: 4px 0;
    }
    .admin-table.admin-table-responsive-cards td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 12px;
        border-bottom: 1px solid var(--border);
        text-align: right;
        white-space: normal;
    }
    .admin-table.admin-table-responsive-cards tr td:last-child { border-bottom: none; }
    .admin-table.admin-table-responsive-cards td::before {
        content: attr(data-label);
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--muted);
        flex-shrink: 0;
        text-align: left;
    }
    /* Inline forms inside a cell (price editors, action buttons)
       need to wrap and use the space naturally instead of being
       squeezed to fixed pixel widths meant for a wide desktop cell. */
    .admin-table.admin-table-responsive-cards td form { flex-wrap: wrap; justify-content: flex-end; }
    .admin-table.admin-table-responsive-cards td input[type="number"],
    .admin-table.admin-table-responsive-cards td input[type="text"] { width: 64px !important; }

    /* "View More" collapsed-row toggle — used on Manage Users so a
       mobile card shows just Select/Username/Email plus this button
       by default, with every other field (Role, Status, Coins,
       Subscription, Joined, Actions) hidden until tapped. Add
       class="mobile-collapsible" to any <td> that should start
       hidden, and a lone <td class="mobile-view-more-cell"> holding
       the toggle button — .mobile-view-more-btn's own JS click
       handler is what actually adds/removes .row-expanded on the
       parent <tr>. */
    .admin-table.admin-table-responsive-cards .mobile-view-more-cell { display: flex; justify-content: center; padding: 8px 12px; }
    .admin-table.admin-table-responsive-cards .mobile-view-more-btn {
        background: var(--card-bg-2, transparent);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 6px 16px;
        font-size: 12px;
        font-weight: 600;
        color: var(--primary);
        cursor: pointer;
    }
    .admin-table.admin-table-responsive-cards td.mobile-collapsible { display: none; }
    .admin-table.admin-table-responsive-cards tr.row-expanded td.mobile-collapsible { display: flex; }
}
/* The "View More" cell only ever exists for the mobile card layout
   above — on desktop, the normal wide table (with every column
   already visible at once) has no use for it, and without this it
   would otherwise render as an extra, misaligned, mostly-empty
   column next to Email. */
.mobile-view-more-cell { display: none; }

.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.admin-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--admin-radius-sm); box-shadow: var(--admin-shadow); padding: 12px 14px; }
.admin-stat-card .admin-stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
.admin-stat-card .admin-stat-value { font-size: 20px; font-weight: 800; margin-top: 2px; font-family: var(--font-body); }

/* Dashboard section layout — the toggle only applies on desktop
   (per spec); mobile always stacks single-column regardless of
   the chosen mode, since there's no room for a real grid there. */
.dashboard-sections { margin-top: 20px; }
.dashboard-sections section {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--admin-radius);
    padding: 16px 18px;
    margin-bottom: 18px;
}
/* The toggle itself only matters once the grid layout can
   actually apply — below that width it would show as clickable
   with no visible effect, which just looks broken. Hiding it here
   keeps the control honest about what it can currently do. */
@media (max-width: 899px) {
    .dashboard-view-toggle { display: none; }
}
@media (min-width: 900px) {
    .dashboard-sections.dashboard-grid-mode {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
    .dashboard-sections.dashboard-grid-mode section { margin-bottom: 0; }
}

.admin-btn-sm {
    border: 1px solid var(--border);
    background: var(--card-bg-2);
    color: var(--text);
    border-radius: var(--admin-radius-sm);
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.admin-btn-sm:hover { background: var(--card-bg); border-color: var(--gold); }
.admin-btn-sm.danger { color: var(--primary); border-color: transparent; background: none; padding: 4px 6px; }
.admin-btn-sm.danger:hover { background: var(--error-bg); }
.admin-btn-sm.gold { color: var(--gold); border-color: transparent; background: none; padding: 4px 6px; }
.admin-btn-sm.gold:hover { background: rgba(232,96,124,0.12); }

.admin-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
}
.admin-badge.on { background: var(--success-bg); color: var(--success-text); }
.admin-badge.off { background: var(--error-bg); color: var(--error-text); }
.admin-badge.neutral { background: rgba(255,255,255,0.06); color: var(--muted); }

.admin-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.admin-toolbar input[type="text"], .admin-toolbar input[type="search"] {
    padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--admin-radius-sm);
    background: var(--bg); color: var(--text); font-size: 12.5px;
}

@media (max-width: 900px) {
    .admin-layout { flex-direction: column; }

    /* Top admin bar: drop the "Howdy" greeting on narrow screens to
       keep the essential links (View Site, Dashboard, Log Out) from
       wrapping or overflowing. */
    .wp-admin-bar-howdy { display: none; }
    .wp-admin-bar { overflow-x: auto; }

    /* Hamburger toggle — visible on mobile only, sits inline at
       the top of the page (not fixed), so it can never overlap the
       site's own sticky header or any admin page content below it. */
    .admin-mobile-nav-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: fit-content;
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: var(--admin-radius-sm);
        box-shadow: var(--admin-shadow);
        color: var(--text);
        font-size: 13px;
        font-weight: 700;
        padding: 9px 14px;
        margin-bottom: 12px;
        cursor: pointer;
    }
    .admin-mobile-nav-toggle span {
        display: block;
        width: 18px;
        height: 2px;
        background: var(--text);
        border-radius: 1px;
    }
    /* Stack the three hamburger lines instead of the row layout the
       flex container would otherwise give a bare <span> sequence. */
    .admin-mobile-nav-toggle { flex-wrap: wrap; }
    .admin-mobile-nav-toggle span:nth-child(1) { margin-bottom: -6px; }
    .admin-mobile-nav-toggle span:nth-child(2) { margin: 4px 0 -6px; }

    /* The sidebar becomes a fixed slide-out drawer, off-screen by
       default so it never pushes or overlaps page content — only
       the .open state (toggled by the hamburger) brings it on
       screen, above everything else via z-index. */
    .admin-nav {
        position: fixed;
        top: 0;
        left: -300px;
        bottom: 0;
        width: 280px;
        max-height: 100vh;
        height: 100vh;
        z-index: 310;
        border-radius: 0;
        box-shadow: 4px 0 24px rgba(0,0,0,0.4);
        transition: left 0.25s ease;
        overflow-y: auto;
    }
    .admin-nav.open { left: 0; }

    .admin-mobile-nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 300;
    }
    .admin-mobile-nav-backdrop.open { display: block; }

    /* Content fills the full width underneath — the drawer overlays
       it rather than sharing space with it. */
    .admin-content { width: 100%; }
}


/* ---------------------------------------------------------
   Text-to-Speech player
   --------------------------------------------------------- */
.tts-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--card-bg); border-top: 1px solid var(--border); box-shadow: 0 -8px 26px rgba(46,27,36,0.35); padding: 11px 16px 13px; }
.tts-player-inner { max-width: 720px; margin: 0 auto; }
.tts-progress-row { display: flex; align-items: center; gap: 10px; }
.tts-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; }
.tts-time:last-child { text-align: right; }
.tts-progress-track { flex: 1; height: 6px; background: var(--border); border-radius: 3px; cursor: pointer; position: relative; }
.tts-progress-fill { height: 100%; width: 0%; background: var(--gold); border-radius: 3px; transition: width 0.15s linear; }
.tts-controls-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.tts-btn { background: none; border: 1px solid var(--border); color: var(--text); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.15s ease, background 0.15s ease; }
.tts-btn:hover { border-color: var(--gold); }
.tts-btn-play { background: var(--gold); color: var(--on-accent); border: none; width: 40px; height: 40px; font-size: 16px; }
.tts-btn-play:hover { filter: brightness(1.08); }
.tts-btn-close { margin-left: auto; }
.tts-volume-row { display: flex; align-items: center; gap: 6px; flex: 1; max-width: 140px; font-size: 13px; }
.tts-volume-row input[type="range"] { flex: 1; }
body.tts-player-open { padding-bottom: 88px; }

.tts-resume-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 96; width: 100%; background: var(--gold); color: var(--on-accent); border: none; padding: 16px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 -8px 26px rgba(46,27,36,0.35); animation: ttsResumePulse 1.6s ease-in-out infinite; }
@keyframes ttsResumePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }
@media (max-width: 640px) { .tts-volume-row { display: none; } }

/* ---------------------------------------------------------
   Reading settings
   --------------------------------------------------------- */
.settings-fab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 120; background: var(--gold); color: var(--on-accent); border: none; width: 42px; height: 52px; border-radius: 12px 0 0 12px; font-size: 18px; cursor: pointer; box-shadow: -3px 3px 12px rgba(46,27,36,0.25); transition: width 0.15s ease, box-shadow 0.15s ease; }
.settings-fab:hover { width: 46px; box-shadow: -5px 5px 18px rgba(232,92,138,0.3); }
/* Bottom sheet — slides up from the bottom edge instead of in from
   the side, centered and width-capped on wider screens so it
   doesn't stretch edge-to-edge on desktop. */
.settings-slide-panel {
    position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto;
    width: 100%; max-width: 480px; max-height: 82vh;
    background: var(--card-bg);
    border: 1px solid var(--border); border-bottom: none;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 26px rgba(46,27,36,0.35);
    z-index: 130; overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.25s ease;
}
.settings-slide-panel.open { transform: translateY(0); }
.settings-slide-panel .modal-header { border-bottom: 1px solid var(--border); }

.voice-library-box { max-width: 900px; width: 100%; height: 90vh; max-height: 880px; }
.voice-library-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.voice-library-header h3 { font-family: var(--font-display); font-size: 18px; }
.voice-library-body { display: flex; flex: 1; overflow: hidden; }
.voice-library-sidebar { width: 240px; flex-shrink: 0; border-right: 1px solid var(--border); padding: 14px; overflow-y: auto; }
.voice-library-lang-list-heading { font-size: 11px; letter-spacing: 0.3px; color: var(--muted); font-weight: 700; margin: 14px 0 6px; padding: 0 4px; }
.voice-library-lang-list-heading:first-child { margin-top: 0; }
.voice-library-lang-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 10px; border-radius: 8px; border: none; background: none; color: var(--text); font-size: 13.5px; text-align: left; cursor: pointer; }
.voice-library-lang-btn:hover { background: var(--card-bg-2); }
.voice-library-lang-btn.active { background: var(--gold); color: var(--on-accent); font-weight: 700; }
.voice-library-lang-btn .lang-count { font-size: 11px; opacity: 0.75; }
.voice-library-main { flex: 1; display: flex; flex-direction: column; padding: 16px 20px; overflow: hidden; }
.voice-library-gender-tabs { display: flex; gap: 10px; margin-bottom: 14px; flex-shrink: 0; }
.voice-library-gender-tab { padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg-2); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.voice-library-gender-tab.active { background: var(--gold); color: var(--on-accent); border-color: var(--gold); }
.voice-library-cards { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.voice-library-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg-2); cursor: pointer; }
.voice-library-card:hover { border-color: var(--gold); }
.voice-library-card.selected { border-color: var(--gold); background: rgba(232,92,138,0.14); }
.voice-library-card-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.voice-library-card-info { flex: 1; min-width: 0; }
.voice-library-card-name { font-weight: 700; font-size: 14px; }
.voice-library-card-meta { font-size: 12px; color: var(--muted); }
.voice-library-card-preview-btn { flex-shrink: 0; background: none; border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; color: var(--text); font-size: 12.5px; cursor: pointer; }
.voice-library-card-preview-btn:hover { border-color: var(--gold); color: var(--gold); }
.voice-library-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; }
@media (max-width: 720px) {
    .voice-library-box { height: 92vh; max-height: none; }
    .voice-library-body { flex-direction: column; }
    .voice-library-sidebar { width: 100%; max-height: 160px; border-right: none; border-bottom: 1px solid var(--border); }
}
@media (max-width: 480px) { .settings-fab { height: 46px; width: 38px; } }

/* ---------------------------------------------------------
   Toast / popup notifications
   --------------------------------------------------------- */
#toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--gold); padding: 13px 21px; border-radius: 12px; font-size: 14px; box-shadow: 0 8px 24px rgba(46,27,36,0.35); opacity: 0; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease; max-width: 90vw; }
.toast-show { opacity: 1; transform: translateY(0); }
.toast-success { border-left-color: var(--success-text); }
.toast-error { border-left-color: var(--primary); }
.toast-info { border-left-color: var(--gold); }

/* ---------------------------------------------------------
   Comments
   --------------------------------------------------------- */
.comments-toggle-row { margin-top: 20px; }
.comments-body { margin-top: 14px; }
.comment-item { margin-top: 12px; }
.comment-bubble { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 11px 15px; transition: border-color 0.15s ease; }
.comment-meta { font-size: 12px; margin-bottom: 4px; }
.comment-body { font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

.avatar-circle { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #8A2E52); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(46,27,36,0.3); }
.message-row { display: flex; gap: 10px; align-items: flex-start; }
.typing-indicator { font-size: 12px; color: var(--muted); font-style: italic; padding: 6px 0; min-height: 18px; }
.gossip-guidelines { background: rgba(232,92,138,0.1); border: 1px solid rgba(232,92,138,0.28); border-radius: 12px; padding: 11px 15px; font-size: 12px; color: var(--muted); margin: 14px 0; }
.tab-bar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.tab-bar::-webkit-scrollbar { height: 6px; }
.tab-bar::-webkit-scrollbar-track { background: transparent; }
.tab-bar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.tab-bar::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.tab-btn { background: none; border: none; color: var(--muted); font-family: var(--font-body); font-weight: 700; font-size: 14px; padding: 12px 18px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex-shrink: 0; transition: color 0.15s ease, border-color 0.15s ease; }
.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); }
.tab-btn:hover { color: var(--text); }

.currency-toggle-btn { background: var(--card-bg); border: 1px solid var(--border); color: var(--muted); font-family: var(--font-body); font-weight: 700; font-size: 12.5px; padding: 8px 15px; border-radius: 999px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.currency-toggle-btn:hover { border-color: var(--gold); color: var(--text); }
.currency-toggle-btn.active { background: var(--gold); border-color: var(--gold); color: var(--on-accent); }
.tab-panel { display: none; animation: tabFadeIn 0.2s ease; }
.tab-panel.active { display: block; }
@keyframes tabFadeIn { from { opacity: 0; } to { opacity: 1; } }

.accordion-section { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.accordion-header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 17px; background: var(--card-bg); border: none; cursor: pointer; font-family: var(--font-heading, inherit); font-size: 15px; font-weight: 700; color: var(--text); text-align: left; }
.accordion-header:hover { background: var(--card-bg-2, var(--card-bg)); }
.accordion-chevron { transition: transform 0.2s ease; color: var(--muted); flex-shrink: 0; }
.accordion-header[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); }
.accordion-body { display: none; padding: 4px 17px 19px; }
.accordion-body.accordion-open { display: block; animation: tabFadeIn 0.2s ease; }

/* Form rows */
.form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row .form-group { margin-bottom: 16px; }
.form-row-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: end; }
.form-row-4col { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; align-items: end; }
@media (max-width: 640px) { .form-row-3col, .form-row-4col { grid-template-columns: 1fr; } }

.fixed-height-editor .ql-editor { height: 340px; overflow-y: auto; }
#synopsis-editor { overflow: hidden; }
#synopsis-editor .ql-editor { height: 220px !important; max-height: 220px !important; overflow-y: auto !important; }

.tts-active-paragraph { border-left: 3px solid var(--gold); padding-left: 10px; margin-left: -13px; }
.ql-editor, .ql-editor.ql-blank::before { color: var(--text); background: var(--card-bg); }
.ql-toolbar { background: var(--card-bg-2); border-color: var(--border) !important; }
/* Quill's own bundled CSS draws toolbar icons with a fixed dark
   stroke/fill (#444), which nearly disappears against the admin
   panel's dark toolbar background — these override it to follow
   the same theme text color instead. */
.ql-toolbar .ql-stroke { stroke: var(--text); }
.ql-toolbar .ql-fill { fill: var(--text); }
.ql-toolbar .ql-picker-label { color: var(--text); }
.ql-toolbar .ql-picker-options { background: var(--card-bg); border-color: var(--border) !important; }
.ql-toolbar .ql-picker-item { color: var(--text); }
.ql-toolbar button:hover .ql-stroke, .ql-toolbar button.ql-active .ql-stroke { stroke: var(--primary); }
.ql-toolbar button:hover .ql-fill, .ql-toolbar button.ql-active .ql-fill { fill: var(--primary); }
.ql-toolbar button:hover .ql-picker-label, .ql-toolbar .ql-picker-label:hover { color: var(--primary); }
.ql-container { border-color: var(--border) !important; background: var(--card-bg); }

.list-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

#chapter-editor { background: var(--card-bg); color: var(--text); border-radius: 0 0 10px 10px; min-height: 260px; }
.ql-toolbar.ql-snow { border-radius: 10px 10px 0 0; background: var(--card-bg-2); }
.ql-container.ql-snow { border-color: var(--border); }
.ql-toolbar.ql-snow { border-color: var(--border); }

.paragraph-highlight-gold { background: rgba(232,92,138,0.24); border-radius: 4px; scroll-margin-top: 90px; }
.paragraph-highlight-pink { background: rgba(217,61,120,0.18); border-radius: 4px; scroll-margin-top: 90px; }
.paragraph-highlight-green { background: rgba(63,157,100,0.18); border-radius: 4px; scroll-margin-top: 90px; }
.paragraph-highlight-blue { background: rgba(61,120,200,0.18); border-radius: 4px; scroll-margin-top: 90px; }
#highlight-popup, #highlight-remove-popup { transform: translate(-50%, 0); margin-top: 10px; }

/* ---------------------------------------------------------
   Page intro banner — reusable page header (Categories, and
   other simple listing pages) with a small accent rule under
   the title instead of a bare <h1>.
   --------------------------------------------------------- */
.page-intro { margin-bottom: 8px; position: relative; padding-bottom: 18px; }
.page-intro h1 { margin-bottom: 8px; }
.page-intro-sub { color: var(--muted); font-size: 15px; max-width: 520px; }
.page-intro::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    width: 64px; height: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--primary), var(--gold));
}

/* ---------------------------------------------------------
   Account page header strip
   --------------------------------------------------------- */
.account-header {
    display: flex; align-items: center; gap: 18px;
    background: linear-gradient(135deg, rgba(232,92,138,0.14), rgba(232,92,138,0.08));
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px 24px;
    margin-bottom: 22px;
}
.account-header-avatar { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; border: 3px solid var(--card-bg); box-shadow: 0 0 0 2px var(--gold); flex-shrink: 0; }
.account-header-info h1 { font-size: 24px; margin-bottom: 8px; }
.account-header-chips { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 480px) { .account-header { flex-direction: column; text-align: center; } }

/* ---------------------------------------------------------
   Empty states — search with no results, empty bookmarks/
   favorites, etc. A small icon + prompt instead of bare text.
   --------------------------------------------------------- */
.empty-state { text-align: center; padding: 40px 20px; }
.empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.85; }
.empty-state-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.empty-state-sub { color: var(--muted); font-size: 13.5px; max-width: 320px; margin: 0 auto 16px; line-height: 1.6; }
.empty-state .btn { margin-top: 4px; }

/* ---------------------------------------------------------
   Skeleton loading placeholders — replace plain "Loading..."
   text with content-shaped pulsing blocks.
   --------------------------------------------------------- */
@keyframes skeletonPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.skeleton-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; animation: skeletonPulse 1.4s ease-in-out infinite; }
.skeleton-cover { aspect-ratio: 2/3; background: var(--card-bg-2); }
.skeleton-lines { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.skeleton-line { height: 10px; border-radius: 4px; background: var(--card-bg-2); }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-row { display: flex; align-items: center; gap: 10px; padding: 13px 16px; animation: skeletonPulse 1.4s ease-in-out infinite; }
.skeleton-row .skeleton-line { height: 12px; flex: 1; }

/* ---------------------------------------------------------
   Breadcrumb (category, tag, completed-novels pages)
   --------------------------------------------------------- */
.page-breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.page-breadcrumb a { color: var(--muted); text-decoration: none; }
.page-breadcrumb a:hover { color: var(--gold); }

/* ---------------------------------------------------------
   Featured Novels gallery — a premium, drag/swipe/arrow-driven
   horizontal cover carousel with a synced details panel below.
   Distinct from the ranking rows: selection here is persistent
   (one cover stays "open" until another is picked) and drives a
   separate panel rather than an inline overlay on the cover
   itself.
   --------------------------------------------------------- */
.fg-section { margin-top: 42px; }
.fg-wrap { position: relative; margin-top: 14px; }
.fg-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 6px 4px 14px;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
}
.fg-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.fg-track::-webkit-scrollbar { display: none; }
.fg-cover-item {
    flex: 0 0 auto;
    width: 160px;
    scroll-snap-align: start;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.22s ease;
}
@media (max-width: 640px) { .fg-cover-item { width: 130px; } }
.fg-cover-img-wrap {
    position: relative;
    display: block;
    aspect-ratio: 2/3;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(46,27,36,0.16);
    transition: box-shadow 0.22s ease, transform 0.22s ease;
    border: 2.5px solid transparent;
}
.fg-cover-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.fg-cover-fallback {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px;
    background: linear-gradient(135deg, var(--primary), #8A2E52); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 13px;
}
.fg-cover-item:hover { transform: translateY(-4px); }
.fg-cover-item:hover .fg-cover-img-wrap { box-shadow: 0 12px 26px rgba(46,27,36,0.26); }
.fg-cover-item:hover img { transform: scale(1.06); }
.fg-cover-item.active { transform: translateY(-6px); }
.fg-cover-item.active .fg-cover-img-wrap {
    border-color: var(--gold);
    box-shadow: 0 14px 30px rgba(232,92,138,0.4);
}
.fg-cover-title {
    font-size: 12.5px; font-weight: 600; color: var(--text);
    line-height: 1.3; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    transition: color 0.2s ease;
}
.fg-cover-item.active .fg-cover-title { color: var(--primary); }

.fg-arrow {
    position: absolute; top: 42%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: 1px solid var(--border);
    box-shadow: 0 6px 16px rgba(46,27,36,0.2);
    font-size: 20px; line-height: 1; color: var(--text);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 5;
    transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.fg-arrow:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-50%) scale(1.08); }
.fg-arrow-left { left: -6px; }
.fg-arrow-right { right: -6px; }
@media (max-width: 900px) { .fg-arrow { display: none; } }

/* Details panel */
.fdp {
    display: flex;
    gap: 22px;
    margin-top: 22px;
    padding: 22px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(46,27,36,0.08);
}
.fdp-cover {
    flex: 0 0 140px;
    width: 140px;
    aspect-ratio: 2/3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(46,27,36,0.2);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.fdp-cover.fdp-visible { opacity: 1; transform: translateY(0); }
.fdp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fdp-info {
    flex: 1; min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.fdp-info.fdp-visible { opacity: 1; transform: translateY(0); }
.fdp-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.fdp-stats { display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.fdp-stats span { font-size: 13.5px; font-weight: 700; color: var(--gold); }
/* Same idea as the homepage's list-wise novel rows: with .fdp-info
   stretched to match .fdp-cover's own height (the row's default
   align-items:stretch already does that), letting the synopsis grow
   to fill whatever's left over — then clipping at a whole line
   rather than mid-word — means it always shows exactly as much text
   as actually fits beside that cover, at any screen size, instead
   of a fixed line count that's sometimes too short and sometimes
   overflows past the cover's bottom edge. */
.fdp-synopsis {
    flex: 1;
    min-height: 0;
    font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 16px; max-width: 62ch;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 20; overflow: hidden;
}
.fdp-viewmore { display: inline-block; }
@media (max-width: 640px) {
    .fdp { padding: 14px; gap: 14px; }
    .fdp-cover { flex: 0 0 96px; width: 96px; }
    .fdp-title { font-size: 17px; margin-bottom: 6px; }
    .fdp-stats { gap: 10px; margin-bottom: 8px; }
    .fdp-stats span { font-size: 12px; }
    .fdp-synopsis { font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
}