/* =========================================================================
   Channel view page — TGD branding
   Mirrors the design language of learners/dashboard (animated/gradient hero,
   gold→lavender accent) and courses/{course} (white .rbt-shadow-box cards on a
   #f6f7fc surface, 16px radius, soft shadows). Scoped to .tgd-channel-show.
   ========================================================================= */

.tgd-channel-show {
    --tgd-surface: #f6f7fc;
    --tgd-card: #ffffff;
    --tgd-border: #e9ecf5;
    --tgd-shadow: 0 18px 40px rgba(23, 22, 54, 0.06);
    --tgd-shadow-sm: 0 8px 20px rgba(23, 22, 54, 0.05);
    --tgd-radius: 16px;
    --tgd-radius-sm: 12px;
    --tgd-ink: #201a70;
    --tgd-muted: #8a93ad;
    --tgd-blue: #2f57ef;
    --tgd-purple: #3f1190;
    --tgd-gold: #f2b705;
    --tgd-accent: linear-gradient(92deg, #f2b705 10%, #c89bff 90%);

    background: var(--tgd-surface);
    min-height: 100vh; /* surface fills the page, not just the content box */
}

/* ============================ Hybrid hero ============================ */
.tgd-channel-hero {
    position: relative;
    z-index: 0;
    /* Pure image band now — the hero content lives in its own section below. */
    min-height: 400px;
    background-color: #0d0a2b;
    /* Cover photos are ~1600x400 (4:1); cover + center fills any width and
       crops the sides on narrow screens rather than distorting the banner. */
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* With no copy on the banner, only a soft branded fade at the bottom edge
   remains (eases the transition into the content section below). */
.tgd-channel-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(var(--ch-scrim1-rgb, 13, 10, 43), 0) 55%,
            rgba(var(--ch-scrim2-rgb, 13, 10, 43), 0.28) 100%);
}

[x-cloak] {
    display: none !important;
}

/* Cover banner <img>: desktop uses the .tgd-channel-hero background-image; only
   the mobile stacked hero shows this (uncropped, natural aspect ratio). */
.tgd-channel-hero-banner {
    display: none;
}

/* Hero content section — sits BELOW the banner on a white band. */
.tgd-channel-hero-below {
    background: var(--tgd-card, #fff);
    border-bottom: 1px solid var(--tgd-border, #e9ecf5);
}

.tgd-channel-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* avatar top-aligns with the title */
    gap: 22px;
    padding: 26px 0 60px;
    color: #23263a;
}

/* Circular avatar in a brand-gradient ring (reuses the global :root palette). */
.tgd-channel-hero-avatar {
    flex: 0 0 auto;
    /* Half the 110px avatar (104 + ring) over the banner: the band's 26px
       top padding pushes it down first, so -(26 + 55) lands the midpoint
       exactly on the banner/band boundary. */
    margin-top: -81px;
    position: relative;
    z-index: 2;
    padding: 3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ch-title1, #f2b705), var(--ch-title2, #c89bff));
    box-shadow: 0 10px 26px rgba(23, 22, 54, 0.18);
    line-height: 0;
}

.tgd-channel-hero-avatar img {
    display: block;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    border: 0;
    background: transparent;
}

.tgd-channel-hero-body {
    flex: 1 1 280px;
    min-width: 0;
}

.tgd-channel-hero-name {
    margin: 0;
    font-size: clamp(2.2rem, 3.52vw, 3.3rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    color: #0d0f1a;
}

.tgd-channel-hero-name .tgd-hero-accent {
    color: var(--ch-tab-ink, #201a70); /* fallback if gradient-clip fails */
    /* On white, the darker brand pair keeps the gradient readable (the light
       title1/title2 accents were built for the dark scrim). */
    background: linear-gradient(92deg, var(--ch-tab-bg1, #201a70) 10%, var(--ch-tab-bg2, #3f1190) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tgd-channel-hero-headline-wrap {
    margin: 10px 0 0;
    max-width: 70ch;
}

.tgd-channel-hero-headline {
    margin: 0;
    font-size: 1.54rem;
    line-height: 1.5;
    color: #3d4353;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tgd-channel-hero-headline.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.tgd-channel-hero-headline-toggle {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.tgd-channel-hero-headline-toggle:hover {
    opacity: 0.85;
}

.tgd-channel-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    margin-top: 18px;
}

.tgd-channel-hero-meta .tgd-hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.37rem;
    color: #2a2740;
}

.tgd-channel-hero-meta .tgd-hero-stat i {
    /* Branded (cover-derived) instead of the static gold. */
    color: var(--ch-tab-bg1, var(--tgd-blue, #2f57ef));
}

.tgd-channel-hero-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.37rem;
    color: #2a2740;
}

.tgd-channel-hero-rating .rating i.fa-star {
    color: var(--tgd-gold);
    font-size: 1.3rem;
}

.tgd-channel-hero-rating .rating i.off {
    color: rgba(13, 15, 26, 0.18);
}

/* Follow button: soft brand-tinted bg with brand-ink text (from the :root palette). */
.tgd-channel-hero-follow .btn {
    position: relative; /* anchor for the custom tooltip */
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    padding: 11px 22px;
    font-weight: 600;
    font-size: 1.3rem;
    border: 1px solid var(--tgd-border, #e9ecf5);
    background: var(--ch-tab-hover, #eef0fb);
    color: var(--ch-tab-ink, #201a70);
    transition: filter 0.15s ease;
}

/* Custom tooltip (replaces the native title="" bubble) — shows on hover/focus,
   floats above the button, styled to match the page. */
.tgd-channel-hero-follow .btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 240px;
    padding: 9px 13px;
    border-radius: 10px;
    background: rgba(20, 16, 40, 0.96);
    color: #fff;
    font-size: 1.07rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    z-index: 30;
}

/* little pointer */
.tgd-channel-hero-follow .btn[data-tooltip]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent;
    border-top-color: rgba(20, 16, 40, 0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 30;
}

.tgd-channel-hero-follow .btn[data-tooltip]:hover::after,
.tgd-channel-hero-follow .btn[data-tooltip]:focus-visible::after,
.tgd-channel-hero-follow .btn[data-tooltip]:hover::before,
.tgd-channel-hero-follow .btn[data-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.tgd-channel-hero-follow .btn:hover {
    filter: brightness(0.96);
}

/* Following = same soft bg, marked active with a brand-colored ring. */
.tgd-channel-hero-follow .btn.is-following {
    border-color: var(--ch-tab-ink, #201a70);
}

/* "Become a member" — primary (solid brand gradient) pill, sits before the soft
   follow button. Mirrors the membership-card / active-tab CTA. */
.tgd-channel-hero-join .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    padding: 11px 22px;
    font-weight: 600;
    font-size: 1.3rem;
    /* No transparent border here: with a gradient bg + border-box clip it would
       extrapolate the gradient's end colors into the border, showing as slivers
       at the edges. */
    border: 0;
    background: linear-gradient(135deg, var(--ch-tab-bg1, #201a70) 0%, var(--ch-tab-bg2, #3f1190) 100%);
    color: var(--ch-tab-text, #fff);
    transition: filter 0.15s ease;
}

.tgd-channel-hero-join .btn:hover {
    filter: brightness(1.07);
}

/* The action buttons (Become a member + Follow) sit on their own row below the
   stats at every width — they no longer mix into the stats line. */
.tgd-channel-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    /* Right edge of the hero row; row-reverse keeps "Become a member" (first
       in markup, so it stacks on top on mobile) the right-most button here. */
    flex-direction: row-reverse;
    margin-left: auto;
    align-self: center;
}

@media (max-width: 575px) {
    /* Stacked hero: the cover shows as a full-width uncropped banner, with the
       avatar + content stacked below it on a white strip (dark text). */
    .tgd-channel-hero {
        background-image: none !important; /* desktop bg-image off; use the <img> */
        background-color: #fff;
        min-height: auto;
        display: block;
        overflow: visible;
    }

    .tgd-channel-hero::after {
        display: none; /* no dark scrim over the light content */
    }

    .tgd-channel-hero-banner {
        display: block;
        width: 100%;
        height: auto;
    }

    .tgd-channel-hero-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding: 0 18px 44px;
        color: #2a2740; /* dark text on white */
        /* Stacked layout sits on white — no glass panel here. */
        width: 100%;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }

    .tgd-channel-hero-avatar {
        margin-top: -45px; /* half the 90px avatar over the banner */
    }

    .tgd-channel-hero-avatar img {
        width: 84px;
        height: 84px;
    }

    .tgd-channel-hero-body {
        flex: none;
        width: 100%;
    }

    /* solid black name on the white strip (no gradient on mobile) */
    .tgd-channel-hero-name .tgd-hero-accent {
        background: none;
        -webkit-text-fill-color: #000;
        color: #000;
    }

    .tgd-channel-hero-headline-wrap {
        margin-left: auto;
        margin-right: auto;
    }

    .tgd-channel-hero-headline {
        color: #000;
    }

    .tgd-channel-hero-headline-toggle {
        color: var(--tgd-ink, #201a70);
    }

    .tgd-channel-hero-meta {
        justify-content: center;
        gap: 8px 14px;
    }

    .tgd-channel-hero-meta .tgd-hero-stat,
    .tgd-channel-hero-rating {
        color: #2a2740;
    }

    .tgd-channel-hero-actions {
        justify-content: center;
        flex-direction: row;
        width: 100%;
        margin-left: 0;
    }

    .tgd-channel-hero-follow,
    .tgd-channel-hero-join {
        flex-basis: 100%;
        text-align: center; /* stack + center the buttons on phones */
    }

    /* Tabs no longer float over a dark image — sit them just below the hero.
       Higher specificity than the global -60px rule that appears later. */
    .tgd-channel-show .tgd-channel-content-wrap .advance-tab-button {
        margin-top: 8px;
    }
}

/* ============================ Tab nav ============================ */
.tgd-channel-show .advance-tab-button {
    /* The hero content now sits in its own band, so the tab bar flows normally
       below it instead of floating -60px up over the banner. */
    margin-top: 30px;
    position: relative;
    z-index: 3;
    text-align: center; /* center the shrink-wrapped pill bar */
}

/* Segmented pill control — the housing shares the same full radius as its
   buttons so the curvature reads as one continuous shape (matches course-show).
   inline-flex makes the housing hug the pills instead of stretching full width. */
.tgd-channel-show #channel-page-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    vertical-align: top;
    gap: 4px;
    padding: 6px;
    background: var(--tgd-card);
    border: 1px solid var(--tgd-border);
    border-radius: 9999px;
    box-shadow: 0 10px 28px rgba(23, 22, 54, 0.07);
    list-style: none;
    margin: 0;
    max-width: 100%;
}

.tgd-channel-show #channel-page-tabs li {
    margin: 0;
}

.tgd-channel-show #channel-page-tabs .tab-button {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    border-radius: 9999px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ch-tab-ink, #201a70);
    border: 0;
    background: transparent;
    transition: color 0.15s ease, background 0.15s ease;
}

/* Kill the theme's sliding underline indicator — the pill IS the indicator. */
.tgd-channel-show #channel-page-tabs .tab-button::after,
.tgd-channel-show #channel-page-tabs .tab-button::before {
    display: none;
}

.tgd-channel-show #channel-page-tabs .tab-button:hover {
    color: var(--ch-tab-ink, #201a70);
    background: var(--ch-tab-hover, #f1f3fa);
}

/* Active pill: a gradient across the two brand hues from the cover image, with
   contrast-aware text. Falls back to the navy->purple brand gradient. */
.tgd-channel-show #channel-page-tabs .tab-button.active {
    color: var(--ch-tab-text, #fff);
    background: linear-gradient(135deg, var(--ch-tab-bg1, #201a70) 0%, var(--ch-tab-bg2, #3f1190) 100%);
}

.tgd-channel-show #channel-page-tabs .tab-button:focus-visible {
    outline: 2px solid var(--ch-tab-bg1, #201a70);
    outline-offset: 2px;
}

/* On smaller screens the extra channel tabs wrap, so soften the housing from a
   full pill to a rounded rectangle (matches course-show's mobile treatment). */
@media (max-width: 991px) {
    .tgd-channel-show #channel-page-tabs {
        border-radius: 18px;
    }
}

.tgd-channel-hero-follow .btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ============================ Cards / surfaces ============================ */
.tgd-channel-show .tgd-channel-filters-section {
    background: var(--tgd-card);
    border: 1px solid var(--tgd-border);
    border-radius: var(--tgd-radius);
    box-shadow: var(--tgd-shadow);
}

/* Post card — one consistent surface for featured + feed. */
.tgd-channel-show .tgd-post-content-wrapper,
.tgd-channel-show .tgd-featured-posts-swiper .blog-content-wrapper {
    background: var(--tgd-card);
    border: 1px solid var(--tgd-border);
    border-radius: var(--tgd-radius);
    box-shadow: var(--tgd-shadow);
    padding: 24px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tgd-channel-show .tgd-post-content-wrapper:hover,
.tgd-channel-show .tgd-featured-posts-swiper .blog-content-wrapper:hover {
    box-shadow: 0 22px 48px rgba(23, 22, 54, 0.1);
    transform: translateY(-2px);
}

.tgd-channel-show .tgd-post-channel-image img,
.tgd-channel-show .post-thumbnail img {
    border-radius: var(--tgd-radius-sm);
}

.tgd-channel-show .tgd-post-content-wrapper h5 a,
.tgd-channel-show .tgd-featured-posts-swiper .blog-content-wrapper h5 a {
    color: var(--tgd-ink);
    font-weight: 700;
}

/* Date is metadata — calm it down (was 1.5rem / 24px). */
.tgd-channel-show .tgd-post-date {
    font-size: 0.85rem !important;
    color: var(--tgd-muted) !important;
    font-weight: 500;
    margin-top: 4px;
}

.tgd-channel-show .social-share-block {
    border-top: 1px solid var(--tgd-border);
    margin-top: 16px;
    padding-top: 14px;
}

.tgd-channel-show .social-share-block .post-like a {
    color: var(--tgd-muted);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 18px;
}

.tgd-channel-show .social-share-block .post-like a:hover {
    color: var(--tgd-blue);
}

/* Zoom-room card — align to the surface system. */
.tgd-channel-show .zoom-room-card {
    text-align: left;
    background: var(--tgd-card, #fff) !important;
    border: 1px solid var(--tgd-border, #e9ecf5) !important;
    border-radius: var(--tgd-radius, 16px) !important;
    box-shadow: 0 8px 22px rgba(23, 22, 54, 0.08) !important;
    padding: 24px 26px !important;
}

.tgd-channel-show .zoom-room-card h4 {
    color: var(--tgd-ink, #201a70);
}

/* Upcoming-session rows: brand left accent instead of the clashing green. */
.tgd-channel-show .zoom-room-card .border-success {
    border-color: var(--ch-tab-bg1, var(--tgd-blue, #2f57ef)) !important;
}

/* Keep the green "join live" affordance, but as a clean pill. */
.tgd-channel-show .zoom-room-card .rbt-btn.bg-color-success {
    border-radius: 999px;
}

/* Uniform typography — match the standard post-card scale (title 1.92rem,
   body 1.4rem) instead of the theme's oversized h4 / .btn-lg. */
.tgd-channel-show .zoom-room-card h4 {
    font-size: 1.92rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 4px;
}

.tgd-channel-show .zoom-room-card p,
.tgd-channel-show .zoom-room-card ul,
.tgd-channel-show .zoom-room-card li {
    font-size: 1.4rem !important; /* the wrapper's 18px content rules otherwise win */
    line-height: 1.7;
}

/* Join button: normal pill instead of the theme's ~60px btn-lg. */
.tgd-channel-show .zoom-room-card .rbt-btn,
.tgd-channel-show .zoom-room-card .rbt-btn.btn-lg {
    height: 44px;
    line-height: 42px;
    padding: 0 22px;
    font-size: 1.4rem;
}

/* Lock overlay — branded, consistent radius (drops the inline 6px !important). */
.tgd-channel-show .tgd-post-content-lock-overlay {
    border-radius: var(--tgd-radius) !important;
    background: linear-gradient(180deg, rgba(13, 10, 43, 0.35) 0%, rgba(13, 10, 43, 0.72) 100%);
    backdrop-filter: blur(2px);
}

.tgd-channel-show .btn-join-to-unlock {
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Featured swiper card overrides the ad-hoc utilities for a consistent look. */
.tgd-channel-show .tgd-featured-posts-swiper {
    background: transparent !important;
}

.tgd-channel-show .tgd-featured-posts-swiper .blog-content-wrapper {
    min-height: auto;
    padding: 22px;
}

.tgd-channel-show .tgd-featured-posts-swiper .blog-content-wrapper.rounded-3 {
    border-radius: var(--tgd-radius);
}

/* Members + membership cards inherit the surface. */
.tgd-channel-show .tgd-channel-membership-tab .rbt-card,
.tgd-channel-show #channel-tab-members .rbt-card,
.tgd-channel-show .rbt-card.variation-01 {
    border-radius: var(--tgd-radius);
    border: 1px solid var(--tgd-border);
    box-shadow: var(--tgd-shadow-sm);
}

/* Section headings on the post tabs. */
.tgd-channel-show .tgd-featured-posts-section h5 {
    color: var(--tgd-ink);
    font-weight: 800;
}

/* ===================== Branded ambient background ===================== */
/* The content area is neutral white; a soft, oversized brand gradient washes
   over it and GSAP slowly pans it (see channel-show-page js). Decorative, sits
   below the content. color-mix keeps the vibrant brand hues at a low opacity;
   the rgba line is a fallback for browsers without color-mix. */
.tgd-channel-show .tgd-channel-content-wrap {
    position: relative;
    background: #fff;
    /* Fill the viewport below the hero so the white + brand-gradient background
       doesn't stop mid-page (leaving a hard band) when a tab has little content. */
    min-height: calc(100vh - 400px);
}

.tgd-channel-show .tgd-channel-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(125deg,
            rgba(var(--ch-scrim1-rgb, 32, 26, 112), 0.10) 0%,
            rgba(var(--ch-scrim2-rgb, 63, 17, 144), 0.05) 60%,
            transparent 100%);
    background: linear-gradient(125deg,
            color-mix(in srgb, var(--ch-tab-bg1, #201a70) 15%, transparent) 0%,
            color-mix(in srgb, var(--ch-title2, #c89bff) 9%, transparent) 40%,
            color-mix(in srgb, var(--ch-tab-bg2, #3f1190) 13%, transparent) 75%,
            transparent 100%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
}

/* keep the real content above the background layer */
.tgd-channel-show .tgd-channel-content-wrap > .container {
    position: relative;
    z-index: 1;
}

/* ============================ Home tab ============================ */
/* Structural only — brand colors are layered on later via the palette vars. */
.tgd-channel-show .tgd-channel-home {
    padding: 8px 0 32px;
}

/* Narrow the Home content + hero to 80% of the container on desktop (a 20%
   reduction for breathing room on the sides); full width on mobile. The hero
   matches the Home width so its avatar/name/follow align with the page content. */
@media (min-width: 992px) {
    .tgd-channel-show .tgd-channel-home > .container,
    .tgd-channel-show .tgd-channel-hero > .container,
    .tgd-channel-show .tgd-channel-about > .container {
        max-width: 80%;
    }
}

/* ----- Conversion CTA banner ----- */
.tgd-channel-show .tgd-home-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    margin-bottom: 30px;
    border-radius: var(--tgd-radius);
    background: var(--tgd-surface, #f6f7fc);
    background: color-mix(in srgb, var(--ch-tab-bg1, #201a70) 8%, #fff);
    border: 1px solid var(--tgd-border, #e9ecf5);
    border-color: color-mix(in srgb, var(--ch-tab-bg1, #201a70) 18%, var(--tgd-border, #e9ecf5));
}

.tgd-channel-show .tgd-home-cta-text {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.tgd-channel-show .tgd-home-cta-text h5 {
    margin: 0 0 3px;
    font-size: 1.69rem;
    font-weight: 800;
    /* Branded heading (extracted primary) — dark enough to read on the soft
       light-brand CTA background; falls back to the static navy ink. */
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

.tgd-channel-show .tgd-home-cta-text p {
    margin: 0;
    font-size: 1.3rem;
    line-height: 1.45;
    color: var(--tgd-muted, #8a93ad);
}

.tgd-channel-show .tgd-home-cta-action {
    flex: 0 0 auto;
}

.tgd-channel-show .tgd-home-cta-action .btn {
    border: 0;
    border-radius: 999px;
    padding: 11px 26px;
    font-weight: 700;
    font-size: 1.37rem;
    white-space: nowrap;
    cursor: pointer;
    color: var(--ch-tab-text, #fff);
    background: linear-gradient(135deg, var(--ch-tab-bg1, #201a70) 0%, var(--ch-tab-bg2, #3f1190) 100%);
    transition: filter 0.15s ease;
}

.tgd-channel-show .tgd-home-cta-action .btn:hover {
    filter: brightness(1.07);
}

@media (max-width: 575px) {
    .tgd-channel-show .tgd-home-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .tgd-channel-show .tgd-home-cta-action .btn {
        width: 100%;
    }
}

.tgd-channel-show .tgd-home-section {
    margin-bottom: 36px;
}

.tgd-channel-show .tgd-home-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.tgd-channel-show .tgd-home-section-title {
    margin: 0;
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.1;
    color: #000;
}

.tgd-channel-show .tgd-home-section-title a {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.tgd-channel-show .tgd-home-section-title a:hover {
    color: var(--ch-tab-ink, var(--tgd-blue));
}

.tgd-channel-show .tgd-home-section-title i {
    font-size: 0.6em;
}

/* Carousel arrows */
.tgd-channel-show .tgd-home-carousel-nav {
    display: inline-flex;
    gap: 8px;
}

.tgd-channel-show .tgd-home-prev,
.tgd-channel-show .tgd-home-next {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--tgd-border);
    background: var(--tgd-card);
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.tgd-channel-show .tgd-home-prev:hover,
.tgd-channel-show .tgd-home-next:hover {
    background: var(--ch-tab-hover, #f1f3fa);
}

.tgd-channel-show .tgd-home-prev.swiper-button-disabled,
.tgd-channel-show .tgd-home-next.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
}

/* Post card */
.tgd-channel-show .tgd-home-post-card,
.tgd-channel-show .tgd-home-collection-card {
    background: var(--tgd-card);
    border: 1px solid var(--tgd-border);
    border-radius: var(--tgd-radius);
    /* Tight, contained shadow so each card reads as its own surface (doesn't
       bleed into the neighbour across the carousel gap). */
    box-shadow: 0 6px 18px rgba(23, 22, 54, 0.09);
    /* visible so the meta tooltips can escape the card; the thumbnail rounds its
       own corners (below) since it no longer relies on the card clipping. */
    overflow: visible;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.tgd-channel-show .tgd-home-post-card:hover,
.tgd-channel-show .tgd-home-collection-card:hover {
    box-shadow: 0 14px 28px rgba(23, 22, 54, 0.14);
    transform: translateY(-2px);
}

.tgd-channel-show .tgd-home-post-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #eef0f6;
    overflow: hidden;
    border-radius: var(--tgd-radius) var(--tgd-radius) 0 0;
}

.tgd-channel-show .tgd-home-collection-card .tgd-home-post-thumb {
    aspect-ratio: 1 / 1;
}

.tgd-channel-show .tgd-home-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tgd-channel-show .tgd-home-post-thumb-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tgd-muted);
    font-size: 1.6rem;
}

/* Locked posts: dim the thumbnail so the gated state reads at a glance, with
   the "Locked" badge sitting on top. */
.tgd-channel-show .tgd-home-post-card.is-locked .tgd-home-post-thumb img,
.tgd-channel-show .tgd-home-post-card.is-locked .tgd-home-post-thumb-empty {
    filter: brightness(0.62);
}

.tgd-channel-show .tgd-home-post-lock {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(13, 10, 43, 0.78);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    backdrop-filter: blur(2px);
}

.tgd-channel-show .tgd-home-post-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.tgd-channel-show .tgd-home-post-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
}

.tgd-channel-show .tgd-home-post-title a {
    color: #000;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tgd-channel-show .tgd-home-post-title a:hover {
    color: var(--ch-tab-ink, var(--tgd-blue));
}

.tgd-channel-show .tgd-home-post-excerpt {
    margin: 0;
    font-size: 1.4rem;
    color: var(--tgd-muted);
    line-height: 1.5;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tgd-channel-show .tgd-home-post-meta {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 1.38rem;
    color: var(--tgd-muted);
}

.tgd-channel-show .tgd-home-post-meta i {
    margin-right: 4px;
}

/* Custom tooltips on the meta items (date / likes / comments) — same look as
   the follow-button tooltip; shown on hover + keyboard focus. */
.tgd-channel-show .tgd-home-post-meta [data-tooltip],
.tgd-channel-show .tgd-comment-actions [data-tooltip] {
    position: relative;
}

.tgd-channel-show .tgd-home-post-meta [data-tooltip]::after,
.tgd-channel-show .tgd-comment-actions [data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 220px;
    padding: 7px 11px;
    border-radius: 9px;
    background: rgba(20, 16, 40, 0.96);
    color: #fff;
    font-size: 1.23rem; /* +50% per design feedback */
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
    z-index: 30;
}

.tgd-channel-show .tgd-home-post-meta [data-tooltip]::before,
.tgd-channel-show .tgd-comment-actions [data-tooltip]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: rgba(20, 16, 40, 0.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 30;
}

.tgd-channel-show .tgd-home-post-meta [data-tooltip]:hover::after,
.tgd-channel-show .tgd-comment-actions [data-tooltip]:hover::after,
.tgd-channel-show .tgd-home-post-meta [data-tooltip]:focus-visible::after,
.tgd-channel-show .tgd-comment-actions [data-tooltip]:focus-visible::after,
.tgd-channel-show .tgd-home-post-meta [data-tooltip]:hover::before,
.tgd-channel-show .tgd-comment-actions [data-tooltip]:hover::before,
.tgd-channel-show .tgd-home-post-meta [data-tooltip]:focus-visible::before,
.tgd-channel-show .tgd-comment-actions [data-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Wide latest-post card */
.tgd-channel-show .tgd-home-post-card.is-wide {
    flex-direction: row;
}

.tgd-channel-show .tgd-home-post-card.is-wide .tgd-home-post-thumb {
    flex: 0 0 42%;
    max-width: 42%;
    aspect-ratio: auto;
    /* thumb is on the left in the wide layout — round the left corners */
    border-radius: var(--tgd-radius) 0 0 var(--tgd-radius);
}

.tgd-channel-show .tgd-home-post-card.is-wide .tgd-home-post-body {
    padding: 20px 22px;
    justify-content: center;
}

.tgd-channel-show .tgd-home-post-card.is-wide .tgd-home-post-title {
    font-size: 1.44rem;
}

@media (max-width: 575px) {
    .tgd-channel-show .tgd-home-post-card.is-wide {
        flex-direction: column;
    }

    .tgd-channel-show .tgd-home-post-card.is-wide .tgd-home-post-thumb {
        flex: none;
        max-width: 100%;
        aspect-ratio: 16 / 9;
        /* stacks on top on mobile — round the top corners again */
        border-radius: var(--tgd-radius) var(--tgd-radius) 0 0;
    }
}

/* Vertical room inside Swiper's overflow:hidden so card shadows aren't sliced
   into a hard box below the row; negative margins keep the section spacing
   unchanged. Vertical only — horizontal padding would reveal the next slide. */
.tgd-channel-show .tgd-home-swiper {
    padding-top: 14px;
    padding-bottom: 44px;
    margin-top: -10px;
    margin-bottom: -34px;
}

.tgd-channel-show .tgd-home-swiper .swiper-slide {
    height: auto;
}

/* ============================ Membership tab ============================ */
/* Carousel slides stretch so cards in a row share one height. */
.tgd-channel-memberships-swiper .swiper-slide {
    height: auto;
    display: flex;
}

.tgd-channel-memberships-swiper .single-slide {
    width: 100%;
    display: flex;
}

.tgd-channel-memberships-swiper .swiper-wrapper {
    align-items: stretch;
}

/* ----- Discount banner ----- */
/* Soft, content-hugging offer banner (was a loud full-width brand gradient). */
.tgd-membership-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    text-align: center;
    width: fit-content;
    max-width: 100%;
    padding: 18px 34px;
    margin: 0 auto 32px;
    border-radius: var(--tgd-radius, 16px);
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
    background: color-mix(in srgb, var(--ch-tab-bg1, #201a70) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--ch-tab-bg1, #201a70) 18%, var(--tgd-border, #e9ecf5));
    box-shadow: var(--tgd-shadow, 0 18px 40px rgba(23, 22, 54, 0.06));
}

.tgd-membership-banner-icon {
    font-size: 26px;
    color: var(--ch-tab-bg1, var(--tgd-blue, #2f57ef));
}

.tgd-membership-banner-text h3 {
    margin: 0 0 4px;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

.tgd-membership-banner-text p {
    margin: 0;
    font-size: 0.95rem;
    color: #5a6178;
}

.tgd-membership-banner-time {
    margin-top: 8px !important;
    font-size: 0.85rem !important;
    color: #8a93ad;
}

.tgd-membership-banner-time i {
    margin-right: 4px;
}

/* ----- Membership card ----- */
/* Self-contained (also used inside the share modal); brand palette via the
   global --ch-tab-* vars with safe fallbacks. */
.tgd-mcard {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--tgd-card, #fff);
    border: 1px solid var(--tgd-border, #e9ecf5);
    border-radius: var(--tgd-radius, 16px);
    box-shadow: var(--tgd-shadow-sm, 0 8px 20px rgba(23, 22, 54, 0.05));
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.tgd-mcard:hover {
    box-shadow: 0 22px 48px rgba(23, 22, 54, 0.13);
    transform: translateY(-4px);
}

/* The viewer's active tier gets a branded ring. */
.tgd-mcard.is-current {
    border-color: var(--ch-tab-bg1, #201a70);
    box-shadow: 0 0 0 1px var(--ch-tab-bg1, #201a70), 0 22px 48px rgba(23, 22, 54, 0.13);
}

.tgd-mcard-media {
    position: relative;
    height: 170px;
    flex-shrink: 0;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ch-tab-bg1, #201a70) 0%, var(--ch-tab-bg2, #3f1190) 100%);
}

.tgd-mcard-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.tgd-mcard:hover .tgd-mcard-media img {
    transform: scale(1.04);
}

.tgd-mcard-ribbon {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 999px;
    background: #e8533f;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tgd-mcard-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ch-tab-ink, #201a70);
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.tgd-mcard-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 24px;
}

.tgd-mcard-title {
    margin: 0 0 10px;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    color: var(--tgd-ink, #201a70);
}

.tgd-mcard-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.tgd-mcard-price .amount {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tgd-ink, #201a70);
}

.tgd-mcard-price .period {
    font-size: 1rem;
    color: var(--tgd-muted, #8a93ad);
}

.tgd-mcard-price .was {
    font-size: 1rem;
    color: var(--tgd-muted, #8a93ad);
    text-decoration: line-through;
    opacity: 0.7;
}

.tgd-mcard-rating {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.tgd-mcard-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 6px;
}

.tgd-mcard-pill {
    padding: 0 10px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.tgd-mcard-desc {
    position: relative;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--tgd-muted, #8a93ad);
    margin: 4px 0 18px;
    text-align: left;
    overflow-wrap: anywhere;
}

.tgd-mcard-readmore {
    background: none;
    border: 0;
    padding: 0;
    margin-top: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ch-tab-ink, #201a70);
    text-decoration: underline;
}

/* description truncation (shared with the read-more toggle) */
.tgd-description-truncated {
    max-height: 7em;
    overflow: hidden;
    position: relative;
}

.tgd-description-content p,
.tgd-description-expanded p {
    margin: 0 0 0.5em;
}

.tgd-description-content p:last-child,
.tgd-description-expanded p:last-child {
    margin-bottom: 0;
}

.tgd-description-fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.5em;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--tgd-card, #fff) 100%);
    pointer-events: none;
}

/* benefits + actions sit at the bottom across cards of varying length */
.tgd-mcard-benefits {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--tgd-border, #e9ecf5);
}

.tgd-mcard-benefits ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.tgd-mcard-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--tgd-ink, #2a2740);
}

.tgd-mcard-benefits li i {
    margin-top: 2px;
    flex-shrink: 0;
    color: var(--ch-tab-bg1, #201a70);
    font-size: 0.9rem;
}

.tgd-mcard-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.tgd-mcard-btn {
    width: 100%;
    border: 1px solid transparent;
    cursor: pointer;
    border-radius: 999px;
    padding: 13px 22px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.tgd-mcard-btn--primary {
    background: linear-gradient(135deg, var(--ch-tab-bg1, #201a70) 0%, var(--ch-tab-bg2, #3f1190) 100%);
    color: var(--ch-tab-text, #fff);
}

.tgd-mcard-btn--primary:hover {
    filter: brightness(1.08);
}

.tgd-mcard-btn--ghost {
    background: var(--ch-tab-hover, #eef0fb);
    color: var(--ch-tab-ink, #201a70);
    border-color: var(--tgd-border, #e9ecf5);
}

.tgd-mcard-btn--ghost:hover {
    filter: brightness(0.98);
}

.tgd-mcard-share {
    display: inline-flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
    padding: 0;
    background: none;
    border: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tgd-muted, #8a93ad);
    cursor: pointer;
}

.tgd-mcard-share:hover {
    color: var(--ch-tab-ink, #201a70);
}

/* ----- Social proof ----- */
/* Branded social-proof panel with a course-style overlapping avatar stack. */
.tgd-membership-social-proof {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 44px; /* was hugging the next section */
    padding: 32px 30px;
    border-radius: var(--tgd-radius, 16px);
    background: color-mix(in srgb, var(--ch-tab-bg1, #201a70) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--ch-tab-bg1, #201a70) 15%, var(--tgd-border, #e9ecf5));
}

.tgd-membership-social-proof h4 {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

.tgd-membership-social-proof p {
    margin: 0 0 20px;
    color: var(--tgd-muted, #8a93ad);
}

.tgd-member-avatars {
    display: inline-flex;
    justify-content: center;
    padding-left: 11px; /* offset the first avatar's negative margin */
}

.tgd-member-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 2px solid #fff;
    margin-left: -11px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(23, 22, 54, 0.14);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tgd-member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tgd-member-avatar:hover {
    transform: translateY(-5px) scale(1.14);
    z-index: 5;
    border-color: var(--ch-tab-bg1, #2f57ef);
    box-shadow: 0 10px 20px rgba(23, 22, 54, 0.24);
}

.tgd-member-avatars-more {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ch-tab-text, #fff);
    background: linear-gradient(135deg, var(--ch-tab-bg1, #201a70), var(--ch-tab-bg2, #3f1190));
}

/* ============================ Posts tab ============================ */
/* Match the Home tab width on desktop. */
@media (min-width: 992px) {
    .tgd-channel-show .tgd-channels-post-wrap > .container {
        max-width: 80%;
    }
}

/* Header: title on the left, search + Filters button on the right. */
.tgd-channel-show .tgd-posts-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 22px;
}

.tgd-channel-show .tgd-posts-header-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    color: #000;
}

.tgd-channel-show .tgd-posts-header-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 320px;
    justify-content: flex-end;
}

/* Search */
.tgd-channel-show .tgd-posts-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    max-width: 380px;
}

.tgd-channel-show .tgd-posts-search-icon {
    position: absolute;
    left: 15px;
    color: var(--tgd-muted);
    pointer-events: none;
}

.tgd-channel-show .tgd-posts-search input {
    width: 100%;
    height: 46px;
    border: 1px solid var(--tgd-border);
    border-radius: 999px;
    padding: 0 40px;
    font-size: 1.3rem;
    color: var(--tgd-ink);
    background: var(--tgd-card);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tgd-channel-show .tgd-posts-search input:focus {
    border-color: var(--ch-tab-bg1, var(--tgd-blue));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch-tab-bg1, #2f57ef) 18%, transparent);
}

.tgd-channel-show .tgd-posts-search-clear {
    position: absolute;
    right: 9px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tgd-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tgd-channel-show .tgd-posts-search-clear:hover {
    background: var(--tgd-surface);
    color: var(--tgd-ink);
}

/* Filters button + count pill */
.tgd-channel-show .tgd-posts-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    border: 1px solid var(--tgd-border);
    background: var(--tgd-card);
    color: var(--tgd-ink);
    font-weight: 600;
    font-size: 1.3rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tgd-channel-show .tgd-posts-filters-btn:hover {
    background: var(--ch-tab-hover, var(--tgd-surface));
    border-color: var(--ch-tab-bg1, var(--tgd-border));
}

.tgd-channel-show .tgd-posts-filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 1.01rem;
    font-weight: 700;
    color: var(--ch-tab-text, #fff);
    background: linear-gradient(135deg, var(--ch-tab-bg1, #201a70), var(--ch-tab-bg2, #3f1190));
}

/* ----- Filters popup ----- */
.tgd-channel-show .tgd-posts-filters-modal {
    position: fixed;
    inset: 0;
    z-index: 10001; /* above the site header (.rbt-header-top z-index: 9999) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tgd-channel-show .tgd-posts-filters-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 10, 43, 0.5);
    backdrop-filter: blur(2px);
}

.tgd-channel-show .tgd-posts-filters-panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--tgd-card, #fff);
    border-radius: var(--tgd-radius);
    box-shadow: 0 30px 70px rgba(13, 10, 43, 0.35);
    overflow: hidden;
}

.tgd-channel-show .tgd-posts-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--tgd-border);
}

.tgd-channel-show .tgd-posts-filters-head h6 {
    margin: 0;
    font-size: 1.56rem;
    font-weight: 800;
    color: var(--tgd-ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tgd-channel-show .tgd-posts-filters-x {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--tgd-surface);
    color: var(--tgd-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tgd-channel-show .tgd-posts-filters-x:hover {
    background: var(--tgd-border);
}

.tgd-channel-show .tgd-posts-filters-body {
    padding: 20px 22px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tgd-channel-show .tgd-filter-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.tgd-channel-show .tgd-filter-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 1.24rem;
    font-weight: 600;
    color: var(--tgd-ink);
}

.tgd-channel-show .tgd-filter-label i {
    color: var(--ch-tab-bg1, var(--tgd-muted));
}

.tgd-channel-show .tgd-filter-select {
    height: 44px;
    border: 1px solid var(--tgd-border);
    border-radius: 10px;
    background-color: var(--tgd-card);
    color: var(--tgd-ink);
    font-size: 1.24rem;
}

.tgd-channel-show .tgd-filter-select:focus {
    border-color: var(--ch-tab-bg1, var(--tgd-blue));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch-tab-bg1, #2f57ef) 16%, transparent);
}

.tgd-channel-show .tgd-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 1.24rem;
    color: var(--tgd-ink);
    cursor: pointer;
}

.tgd-channel-show .tgd-filter-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--ch-tab-bg1, var(--tgd-blue));
    cursor: pointer;
}

.tgd-channel-show .tgd-posts-filters-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-top: 1px solid var(--tgd-border);
}

.tgd-channel-show .tgd-posts-filters-clear {
    border: 0;
    background: none;
    padding: 8px 4px;
    color: var(--tgd-muted);
    font-weight: 600;
    font-size: 1.24rem;
    cursor: pointer;
}

.tgd-channel-show .tgd-posts-filters-clear:hover {
    color: var(--tgd-ink);
}

.tgd-channel-show .tgd-posts-filters-done {
    border: 0;
    border-radius: 999px;
    padding: 11px 28px;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--ch-tab-text, #fff);
    background: linear-gradient(135deg, var(--ch-tab-bg1, #201a70), var(--ch-tab-bg2, #3f1190));
    cursor: pointer;
    transition: filter 0.15s ease;
}

.tgd-channel-show .tgd-posts-filters-done:hover {
    filter: brightness(1.07);
}

/* Alpine enter transition for the popup panel */
.tgd-pop-trans {
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.tgd-pop-start {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
}

.tgd-pop-end {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ----- Active filter chips ----- */
.tgd-channel-show .tgd-active-filters {
    margin-bottom: 18px;
}

.tgd-channel-show .tgd-filter-label-text {
    font-size: 1.17rem;
    font-weight: 600;
    color: var(--tgd-muted);
}

.tgd-channel-show .tgd-filter-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ch-tab-hover, var(--tgd-surface));
    color: var(--ch-tab-ink, var(--tgd-ink));
    font-size: 1.14rem;
    font-weight: 600;
}

.tgd-channel-show .tgd-filter-badge-close {
    border: 0;
    background: none;
    padding: 0;
    margin-left: 2px;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    opacity: 0.7;
}

.tgd-channel-show .tgd-filter-badge-close:hover {
    opacity: 1;
}

.tgd-channel-show .tgd-clear-all-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: none;
    padding: 4px 6px;
    color: var(--tgd-muted);
    font-size: 1.14rem;
    font-weight: 600;
    cursor: pointer;
}

.tgd-channel-show .tgd-clear-all-filters-btn:hover {
    color: #e8533f;
}

/* Mobile: title full width, tools below; popup as a bottom sheet. */
@media (max-width: 575px) {
    .tgd-channel-show .tgd-posts-header-title {
        font-size: 1.7rem;
        flex: 1 1 100%;
    }

    .tgd-channel-show .tgd-posts-header-tools {
        flex: 1 1 100%;
        justify-content: flex-start;
    }

    .tgd-channel-show .tgd-posts-search {
        max-width: none;
    }

    .tgd-channel-show .tgd-posts-filters-modal {
        align-items: flex-end;
        padding: 0;
    }

    .tgd-channel-show .tgd-posts-filters-panel {
        max-width: 100%;
        max-height: 90vh;
        border-radius: 18px 18px 0 0;
    }
}

/* ----- Skeleton loader + Load more (Posts tab feed) ----- */
.tgd-channel-show .tgd-posts-skeletons {
    /* Hidden by default; wire:loading.flex reveals it during a request. Without
       this the skeletons can render over the real feed when the tab morphs in. */
    display: none;
    flex-direction: column;
    gap: 30px;
}

.tgd-channel-show .tgd-post-skeleton {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--tgd-border);
    border-radius: var(--tgd-radius);
    background: var(--tgd-card);
}

.tgd-channel-show .tgd-skel {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, #e8ecf3 25%, #f3f5fa 45%, #e8ecf3 65%);
    background-size: 240% 100%;
    animation: tgdSkelShimmer 1.4s ease-in-out infinite;
}

.tgd-channel-show .tgd-skel-media {
    height: 260px;
    border-radius: 12px;
}

.tgd-channel-show .tgd-skel-line {
    height: 16px;
}

.tgd-channel-show .tgd-skel-title {
    height: 26px;
    width: 65%;
}

.tgd-channel-show .tgd-skel-meta {
    width: 38%;
}

.tgd-channel-show .tgd-skel-short {
    width: 85%;
}

@keyframes tgdSkelShimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tgd-channel-show .tgd-skel {
        animation: none;
    }
}

.tgd-channel-show .tgd-load-more-wrap {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 44px;
}

.tgd-channel-show .tgd-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 30px;
    border-radius: 999px;
    border: 1px solid var(--tgd-border);
    background: var(--tgd-card);
    color: var(--ch-tab-ink, var(--tgd-ink));
    font-weight: 700;
    font-size: 1.32rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tgd-channel-show .tgd-load-more-btn:hover {
    background: var(--ch-tab-hover, var(--tgd-surface));
    border-color: var(--ch-tab-bg1, var(--tgd-border));
}

/* ============ Posts feed card (matches the Home post-card treatment) ============ */
.tgd-channel-show .tgd-channels-post-wrap {
    padding-top: 0;
}

.tgd-channel-show .tgd-post-card {
    position: relative;
    padding: 0; /* media flush to the edges; the body carries its own padding */
    overflow: visible; /* let the meta tooltips escape the card */
    border-radius: var(--tgd-radius);
    border: 1px solid var(--tgd-border);
    background: var(--tgd-card);
    box-shadow: 0 6px 18px rgba(23, 22, 54, 0.09);
}

.tgd-channel-show .tgd-post-card:hover {
    box-shadow: 0 14px 30px rgba(23, 22, 54, 0.13);
    transform: none; /* full-width feed cards don't lift */
}

/* Media flush to the top, rounded top corners (image edge-to-edge). */
.tgd-channel-show .tgd-post-card-media {
    position: relative;
    border-radius: var(--tgd-radius) var(--tgd-radius) 0 0;
    overflow: hidden;
}

.tgd-channel-show .tgd-post-card-media .tgd-post-channel-image,
.tgd-channel-show .tgd-post-card-media .post-thumbnail,
.tgd-channel-show .tgd-post-card-media figure {
    margin: 0 !important;
}

.tgd-channel-show .tgd-post-card-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0 !important;
}

.tgd-channel-show .tgd-post-card-media .zoom-room-card {
    margin: 0 !important;
}

/* Body — padded, left-aligned. */
.tgd-channel-show .tgd-post-card-body {
    padding: 22px 26px 24px;
    text-align: left;
}

.tgd-channel-show .tgd-post-card-title {
    margin: 0 0 12px;
    font-size: 1.92rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: left;
}

/* Higher specificity than `.tgd-post-content-wrapper h5 a` (0,2,2) so the title
   is actually black on the white card, not the navy --tgd-ink. */
.tgd-channel-show .tgd-post-card-body .tgd-post-card-title a {
    color: #000;
    text-decoration: none;
}

.tgd-channel-show .tgd-post-card-body .tgd-post-card-title a:hover {
    color: var(--ch-tab-ink, var(--tgd-blue));
}

.tgd-channel-show .tgd-post-card-body .tgd-post-description-wrapper {
    text-align: left;
    color: var(--tgd-muted);
}

.tgd-channel-show .tgd-post-card-body .tgd-home-post-meta {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--tgd-border);
}

/* Locked badge (sits above the unlock overlay). */
.tgd-channel-show .tgd-post-card-lock {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(13, 10, 43, 0.78);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    backdrop-filter: blur(2px);
}

/* ============ Locked posts — real gating: poster, blurred teaser, unlock popup ============ */
/* Locked media: a poster (the channel/post teaser) — never the real player/URL. */
.tgd-channel-show .tgd-post-card-media-locked {
    cursor: pointer;
    background: #14122b;
}

.tgd-channel-show .tgd-post-card-media-locked .tgd-post-locked-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 2rem;
}

/* Withheld content: a blurred teaser stands in for the real (un-rendered) body. */
.tgd-channel-show .tgd-post-locked-teaser {
    text-align: left;
}

.tgd-channel-show .tgd-post-locked-blur {
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 1.67;
    color: var(--tgd-muted);
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

.tgd-channel-show .tgd-post-upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ch-tab-ink, var(--tgd-blue)) 12%, #fff);
    color: var(--ch-tab-ink, var(--tgd-blue));
    font-weight: 700;
    font-size: 1.15rem;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.tgd-channel-show .tgd-post-upgrade-btn:hover {
    filter: brightness(0.96);
}

/* Locked meta items open the popup too. */
.tgd-channel-show .tgd-post-card-body .tgd-home-post-meta [role="button"] {
    cursor: pointer;
}

/* ---- Unlock popup (Patreon-style) ---- */
.tgd-channel-show .tgd-post-unlock {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.tgd-channel-show .tgd-post-unlock-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 10, 43, 0.62);
    backdrop-filter: blur(3px);
}

.tgd-channel-show .tgd-post-unlock-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    padding: 40px 34px 34px;
    border-radius: 20px;
    /* Soft, light brand-tinted panel — a low % of the brand primary over white,
       with a subtle brand edge. Reads as the channel's colour without going dark. */
    background: color-mix(in srgb, var(--ch-tab-bg1, #201a70) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--ch-tab-bg1, #201a70) 16%, #fff);
    color: var(--ch-tab-ink, #201a70);
    text-align: center;
    box-shadow: 0 30px 80px rgba(23, 22, 54, 0.28);
    animation: tgdUnlockPop 0.22s ease;
}

@keyframes tgdUnlockPop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.tgd-channel-show .tgd-post-unlock-x {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: color-mix(in srgb, var(--ch-tab-ink, #201a70) 55%, #fff);
    font-size: 1.3rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tgd-channel-show .tgd-post-unlock-x:hover {
    background: color-mix(in srgb, var(--ch-tab-ink, #201a70) 10%, transparent);
    color: var(--ch-tab-ink, #201a70);
}

.tgd-channel-show .tgd-post-unlock-avatar {
    display: block;
    width: 92px;
    height: 92px;
    margin: 0 auto 22px;
    border-radius: 50%;
    object-fit: cover;
    /* Brand-accent ring + soft glow, tying the avatar to the cover palette. */
    border: 3px solid var(--ch-title2, #8b5cf6);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--ch-title2, #8b5cf6) 16%, transparent);
}

.tgd-channel-show .tgd-post-unlock-title {
    margin: 0 0 8px;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--ch-tab-ink, #201a70);
}

.tgd-channel-show .tgd-post-unlock-sub {
    margin: 0 0 26px;
    font-size: 1.25rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--ch-tab-ink, #201a70) 62%, #fff);
}

.tgd-channel-show .tgd-post-unlock-join {
    display: block;
    width: 100%;
    padding: 15px 20px;
    border: 0;
    border-radius: 12px;
    /* Match the channel's primary-CTA style (hero join / membership / pricing
       buttons all use this): the tab-bg gradient with the palette's
       contrast-checked tab-text — not the light title2 accent. */
    background: linear-gradient(135deg, var(--ch-tab-bg1, #201a70) 0%, var(--ch-tab-bg2, #3f1190) 100%);
    color: var(--ch-tab-text, #fff);
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.tgd-channel-show .tgd-post-unlock-join:hover {
    filter: brightness(1.08);
}

.tgd-channel-show .tgd-post-unlock-explore {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 6px;
    border: 0;
    background: transparent;
    color: var(--ch-tab-bg1, var(--tgd-blue, #2f57ef));
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
}

.tgd-channel-show .tgd-post-unlock-explore:hover {
    text-decoration: underline;
}

/* ============ Feed excerpts (full content lives on the post page) ============ */
.tgd-channel-show .tgd-post-excerpt {
    margin: 0 0 12px;
    font-size: 1.4rem;
    line-height: 1.7;
    color: var(--tgd-muted);
}

.tgd-channel-show .tgd-post-readmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ch-tab-ink, var(--tgd-blue));
    text-decoration: none;
    transition: gap 0.15s ease, opacity 0.15s ease;
}

.tgd-channel-show .tgd-post-readmore:hover {
    gap: 9px;
    opacity: 0.85;
}

/* ===== Tall/portrait videos in feed cards: cap the height and letterbox the
   sides (like other feeds) instead of rendering a 9:16 clip at full towering
   height. The native <video> gets a max-height + object-fit: contain + black
   side bars; landscape clips stay under the cap and render normally. ===== */
.tgd-channel-show .tgd-post-card[data-tgd-channel-post-type="video"] .tgd-post-card-media video {
    display: block;
    width: 100%;
    max-height: 600px;
    object-fit: contain;
    background: #000;
}

/* Video posts: let the Share / language popups escape. The menus are absolutely
   positioned and were clipped by the media's overflow:hidden, so the Share menu
   opened invisibly. Make the video media overflow-visible and round the <video>
   itself (the media no longer clips the top corners). */
.tgd-channel-show .tgd-post-card[data-tgd-channel-post-type="video"] .tgd-post-card-media {
    overflow: visible;
}

.tgd-channel-show .tgd-post-card[data-tgd-channel-post-type="video"] .tgd-post-card-media video {
    border-radius: var(--tgd-radius) var(--tgd-radius) 0 0;
}

/* ===== Filter popup — post-type cards + radio groups (light panel) ===== */
.tgd-channel-show .tgd-filter-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tgd-channel-show .tgd-filter-card {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border: 1.5px solid var(--tgd-border, #e9ecf5);
    border-radius: 12px;
    background: var(--tgd-card, #fff);
    color: var(--tgd-ink, #201a70);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.tgd-channel-show .tgd-filter-card i {
    font-size: 1.15rem;
    opacity: 0.7;
}

.tgd-channel-show .tgd-filter-card:hover {
    border-color: color-mix(in srgb, var(--ch-tab-bg1, #2f57ef) 45%, var(--tgd-border, #e9ecf5));
}

.tgd-channel-show .tgd-filter-card.is-active {
    border-color: var(--ch-tab-bg1, #2f57ef);
    background: color-mix(in srgb, var(--ch-tab-bg1, #2f57ef) 8%, #fff);
    box-shadow: inset 0 0 0 1px var(--ch-tab-bg1, #2f57ef);
}

.tgd-channel-show .tgd-filter-card.is-active i {
    opacity: 1;
    color: var(--ch-tab-bg1, #2f57ef);
}

.tgd-channel-show .tgd-filter-card-count {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--tgd-muted, #8a93ad);
}

.tgd-channel-show .tgd-filter-card.is-active .tgd-filter-card-count {
    color: var(--ch-tab-bg1, #2f57ef);
}

.tgd-channel-show .tgd-filter-radios {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tgd-channel-show .tgd-filter-radio {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 7px 2px;
    cursor: pointer;
    font-size: 1.24rem;
    color: var(--tgd-ink, #201a70);
}

.tgd-channel-show .tgd-filter-radio input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tgd-channel-show .tgd-filter-radio-dot {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--tgd-ink, #201a70) 25%, #fff);
    position: relative;
    transition: border-color 0.15s ease;
}

.tgd-channel-show .tgd-filter-radio input:checked + .tgd-filter-radio-dot {
    border-color: var(--ch-tab-bg1, #2f57ef);
}

.tgd-channel-show .tgd-filter-radio input:checked + .tgd-filter-radio-dot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--ch-tab-bg1, #2f57ef);
}

.tgd-channel-show .tgd-filter-radio-count {
    color: var(--tgd-muted, #8a93ad);
    font-size: 1.08rem;
    font-weight: 500;
}

.tgd-channel-show .tgd-filter-divider {
    height: 1px;
    background: var(--tgd-border, #e9ecf5);
    margin: 12px 0 4px;
}

/* ===== Channel-brand the filter UI (was the static TGD ink/gray) ===== */
.tgd-channel-show .tgd-posts-search input,
.tgd-channel-show .tgd-posts-filters-btn,
.tgd-channel-show .tgd-filter-label,
.tgd-channel-show .tgd-filter-check,
.tgd-channel-show .tgd-filter-card,
.tgd-channel-show .tgd-filter-radio {
    color: var(--ch-tab-ink, var(--tgd-ink));
}

.tgd-channel-show .tgd-posts-search-icon {
    color: var(--ch-tab-bg1, var(--tgd-muted));
}

/* Darker, more readable feed excerpt (was the light --tgd-muted). */
.tgd-channel-show .tgd-post-excerpt {
    color: #3d4353;
}

/* ===== Featured toggle switch (visible on/off, branded) ===== */
.tgd-channel-show .tgd-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    cursor: pointer;
    font-size: 1.24rem;
    color: var(--ch-tab-ink, var(--tgd-ink));
}

.tgd-channel-show .tgd-filter-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tgd-channel-show .tgd-filter-toggle-track {
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tgd-ink, #201a70) 22%, #fff);
    position: relative;
    transition: background 0.18s ease;
}

.tgd-channel-show .tgd-filter-toggle-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(13, 10, 43, 0.28);
    transition: transform 0.18s ease;
}

.tgd-channel-show .tgd-filter-toggle input:checked + .tgd-filter-toggle-track {
    background: var(--ch-tab-bg1, #2f57ef);
}

.tgd-channel-show .tgd-filter-toggle input:checked + .tgd-filter-toggle-track::after {
    transform: translateX(18px);
}

.tgd-channel-show .tgd-filter-toggle-text i {
    color: var(--ch-tab-bg1, var(--tgd-muted));
}

/* Teleported filter popup: the .tgd-channel-show wrapper only carries the scoped
   CSS + tokens to <body>; strip its page surface/height so it adds no layout. */
.tgd-channel-show.tgd-teleport-scope {
    background: transparent;
    min-height: 0;
}

/* ===== Membership tab: "Your membership" panel + options grid ===== */
.tgd-membership-section-title {
    margin: 0 0 30px;
    font-size: 2.04rem;
    font-weight: 800;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

.tgd-my-membership-section {
    margin-bottom: 44px;
}

.tgd-my-membership {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: center;
}

.tgd-my-membership-card {
    flex: 0 0 300px;
    max-width: 300px;
}

.tgd-my-membership-aside {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tgd-my-membership-aside h4 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

.tgd-my-membership-aside p {
    margin: 0;
    color: var(--tgd-muted, #8a93ad);
    line-height: 1.6;
}

.tgd-my-membership-explore {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 11px 22px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ch-tab-bg1, #2f57ef) 12%, #fff);
    color: var(--ch-tab-ink, var(--tgd-blue, #2f57ef));
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
    transition: filter 0.15s ease;
}

.tgd-my-membership-explore:hover {
    filter: brightness(0.97);
    color: var(--ch-tab-ink, var(--tgd-blue, #2f57ef));
}

/* Options — flexbox (not grid) so a full set lays out 4 per row while 1–2 cards
   stay centered instead of hugging the left. */
.tgd-memberships-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-bottom: 40px;
}

.tgd-membership-cell {
    flex: 0 1 calc(25% - 18px);
    max-width: 300px;
    display: flex; /* let the card fill the cell height (equal-height rows) */
}

@media (max-width: 1199px) {
    .tgd-membership-cell {
        flex-basis: calc(33.333% - 16px);
    }
}

@media (max-width: 991px) {
    .tgd-membership-cell {
        flex-basis: calc(50% - 12px);
        max-width: none;
    }

    .tgd-my-membership-card {
        flex-basis: 260px;
    }
}

@media (max-width: 575px) {
    .tgd-membership-cell {
        flex-basis: 100%;
    }

    .tgd-my-membership-card {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* ===== Membership card: generic benefits hidden → highlight the creator description ===== */
/* Actions pin to the card bottom (the benefits list that used to do this is hidden). */
.tgd-mcard-actions {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--tgd-border, #e9ecf5);
}

/* Small branded label above a real, creator-written description. */
.tgd-mcard-desc-label {
    display: block;
    margin: 8px 0 6px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

/* The creator's description gets readable ink + a brand accent rail. */
.tgd-mcard-desc.is-highlighted {
    color: #3a4051;
    padding-left: 13px;
    border-left: 3px solid color-mix(in srgb, var(--ch-tab-bg1, #2f57ef) 55%, #fff);
}

/* ===== Membership card: title/price/button bumps + branding, outline CTA, social width ===== */
.tgd-mcard-title {
    font-size: 1.75rem; /* +40% from 1.25rem */
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

.tgd-mcard-price .amount {
    font-size: 2.4rem; /* +20% from 2rem */
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

.tgd-mcard-price .period,
.tgd-mcard-price .was {
    font-size: 1.2rem;
}

.tgd-mcard-btn {
    font-size: 1.2rem; /* +20% from 1rem */
}

/* Neutral outline "Learn more" button below Join. */
.tgd-mcard-btn--outline {
    background: transparent;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
    border-color: color-mix(in srgb, var(--ch-tab-bg1, #201a70) 32%, var(--tgd-border, #e9ecf5));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-decoration: none;
}

.tgd-mcard-btn--outline:hover {
    background: var(--ch-tab-hover, #eef0fb);
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

/* Social-proof panel matches its content width (was full-width). */
.tgd-membership-social-proof {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== "Your membership": centered single card + member footer ===== */
.tgd-my-membership {
    justify-content: center;
}

.tgd-mcard-member {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--tgd-border, #e9ecf5);
}

.tgd-mcard-member-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(23, 22, 54, 0.14);
    flex: 0 0 auto;
}

.tgd-mcard-member-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    text-align: left;
    min-width: 0;
}

.tgd-mcard-member-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tgd-mcard-member-since {
    font-size: 0.95rem;
    color: var(--tgd-muted, #8a93ad);
    cursor: default;
}

/* ===== About tab: content in a clean white card (readable on the tinted bg) ===== */
.tgd-channel-about {
    padding: 8px 0 40px;
}

.tgd-channel-about .tgd-about-card {
    background: var(--tgd-card, #fff);
    border: 1px solid var(--tgd-border, #e9ecf5);
    border-radius: var(--tgd-radius, 16px);
    box-shadow: var(--tgd-shadow-sm, 0 8px 20px rgba(23, 22, 54, 0.05));
    padding: 34px 38px;
    text-align: left;
}

.tgd-channel-about .tgd-about-content {
    color: var(--tgd-ink, #201a70);
    line-height: 1.7;
    font-size: 1.15rem;
    overflow-wrap: anywhere;
}

.tgd-channel-about .tgd-about-content :where(h1, h2, h3, h4, h5, h6) {
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

.tgd-channel-about .tgd-about-empty {
    margin: 0;
    color: var(--tgd-muted, #8a93ad);
}

@media (max-width: 575px) {
    .tgd-channel-about .tgd-about-card {
        padding: 24px 20px;
    }
}

/* +30% on the membership description label + body. */
.tgd-mcard-desc-label {
    font-size: 1.07rem; /* 0.82rem × 1.3 */
}

.tgd-description-content {
    font-size: 1.17rem; /* 0.9rem × 1.3 */
}

/* Price amount: neutral black (not the branded ink). */
.tgd-mcard-price .amount {
    color: #000;
}

/* Normalize the creator's rich-text description: force one size on EVERY nested
   tag (p / headings / spans / li) so their HTML can't blow out the card layout. */
.tgd-description-content,
.tgd-description-content * {
    font-size: 14px !important;
}

/* ===== About content: uniform typography (headings / paragraphs / lists)
   regardless of the tags + inline styles the creator's editor produced. ===== */
.tgd-about-content h1 { font-size: 2rem !important; }
.tgd-about-content h2 { font-size: 1.65rem !important; }
.tgd-about-content h3 { font-size: 1.4rem !important; }
.tgd-about-content h4 { font-size: 1.28rem !important; }
.tgd-about-content h5 { font-size: 1.2rem !important; }
.tgd-about-content h6 { font-size: 1.15rem !important; }

.tgd-about-content h1,
.tgd-about-content h2,
.tgd-about-content h3,
.tgd-about-content h4,
.tgd-about-content h5,
.tgd-about-content h6 {
    font-weight: 800 !important;
    line-height: 1.3;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70)) !important;
    margin: 1.5em 0 0.5em;
}

.tgd-about-content > :first-child {
    margin-top: 0 !important;
}

.tgd-about-content p,
.tgd-about-content li {
    font-size: 1.15rem !important;
    line-height: 1.7;
}

.tgd-about-content p {
    margin: 0 0 1em;
}

.tgd-about-content ul,
.tgd-about-content ol {
    margin: 0 0 1em;
    padding-left: 1.6em;
}

.tgd-about-content ul { list-style: disc !important; }
.tgd-about-content ol { list-style: decimal !important; }

.tgd-about-content li {
    margin-bottom: 0.4em;
}

/* Inline tags inherit their block's normalized size (kills stray inline sizes). */
.tgd-about-content span,
.tgd-about-content font,
.tgd-about-content a,
.tgd-about-content strong,
.tgd-about-content b,
.tgd-about-content em,
.tgd-about-content i,
.tgd-about-content u,
.tgd-about-content small {
    font-size: inherit !important;
}

.tgd-about-content strong,
.tgd-about-content b {
    font-weight: 700 !important;
}

.tgd-about-content a {
    color: var(--ch-tab-ink, var(--tgd-blue, #2f57ef));
    text-decoration: underline;
}

.tgd-about-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* About content: everything black EXCEPT headings (and anything nested in them),
   which keep the channel brand colour. The :is() heading selectors are more
   specific than the `*` rule, so they win even over inline colours. */
.tgd-about-content,
.tgd-about-content * {
    color: #000 !important;
}

.tgd-about-content :is(h1, h2, h3, h4, h5, h6),
.tgd-about-content :is(h1, h2, h3, h4, h5, h6) * {
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70)) !important;
}

/* +20% on all about-content text (relative to the sizes set above). */
.tgd-about-content { font-size: 1.38rem !important; }
.tgd-about-content h1 { font-size: 2.4rem !important; }
.tgd-about-content h2 { font-size: 1.98rem !important; }
.tgd-about-content h3 { font-size: 1.68rem !important; }
.tgd-about-content h4 { font-size: 1.54rem !important; }
.tgd-about-content h5 { font-size: 1.44rem !important; }
.tgd-about-content h6 { font-size: 1.38rem !important; }
.tgd-about-content p,
.tgd-about-content li { font-size: 1.38rem !important; }

/* ============================================================
   Members tab — search + tier pills + member cards + paging
   ============================================================ */
.tgd-channel-show .tgd-members-tab {
    padding-top: 4px;
    /* Constant bottom spacing whether or not the load-more button renders. */
    padding-bottom: 44px;
}

/* Header: count on the left, search on the right */
.tgd-channel-show .tgd-members-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
}

.tgd-channel-show .tgd-members-count {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--tgd-muted);
    white-space: nowrap;
}

.tgd-channel-show .tgd-members-count strong {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

.tgd-channel-show .tgd-members-search {
    flex: 1 1 300px;
    max-width: 360px;
}

/* Tier filter pills (replaces the old huge <select>) — a single-row chips
   rail that scrolls horizontally instead of wrapping to extra lines. */
.tgd-channel-show .tgd-members-tiers-wrap {
    position: relative;
    margin-bottom: 24px;
}

.tgd-channel-show .tgd-members-tiers {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 2px; /* room for the pills' focus ring */
    scrollbar-width: none; /* rail scrolls via chevrons/swipe, no bar */
    -ms-overflow-style: none;
}

.tgd-channel-show .tgd-members-tiers::-webkit-scrollbar {
    display: none;
}

/* Chevrons — only rendered (x-show) when the rail overflows that direction. */
.tgd-channel-show .tgd-members-tiers-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--tgd-border);
    background: var(--tgd-card, #fff);
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
    box-shadow: 0 6px 16px rgba(23, 22, 54, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tgd-channel-show .tgd-members-tiers-arrow:hover {
    background: var(--ch-tab-hover, var(--tgd-surface));
    border-color: var(--ch-tab-bg1, var(--tgd-border));
}

.tgd-channel-show .tgd-members-tiers-arrow.is-left {
    left: -12px;
}

.tgd-channel-show .tgd-members-tiers-arrow.is-right {
    right: -12px;
}

.tgd-channel-show .tgd-members-tier {
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--tgd-border);
    background: var(--tgd-card);
    color: var(--tgd-ink);
    font-size: 1.22rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tgd-channel-show .tgd-members-tier:hover {
    background: var(--ch-tab-hover, var(--tgd-surface));
    border-color: var(--ch-tab-bg1, var(--tgd-border));
}

.tgd-channel-show .tgd-members-tier.is-active {
    color: var(--ch-tab-text, #fff);
    border-color: transparent;
    background: linear-gradient(135deg, var(--ch-tab-bg1, #201a70) 0%, var(--ch-tab-bg2, #3f1190) 100%);
}

/* Members grid */
.tgd-channel-show .tgd-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
    transition: opacity 0.15s ease;
}

.tgd-channel-show .tgd-members-grid.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

/* Member card */
.tgd-channel-show .tgd-member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px 20px;
    border: 1px solid var(--tgd-border);
    border-radius: var(--tgd-radius);
    background: var(--tgd-card);
    box-shadow: 0 4px 14px rgba(23, 22, 54, 0.06);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.tgd-channel-show .tgd-member-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(23, 22, 54, 0.12);
    border-color: color-mix(in srgb, var(--ch-tab-bg1, #201a70) 22%, var(--tgd-border, #e9ecf5));
}

.tgd-channel-show .tgd-member-card-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--tgd-border), 0 6px 16px rgba(23, 22, 54, 0.12);
    margin-bottom: 12px;
}

.tgd-channel-show .tgd-member-card-name {
    margin: 0 0 8px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
    line-height: 1.25;
    word-break: break-word;
}

.tgd-channel-show .tgd-member-card-tiers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin-bottom: 10px;
    /* Clamp the row to the card (column-flex children otherwise grow to their
       nowrap pill's full text width) so the pills' ellipsis can kick in. */
    max-width: 100%;
    min-width: 0;
}

.tgd-channel-show .tgd-member-card-tier {
    display: inline-block;
    max-width: 100%;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
    background: color-mix(in srgb, var(--ch-tab-bg1, #201a70) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--ch-tab-bg1, #201a70) 18%, var(--tgd-border, #e9ecf5));
    /* Long tier names stay a single-line pill (full name in the title tooltip)
       instead of wrapping into an odd blob. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The "+N more" overflow pill (hover shows a tooltip listing hidden tiers). */
.tgd-channel-show .tgd-member-card-tier--more {
    color: var(--tgd-muted, #8a93ad);
    background: var(--tgd-surface, #f6f7fc);
    border-color: var(--tgd-border, #e9ecf5);
    cursor: help;
    position: relative;
    overflow: visible; /* the ellipsis clip would cut the tooltip bubble off */
}

/* Instant CSS tooltip (native title is too slow/subtle to discover). */
.tgd-channel-show .tgd-member-card-tier--more::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    z-index: 5;
    width: max-content;
    max-width: 220px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(var(--ch-scrim1-rgb, 13, 10, 43), 0.95);
    color: #fff;
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: normal;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 10px 24px rgba(13, 10, 43, 0.25);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Caret under the bubble. */
.tgd-channel-show .tgd-member-card-tier--more::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(var(--ch-scrim1-rgb, 13, 10, 43), 0.95);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.tgd-channel-show .tgd-member-card-tier--more:hover::after,
.tgd-channel-show .tgd-member-card-tier--more:hover::before,
.tgd-channel-show .tgd-member-card-tier--more:focus-visible::after,
.tgd-channel-show .tgd-member-card-tier--more:focus-visible::before {
    opacity: 1;
    visibility: visible;
}

.tgd-channel-show .tgd-member-card-tier--more:hover::after,
.tgd-channel-show .tgd-member-card-tier--more:focus-visible::after {
    transform: translateX(-50%) translateY(0);
}

.tgd-channel-show .tgd-member-card-tier--more:focus-visible {
    outline: 2px solid var(--ch-tab-bg1, #201a70);
    outline-offset: 2px;
}

.tgd-channel-show .tgd-member-card-since {
    margin-top: auto;
    padding-top: 4px;
    font-size: 1.08rem;
    font-weight: 500;
    color: var(--tgd-muted);
    cursor: default;
}

/* Empty state spans the whole grid */
.tgd-channel-show .tgd-members-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 60px 20px;
    text-align: center;
    color: var(--tgd-muted);
}

.tgd-channel-show .tgd-members-empty i {
    font-size: 2.6rem;
    color: color-mix(in srgb, var(--ch-tab-bg1, #201a70) 40%, var(--tgd-muted, #8a93ad));
}

.tgd-channel-show .tgd-members-empty p {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--tgd-ink);
}

.tgd-channel-show .tgd-load-more-loading {
    display: inline-flex;
    align-items: center;
    color: var(--tgd-muted);
    font-size: 1.3rem;
    font-weight: 600;
}

/* More breathing room between the members grid and the load-more button
   (scoped here so the Posts feed keeps its tighter spacing). The tab's own
   padding-bottom carries the bottom gap, so the wrap doesn't double it. */
.tgd-channel-show .tgd-members-tab .tgd-load-more-wrap {
    margin-top: 36px;
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .tgd-channel-show .tgd-members-search {
        max-width: none;
        flex-basis: 100%;
    }

    .tgd-channel-show .tgd-members-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .tgd-channel-show .tgd-member-card-avatar {
        width: 72px;
        height: 72px;
    }
}

/* ============================================================
   Courses tab — preview of the creator's top courses (max 3)
   ============================================================ */
.tgd-channel-show .tgd-courses-tab {
    padding-top: 4px;
    padding-bottom: 20px;
}

.tgd-channel-show .tgd-courses-head {
    text-align: center;
    margin-bottom: 28px;
}

.tgd-channel-show .tgd-courses-title {
    margin: 0;
    font-size: 1.95rem;
    font-weight: 800;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

.tgd-channel-show .tgd-courses-count {
    display: block;
    margin-top: 6px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tgd-muted);
}

/* Centered so 1–2 cards still look balanced while 3 fill the row. */
.tgd-channel-show .tgd-courses-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
}

.tgd-channel-show .tgd-course-cell {
    flex: 0 1 340px;
    max-width: 360px;
    min-width: 0;
}

/* The reused course card fills its cell edge-to-edge. */
.tgd-channel-show .tgd-course-cell > .rbt-card,
.tgd-channel-show .tgd-course-cell .rbt-card {
    width: 100%;
    height: 100%;
}

.tgd-channel-show .tgd-courses-viewall {
    text-align: center;
    margin-top: 36px;
    margin-bottom: 44px;
}

.tgd-channel-show .tgd-courses-viewall-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 34px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ch-tab-bg1, #201a70) 0%, var(--ch-tab-bg2, #3f1190) 100%);
    color: var(--ch-tab-text, #fff);
    font-weight: 700;
    font-size: 1.35rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tgd-channel-show .tgd-courses-viewall-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(23, 22, 54, 0.2);
    color: var(--ch-tab-text, #fff);
}

.tgd-channel-show .tgd-courses-viewall-btn i {
    font-size: 1.2rem;
}

@media (max-width: 575px) {
    .tgd-channel-show .tgd-courses-grid {
        gap: 18px;
    }

    .tgd-channel-show .tgd-course-cell {
        flex-basis: 100%;
        max-width: 420px;
    }
}

/* ============================================================
   About tab — separate categories box under the description
   ============================================================ */
.tgd-channel-show .tgd-about-categories {
    margin-top: 24px;
}

.tgd-channel-show .tgd-about-box-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 4px;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

.tgd-channel-show .tgd-about-box-title i {
    color: var(--ch-tab-bg1, var(--tgd-blue, #2f57ef));
}

.tgd-channel-show .tgd-about-box-note {
    margin: 0 0 16px;
    font-size: 1.28rem;
    color: var(--tgd-muted);
}

.tgd-channel-show .tgd-about-categories-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tgd-channel-show .tgd-about-category {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 1.28rem;
    font-weight: 600;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
    background: color-mix(in srgb, var(--ch-tab-bg1, #201a70) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--ch-tab-bg1, #201a70) 20%, var(--tgd-border, #e9ecf5));
}

/* ============================================================
   Posts tab — sticky toolbar (branded take on .cl-sticky-search)
   Fixed bar revealed once the in-flow posts header scrolls away;
   lives in the body teleport, shown via Alpine `stuck`.
   ============================================================ */
.tgd-channel-show .tgd-posts-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030; /* under the filters popup (10001) */
    background: rgba(var(--ch-scrim1-rgb, 33, 29, 54), 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 16px;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.tgd-channel-show .tgd-posts-sticky.is-stuck {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .tgd-channel-show .tgd-posts-sticky {
        transition: none;
    }
}

.tgd-channel-show .tgd-posts-sticky-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 12px;
}

/* Search — dark glass variant of the in-flow .tgd-posts-search */
.tgd-channel-show .tgd-posts-sticky-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 220px;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    padding: 0 6px 0 18px;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.tgd-channel-show .tgd-posts-sticky-search:focus-within {
    /* --ch-title2 is the light accent — designed to pop on dark surfaces. */
    border-color: color-mix(in srgb, var(--ch-title2, #f2b705) 60%, transparent);
    background: rgba(255, 255, 255, 0.12);
}

.tgd-channel-show .tgd-posts-sticky-search > i {
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.tgd-channel-show .tgd-posts-sticky-search input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.3rem;
    outline: none;
    box-shadow: none;
}

.tgd-channel-show .tgd-posts-sticky-search input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.tgd-channel-show .tgd-posts-sticky-clear {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tgd-channel-show .tgd-posts-sticky-clear:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Filters button — dark variant of .tgd-posts-filters-btn */
.tgd-channel-show .tgd-posts-sticky .tgd-posts-filters-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.tgd-channel-show .tgd-posts-sticky .tgd-posts-filters-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: color-mix(in srgb, var(--ch-title2, #f2b705) 65%, transparent);
    color: var(--ch-title2, #f2b705);
}

/* Count pill: light accent fill + dark ink (the safe on-dark pairing). */
.tgd-channel-show .tgd-posts-sticky .tgd-posts-filters-count {
    background: var(--ch-title2, #f2b705);
    color: var(--ch-tab-ink, #201a70);
}

/* Active chips row — re-tint the light-theme chips styles for the dark panel. */
.tgd-channel-show .tgd-posts-sticky .tgd-active-filters {
    max-width: none;
    padding: 8px 0 2px;
    margin-bottom: 0 !important;
    border-bottom: 0;
}

.tgd-channel-show .tgd-posts-sticky .tgd-active-filters .d-flex {
    justify-content: center;
}

.tgd-channel-show .tgd-posts-sticky .tgd-filter-label-text {
    color: rgba(255, 255, 255, 0.65);
}

.tgd-channel-show .tgd-posts-sticky .tgd-clear-all-filters-btn {
    color: rgba(255, 255, 255, 0.65);
}

.tgd-channel-show .tgd-posts-sticky .tgd-clear-all-filters-btn:hover {
    color: #ff8d7a;
}

@media (max-width: 575px) {
    .tgd-channel-show .tgd-posts-sticky-search {
        min-width: 0;
        max-width: none;
        flex-basis: 100%;
    }
}

/* ============================================================
   Membership detail popup (Learn more / ?membership= links)
   ============================================================ */
.tgd-channel-show .tgd-mdetail-modal {
    position: fixed;
    inset: 0;
    z-index: 10001; /* above the site header, same tier as the filters popup */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.tgd-channel-show .tgd-mdetail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(var(--ch-scrim1-rgb, 13, 10, 43), 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.tgd-channel-show .tgd-mdetail-panel {
    position: relative;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--tgd-radius, 16px);
    background: var(--tgd-card, #fff);
    box-shadow: 0 30px 70px rgba(13, 10, 43, 0.35);
}

/* The included card carries its own chrome — flatten it against the panel. */
.tgd-channel-show .tgd-mdetail-panel .tgd-mcard {
    border: 0;
    box-shadow: none;
    margin: 0;
    max-width: none;
}

.tgd-channel-show .tgd-mdetail-x {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3; /* above the card cover image */
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--tgd-ink, #201a70);
    box-shadow: 0 6px 16px rgba(13, 10, 43, 0.25);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tgd-channel-show .tgd-mdetail-x:hover {
    background: #fff;
}

/* Bottom sheet on phones, matching the filters popup. */
@media (max-width: 575px) {
    .tgd-channel-show .tgd-mdetail-modal {
        align-items: flex-end;
        padding: 0;
    }

    .tgd-channel-show .tgd-mdetail-panel {
        max-width: 100%;
        border-radius: 18px 18px 0 0;
    }
}

/* ============================================================
   Standalone post page (channels/{slug}/post) — branded to the
   channel design system + discovery rails under the article
   ============================================================ */
/* The article reuses the feed's .tgd-post-card chrome (flush media + padded
   body). Page-specific bits only: */
.tgd-channel-show.tgd-post-page .tgd-post-card-title {
    color: #000; /* plain text here — not a link like the feed card's title */
}

/* Meta-row items that act (like / jump-to-comments / share). */
.tgd-channel-show.tgd-post-page .tgd-home-post-meta .is-action {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.tgd-channel-show.tgd-post-page .tgd-home-post-meta .is-action:hover {
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

.tgd-channel-show.tgd-post-page .tgd-home-post-meta .is-reacted {
    color: #e0245e;
}

/* Meta sits under the title here (feed cards pin it to the card bottom). */
.tgd-channel-show.tgd-post-page .tgd-home-post-meta {
    margin-top: 0;
    margin-bottom: 18px;
}

.tgd-channel-show.tgd-post-page {
    /* Brand-tinted wash behind the article (the white card pops on it);
       the rails below drop to neutral grey so the post stays the hero. */
    background: color-mix(in srgb, var(--ch-tab-bg1, #201a70) 6%, #fff);
    padding-top: 22px; /* tighter above the Back chip (theme gap is 40px) */
    padding-bottom: 0; /* the rails band closes the page flush */
    /* No side padding — .tgd-section-gap's 40px inset the full-bleed rails
       band; the article's own .container provides the gutters. */
    padding-left: 0;
    padding-right: 0;
}

/* Rails band — neutral grey so the branded article zone above stays the hero. */
.tgd-channel-show .tgd-post-rails {
    margin-top: 48px;
    padding: 44px 0 56px;
    background: var(--tgd-surface, #f6f7fc);
    border-top: 1px solid var(--tgd-border, #e9ecf5);
}

.tgd-channel-show .tgd-post-rails-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 26px;
}

.tgd-channel-show .tgd-post-rails-title {
    margin: 0;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

.tgd-channel-show .tgd-post-rails-channel {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 18px 8px 9px;
    border-radius: 999px;
    border: 1px solid var(--tgd-border, #e9ecf5);
    background: var(--tgd-card, #fff);
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tgd-channel-show .tgd-post-rails-channel:hover {
    background: var(--ch-tab-hover, var(--tgd-surface));
    border-color: var(--ch-tab-bg1, var(--tgd-border));
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

.tgd-channel-show .tgd-post-rails-channel img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

/* Rail cards sit on the tinted band — keep them clearly on white. */
.tgd-channel-show .tgd-post-rails .tgd-home-post-card {
    background: var(--tgd-card, #fff);
}

/* ============================================================
   Post page comments — sort, inline replies, likes w/ avatars
   ============================================================ */
.tgd-channel-show .tgd-comments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.tgd-channel-show .tgd-comments-head .title {
    margin: 0;
}

/* Sort: icon button + small menu (Top / Newest) */
.tgd-channel-show .tgd-comments-sort {
    position: relative;
}

.tgd-channel-show .tgd-comments-sort-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid var(--tgd-border);
    background: var(--tgd-card);
    color: var(--tgd-ink);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.tgd-channel-show .tgd-comments-sort-btn:hover {
    background: var(--ch-tab-hover, var(--tgd-surface));
    border-color: var(--ch-tab-bg1, var(--tgd-border));
}

.tgd-channel-show .tgd-comments-sort-btn i {
    font-size: 1.25rem;
}

.tgd-channel-show .tgd-comments-sort-btn i + i {
    margin-left: -3px;
}

.tgd-channel-show .tgd-comments-sort-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    min-width: 180px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--tgd-border);
    background: var(--tgd-card);
    box-shadow: 0 18px 40px rgba(23, 22, 54, 0.16);
}

.tgd-channel-show .tgd-comments-sort-menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    /* Both options carry the channel ink; the check + weight mark the active one. */
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
    font-size: 1.35rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.tgd-channel-show .tgd-comments-sort-menu button:hover {
    background: var(--ch-tab-hover, var(--tgd-surface));
}

.tgd-channel-show .tgd-comments-sort-menu button.is-active {
    font-weight: 800;
}

.tgd-channel-show .tgd-comment-composer {
    margin-bottom: 26px;
}

/* Comment rows */
.tgd-channel-show .tgd-comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tgd-channel-show .tgd-comment {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 0;
}

.tgd-channel-show .tgd-comment-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--tgd-border);
}

.tgd-channel-show .tgd-comment-main {
    flex: 1;
    min-width: 0;
}

.tgd-channel-show .tgd-comment-byline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.tgd-channel-show .tgd-comment-author {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

.tgd-channel-show .tgd-comment-time {
    font-size: 1.2rem;
    color: var(--tgd-muted);
    cursor: default;
}

.tgd-channel-show .tgd-comment-text {
    margin: 0 0 8px;
    font-size: 1.42rem;
    line-height: 1.6;
    color: #26282f;
    word-break: break-word;
}

/* Action row: heart, count, liker avatars, reply, delete */
.tgd-channel-show .tgd-comment-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
}

.tgd-channel-show .tgd-comment-actions button {
    border: 0;
    background: transparent;
    padding: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    color: var(--tgd-muted);
    font-size: 1.45rem;
    transition: color 0.15s ease, transform 0.1s ease;
}

.tgd-channel-show .tgd-comment-actions button:hover {
    color: var(--ch-tab-ink, var(--tgd-ink));
}

.tgd-channel-show .tgd-comment-actions button:active {
    transform: scale(0.9);
}

.tgd-channel-show .tgd-comment-like.is-reacted {
    color: #e0245e;
}

.tgd-channel-show .tgd-comment-like-count {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tgd-muted);
    margin-left: -4px;
}

.tgd-channel-show .tgd-comment-likers {
    display: inline-flex;
    align-items: center;
}

.tgd-channel-show .tgd-comment-likers img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--tgd-card, #fff);
    margin-left: -8px;
}

.tgd-channel-show .tgd-comment-likers img:first-child {
    margin-left: 0;
}

.tgd-channel-show .tgd-comment-delete:hover {
    color: #e8533f !important;
}

/* Inline reply composer */
.tgd-channel-show .tgd-comment-reply-composer {
    margin-top: 12px;
}

/* Post + Cancel side by side inside the composer. */
.tgd-channel-show .tgd-composer-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tgd-channel-show .tgd-composer-cancel {
    border: 0;
    background: transparent;
    padding: 4px 6px;
    color: var(--tgd-muted);
    font-size: 1.3rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease;
}

.tgd-channel-show .tgd-composer-cancel:hover {
    color: var(--tgd-ink);
}

/* Threaded replies — connector line like the reference design */
.tgd-channel-show .tgd-comment-children {
    list-style: none;
    margin: 10px 0 0;
    padding: 0 0 0 18px;
    border-left: 2px solid var(--tgd-border);
}

.tgd-channel-show .tgd-comment-children .tgd-comment {
    padding: 10px 0;
}

.tgd-channel-show .tgd-comment-children .tgd-comment-avatar {
    width: 34px;
    height: 34px;
}

/* Attachments */
.tgd-channel-show .tgd-comment-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 8px;
}

.tgd-channel-show .tgd-comment-attachment img {
    max-width: 180px;
    max-height: 180px;
    object-fit: cover;
    border-radius: 10px;
}

.tgd-channel-show .tgd-comment-attachment-video {
    max-width: 100%;
    border-radius: 10px;
}

.tgd-channel-show .tgd-comment-empty {
    padding: 18px 0;
    color: var(--tgd-muted);
    font-size: 1.4rem;
}

/* Channel chip above the article (reuses the rails-channel pill). */
.tgd-channel-show .tgd-post-topbar {
    margin-bottom: 14px;
    text-align: left;
}

/* ------ Comment composer, branded (root + inline reply) ------ */
.tgd-channel-show .tgd-composer .single-comment {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.tgd-channel-show .tgd-composer .comment-img {
    flex-shrink: 0;
}

.tgd-channel-show .tgd-composer .comment-img img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--tgd-border);
}

.tgd-channel-show .tgd-composer .comment-inner {
    flex: 1;
    min-width: 0;
}

.tgd-channel-show .tgd-composer textarea {
    border: 1px solid var(--tgd-border);
    border-radius: 14px;
    background: var(--tgd-card, #fff);
    padding: 12px 46px 12px 16px;
    font-size: 1.4rem;
    line-height: 1.55;
    color: var(--tgd-ink);
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tgd-channel-show .tgd-composer textarea::placeholder {
    color: var(--tgd-muted);
}

.tgd-channel-show .tgd-composer textarea:focus {
    outline: none;
    border-color: var(--ch-tab-bg1, var(--tgd-blue, #2f57ef));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch-tab-bg1, #2f57ef) 16%, transparent);
}

.tgd-channel-show .tgd-composer label[for] {
    color: var(--tgd-muted) !important;
}

.tgd-channel-show .tgd-composer label[for]:hover {
    color: var(--ch-tab-ink, var(--tgd-ink)) !important;
}

/* Post button → branded pill (overrides the theme's washed-out primary). */
.tgd-channel-show .tgd-composer button[type="submit"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 26px !important;
    border: 0;
    border-radius: 999px !important;
    background: linear-gradient(135deg, var(--ch-tab-bg1, #201a70) 0%, var(--ch-tab-bg2, #3f1190) 100%) !important;
    color: var(--ch-tab-text, #fff) !important;
    font-size: 1.32rem !important;
    font-weight: 700;
    line-height: 40px !important;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tgd-channel-show .tgd-composer button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(23, 22, 54, 0.18);
    color: var(--ch-tab-text, #fff) !important;
}

.tgd-channel-show .tgd-composer button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* Comment skeletons — hidden until wire:loading.flex reveals them. */
.tgd-channel-show .tgd-comment-skeletons {
    display: none;
    flex-direction: column;
    gap: 20px;
    padding: 14px 0;
}

.tgd-channel-show .tgd-comment-skel {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.tgd-channel-show .tgd-comment-skel-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tgd-channel-show .tgd-comment-skel-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.tgd-channel-show .tgd-comment-skel-name {
    height: 13px;
    width: 28%;
}

.tgd-channel-show .tgd-comment-skel-line {
    height: 13px;
    width: 72%;
}

/* Membership tab — empty state (channel has no published tiers). */
.tgd-channel-show .tgd-membership-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 480px;
    margin: 30px auto 40px;
    padding: 44px 34px;
    text-align: center;
    background: var(--tgd-card, #fff);
    border: 1px solid var(--tgd-border, #e9ecf5);
    border-radius: var(--tgd-radius, 16px);
    box-shadow: 0 8px 22px rgba(23, 22, 54, 0.06);
}

.tgd-channel-show .tgd-membership-empty-title {
    margin: 6px 0 0;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--ch-tab-ink, var(--tgd-ink, #201a70));
}

.tgd-channel-show .tgd-membership-empty-sub {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--tgd-muted, #8a93ad);
}

/* All-memberships popup — a wide clone of the Membership tab. */
.tgd-channel-show .tgd-memberships-panel {
    max-width: 1140px;
    padding: 34px 38px 30px;
}

/* The tab include expects the tab's centered context. */
.tgd-channel-show .tgd-memberships-panel .tgd-membership-tab-content {
    text-align: center;
}