/* View Posts (static/js/mobile-view-posts.js): the owner's content table for
 * one connected account, opened from Connected Accounts.
 *
 * A compact enterprise list, not a guest page: one header, a toolbar, hairline
 * rows. Colours are --vp-* tokens set for light, dark, an owner page colour
 * (--pc-*) and Glass. Every selector carries #vp-view-posts:not(#vpx) and
 * !important so the theme sweeps ([data-theme=light] * * * forcing icons
 * black) and the global button sweeps cannot reach in; text sets
 * -webkit-text-fill-color alongside color for the sweeps that force both.
 */

html body #vp-view-posts:not(#vpx) {
    --vp-bg: #f5f6f8;
    --vp-panel: #ffffff;
    --vp-ink: #0f172a;
    --vp-dim: #5b6576;
    --vp-faint: #8a93a3;
    --vp-line: #e3e6eb;
    --vp-soft: #eef0f3;
    --vp-field: #ffffff;
    --vp-btn: #0f172a;
    --vp-on-btn: #ffffff;
    --vp-good: #15803d;
    --vp-good-bg: #e7f6ec;
    --vp-warn: #a15c07;
    --vp-warn-bg: #fdf1dc;
    --vp-bad: #b42318;
    --vp-thumb: #e7e9ee;
    --vp-menu: #ffffff;
    --vp-shadow: 0 12px 32px rgba(15, 23, 42, 0.16), 0 1px 2px rgba(15, 23, 42, 0.08);
    position: fixed !important;
    inset: 0 !important;
    /* Above the drawers (1000000) and the install banner. */
    z-index: 1000002 !important;
    display: block !important;
    background: var(--vp-bg) !important;
    color: var(--vp-ink) !important;
    -webkit-text-fill-color: var(--vp-ink) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    color-scheme: light;
}
html body #vp-view-posts:not(#vpx)[hidden] { display: none !important; }
html body #vp-view-posts:not(#vpx).is-behind { visibility: hidden !important; pointer-events: none !important; }

html[data-theme="dark"] body #vp-view-posts:not(#vpx),
body[data-theme="dark"] #vp-view-posts:not(#vpx) {
    --vp-bg: #0b0b0c;
    --vp-panel: #161618;
    --vp-ink: #f4f4f5;
    --vp-dim: #a1a1aa;
    --vp-faint: #7c7c85;
    --vp-line: #2a2a2f;
    --vp-soft: #1f1f23;
    --vp-field: #0f0f11;
    --vp-btn: #f4f4f5;
    --vp-on-btn: #0b0b0c;
    --vp-good: #86efac;
    --vp-good-bg: rgba(34, 197, 94, 0.14);
    --vp-warn: #fcd34d;
    --vp-warn-bg: rgba(245, 158, 11, 0.16);
    --vp-bad: #fca5a5;
    --vp-thumb: #1f1f23;
    --vp-menu: #1c1c1f;
    --vp-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

/* An owner page colour: the palette the rest of the app uses. */
html[data-page-color] body #vp-view-posts:not(#vpx) {
    --vp-bg: var(--pc-page);
    --vp-panel: var(--pc-card);
    --vp-ink: var(--pc-ink);
    --vp-dim: var(--pc-dim);
    --vp-faint: var(--pc-faint);
    --vp-line: var(--pc-line);
    --vp-soft: var(--pc-soft);
    --vp-field: var(--pc-field);
    --vp-btn: var(--pc-btn);
    --vp-on-btn: var(--pc-on-btn);
    --vp-good: var(--pc-good);
    --vp-good-bg: var(--pc-soft);
    --vp-warn: var(--pc-warn);
    --vp-warn-bg: var(--pc-soft);
    --vp-bad: var(--pc-bad);
    --vp-thumb: var(--pc-soft);
    --vp-menu: var(--pc-card);
}

/* Glass: frosted sheet over the photo, white ink, the glass rim. */
html[data-appearance="glass"] body #vp-view-posts:not(#vpx) {
    --vp-bg: transparent;
    --vp-panel: rgba(255, 255, 255, 0.1);
    --vp-ink: #ffffff;
    --vp-dim: rgba(255, 255, 255, 0.76);
    --vp-faint: rgba(255, 255, 255, 0.58);
    --vp-line: rgba(255, 255, 255, 0.18);
    --vp-soft: rgba(255, 255, 255, 0.1);
    --vp-field: rgba(0, 0, 0, 0.22);
    --vp-btn: var(--gl-cta, #ffffff);
    --vp-on-btn: var(--gl-cta-ink, #0b0b0c);
    --vp-good: #a7f3c0;
    --vp-good-bg: rgba(34, 197, 94, 0.22);
    --vp-warn: #fde68a;
    --vp-warn-bg: rgba(245, 158, 11, 0.24);
    --vp-bad: #fecaca;
    --vp-thumb: rgba(255, 255, 255, 0.12);
    --vp-menu: rgba(28, 28, 32, 0.98);
    --vp-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    background: var(--gl-sheet, rgba(20, 20, 24, 0.55)) !important;
    -webkit-backdrop-filter: var(--gl-blur, blur(24px)) !important;
    backdrop-filter: var(--gl-blur, blur(24px)) !important;
    color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
html body #vp-view-posts:not(#vpx) *,
html body #vp-view-posts:not(#vpx) *::before,
html body #vp-view-posts:not(#vpx) *::after {
    box-sizing: border-box !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    /* Glass frosts every button and input it finds; here that draws a box
       around each icon, so only the menu keeps a blur (set below). */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html body #vp-view-posts:not(#vpx) :is(div, span, b, em, p, label, li, ul, header, input, select, button, i) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}
html body #vp-view-posts:not(#vpx) .vp-i {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    font-size: 13px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}
html body #vp-view-posts:not(#vpx) button {
    font: inherit !important;
    margin: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: none !important;
}
html body #vp-view-posts:not(#vpx) button:disabled { opacity: 0.5 !important; cursor: default; }
html body #vp-view-posts:not(#vpx) .vp-sr {
    position: absolute !important; width: 1px !important; height: 1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important;
}

html body #vp-view-posts:not(#vpx) .vp-shell {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    background: transparent !important;
}

/* -------------------------------------------------------------- header */
html body #vp-view-posts:not(#vpx) .vp-head {
    flex: 0 0 auto !important;
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 0 !important;
    background: var(--vp-panel) !important;
    border-bottom: 1px solid var(--vp-line) !important;
}
html[data-appearance="glass"] body #vp-view-posts:not(#vpx) .vp-head { background: rgba(255, 255, 255, 0.06) !important; }
html body #vp-view-posts:not(#vpx) .vp-bar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
}
html body #vp-view-posts:not(#vpx) .vp-iconbtn {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 1px solid var(--vp-line) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--vp-ink) !important;
}
html body #vp-view-posts:not(#vpx) .vp-plat {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 7px !important;
    background: var(--vp-soft) !important;
    color: var(--vp-ink) !important;
}
html body #vp-view-posts:not(#vpx) .vp-plat svg { width: 17px !important; height: 17px !important; display: block !important; }
html body #vp-view-posts:not(#vpx) .vp-plat.is-instagram { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7) !important; color: #fff !important; }
html body #vp-view-posts:not(#vpx) .vp-plat.is-youtube { background: #ff0000 !important; color: #fff !important; }
html body #vp-view-posts:not(#vpx) .vp-plat.is-facebook { background: #1877f2 !important; color: #fff !important; }
html body #vp-view-posts:not(#vpx) .vp-plat:is(.is-tiktok, .is-x, .is-threads) { background: #000 !important; color: #fff !important; }
html body #vp-view-posts:not(#vpx) .vp-plat * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html body #vp-view-posts:not(#vpx) .vp-plat svg [fill="currentColor"] { fill: #fff !important; fill-rule: evenodd !important; }
html body #vp-view-posts:not(#vpx) .vp-plat svg [stroke="currentColor"] { stroke: #fff !important; }
html body #vp-view-posts:not(#vpx) .vp-plat:not(.is-instagram):not(.is-youtube):not(.is-facebook):not(.is-tiktok):not(.is-x):not(.is-threads) * { color: var(--vp-ink) !important; -webkit-text-fill-color: var(--vp-ink) !important; }

html body #vp-view-posts:not(#vpx) .vp-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
html body #vp-view-posts:not(#vpx) .vp-title span {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--vp-dim) !important;
}
html body #vp-view-posts:not(#vpx) .vp-title b {
    font-size: 16px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body #vp-view-posts:not(#vpx) .vp-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border: 1px solid var(--vp-line) !important;
    border-radius: 8px !important;
    background: var(--vp-panel) !important;
    color: var(--vp-ink) !important;
    -webkit-text-fill-color: var(--vp-ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}
html body #vp-view-posts:not(#vpx) .vp-btn.is-primary {
    background: var(--vp-btn) !important;
    border-color: var(--vp-btn) !important;
    color: var(--vp-on-btn) !important;
    -webkit-text-fill-color: var(--vp-on-btn) !important;
}
html body #vp-view-posts:not(#vpx) .vp-btn.is-danger {
    background: var(--vp-bad) !important;
    border-color: var(--vp-bad) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
html[data-theme="dark"] body #vp-view-posts:not(#vpx) .vp-btn.is-danger { color: #0b0b0c !important; -webkit-text-fill-color: #0b0b0c !important; }
html body #vp-view-posts:not(#vpx) .vp-link {
    padding: 0 !important; border: 0 !important; background: none !important;
    text-decoration: underline !important; font-weight: 600 !important;
}

html body #vp-view-posts:not(#vpx) .vp-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin: 10px 0 12px !important;
    border: 1px solid var(--vp-line) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
html body #vp-view-posts:not(#vpx) .vp-stat {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 8px 10px !important;
    min-width: 0 !important;
    border-left: 1px solid var(--vp-line) !important;
}
html body #vp-view-posts:not(#vpx) .vp-stat:first-child { border-left: 0 !important; }
html body #vp-view-posts:not(#vpx) .vp-stat b {
    font-size: 15px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body #vp-view-posts:not(#vpx) .vp-stat:last-child b { font-size: 12px !important; line-height: 18px !important; }
html body #vp-view-posts:not(#vpx) .vp-stat span {
    font-size: 10.5px !important;
    color: var(--vp-dim) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body #vp-view-posts:not(#vpx) .vp-accounts {
    display: flex !important;
    gap: 0 !important;
    margin: 0 -16px !important;
    padding: 0 16px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}
html body #vp-view-posts:not(#vpx) .vp-accounts::-webkit-scrollbar { display: none !important; }
html body #vp-view-posts:not(#vpx) .vp-acct {
    flex: 0 0 auto !important;
    padding: 8px 12px 9px !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--vp-dim) !important;
    -webkit-text-fill-color: var(--vp-dim) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
html body #vp-view-posts:not(#vpx) .vp-acct.is-on {
    color: var(--vp-ink) !important;
    -webkit-text-fill-color: var(--vp-ink) !important;
    border-bottom-color: var(--vp-ink) !important;
}

/* ------------------------------------------------------------- toolbar */
html body #vp-view-posts:not(#vpx) .vp-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0 16px calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
    background: transparent !important;
}
html body #vp-view-posts:not(#vpx) .vp-tools {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    margin: 0 -16px !important;
    padding: 12px 16px 10px !important;
    background: var(--vp-bg) !important;
}
html[data-appearance="glass"] body #vp-view-posts:not(#vpx) .vp-tools { background: rgba(20, 20, 24, 0.35) !important; }
html body #vp-view-posts:not(#vpx) .vp-searchrow { display: flex !important; gap: 8px !important; }
html body #vp-view-posts:not(#vpx) .vp-search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid var(--vp-line) !important;
    border-radius: 8px !important;
    background: var(--vp-field) !important;
    color: var(--vp-faint) !important;
}
html body #vp-view-posts:not(#vpx) .vp-search input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--vp-ink) !important;
    -webkit-text-fill-color: var(--vp-ink) !important;
    font: inherit !important;
    font-size: 16px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
html body #vp-view-posts:not(#vpx) .vp-search input::placeholder { color: var(--vp-faint) !important; -webkit-text-fill-color: var(--vp-faint) !important; }
html body #vp-view-posts:not(#vpx) .vp-sort {
    position: relative !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    color: var(--vp-dim) !important;
}
html body #vp-view-posts:not(#vpx) .vp-sort select {
    height: 36px !important;
    padding: 0 28px 0 10px !important;
    margin: 0 !important;
    border: 1px solid var(--vp-line) !important;
    border-radius: 8px !important;
    background: var(--vp-field) !important;
    color: var(--vp-ink) !important;
    -webkit-text-fill-color: var(--vp-ink) !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}
html body #vp-view-posts:not(#vpx) .vp-sort .vp-i {
    position: absolute !important;
    right: 10px !important;
    font-size: 10px !important;
    pointer-events: none !important;
}
html body #vp-view-posts:not(#vpx) .vp-chips {
    display: flex !important;
    gap: 6px !important;
    margin: 10px -16px 0 !important;
    padding: 0 16px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}
html body #vp-view-posts:not(#vpx) .vp-chips::-webkit-scrollbar { display: none !important; }
html body #vp-view-posts:not(#vpx) .vp-chip {
    flex: 0 0 auto !important;
    height: 28px !important;
    padding: 0 11px !important;
    border: 1px solid var(--vp-line) !important;
    border-radius: 6px !important;
    background: var(--vp-panel) !important;
    color: var(--vp-dim) !important;
    -webkit-text-fill-color: var(--vp-dim) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}
html body #vp-view-posts:not(#vpx) .vp-chip.is-on {
    background: var(--vp-btn) !important;
    border-color: var(--vp-btn) !important;
    color: var(--vp-on-btn) !important;
    -webkit-text-fill-color: var(--vp-on-btn) !important;
}

/* ---------------------------------------------------------------- rows */
html body #vp-view-posts:not(#vpx) .vp-list {
    list-style: none !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    border: 1px solid var(--vp-line) !important;
    border-radius: 10px !important;
    background: var(--vp-panel) !important;
    overflow: hidden !important;
}
html body #vp-view-posts:not(#vpx) .vp-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 8px 10px 10px !important;
    margin: 0 !important;
    border-top: 1px solid var(--vp-line) !important;
    background: transparent !important;
    cursor: pointer;
    outline: none !important;
}
html body #vp-view-posts:not(#vpx) .vp-row:first-child { border-top: 0 !important; }
html body #vp-view-posts:not(#vpx) .vp-row:active,
html body #vp-view-posts:not(#vpx) .vp-row:focus-visible { background: var(--vp-soft) !important; }

html body #vp-view-posts:not(#vpx) .vp-thumb {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: var(--vp-thumb) !important;
}
html body #vp-view-posts:not(#vpx) .vp-thumb img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}
html body #vp-view-posts:not(#vpx) .vp-vid {
    position: absolute !important;
    left: 3px !important;
    bottom: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.66) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
html body #vp-view-posts:not(#vpx) .vp-vid .vp-i,
html body #vp-view-posts:not(#vpx) .vp-vid em {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 8px !important;
}
html body #vp-view-posts:not(#vpx) .vp-vid em {
    font-style: normal !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
}

html body #vp-view-posts:not(#vpx) .vp-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}
html body #vp-view-posts:not(#vpx) .vp-cap {
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body #vp-view-posts:not(#vpx) .vp-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    font-size: 12px !important;
    color: var(--vp-dim) !important;
    -webkit-text-fill-color: var(--vp-dim) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body #vp-view-posts:not(#vpx) .vp-meta.is-sub { color: var(--vp-faint) !important; -webkit-text-fill-color: var(--vp-faint) !important; display: block !important; }
html body #vp-view-posts:not(#vpx) .vp-dot {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: 3px !important;
    height: 3px !important;
    margin: 0 6px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    vertical-align: middle !important;
    opacity: 0.7 !important;
}
html body #vp-view-posts:not(#vpx) .vp-meta:not(.is-sub) .vp-dot { margin: 0 !important; }

html body #vp-view-posts:not(#vpx) .vp-side {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}
html body #vp-view-posts:not(#vpx) .vp-pill {
    display: inline-flex !important;
    align-items: center !important;
    height: 20px !important;
    padding: 0 7px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    background: var(--vp-soft) !important;
    color: var(--vp-dim) !important;
    -webkit-text-fill-color: var(--vp-dim) !important;
}
html body #vp-view-posts:not(#vpx) .vp-pill.is-published { background: var(--vp-good-bg) !important; color: var(--vp-good) !important; -webkit-text-fill-color: var(--vp-good) !important; }
html body #vp-view-posts:not(#vpx) .vp-pill.is-draft { background: var(--vp-warn-bg) !important; color: var(--vp-warn) !important; -webkit-text-fill-color: var(--vp-warn) !important; }
html body #vp-view-posts:not(#vpx) .vp-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--vp-dim) !important;
}
html body #vp-view-posts:not(#vpx) .vp-more:active { background: var(--vp-soft) !important; }

/* Skeleton rows while the first page loads. */
html body #vp-view-posts:not(#vpx) .vp-row.is-skel { cursor: default; }
html body #vp-view-posts:not(#vpx) .vp-row.is-skel .vp-main b,
html body #vp-view-posts:not(#vpx) .vp-row.is-skel .vp-main span {
    display: block !important;
    height: 10px !important;
    border-radius: 3px !important;
    background: var(--vp-soft) !important;
    animation: vp-pulse 1.2s ease-in-out infinite !important;
}
html body #vp-view-posts:not(#vpx) .vp-row.is-skel .vp-main b { width: 70% !important; }
html body #vp-view-posts:not(#vpx) .vp-row.is-skel .vp-main span { width: 40% !important; }
html body #vp-view-posts:not(#vpx) .vp-row.is-skel .vp-thumb { animation: vp-pulse 1.2s ease-in-out infinite !important; }
@keyframes vp-pulse { 50% { opacity: 0.5; } }

/* ------------------------------------------------ empty / error / foot */
html body #vp-view-posts:not(#vpx) .vp-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 48px 20px !important;
    margin-top: 2px !important;
    border: 1px dashed var(--vp-line) !important;
    border-radius: 10px !important;
    text-align: center !important;
    color: var(--vp-dim) !important;
}
html body #vp-view-posts:not(#vpx) .vp-state .vp-i { font-size: 20px !important; margin-bottom: 4px !important; color: var(--vp-faint) !important; }
html body #vp-view-posts:not(#vpx) .vp-state b { font-size: 15px !important; color: var(--vp-ink) !important; -webkit-text-fill-color: var(--vp-ink) !important; }
html body #vp-view-posts:not(#vpx) .vp-state span { font-size: 13px !important; max-width: 280px !important; }
html body #vp-view-posts:not(#vpx) .vp-state .vp-btn { margin-top: 10px !important; }
html body #vp-view-posts:not(#vpx) .vp-state.is-error .vp-i { color: var(--vp-bad) !important; }
html body #vp-view-posts:not(#vpx) .vp-foot {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 14px 0 !important;
    font-size: 12px !important;
    color: var(--vp-faint) !important;
    -webkit-text-fill-color: var(--vp-faint) !important;
}
html body #vp-view-posts:not(#vpx) .vp-foot.is-error { color: var(--vp-bad) !important; -webkit-text-fill-color: var(--vp-bad) !important; padding-top: 0 !important; }

/* ---------------------------------------------------------------- menu */
html body #vp-view-posts:not(#vpx) .vp-scrim {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5 !important;
    background: transparent !important;
}
html body #vp-view-posts:not(#vpx) .vp-menu {
    position: fixed !important;
    z-index: 6 !important;
    min-width: 212px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 4px !important;
    border: 1px solid var(--vp-line) !important;
    border-radius: 10px !important;
    background: var(--vp-menu) !important;
    box-shadow: var(--vp-shadow) !important;
}
html[data-appearance="glass"] body #vp-view-posts:not(#vpx) .vp-menu {
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
}
html body #vp-view-posts:not(#vpx) .vp-menu__item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 38px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--vp-ink) !important;
    -webkit-text-fill-color: var(--vp-ink) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
}
html body #vp-view-posts:not(#vpx) .vp-menu__item .vp-i { width: 16px !important; text-align: center !important; color: var(--vp-dim) !important; }
html body #vp-view-posts:not(#vpx) .vp-menu__item:active { background: var(--vp-soft) !important; }
html body #vp-view-posts:not(#vpx) .vp-menu__item.is-danger,
html body #vp-view-posts:not(#vpx) .vp-menu__item.is-danger .vp-i { color: var(--vp-bad) !important; -webkit-text-fill-color: var(--vp-bad) !important; }
html body #vp-view-posts:not(#vpx) .vp-menu.is-confirm { padding: 12px !important; width: 248px !important; }
html body #vp-view-posts:not(#vpx) .vp-menu.is-confirm p { margin: 0 0 10px !important; font-size: 14px !important; font-weight: 600 !important; }
html body #vp-view-posts:not(#vpx) .vp-menu__confirm { display: flex !important; justify-content: flex-end !important; gap: 8px !important; }