/* =======================================================================
   VF Magazine — StPageFlip v3  (classic theme)
   Two facing pages (cover ↔ content) like a real open book.
   Desktop : fixed 1100 × 640 px spread, centred.
   Mobile  : single cover page, full device width; content via modal.
   ======================================================================= */

/* ── Root tokens ───────────────────────────────────────────────────── */
:root {
    --vf-spread-w  : 768px;    /* total spread width  */
    --vf-spread-h  : calc(100vh - 140px);    /* spread height        */
    --vf-page-w    : 384px;    /* single page = half   */
    --vf-accent    : #e8192c;
    --vf-accent-glow: rgba(232,25,44,.50);
    --vf-bg        : #0d0d0d;
    --vf-paper     : #fafaf8;
    --vf-paper-dark: #0f172a;
    --vf-ease      : cubic-bezier(.25,.46,.45,.94);
}

/* ── Full-viewport layout ──────────────────────────────────────────── */
.body-feed-page {
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
.body-feed-page > main {
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.body-feed-page footer,
.body-feed-page .btn-scroll-up    { display: none !important; }
.body-feed-page #sticky-menu-wrapper,
.body-feed-page .header-brand     { display: none; }
.body-feed-page main              { padding: 0 !important; }
.body-feed-page .vf-section       { padding: 0 !important; margin: 0; }

/* ── Mobile: hide ALL headers (mobile nav, desktop nav) on feed pages ── */
@media (max-width: 991.98px) {
    .body-feed-page .lg\:hidden.sticky,
    .body-feed-page .mobile-header,
    .body-feed-page [class*="nav_mobile"],
    .body-feed-page > div > .lg\:hidden {
        display: none !important;
    }
}

/* ── App root ──────────────────────────────────────────────────────── */
.vf-magazine-app {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   UNIFIED TOPBAR — logo + tabs/title + profile avatar
   Replaces the old desktop top bar + main nav + mobile header on ALL pages.
   ═══════════════════════════════════════════════════════════════════════ */
.vf-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height:55px;
    width: var(--vf-spread-w, 768px);
    margin: 0 auto;
    background: var(--bs-body-bg, #ffffff);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: none;
    flex-shrink: 0;
}
/* v4.2.4 — on mobile, topbar should be full width (not 768px) */
@media (max-width: 991.98px) {
    .vf-topbar {
        width: 100%;
    }
}
[data-bs-theme="dark"] .vf-topbar {
    background: rgba(15, 23, 42, .95);
}
.vf-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 56px;
    padding: 0 16px;
    /* Width matches flipbook on desktop, full width on mobile */
    max-width: var(--vf-spread-w, 768px);
    margin: 0 auto;
}
/* Logo — fixed height, flex-shrink so it doesn't get squeezed */
.vf-topbar__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.vf-topbar__logo img {
    height: 32px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}
/* Center area — flex-1, holds tabs OR title */
.vf-topbar__center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Dynamic page title (category, tag, post, etc.) */
.vf-topbar__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--bs-body-color, #1f2937);
    margin: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
[data-bs-theme="dark"] .vf-topbar__title { color: #f1f5f9; }

/* Tabs inside topbar — override the old .vf-tabs-bar width */
.vf-topbar .vf-tabs-bar {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    gap: 14px !important;
}

/* Actions (profile / login) — flex-shrink, end edge */
.vf-topbar__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Profile avatar button */
.vf-topbar__avatar-btn {
    appearance: none;
    border: 2px solid var(--bs-border-color, rgba(0,0,0,.12));
    background: transparent;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: border-color .15s, transform .1s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.vf-topbar__avatar-btn:hover { border-color: var(--vf-accent, #e8192c); }
.vf-topbar__avatar-btn:active { transform: scale(.93); }
.vf-topbar__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
/* Login button (for guests) */
.vf-topbar__login-btn {
    appearance: none;
    border: 1px solid var(--bs-border-color, rgba(0,0,0,.15));
    background: transparent;
    color: var(--bs-body-color, #475569);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s, color .15s;
}
.vf-topbar__login-btn:hover {
    background: var(--vf-accent, #e8192c);
    color: #fff;
    border-color: transparent;
}
[data-bs-theme="dark"] .vf-topbar__login-btn { color: #cbd5e1; border-color: rgba(255,255,255,.15); }

/* ── Hide ALL old theme navigations — vf-topbar replaces them on EVERY page ── */
/* Mobile sticky bar (div.lg:hidden.sticky rendered by nav_mobile.php) */
.lg\:hidden.sticky                    { display: none !important; }
/* Old desktop top-bar & main-nav (hidden.lg:block wrappers) */
header.hidden.lg\:block,
div.hidden.lg\:block                  { display: none !important; }
/* Old sticky menu + branded header */
#sticky-menu-wrapper,
.header-brand                         { display: none !important; }

/* ── Universal 768 px content container — all pages, all breakpoints ──── */
/* Overrides Tailwind's max-w-7xl (1280 px) from tailwind.css             */
.vf-container {
    width: 100%;
    max-width: var(--vf-spread-w, 768px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* Mobile: topbar padding */
@media (max-width: 991.98px) {
    .vf-topbar__inner {
        height: 52px;
        padding: 0 12px;
        gap: 8px;
    }
    .vf-topbar__logo img { height: 28px; }
    .vf-topbar__avatar { width: 30px; height: 30px; }
    .vf-topbar__title { font-size: 14px; }
    .vf-topbar .vf-tabs-bar { gap: 10px !important; }
}

/* ── Tab bar — width matches flipbook, no background/border, icon-only for inactive ── */
.vf-tabs-bar {
    width: 100%;
    max-width: var(--vf-spread-w);
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: center !important;
    padding-inline: 12px;
    gap: 16px !important;
    background: transparent;
    border: none;
}
.vf-tabs-bar::-webkit-scrollbar { display: none; }

/* Tab buttons — no background, no border. Inactive: icon only. Active: icon + text. */
.vf-tab-btn {
    background: transparent !important;
    border: none !important;
    color: var(--bs-secondary-color, #94a3b8);
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s ease;
    flex-shrink: 0;
}
.vf-tab-btn:hover { color: var(--bs-body-color, #475569); }
/* Inactive: hide text, show icon only */
.vf-tab-btn .vf-tab-text { display: none; }
.vf-tab-btn .vf-tab-icon { display: inline-flex; }

/* Active: show icon + text, accent color */
.vf-tab-btn.is-active {
    color: var(--vf-accent, #e8192c);
    background: transparent !important;
}
.vf-tab-btn.is-active .vf-tab-text { display: inline; }
.vf-tab-btn.is-active .vf-tab-icon { display: inline-flex; }

[data-bs-theme="dark"] .vf-tab-btn { color: #64748b; }
[data-bs-theme="dark"] .vf-tab-btn:hover { color: #e2e8f0; }
[data-bs-theme="dark"] .vf-tab-btn.is-active { color: var(--vf-accent, #e8192c); }

/* Mobile: tab bar scrollable, full width */
@media (max-width: 991.98px) {
    .vf-tabs-bar {
        max-width: 100%;
        justify-content: flex-start !important;
        gap: 14px !important;
    }
}

/* ── Section (one per tab) ─────────────────────────────────────────── */
.vf-magazine-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    overflow: hidden;
    align-items: center;         /* centre horizontally */
}
.vf-magazine-section.hidden { display: none !important; }

/* ── Magazine backdrop area ────────────────────────────────────────── */
.vf-magazine {
    /* Fixed dimensions — centred both axes */
    width: var(--vf-spread-w);
    height: var(--vf-spread-h);
    max-width: 100%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    /* Transparent background — no black backdrop */
    background: transparent;
    box-shadow: none;
    border-radius: 12px;
}

/* Book page-stack effect: VERTICAL lines on the OUTER edges of the
   spread (left edge of left page, right edge of right page) simulating
   the thickness of stacked pages in a real book.
   The number of lines on each side is controlled by CSS variables
   --vf-spine-left and --vf-spine-right, set by magazine.js.
   Default: 0 lines (no stack visible on single-page or initial load). */
.vf-magazine {
    --vf-spine-left: 0;
    --vf-spine-right: 0;
}


/* On mobile the magazine fills the available viewport height.
   Header is hidden (CSS above), so: 100svh - tabbar(44) - navPreview(68) - sectionPadding(24) */
@media (max-width: 991.98px) {
    .vf-magazine {
        width: 100%;
        height: calc(100svh - 44px - 68px - 24px);
        min-height: 300px;
        border-radius: 12px;
        background: transparent;
        box-shadow: none;
    }
    /* Mobile: no book-edge effect (single page) */
    .vf-magazine::before,
    .vf-magazine::after { display: none; }
}

/* StPageFlip render target — must fill the magazine div */
.vf-flipbook-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    /* Desktop: allow vertical scroll on content page via touch.
       Mobile: NONE — StPageFlip needs full control of touch to complete
       the flip. pan-y lets the browser steal vertical drags, causing the
       page to snap back before completing. */
    touch-action: pan-y;
}
@media (max-width: 991.98px) {
    .vf-flipbook-wrap {
        touch-action: none;  /* mobile: StPageFlip owns ALL touch events */
    }
}

/* ── Individual .page elements ─────────────────────────────────────── */
/*
  StPageFlip absolutely-positions these inside .vf-flipbook-wrap.
  Each .page = one half of the open book (384 × 550 px on desktop).
*/
.page {
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    background: transparent;
}
/* Cover page: rounded on the OUTER edge only (left for LTR) */
.page.page--cover {
    background: #000;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* Content page: rounded on the OUTER edge only (right for LTR) */
.page.page--content {
    background: var(--vf-paper);
    overflow: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(120,120,120,.3) transparent;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}
.page.page--content::-webkit-scrollbar       { width: 4px; }
.page.page--content::-webkit-scrollbar-thumb { background: rgba(120,120,120,.3); border-radius: 2px; }

[data-bs-theme="dark"] .page.page--content {
    background: var(--vf-paper-dark);
    color: #e2e8f0;
}

/* Mobile: content page never rendered — hide if somehow present */
@media (max-width: 991.98px) {
    .page.page--content { display: none !important; }
}
.vf-recommendation-page { background: var(--vf-paper, #fff); color: var(--vf-ink, #172033); overflow: hidden; }
.vf-recommendation-inner { width: 100%; height: 100%; min-height: 100%; box-sizing: border-box; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.vf-recommendation-cover-art { width: 180px; height: 120px; color: var(--vf-primary, #e85d75); margin-bottom: 14px; }
.vf-recommendation-cover-art svg { width: 100%; height: 100%; fill: color-mix(in srgb, var(--vf-primary, #e85d75) 12%, transparent); stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vf-recommendation-inner h2 { margin: 0; font-size: clamp(18px, 2.2vw, 18px); font-weight: 600; }
.vf-recommendation-page--content .vf-recommendation-inner h2{display:none !important};

.vf-recommendation-page--cover p {
    font-size: 14px;
    margin-top: 20px;
    opacity: 0.7;
}
.vf-recommendation-grid { width: 100%; max-width: 680px; padding-top:20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
.vf-recommendation-person { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.vf-recommendation-person img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 3px solid color-mix(in srgb, var(--vf-primary, #e85d75) 25%, transparent); }
.vf-recommendation-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; color: inherit; text-decoration: none; }
.vf-recommendation-follow { border: 0; border-radius: 999px; padding: 4px 13px; background: var(--vf-primary, #e85d75); color: #fff; font-size: 11px; cursor: pointer; }
@media (max-width: 991.98px) {
    .vf-recommendation-page { width: 100% !important; height: auto !important; min-height: 100%; }
    .vf-recommendation-page--cover { display: none !important; }
    .page.page--content.vf-recommendation-page--content { display: block !important; }
    .vf-recommendation-page--content .vf-recommendation-inner { padding: 22px 14px; }
    .vf-recommendation-page--content .vf-recommendation-inner h2 { display:block !important; margin-bottom: 18px; }
    .vf-recommendation-grid { gap: 16px 8px; }
    .vf-recommendation-person img { width: 52px; height: 52px; }
}

/* ── Cover card ────────────────────────────────────────────────────── */
.vf-cover-card {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.vf-cover__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ken-Burns on active page */
    transition: transform 9s ease-out;
    transform: scale(1.0);
}
.vf-cover-card.is-active .vf-cover__img { transform: scale(1.05); }

.vf-cover__placeholder {
    position: absolute;
    inset: 0;
}

/* Gradient overlays */
.vf-cover__shade-top {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 32%;
    background: linear-gradient(to bottom, rgba(0,0,0,.70) 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}
.vf-cover__shade-bottom {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 65%;
    background: linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.50) 38%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* Category pill */
.vf-cover__cat {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    z-index: 10;
    max-width: 54%;
    padding: 4px 11px;
    border-radius: 999px;
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .03em;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
    transition: filter .15s;
}
.vf-cover__cat:hover { filter: brightness(1.14); }

/* Format badge */
.vf-cover__badge {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,.52);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Author row */
.vf-cover__author-row {
    position: absolute;
    top: 50px;
    inset-inline: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.vf-cover__author {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff !important;
    text-decoration: none;
    min-width: 0;
}
.vf-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.85);
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
.vf-cover__author-name {
    font-weight: 700;
    font-size: 12px;
    text-shadow: 0 1px 4px rgba(0,0,0,.7);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Follow button */
.vf-cover__follow {
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.60);
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .15s, transform .1s;
    letter-spacing: .02em;
}
.vf-cover__follow:hover  { background: rgba(255,255,255,.28); }
.vf-cover__follow:active { transform: scale(.94); }

/* Meta (date, views, edit) */
.vf-cover__meta {
    position: absolute;
    top: 90px;
    inset-inline: 12px;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 10.5px;
    color: rgba(255,255,255,.85);
    text-shadow: 0 1px 3px rgba(0,0,0,.65);
}
.vf-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.vf-meta-edit { color: #fff !important; text-decoration: underline; }

/* Bottom area: title + summary + buttons */
.vf-cover__bottom {
    position: absolute;
    inset-inline: 14px;
    bottom: 12px;
    z-index: 10;
}
.vf-cover__title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.27;
    text-shadow: 0 2px 8px rgba(0,0,0,.85);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -.01em;
}
.vf-cover__title a { color: #fff; text-decoration: none; }
.vf-cover__title a:hover { text-decoration: underline; }

.vf-cover__summary {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255,255,255,.88);
    text-shadow: 0 1px 4px rgba(0,0,0,.75);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mobile "Read article" button */
.vf-read-btn {
    display: none; /* hidden on desktop, shown via media query */
    appearance: none;
    border: 0;
    background: var(--vf-accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    box-shadow: 0 4px 14px var(--vf-accent-glow);
    transition: filter .15s, transform .1s;
    letter-spacing: .02em;
}
.vf-read-btn:hover  { filter: brightness(1.1); }
.vf-read-btn:active { transform: scale(.95); }

@media (max-width: 991.98px) {
    .vf-read-btn { display: inline-flex; }
}

/* Action buttons row */
.vf-cover__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Compact on mobile so they don't overflow */
@media (max-width: 991.98px) {
    .vf-cover__actions { gap: 5px; }
}

.vf-action-btn {
    appearance: none;
    border: 0;
    background: rgba(0,0,0,.48);
    color: #fff;
    height: 36px;
    padding: 0 11px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    white-space: nowrap;
    transition: background .15s, transform .1s;
    flex-shrink: 0;
}
.vf-action-btn:hover  { background: rgba(0,0,0,.65); }
.vf-action-btn:active { transform: scale(.91); }

/* ── Content page inner layout ─────────────────────────────────────── */
.vf-content-inner {
    padding: 20px 20px 24px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;            /* clip at inner level, scroll happens in .vf-content-body */
}
.vf-content-loader {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*
   .vf-content-body is the SCROLLABLE container.
   The AJAX-injected HTML (.vf-spread-content) lives inside it.
   We make THIS element scroll, not the inner .vf-article-content.
   --- Bugfix (2025-01-15): also make it a flex container so the media
   spread can vertically center its content.
*/
.vf-content-body {
    flex: 1;
    overflow-y: auto !important;  /* SCROLL happens here */
    overflow-x: hidden;
    min-height: 0;                /* allow flex child to shrink */
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(120,120,120,.3) transparent;
}
.vf-content-body::-webkit-scrollbar       { width: 5px; }
.vf-content-body::-webkit-scrollbar-thumb { background: rgba(120,120,120,.3); border-radius: 3px; }
.vf-content-body::-webkit-scrollbar-track { background: transparent; }

/* The injected .vf-spread-content wrapper — just flow naturally */
.vf-spread-content {
    display: block;
    width: 100%;
    padding: 20px;
}

/* --- Bugfix (2025-01-15): Media posts (video/audio) — player only,
   no header/footer, vertically centered in the content page. --- */
.vf-spread-content--media {
    flex: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px;
    min-height: 0;
}
.vf-media-center {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* --- Adaptive video aspect ratio --- */
/* Portrait video (height > width) — fills the ENTIRE content page like TikTok/Reels */
.vf-video-adaptive.vf-video-portrait {
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vf-video-adaptive.vf-video-portrait video {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover; /* fill the page, crop edges if needed — TikTok style */
    border-radius: 0;
    background: transparent;
}
/* Landscape video (width >= height) — centered + vertically centered */
.vf-video-adaptive.vf-video-landscape {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vf-video-adaptive.vf-video-landscape video {
    width: 100%;
    height: auto;
    max-height: 100%;
    border-radius: 12px;
    background: transparent;
}
/* Default (before JS sets the class) */
.vf-video-adaptive:not(.vf-video-portrait):not(.vf-video-landscape) {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.vf-video-adaptive:not(.vf-video-portrait):not(.vf-video-landscape) video {
    width: 100%;
    height: auto;
    max-height: 100%;
    border-radius: 12px;
    background: transparent;
}

/* --- Bugfix (2025-01-15): video posts should NOT be constrained by
   the .vf-media-center max-width:400px (that's for audio only).
   Video needs to fill the full content page width. --- */
.vf-spread-content--media .vf-media-center:has(.vf-video-player-wrapper),
.vf-spread-content--media .vf-media-center:has(.vf-video-adaptive) {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* --- Custom video player wrapper --- */
.vf-video-player-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 12px;
    overflow: hidden;
    direction: ltr;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Hide native video controls completely */
.vf-video-player-wrapper video::-webkit-media-controls,
.vf-video-player-wrapper video::-webkit-media-controls-enclosure,
.vf-video-player-wrapper video::-webkit-media-controls-panel {
    display: none !important;
    -webkit-appearance: none !important;
}
.vf-video-player-wrapper video::-internal-media-controls {
    display: none !important;
}

/* --- Custom video controls --- */
.vf-video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s;
}
.vf-video-player-wrapper:hover .vf-video-controls,
.vf-video-player-wrapper.playing .vf-video-controls {
    opacity: 1;
}
.vf-video-play-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vf-video-player-wrapper .icon-pause { display: none; }
.vf-video-player-wrapper.playing .icon-play { display: none; }
.vf-video-player-wrapper.playing .icon-pause { display: inline-block; }

.vf-video-progress {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    min-width: 40px;
}
.vf-video-progress-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}
.vf-video-progress-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: var(--vf-accent, #e76f51);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}
.vf-video-time {
    color: white;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
}
.vf-video-mute-btn,
.vf-video-fullscreen-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vf-video-player-wrapper .icon-mute { display: none; }
.vf-video-player-wrapper.muted .icon-unmute { display: none; }
.vf-video-player-wrapper.muted .icon-mute { display: inline-block; }

/* Mobile: always show controls */
@media (max-width: 991.98px) {
    .vf-video-controls { opacity: 1 !important; }
}

/* Article typography — applies to BOTH .vf-article-body and .vf-article-content */
.vf-article-body,
.vf-article-content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--bs-body-color, #1f2937);
    width: 100%;
}
.vf-article-body::-webkit-scrollbar,
.vf-article-content::-webkit-scrollbar       { width: 4px; }
.vf-article-body::-webkit-scrollbar-thumb,
.vf-article-content::-webkit-scrollbar-thumb { background: rgba(120,120,120,.25); border-radius: 2px; }
[data-bs-theme="dark"] .vf-article-body,
[data-bs-theme="dark"] .vf-article-content   { color: #e2e8f0; }
.vf-article-body p, .vf-article-content p  { margin-bottom: .85rem; }
.vf-article-body h2, .vf-article-content h2 { font-size: 1.15rem; font-weight: 800; margin: 1.1rem 0 .45rem; }
.vf-article-body h3, .vf-article-content h3 { font-size: 1rem; font-weight: 700; margin: .9rem 0 .35rem; }
.vf-article-body img, .vf-article-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.vf-article-body ul, .vf-article-content ul,
.vf-article-body ol, .vf-article-content ol  { padding-inline-start: 1.3rem; margin-bottom: .85rem; }
.vf-article-body blockquote, .vf-article-content blockquote {
    border-inline-start: 3px solid var(--vf-accent);
    padding-inline-start: 1rem;
    margin: 1rem 0;
    color: var(--bs-secondary-color, #64748b);
    font-style: italic;
}
.vf-article-body a, .vf-article-content a { color: var(--vf-accent); text-underline-offset: 3px; }

/* Content page header block */
.vf-content-header {
    flex-shrink: 0;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--bs-border-color, rgba(0,0,0,.1));
}
.vf-content-header__title {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 5px;
    color: var(--bs-body-color, #0f172a);
}
[data-bs-theme="dark"] .vf-content-header__title { color: #f1f5f9; }
.vf-content-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 10.5px;
    color: var(--bs-secondary-color, #64748b);
}
.vf-content-header__meta-item { display: inline-flex; align-items: center; gap: 3px; }

/* ── Progress bar (top edge of .vf-magazine) ───────────────────────── */
.vf-progress-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 60;
    pointer-events: none;
    background: rgba(255,255,255,.06);
}
.vf-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--vf-accent), #ff7b95);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px var(--vf-accent-glow);
    transition: width .5s var(--vf-ease);
    min-width: 0;
    width: 0%;
}

/* ── Swipe / keyboard navigation hint ──────────────────────────────── */
.vf-nav-hint {
    position: absolute;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s ease;
    background: rgba(0,0,0,.20);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.vf-nav-hint.is-visible { opacity: 1; }
.vf-nav-hint__arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.92);
}
.vf-nav-hint__arrow svg {
    width: 42px;
    height: 42px;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    padding: 11px;
    border: 1.5px solid rgba(255,255,255,.22);
    animation: vf-pulse 2s ease-in-out infinite;
}
.vf-nav-hint__arrow:last-child svg { animation-delay: .3s; }
.vf-nav-hint__arrow span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0,0,0,.7);
    background: rgba(0,0,0,.42);
    backdrop-filter: blur(6px);
    padding: 3px 8px;
    border-radius: 999px;
}
.vf-nav-hint__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.95);
}
.vf-nav-hint__icon {
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,.50);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255,255,255,.25);
    animation: vf-swipe 2s ease-in-out infinite;
}
.vf-nav-hint__text {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0,0,0,.7);
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    padding: 4px 14px;
    border-radius: 999px;
}
@keyframes vf-pulse {
    0%,100% { transform: scale(1);    opacity: .8; }
    50%      { transform: scale(1.12); opacity: 1;  }
}
@keyframes vf-swipe {
    0%  { transform: translateX(0);     opacity: .65; }
    30% { transform: translateX(-10px); opacity: 1;   }
    70% { transform: translateX(10px);  opacity: 1;   }
    100%{ transform: translateX(0);     opacity: .65; }
}

/* ── Fetch-more loader badge ────────────────────────────────────────── */
.vf-fetch-loader {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    display: none;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    padding: 7px 16px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
    pointer-events: none;
}
.vf-fetch-loader.is-loading { display: flex; }

/* ── Navigation preview bar (below the flipbook) ───────────────────── */
/*
  Full width of the section — NOT constrained to flipbook width.
  Height is fixed so it never affects the flipbook dimensions above.
*/
.vf-nav-preview {
    flex-shrink: 0;
    width: 100%;
    max-width: var(--vf-spread-w);
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border-top: none;
    min-height: 60px;
    max-height: 68px;
}
.vf-nav-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--bs-border-color, rgba(0,0,0,.1));
    border-radius: 10px;
    background: var(--bs-body-bg, #fff);
    cursor: pointer;
    text-align: start;
    appearance: none;
    color: inherit;
    transition: background .15s, border-color .15s, transform .12s;
    overflow: hidden;
}
.vf-nav-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--vf-accent) 7%, var(--bs-body-bg, #fff));
    border-color: var(--vf-accent);
    transform: translateY(-1px);
}
.vf-nav-btn:disabled { opacity: .35; cursor: not-allowed; }
.vf-nav-btn--prev { flex-direction: row; }
.vf-nav-btn--next { flex-direction: row-reverse; text-align: end; }
.vf-nav-btn__thumb {
    width: 42px;
    height: 42px;
    border-radius: 7px;
    object-fit: cover;
    flex-shrink: 0;
}
.vf-nav-btn__thumb--empty {
    width: 42px;
    height: 42px;
    border-radius: 7px;
    background: rgba(0,0,0,.06);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #aaa;
}
.vf-nav-btn__info {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.vf-nav-btn__label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--vf-accent);
    white-space: nowrap;
}
.vf-nav-btn__title {
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bs-body-color, #1f2937);
}
.vf-nav-btn__type {
    font-size: 9.5px;
    color: var(--bs-secondary-color, #94a3b8);
    white-space: nowrap;
}

/* ── IntersectionObserver sentinel ─────────────────────────────────── */
.vf-sentinel {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* ── Dark mode ──────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .vf-nav-btn         { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
[data-bs-theme="dark"] .vf-nav-btn:hover:not(:disabled) { background: rgba(232,25,44,.09); }
[data-bs-theme="dark"] .vf-nav-btn__title  { color: #e2e8f0; }
[data-bs-theme="dark"] .vf-nav-preview     { background: #0a0f1e; border-color: rgba(255,255,255,.07); }
[data-bs-theme="dark"] .vf-content-header  { border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] .vf-progress-wrap   { background: rgba(255,255,255,.05); }
[data-bs-theme="dark"] .vf-nav-btn__thumb--empty { background: rgba(255,255,255,.06); color: #666; }
[data-bs-theme="dark"] .vf-magazine        { box-shadow: 0 0 80px rgba(0,0,0,.9) inset, 0 20px 60px rgba(0,0,0,.7); }

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .vf-progress-bar { transition: none !important; }
    .vf-nav-hint__arrow svg,
    .vf-nav-hint__icon { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   StPageFlip — ensure buttons/links inside pages are clickable
   The canvas (shadow renderer) must NOT block pointer events.
   Page items MUST accept pointer events for buttons to work.
   ═══════════════════════════════════════════════════════════════════════ */
.stf__wrapper canvas {
    pointer-events: none !important;
}
.stf__item,
.stf__item .page {
    pointer-events: auto !important;
}
/* Ensure all interactive elements inside pages are clickable */
.stf__item a,
.stf__item button,
.stf__item [data-vf-read],
.stf__item [data-vf-share],
.stf__item [data-vf-react],
.stf__item [data-vf-comment],
.stf__item [data-vf-save],
.stf__item [data-vf-follow],
.stf__item .vf-cover__cat,
.stf__item .vf-cover__author,
.stf__item .vf-meta-edit,
.stf__item .vf-read-btn,
.stf__item .vf-action-btn,
.stf__item .vf-cover__follow {
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODAL BACKGROUNDS — explicit colours so they're never transparent
   ═══════════════════════════════════════════════════════════════════════ */

/* Bootstrap backdrop — always dark, always opaque */
.modal-backdrop.show {
    opacity: 0.85 !important;
    background: #000 !important;
}

/* Modal content — explicit solid background */
.body-feed-page .modal-content,
#vfReadModal .modal-content,
#vfCommentModal .modal-content,
#vfShareModal .modal-content,
#vfReactionModal .modal-content,
#vfAboutModal .modal-content,
#vfFollowersModal .modal-content,
#vfFollowingModal .modal-content {
    background: #ffffff !important;
    color: #1f2937 !important;
}

/* Dark mode — dark modal background */
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] #vfReadModal .modal-content,
[data-bs-theme="dark"] #vfCommentModal .modal-content,
[data-bs-theme="dark"] #vfShareModal .modal-content,
[data-bs-theme="dark"] #vfReactionModal .modal-content,
[data-bs-theme="dark"] #vfAboutModal .modal-content,
[data-bs-theme="dark"] #vfFollowersModal .modal-content,
[data-bs-theme="dark"] #vfFollowingModal .modal-content {
    background: #0f172a !important;
    color: #e2e8f0 !important;
}

/* Modal headers/borders match background */
.body-feed-page .modal-header {
    background: inherit !important;
}
[data-bs-theme="dark"] .modal-header {
    background: inherit !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   END-OF-FEED PAGE — professional "you've reached the end" page.
   On desktop the end page spans the FULL flipbook width (both pages).
   On mobile it spans the single page.
   ═══════════════════════════════════════════════════════════════════════ */
.page--end {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Span full flipbook width on desktop (both pages combined) */
    width: 100% !important;
}
.vf-end-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
}
.vf-end-page__icon {
    width: 80px;
    height: 80px;
    color: var(--vf-accent, #e8192c);
    opacity: 0.8;
    margin-bottom: 24px;
    animation: vf-end-pulse 2.5s ease-in-out infinite;
}
.vf-end-page__title {
    font-size: 20px;
    font-weight: 800;
    color: var(--bs-body-color, #1f2937);
    margin: 0 0 8px;
    text-align: center;
}
.vf-end-page__subtitle {
    font-size: 14px;
    color: var(--bs-secondary-color, #64748b);
    margin: 0;
    text-align: center;
}
[data-bs-theme="dark"] .vf-end-page__title    { color: #f1f5f9; }
[data-bs-theme="dark"] .vf-end-page__subtitle { color: #94a3b8; }

@keyframes vf-end-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.8; }
    50%      { transform: scale(1.08); opacity: 1;   }
}

/* Mobile: end page fills full width */
@media (max-width: 991.98px) {
    .vf-end-page__icon { width: 64px; height: 64px; }
    .vf-end-page__title { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   EMPTY PAGE — "no posts yet" (single page, no pair)
   ═══════════════════════════════════════════════════════════════════════ */
.page--empty {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}
.vf-empty-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
}
.vf-empty-page__icon {
    width: 72px;
    height: 72px;
    color: var(--bs-secondary-color, #94a3b8);
    opacity: 0.6;
    margin-bottom: 20px;
}
.vf-empty-page__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--bs-body-color, #1f2937);
    margin: 0 0 8px;
    text-align: center;
}
.vf-empty-page__subtitle {
    font-size: 13px;
    color: var(--bs-secondary-color, #64748b);
    margin: 0;
    text-align: center;
}
[data-bs-theme="dark"] .vf-empty-page__title    { color: #f1f5f9; }
[data-bs-theme="dark"] .vf-empty-page__subtitle { color: #94a3b8; }

@media (max-width: 991.98px) {
    .vf-empty-page__icon { width: 56px; height: 56px; }
    .vf-empty-page__title { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SINGLE POST PAGE — scrollable article layout (body-post-page)
   The controller assigns this class so no JS class-swap is needed.
   ═══════════════════════════════════════════════════════════════════════ */
.body-post-page {
    height: auto;
    overflow-y: auto;
}
.body-post-page > main {
    overflow: visible;
    display: block;
    flex: unset;
    min-height: unset;
}
.body-post-page footer,
.body-post-page .btn-scroll-up { display: block !important; }

/* Legacy alias — kept for backward compat */
.body-single-post {
    height: auto !important;
    overflow: auto !important;
}
.body-single-post > main {
    overflow: visible !important;
    display: block !important;
}
.body-single-post footer { display: block !important; }

.vf-single-post {
    padding: 16px;
    max-width: var(--vf-spread-w, 768px);
    margin: 0 auto;
}
.vf-single-post__book {
    display: flex;
    flex-direction: row;
    gap: 0;
    width: 100%;
    aspect-ratio: 768 / 550;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.2);
    position: relative;
}
/* Book page-stack edges */
.vf-single-post__book::before,
.vf-single-post__book::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 8px;
    z-index: 35;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(0,0,0,.08) 0px, rgba(0,0,0,.08) 1px, transparent 1px, transparent 3px);
}
.vf-single-post__book::before { left: 0; border-right: 1px solid rgba(0,0,0,.15); background: repeating-linear-gradient(to bottom, rgba(0,0,0,.08) 0px, rgba(0,0,0,.08) 1px, transparent 1px, transparent 3px), linear-gradient(270deg, rgba(0,0,0,.12) 0%, transparent 100%); }
.vf-single-post__book::after { right: 0; border-left: 1px solid rgba(0,0,0,.15); background: repeating-linear-gradient(to bottom, rgba(0,0,0,.08) 0px, rgba(0,0,0,.08) 1px, transparent 1px, transparent 3px), linear-gradient(90deg, rgba(0,0,0,.12) 0%, transparent 100%); }
/* Each page = half the book */
.vf-sp-page {
    flex: 1 1 50%;
    position: relative;
    overflow: hidden;
    min-width: 0;
}
.vf-sp-page--cover { background: #000; }
.vf-sp-page--content {
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1f2937);
}
[data-bs-theme="dark"] .vf-sp-page--content { background: var(--vf-paper-dark, #0f172a); }

/* Content page inner — scrollable, fills the page */
.vf-content-inner {
    padding: 0;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.vf-sp-content-body {
    flex: 1;
    overflow-y: auto !important;
    overflow-x: hidden;
    min-height: 0;
    padding: 20px 22px 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(120,120,120,.3) transparent;
    display: block;
}
.vf-sp-content-body::-webkit-scrollbar { width: 5px; }
.vf-sp-content-body::-webkit-scrollbar-thumb { background: rgba(120,120,120,.3); border-radius: 3px; }
.vf-sp-content-body .vf-article-content { font-size: 14px; line-height: 1.8; }
.vf-sp-content-body .vf-article-content p { margin-bottom: .85rem; }
.vf-sp-content-body .vf-article-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }
.vf-sp-content-body .vf-article-content h2 { font-size: 1.15rem; font-weight: 800; margin: 1.1rem 0 .45rem; }
.vf-sp-content-body .vf-article-content h3 { font-size: 1rem; font-weight: 700; margin: .9rem 0 .35rem; }
.vf-sp-content-body .vf-article-content ul,
.vf-sp-content-body .vf-article-content ol { padding-inline-start: 1.3rem; margin-bottom: .85rem; }
.vf-sp-content-body .vf-article-content blockquote {
    border-inline-start: 3px solid var(--vf-accent, #e8192c);
    padding-inline-start: 1rem;
    margin: 1rem 0;
    color: var(--bs-secondary-color, #64748b);
    font-style: italic;
}

/* Audio list — styled audio player for flipbook feed + single post */
.vf-sp-audio-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.vf-sp-audio-item {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    direction: ltr;
}
.vf-sp-audio-item audio {
    width: 100%;
    height: 40px;
    border-radius: 8px;
}
/* Dark mode */
.dark .vf-sp-audio-item,
[data-bs-theme="dark"] .vf-sp-audio-item {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: #334155;
}
/* Mobile responsive */
@media (max-width: 991.98px) {
    .vf-sp-audio-item {
        padding: 8px;
        gap: 8px;
    }
    .vf-sp-audio-item audio {
        height: 36px;
    }
}

/* --- Bugfix (2025-01-15): full audio player container styling --- */
.vf-audio-player {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
}
.dark .vf-audio-player,
[data-bs-theme="dark"] .vf-audio-player {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: #334155;
}
.vf-audio-cover {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}
.vf-audio-cover img {
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.vf-audio-track-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.dark .vf-audio-track-num,
[data-bs-theme="dark"] .vf-audio-track-num {
    background: #334155;
    color: #cbd5e1;
}
.vf-audio-name {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    flex-shrink: 0;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dark .vf-audio-name,
[data-bs-theme="dark"] .vf-audio-name {
    color: #94a3b8;
}

/* --- Bugfix (2025-01-15): Custom audio player with circular progress --- */
.vf-audio-player-wrapper {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    direction: ltr;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* Vertical centering + fill height so the player sits in the middle
       of the content page and grows/shrinks with the playlist. */
    min-height: 100%;
    height: 100%;
    margin: 0 auto;
}
.dark .vf-audio-player-wrapper,
[data-bs-theme="dark"] .vf-audio-player-wrapper {
    background: transparent;
    border: none;
}

/* Cover art */
.vf-audio-player-wrapper .amp-cover-wrap {
    display: flex;
    justify-content: center;
}
.vf-audio-player-wrapper .amp-cover-art {
    width: 180px;
    height: 180px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* Circular player: progress ring + play/pause button */
.vf-circular-player {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    flex-shrink: 0;
}
/* SVG progress ring */
.vf-progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg); /* start from top */
}
.vf-progress-bg {
    stroke: rgba(231, 111, 81, 0.2); /* theme color at 20% opacity */
}
.dark .vf-progress-bg,
[data-bs-theme="dark"] .vf-progress-bg {
    stroke: rgba(231, 111, 81, 0.25);
}
.vf-progress-fill {
    stroke: var(--vf-accent, #e76f51); /* theme color */
    transition: stroke-dashoffset 0.1s linear;
}
/* Play/Pause button (centered inside the ring) */
.vf-play-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: transparent; /* transparent — no faint background */
    color: var(--vf-accent, #e76f51);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 1;
}
.vf-play-btn:hover {
    background: var(--vf-accent, #e76f51);
    color: white;
    transform: scale(1.05);
}
.dark .vf-play-btn,
[data-bs-theme="dark"] .vf-play-btn {
    background: transparent;
    color: var(--vf-accent, #e76f51);
}
.dark .vf-play-btn:hover,
[data-bs-theme="dark"] .vf-play-btn:hover {
    background: var(--vf-accent, #e76f51);
    color: white;
}
/* Play/Pause icon visibility */
.vf-audio-player-wrapper .icon-pause { display: none; }
.vf-audio-player-wrapper.playing .icon-play { display: none; }
.vf-audio-player-wrapper.playing .icon-pause { display: inline-block; }

/* Time row */
.vf-time-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 300px;
    font-size: 12px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.dark .vf-time-row,
[data-bs-theme="dark"] .vf-time-row {
    color: #94a3b8;
}

/* Playlist — grows vertically with the number of tracks */
.vf-playlist {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 300px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
    flex: 1; /* allow the playlist to grow and fill available vertical space */
    min-height: 0; /* required for flex children to scroll correctly */
}
.vf-playlist::-webkit-scrollbar { width: 4px; }
.vf-playlist::-webkit-scrollbar-thumb { background: rgba(120,120,120,.3); border-radius: 2px; }
.vf-track {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.vf-track:hover {
    background: #e2e8f0;
}
.dark .vf-track:hover,
[data-bs-theme="dark"] .vf-track:hover {
    background: #334155;
}
.vf-track.active {
    background: rgba(231, 111, 81, 0.15);
}
.dark .vf-track.active,
[data-bs-theme="dark"] .vf-track.active {
    background: rgba(231, 111, 81, 0.25);
}
.vf-track-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #cbd5e1;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.vf-track.active .vf-track-num {
    background: var(--vf-accent, #e76f51);
    color: white;
}
.vf-track-name {
    font-size: 13px;
    color: #475569;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dark .vf-track-name,
[data-bs-theme="dark"] .vf-track-name {
    color: #cbd5e1;
}

/* Mobile responsive */
@media (max-width: 991.98px) {
    .vf-audio-player-wrapper .amp-cover-art { width: 140px; height: 140px; }
    .vf-circular-player { width: 70px; height: 70px; }
    .vf-play-btn { width: 48px; height: 48px; }
    .vf-play-btn svg { width: 22px; height: 22px; }
    .vf-progress-ring { width: 70px; height: 70px; }
}

/* Mobile: single post = cover only, content below */
@media (max-width: 991.98px) {
    .vf-single-post__book {
        flex-direction: column;
        aspect-ratio: auto;
        height: auto;
    }
    .vf-sp-page {
        flex: 1 1 100%;
        width: 100%;
    }
    .vf-sp-page--cover { aspect-ratio: 4/5; }
    .vf-sp-page--content { aspect-ratio: auto; min-height: 400px; }
    .vf-sp-content-body { position: relative; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RELATED POSTS — grid layout below single post
   ═══════════════════════════════════════════════════════════════════════ */
.vf-related-posts {
    max-width: var(--vf-spread-w, 768px);
    margin: 24px auto 0;
    padding: 0 12px;
}
.vf-related-posts__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--bs-body-color, #1f2937);
    margin: 0 0 16px;
}
[data-bs-theme="dark"] .vf-related-posts__title { color: #f1f5f9; }

.vf-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 768px) {
    .vf-related-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

.vf-related-card {
    border: 1px solid var(--bs-border-color, rgba(0,0,0,.08));
    border-radius: 12px;
    overflow: hidden;
    background: var(--bs-body-bg, #fff);
    transition: transform .15s, box-shadow .15s;
}
.vf-related-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
[data-bs-theme="dark"] .vf-related-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }

.vf-related-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.vf-related-card__thumb {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #111;
}
.vf-related-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}
.vf-related-card:hover .vf-related-card__thumb img { transform: scale(1.05); }

.vf-related-card__body { padding: 10px 12px 12px; }
.vf-related-card__cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
    text-decoration: none;
}
.vf-related-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--bs-body-color, #1f2937);
    margin: 0 0 6px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
[data-bs-theme="dark"] .vf-related-card__title { color: #e2e8f0; }

.vf-related-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--bs-secondary-color, #94a3b8);
}
.vf-related-card__author { font-weight: 600; }
.vf-related-card__type {
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .vf-related-card__type { background: rgba(255,255,255,.08); }

/* ── Trending badge on cover card ────────────────────────────────── */
.vf-cover__trending {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.25);
    backdrop-filter: blur(4px);
    color: #fbbf24;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.vf-cover__trending svg {
    flex-shrink: 0;
}

/* ── v3.7.4: Post location pill ────────────────────────────────────
   Shows "Near {city}, {country}" BELOW the meta row (date + views) in
   the cover header area.  Positioned absolutely so it sits right under
   .vf-cover__meta (which is at top:90px).  Full white text for maximum
   readability over the cover image. */
.vf-cover__location {
    position: absolute;
    top: 122px;                /* meta is at top:90px + ~32px height */
    inset-inline-start: 12px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #ffffff;            /* full white as requested */
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    max-width: calc(100% - 24px);
    text-shadow: 0 1px 3px rgba(0,0,0,.7);
}
.vf-cover__location svg {
    flex-shrink: 0;
    opacity: 1;
}
.vf-cover__location span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-bs-theme="dark"] .vf-cover__location {
    background: rgba(0, 0, 0, 0.40);
}

/* ── v3.8.0: Page-level follow button (category & tag pages) ──────
   Renders in the page header of post/posts.php next to the <h1>.
   Two states:
     • default (not following) — solid primary button
     • .is-following           — outlined "Following" pill
   Uses the same .vf-follow-text-follow / .vf-follow-text-following
   span pattern as the feed-card follow buttons so the JS handler
   in page-follow.js can toggle them identically. */
.vf-page-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 2px solid transparent;
    background: var(--bs-primary, #6366f1);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
    white-space: nowrap;
    flex-shrink: 0;
}
.vf-page-follow-btn:hover {
    background: var(--bs-primary-rgb, #4f46e5);
    filter: brightness(1.08);
}
.vf-page-follow-btn:active { transform: scale(.96); }
.vf-page-follow-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.vf-page-follow-btn .vf-page-follow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* "Following" state — outlined pill */
.vf-page-follow-btn.is-following {
    background: transparent;
    border-color: var(--bs-primary, #6366f1);
    color: var(--bs-primary, #6366f1);
}
.vf-page-follow-btn.is-following:hover {
    background: rgba(var(--bs-primary-rgb, 99, 102, 241), 0.08);
    filter: none;
}

/* Dark theme tweaks — the page bg is light-on-dark in dark mode */
[data-bs-theme="dark"] .vf-page-follow-btn {
    color: #fff;
}
[data-bs-theme="dark"] .vf-page-follow-btn.is-following {
    border-color: rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.90);
}
[data-bs-theme="dark"] .vf-page-follow-btn.is-following:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ── v3.8.1: Follow-reason labels on cover cards ──────────────────
   Shown ONLY in the "Following" feed tab, above the post title.
   Each line: icon + "You follow {name}" in small white text.
   Multiple reasons (author + category + tag) stack vertically.

   Two variants:
   • .vf-cover__follow-reason          — flipbook spread (BEM card)
   • .vf-cover__follow-reason--card    — TikTok-style feed card
*/
.vf-cover__follow-reason {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 6px;
}
.vf-cover__follow-reason--card {
    margin-bottom: 4px;
}

.vf-follow-reason-line {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.vf-follow-reason-line svg {
    flex-shrink: 0;
    opacity: 0.9;
}
.vf-follow-reason-line span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Slight color accent per reason type for subtle differentiation */
.vf-follow-reason--author   { color: #ffffff; }
.vf-follow-reason--category { color: rgba(255, 255, 255, 0.95); }
.vf-follow-reason--tag      { color: rgba(255, 255, 255, 0.92); }

/* ── v3.9.0: Hashtag chips — horizontal scroll with edge fade ──────
   Renders post keywords as #hashtag chips in a single row that can be
   dragged (mouse + touch) when it overflows.  Gradient fades on both
   edges hint at hidden chips.

   Structure:
     .vf-hashtags              — relative wrapper (overflow hidden)
       .vf-hashtags__track     — flex row, the actual scrollable element
         .vf-hashtag-chip      — individual #tag link
       .vf-hashtags__fade      — absolute gradient overlay (start/end)

   Variants:
     (default)   — over cover image (white chips, dark text shadow)
     --card      — TikTok feed card variant (slightly smaller)
     --modal     — read modal variant (chips on light/dark bg, not image)
*/
.vf-hashtags {
    position: relative;
    width: 100%;
    margin-bottom: 8px;
    overflow: hidden;
    --vf-fade-size: 18px;
}
.vf-hashtags--card { margin-bottom: 10px; }
.vf-hashtags--modal { margin-bottom: 16px; }

.vf-hashtags__track {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;           /* Firefox — hide scrollbar */
    -ms-overflow-style: none;         /* IE/Edge — hide scrollbar */
    padding: 2px 2px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.vf-hashtags__track::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
.vf-hashtags__track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;            /* disable smooth during drag */
}
.vf-hashtags__track.is-dragging .vf-hashtag-chip {
    pointer-events: none;             /* prevent click while dragging */
}

/* Individual chip */
.vf-hashtag-chip {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    transition: background .15s, transform .1s;
}
.vf-hashtag-chip:hover {
    background: rgba(255, 255, 255, 0.30);
}
.vf-hashtag-chip:active { transform: scale(.95); }
.vf-hashtag-chip__hash {
    opacity: 0.7;
    font-weight: 700;
    margin-right: 1px;
}

/* Edge fade gradients — indicate hidden chips */
.vf-hashtags__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--vf-fade-size);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
    z-index: 2;
}
.vf-hashtags__fade--start {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
.vf-hashtags__fade--end {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
/* Show fades only when there's overflow on that side */
.vf-hashtags.has-start .vf-hashtags__fade--start { opacity: 1; }
.vf-hashtags.has-end .vf-hashtags__fade--end { opacity: 1; }

/* Modal variant — chips sit on a light/dark page bg, not an image.
   Use subtle border + muted bg instead of translucent white. */
.vf-hashtags--modal .vf-hashtag-chip {
    background: rgba(var(--bs-primary-rgb, 99, 102, 241), 0.10);
    color: var(--bs-primary, #6366f1);
    text-shadow: none;
    border: 1px solid rgba(var(--bs-primary-rgb, 99, 102, 241), 0.25);
}
.vf-hashtags--modal .vf-hashtag-chip:hover {
    background: rgba(var(--bs-primary-rgb, 99, 102, 241), 0.18);
}
[data-bs-theme="dark"] .vf-hashtags--modal .vf-hashtag-chip {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
}
[data-bs-theme="dark"] .vf-hashtags--modal .vf-hashtag-chip:hover {
    background: rgba(255, 255, 255, 0.14);
}
/* Modal fades use the page bg, not dark overlay */
.vf-hashtags--modal .vf-hashtags__fade--start {
    background: linear-gradient(to right, var(--bs-body-bg, #fff), rgba(255,255,255,0));
}
.vf-hashtags--modal .vf-hashtags__fade--end {
    background: linear-gradient(to left, var(--bs-body-bg, #fff), rgba(255,255,255,0));
}
[data-bs-theme="dark"] .vf-hashtags--modal .vf-hashtags__fade--start {
    background: linear-gradient(to right, var(--bs-body-bg, #0f172a), rgba(15,23,42,0));
}
[data-bs-theme="dark"] .vf-hashtags--modal .vf-hashtags__fade--end {
    background: linear-gradient(to left, var(--bs-body-bg, #0f172a), rgba(15,23,42,0));
}

/* RTL: nothing special needed — the track is logical-property aware,
   but the fade directions should swap.  We rely on `inset-inline-start`
   semantics via left/right which already mirror with `dir=rtl` on the
   document.  The linear-gradient direction stays the same because the
   fade--start is always on the visual left in LTR and visual right in
   RTL (browser flips `left`/`right` when `dir=rtl`? — no, it doesn't).
   So we explicitly handle RTL by swapping via [dir=rtl]: */
[dir="rtl"] .vf-hashtags__fade--start { left: auto; right: 0; }
[dir="rtl"] .vf-hashtags__fade--end   { right: auto; left: 0; }
[dir="rtl"] .vf-hashtags__fade--start {
    background: linear-gradient(to left, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
[dir="rtl"] .vf-hashtags__fade--end {
    background: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0));
}
/* ════════════════════════════════════════════════════════════════════
   v4.0.1 — GUEST LANDING PAGE (single book page) + LAYOUT REVEAL
   ════════════════════════════════════════════════════════════════════

   When a non-logged-in visitor opens the site, a full-screen overlay
   shows a SINGLE BOOK PAGE (same dimensions as a flipbook page) with
   logo + headline + buttons.  The normal layout is hidden.

   When the user clicks "browse as guest":
     1. The single page "opens" — rotates on its left edge like a book
        cover being lifted, widening to reveal the two-page spread.
     2. The body class `vf-guest-landing-active` is removed, triggering
        CSS transitions that bring in the header, sidebar, search FAB,
        and flipbook with a "creeping" slide-from-center animation.
     3. Each element staggers in until everything settles in place.
   ════════════════════════════════════════════════════════════════════ */

/* ── Landing overlay ──────────────────────────────────────────────── */
.vf-guest-landing {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #0d0d1a 70%, #050510 100%);
    padding: 1.5rem;
    overflow-y: auto;
}
[data-bs-theme="light"] .vf-guest-landing {
    background: radial-gradient(ellipse at center, #e2e8f0 0%, #cbd5e1 70%, #f1f5f9 100%);
}

/* ── Single book page card ──────────────────────────────────────────
   Matches the flipbook page dimensions: --vf-page-w × --vf-spread-h.
   On mobile, it becomes full-width with the same aspect ratio. */
.vf-guest-landing__card {
    position: relative;
    width: var(--vf-page-w, 384px);
    min-height: var(--vf-spread-h, 550px);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1.25rem;
    padding: 2.5rem 2rem;
    border-radius: 12px;
    background:
        linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.5),
        0 0 40px rgba(232,25,44,0.12),  /* --vf-accent glow */
        inset 0 1px 0 rgba(255,255,255,0.05);
    /* Book spine on the left edge */
    border-left: 4px solid rgba(0,0,0,0.4);
    /* For the "opening" animation */
    transform-origin: left center;
    transition: transform 0.6s cubic-bezier(.4,0,.2,1), width 0.6s ease, opacity 0.35s ease 0.25s;
}
[data-bs-theme="light"] .vf-guest-landing__card {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.98) 100%);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8);
}

/* "Book opening" state — triggered by guest-landing.js adding .is-opening */
.vf-guest-landing__card.is-opening {
    transform: perspective(1200px) rotateY(-25deg) scale(1.05);
    width: calc(var(--vf-page-w, 384px) * 2);
    opacity: 0.6;
}

/* Logo */
.vf-guest-landing__logo {
    margin-bottom: 0.5rem;
}
.vf-guest-landing__logo img {
    max-height: 56px;
    width: auto;
}

/* Headline */
.vf-guest-landing__headline {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.5;
    color: #f1f5f9;
    margin: 0;
}
[data-bs-theme="light"] .vf-guest-landing__headline { color: #0f172a; }

/* Sub-headline */
.vf-guest-landing__subtext {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.6;
    color: rgba(241,245,249,0.7);
    margin: 0;
}
[data-bs-theme="light"] .vf-guest-landing__subtext { color: #64748b; }

/* Button row */
.vf-guest-landing__btns-row {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.5rem;
}

.vf-guest-landing__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
    border: 2px solid transparent;
    white-space: nowrap;
}
.vf-guest-landing__btn:active { transform: scale(.96); }

.vf-guest-landing__btn--login {
    background: var(--vf-accent, #e8192c);  /* site red accent */
    color: #fff;
}
.vf-guest-landing__btn--login:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 14px rgba(232,25,44,0.35);
}

.vf-guest-landing__btn--signup {
    background: transparent;
    color: #f1f5f9;
    border-color: var(--vf-accent, #e8192c);  /* outlined in red */
}
.vf-guest-landing__btn--signup:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.45);
}
[data-bs-theme="light"] .vf-guest-landing__btn--signup {
    color: #0f172a;
    border-color: rgba(0,0,0,0.12);
}

/* "or" divider */
.vf-guest-landing__or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0.25rem 0;
}
.vf-guest-landing__or-line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.15);
}
[data-bs-theme="light"] .vf-guest-landing__or-line { background: rgba(0,0,0,0.08); }
.vf-guest-landing__or-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(241,245,249,0.5);
    padding: 0 0.25rem;
}
[data-bs-theme="light"] .vf-guest-landing__or-text { color: #94a3b8; }

/* Browse as guest button */
.vf-guest-landing__btn--guest {
    background: transparent;
    color: rgba(241,245,249,0.8);
    border-color: rgba(255,255,255,0.12);
    width: 100%;
}
.vf-guest-landing__btn--guest:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.25);
}
[data-bs-theme="light"] .vf-guest-landing__btn--guest {
    color: #475569;
    border-color: rgba(0,0,0,0.08);
}

/* ── Mobile responsiveness ────────────────────────────────────────── */
@media (max-width: 640px) {
    .vf-guest-landing__card {
        width: 100%;
        max-width: 90vw;
        min-height: 60vh;
        padding: 2rem 1.5rem;
        gap: 1rem;
    }
    .vf-guest-landing__logo img { max-height: 44px; }
    .vf-guest-landing__headline { font-size: 1.05rem; }
    .vf-guest-landing__subtext { font-size: 0.825rem; }
    .vf-guest-landing__btn { padding: 0.65rem 0.875rem; font-size: 0.825rem; }
}

/* ════════════════════════════════════════════════════════════════════
   LAYOUT REVEAL ANIMATION — "creeping" slide-from-center
   ════════════════════════════════════════════════════════════════════

   When the body has `vf-guest-landing-active`, the layout elements
   are hidden and shifted toward center.  When the class is removed,
   they "creep" back to their natural positions with staggered delays.

   The effect: all elements start collapsed at center, then gradually
   slide outward until they settle in place. */
.vf-topbar,
.vf-sidebar,
[data-vf-search-fab],
.vf-magazine-app,
.vf-page-layout {
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.25,.46,.45,.94);
}

/* Hidden state (landing active) — everything collapsed to center */
body.vf-guest-landing-active .vf-topbar {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
    pointer-events: none;
}
body.vf-guest-landing-active .vf-sidebar {
    opacity: 0;
    transform: translateX(0) scale(0.85);
    pointer-events: none;
}
body.vf-guest-landing-active [data-vf-search-fab] {
    opacity: 0;
    transform: scale(0.3);
    pointer-events: none;
}
body.vf-guest-landing-active .vf-magazine-app {
    opacity: 0;
    transform: scale(0.7);
    pointer-events: none;
}
body.vf-guest-landing-active .vf-page-layout {
    opacity: 0;
    transform: scale(0.92);
}

/* Revealed state — staggered "creep" back to natural position.
   Each element animates with a different delay so they appear to
   "creep" in sequentially:
     1. Flipbook (delay 0s) — opens first (the book spread)
     2. Header (delay 0.15s) — slides down from top
     3. Sidebar (delay 0.3s) — slides in from the side
     4. Search FAB (delay 0.45s) — scales in last */
body:not(.vf-guest-landing-active) .vf-magazine-app {
    transition-delay: 0s;
}
body:not(.vf-guest-landing-active) .vf-page-layout {
    transition-delay: 0s;
}
body:not(.vf-guest-landing-active) .vf-topbar {
    transition-delay: 0.15s;
}
body:not(.vf-guest-landing-active) .vf-sidebar {
    transition-delay: 0.3s;
}
body:not(.vf-guest-landing-active) [data-vf-search-fab] {
    transition-delay: 0.45s;
}

/* Hide scroll while landing is active */
body.vf-guest-landing-active {
    overflow: hidden;
}
/* ════════════════════════════════════════════════════════════════════
   v4.2.2 — PROFILE SIDEBAR BLOCK (transparent, matches mobile style)
   ════════════════════════════════════════════════════════════════════
   No backgrounds, no white text. Uses the same text colors as the
   mobile block (dark text in light mode, light text in dark mode).
   The cover image still shows (if the user has one), but the text
   overlay uses dark colors with text-shadow for readability instead
   of white text. */

/* Cover wrapper */
.vf-profile-cover-wrap {
    position: relative;
    min-height: 200px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.vf-profile-cover-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
.vf-profile-cover-overlay {
    display: none;
}
.vf-profile-cover-placeholder {
    display: none;
}

/* Top section: avatar + info (inside cover) */
.vf-profile-cover-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
}
.vf-profile-avatar-wrap {
    flex-shrink: 0;
}
.vf-profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
[data-bs-theme="dark"] .vf-profile-avatar {
    border-color: rgba(30,41,59,0.9);
}

/* Info column: name + role + last seen + location
   v4.2.2 — dark text (like mobile), not white */
.vf-profile-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}
.vf-profile-name {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    text-decoration: none;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-bs-theme="dark"] .vf-profile-name { color: #f1f5f9; }
.vf-profile-name:hover { text-decoration: underline; }
.vf-profile-role {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
}
[data-bs-theme="dark"] .vf-profile-role { color: #94a3b8; }
.vf-profile-lastseen,
.vf-profile-location {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 500;
    color: #94a3b8;
}

/* Bottom section: stats (inside cover)
   v4.2.2 — transparent background, dark text */
.vf-profile-cover-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
}
.vf-profile-stat {
    text-align: center;
    flex: 1;
}
.vf-profile-stat-num {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
}
[data-bs-theme="dark"] .vf-profile-stat-num { color: #f1f5f9; }
.vf-profile-stat-label {
    display: block;
    font-size: 9px;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}
.vf-profile-stat-divider {
    width: 1px;
    height: 24px;
    background: rgba(0,0,0,0.08);
    flex-shrink: 0;
}
[data-bs-theme="dark"] .vf-profile-stat-divider { background: rgba(255,255,255,0.08); }

/* Social icons (outside cover) */
.vf-profile-social-wrap {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.vf-profile-social-wrap .link-social {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.06);
    transition: background .15s;
}
[data-bs-theme="dark"] .vf-profile-social-wrap .link-social {
    background: rgba(255,255,255,0.08);
}
.vf-profile-social-wrap .link-social:hover {
    background: var(--vf-accent, #e8192c);
}
.vf-profile-social-wrap .link-social svg {
    width: 14px;
    height: 14px;
}

/* About Me (outside cover) */
.vf-profile-about-wrap {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
[data-bs-theme="dark"] .vf-profile-about-wrap { border-top-color: rgba(255,255,255,0.06); }
.vf-profile-about-title {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}
[data-bs-theme="dark"] .vf-profile-about-title { color: #94a3b8; }
.vf-profile-about-text {
    font-size: 12px;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 4px;
}
[data-bs-theme="dark"] .vf-profile-about-text { color: #cbd5e1; }
.vf-profile-about-more {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    color: var(--vf-accent, #e8192c);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity .15s;
}
.vf-profile-about-more:hover { opacity: 0.7; }

/* Follow button (outside cover, below about) */
.vf-profile-follow-outside {
    margin-top: 12px;
    text-align: center;
}
.vf-profile-follow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 8px 16px;
    border-radius: 999px;
    border: 2px solid transparent;
    background: var(--vf-accent, #e8192c);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s, background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.vf-profile-follow-btn:hover { filter: brightness(1.1); }
.vf-profile-follow-btn.is-following {
    background: transparent;
    color: #475569;
    border-color: rgba(0,0,0,0.12);
}
[data-bs-theme="dark"] .vf-profile-follow-btn.is-following {
    color: #cbd5e1;
    border-color: rgba(255,255,255,0.15);
}
.vf-profile-edit-btn {
    background: transparent;
    color: #475569;
    border-color: rgba(0,0,0,0.12);
}
[data-bs-theme="dark"] .vf-profile-edit-btn {
    color: #cbd5e1;
    border-color: rgba(255,255,255,0.15);
}
.vf-profile-follow-form { display: inline-block; width: 100%; }

/* v4.1.3 — About modal is now rendered in layout.php (outside the sidebar)
   so it uses Bootstrap's default z-index (1055) which is above the sidebar
   (z-index:30).  No custom CSS needed — it inherits the site's modal styles. */

/* ════════════════════════════════════════════════════════════════════
   v4.1.4 — PROFILE FOLLOWERS / FOLLOWING BLOCKS
   ════════════════════════════════════════════════════════════════════ */

/* Block header (title + count) */
.vf-pf-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.vf-pf-block-title {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}
[data-bs-theme="dark"] .vf-pf-block-title { color: #94a3b8; }
.vf-pf-block-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--vf-accent, #e8192c);
    background: rgba(var(--bs-primary-rgb, 232, 25, 44), 0.1);
    padding: 1px 8px;
    border-radius: 999px;
}

/* People list */
.vf-pf-people-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Person row */
.vf-pf-person {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.vf-pf-person-avatar {
    flex-shrink: 0;
}
.vf-pf-person-avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(0,0,0,0.08);
}
[data-bs-theme="dark"] .vf-pf-person-avatar img {
    border-color: rgba(255,255,255,0.08);
}
.vf-pf-person-name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-bs-theme="dark"] .vf-pf-person-name { color: #f1f5f9; }
.vf-pf-person-name:hover { text-decoration: underline; }

/* Follow button (small, in person row) */
.vf-pf-person-follow-form { display: inline; }
.vf-pf-person-follow-btn {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--vf-accent, #e8192c);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s, background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.vf-pf-person-follow-btn:hover { filter: brightness(1.1); }
.vf-pf-person-follow-btn.is-following {
    background: transparent;
    color: #64748b;
    border-color: rgba(0,0,0,0.12);
}
[data-bs-theme="dark"] .vf-pf-person-follow-btn.is-following {
    color: #cbd5e1;
    border-color: rgba(255,255,255,0.12);
}

/* View all button */
.vf-pf-view-all-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 6px;
    border: none;
    border-radius: 8px;
    background: rgba(0,0,0,0.04);
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    text-align: center;
}
[data-bs-theme="dark"] .vf-pf-view-all-btn {
    background: rgba(255,255,255,0.06);
    color: #94a3b8;
}
.vf-pf-view-all-btn:hover {
    background: rgba(0,0,0,0.08);
}
[data-bs-theme="dark"] .vf-pf-view-all-btn:hover {
    background: rgba(255,255,255,0.1);
}

/* No results text */
.vf-pf-no-results {
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    padding: 8px 0;
}

/* ── Modal search input ──────────────────────────────────────────── */
.vf-pf-modal-search {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.03);
    font-size: 13px;
    color: #0f172a;
    outline: none;
    transition: border-color .15s;
}
[data-bs-theme="dark"] .vf-pf-modal-search {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: #f1f5f9;
}
.vf-pf-modal-search:focus {
    border-color: var(--vf-accent, #e8192c);
}

/* Modal list */
.vf-pf-modal-list {
    max-height: 50vh;
}
.vf-pf-modal-loading {
    text-align: center;
    padding: 20px;
    color: #94a3b8;
}
.vf-pf-modal-no-results {
    text-align: center;
    padding: 20px;
    color: #94a3b8;
    font-size: 13px;
}

/* Person rows inside the modal (slightly larger) */
.vf-pf-modal-list .vf-pf-person-avatar img {
    width: 40px;
    height: 40px;
}
.vf-pf-modal-list .vf-pf-person-name {
    font-size: 13px;
}
.vf-pf-modal-list .vf-pf-person-follow-btn {
    padding: 5px 14px;
    font-size: 11px;
}

/* ════════════════════════════════════════════════════════════════════
   v4.1.6 — MOBILE PROFILE BLOCK (centered, no cover)
   ════════════════════════════════════════════════════════════════════ */

.vf-profile-mobile-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 24px 16px 16px;
    margin-bottom: 8px;
}
/* v4.1.7 — hide on desktop (lg = 1024px+).  Tailwind's lg:hidden
   utility is missing from the compiled tailwind.css, so we use an
   explicit media query instead.
   v4.2.1 — moved BEFORE the base styles + added !important on display
   so it overrides the flex declaration above. */
@media (min-width: 1024px) {
    .vf-profile-mobile-block {
        display: none !important;
    }
}

/* v4.2.1 — Make profile sidebar blocks transparent (no bg/border).
   app.css adds background:#fff + border-radius + padding to
   .vf-sidebar-block. Override it for profile blocks so they blend
   with the sidebar background. */
.vf-profile-block,
.vf-profile-followers-block,
.vf-profile-following-block {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Avatar */
.vf-pm-avatar-wrap {
    margin-bottom: 4px;
}
.vf-pm-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
[data-bs-theme="dark"] .vf-pm-avatar {
    border-color: #1e293b;
}

/* Name */
.vf-pm-name {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    text-decoration: none;
    line-height: 1.3;
}
[data-bs-theme="dark"] .vf-pm-name { color: #f1f5f9; }
.vf-pm-name:hover { text-decoration: underline; }

/* Role */
.vf-pm-role {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}
[data-bs-theme="dark"] .vf-pm-role { color: #94a3b8; }

/* Last seen + Location */
.vf-pm-lastseen,
.vf-pm-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
}

/* Stats row — clickable */
.vf-pm-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(0,0,0,0.06);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    width: 100%;
    max-width: 320px;
}
[data-bs-theme="dark"] .vf-pm-stats {
    border-top-color: rgba(255,255,255,0.06);
    border-bottom-color: rgba(255,255,255,0.06);
}
.vf-pm-stat {
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
    flex: 1;
    padding: 4px;
    transition: opacity .15s;
}
.vf-pm-stat:hover { opacity: 0.7; }
.vf-pm-stat-num {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}
[data-bs-theme="dark"] .vf-pm-stat-num { color: #f1f5f9; }
.vf-pm-stat-label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}
.vf-pm-stat-divider {
    width: 1px;
    height: 28px;
    background: rgba(0,0,0,0.08);
    flex-shrink: 0;
}
[data-bs-theme="dark"] .vf-pm-stat-divider { background: rgba(255,255,255,0.08); }

/* Social icons */
.vf-pm-social {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.vf-pm-social .link-social {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.06);
    transition: background .15s;
}
[data-bs-theme="dark"] .vf-pm-social .link-social {
    background: rgba(255,255,255,0.08);
}
.vf-pm-social .link-social:hover {
    background: var(--vf-accent, #e8192c);
}
.vf-pm-social .link-social svg {
    width: 16px;
    height: 16px;
}

/* About Me */
.vf-pm-about {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.06);
    width: 100%;
    max-width: 400px;
}
[data-bs-theme="dark"] .vf-pm-about { border-top-color: rgba(255,255,255,0.06); }
.vf-pm-about-title {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
[data-bs-theme="dark"] .vf-pm-about-title { color: #94a3b8; }
.vf-pm-about-text {
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 4px;
}
[data-bs-theme="dark"] .vf-pm-about-text { color: #cbd5e1; }
.vf-pm-about-more {
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    color: var(--vf-accent, #e8192c);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity .15s;
}
.vf-pm-about-more:hover { opacity: 0.7; }

/* Follow button */
.vf-pm-follow {
    margin-top: 12px;
    width: 100%;
    max-width: 280px;
}
.vf-pm-follow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 20px;
    border-radius: 999px;
    border: 2px solid transparent;
    background: var(--vf-accent, #e8192c);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s, background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.vf-pm-follow-btn:hover { filter: brightness(1.1); }
.vf-pm-follow-btn.is-following {
    background: transparent;
    color: #475569;
    border-color: rgba(0,0,0,0.12);
}
[data-bs-theme="dark"] .vf-pm-follow-btn.is-following {
    color: #cbd5e1;
    border-color: rgba(255,255,255,0.15);
}
.vf-pm-edit-btn {
    background: transparent;
    color: #475569;
    border-color: rgba(0,0,0,0.12);
}
[data-bs-theme="dark"] .vf-pm-edit-btn {
    color: #cbd5e1;
    border-color: rgba(255,255,255,0.15);
}

/* ── v4.1.8 — Online indicator (live last_seen) ──────────────────── */
.vf-lastseen-live.is-online {
    color: #22c55e !important;
}
.vf-lastseen-live.is-online .vf-online-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    margin-right: 2px;
    animation: vf-pulse 2s ease-in-out infinite;
}
@keyframes vf-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* Remove book spine effects (no flipbook) */
.vf-feedtok-app .vf-magazine::before,
.vf-feedtok-app .vf-magazine::after {
    display: none !important;
}

/* Vertical scroll container — fills .vf-magazine */
.vf-feedtok-scroll-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-snap-type: y mandatory !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 100%;
    width: 100%;
    padding: 0;
    min-height: 0;
    overscroll-behavior-y: contain;
}
.vf-feedtok-scroll-wrap::-webkit-scrollbar { display: none; }

/* Each spread = snap point = 100% of scroll container height.
   No peek of next spread. */
.vf-feedtok-spread-item {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Page divs — fill the spread item completely */
.vf-feedtok-spread-item .page {
    display: block;
    position: relative !important;
    width: var(--vf-page-w, 384px) !important;
    height: 100% !important;
    overflow: hidden;
    min-height: 0;
    border-radius: 12px;
}

/* Keep the article scrollbar independent from the feed scrollbar. Without
   this, wheel/touch momentum chains to .vf-feedtok-scroll-wrap when the
   article reaches either end and changes the whole feed slide. */
.vf-feedtok-spread-item .vf-sp-page--content,
.vf-feedtok-spread-item .vf-content-inner,
.vf-feedtok-spread-item .vf-content-body {
    min-height: 0;
}
.vf-feedtok-spread-item .vf-sp-page--content {
    overscroll-behavior: contain;
}
.vf-feedtok-spread-item .vf-content-body {
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
.vf-feedtok-spread-item .page--blank,
.vf-feedtok-spread-item .page--empty {
    display: none !important;
}

/* Desktop: cap page height at 550px but still fill if space is less */
@media (min-width: 992px) {
    .vf-feedtok-spread-item .page {
        max-height: var(--vf-spread-h);
    }
}

/* ── Mobile: cover only, fills 100% ─────────────────────────────── */
@media (max-width: 991.98px) {
    .vf-feedtok-app .vf-magazine-section {
        
        justify-content: flex-start !important;
    }
    .vf-feedtok-app .vf-magazine {
        width: 100% !important;
        border-radius: 0;
    }
    .vf-feedtok-spread-item .page--content {
        display: none !important;
    }
    .vf-feedtok-spread-item .page--cover {
        width: 100% !important;
        height: 100% !important;
        max-width: 100vw !important;
        border-radius: 0;
    }
}

/* ── Nav buttons: fixed at bottom, SAME HEIGHT as header (56px) ──
   Header = .vf-topbar__inner { height: 56px }
   Nav = same 56px → symmetric layout. */
.vf-feedtok-app .vf-nav-preview {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    max-width: 100%;
    margin: 0 auto;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 12px !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: var(--bs-body-bg, #ffffff);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,0.06);
}
[data-bs-theme="dark"] .vf-feedtok-app .vf-nav-preview {
    background: rgba(15, 23, 42, 0.95);
    border-top-color: rgba(255,255,255,0.06);
}
/* Compact nav buttons on mobile */
@media (max-width: 991.98px) {
    .vf-feedtok-app .vf-nav-btn {
        padding: 4px 8px;
    }
    .vf-feedtok-app .vf-nav-btn__title {
        font-size: 12px;
    }
}

/* Hide hint overlay */
.vf-nav-hint { display: none !important; }


@media (max-width: 991.98px) {
    .vf-magazine-section {
        padding: 0 10px!important;
    }
}