/* =======================================================================
   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 { display:none; }
}

.vf-action-btn {
    appearance: none;
    border: 0;
    background: rgba(0,0,0,.48);
    color: #fff;
    height: 36px;
    padding: 0 10px;
    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: 12px;
    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-nav-actions .vf-action-btn {
    background:none;
    box-shadow: none;
    color: #333;
}

.vf-nav-actions .vf-action-btn:hover {
    background:none;
}

.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;
    }
}

/* ═════════════════════════════════════════════════════════════════════
   v4.5.0 — MOBILE NAV ACTION BAR  (Share / Reactions / Comments / Save)
   ---------------------------------------------------------------------
   Inside .vf-nav-preview: on MOBILE screens (≤991.98px) the two
   prev/next preview buttons are hidden and the feed-card cover actions
   are shown in their place for the post currently in view (state kept
   in sync by vf-nav-actions.js).
   DESKTOP (≥992px) IS UNTOUCHED: .vf-nav-actions stays display:none
   and the prev/next preview buttons keep their original styling.
   ═════════════════════════════════════════════════════════════════════ */
.vf-nav-actions { display: none; }

@media (max-width: 991.98px) {
    /* The cover has the same actions in the mobile navigation bar. */
    .vf-cover-actions { display: none !important; }

    /* Hide the prev/next preview buttons — MOBILE ONLY */
    .vf-nav-preview > .vf-nav-btn { display: none !important; }

    /* Show the action bar in their place */
    .vf-nav-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        border: 1px solid rgba(0, 0, 0, 0.5);
        border-radius: 999px;
        padding: 5px;
        position: relative;
        top: 8px;
        min-width: 0;
    }
    
    .vf-btns-cont {
    display: flex;
}

.vf-comment-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
    height: 36px;
    gap: 12px;
    font-size: 12px;
    font-weight: 700;
    padding: 0 15px;
}

[dir="rtl"] .vf-comment-btn {
    border-right: 1px solid rgba(0, 0, 0, 0.5);
}

[dir="ltr"] .vf-comment-btn {
    border-left: 1px solid rgba(0, 0, 0, 0.5);
}

.vf-comment-icon {
    display: flex;
    align-items: center;
    gap: 5px;
}
    .vf-nav-actions .vf-action-btn {
        flex: 0 1 auto;
        min-width: 0;
        height: 38px;
        padding: 0 10px;
    }
    .vf-nav-actions .vf-action-btn:active { transform: scale(.95); }
    .vf-nav-actions .vf-nav-actions__lbl {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 9.5em;
    }
}

/* Dark mode: lift the pills off the dark bar background */
[data-bs-theme="dark"] .vf-nav-actions .vf-action-btn {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.10);
}
[data-bs-theme="dark"] .vf-nav-actions .vf-action-btn:hover {
    background: rgba(255,255,255,.16);
}

/* Live reaction/comment counters: a small Twitter-style confirmation pulse. */
.vf-live-count--changed {
    display: inline-block;
    animation: vf-live-count-pop 460ms ease-out;
}

@keyframes vf-live-count-pop {
    0% { transform: scale(.82); opacity: .58; }
    62% { transform: scale(1.14); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .vf-live-count--changed { animation: none; }
}

/* ═══ v4.33.0 (التحديث 42) — تطبيق أندرويد: الأشرطة المتدرجة ═══════
   يضيف البلاجن الأصلي (AppControl.setBarsGradient) صنف html.vf-bars-grad
   + متغيري --vf-safe-top / --vf-safe-bottom (ارتفاع شريطي النظام
   الحقيقيين المحقونين من الكوتلن) داخل تطبيق الأندرويد فقط —
   المتصفح وتطبيق الويب التقدمي لا يتأثرون أبدًا (الصنف غير موجود
   أصلًا عندهم):
     • الويب فيو بيرسم edge-to-edge خلف الشريطين الشفافين المتدرجين
       (90% عند حافة الشاشة → 40% نحو المحتوى) فيكشف الموقع عند
       السكرول («بحيث يكشف الموقع عند السركول او اذا كان هناك جزء
       متمدد تحت الشريط»).
     • الهيدر اللاصق وشريط التنقل السفلي يُرصّان أسفل الشريطين بدقة
       عبر max(env(safe-area-inset-*), var(--vf-safe-*))) — env()
       يغطي الأجهزة اللي الويب فيو بيفهم فيها الـ insets، والمتغير
       المحقون أصليًا 100% مضمون على كل جهاز.
     • صفحة البوابة (body.vf-gate-page) تدير مساحاتها بنفسها —
       السلايدر بيمتد خلف الشريط المتدرج من أول بكسل. */
html.vf-bars-grad {
    /* v4.35.0 (التحديث 44) — الرموز الموحدة للمساحات الآمنة داخل
       التطبيق فقط: أعلى/أسفل الشريطين الفعليين (المتغير المحقون من
       الكوتلن يغلب — 100% مضمون — و env() تغطية احتياطية). كل قواعد
       التطبيق تحت (الرص + ارتفاعات الـ vh) بتقراها بدل تكرار max(). */
    --vf-app-top: max(env(safe-area-inset-top, 0px), var(--vf-safe-top, 0px));
    --vf-app-bottom: max(env(safe-area-inset-bottom, 0px), var(--vf-safe-bottom, 0px));
}
/* v4.35.0 — الفول سكرين: الصفحة من بداية السكرين ومفيش مساحة
   للنوتش (البلاجن بياخد الصنف مع متغيرات 0 — والرموز نفسها بتبقى
   0 فيصفر الرصّ وارتفاعات الـ vh معًا بدون قواعد !important إضافية). */
html.vf-bars-grad.vf-immersive {
    --vf-app-top: 0px;
    --vf-app-bottom: 0px;
}
html.vf-bars-grad body {
    /* v4.35.0 — ستاندالون: الصفحة تحت النوتش مباشرة (رصّ بمقدار
       شريط الحالة الحقيقي — والفول سكرين: 0 من الرموز فوق). */
    padding-top: var(--vf-app-top);
}
html.vf-bars-grad .vf-topbar {
    top: var(--vf-app-top);
}
/* v4.34.0 (التحديث 43) — «الشريط العلوي بقى شفاف لكن السفلي لا»:
   الناف السفلية كان بتكمل خلفيتها الصلبة داخل منطقة الشريط
   (padding-bottom) فتظهر المنطقة صلبًا. الآن الناف ترصّ فوق منطقة
   الشريط المتدرج (bottom = المسافة الآمنة) مثل الهيدر مع الشريط
   العلوي تمامًا: محتوى الصفحة يظهر خلف تدرج الشريط السفلي الشفاف
   عند السكرول، والذوبان العلوي للتدرج يكسو أسفل الناف بنعومة. */
html.vf-bars-grad .vf-feedtok-app .vf-nav-preview {
    bottom: var(--vf-app-bottom) !important;
    padding-bottom: 0 !important;
}
/* البوابة: السلايدر يمتد خلف الشريط العلوي المتدرج (إزاحة صفرية) */
html.vf-bars-grad body.vf-gate-page {
    padding-top: 0 !important;
}
/* الأوفكانفس السفلي (لو ظهر) فوق منطقة شريط التنقل المتدرج */
html.vf-bars-grad .offcanvas-bottom {
    padding-bottom: var(--vf-app-bottom);
}

/* ═══ v4.35.0 (التحديث 44) — ارتفاع صفحة الفيد الثابت (vh) داخل
   التطبيق ═══════
   «فى صفحة الفيد الرئيسية الارتفاع الثابت ما بقاش صح بالفى اتش
   مع ان ده كان تنسيق عام لكل الموقع, اصبح مظبوط فى الموقع وعلى
   موقع الموبايل وعلى البى دبليو ايه, ما عدا تطبيق الاندرويد,
   المفروض كارت الفيد ثابت وواخد فى اتش معين»:
   السبب: الويب فيو في التطبيق edge-to-edge (خلف الشريطين — عشان
   الشفافية/التدرج) فالـ 100vh/100svh بتشمل منطقة الشريطين، بينما
   في المتصفح/PWA الـ viewport نفسه مستثني الشريطين. الإصلاح: نطرح
   المساحات الآمنة (--vf-app-top/--vf-app-bottom) في قواعد محصورة
   في html.vf-bars-grad فقط → نفس ارتفاع المتصفح بالظبط، وصفر تغيير
   على الموقع/الموبايل/PWA (الصنف غير موجود عندهم أصلًا). في
   الفول سكرين الرموز = 0 (صفحة كاملة من أول بكسل). */
html.vf-bars-grad .body-feed-page {
    /* نفس قفل الارتفاع الثابت للصفحة — مطروح منه منطقة شريط
       التنقل فقط (padding-top نفسه جزء من الارتفاع border-box).
       min-height: 0 ضرورية: كلاس Tailwind «min-h-screen» (100vh)
       كان هيغلب الارتفاع المطرود فيرجع الطلب القديم. */
    height: calc(100vh - var(--vf-app-bottom));
    height: calc(100svh - var(--vf-app-bottom));
    min-height: 0;
}
/* كارت الفيد (سبريد المجلة) — الارتفاع الثابت المعروف مطروحًا
   منه الشريطين في التطبيق فقط */
html.vf-bars-grad .vf-magazine {
    --vf-spread-h: calc(100vh - 140px - var(--vf-app-top) - var(--vf-app-bottom));
}
@media (max-width: 991.98px) {
    html.vf-bars-grad .vf-magazine {
        height: calc(100vh - 44px - 68px - 24px - var(--vf-app-top) - var(--vf-app-bottom));
        height: calc(100svh - 44px - 68px - 24px - var(--vf-app-top) - var(--vf-app-bottom));
    }
}
/* غلاف صفحات التطبيق العامة (feed.css ‎.vf-app — كان 100vh)
   مطروحًا منه الشريطين في التطبيق فقط */
html.vf-bars-grad .vf-app {
    min-height: calc(100vh - var(--vf-app-top) - var(--vf-app-bottom));
    min-height: calc(100svh - var(--vf-app-top) - var(--vf-app-bottom));
}
/* كارت الفيد الرأسي في الموبايل (feed.css — كان 100vh/svh ناقص
   الهيدر/التاب) — نفس الطرح داخل التطبيق فقط، بنفس ترتيب الإعلانات
   الأصلي (svh ثم vh) كي تتطابق القيمة الفائزة مع المتصفح حرفيًا */
@media (max-width: 991.98px) {
    html.vf-bars-grad .vf-card {
        min-height: calc(100svh - var(--vf-mobile-header) - var(--vf-tab-h) - 16px - var(--vf-app-top) - var(--vf-app-bottom));
        min-height: calc(100vh - var(--vf-mobile-header) - var(--vf-tab-h) - 16px - var(--vf-app-top) - var(--vf-app-bottom));
    }
}
@media (prefers-reduced-motion: reduce) {
    html.vf-bars-grad body,
    html.vf-bars-grad .vf-topbar {
        transition: none;
    }
}

/* ═══ v4.36.0 (التحديث 45) — الفول سكرين: منتصف التوب بار تحت
   النوتش ═════
   «عايز فى حالة الفول سكرين على تطبيق الاندرويد فقط الجزء
   الاوسط من التوب بار فقط اللى فيه ازرار لك و تريندينج واتابعه
   فى صفحة الفيد الرئيسة والعنوان فى باقى الصفحات ينزل تحت النوتش
   مع بقاء الجزء الايسر والايمن فى مكانه اعلى الشاشة»:
   البلاجن بيجيب ارتفاع النوتش الحقيقي (displayCutout — قيمة مستقرة
   لا تتأثر بإخفاء الأشرطة) في --vf-notch-top. القواعد هنا محصورة
   في html.vf-bars-grad.vf-immersive — صنفان لا يوجدان إلا داخل
   APK v45+ في وضع الفول سكرين (صفر تأثير: ستاندالون/المتصفح/PWA):
     • اللوجو والأزرار (يمين/يسار): يبقيان في مكانهم الطبيعي أعلى
       الشاشة (نفس ارتفاع 56/52px المتمركز كما كان بالضبط).
     • المنطقة الوسطى (التابات في الفيد / العنوان في باقي الصفحات):
       تنزل تحت النوتش بمقدار --vf-notch-top (الشريط كله بيبقى
       أطول بنفس المقدار فخلفيته تغطي المنطقة الجديدة).
     • ارتفاعات الفيد الثابتة (vh) تطرح نفس القيمة حتى يظل الكارت
       بنفس الارتفاع المعروض في المتصفح/PWA بالضبط (التوب بار زاد
       بمقدار النوتش فالكارت ينقص بالمقدار نفسه — الإجمالي ثابت). */
html.vf-bars-grad.vf-immersive .vf-topbar__inner {
    height: calc(56px + var(--vf-notch-top, 0px));
    align-items: flex-start;
}
html.vf-bars-grad.vf-immersive .vf-topbar__logo,
html.vf-bars-grad.vf-immersive .vf-topbar__actions {
    height: 56px;
}
html.vf-bars-grad.vf-immersive .vf-topbar__center {
    height: 56px;
    margin-top: var(--vf-notch-top, 0px);
}
@media (max-width: 991.98px) {
    html.vf-bars-grad.vf-immersive .vf-topbar__inner {
        height: calc(52px + var(--vf-notch-top, 0px));
    }
    html.vf-bars-grad.vf-immersive .vf-topbar__logo,
    html.vf-bars-grad.vf-immersive .vf-topbar__actions,
    html.vf-bars-grad.vf-immersive .vf-topbar__center {
        height: 52px;
    }
}
/* ارتفاعات الفيد الثابتة في الفول سكرين: نفس طرح النوتش (الإجمالي
   يظل مطابقًا للمتصفح/PWA بالظبط — التوب بار الأطول يقابله كارت
   أقصر بنفس المقدار) */
html.vf-bars-grad.vf-immersive .vf-magazine {
    --vf-spread-h: calc(100vh - 140px - var(--vf-notch-top, 0px));
}
@media (max-width: 991.98px) {
    html.vf-bars-grad.vf-immersive .vf-magazine {
        height: calc(100vh - 44px - 68px - 24px - var(--vf-notch-top, 0px));
        height: calc(100svh - 44px - 68px - 24px - var(--vf-notch-top, 0px));
    }
    html.vf-bars-grad.vf-immersive .vf-card {
        min-height: calc(100svh - var(--vf-mobile-header) - var(--vf-tab-h) - 16px - var(--vf-notch-top, 0px));
        min-height: calc(100vh - var(--vf-mobile-header) - var(--vf-tab-h) - 16px - var(--vf-notch-top, 0px));
    }
}

/* ═══ v4.50.0 (التحديث 51) — صفحة الفيد داخل تطبيق الأندرويد فقط ═══
   «ارجع بالموقع كله والتطبيق زي ما كانا في التحديث 45 بالظبط، وبعدين
   اعمل المطلوب لكروت الفيد فقط على نظافة من غير ما تبوّظ أي حاجة
   تانية» — الأساس تحت هذا القسم هو ملف 45 الحرفي: كل قواعد
   التحديثات 46/47/48/49/50 أُزيلت بالكامل (ولا وجود لـ
   content-visibility ولا will-change ولا overflow-anchor ولا أي
   آلية JS جديدة — اندار android-app.js هو نسخة 45 نفسها v106 بلا
   أي MutationObserver). السكرول والنقر واللينكات والمودالز كلها
   بميزانية 45 الحرفية — القسم التالي رسم ثابت فقط (zero runtime):
      1. شريط الحالة + التوب بار شفافان تمامًا — طبقة شريط الحالة
         تُرسم شفافة من nativeBar (transparentTop في التحديث 51)
         والتوب بار بلا خلفية ولا blur فوق الكارت.
      2. أوفرلاى الكروت: أبيض في الثيم الفاتح بنفس تدرج الأسود الحالي
         (نفس المحطات والارتفاعات بالحرف) — والداكن أسود كما هو.
      3. الكروت بعرض الشاشة كاملة من غير بادينج.
      4. خلفيات الكروت فقط تمتد من أول بكسل: الستاندالون تحت شريط
         الحالة (والتوب بار الشفاف فوقها في مكانه الطبيعي)، والفول
         سكرين تحت التوب بار مباشرة — محتوى الكارت يرصّ تحت منطقة
         الأشرطة، وأسفل الكارت وشريط التنقل بالمليمتر كما في 45.
      + حماية السلاسة (الدرس المستفاد من 48→50): إلغاء البلور
        الزجاجي (backdrop-filter) داخل حاوية السكرول على صفحة الفيد
        فقط مع خلفيات معوّضة شبه معتمة — البلور كان بيعيد أخذ عينة
        من الخلفية المتحركة ويعمل blur من الصفر كل فريم على الـ GPU
        فوق تصميم الشاشة الكاملة المتحركة ده. بلا أي قاعدة أخرى:
        الكروت البعيدة يتخطى رسمها المتصفح تلقائيًا (viewport
        culling) زي 45 بالظبط. */
@media (max-width: 991.98px) {

    /* ── 1) الصفحة من أول بكسل: الرصّ العلوي يُلغى على الفيد فقط ──
       (منطقة شريط الحالة + التوب بار أصبحت جزءًا من الكارت نفسه) */
    html.vf-bars-grad .body-feed-page {
        padding-top: 0 !important;
    }

    /* ── التوب بار: عائم فوق الكارت وشفاف تمامًا ───────────────────
        خرج من التدفق (fixed) فالمجلة تبدأ من بكسل 0 تحته. يظل في
        مكانه الطبيعي: أسفل شريط الحالة في الستاندالون
        (top = --vf-app-top) ومن أول بكسل في الفول سكرين. بلا خلفية
        ولا blur — اللي يظهر تحته هو صورة الكارت مع الأوفرلاى. */
    html.vf-bars-grad .body-feed-page .vf-topbar {
        position: fixed !important;
        top: var(--vf-app-top) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    /* ── منطقة الأشرطة (BZ): تُطرح من مواضع محتوى أعلى الكارت ────
        الستاندالون: شريط الحالة (--vf-app-top) + التوب بار (55px).
        الفول سكرين: التوب بار الأطول بالنوتش max(55, 52+النوتش). */
    html.vf-bars-grad .body-feed-page {
        --vf-feed-bz: calc(var(--vf-app-top) + 55px);
    }
    html.vf-bars-grad.vf-immersive .body-feed-page {
        --vf-feed-bz: max(55px, calc(52px + var(--vf-notch-top, 0px)));
    }

    /* ── 4) خلفية الكارت من أول بكسل: المجلة أكبر بنفس المساحة ────
        المحررة (app-top + 55 في الستاندالون / 55 في الفول سكرين)
        فيبدأ الكارت من بكسل 0 وينتهي أسفله في نفس المكان بالمليمتر
        (نفس معادلة 45 مطروحًا منها ما لم يعد محجوزًا + 55):
        100svh - 44 - 68 - 24 + 55 = 100svh - 81. */
    html.vf-bars-grad .body-feed-page .vf-magazine {
        height: calc(100vh - 81px - var(--vf-app-bottom));
        height: calc(100svh - 81px - var(--vf-app-bottom));
    }
    html.vf-bars-grad.vf-immersive .body-feed-page .vf-magazine {
        height: calc(100vh - 81px - var(--vf-notch-top, 0px));
        height: calc(100svh - 81px - var(--vf-notch-top, 0px));
    }

    /* ── 3) الكروت بعرض الشاشة كاملة من غير بادينج ────────────────── */
    html.vf-bars-grad .body-feed-page .vf-magazine-section {
        padding: 0 !important;
    }

    /* ── محتوى أعلى الكارت يرصّ تحت منطقة الأشرطة (الخلفيات فقط
        هي اللي تمتد فوق) — نفس إيقاع المسافات الأصلي (12/50/90/122)
        مُزاحًا بمقدار BZ */
    html.vf-bars-grad .body-feed-page .page--cover .vf-cover__cat {
        top: calc(12px + var(--vf-feed-bz, 0px)) !important;
    }
    html.vf-bars-grad .body-feed-page .page--cover .vf-cover__badge {
        top: calc(12px + var(--vf-feed-bz, 0px)) !important;
    }
    html.vf-bars-grad .body-feed-page .page--cover .vf-cover__author-row {
        top: calc(50px + var(--vf-feed-bz, 0px)) !important;
    }
    html.vf-bars-grad .body-feed-page .page--cover .vf-cover__meta {
        top: calc(90px + var(--vf-feed-bz, 0px)) !important;
    }
    html.vf-bars-grad .body-feed-page .page--cover .vf-cover__location {
        top: calc(122px + var(--vf-feed-bz, 0px)) !important;
    }

    /* ── 2) الأوفرلاى أبيض في الثيم الفاتح — بنفس تدرج الأسود الحالي
        بالمحطات والنِّسب نفسها (70%→0 أعلى / 94%→50%→0 أسفل) ──── */
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-cover__shade-top {
        background: linear-gradient(to bottom, rgba(255,255,255,.70) 0%, rgba(255,255,255,0) 100%);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-cover__shade-bottom {
        background: linear-gradient(to top, rgba(255,255,255,.94) 0%, rgba(255,255,255,.50) 38%, rgba(255,255,255,0) 100%);
    }
    /* خلفية الكارت نفسها في الفاتح: بيضاء (نفس لغة الأوفرلاى — حالات
        التحميل/البدائل الفارغة) */
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover {
        background: #ffffff;
    }

    /* ── حبر الكارت في الفاتح (فوق الأوفرلاى الأبيض) ────────────────
        الكاتب والبيانات والعنوان والخلاصة والهاشتاجات → داكن
        (#0f172a + ظلال بيضاء خفيفة). الحبوب ذات الخلفية الداكنة
        الكاملة (شعار الصيفة/الموقع/رائج بعد التسنين/زر القراءة
        الملوّن) تظل كما هي — مقروءة فوق الأبيض والأسود معًا. */
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-cover__author {
        color: #0f172a !important;
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-cover__author-name {
        color: #0f172a;
        text-shadow: 0 1px 3px rgba(255,255,255,.65);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-avatar {
        border-color: rgba(15,23,42,.30);
        box-shadow: 0 2px 5px rgba(15,23,42,.18);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-cover__follow {
        border-color: rgba(15,23,42,.38);
        background: rgba(255,255,255,.55);
        color: #0f172a;
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-cover__follow:hover {
        background: rgba(255,255,255,.85);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-cover__meta {
        color: rgba(15,23,42,.85);
        text-shadow: 0 1px 3px rgba(255,255,255,.6);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-meta-edit {
        color: #0f172a !important;
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-cover__title {
        color: #0f172a;
        text-shadow: 0 2px 8px rgba(255,255,255,.85);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-cover__title a {
        color: #0f172a;
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-cover__summary {
        color: rgba(15,23,42,.88);
        text-shadow: 0 1px 4px rgba(255,255,255,.8);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-follow-reason-line {
        color: rgba(15,23,42,.85);
        text-shadow: 0 1px 3px rgba(255,255,255,.6);
    }
    /* رائج: زجاجية كهرمانية شفافة كانت تذوب في الأبيض → حبة كهرمانية
        مسننة بنص أبيض (نفس اللون، مقروءة فوق الأبيض) */
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-cover__trending {
        background: #d97706;
        color: #ffffff;
        text-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    /* الهاشتاجات: زجاج أبيض بحبر داكن + إطار رفيع (كان زجاجًا أبيضًا
        بنص أبيض = غير مرئي فوق الأوفرلاى الأبيض) + تلاشيات الحواف
        بيضاء بدل السوداء */
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-hashtag-chip {
        background: rgba(255,255,255,.72);
        border: 1px solid rgba(15,23,42,.14);
        color: #0f172a;
        text-shadow: none;
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-hashtag-chip:hover {
        background: rgba(255,255,255,.95);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-hashtags__fade--start {
        background: linear-gradient(to right, rgba(255,255,255,.78), rgba(255,255,255,0));
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-hashtags__fade--end {
        background: linear-gradient(to left, rgba(255,255,255,.78), rgba(255,255,255,0));
    }

    /* ── حماية السلاسة (بدل قواعد 49 كاملة): إلغاء البلور الزجاجي
        داخل حاوية السكرول على الفيد فقط — العنصر يُرسم مرة واحدة
        داخل بلاط الكارت ويركَّب معه بدل إعادة العينة+البلور كل فريم
        على الـ GPU فوق الخلفية المتحركة (بلا أي آلية أخرى). */
    html.vf-bars-grad .body-feed-page .page--cover .vf-cover__cat,
    html.vf-bars-grad .body-feed-page .page--cover .vf-cover__badge,
    html.vf-bars-grad .body-feed-page .page--cover .vf-cover__follow,
    html.vf-bars-grad .body-feed-page .page--cover .vf-cover__trending,
    html.vf-bars-grad .body-feed-page .page--cover .vf-cover__location,
    html.vf-bars-grad .body-feed-page .page--cover .vf-hashtag-chip {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* خلفيات معوّضة في الداكن (نفس الألوان أعكر قليلًا — تُقرأ فوق
        صورة الكوفر كما كانت تمامًا). الفاتح: القيم البيضاء أعلاه
        (chips .72 / متابعة .55 / رائج #d97706 صلب) — والشعار/الموقع
        داكنان أصلًا فيُقرآن فوق الأبيض كما هما. قائمّة الفئة: لونها
        inline صلب أصلًا (catColor) — إلغاء البلور وحده كافٍ. */
    html.vf-bars-grad[data-bs-theme="dark"] .body-feed-page .page--cover .vf-cover__badge {
        background: rgba(0, 0, 0, .62);
    }
    html.vf-bars-grad[data-bs-theme="dark"] .body-feed-page .page--cover .vf-cover__follow {
        background: rgba(255, 255, 255, .24);
    }
    html.vf-bars-grad[data-bs-theme="dark"] .body-feed-page .page--cover .vf-cover__trending {
        background: rgba(245, 158, 11, .40);
    }
    html.vf-bars-grad[data-bs-theme="dark"] .body-feed-page .page--cover .vf-cover__location {
        background: rgba(0, 0, 0, .48);
    }
    html.vf-bars-grad[data-bs-theme="dark"] .body-feed-page .page--cover .vf-hashtag-chip {
        background: rgba(255, 255, 255, .30);
    }
}

/* v4.50.0 — تقليل الحركة: انتقال الشفافية للتوب بار في الفيد */
@media (prefers-reduced-motion: reduce) {
    html.vf-bars-grad .body-feed-page .vf-topbar { transition: none !important; }
}

/* ═══ v4.55.0 (التحديث 55) — صفحة المنشور الفردى: تصميم عمودى ═══
   «الغلاف فوق والمحتوى تحته + شيل ظل الجانبين + أزرار الأكشن
   ثابتة أسفل الشاشة» — محصور داخل .vf-single-post فقط (وقواعد
   الصفحة على .body-post-open: صفحة المنشور ذات الغلاف — وليست
   صفحة الجدار الصلب المغلقة) (كروت
   الفيد وكتاب المجلة في الفيد لا يُمسّان إطلاقًا):
     1. الكتاب بقى عمودًا واحدًا على كل المقاسات (الديسكتوب كان
        صفحتين جنب بعض بنسبة 768/550 مقفولة) — بلا ظل الصندوق
        وبلا ظلال حواف الصفحات الجانبية.
     2. المحتوى بتدفق طبيعى وتمرير الصفحة نفسها (body scroll) —
        إصلاح «صفحة البوست الفردة بتحجّر ومش بتعمل سكرول على
        الديسكتوب»: لا ارتفاع مقفول ولا حاوية تمرير داخلية.
     3. شريط أكشن ثابت (vf-sp-actionbar) في قاع الشاشة على كل
        المقاسات: مشاركة / ردة فعل / تعليقات / حفظ — أزرار بلمسة
        ≥ 52px، والصفحة تأخذ padding-bottom بارتفاعه فآخر
        المحتوى (والفوتر) لا يختفى خلفه أبدًا. */

/* ── 1) الكتاب: عمود واحد بلا ظلال ─────────────────────────────── */
.vf-single-post__book {
    display: flex;
    flex-direction: column;
    aspect-ratio: auto;
    overflow: visible;
    box-shadow: none;
}
.vf-single-post__book::before,
.vf-single-post__book::after { content: none; }

/* ── الغلاف: هيرو بعرض الحاوية ─────────────────────────────────── */
.vf-single-post .vf-sp-page {
    flex: 1 1 100%;
    width: 100%;
}
.vf-single-post .vf-sp-page--cover {
    aspect-ratio: 16 / 10;
    background: #000;
}
@media (max-width: 991.98px) {
    .vf-single-post .vf-sp-page--cover { aspect-ratio: 4 / 5; }
}

/* ── 2) المحتوى: تدفق طبيعى بتمرير الصفحة ───────────────────────── */
.vf-single-post .vf-sp-page--content {
    background: var(--bs-body-bg, #ffffff);
    color: var(--bs-body-color, #1f2937);
}
[data-bs-theme="dark"] .vf-single-post .vf-sp-page--content {
    background: var(--vf-paper-dark, #0f172a);
}
.vf-single-post .vf-content-inner {
    display: block;
    height: auto;
    overflow: visible;
    padding: 0;
}
.vf-single-post .vf-sp-content-body {
    position: static;
    overflow: visible !important;
    overflow-x: hidden;
    padding: 22px 22px 28px;
}

/* ── 3) شريط الأكشن الثابت أسفل الشاشة ──────────────────────────── */
.vf-sp-actionbar {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 80;
    background: var(--bs-body-bg, #ffffff);
    border-top: 1px solid var(--bs-border-color, rgba(15, 23, 42, .10));
    box-shadow: 0 -8px 28px rgba(15, 23, 42, .10);
    padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px));
}
[data-bs-theme="dark"] .vf-sp-actionbar {
    background: #0b1220;
    border-top-color: rgba(255, 255, 255, .08);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .45);
}
.vf-sp-actionbar__inner {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    gap: 4px;
}
.vf-sp-action {
    flex: 1 1 0;
    min-width: 64px;
    min-height: 52px;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--bs-body-color, #1f2937);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 14px;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
[data-bs-theme="dark"] .vf-sp-action { color: #e2e8f0; }
.vf-sp-action:hover { background: rgba(15, 23, 42, .06); }
[data-bs-theme="dark"] .vf-sp-action:hover { background: rgba(255, 255, 255, .07); }
.vf-sp-action:active { transform: scale(.94); }
.vf-sp-action__label {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.vf-sp-action[data-saved="1"] { color: var(--vf-accent, #e8192c); }

/* الصفحة: مساحة سفلية = ارتفاع الشريط + هامش — آخر المحتوى
   (والفوتر) يظهران فوق الشريط لا خلفه */
.body-post-open { padding-bottom: 84px; }

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    .vf-sp-action { transition: none; }
    .vf-sp-action:active { transform: none; }
}

/* ═══ v4.55.0 — تطبيق الأندرويد: غلاف المنشور من أول بكسل ═════════
   «انت فى تطبيق الاندرويد بوظت ان غلاف المنشور يبقى من اول بكسل
   فوق والغلاف بعرض الشاشة كاملة فى تطبيق الاندرويد وبقى بوكسيد» —
   نفس معالجة كروت الفيد (v4.50.0) بعينها، مطبقة على صفحة المنشور
   الفردي داخل التطبيق فقط (html.vf-bars-grad + body-post-page +
   موبايل): بلا أي رصّ أعلى — الغلاف يمتد من بكسل 0 تحت شريط
   الحالة والتوب بار الشفافين وبعرض الشاشة كاملة (بلا الحاوية
   768px المركزية ولا الـ 16px حولها) — محتوى الغلاف يرصّ تحت
   منطقة الأشرطة، والداكن أسود كما هو والفاتح أبيض بحبر داكن. */
@media (max-width: 991.98px) {

    /* 1) الصفحة من أول بكسل: إلغاء الرصّ العلوي على صفحة المنشور */
    html.vf-bars-grad .body-post-open {
        padding-top: 0 !important;
    }

    /* 2) التوب بار: عائم فوق الغلاف وشفاف تمامًا (عنوان المنشور
          بلون الحبر فوق ظل الغلاف) — نفس قواعد الفيد */
    html.vf-bars-grad .body-post-open .vf-topbar {
        position: fixed !important;
        top: var(--vf-app-top) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    /* 3) منطقة الأشرطة (BZ) — تُطرح من مواضع محتوى أعلى الغلاف:
          الستاندالون شريط الحالة + 55، والفول سكرين التوب بار
          الأطول بالنوتش */
    html.vf-bars-grad .body-post-open {
        --vf-post-bz: calc(var(--vf-app-top) + 55px);
    }
    html.vf-bars-grad.vf-immersive .body-post-open {
        --vf-post-bz: max(55px, calc(52px + var(--vf-notch-top, 0px)));
    }

    /* 4) الغلاف بعرض الشاشة كاملة من أول بكسل (بلا بوكس) */
    html.vf-bars-grad .body-post-open .vf-single-post {
        padding: 0 !important;
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
    }
    html.vf-bars-grad .body-post-open .vf-related-posts {
        padding: 0 12px;
    }

    /* 5) محتوى أعلى الغلاف يرصّ تحت منطقة الأشرطة (نفس إيقاع
          12/50/90/122 الأصلي مُزاحًا بمقدار BZ) */
    html.vf-bars-grad .body-post-open .vf-single-post .vf-cover__cat {
        top: calc(12px + var(--vf-post-bz, 0px)) !important;
    }
    html.vf-bars-grad .body-post-open .vf-single-post .vf-cover__badge {
        top: calc(12px + var(--vf-post-bz, 0px)) !important;
    }
    html.vf-bars-grad .body-post-open .vf-single-post .vf-cover__author-row {
        top: calc(50px + var(--vf-post-bz, 0px)) !important;
    }
    html.vf-bars-grad .body-post-open .vf-single-post .vf-cover__meta {
        top: calc(90px + var(--vf-post-bz, 0px)) !important;
    }
    html.vf-bars-grad .body-post-open .vf-single-post .vf-cover__location {
        top: calc(122px + var(--vf-post-bz, 0px)) !important;
    }

    /* 6) الأوفرلاى أبيض في الثيم الفاتح + انقلاب الحبر (نفس لغة
          الفيد بالمحطات والنِّسب نفسها: 70%→0 أعلى / 94%→50%→0 أسفل) */
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-single-post .vf-cover__shade-top {
        background: linear-gradient(to bottom, rgba(255,255,255,.70) 0%, rgba(255,255,255,0) 100%);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-single-post .vf-cover__shade-bottom {
        background: linear-gradient(to top, rgba(255,255,255,.94) 0%, rgba(255,255,255,.50) 38%, rgba(255,255,255,0) 100%);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-single-post .vf-cover__author {
        color: #0f172a !important;
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-single-post .vf-cover__author-name {
        color: #0f172a;
        text-shadow: 0 1px 3px rgba(255,255,255,.65);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-single-post .vf-avatar {
        border-color: rgba(15,23,42,.30);
        box-shadow: 0 2px 5px rgba(15,23,42,.18);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-single-post .vf-cover__meta {
        color: rgba(15,23,42,.85);
        text-shadow: 0 1px 3px rgba(255,255,255,.6);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-single-post .vf-meta-edit {
        color: #0f172a !important;
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-single-post .vf-cover__title {
        color: #0f172a;
        text-shadow: 0 2px 8px rgba(255,255,255,.85);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-single-post .vf-cover__summary {
        color: rgba(15,23,42,.88);
        text-shadow: 0 1px 4px rgba(255,255,255,.8);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-single-post .vf-cover__trending {
        background: #d97706;
        color: #ffffff;
        text-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-single-post .vf-hashtag-chip {
        background: rgba(255,255,255,.72);
        border: 1px solid rgba(15,23,42,.14);
        color: #0f172a;
        text-shadow: none;
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-single-post .vf-hashtag-chip:hover {
        background: rgba(255,255,255,.95);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-single-post .vf-hashtags__fade--start {
        background: linear-gradient(to right, rgba(255,255,255,.78), rgba(255,255,255,0));
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-single-post .vf-hashtags__fade--end {
        background: linear-gradient(to left, rgba(255,255,255,.78), rgba(255,255,255,0));
    }

    /* 7) حماية السلاسة (درس 48→50): إلغاء البلور الزجاجى فوق
          الخلفية المتحركة + حبوب داكنة شبه معتمة معوّضة */
    html.vf-bars-grad .body-post-open .vf-single-post .vf-cover__cat,
    html.vf-bars-grad .body-post-open .vf-single-post .vf-cover__badge,
    html.vf-bars-grad .body-post-open .vf-single-post .vf-cover__trending,
    html.vf-bars-grad .body-post-open .vf-single-post .vf-cover__location,
    html.vf-bars-grad .body-post-open .vf-single-post .vf-hashtag-chip {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    html.vf-bars-grad[data-bs-theme="dark"] .body-post-open .vf-single-post .vf-cover__badge {
        background: rgba(0, 0, 0, .62);
    }
    html.vf-bars-grad[data-bs-theme="dark"] .body-post-open .vf-single-post .vf-cover__trending {
        background: rgba(245, 158, 11, .40);
    }
    html.vf-bars-grad[data-bs-theme="dark"] .body-post-open .vf-single-post .vf-cover__location {
        background: rgba(0, 0, 0, .48);
    }
    html.vf-bars-grad[data-bs-theme="dark"] .body-post-open .vf-single-post .vf-hashtag-chip {
        background: rgba(255, 255, 255, .30);
    }

    /* 8) شريط الأكشن فوق منطقة شريط التنقل المتدرج (نفس مبدأ
          الناف في الفيد) — env(safe-area) بلا معنى داخل الويب فيو
          (--vf-app-bottom هو المصدر الأصلي) */
    html.vf-bars-grad .body-post-open .vf-sp-actionbar {
        bottom: var(--vf-app-bottom) !important;
        padding-bottom: 8px;
    }
    /* مساحة أسفل الصفحة تشمل منطقة الشريط السفلى كاملة */
    html.vf-bars-grad .body-post-open {
        padding-bottom: calc(84px + var(--vf-app-bottom)) !important;
    }
}

/* ═══ v4.56.0 (التحديث 56) — صفحة المنشور الفردى: أزرار الأكشن ═══
   «أزرار الأكشنز على الديسكتوب مش ثابتة بعرض الجزء الأوسط» +
   «شيل الجمل من أزرار الأكشنز خليها أزرار فقط» — محصور فى
   .vf-sp-actionbar/.vf-sp-action فقط (كروت الفيد والتوب بار
   وكل شئ آخر لا يُمسّ):
     1. الأزرار الأربعة رجعت لتصميم الحبوب الأيقونية القديم
        نفسه (لغة .vf-action-btn على كروت الفيد): حبة داكنة شبه
        شفافة بأيقونة بيضاء وعداد رقمى صغير بجانب أيقونة ردة
        الفعل/التعليقات — بلا أى كلمات مكتوبة (aria-label/title
        يحملان الوصف للقارئ الشاشى والتلميح فقط).
     2. الديسكتوب (≥992px): الشريط sticky فى قاع الشاشة بعرض
        الجزء الأوسط نفسه (--vf-spread-w = 768px) متماثلًا مع
        التوب بار: margin سالب بقيمة رصّ .vf-single-post (16px)
        يفكّ الحواف فيحاذى الشريط حواف التوب بار حرفيًا — بلا
        أى تمدد لعرض الشاشة كاملة، وبلا تحويلات transform.
     3. الموبايل/التطبيق كما هما: fixed بعرض الشاشة فى القاع
        وفوق منطقة شريط التنقل (قواعد v4.55.0 وقواعد التطبيق
        أعلاه لم تُمسّ — الشريط هنا أقصر فقط لأن الأزرار حبوب). */

/* ── 1) الأزرار: حبوب أيقونية بلا نص (تصميم ما قبل 55 مستعاد) ── */
.vf-sp-actionbar__inner {
    max-width: none;
    justify-content: center;
    gap: 10px;
}
.vf-sp-action {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    height: 44px;
    padding: 0 16px;
    flex-direction: row;
    gap: 6px;
    background: rgba(0, 0, 0, .48);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .30);
    white-space: nowrap;
}
.vf-sp-action--icon {
    width: 44px;
    padding: 0;
}
.vf-sp-action:hover { background: rgba(0, 0, 0, .65); }
.vf-sp-action:active { transform: scale(.94); }
.vf-sp-action__count {
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    min-width: 1ch;
    text-align: center;
}
[data-bs-theme="dark"] .vf-sp-action {
    background: rgba(255, 255, 255, .14);
    color: #e2e8f0;
    box-shadow: none;
}
[data-bs-theme="dark"] .vf-sp-action:hover { background: rgba(255, 255, 255, .24); }

/* ── 2) الديسكتوب: sticky بعرض العمود الأوسط (مرآة التوب بار) ── */
@media (min-width: 992px) {
    .vf-sp-actionbar {
        position: sticky;
        bottom: 0;
        left: auto;
        right: auto;
        width: auto;
        /* يفكّ رصّ .vf-single-post (16px لكل جانب) فيصير عرض الشريط
           = عرض التوب بار (768px) ومحاذٍ له تمامًا — أينما وقع
           العمود (RTL/LTR/أى عرض شاشة) بلا transform ولا JS */
        margin-inline: -16px;
    }
}

/* تقليل الحركة (إعادة تثبيت بعد قواعد هذا القسم) */
@media (prefers-reduced-motion: reduce) {
    .vf-sp-action { transition: none; }
    .vf-sp-action:active { transform: none; }
}

/* ═══ v4.57.0 (التحديث 57) — تطبيق الأندرويد: ثلاث نقاط محددة ═══
   «الجرادينت لغلاف المنشور بقى يعمل فاصل» + «بعد تخطى الغلاف
   الكلام بيتداخل مع الشريط العلوى والتوب بار الشفافين» + «شريط
   الأكشن المصمت فوق شريط التنقل المتدرج الشكل مش مريح» — كلها
   محصورة داخل html.vf-bars-grad (التطبيق فقط) + max-width:991px
   (شاشة الموبايل): المتصفح/PWA والديسكتوب وكروت الفيد في المتصفح
   والجدار الصلب (post_hard_paywall = body-post-page) لا يُمسّون
   إطلاقًا:
     1. الجرادينت العلوى للغلاف (فيد + صفحة فردية) كان شريطًا
        محصورًا (32% ارتفاع) ينتهى بحد مرئى («الفاصل») — رجع الحل
        القديم: العنصر بيغطى الغلاف من فوق لتحت (height 100%)
        والتلاشى متعدد المحطات بينتهى صفرًا عند ~55% فلا حدّ مرئى
        عند حافة العنصر ولا عند حد الشريط القديم، مع نفس قتامة
        القمة (.70) لتباين الأشرطة الشفافة ونصوص أعلى الغلاف.
     2. بعد تخطى الغلاف في الصفحة الفردية: منطقة شريط الحالة +
        التوب بار (الشفافتان تمامًا فوق الغلاف) تستقران على تدرج
        ثيم واحد سايح من تحت — طبقة ::after واحدة على التوب بار
        من أول بكسل (فوق شريط الحالة) بامتداد +26px ذوبان تحته،
        بتظهر عبر صنف vf-post-scrolled (يتبدله feed.js بمستمع
        تمرير passive + rAF عند تجاوز حافة الغلاف لمنطقة
        الأشرطة) وبتختفي بالرجوع فوق الغلاف (transition .25s).
     3. شريط الأكشن السفلى: الخلفية المصمتة + الحد العلوى استُبدلا
        بتدرج واحد سايح لأعلى — يبدأ من آخر بكسل في الشاشة (فوق
        منطقة شريط التنقل المتدرج الأصلي فيندمجان كجرادينت واحد)
        وينتهى شفافًا عند قمة الأزرار، بشفافية خفيفة (.92 قاع →
        .55 → 0) فيظهر المحتوى خلفه بتباين مريح والأزرار (حبوب
        44) فوقه واضحة. اللون = لون خلفية الصفحة نفسه (فاتح أبيض
        / داكن slate-950 #020617) فيتطابق مع تدرج الشريط الأصلي
        بالحرف عند نقطة الالتحام. */
@media (max-width: 991.98px) {

    /* ── 1) الجرادينت العلوى يغطى الغلاف من فوق لتحت (بلا فاصل) ──
          نفس محطات القتامة العلوية (.70) ثم تلاشٍ ناعم لصفر عند
          55% (من 55%→100% شفاف تمامًا فلا حدّ عند حافة العنصر) —
          الداكن أسود والفاتح أبيض (نفس لغة v4.50/v4.55 بالمحطات
          والنِّسب نفسها). */
    html.vf-bars-grad .body-feed-page .page--cover .vf-cover__shade-top,
    html.vf-bars-grad .body-post-open .vf-single-post .vf-cover__shade-top {
        height: 100%;
        background: linear-gradient(to bottom,
            rgba(0, 0, 0, .70) 0%,
            rgba(0, 0, 0, .48) 16%,
            rgba(0, 0, 0, .22) 34%,
            rgba(0, 0, 0, 0) 55%);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-cover__shade-top,
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-single-post .vf-cover__shade-top {
        background: linear-gradient(to bottom,
            rgba(255, 255, 255, .70) 0%,
            rgba(255, 255, 255, .48) 16%,
            rgba(255, 255, 255, .22) 34%,
            rgba(255, 255, 255, 0) 55%);
    }

    /* ── 2) بعد تخطى الغلاف: تدرج الثيم خلف شريط الحالة + التوب بار
          طبقة واحدة من أول بكسل (top سالب بقيمة شريط الحالة) بامتداد
          100% ارتفاع التوب بار + 26px ذوبان تحته — سايحة من تحت
          (.92 → .40 عند 78% → 0) بشفافية خفيفة للتباين. تظهر فقط
          مع vf-post-scrolled (feed.js) وترجع شفافة فوق الغلاف.
          z-index: -1 داخل سياق التوب بار (z-50) فتظهر خلف محتواه
          وفوق صفحة المحتوى — و pointer-events: none فلا تحجب نقرًا. */
    html.vf-bars-grad .body-post-open .vf-topbar::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        top: calc(-1 * var(--vf-app-top, 0px));
        height: calc(var(--vf-app-top, 0px) + 100% + 26px);
        background: linear-gradient(to bottom,
            rgba(2, 6, 23, .92) 0%,
            rgba(2, 6, 23, .82) 42%,
            rgba(2, 6, 23, .40) 78%,
            rgba(2, 6, 23, 0) 100%);
        opacity: 0;
        pointer-events: none;
        z-index: -1;
        transition: opacity .25s ease;
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-topbar::after {
        background: linear-gradient(to bottom,
            rgba(255, 255, 255, .92) 0%,
            rgba(255, 255, 255, .84) 42%,
            rgba(255, 255, 255, .40) 78%,
            rgba(255, 255, 255, 0) 100%);
    }
    html.vf-bars-grad .body-post-open.vf-post-scrolled .vf-topbar::after {
        opacity: 1;
    }

    /* ── 3) شريط الأكشن: تدرج واحد من آخر بكسل بالشاشة لأعلى الأزرار
          bottom: 0 (يمتد فوق منطقة شريط التنقل المتدرج الأصلي) —
          الحشوة السفلية تعوّض المنطقة فالأزرار تظل فوقها بمكانها
          بالمليمتر. الحد العلوى والظل أُزيلا (كانا يقصان الذوبان) —
          واللون = لون خلفية الصفحة (أبيض / slate-950) فيندمج مع
          تدرج الشريط الأصلي عند نقطة الالتحام كجرادينت واحد. */
    html.vf-bars-grad .body-post-open .vf-sp-actionbar {
        bottom: 0 !important;
        padding-bottom: calc(8px + var(--vf-app-bottom, 0px));
        background: linear-gradient(to top,
            rgba(2, 6, 23, .92) 0%,
            rgba(2, 6, 23, .88) 30%,
            rgba(2, 6, 23, .55) 62%,
            rgba(2, 6, 23, 0) 100%);
        border-top: 0;
        box-shadow: none;
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-sp-actionbar {
        background: linear-gradient(to top,
            rgba(255, 255, 255, .92) 0%,
            rgba(255, 255, 255, .88) 30%,
            rgba(255, 255, 255, .55) 62%,
            rgba(255, 255, 255, 0) 100%);
    }
}

/* تقليل الحركة (إعادة تثبيت بعد قواعد هذا القسم) */
@media (prefers-reduced-motion: reduce) {
    html.vf-bars-grad .body-post-open .vf-topbar::after { transition: none; }
}

/* ═══ v4.58.0 (التحديث 58) — تطبيق الأندرويد: نقطتان محددتان ═══
   «زود لون الجرادينت شوية سواء للتوب بار أو أرضية أزرار الأكشنز
   مع الانسيابية مع شريط الموبايل العلوى والسفلى» + «خلى الكارت
   بكامل ارتفاع الاسكرين ومده لآخر بيكسل تحت واعمل جرادينت لشريط
   التنقل السفلى للموبايل مع أرضية أزرار الأكشن لكروت الفيد» —
   كلها محصورة داخل html.vf-bars-grad (التطبيق فقط) +
   max-width:991.98px (شاشة الموبايل): المتصفح/PWA والديسكتوب
   والجدار الصلب (body-post-page بلا body-post-open) وكروت الفيد
   في المتصفح لا يُمسّون إطلاقًا:
     1. صفحة المنشور الفردى: نفس طبقتى v4.57.0 (تدرج التوب بار
        بعد تخطى الغلاف + تدرج شريط الأكشن من آخر بكسل) بنفس
        الهندسة بالظبط — بس المحطات اتزوّدت (~+.05 قمة / +.06
        وسط / +.12 قبل الذيل) فالتوهج أقوى شوية: خلفية شبه معتمة
        (97%) عند حافة الشاشة تتذوب بنفس المنحنى. اللون والانسيابية
        مع الشريطين الأصليين محفوظان: نفس مصدر اللون (أبيض /
        slate-950 #020617 = pageBgColor()) والطبقتان تبدآن من أول
        بكسل وتنتهيان عند آخر بكسل فيندمجان مع تدرجى الشريط
        الأصليين (92%→0) كجرادينت واحد سايح بلا أى حد مرئى.
     2. صفحة الفيد الرئيسية: الكارت بكامل ارتفاع الاسكرين من أول
        بكسل (تحت شريط الحالة والتوب بار الشفافين — كما هو من
        v4.50) لآخر بيكسل تحت (بطرح منطقة شريط التنقل من ارتفاع
        المجلة والصفحة)، وشريط التنقل السفلى للموبايل + أرضية
        أزرار الأكشن لكروت الفيد (vf-nav-preview بالحبوب الأربعة)
        اتحولا لتدرج واحد سايح لأعلى: الشريط خرج من التدفق
        (fixed عند آخر بكسل) وامتد فوق منطقة شريط التنقل الأصلي
        (الحشوة السفلية تعوّضها فالأزرار تظل بمكانها بالمليمتر)
        والخلفية المصمتة/الحد استُبدلا بتدرج الثيم من آخر بكسل
        حتى قمة الأزرار (نفس لغة v4.57.0 للمنشور الفردى) فيندمج
        مع تدرج الشريط الأصلي كجرادينت واحد — ومحتوى أسفل الكارت
        (العنوان/الخلاصة/زر القراءة) يرصّ فوق الشريط بمسافة تنفسه
        نفسها (12px) بدل ما يختفى خلفه. */
@media (max-width: 991.98px) {

    /* ── 1) صفحة المنشور الفردى: محطات أقوى شوية لنفس الطبقتين ──
          التوب بار (بعد تخطى الغلاف): 97% قمة → 88% → 52% → 0
          (الداكن) / 97% → 90% → 52% → 0 (الأبيض) — نفس الهندسة
          والانتقال وزمن الظهور بتاع v4.57.0 حرفيًا. */
    html.vf-bars-grad .body-post-open .vf-topbar::after {
        background: linear-gradient(to bottom,
            rgba(2, 6, 23, .97) 0%,
            rgba(2, 6, 23, .88) 42%,
            rgba(2, 6, 23, .52) 78%,
            rgba(2, 6, 23, 0) 100%);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-topbar::after {
        background: linear-gradient(to bottom,
            rgba(255, 255, 255, .97) 0%,
            rgba(255, 255, 255, .90) 42%,
            rgba(255, 255, 255, .52) 78%,
            rgba(255, 255, 255, 0) 100%);
    }

    /* شريط أكشن المنشور الفردى: 97% عند آخر بكسل → 93% → 64% → 0
       عند قمة الأزرار (نفس القيم للفاتح بالأبيض) — bottom: 0
       والحشوة والحد/الظل كما حلّتها v4.57.0 (لم تُمسّ). */
    html.vf-bars-grad .body-post-open .vf-sp-actionbar {
        background: linear-gradient(to top,
            rgba(2, 6, 23, .97) 0%,
            rgba(2, 6, 23, .93) 30%,
            rgba(2, 6, 23, .64) 62%,
            rgba(2, 6, 23, 0) 100%);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-post-open .vf-sp-actionbar {
        background: linear-gradient(to top,
            rgba(255, 255, 255, .97) 0%,
            rgba(255, 255, 255, .93) 30%,
            rgba(255, 255, 255, .64) 62%,
            rgba(255, 255, 255, 0) 100%);
    }

    /* ── 2) صفحة الفيد: الصفحة والكارت بكامل ارتفاع الاسكرين ────
          الصفحة نفسها تفتح للارتفاع الكامل (كانت مطروحًا منها منطقة
          شريط التنقل) فيتسع الكارت من أول بكسل لآخر بكسل بدون أى
          فائض يفعّل سكرول الصفحة (القفل overflow:hidden موجود
          أصلًا في قواعد الفيد الأساسية). */
    html.vf-bars-grad .body-feed-page {
        height: 100vh;
        height: 100svh;
    }
    /* المجلة (= الكارت لكل نقطة snap): الارتفاع الكامل بالظبط —
          بدل (100svh − 81 − منطقة الشريط) في v4.50. الفول سكرين
          له نسخته الخاصة (كان يطرح النوتش). */
    html.vf-bars-grad .body-feed-page .vf-magazine {
        height: 100vh;
        height: 100svh;
    }
    html.vf-bars-grad.vf-immersive .body-feed-page .vf-magazine {
        height: 100vh;
        height: 100svh;
    }

    /* ── شريط التنقل + أرضية أزرار الأكشن: تدرج واحد من آخر بكسل ──
          الشريط fixed عند آخر بكسل وامتد فوق منطقة شريط التنقل
          الأصلي: الارتفاع = 68px (منطقة الأزرار كما هي) + منطقة
          الشريط، والحشوة السفلية = المنطقة فالأزرار تظل بمكانها
          بالمليمتر فوقها. الخلفية المصمتة (والـ #0a0f1e الداكن)
          والحد استُبدلا بتدرج الثيم السايح لأعلى (97% → 93% →
          64% → 0 عند قمة الأزرار) بنفس مصدر لون الشريط الأصلي
          (pageBgColor: أبيض / slate-950) فيندمجان عند نقطة
          الالتحام كجرادينت واحد. بلا بلور زجاجى فوق الكارت
          المتحرك (درس 48→50). z-index 100 فوق كروت الفيد. */
    html.vf-bars-grad .body-feed-page .vf-nav-preview {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        width: 100%;
        max-width: none;
        margin: 0;
        height: calc(68px + var(--vf-app-bottom, 0px));
        min-height: calc(68px + var(--vf-app-bottom, 0px));
        max-height: calc(68px + var(--vf-app-bottom, 0px));
        padding-bottom: var(--vf-app-bottom, 0px);
        background: linear-gradient(to top,
            rgba(2, 6, 23, .97) 0%,
            rgba(2, 6, 23, .93) 30%,
            rgba(2, 6, 23, .64) 62%,
            rgba(2, 6, 23, 0) 100%);
        border-top: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .vf-nav-preview {
        background: linear-gradient(to top,
            rgba(255, 255, 255, .97) 0%,
            rgba(255, 255, 255, .93) 30%,
            rgba(255, 255, 255, .64) 62%,
            rgba(255, 255, 255, 0) 100%);
    }

    /* ── محتوى أسفل الكارت يرصّ فوق الشريط بنفس مسافة التنفس ────
          (12px فوق منطقة الأزرار 68px) بدل اختفائه خلف الشريط
          الممتد لآخر بكسل — نفس إيقاع القاعدة الأصلية. */
    html.vf-bars-grad .body-feed-page .page--cover .vf-cover__bottom {
        bottom: calc(80px + var(--vf-app-bottom, 0px)) !important;
    }
}

/* تقليل الحركة (إعادة تثبيت بعد قواعد هذا القسم) */
@media (prefers-reduced-motion: reduce) {
    html.vf-bars-grad .body-post-open .vf-topbar::after { transition: none; }
    html.vf-bars-grad .body-feed-page .vf-nav-preview { transition: none; }
}

/* ═══ v4.59.0 (التحديث 59) — الوسائط داخل غلاف الفيد (تطبيق الأندرويد) ═══
   «فى تطبيق الأندرويد فى الفيد: لو الكارت مقال فيبقى التصميم كما هو
   بزر إقرأ المزيد، لكن لو فيديو يعرض الفيديو مباشرة جوة الغلاف بدون
   الزر وبدون مودال وبحسب الراتيو (الطولى = ملء الشاشة من أول بكسل
   لآخر بكسل / المستطيل والمربع بنفس مساحتهما)، مع الاحتفاظ بأرضية
   الكارت (صورة أو لون القسم) تحت البلاير — ولو صوت أو ألبوم صوتيات
   يعرض البلاير مباشرة جوة الغلاف بتصميمه كما هو والبلاى ليست تحته
   على شكل أعمدة كل عمود 3 ملفات تُسكرول بالجنب (الطولى لتقليب
   الكروت نفسها)، بلا أن يتجاوز طول الكارت».
   كل شيء محصور داخل html.vf-bars-grad (التطبيق فقط) +
   max-width:991.98px: المتصفح/PWA والديسكتوب لا يُمسّان — الحامل
   .vf-inline-media يُرندر فارغًا للجميع ولا يُفتح إلا بعد حقن البلاير
   (صنف vf-card--inline-media من initAppInlineMedia في feed.js)؛
   المشاهدات تُحصى بنفس نسب لوحة الأدمن (watch/listen percent عبر
   view-tracker.js كما وُثّق هناك). */
@media (max-width: 991.98px) {

    /* ── الحامل: مغلق افتراضيًا، يفتح للكارت الجاهز فقط ──────────
          z-index 1: فوق أرضية الغلاف (الصورة/اللون) وتحت طبقتى
          الأوفرلاى (z2) وعناصر المحتوى (z10) — فتبقى الشارات
          والكاتب والبيانات والعنوان فوق الوسائط دائمًا. */
    html.vf-bars-grad .body-feed-page .page--cover .vf-inline-media {
        display: none;
    }
    html.vf-bars-grad .body-feed-page .page--cover .vf-card--inline-media .vf-inline-media {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ── الفيديو: الحامل بكامل الكارت (من أول بكسل لآخر بكسل) ────
          البلاير بنفس منطق الراتيو الحالى حرفيًا: vf-video-portrait
          يملأ الكارت بجسم cover (تايك توك) وvf-video-landscape
          يتمركز بنفس مساحته والأرضية ظاهرة حوله. */
    html.vf-bars-grad .body-feed-page .page--cover .vf-inline-media[data-post-format="video"] {
        position: absolute;
        inset: 0;
        z-index: 1;
    }
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-video-player-wrapper {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
    /* شريط التحكم انتقل داخل حاوية الراتيو (initAppInlineMedia) —
          صارت سياق الإرساء الخاص به فتلاصق الفيديو المعروض؛ للطولى
          (ملء الشاشة) يرتفع فوق كتلة العنوان السفلية (سطران عند
          80px + منطقة الشريط) بلا تداخل. */
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-video-adaptive {
        position: relative;
    }
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-video-adaptive.vf-video-portrait .vf-video-controls {
        bottom: calc(160px + var(--vf-app-bottom, 0px));
    }

    /* ── الصوت: الحامل بين البيانات العلوية وكتلة العنوان ─────────
          البلاير بتصميمه كما هو (غلاف + دائرة التقدم + الوقت) متمركزًا
          في المنطقة الوسطى، والبلاى ليست تحته — كله داخل ارتفاع
          الكارت بلا أى تجاوز (overflow مخفى احتياطًا). */
    html.vf-bars-grad .body-feed-page .page--cover .vf-inline-media[data-post-format="audio"] {
        position: absolute;
        inset-inline: 0;
        top: calc(148px + var(--vf-feed-bz, 0px));
        bottom: calc(150px + var(--vf-app-bottom, 0px));
        z-index: 1;
        overflow: hidden;
        padding: 0 10px;
    }
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-audio-player-wrapper {
        min-height: 0;
        height: auto;
        max-height: 100%;
        width: 100%;
        gap: 8px;
    }

    /* ── البلاى ليست: أعمدة × 3 ملفات تُسكرول بالجنب ──────────────
          grid بثلاثة صفوف وتدفق عمودي: كل عمود يحمل 3 ملفات والتمرير
          أفقي (السكرول الرأسى خاص بتقليب الكروت نفسها)؛ الأعمدة
          بعرض 148-168px والحبوب بنفس لغة حبوب الغلاف الحالية
          (داكن افتراضيًا / أبيض بحبر داكن في الثيم الفاتح = نفس
          قواعد v4.50). */
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-playlist {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: repeat(3, auto);
        grid-auto-columns: minmax(148px, 168px);
        column-gap: 6px;
        row-gap: 4px;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        flex: 0 0 auto;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px 0;
    }
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-playlist::-webkit-scrollbar {
        display: none;
    }
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-track {
        background: rgba(0, 0, 0, .45);
        border: 1px solid rgba(255, 255, 255, .14);
    }
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-track:hover {
        background: rgba(0, 0, 0, .62);
    }
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-track.active {
        background: rgba(231, 111, 81, .32);
        border-color: rgba(231, 111, 81, .55);
    }
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-track-name {
        color: rgba(255, 255, 255, .92);
        text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    }
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-track-num {
        background: rgba(255, 255, 255, .22);
        color: #fff;
    }
    /* الثيم الفاتح (التطبيق): نفس حبر الكارت الداكن فوق الأوفرلاى
          الأبيض — لغة v4.50 نفسها. */
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .vf-inline-media .vf-track {
        background: rgba(255, 255, 255, .72);
        border-color: rgba(15, 23, 42, .14);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .vf-inline-media .vf-track:hover {
        background: rgba(255, 255, 255, .95);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .vf-inline-media .vf-track.active {
        background: rgba(231, 111, 81, .22);
        border-color: rgba(231, 111, 81, .45);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .vf-inline-media .vf-track-name {
        color: #0f172a;
        text-shadow: 0 1px 3px rgba(255, 255, 255, .6);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .vf-inline-media .vf-track-num {
        background: rgba(15, 23, 42, .12);
        color: #0f172a;
    }
    /* صف الوقت فوق الأعمدة — نفس ثنائية الحبر */
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-time-row {
        color: rgba(255, 255, 255, .92);
        text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
        max-width: 340px;
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .vf-inline-media .vf-time-row {
        color: #0f172a;
        text-shadow: 0 1px 3px rgba(255, 255, 255, .6);
    }

    /* ── كتلة أسفل الكارت للوسائط المضمّنة: العنوان فقط ───────────
          الوسائط هى بطل الكارت (الخلاصة/الهاشتاجات/رائج/أسباب المتابعة
          تُخفى والعنوان بسطرين) — والأكشنز فى شريطها الثابت أسفل
          الشاشة كما هي (v4.55/v4.58) وعدّاد المشاهدات فى سطر
          البيانات كما هو. زر إقرأ المزيد يختفى (بلا مودال). */
    html.vf-bars-grad .body-feed-page .page--cover .vf-card--inline-media .vf-read-btn {
        display: none !important;
    }
    html.vf-bars-grad .body-feed-page .page--cover .vf-card--inline-media .vf-cover__summary,
    html.vf-bars-grad .body-feed-page .page--cover .vf-card--inline-media .vf-hashtags,
    html.vf-bars-grad .body-feed-page .page--cover .vf-card--inline-media .vf-cover__trending,
    html.vf-bars-grad .body-feed-page .page--cover .vf-card--inline-media .vf-cover__follow-reason {
        display: none !important;
    }
    html.vf-bars-grad .body-feed-page .page--cover .vf-card--inline-media .vf-cover__title {
        -webkit-line-clamp: 2;
        line-clamp: 2;
        margin-bottom: 0;
    }

    /* ── أوفرلاى أسفل الغلاف للوسائط المضمّنة: مقتصر على منطقة
          العنوان (32% بدل 65%) حتى لا يُغسل الفيديو الطولى — نفس
          المحطات واللغة (أسود / أبيض في الفاتح). */
    html.vf-bars-grad .body-feed-page .page--cover .vf-card--inline-media .vf-cover__shade-bottom {
        height: 32%;
        background: linear-gradient(to top, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0) 100%);
    }
    html.vf-bars-grad:not([data-bs-theme="dark"]) .body-feed-page .page--cover .vf-card--inline-media .vf-cover__shade-bottom {
        height: 32%;
        background: linear-gradient(to top, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, 0) 100%);
    }
}

/* الشاشات القصيرة: الغلاف الفنى يختفى (الأرضية نفسها تعرض الصورة)
   والحبوب تُضغط — البلاير + الأعمدة الثلاثة كاملة الوظيفة دائمًا */
@media (max-width: 991.98px) and (max-height: 719.98px) {
    html.vf-bars-grad .body-feed-page .vf-inline-media .amp-cover-wrap {
        display: none;
    }
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-track {
        padding: 6px 10px;
    }
}
@media (max-width: 991.98px) and (max-height: 639.98px) {
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-circular-player {
        width: 56px;
        height: 56px;
    }
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-play-btn {
        width: 40px;
        height: 40px;
    }
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-play-btn svg {
        width: 18px;
        height: 18px;
    }
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-time-row {
        font-size: 11px;
    }
}

/* تقليل الحركة (إعادة تثبيت بعد قواعد هذا القسم) */
@media (prefers-reduced-motion: reduce) {
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-track,
    html.vf-bars-grad .body-feed-page .vf-inline-media .vf-track.active {
        transition: none;
    }
}